Importing Visual studio Cordova project with Ionic and AngularJS into IBM MobileFirst

Let me start this post with a disclaimer that “Don’t panic by reading the post title”. It might look bit lengthy, but still summarises what we are trying to achieve here.

Let me explain you in four steps,

• Creating a Cordova project with ionic and Angularjs in Visual Studio 2015.
• Creating a new MobileFirst Hybrid Application.
• Importing required files from Visual studio 2015 Cordova project to MobileFirst application.
• Code tweaks here and there to make it work with MobileFirst Platform server.

So, let’s get started !!!

Visual Studio 2015 Cordova Project with Ionic and Angular

Visual studio started supporting Cordova as an option for web developers to leverage their HTML,CSS and Javascript skills in mobile app development.

As Visual studio 2015(VS2015) is the latest release from Microsoft, I will be using Visual Studio 2015 Community edition for this blog post.

• Open Visual Studio (Run as an Administrator) and on the menu bar choose File -> New -> project.
• On the New Project dialog box, navigate to Javascript on the left and choose Blank App under Apache Cordova Apps as shown in the snapshot below.

  

Note: If you don’t see this option, install Cordova Tools for Visual Studio 2015.

• Visual Studio creates a new Cordova app with the solution explorer on the right showing the app folder structure.

  

• You can also see the platforms Cordova supports which includes Android, iOS and Windows devices.
• By choosing Windows Phone(Universal) in the device drop and with Windows 8.1 Emulators installed if you run the app, you should see the below output on a windows phone 8.1 emulator.

  

  I know there’s nothing fancy here. This is because your index.html under www folder has only one single <p> tag saying “Hello, your application is ready”.By now we are sure that Cordova on VS 2015 is working as expected.

• Instead of reinventing the wheel, Let’s use Ionic SideMenu starter template for VS Tools for Apache Cordova – a pre-built template hosted on GIT with Ionic and AngularJS included. Let’s call this Playlist App.
• Download the Playlist App template from GIT and unzip the project. In visual studio, Open the solution (.sln) file and run the app by selecting windows phone 8.1 Emulator as mentioned earlier and your mobile app should look like the way its shown in the below snapshot.

  

• Now if you see the folder structure of this playlist app template in solution explorer, it will have Ionic and AngularJS related files added. We will concentrate more on www folder as indicated. Why? you will see it pretty soon.

Creating a MobileFirst Hybrid Application

First of all, Let me take the privilege of answering an unasked question.Just think that this is a Q which my own soul is asking myself.

What is IBM MobileFirst platform?

IBM MobileFirst Platform(MFP) is a mobile development platform that provides development and deploy options both on the cloud (Bluemix) and on-premise (installed locally). MobileFirst Platform enables you to build, enhance, and continuously deliver mobile apps efficiently and effectively. It extends the development, delivery, and management capabilities of MobileFirst Platform Foundation by adding scalable data services.

To know more, please visit our developer website or Andrew Trice’s blog .

Note: For this post, we will be using MFP 7.0 Version and will start by adding a windows phone environment and then see how to add ios and android to it.

You may be wondering, why i haven’t explained about the Cordova app folder structure in-detail. The answer is – There is a good link which guides you on how to create a hybrid application and also explains the structure of Cordova app as MobileFirst uses Cordova under the hood for hybrid apps.

Creating your first Hybrid application.

Note: MobileFirst environment setup is out of the scope of this post and you can learn more about it here.

With the hope that everything went smooth and you are all set with MobileFirst Platform including MFP Server. Let’s preview our application by deploying it to MFP server. To do that here’s what you do

Once your Hybrid application is successfully deployed to MFP Server. You should see your windows phone app running on Mobile Browser Simulator as shown in the snapshot below.

Importing Cordova Windows Phone App into MobileFirst

It’s time to import our Cordova Windows Phone app with UI framework Ionic and angularJS included into our newly created MobileFirst Hybrid application which is just saying “Hello MobileFirst” as of now.

