IBM MFP – Ionic/Cordova sample

This post is the first in our IBM services tutorials series. We will present and demo  the IBM MFP service.

The IBM Mobile Foundation is an integrated platform dedicated to building entreprise mobile applications . It provides a scalable mobile access gateway for securely accessing back-end services such as the Cloudant NoSQL database and the IBM Cloud Object Storage. It also provides other mobile capabilities such as push notifications, app analytics and more. Through this tutorial we will learn more about the platform then build a sample app to demonstrate one of MFP`s main capabilities: backend connections .

By the end of this tutorial you will learn :

• what is the IBM MFP platform composed of and how to set it up .
• how to fetch data from Cloudant database to mobile app / add data to cloudant database from mobile app through MFP.

IBM MFP – The components

Technically the Mobile Foundation Platform is a set up of an MFP server, an MFP CLI, an MFP operations console, an MFP application center and the appropriate client-side runtime libraries to use it.

• MFP Server

To build MFP applications you are likely to set up an MFP server as a first step. An MFP server acts as a container for Mobile Foundation application packages, and is an EAR file that runs on top of traditional application servers.  It integrates into your app environment and uses existing resources and architecture via ” adapters “.
Adapters are server-side components used to channel your app`s back-end and cloud-based services to user’s device. You can use adapters to retrieve and update data from information sources, and to allow users to upload data and start other services and applications. The following figure illustrates an MFP server hosting Java code (adapters) that securely links the mobile app to backend services 

• MFP CLI and MFP Operations Console

Through the process of developing MFP applications, you will use the MobileFirst Foundation Command Line Interface to manage MFP server instances, adapters and the applications on MFP server .

Once MFP server set up, you can access the MFP Operations Console either through MFP CLI or by accessing http://your-server-host:server-port/mfpconsole .

• Client-side runtime components

MFP provides client-side runtime libraries to integrate into the locally stored app code. You use them to add MobileFirst features to your client apps.

• Application center

MFP provides a single shared repository for mobile applications where  you can share apps that are under development within your organization. This facilitates collaboration and serves app provisionning as well as app feedback management .

IBM MFP – The capabilities

The IBM MFP platform does not only enable the development of secure mobile applications . It offers services to optimize, integrate and manage those apps from push notifications to offline mode and analytics .

In this section we will have a hands-on on the backend connections capability of MFP, where MFP acts as a middleware for connections with backend services, in our case with IBM cloudant . We will go through the following steps :

1. Create and populate a Cloudant Database
2. Create and populate a Cloud Object storage service
3. Create a Mobile Foundation service
4. Download and customize the sample source code
5. Deploy and test MFP adapters 

1.  Create and populate a cloudant database

We will create an ionic/cordova app that lists cities of my country with a description text , and from which users can upload review comments or photos about each city if they have been to it before .

We first will create a cloudant NoSQl DB service through the IBM Cloud dashboard . 

from your Cloudant service dashboard , click on Launch Cloudant Dashboard :

and create a new Cloudant database with the name tunisian-cities :

After creating the new database, you have to add a first document :

and populate it with the following :

{
  "name": "Carthage",
  "picture": "Carthage.jpg",
  "description": "Close to the capital, a prestigious location and striking   views: this is the introduction to the Coasts of Carthage, named after one of the most glorious ancient cities of the Mediterranean. Founded by the Phoenicians, destroyed then rebuilt by the Romans, Carthage is today a fashionable city."
}

Create 3 more documents and populate them with the following data :
tunisianCity2.json , tunisianCity3.json , tunisianCity4.json .

Check the table view of your tunisian-cities database for the following :

In order to access this database through your code later,  you need to create an API Key as follows:

• go to your Cloudant service’s dashboard → Service credentials → new credential . You will get your service credentials as a json object including api key, host name and host url which you will use later .

2. Create and populate a Cloud object storage service

On your IBM Cloud dashboard create a new Object storage service . On the new Object Storage dashboard`s click on Buckets → Create Bucket 

On your new bucket`s overview page click on Objects → Upload → Files and upload all sample images provided here .

In order to access this storage object you need to create a service ID and an API Key as follows :

• Use the IBM Cloud Identity & Access Management dashboard to create a service ID through Service IDs → Create service.

• Add a Cloud Object writer role to created service ID by going to your Cloud Object`s overview page and clicking Access policies → Service IDs Create access policy after choosing the service ID and assigning ” writer ” for ” Role for this bucket ” .

• Create an API Key by going to Service IDs under the IBM Cloud Identity & Access Management dashboard then API Keys tab . Download the API key after creation and save it for later .

3. Create a Mobile Foundation service

We now need to create a Mobile Foundation service by going to the IBM cloud dashboard then clicking on Catalog → Mobile Foundation . On the overview page of the created service click on Service credentials → new credential and save the credential object generated .

Then we have to create an MFP server instance using the service credentials generated running mfpdev server add .

4. Download and customize the source code

• clone this repository for the sample ionic app source code
• Set up your cloudant credentials  and object storage credentials in TunisianCitiesAdapter xml file

5. Deploy and test MFP adapters

• Use mfpdev adapter build and mfdev adapter deploy to deploy the adapters provided in the repo to MFP server as follows :

• Verify your adapters configuration through the MFP dashboard

In the IBM Cloud dashboard, under Cloud Foundry Services , click on the Mobile Foundation service you created and you will have the MFP console embedded within it ( click on Launch Console ) . Check the credentials you apdated on TunisianCitiesAdapter xml file as follows :

• Test your adapters : you can use either the Swagger view within MFP dashboard or Postman to test your adapters operations.

6- Register your app to MFP server and test it 

As a final step you need to run to register your ionic app to the previously created mfp server . Run the mfpdev app register command . Then cordova prepare to propagate the changes made . 

Build and run or emulate your app using $ ionic cordova run android

That’s all you need to perform to get a hands-on on IBM MFP . Yet, building and managing MFP apps has alot more than this . We will be covering more IBM MFP capabilities in the coming tutorials .

You can always leave a comment here or email me if you are having issues building the demo code.