Today for my 30 day challenge, I decided to extend the PhoneGap application we developed yesterday with push notifications. Push notifications allow an application to notify or alert its users even when the application is not in use. For example, if we have a twitter app with push notifications enabled, the app can notify you whenever someone follows or mention you, even if the app is not running.
Several weeks ago, I read a very informative blog post by Jay Balunas on how to setup your own push notification server on OpenShift using AeroGear. At that time, I did not get the chance to use the AeroGear OpenShift cartridge, but today we can use it add push capabilities to the reader app we developed yesterday.
What is the AeroGear UnifiedPush Server?
AeroGear UnifiedPush Server is an open source server application written in Java that allows sending push notifications to different mobile platforms. It can be considered as an abstraction over different push notification technologies. Current version of the server supports Apple’s APNs, Google Cloud Messaging and Mozilla’s SimplePush.
Mobile Application Usecase
The mobile application that we are going to develop today is a reader application for the 30technologiesin30days challenge. Users can install the application on any of Android, Symbian, webOS, or Windows Phone device. The mobile application is available for download at http://bit.ly/18dbH8a.
The app can do the following :
Give a listing of all the blogs published in this challenge. When a user clicks one of the items on the blog post list, the link will be open in the browser.
Readers can share their feedback on the series using the mobile application.
We have already covered the first two requirements in yesterday's blog. Today, we will add a usecase that whenever a new blog is published, a notification will be sent to the user.
Github Repository
The code for today's demo application is available on github: day11-30technologies30days-mobile-app-with-push-notification.
Let's Add Push Notification
In order to add push notifications to the application, we will have to do four tasks.
Create an OpenShift AeroGear Push server application.
Register our Google account with Google Cloud Messaging service.
Add a variant to the AeroGear push application.
Add push notification support in mobile application.
Update the Java REST backend of mobile application to send push notifications.
Let's cover each of the above mentioned tasks one by one.
Task 1 : Create an OpenShift AeroGear Push server application
Before we can create an AeroGear push server application, we have to sign up for an OpenShift Account. It is completely free and Red Hat gives every user three free Gears on which to run your applications. At the time of this writing, the combined resources allocated for each user is 1.5 GB of memory and 3 GB of disk space.
After verifying the account, log into the OpenShift web console.
Click on Create your first application now, and then choose the AeroGear Push 0.X application type.
This page asks us to enter the application details. As this is an OpenShift quickstart, all the configuration is already done for us. Choose the default values, and press Create Application button.
After the application is created, we can view the AeroGear server running at http://aerogear-{domain-name}.rhcloud.com. Please replace {domain-name} with your OpenShift account domain name.
Go to http://aerogear-{domain-name}.rhcloud.com/, we will be asked to log into the aerogear server. The default username/password is "admin/123". After successful login, it will ask us to change the default password for security reasons.
After we have successfully logged in using the new credentials, we will see the AeroGear dashboard.
Now we can create our first push application which will be used to add push notification to our mobile application. Click the create button and enter the application details.
After application creation, we can see the application details. The important part of application information is Application ID and Master Secret. They will be used to send push notifications.
Task 2 : Register with Google Cloud Messaging service
This is explained in depth in AeroGear push server documentation so please refer to the documentation. After successful registration with the Google Cloud Messaging service, we will get an Google API key and Project Number. These will be required in next step.
Task 3 : Add a Variant
Go to AeroGear push server and add a new variant for the application.There can be multiple variants for a Push Application (e.g. Android, iPad, iPhone free, or Mobile Web). A Variant contains platform specific properties, such as a Google API key (Android) or a PushNetwork URL (SimplePush).
Enter the details as shown below, and then press the Create button. Please enter the Google API key and Project Number you received in task 2.
Task 4 : Add push notification support in our mobile application
It is very easy to add push notifications to a phonegap application using the AeroGear push server. The AeroGear team provide a phonegap plugin which we can install. Run the command shown below to install the aerogear-pushplugin.
Adding push notifications is as easy as adding few lines of JavaScript code. In the app.js file, replace the jQuery document ready with the code shown below.
The app.js file shown above does the following:
It binds to the deviceready event. On deviceready, we register with the push server running on OpenShift. It requires a configuration object which contains following:
The senderId corresponds to the Google Project Number.
The pushServerURL points to the AeroGear push server location like http://aerogear-{domain-name}.rhcloud.com/
The variantId is the identifier for the variant we added in task 3.
The variantSecret is the secret identified for the variant we added in task 3.
On successful registration, the success handler is called.
On error, the error handler is called.
When a notification is received, the onNotification function is invoked. It then shows the notification using the notification plugin.
Task 5 : Update he Java REST backend to send push notifications
Yesterday I did not talk about the backend of the application as I wanted to focus the post only on PhoneGap. The application that we developed has a Java REST backend running on OpenShift. It exposes several REST APIs. The first API to list all the blogs and create a new blog. The second API is for feedback submission. It is a very simple Java EE 6 application.
Before we can deploy the backend to our cloud environment, we'll have to do few setup tasks :
Install the rhc client tool on your machine. The rhc is a ruby gem so you need to have ruby 1.8.7 or above on your machine. To install rhc, just typesudo gem install rhc
If you already have one, make sure it is the latest one. To update your rhc, execute the command shown below.sudo gem update rhc
For additional assistance setting up the rhc command-line tool, see the following page: https://openshift.redhat.com/community/developers/rhc-client-tools-install
Setup your OpenShift account using the rhc setup command. This command will help you create a namespace and upload your ssh keys to OpenShift server.
To deploy the mobile application backend on OpenShift just type the command shown below:
It will perform such tasks as creating an application, setting up public DNS, creating private git repository, and then finally deploying the application using code from my Github repository. The application will be deployed on http://30technologies30days-{domain-name}.rhcloud.com. Please replace {domain-name} with your account domain name.
The code in which we are interested in is when a blog is published then the application should send the notification. This is added to BlogResource. It uses AeroGear client(I wrote it today) which is a wrapper around the AeroGear push server REST API.
In the code shown above, we first get all the data from the Blog object and create a BasicDBObject. The BasicDBObject is a document which will be persisted in MongoDB. If user is successfully authorized then we insert the blog in MongoDB. After inserting the document into MongoDB, we send a notification to all mobile users.
Run the application
Now, we can install and run the application on the device by running the following command.
That's it for today. Keep giving feedback.
What's Next
Sign up for OpenShift Online
Get your own private Platform As a Service (PaaS) by evaluating OpenShift Enterprise
Need Help? Ask the OpenShift Community your questions in the forums
Showcase your awesome app in the OpenShift Developer Spotlight. Get in the OpenShift Application Gallery today.