Importing MobileFirst Platform Cordova project into Visual Studio 2015

Exploring and Coding are part of every developer’s life. While exploring you may come across many technologies, tools , libraries etc. Each technology has its own recommended IDE (Integrated Development Environment) for developing applications. Like

  • Eclipse for Java Development.
  • Visual Studio for developing applications using Microsoft stack.
  • XCode for iOS and Mac application development.
  • Sublime Text, Brackets , TextMate(Mac) for web development etc.

Coding using a new IDE is always a challenge as you have to learn about the new IDE and also you may already be familiar with an IDE and its shortcut keys. You will be more productive with an IDE which you love to code on.

Creating a MFP Cordova application

After a blog post on importing Visual Studio Cordova project into IBM MobileFirst , There was an interesting use case requesting for vice-versa. So in this blog post you will be importing an IBM MobileFirst Platform Cordova application into Visual Studio(VS)2015.

With IBM MobileFirst platform v7.1, using MobileFirst Command Line Interface(CLI) you can create an Apache Cordova application with IBM MobileFirst features packaged as a plugin called cordova-plugin-mfp. As Cordova application creation is out-of-scope of this blog post, here’s a link to an article which gives you a detailed intro including CLI commands.

Using the CLI commands mentioned under “Building the sample step by step” section of above mentioned link, create a new Cordova project namely MFPCordovaApp.Follow the other instructions to add platforms and plugins (Vibration and Camera).Once successfully created Your Cordova folder structure should look like as shown in the figure below

Screen Shot 2015-10-02 at 4.58.58 pm
MFP Cordova project Folder Structure

Here’s the CLI Commands captured on a Mac Terminal for your reference,

Now, when you run your MFPCordovaApp on Mobile Browser Simulator (MBS) using the CLI command

The app on iOS and Android after clicking on CAMERA button will call Cordova camera plugin and the output should look like as shown in the figure below

MFP Cordova app running on MBS
MFP Cordova app running on MBS

Creating a Visual Studio Cordova Project 

Follow the first three steps mentioned in this link.

Note: Don’t add any external libraries or frameworks namely Ionic or AngularJS as it is out-of-scope of this blog post.

Once successfully created, Navigate to your Visual Studio Cordova project folder and You should see the folder structure as shown in the figure below

Visual Studio Cordova project Folder structure
Visual Studio Cordova project Folder structure

 

MFPCordova2
MFPCordovaApp folder structure

Converting MFP Cordova project to Visual Studio Cordova project

As of today, there is no defined way to achieve this. So the below mentioned steps are just a workaround to open your MFP project in Visual Studio .If you have observed , Both MFP cordova project and VS cordova project are given the same name (MFPCordovaApp). There’s a strong reason behind this. Visual Studio understands solution (.SLN) files and project(.CSproj/.JSproj) files. Even a slight change in the name of your solution file may cause issues in loading the project in Visual studio. You will understand more on this once you follow the steps mentioned below.

  1. Open MFPCordova project folder and create a new folder namely “MFPCordovaApp”.
  2. Move all the other contents of MFPCordova project folder to the newly created MFPCordovaApp folder. (When you open MFPCordova project folder now, you should see only one folder i.e., MFPCordovaApp).
  3. Now, move MFPCordovaApp.sln file from VSCordova project folder to MFPCordova project folder. Your MFPCordova project folder should look like as shown in figure below.

    MFPCordova Project Folder structure
  4. Move MFPCordovaApp.jsproj, taco.json files and merges folder of VSCordova project to MFPCordovaApp folder of MFPCordova project.
  5. Open MFPCordovaApp.sln of MFPCordova project in Visual studio 2015 and Click on “Show All Files” button highlighted in the figure below.

    MFPCordova4
    MFPCordova project in Visual Studio 2015
  6. Select greyed-out folders namely bin,bld and platforms and include them into the project by right-clicking individual folder and selecting “Include in Project” from the menu.

    MFPCordova5
    MFPCordova project in Visual studio 2015 with platforms folder

Now when you run MFP migrated cordova project on Visual Studio 2015, The output on Android Ripple-Nexus emulator should look like as shown in the figure below

MFPCordova6
MFPCordova project showing image selected using Cordova Camera plugin running on Android Ripple emulator

You can import your custom plugins and add more cordova supported platforms by opening config.xml file in Visual Studio 2015.

If you hit roadblocks or if you are happy with this blog, Feel free to add in the comments section below.

Happy Coding !!!

(Visited 3 times, 1 visits today)

Vidyasagar Machupalli

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