Pushbots and Cordova – Easy Push Notifications for your app

A few days ago Francisco Merino requested a post for implementing push notifications for a Phonegap/Cordova app. He was looking for a simple solution to start off. So, here is the post.

In this post, we will be sending push notifications to a device using the Pushbots dashboard as well from its Nodejs API.

Pushbots’s notification service is pretty simple to use and is one of the best solution if you are planning to send notification to all the devices at once. You can read more about pushbots here.

A quick demo of the app we are building

You can find the completed code here.

So, let us get started.

What is a Push Notification?

If you are new to push notifications, take a look at this

Setup Pushbots

Navigate to the Pushbots Signup page and create an account. You will be sent an activation mail and once you activate your account, you can login. You will be taken to your dashboard, and it should look something like

Screen Shot 2015-04-20 at 9.42.10 am

From the bottom of this page, create a new app. Let is calls it testPushApp and hit the return key. This will create a new project.

Next, we need to obtain the Apple Push Certificate and Android’s GCM API Key. You can follow the step by step guide below

After you have obtained the GMC API key and the Apple’s Push certificate, you need to head back to your app on Pushbots, Click on settings and update the same inside the Platforms’s Tab

Screen Shot 2015-04-27 at 10.36.30 am

Develop the App

Once you have the GCM sender ID and API Key or Apple’s Push Certificate, we will scaffold a new Cordova app. For this post, I will be using only Android’s GCM values.

Create a new folder named testPushApp. Now, scaffold a new Cordova project. Open a new terminal/prompt inside the testPushApp folder and run

cordova create myApp com.push.notif.app testPushApp

Note : Make sure you have Nodejs installed and then Cordova installed globally before executing the above statement. If you run into any issues refer PhoneGap 3 CLI Setup on Mac & Windows.

The above command will create a new Cordova project. To test the scaffolded app, CD into myApp folder and run

cordova platform add browser

Next, we will run the app.

cordova run

and you should the app launch in you browser and it should look like

Screen Shot 2015-04-20 at 10.37.01 am

Next, we will add Android and iOS platforms.

cordova platform add android


cordova platform add ios

After that we will add the pushbots Cordova plugin.

cordova plugin add com.pushbots.push

Once the plugin is installed, open www/js/index.js and update the  onDeviceReady() as shown below

Things to notice

55347ccb17795958748b457c – is the application id from your Pushbots dashboard

Screen Shot 2015-04-27 at 10.40.46 am

145091056519 – is the GCM project Number from your Google developer console

Screen Shot 2015-04-27 at 10.42.33 amThis all the setup you would need to integrate Pushbots with your Cordova App for iOS. For Android there is one more step.

After you have added Android platform to the current project and installed the pushbots plugin, a new file named pushbots.xml will be created at /platforms/android/res/values/pushbots.xml. Open that file and update it as below

You can get the values from the previous step.

That is it!!! Now, we can test the app.

Test the App

I am going to deploy this app on to my Android phone by running

cordova prepare

cordova run android

This will install the app on my device. Now if I head back to the Pushbots dashboard, and select the testPushApp you should see the number of devices updated

Screen Shot 2015-04-27 at 10.51.57 am

Now, click on Send a push link and you can enter a text and send it to all devices or only to devices you wish to target (using the segmentation button below the message box).

When the notification is sent, you can checkout the same on your device


Simple and sweet!

And if you want to launch a webpage when the user clicks on the notification, it is as simple as adding a custom field named openURL and the value is the link.

Screen Shot 2015-04-27 at 11.04.34 am

And when you send this notification,

Screenshot_2015-04-27-11-04-58When the user clicks on the notification, a web page with that link would be opened.

Implementing Notifications from a Nodejs App

So far, we have used the Pushbots dashboard to send the notification. Now, we are going to send push notification programatically, thanks to the NPM module named pushbots.

Inside the testPushApp folder, create another folder named myNodeApp, which is at the same level as myApp (Cordova app). Open a terminal/prompt here and run

npm init

This will create a package.json file and should look something like

Next, we will add pushbots module to our project and save it in package.json. Run

npm install pushbots --save

Create a new file named index.js at the root of the myNodeApp folder. And add the below code.

Things to notice

Line 4, 5 : You can get the ID and secret from the Pushbots dashboard, key’s tab

Screen Shot 2015-04-27 at 11.19.55 amLine 7 : The message you would like to send. 1 as the last argument indicates an Android device and 0 an iOS device. You read more about the API API V1.

