So you’ve integrated contextual deep linking into both your Android and iOS apps using Branch, right? Fantastic! Or if you haven’t, maybe you plan on getting started in just minutes by diving into our docs here for iOS and here for Android . But what about your Web App? This is where our super slick, all vanilla JS, Web SDK takes center stage. If you follow our blog regularly, it’s no secret we’ve thrown a lot of love into our Web SDK , but we wanted to go a step further and show you just how simple and powerful it is to use with an example app.
We’ve been developing a suite of example apps on all of our platforms – with both iOS and Android apps already built – and we thought it would make sense to build the first example Web App using AngularJS… after all, it’s fairly popular these days.
Welcome to Branchsters! A suite of shareable monster building apps on Android , iOS , and Web . Besides being really fun, Branchsters incorporates all the best features of Branch: deep linking and sharing. What better way to learn Branch than with a tutorial of how we built Branchsters from the ground up with AngularJS.
A preview of all the fun that you’ll build with Branchsters:
To start, we used Yeoman , Bower , and Grunt to generate boilerplate scaffolding for the app, install dependencies, and building. If you’re not familiar with Yeoman, it’s an incredible tool. Don’t worry because the tutorial walks you through every step. Before diving in, be sure to play around with the live version of the app.
When you’re ready to build the app, follow the Getting Started steps in the repo readme to install the required tools. This will get you a template AngularJS app which we’ll modify to build the Branchsters app. Once finished, simply run grunt to build a static AngularJS app that can be hosted on S3, or any other static service of your choice.
Functionality
The app boasts a set of five faces and five bodies, ranging from playful to… mildly scary. To add to the fun, you can choose from eight different colors, and of course name your Branchster. All of these four parameters are stored in the data object when a deep link is created in the main controller . We also make sure the app can handle deep link data in the load method of the controller, which enables it to display a Branchster shared by another user with a Branch deep link.
Putting this all together, when the user clicks the “Create Your Branchster” button, a deep link is generated, and five different sharing channels are generated: SMS, Facebook, Twitter, Pinterest, and Clipboard. Each of these channels, when clicked, creates a new link with the channel property set. The SMS feature makes use of the super handy sendSMS method from the Branch Web SDK . This method accepts the same data object as the link method, but it also accepts a phone number to which it texts a link!
So what happens when you click these links? This is the really awesome part. When a user clicks a link, they are directed to either the web or mobile apps for Branchster, based on the link settings in the Branch dashboard . If the user is redirected to the web app on a desktop environment, they are shown the same Branchster that the referring user created! Even more fun, they’re given the opportunity to remix it and make it their own, then share it themselves. Same is true if the user opens the link in the Android or iOS apps, they can view and remix the Branchster shared with them! Branchsters is a perfect example of the power of contextual deep links… one that we hope inspires you to create amazing sharing functionality in your app.
Moving forward
We never stop building and improving Branch, and are always thinking about the next thing we can do to service our growing developer community. Even though AngularJS is very popular, we don’t want to appear biased, so we make it just as easy to learn the Branch Web SDK no matter what JS framework flavor you enjoy. We think a ReactJS version of Branchsters makes sense next, so stay tuned!