How to create an Ionic App with Jexia Part 2: Local Notification / Real time events

How to create an Ionic App with Jexia Part 2: Local Notification / Real time events

How to create an Ionic App with Jexia Part 2: Local Notification / Real time events

Nande Konst

Nande Konst

Loves IT for the same reason every developer does: to create solutions. Have a question? Want to get in touch? Nande[at]jexia.com
Nande Konst

In part 1 of this tutorial we have built a simple Ionic App on basis of the Jexia platform. The App collects blog articles that were posted to Jexia.

In part 2 of this tutorial we will make our app ready to be used on Android devices. We will focus on integrating a local notification system based on Jexia's realtime functionality. The app will notify us with a local notification whenever a new article was posted to the dataset.

We use a cordova plugin called LocalNotification and Android Studio to test this functionality. But before we can start coding we have some configuration to do.

Adding the Android platform

Add the Android platform

The first thing we have to do is adding the Android platform to our Ionic App. So open your project and use the following command in your terminal:

Setting up Android Studio

Setting up Android Studio

Until now we have tested our app in the browser. However, we can not test local notifications in the browser. We need to work with the Android emulator available in Android studio to test them.

Now it's time to download Android Studio. To be able to run Android Studio you need to have java and the java jdk installed. Check if you have them by opening your terminal and type

If you have it installed you will see something like this:

Screen Shot

Once your download of Android Studio is complete, you can install it. The installation process is pretty straightforward. After you have installed it go ahead and launch Android Studio.

The Android SDK Manager

If you want to create applications for all versions of Android you need to install the Android SDK. Also you need to install SDK's to be able to create an Android Virtual Device. If you open Android Studio go to Tools->Android->SDK manager or choose the SDK manager icon.

Screen SDK

When it launches you will see a window like below. The first tab shows the SDK platforms available. Check the "Show package details" box to see the components, such as the platform itself and the API level of the package.  It would be recommended to install all the platforms with API levels 10 to 23. The last of the old Android platforms is 10 and there are still people using it.

Screen API lev

The second tab are the SDK Tools. Install the packages that are checked in the screenshot below.

Screen SDKTools

Creating an AVD

Now we have installed Android Studio and the Android SDK it is time to test our app in an emulator. In order to do this, we need to create an AVD (Android Virtual Device). An AVD is an emulator that allows us to test our application  by simulating some real device capabilities like local notifications.

Go to Tools->Android->AVD Manager or click the icon:

Screen AVD Manager

In the window that will open now click "Create Device" and choose "next". I tested this app on a Nexus 6. Click Nexus 6 and "next". In the next screen choose API level 22. In order to specify the API level of your app go to platform/android/AndroidManifest.xml and edit the following line:

You can give your AVD a name if you want but it isn't necessary. Now click "finish" and the AVD will be created. Before we continue to our code let's test the app we build in part 1 on the emulator. You can do this by using the following command in your terminal

This command will build the app and boot the emulator. Please note that unless you have a very fast computer this process can take some time. If everything was completed without errors you will now see your app showing up in the emulator and by hitting the refresh button it will load the posts from our dataset.

Screen Emulator1

Cordova Local Notifications

Cordova Local Notifications

Local notifications happen on the background. They are not activated by a server, which distinguishes them from push notifications. Local notifications happen on the alarm system of the device itself. To make use of local notifications within Ionic we need to install the Cordova Local Notification plugin. Head over to the github page of the plugin and copy the URL. Now go to your terminal and paste the url behind the following command.

NgCordova

The next thing we are going to do is install the AngularJS extension set ngCordova. ngCordova allows us to access Cordova plugins through AngularJS. You can use Bower to install ngCordova. Head again to your terminal and execute:

Now include ng-cordova.min.js in your index.html. Before cordova.js and after ionic.bundle.js since ngCordova depends on AngularJS.

Add a local notification

Add a local notification

In part I we created a service that was responsible for handling requests and authentication through the Jexia JavaScript SDK. We saw how easy it was to get our data using the Jexia JavaScript SDK. But this is not the only capability of the Jexia Javascript SDK. It also enables us to subscribe to channels so that we can make use of real time communication. Whenever a post was added to our dataset we can fire a local notification using the subscribe method. We can do this with a very small piece of code.

Let's first find out how we can add local notifications. The first thing we need to do is inject $cordovaLocalNotification into our getData service, so we can use it. Also, we want to point to the service if we use this so we instantiate a variable called service.

When we open up the documentation of this plugin we see that we can add a notification using the add() method and that it returns an object, the notification. In our service, below our getBlog() function we are going to create a new function that will add a local notification when it is called.

Now we have made a function that adds a local notification. The only thing we need to do is make sure the function gets called whenever a record is added to the dataset. Like mentioned above, the Jexia Javascript SDK has a subscribe function where we can subscribe to a channel. This function will invoke the notify() function and a local notification will be added.

The controller that uses the service will now execute it when we refresh our application. So go ahead and start testing this by emulating your application to the Android emulator open up app.jexia.com and post a record using the REST Client. Now wait a few seconds and see what is happening to your application. You should see something like this:

Screen Shot 2016-06-20 at 14.58.51

When you open up the local notification you will see this:

Screen Shot 2016-06-20 at 14.59.19

As you can see it is very easy to integrate a local notification system using Jexia's real time events using only a very small piece of code. The reason is that the Jexia Javascript SDK handles the authorization process automatically. This means that you don't need to worry about keeping your session valid with Jexia. Furthermore the Jexia Javascript SDK enables you to manipulate your datasets through a programmatic API which makes it incredibly easy to read, create, update or delete your records and work with real time events like we did in this part of the tutorial. This is just a small example but you could use this system in many different situations.
If you would like to have a closer look at the code, you can find the code on Github

  • Hi Nande,

    Thanks for this nicely structured tutorial. I have a question, it’s not really clear to me what Jexia SDK is, is it like a push service?

    I’ve been working with Ionic for a while now and I’ve recently published this tutorial

    Ionic App Tutorial: Create a Mobile App for Purchasing Public Transport Tickets via SMS
    http://www.coding-dude.com/wp/mobile-apps/ionic-app-tutorial-create-a-mobile-app-for-purchasing-public-transport-tickets-via-sms/

    Curious to get feedback from other users of Ionic

    • Nande Sophia Konst

      Hi there,
      Thank you for the compliment. The Jexia JS SDK is a way to authenticate to Jexia and interact with your datasets without having to write an authentication system yourself. Thank you for sharing your link, I will definitely check out your tutorial 🙂

      Best regards, Nande