Line 8 : The custom field property, to open a URL

Line 11 : Send the push notification.

If you save the file and run

node index.js

You should see

Screen Shot 2015-04-27 at 11.17.55 am

And on your device


Hope this post gave you an idea on how to implement Push Notifications. Do remember, this same logic can be ported to any Cordova app, be it Ionic or Framework7.

Another widely used push notification service is PushPlugin from the Phongap team. You can check out that too.

PS : The API keys’s and ID’s shown in the video or the code would not work for you, as I have already deleted those projects.

Thanks for reading! Do comment.

Ionic Framework, Cordova and File API – A Media Player App

Yves Bamani requested a post to build a media player app using Ionic Framework and Cordova. The mediaPlayer app will show a player interface and a couple of buttons. The user can browse through the filesystem and pick a file to play. The initial request was to play both Audio and Video files inline. But I was only able to get the Audio files to play inline where as the Video will be launched in the device default video player.

Here is a quick demo of the app

Screenshot_2015-03-30-10-53-15 Screenshot_2015-03-30-10-53-24 Screenshot_2015-03-30-10-53-54

Yves also requested for the app to be built using ngCordova. But there are a couple of features in $cordovaMedia like getDuration(media)  and  getCurrentPosition(), which are not working yet. And the $cordovaFile does not have a method to recursively get all the folders in a directory, so I am going to use Cordova API as is and build this app.

You can find the completed here.

So, let us get started.


You need to have the knowledge of the following to get a better understanding of the code below.

Application Design

The application is pretty simple. When the user launches the app, we show a file browser, where the user can browse through his/her device. Then they can select an audio or video file to play.

We will be using a side menu template, where the player is a instance of  $ionicModal. This modal lives in the background. As mentioned earlier, we will be using the Media API from cordova to manage the audio files and a Video player Cordova plugin by Dawson Loudon named VideoPlayer inspired by Simon MacDonald’s VideoPlayer. All this plugin does is create a new Video Intent and launch it.

I am still looking for a consistent solution on how to implement inline videos. If you do know one, please drop a comment.

I have tested this app on an Android and not on iOS.

Develop the App

Create a new folder named mediaPlayerApp. Open a new terminal/prompt here. We will scaffold the side menu template and then clean it up as per our needs. Run,

ionic start mediaPlayerApp sidemenu

Once the scaffolding is completed, you can CD into the mediaPlayerApp folder and run

ionic serve

and you should see the side menu app in your browser.

The first thing we are going to do is update index.html. Open www/index.html in your favorite editor and update it as below

We have referred the audio service JS code that consist of the logic to deal with the Media API and the controllers file which consist of the controller logic.

Next, open www/templates/menu.html. We will update this file with fewer menu items

We have removed all the old menu items and added 2 new. One to show the player, and one to browse the device.

Now, we will clean up and rename the required files inside www/templates folder

  • Rename login.html to player.html
  • Delete playlist.html
  • Delete playlists.html
  • Delete search.html

Open www/templates/player.html and update it as below

This template will be shown when we init the Ionic Modal. This Modal will always be in the background while the app is running.

This template is the base for showing the audio player. Line 18 consists of the logic to show the seek bar. Line 22 shows the play button, when we have paused the video using the button on line 25. We can also stop the media play back completely using the Stop button.

As you can see from the directives on these buttons, they are subjected to visibility based on the state of the audio file.

Next, open www/templates/browse.html and update it as below

This is a very simple template drive by the files[]  from scope. When the user launches the browse page, we will query the file system and show the root files. Once the user clicks on a particular folder, we query the file system API passing in the current folder as the root and fetch its children.

And when a user selects a file, we check if it is of the type audio or video and then play it. Else we will show a message that we cannot play the selected file.

This completes all our templates. We will now work with the Audio Service. Open www/js folder and create a new file named audio.service.js and update it as below.

Things to notice

Line 1 : We have created a new module named starter.services and added the  AudioSvc to that.

Line 8 : Defines the play audio method, which plays the given src using the Cordova’s Media API.

Line 18 : We create a setInterval for every seconds to execute  getCurrentPosition() and trigger the callback. This way we update the seek bar with the total time and time left.

Line 46 : The logic for resume audio

Line 52 : The logic for pause audio

Line 58 : The logic for stop audio

