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.

    Cordova blank app creation on VS 2015
    Cordova blank app creation on VS 2015

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.

    Cordova App folder structure
    Cordova App folder structure
  • You can also see the platforms Cordova supports which include 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.
    Windows phone 8.1 Emulator running Cordova app.
    Windows Phone Emulator running Cordova app.

    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 it’s shown in the below snapshot.

    Cordova app using Ionic SideMenu starter template.
    Windows Phone emulator running Ionic SideMenu starter Cordova app.
  • 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.
Lib folder Ionic and AngularJS files.
Lib folder with Ionic and AngularJS files.

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  .

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.

Setting Windows phone as an environment.
Setting Windows phone as an environment.

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

To deploy and preview you Hybrid application.
To deploy and preview you Hybrid application.

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.

2015-08-17_21-35-55
Mobile Browser Simulator

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

MobileFirst Project Folder structure with the modified common folder.
MobileFirst Project Folder structure with the modified common folder.

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.

  • 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)

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

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

2015-08-18_09-26-45
Imported Cordova app running on MFP Server.

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

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

Tagged as: , , , , , ,

Author: Vidyasagar Machupalli

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