Ionic Hybrid Mobile app using MobileFirst Platform 7.1 CLI


Mobile apps are everywhere and on everyone’s learning list. As a web developer, You can leverage your HTML5, Javascript, CSS and other web development technologies like AngularJS to develop mobile apps through Apache Cordova. The Ionic framework makes your hybrid mobile app front-end development easy with its open source SDK.

In a simple language,  Ionic is a powerful HTML5 SDK that helps you build native-feeling mobile apps using web technologies like HTML, CSS, and Javascript.

Ionic also uses AngularJS for a lot of the core functionality of the framework. While you can still use Ionic with just the CSS portion, Its recommended investing in Angular as it’s one of the best ways to build browser-based applications today.

Ionic Framework with Angularjs and cordova
MobileFirst Platform (MFP) is an IBM mobile middleware offering also quoted under MADP (Mobile Application Development Platform) and MEAP (Mobile Enterprise Application Platform).

Setting up MobileFirst Platform CLI

IBM MobileFirst Platform Command Line Interface (CLI) is provided as an alternative to the Studio IDE. You can create and manage MobileFirst native and hybrid apps by using your own preferred text editors or alternative IDEs.

The procedure to setup CLI is very easy and MFP developer edition is completely free for trial purpose.

Ionic CLI Setup

Personally, I am a CLI guy. So Similar to MFP CLI, I use Ionic CLI and its pretty easy to create an Ionic App.

First of all, you need Node.js 4 to use npm commands.Then, install the latest Cordova and Ionic command-line tools. Follow the Android and iOS platform guides to install required platform dependencies.

Once successfully install, Open Terminal on a Linux Machine or Command Prompt on Windows (As an Administrator) and run the following command to confirm Ionic Installation

If Ionic is properly setup, You should see the below output with all the required information.

Let’s bring the awesomeness of MFP into an Ionic app by starting ground up.

Open your Terminal or Command Prompt and let’s create a new Ionic App with MFP. Effective MFP CLI V7.1, The hybrid mobile app which you are creating is a Cordova app by default.

If you observe the last command, It looks like pre-built MFP + Ionic templates may be downloaded from GIT. If you think so, your guess is right.

You can find the templates Here. Credits: Carlos Santana.

Download the templates as a ZIP and in your command point to the location where you have unzipped the templates on your system.

Once done navigate to the app folder on your Terminal or Command Prompt and run this command

All the packages mentioned in packages.json will be updated.

Note: You can learn more about MFP CLI commands and setting up MobileFirst server here.

MFP Ionic project with MobileFirst Platform
MFP Ionic App Folder structure

Navigate to app.js under www/js folder and the below code to wlCommonInit function

Why am I doing this?

  • To make your application begin communicating with MobileFirst Server as soon as it starts, use the WL.Client.connect method in common/js/app.js inside the WlCommonInit method.
  • To make your application communicate with the server at a later stage, call the WL.Client.connect method, as defined in the WL.Client class.

Note: Call this method only once, before any other WL.Client methods that communicate with the server. Remember to implement the onSuccess and onFailure callback functions.

Here’s the code snippet from app.js.

Polyglot & Pragmatic Programmer • Developer Advocate, IBM • Microsoft MVP • Intel software Innovator • DZone MVB
(Visited 20 times, 1 visits today)

Tagged as: , , , , , , , ,

Author: Vidyasagar Machupalli

Polyglot & Pragmatic Programmer • Developer Advocate, IBM • Microsoft MVP • Intel software Innovator • DZone MVB

  • Samuel Stanley

    Hey Nice Blog!! Does this work with mfpdev 8.0 cli??