We will be injecting this service as a dependency in our controller, where we will manage the above API based on the user interactions.

Next, we will update www/js/app.js as below

Things to notice

Line 1 : We create a module named starter and inject ionicstarter.controllers and starter.services as dependencies.

Line 4 : Inside the  $ionicPlatform.ready() we config the keyboard and status bar.

Line 12, 20, 26 : We are building an API to work with the  $ionicLoading  API.

Line 32 : We config the router

Finally, the controllers. Open www/js/controller/js and update it as below

Things to notice

Line 13 : When the app launches, the BrowseCtrl is invoked. Here, we initialize the player as a modal from the template.

Line 19, 23 : We have created 2 methods on  $rootScope that can show and hide the player. This will be used across the app. Take a look at line 5.

Line 27 : The File System traversing starts from here. We wait for the device to be ready.

Line 30 : We call  requestFileSystem() on the window and get the contents of the root directory.

Line 35 : We read all the entries present in the root folder and  call  processEntries() to build an Array of files system items.

Line 156 : Here we get all the entries and a reference Array. We iterate through each item and build an object, which consists of essential information while rendering. This same method will be invoked when ever we are reading entries from the file system and building a UI.

Line 38 : We assign the file info array to  $scope.files. This updates the browse.html template to reflect the files in the root.

Line 49 : Will get invoked when any file or folder name is clicked.

Line 51 : If the selected item is a folder, we check if the item is a navigation item. Navigation items are used to move to folder one level up, which we create for the user to navigate. Based on this condition, we call  processFile() with a URL

Line 115 : Here, we resolve the current URL, and then get the children (files/folders) inside that path and then update  $scope.files.

Line 125 : If the folder is not the root folder and it has children, we append a new  .. One level up item to the top of the list, using which the user can navigate to the parent folder. You can see the same in the demo video. This way, we can recursively show the file system to the user.

Line 57 : If the clicked item is a file, we check it is an Audio file or Video file. If it is a Video file, we will invoke the  VideoPlayer.play() passing in the media URL. We install the Video player plugin next.

Line 63 : If it is an audio file, we will work with the  AudioSvc  service and manage the player.

The file looks pretty complicated but the logic is pretty simple.

Install Cordova Plugins

To run the app, we need 3 plugins.

  1. com.ionic.keyboard
  2. org.apache.cordova.file
  3. org.apache.cordova.media
  4. com.dawsonloudon.videoplayer

To install the plugins run

cordova plugin add com.ionic.keyboard

cordova plugin add org.apache.cordova.file

cordova plugin add org.apache.cordova.media

cordova plugin add https://github.com/dawsonloudon/VideoPlayer.git

Run the App

We need to run the app on a device to test it. First, we will add a platform. Run,

ionic platform add android

And then to the run  the app on a device execute

ionic run

And you should be able to check out the below


Hope this post gave you an idea on how to work with File System, Audio and Video APIs.

Thanks for reading! Do comment.

Getting Started with ngCordova

In this post, we will take a quick dip into ngCordova and Ionic Framework. We will take a look at setting up ngCordova with IonicFramework, add adding a few cordova plugins and testing it out on a device.

This post is not limited to IonicFramework. You can use the same knowledge with Onsen UI or any mobile hybrid application that is powered by Angularjs.

We are not going to build any specific app, but we will add a few plugins to a demo app and see how it works. This would be the list of plugins we would test drive


You can find the complete code here. You can use this repo to submit the app we create to Phonegap Build Service.

So, let us get started.


Before we proceed, you need to have a good understanding of Angularjs, IonicFramework or Onsen UI and Phonegap/Cordova.

Since we are going to work with device specific features, you would need an actual device to test your code. This setup will not run in a browser. Some of the features we are working on, may work on an emulator. Make sure you have setup everything on your machine so you can deploy the code to your device. You can refer PhoneGap 3 CLI Setup on Mac & Windows for more information.

Also, we will be using bower to add ngCordova to our project. Make sure you have git installed on your machine and run

npm install -g bower

Setup Project

Assuming that you have already done

npm install -g cordova ionic

We will scaffold a new Ionic app. Create a new folder named ionCordova. Open a new terminal/prompt here and run

ionic start ionCordova sidemenu

Then run

cd ionCordova

And then

ionic serve

This will launch the side menu template in your default browser.

Next, we will be deploying the app to the phone and testing the base project out. For that, we first need to add the respective platform. I have an Android device, so I will be building a project close to Android.

