Building Hybrid Mobile apps with Cordova & Ionic and Mobile Backend-as-a-Service (MBaaS) with IBM Bluemix

Creating Hybrid Mobile Apps with IBM Bluemix Hands On Lab

Hello and Welcome. This week I’ve been at JKUAT (Jomo Kenyatta University of Agriculture and Technology) and Multimedia University of Kenya, sharing with faculty and students the power of cloud innovation platforms including how they can accelerate the creation of great Mobile apps.

This lab focuses on using Hybrid Mobile app development – with Apache Cordova and Ionic – together with Mobile Backend as a Service (MBaaS) provided by IBM’s cloud innovation platform Bluemix.

  1. First we’re going to create a Hybrid Mobile app on our local machine. This part will be fiddly because we’re developing this on the local machine.
  2. Then we’ll use Bluemix to create the Mobile Backend as a Service (MBaaS) which includes setting up a database, security etc. This bit will be easy peasey. Really.
  3. Then we’re going to use Bluemix to create an application that monitors tweets in Twitter, determines the mood of those tweets, and then sends us an SMS message with the ones that are positive. Seriously this will be easy too.
  4. Finally we’ll show you how to link the two together so that your Hybrid Mobile app can receive those positive tweets too.

Sweet.

Let’s get started.

  1. Create a Hybrid Mobile app

Let’s create a Mobile app that could be compiled to run on a range of different Mobile devices. We can test this Mobile app on our laptops using an emulator, or sign up and run it on our Mobiles.

Hybrid Mobile apps is a technique to use standard Web technologies – HTML5, CSS, Javascript – together with some clever frameworks and tools – namely Apache Cordova, Ionic, Bower, as well the SDKs for each device.

You can learn way more about Hybrid Mobile apps here. Often Hybrid Mobile is a good compromise between speed and ease of creating a Mobile experience across a wide range of devices. It can also lower the burden of maintaining multiple code-bases and keeping up with ever updating Mobile OS levels. Sure Native apps enable you to really control how the Mobile App looks and feels, but in many cases Hybrid is good enough. And Hybrid enables us to insert Native code where we need to access device-specific stuff like Cameras and GPS.

For this Workshop we’ll focus on Android – but all these steps can be used with a few tweaks for Apple iOS.

Ok – let’s start by getting the right pre-reqs onto our machine. Remember we’re not using Bluemix yet. We’ll use that for the Mobile Backend services – and it’ll be considerably easier!

  • – Install the Pre-Reqs

1.1.1 – Install Git

Git rocks. If you’ve never heard of it – it’s a revision control system that has become very popular for being quick and easy to use. By the way, Bluemix has built-in features for helping developers collaborate and share code which integrate with Git.

For our Workshop we’ll use Git to download a sample Hybrid Mobile App that some nice developers have already written and shared on Git.

Installing the Git tool means we can easily get this code using the command line.

  • Download Git here: http://git-scm.com/download/win
  • Note: While installing make sure you choose the option to enable Git to be run from the command line. If you missed that step, just re-install and change the option.

pic1

  • Now open a command line (cmd) and run the command git to make sure you can run from the command line.

pic2

1.1.2 – Install Node.js with npm

Node.js is a runtime for Javascript that screams (is fast) because of some clever stuff it does (an event-driven, non-blocking I/O model). Node.js also has a feature called npm that helps organise and manage packages of Javascript. We’ll deploy Node.js in the cloud with Bluemix later but we also need it on our laptops to test the Mobile App locally.

pic3

1.1.3 – Install your Mobile SDK

For this workshop we’re going to use the Android SDK. The great thing about Hybrid Mobile Apps is you can easily add the iOS SDK and build the same app for this platform later.

set JAVA_HOME=c:\Progra~1\Java\<jdkdir>

 

1.1.4 – Install WinAnt

This step is optional. But it may save problems later. The Android SDK uses ANT (Another Neat Tool), to build your Hybrid App, and often issues arise when the Android SDK can’t find ANT. It’s very irritating and fiddly to solve. Usually installing WinAnt fixes it.

 

