Day 11: AeroGear Push Server–Push Notifications Made Easy

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.

PhoneGap logo

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 :

  1. 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.
    30technologiesin30days mobile app home screen

  2. Readers can share their feedback on the series using the mobile application.

30technologiesin30days mobile app feedback screen

  1. 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.

30technologiesin30days mobile app notification

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.

  1. Create an OpenShift AeroGear Push server application.

  2. Register our Google account with Google Cloud Messaging service.

  3. Add a variant to the AeroGear push application.

  4. Add push notification support in mobile application.

  5. 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.

PhoneGap logo

Click on Create your first application now, and then choose the AeroGear Push 0.X application type.

PhoneGap logo

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.

PhoneGap logo

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.

PhoneGap logo

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.

Create AeroGear Push Application

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.

Push Application Information

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).

Push Application Information

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.

AeroGear Android Variant Details

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.

$ cordova plugin add https://github.com/edewit/aerogear-pushplugin-cordova.git

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.

document.addEventListener('deviceready', onDeviceReady, true);
 
function onDeviceReady(){
    var aeroConfig = {
          senderID: "{senderId}",
          pushServerURL: "{pushServerUrl}",
          variantID: "{variantId}",
          variantSecret: "{variantSecret}"
    };
 
    try {
      push.register(successHandler, errorHandler, {"badge": "true", "sound": "true",
        "alert": "true", "ecb": "onNotification", aeroConfig: aeroConfig});
    } catch (err) {
      txt = "There was an error on this page.\n\n";
      txt += "Error description: " + err.message + "\n\n";
      alert(txt);
    }
 
 
    homeView();
    $('.home').on('tap', renderHomeView);   
    $('.feedback').on('tap', renderFeedbackFormView); 
 
}
 
function successHandler(result) {
    console.log("successfully registered with AeroGear push server : " + result);
  }
 
function errorHandler(error) {
    console.log("Error in registering with AeroGear push server : " + error);
}
 
function onNotification(e) {
    showNotification(e.alert);
}

The app.js file shown above does the following:

  1. 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:

    1. The senderId corresponds to the Google Project Number.
    2. The pushServerURL points to the AeroGear push server location like http://aerogear-{domain-name}.rhcloud.com/
    3. The variantId is the identifier for the variant we added in task 3.
    4. The variantSecret is the secret identified for the variant we added in task 3.
  2. On successful registration, the success handler is called.

  3. On error, the error handler is called.

  4. 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 :

  1. 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

  2. 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:

$ rhc create-app 30technologies30days jbosseap mongodb-2.2 --from-code https://github.com/shekhargulati/30technologies30days-backend.git

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.

 @POST
    @Consumes(value = MediaType.APPLICATION_JSON)
    public Response create(Blog blog, @Context HttpServletRequest request, @Context HttpServletResponse response) {
        BasicDBObjectBuilder basicDBObjectBuilder = BasicDBObjectBuilder.start("title", blog.getTitle())
                .add("url", blog.getUrl()).add("publishedOn", blog.getPublishedOn());
 
        String authorization = request.getHeader("authorization");
 
        if (authorization != null && authorization.startsWith("Basic")) {
            // do authorization header check
 
            DBCollection collection = db.getCollection("blogs");
            collection.save(basicDBObjectBuilder.get());
 
            aerogearClient.sendMessage("New blog published in 30technologies30days challenge");
            return Response.created(null).build();
 
        }
 
        return Response.status(Status.UNAUTHORIZED).build();
 
    }

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.

$ phonegap run android

That’s it for today. Keep giving feedback.

Next Steps

Categories
Java, OpenShift Online
Tags
Comments are closed.