ionic platform add android

Next, we will install the side menu template on our device. Run

ionic run

Once the app is successfully deployed on to your device, you should see


Debugging Hybrid apps on Android with Chrome

I highly recommend using  chrome://inspect (Remote Debugging on Android with Chrome) while working with Android devices. You can access your app inside the web-view and debug as if you were working with your app in a browser.

Here is a quick snapshot

Screen Shot 2015-03-08 at 17.08.19


ngCordova was built to help make app development faster and more efficient than ever before. It gives you simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available, where you can take a picture, scan a barcode, upload a file, turn on your flashlight, get your current location, and much more with just a few lines of code.

Pretty simple! As of today, there are around 63 plugins in the ngCordova arsenal. These wrapper make interacting with device specific features pretty easy.

Setup ngCordova

To setup ngCordova, we will be using bower. Run

bower install ngCordova --save

Next, we will add a reference to it in our index.html. Open www/index.html and update it as below

Notice line 21. ngCordova should be after ionic bundle and before cordova.js reference. This is very very important.

Test ngCordova Setup

To  test the setup, we will print the basic device information on the screen. For that, we will be using the org.apache.cordova.device plugin. This is installed by default if you scaffold an Ionic app.

If you want to explicitly add it, run

cordova plugin add org.apache.cordova.device

First we will inject ngCordova as a dependency to our app. Open www/js/app.js and update

angular.module('starter', ['ionic', 'starter.controllers'])


angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])

And then, we will update our UI to show the device information. Open www/templates/playlists.html and update it as below

Finally, we will update the PlaylistsCtrl you can ignore the names for now, we will clean up later on. Open www/js/controllers.js and update it as below

Things to notice :

We have removed all the code that we are not going to use.

Line 5 : We have injected $ionicPlatform, $scope and $cordovaDevice as dependencies

Line 6 : This is very important. All your ngCordova code SHOULD be written inside  $ionicPlatform.ready(). Else you will see a lot of undefined errors.

Line 7 : This is only a precaution. There are many instance, when the $scope does not update, so we are wrapping our  $cordovaDevice features inside a  $scope.$apply() so that Angular forces a model update.

Line 11 : We get the device object from $cordovaDevice.getDevice() and from that we extract the information needed as shown from lines 13 to 17 and add it to scope.

That is it!

Save all the files and execute

ionic run

And you should see


Simple and easy!

Refactor Code

Since we would be working with a set of cordova plugins, we will refactor this template.

Step 1 : Open www/templates/menu.html and update it as below

We have removed the old menu items and added a few of the plugins which we are going to test drive here.

Step 2 : Open www/js/app.js  and update it as below

Added routes for each plugin template.

Step 3 : Open www/js/controllers.js  and update it as below

Step 4 : Rename www/templates/playlists.html to device.html

Step 5 : Delete

  • www/templates/browse.html
  • www/templates/login.html
  • www/templates/playlist.html
  • www/templates/search.html

Step 6 : Create

  • www/templates/battery.html
  • www/templates/camera.html
  • www/templates/motion.html
  • www/templates/notification.html
  • www/templates/network.html
  • www/templates/pin.html
  • www/templates/share.html
  • www/templates/sqlite.html
  • www/templates/toast.html
  • www/templates/vibrate.html

And add the following code into all of them

Save all the files and execute

ionic run

The app should be deployed to your device and there should not be any change in the output. Instead, you should see the update menu


Since we have already implemented the Device API, we will move on to the Battery API

Battery Plugin

Service : $cordovaBatteryStatus

The BatteryStatus plugin provides an API for the current battery status.

Add battery status Plugin

cordova plugin add org.apache.cordova.battery-status

Open www/js/controllers.js and add the below code

As always we wait for the $ionicPlatform.ready(). Then we register  status event on  $cordovaBatteryStatus. When the value changes, the callback will be called, where we set the  batteryLevel and  isPluggedIn values in scope.

But for some reason the above code does not work. The callback never gets called. But If I use the commented code, it works fine. The same code is used in Loved One Notifier.

Next, open www/templates/battery.html and update it as below

The output when you execute  ionic run,


As mentioned, the battery status is never invoked.

Camera Plugin

Service : $cordovaCamera

This service makes it easy to use the org.apache.cordova.camera plugin to take pictures and video from a device.

Add Camera Plugin

cordova plugin add org.apache.cordova.camera