Ok, these are all the pre-reqs we need to download to install. For the rest we’ll use git and npm to install.

Important – The Android SDK installation may open a window that looks similar to a regular Command Window. Close this and make sure you use a real command window for the next steps.

1.1.5 – Install Cordova

Apache Cordova is a set of tools for creating Hybrid Mobile apps using HTML5, CSS and JavaScript. You can download and install Cordova from the Website (https://cordova.apache.org), but we’re going to do it the easy way using Node.js’ npm package manager.

  • Open a command line window
  • Run this command

npm install -g cordova

pic4

1.1.6 – Install Ionic

Ionic is a framework for creating Mobile App UIs in HTML5 and CSS. We’re using this to “render” the UI for our Hybrid App. Once again you can download and install Ionic from the Website (www. ionicframework.com), but we’re going to do it the easy way using Node.js’ npm package manager.

  • In your command line window, run this command

npm install -g ionic

 

1.1.7 – Install Bower

Bower is a handy tool for managing assets. We’re going to use it to manage the Hybrid Mobile app code. Again you can download and install Bower from the Website (www. bower.io), but we’re going to do it the easy way using Node.js’ npm package manager.

  • In your command line window, run this command

npm install -g bower

That’s it – we’ve installed everything we need to build our Hybrid app for the Android Platform.

Rather than write our app from scratch we’re going to use a ready-made one – called Bluelist. The nice developers who created it, shared it on IBM Jazzhub and we can use git to pull a copy down to our machine.

  • In your command line window, navigate to where you’d like to store the Bluelist app and then run this command

https://hub.jazz.net/git/mobilecloud/bluelist-mobiledata

  • It may take a while for the files to be pulled. When finished you’ll have a copy of this Mobile App.

2 – Mobile Cloud

Now we need to create the Mobile Backend Services – this is where we start using Bluemix.

2.1 – Create a Mobile Backend service

We’re going to use Bluemix to create a Mobile backend service – including a Mobile database and Mobile security. It’s going to be really easy.

  • Log in to Bluemix.
  • Click on the Catalog link at the top.

pic5

  • Find the Mobile Cloud service in the Boilerplates section near the top.

pic6

  • Click on the Mobile Cloud service

pic7

  • Give it a name

pic8

  • Hit Create

pic9

Now Bluemix will create a Mobile Cloud service including creating a Cloudant database, a cloud-hosted Node.js runtime (just like the one we’re using locally to run our Mobile app), a Mobile Quality service, Push notification and a Mobile Application Security Manager. Neat huh?

  • Now go to the Dashboard

pic10

You’ll see the Mobile Cloud service.

pic11

  • Check that it’s running.
  • Now click on Mobile Options at the top left.

pic12

  • We’ll need these credentials.

pic13

Now, we need to modify the www/bluelist.json file with the details from Bluemix, so that your Mobile App will be permitted to access the Mobile Cloud services.

  • Navigate to the directory where to cloned Bluelist.
  • Go into the bluelist-mobiledata-cordova directory
  • Then www
  • Now open thejson file for editing – in Notepad or similar.
  • Edit these values carefully – making sure to keep the “ marks and commas – using the values given by Bluemix.
  • Save the file.


{
"applicationId": "<INSERT_APP_KEY_HERE>",


"applicationSecret": "<INSERT_APP_SECRET_HERE>",


"applicationRoute": "<INSERT_APP_ROUTE_HERE>"

}

Great.

Now let’s run our Mobile app.

  • Go back to your Command prompt – or open a new one.
  • Navigate to the directory where to cloned Bluelist

cd c:\<wherever-you-put-it>\ bluelist-mobiledata

  • Change into the bluelist-mobiledata-cordova directory

cd *cordova

  • Install the Bower framework in this directory

bower install

 

  • Tell Cordova to prepare to build Hybrid Apps for the Android platform

cordova platform add android

  • Tell Ionic to build the Hybrid App for Android

ionic build android

Great. Now we have a working Hybrid Mobile App, that is ready to connect with Bluemix and store information in the Cloud database service.

Finally, tell the Android SDK to run your Android app using it’s emulator. This step will take around 5 minutes.

The Android Emulator should eventually appear. Be patient while it loads the Android OS, and then your Mobile App.

Pesky Ant Problems

ant

If you get an error about the Android SDK not finding Ant. Please refer to section 1.1.4 – Installing WinAnt to fix the issue.

Also see this guide: http://developer.android.com/tools/building/building-cmdline.html

Finally your Mobile App should load.

android

Test the app, by adding and removing items for the list.

load

If you get an error about not being able to connect to the cloud, check the credentials in the bluelist.json file. If you need to make corrections, close the emulator, re-build the app and try again.

could no

Now you can see the data being stored in Bluemix

  • Back in the Dashboard, click on the MobileData

Click on Manage Data

manage data

  • Expand the Data Classes section.
  • You’ll find you data here.
  • You can now add and remove data, either using the Mobile App interface or this interface.
  • You can even import data – in json format – by dragging it onto this page.

import

Now let’s put the Mobile App onto our phones!

To do this we need to sign the apk file that was generated and transfer it and install it on our phones.

To generate a release build for Android, we can use the following cordova cli command:

$ cordova build --release android

Next, find your unsigned APK file in platforms/android/bin

It will likely be called something like CordovaApp-debug.apk in the bluelist-mobiledata-cordova\platforms\android\ant-build directory.

Now, we need to sign the unsigned APK and run an alignment utility on it to optimize it and prepare it for the app store.

Let’s generate our private key using the keytool command that comes with the JDK. If this tool isn’t found, refer to the installation guide:

$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

You’ll first be prompted to create a password for the keystore. Then, answer the rest of the nice tools’s questions and when it’s all done, you should have a file called my-release-key.keystore created in the current directory.

Note: Make sure to save this file somewhere safe, if you lose it you won’t be able to submit updates to your app!

To sign the unsigned APK, run the jarsigner tool which is also included in the JDK:

$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore CordovaApp-release-unsigned.apk alias_name

This signs the apk in place. Finally, we need to run the zip align tool to optimize the APK:

$ zipalign -v 4 CordovaApp-release-unsigned.apk Bluelist.apk

Now we have our final release binary called Bluelist.apk.

If we wanted, we could now release this on the Google Play Store for all the world to enjoy.

But for now we can put this on our phone (e.g. email it to yourself) and install your Mobile app.

(There are a few other ways to sign APKs. Refer to the official Android App Signing documentation for more information.)

  • Now transfer your signed apk file onto your phone – using a USB cable, email etc.
  • Install the apk file and run it.

References

https://hub.jazz.net/project/mobilecloud/bluelist-mobiledata/overview#https://hub.jazz.net/git/mobilecloud%252Fbluelist-mobiledata/list/master/bluelist-mobiledata-cordova

Signing your Mobile app

http://ionicframework.com/docs/guide/publishing.htmlhttp://developer.android.com/tools/publishing/app-signing.html

Advertisements

3 thoughts on “Building Hybrid Mobile apps with Cordova & Ionic and Mobile Backend-as-a-Service (MBaaS) with IBM Bluemix

    • Hi Marupu – thanks for your comments. Of course not compulsory to sign the Mobile (unless you plan to distribute it through an app store). To test the un-signed app on your phone you’ll need to turn on the option to install un-signed apps. Typically the steps are: Go to Settings. Select Security. On the list, Find Unknown Sources and check the box. Then install the un-signed app.
      For info on how to load JSON data into IBM Cloudant, please see this tutorial: https://www.youtube.com/watch?v=zESROlotu-g

  1. I add some perm issue.

    On Chrome, start it with –disable-web-security flag.

    On Android (inc emulator), install the following Cordova plugin :
    >> cordova plugin add cordova-plugin-whitelist

    And add this to config.xml :
    >>

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s