Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Ionic Hybrid Mobile App Using MobileFirst Platform 7.1 CLI

DZone's Guide to

Ionic Hybrid Mobile App Using MobileFirst Platform 7.1 CLI

Here's how to whip up an Ionic mobile app with the MobileFirst Platform, including setting up your Ionic CLI.

Free Resource

Get gorgeous, multi-touch charts for your iOS application with just a few lines of code.

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 trail 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

ionic info

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

Your system information:
Cordova CLI: 5.4.1
Ionic CLI Version: 1.7.12
Ionic App Lib Version: 0.6.5
ios-deploy version: Not installed
ios-sim version: 5.0.4
OS: Mac OS X El Capitan
Node Version: v4.2.3
Xcode version: Xcode 7.2 Build version 7C68

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.

Vidyasagars-MacBook-Pro:~ VMac$ mfp cordova create
[?] Enter name of app: MFPIonicApp2
[?] Enter the package ID: com.ibm.MFPIonicApp2
[?] Enter the app version: 1.0.0
[?] Select platforms to be supported by your app: android, ios
[?] The following plugins will be automatically added to your app:
cordova-plugin-mfp
org.apache.cordova.device
org.apache.cordova.dialogs
org.apache.cordova.geolocation
org.apache.cordova.globalization
org.apache.cordova.inappbrowser
org.apache.cordova.network-information
Please press enter to continue...
[?] Select additional plugins you would like to add: cordova-plugin-mfp-jsonstore 7.1.0 "IBM MobileFirst Platform Foundation - JSONStore", cordova-plugin-mfp-push 7.1.0 "IBM MobileFirst Platform Foundation - Push Notifications", org.apache.cordova.battery-status 0.2.12 "Battery", org.apache.cordova.file 1.3.2 "File"
[?] Enter a path to an app template to be added: /Users/VMac/Documents/mfp-ionic-templates-master/blanknic-templates-master/blank

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

npm install

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 App Folder structure

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

WL.Client.connect({
onSuccess: onConnectSuccess,
onFailure: onConnectFailure
});

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.

function onConnectSuccess() {
console.log("Yay!!! Connected to MobileFirst Server");
}

function onConnectFailure() {
console.log("Failed to Connect");
}

window.MFPClientDefer = angular.injector(['ng']).get('$q').defer();;
window.wlCommonInit = window.MFPClientDefer.resolve;
window.MFPClientDefer.promise.then(function wlCommonInit(){
// Common initialization code goes here or use the angular service MFPClientPromise

console.log('MobileFirst Client SDK Initilized');
mfpMagicPreviewSetup();

WL.Client.connect({
onSuccess: onConnectSuccess,
onFailure: onConnectFailure
});
});

.Net developers: use Highcharts, the industry's leading interactive charting library, without writing a single line of JavaScript.

Topics:
mobile app development

Published at DZone with permission of Vidyasagar Machupalli, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}