Open www/js/controllers.js and add the below code

We define a set of options on which the image would be captured. And when the takePicture() is called, we take a picture and once the user accepts, we show a preview on the page.

Next, open www/templates/camera.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-19-41-07Once the image is captured after clicking Take a Picture button, the same image preview will appear below.


Device Motion Plugin

Service : $cordovaDeviceMotion

This plugin provides access to the device’s accelerometer. The accelerometer is a motion sensor that detects the change (delta) in movement relative to the current device orientation, in three dimensions along the x, y, and z axis.

Add Device Motion Plugin

cordova plugin add org.apache.cordova.device-motion

Open www/js/controllers.js and add the below code

The logic is pretty straight forward. On line 4, we get the Acceleration at that moment. And on line 21, we keep watching the acceleration params and update the UI accordingly.

Next, open www/templates/motion.html and update it as below

The output when you execute  ionic run,


Notification Plugin

Service : $cordovaLocalNotification

The essential purpose of local notifications is to enable an application to inform its users that it has something for them — for example, a message or an upcoming appointment — when the application isn’t running in the foreground. They are scheduled by an application and delivered on the same device.

Add Notification Plugin

cordova plugin add de.appplant.cordova.plugin.local-notification

Open www/js/controllers.js and add the below code

A new notification can be triggered using the  $cordovaLocalNotification.add(). And the rest is taken care by cordova!

Next, open www/templates/notification.html and update it as below

The output when you execute  ionic run,


And when the  notification is fired (observe the notification bar)


And finally in the notification panel


Network Plugin

Service : $cordovaNetwork

The essential purpose of local notifications is to enable an application to inform its users that it has something for them — for example, a message or an upcoming appointment — when the application isn’t running in the foreground. They are scheduled by an application and delivered on the same device.

Add Network Plugin

cordova plugin add org.apache.cordova.network-information

Open www/js/controllers.js and add the below code

Next, open www/templates/network.html and update it as below

The output when you execute  ionic run,


Pin Dialog Plugin

Service : $cordovaPinDialog

PhoneGap numeric password dialog plugin for Android and iOS.

Add Pin Dialog Plugin

cordova plugin add https://github.com/Paldom/PinDialog.git

Open www/js/controllers.js and add the below code

When the page loads, we show a pin dialog. The user enters a Pin to access the app. Here you can grant access or reject access to the screen based on this logic. For this demo, once the user enters a pin, we show it to the user in a dialog and then print it on the screen.

Next, open www/templates/pin.html and update it as below

The output when you execute  ionic run,


Screenshot_2015-03-08-20-48-23Social Sharing Plugin

Service : $cordovaSocialSharing

Share images, text, messages via Facebook, Twitter, Email, SMS, WhatsApp, etc using this plugin.


Screen Shot 2015-03-08 at 21.18.17

Add Social Share Plugin

cordova plugin add https://github.com/EddyVerbruggen/SocialSharing-PhoneGap-Plugin.git

Open www/js/controllers.js and add the below code

The nativeShare()  invokes the  $cordovaSocialSharing.share() which triggers the native share sheet. When the user selects an app to share the code with, the message, subject and link will be passed on based on the selected app.

Next, open www/templates/share.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-21-25-46 Screenshot_2015-03-08-21-25-56 Screenshot_2015-03-08-21-26-14

SQLite Plugin

Service : $cordovaSQLite

Native interface to sqlite in a Cordova/PhoneGap plugin for Android/iOS/WP(8), with HTML5 Web SQL API

Add SQLite Plugin

cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git

Open www/js/controllers.js and add the below code

You can know more on how to work with SQLite here. The above code is a excerpt of the same. It creates a new table and adds some data.

Next, open www/templates/sqlite.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-21-58-27Toast Plugin

Service : $cordovaToast

This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It’s great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.

Add Toast Plugin

cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

Open www/js/controllers.js and add the below code

Simple API to show toasts, with duration and position.

Next, open www/templates/toast.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-22-06-34 Screenshot_2015-03-08-22-06-48Vibrate Plugin

Service : $cordovaVibration

Vibrate the device programatically.

Add Vibrate Plugin

cordova plugin add org.apache.cordova.vibration

Open www/js/controllers.js and add the below code

Using the $cordovaVibration.vibrate()  we show a simple vibration pattern.

Next, open www/templates/vibrate.html and update it as below

The output when you execute  ionic run,

