Telerik blogs

By: Mehfuz Hossain and Stephen Forte

Building native apps can be challenging when you only have one developer and are targeting multiple device platforms . Also when you are doing some customer validation and quickly want to validate an idea, building an app for multiple platforms with two or three code bases is extremely tedious and inefficient.

The Telerik Platform provides a combination of tools and services that can help you quickly iterate your idea from idea to finish and let you write once, deploy and test your app in multiple platforms with just few clicks. Developers can bring-in their existing HTML5 and Javascript skills and can become an app hero overnight when bits and pieces are combined  correctly and as guided by the platform handbook (combination of online documentation you will find as you sign up).

You may have heard of the Yo! app that has been causing some ripples recently. The app can send your Friends a push notification containing “Yo” and that is about it. If you think that this is about as serious as a fart app, think again, serious Silicon Valley players are supporting Yo and the Yo app has raised well over $1.5m in venture funding.

Growing up on the East Coast, I think saying “Yo” is very East Coast (think Rocky Balboa or Tony Soprano), so in order to demonstrate the power of the Telerik Platform and stay true to our West Coast presence (think Mark Zuckerberg), we decided to recreate Yo with the Telerik Platform and call it “Dude”.

In this post, I will share my experience creating the “Dude” app that let you quickly nudge your friends through push notifications built using Telerik platform.

The app is comprised of the following features:

  • It sends device push notification to friends who are registered using Dude and have their app installed on their device

  • Uses device storage to locally save the users list. I have used Couchbase Lite and the Cordova Plugin for Couchbase for this.

  • It can access the native contacts app in the device to invite new friends via SMS.

  • Provides in-app user registration and login support.


Once completed the app roughly will have the following screens:



From a technology perspective, I have used Kendo Mobile with angular.js. The app also uses PushNotificaiton and Contacts plugin:




The first bit of sending push notification is to register your device. PushNotification plugin wraps the device specific logic and gives you rather simple javascript way to register and set your callbacks and send out notifications.

But before you can send/receive notification you need to generate certificate(s) from Apple developers portal and upload it to your backend services portal. In case of Android, you need to set the API key copied from the Google developers console.


More information on how to configure backend services for push notification is outlined in the following link:


http://docs.telerik.com/platform/appbuilder/sample-apps/sample-backend-services-pushnotifications

Backend Services SDK internally uses the push notification plugin to send out notifications and gives you rather consistent API methods to work with. You can include the SDK in your project in one of the following way:


CDN

https://bs-static.cdn.telerik.com/1.2.5/everlive.all.min.js


Bower Package


bower install everlive

Now I have also used Couchbase Lite Cordova plugin for storing user lists locally. It is possible to install it from plugins marketplace or right from the AppBuilder web-client IDE properties page:



Once everything is configured, I am ready to roll. I have used Google’s angular.js for separating my controller logic from view which gives me nice separation of concerns (SRP) and prevents me from repetitive code (DRY),

I just had to include angular.js in my index.html file and added ng-app directive in the <body> tag:


<script src="angular/angular.min.js"></script>


I’ve declared separate controller for each kendo view and grouped them in a controllers folder and also referenced them in my index.html :


<script src="controllers/home.js"></script>

<script src="controllers/account.js"></script>

<script src="controllers/main.js"></script>


Now within each view, I referenced the controller with the ng-controller directive in the following way:

<div class="app" data-role="view" id="login" ng-controller="AccountController" data-transition="slide">

   <ul class="list" ng-init="init('#login')">

       <li>

           <input type="text" placeholder="Username" ng-model="username" />

       </li>

       <li>

            <input type="number" pattern="[0-9]*" placeholder="Password" ng-model="password"/>

       </li>

       <li>

           <a ng-click="login($event)"><span>{{message}}</span></a>

           <div class="loader"/>

       </li>

       <li>

        <a href="#home" data-role="button">Go Back</a>

       </li>

   </ul>

</div>


Here you will notice the other ng-* directives that maps to the corresponding $scope methods and variable bindings.

In addition, I’ve initialized the couchbase lite database as the app starts in the following way:

if (window.cblite){

      window.cblite.getURL(function(err, url){

        if (!err){

           app.cbLiteUrl = url;

           // More code goes here

       }

      });

}


Other than the basic configuration as shown above, nothing is surprising with appBuilder which is used for building the app and is pretty straight-forward with flexibility of sharing codebase between web client, CLI (command line interface) and Visual Studio with appBuilder extension.



If I want to share the codebase with other team members, appBuilder also lets me configure my repository using GitHub. In this way you can start your project in the web client , import it in your Mac to finish app with Sublime Text and finally continue in the web client to build and deploy the app.

Using AppBuilder you can quickly share the app with your friends using the companion app available both in iOS and Android store:



Or you can distribute it as a native package and enable live sync that will let you update the app with three fingers gesture when there is a new build. You can deploy your app to the device in the beginning of the development process and make subsequent updates without ever connecting your device.


I believe that deploying to app store is always a more time consuming and difficult process than building the app. If you agree with me then I like the step-by-step wizard in AppBuilder that guides me through the process without the need to dig deeper.


It is Build -> Configure your Certificate and Signing Details -> Publish process:



As my app becomes more complex, I can take the advantage of testing and analytics all of which come with Telerik platform to make you more productive.

One thing I forgot to mention is the on-the-fly bug fixing while running the app inside AppBuilder emulator.

In this case I have used the command line tool to fire up the emulator in my local machine:


This lets me quickly fix any javascript errors which is a neat feature to have apart from testing my app in a physical device with AppBuilder integrated tools.

In this post , I have quickly gone through the various bits and pieces of Telerik Platform as I build the “Dude” app and publish it in app store. The app is made open source in github and you can find the up-to-date store links in the readme.

https://github.com/StephenForte/Dude


About the Author

Steve Forte

 sits on the board of several start-ups including Triton Works. Stephen is also the Microsoft Regional Director for the NY Metro region and speaks regularly at industry conferences around the world. He has written several books on application and database development including Programming SQL Server 2008 (MS Press).

Comments

Comments are disabled in preview mode.