• Rename the common folder to common_original– just in case something goes wrong we can always revert.
• Create a new folder common next to the common_original folder and copy all the files + folders from www folder of VS 2015 Windows phone solution to the newly created common folder.

Now your folder structure should look like this

Code tweaks to playlist app

To make our Visual Studio imported playlist app to work on MFP server, there are few code changes to be made.

• Open index.html and comment Cordova.js script inclusion.This is required as MobileFirst will include this script tag later.

<!--<script src="cordova.js">-->

• Copy & Paste the MobileFirst initialisation code sitting in initOptions.js and main.js under common_original/js/ folder to app.js under common/js/ (don’t remove existing contents of app.js)

Note: To understand more on this, read Ray’s blog Here’s the complete app.js,

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function ($compileProvider, $stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('app', {
    url: "/app",
    abstract: true,
    templateUrl: "templates/menu.html",
    controller: 'AppCtrl'
  })

  .state('app.search', {
    url: "/search",
    views: {
      'menuContent': {
        templateUrl: "templates/search.html"
      }
    }
  })

  .state('app.browse', {
    url: "/browse",
    views: {
      'menuContent': {
        templateUrl: "templates/browse.html"
      }
    }
  })
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent': {
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: "/playlists/:playlistId",
    views: {
      'menuContent': {
        templateUrl: "templates/playlist.html",
        controller: 'PlaylistCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');
});

//initOptions.js code
// Uncomment the initialization options as required. For advanced initialization options please refer to IBM MobileFirst Platform Foundation Knowledge Center 

var wlInitOptions = {
	
	// # To disable automatic hiding of the splash screen uncomment this property and use WL.App.hideSplashScreen() API
	//autoHideSplash: false,
		 
	// # The callback function to invoke in case application fails to connect to MobileFirst Server
	//onConnectionFailure: function (){},
	
	// # MobileFirst Server connection timeout
	//timeout: 30000,
	
	// # How often heartbeat request will be sent to MobileFirst Server
	//heartBeatIntervalInSecs: 7 * 60,
	
	// # Enable FIPS 140-2 for data-in-motion (network) and data-at-rest (JSONStore) on iOS or Android.
	//   Requires the FIPS 140-2 optional feature to be enabled also.
	//enableFIPS : false,
	
	// # The options of busy indicator used during application start up
	//busyOptions: {text: "Loading..."}
};

if (window.addEventListener) {
	window.addEventListener('load', function() { WL.Client.init(wlInitOptions); }, false);
} else if (window.attachEvent) {
	window.attachEvent('onload',  function() { WL.Client.init(wlInitOptions); });
}

//main.js code
function wlCommonInit(){
	/*
	 * Use of WL.Client.connect() API before any connectivity to a MobileFirst Server is required. 
	 * This API should be called only once, before any other WL.Client methods that communicate with the MobileFirst Server.
	 * Don't forget to specify and implement onSuccess and onFailure callback functions for WL.Client.connect(), e.g:
	 *    
	 *    WL.Client.connect({
	 *    		onSuccess: onConnectSuccess,
	 *    		onFailure: onConnectFailure
	 *    });
	 *     
	 */
	
	// Common initialization code goes here
	
}

• Open style.css under common/css and paste this code.

/* Empty. Add your own CSS if you like */

html,body{

height:100%;

}

As Ray says “This is required because the application ends up with a 0% height when run under MobileFirst.”

We are all done. The only pending thing is to build and deploy our imported Cordova playlists app.

As we are good with Windows phone app, Let’s see how to add iOS and android MobileFirst environments to our existing MobileFirst playlists app in this silent video.

Finally, Build & Deploy the imported playlist app to see….Would like to hear from you.

Hope you enjoyed the walkthrough.Add your comments and Happy Coding !!!!
CodeProject

The post Importing Visual studio Cordova project with Ionic and AngularJS into IBM MobileFirst appeared first on Vidyasagar MSC.