Screenshot_2015-03-08-22-17-28Don’t ask how the above image proves that the device vibrates when clicked on the button. You have to take my word for it!

With this, we have test driven a few ngCordova plugins and seen how they can be used. The ngCordova docs are pretty good. You can rely on them quite well for results.

If you are facing issue, do post a comment, but before that please check this guide. Hope this post gave you a decent idea on how to work with ngCordova.

Thanks for reading! Do comment.

Getting Started with Phonegap Desktop App (v0.1.1 Beta)

In this post, we will take a look at building Mobile Hybrid application using the new Phonegaps’s Desktop App. We will download the installer, setup a hello world project and deploy it to our mobile and test it.

A quick sneak peek on how the Phonegap Desktop App works

So, let us get started.

Why Phonegap Desktop App?

Because it is easy to use.

The PhoneGap Desktop App is the easiest way to get started with PhoneGap. It’s an alternative to the PhoneGap CLI, yet it uses the same libraries under-the-hood.

There’s no complicated installation. You don’t need git, npm, or even node.js. We include all of the important parts for you, so that you can focus on creating your next app!

With this, you can focus on the actual app development and not worry about the environment.

We will look at a 5 step process on how to start working with Phonegap Desktop app.

Step 1 : Download App

The app can be downloaded from the Phonegap Desktop app Github repo. As of today version v0.1.1 beta is the stable release and v0.1.2 beta is the pre-release. You can download the zip file for your OS (Windows/Mac) from here.

Unzip the OS specific zip file and you will find the .app file incase of Mac and .exe incase of Windows. Launch the app by double clicking on the executable.

Step 2 : Creating a new Phonegap Project

Once you launch the Phonegap desktop app, the interface would look like

Screen Shot 2015-02-25 at 19.49.45The panel on the left hand side is the main menu for the app.

Click on the + icon and you should see

Screen Shot 2015-02-25 at 19.51.50

Click on Create new PhoneGap Project and you should see

Screen Shot 2015-02-25 at 19.53.58Local path is the location on your disk where the project should get created. Name would be the name of the app. ID is the unique reverse domain name, that acts as an  identifier for your app across app stores.

Once you fill it, you can click on Create Project. And now, when you head back to the location you have created the project, you can see the project created.

If you are familiar with Cordova or Phonegap development, you will recognize the folder structure.

Screen Shot 2015-02-25 at 19.57.28And when you go back to the Phonegap Desktop app, you should see

Screen Shot 2015-02-25 at 19.59.40As you can see, the server has started at the given IP address (at the bottom of the screen).

Step 3 : Install the Phonegap Developer App

Navigate to the Download section of app.phonegap.com and install the app on your device.

Step 4 : Connect Desktop App with Mobile App

Once the mobile app is installed, open the same and you should see

Screenshot_2015-02-26-13-20-07Once the app is loaded, you can enter the IP address & port from the desktop app

Screenshot_2015-02-26-13-20-35and hit connect. At this time, the mobile app will fetch the assets needed to run our Hello World app.

Screenshot_2015-02-26-13-22-19Finally the app launches

Screenshot_2015-02-26-13-22-39and the app works!

Screenshot_2015-02-26-13-25-14Simple and easy right!

Now if you go back to the Phonegap Desktop app and click on the console icon, you can see the logs

Screen Shot 2015-02-26 at 13.35.28Step 5: Develop the application

Now, the awesome part, you can make changes to the code on your desktop and the changed would reflect on the device.

Hope this post gave you an idea on how to develop Hybrid apps with Phonegap Desktop app.

Thanks for reading! Do comment.

Ionic Framework, Cordova and Yeoman – Loved One Notifier

My good friend Jayesh came to me asking if we can build an app that sends out a message to a few contacts when the battery goes below a certain level. Kind of like a notification that your battery is about to die. I liked the Idea and wanted to try this out using Cordova. The app sounded very helpful and in the past few days of testing I found the app to be highly useful. So I wanted to share the app as well the process I used to build it.

The final app which we build would look like

You can also download Loved One Notifier from the app store

App Name

In this post, we will be building an Android app using Ionic Framework, Cordova and Yeoman. The app we are going to build is called Loved One Notifier.

We will be using Yeoman Ionic generator to scaffold and develop the app. We will be using Ionic Framework as the UI layer for the app. And finally we will be using the following plugins to interact with the device.

  • battery-status
  • contacts
  • plugin.sms
  • local-notification

