Enhance MobileFirst Cordova app using 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.
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:
mfp cordova preview. 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
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
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 for further development.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.
- Open MFPCordova project folder and create a new folder namely "MFPCordovaApp".
- 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).
- 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.
- Move MFPCordovaApp.jsproj, taco.json files and merges folder of VSCordova project to MFPCordovaApp folder of MFPCordova project.
- Open MFPCordovaApp.sln of MFPCordova project in Visual studio 2015 and Click on "Show All Files" button highlighted in the figure below.
- 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.
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
You can import your custom plugins and add more Cordova supported platforms by opening config.xml file in Visual Studio 2015.