You can find the completed code here.

So, let us get started.

App Design

The app is pretty simple. We ask the user to set a battery threshold when the SMS needs to be triggered, a message that needs to be sent along with the SMS and the list of contacts who should receive this message.

Once the above is stored, we keep monitoring the battery status. And when the battery percentage is equal to or less the configured threshold value, we trigger a SMS to all the selected contacts with message provided.

We will be using

We will be using angular-local-storage to manage the config between the app and local storage.

Scaffold App

So far I have been using the Ionic generator provided by the Ionic team. But this time I wanted to try Yeoman’s generator-ionic. I had my eye on it for a while but did not get a chance to use it. So here we go.

First, let us install Yeoman and the generator

npm install -g yo grunt-cli bower generator-ionic

This will take a while.

PS : If you are a mac user and want to run global commands without sudo , follow this.

Once the generator is installed, we will scaffold a new project. Before that create a new folder named myIonicApp. Open a new terminal/prompt and run

yo ionic myIonicApp

You can answer No to the question

Next, select the below plugins from the list

  • org.apache.cordova.console
  • org.apache.cordova.device
  • org.apache.cordova.battery-status
  • org.apache.cordova.contacts

On the next screen, select User Intro template and that is it! Yeoman will setup the project for you. This may take up to 5mins.

The scaffolded app would consist of the following

To quickly test drive the app, you can run

grunt serve

This will launch the app in the browser. The first screen you see is a intro screen, which has  3 slides. Once you complete the 3 slides you would reach the actual application.

We will be using this feature in our app to show a welcome wizard when the user launches the app for the first time. And from next time onward, we will show the main app.

Next, we will install two more Cordova plugins. Run

phonegap local plugin add https://github.com/aharris88/phonegap-sms-plugin.git

for sending SMS and

grunt plugin:add:de.appplant.cordova.plugin.local-notification

for showing a notification to the user.

PS : You need to have Phone gap installed for setting up SMS plugin. More info on setup : PhoneGap 3 CLI Setup on Mac & Windows.

Develop the App

The first thing we would do is setup the config.xml. Open config.xml and update it as below

You can fill in appropriate details in the XML.

When using the Yeoman generator, we will be working in the app directory and the configured grunt tasks will take care of making the contents of www folder production ready.

We want to use a different font (open-sans) for our app. We will download the same and add it to our project using bower. Run

bower install open-sans-fontface angular-local-storage --save

We will also be using angular-local-storage to mange data between the Angular.js app and the local storage.

Next, open app/index.html and update it as below

A standard Angular.js app setup.

Next, we will setup app.js. Open app/scripts/app.js and update it as below

Things to Notice

  • Line 20 and 40 :  Fetch the local storage value for skip .  This value tells if the user has already completed the intro
  • Line 33 and 42 : If the user is going to intro route and s/he has already finished the intro, we will navigate to the home page
  • Line 22, 27 and 30 : We handle the back button scenario for the splash screen and intro screen.
  • Line 55 : We create 4 states. One for loading (splash screen), intro, home and contacts.
  • Line 83 : We add a prefix to all our local storage keys

Next, we will work on the controllers. Open app/scripts/controllers.js and update it as below

Things to notice

  • Line 4 : IntroCtrl. This controller handles the navigation for the introduction slides.
  • Line 7 : When the user clicks on Navigate to App or Skip Intro, we set  skip property to true. This way, we do not show the intro screen next time
  • Line 10, 13 and 17 : Methods to interact with the slider
  • Line 23 : We create a property under $scope where we store the config options.
  • Line 24 – 31 : We set the default values to each of the config options, based on the prior saved value or a default value
  • Line 33 – 36 : We register watch on the config options and ask the  localStorageService to update the local storage when there are changes to these values.
  • Line 60 : We wait for $ionicPlatform.ready() and register a battery change event listener. And when there is a change, $scope.onBatteryStatus()  will be called on line 43.
  • Line 43 : This gets triggered when there is change in battery service. Here we assign the battery level and isPlugged values to scope. lonConfig.lastSentBattery stores the battery status when the last SMS was sent. This way, we do not keep resending the SMS on battery change less than threshold.
  • Line 52 : Before we trigger an SMS, we check if the notifier is enabled, device not plugged in, and the current battery level is less than or equal to threshold
  • Line 62 : We set the  lonConfig.lastSentBattery