The last April 2014 at Build 2014, beside the announcement of Xamarin support in Visual Studio, MicroSoft announced another extension that looks promising, the called “Multi-Device Hybrid Apps” which is a plugin for Visual Studio 2013 Update 2.

“Multi-Device Hybrid Apps” allows you to develop for multiple devices with the same source (HTML/JS/CSS) using Visual Studio as your IDE.

 

Note: We’re going to use the CTP 1.1. version of the plugin for the scope of this post, you can download the plugin here, (there’s a lot of broken links for this resource but this one is working today June 16, 2014).

Installation

Steps for installation:

1. Windows 8.1
2. You need Visual Studio 2013 Update 2 — You’ll really need the Update 2, if not you’ll be blocked like in the following image:                                                                  
3.    Download the plugin from here.
4. Install the “Tools for Mantaining Store apps for Windows 8” and “Windows Phone 8.0 SDK” (if you don’t have it, like me, it will take more than a couple of minutes to download and install).                                                                                                                                                                                                                                         Yeah you will need to install those two items that you always skip : P, bad news: the Windows Phone 8.0 images will take a lot of time to download.
5. After you have all the requirements, its time to install the plugin, piece of cake.
6. 6- The instalation will ask you to install a lot of Third Party Dependencies like Joyent Node.js (that you need in order to use the Apache Cordova CLI), Java JDK, iTunes and other stuff that you may need in order to take full advantage of the plugin (or at least that’s what the documentation says, but yeah, I almost have everything installed because of my previous Cordova apps, it’s really nice that this installer does all the dirty work for you, cool MS!).

Notes: In order to test your app in the Windows Phone Emulator your machine should be able to run MS hyper V.

Config Designer

The “Multi-Device Hybrid Apps” provides a manager for the configuration and plugins of your app, it’s really easy to install or uninstall a plugin via the Config Designer. It’s worth nothing that the Config Designer is just modifing the config.xml file of your application. Finally after a millennium installing all the requirements,  you’re ready to at least launch the sample application.

1. Open VS 2013
2. Create a New Project
3. Choose the “Multi-Device Hybrid Apps” template from the JavaScript or TypeScript templates (same template, different “language”)
   
   I had trouble installing joyent node.js though
4. After the solution is created your Solution Explorer should look like this:
   
5. By default Apache Cordova will serve index.html as the first page or “view” when the app is started up. Feel free to modify this HTML page so you can feel that we did something 😛
   
6. Next Build your App
7. Pressing F5 will launch a chrome browser with Apache Ripple simulator, with this simulator you’ll be able to see how you app will be “rendered” in a variety of devices like Nexus 4, Nokia N8, iPhone 3g, iPhone 4g, iPhone 5 and even ipads and other tablets, this is a nice feature that will help you to speed up your development, also maybe it will be useful for regression testing with tools like selenium. Although the ability to see how the apps will be “rendered” across multiple devices in the simulator is really useful, there’s a big need for a debugger, this will be covered in another section.

Debugging with the Apache Ripple simulator

It’s possible to debug apps with the Ripple simulator, for this version of the Multiple-Device hybrid Apps plugin you can debug out of the box:

Let’s try it quickly:

1. Go to Visual Studio
2. Open the file index.js
3. add the following function:

       function demoFunction() {
   
           var randomObject = {
               hello: "World"
           };
   
           console.log(randomObject);
   
       };
   
   

   After adding the function just bellow the “onResume” function, add a breakpoint in the console.log line.

4. At the end of the “onDeviceReady” function add the following call:

        // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here.
        demoFunction();
   

5. Press F5 in Visual Studio and lets see what happen.

As you can see, we can inspect the value of the plain JavaScript object “randomObject” using the Visual Studio debugger, this will be very useful for quick debugging with the Simulator.

On the JavaScript Console VS Output this will look like this:

Debugging on Device Emulators

Note on support for debuggin on emulators

Debugging with Visual Studio Debugging tools:

• Android 4.4 devices
• Windows 8.0 (Store)

JavaScript Console Output in Visual Studio (not the browser console, if you try to open the browser developers tools, the simulator will close the window):

• Android 4.4 devices
• Android < 4.4 devices
• Windows 8.0 (Store)

The content of this two lists means that is not possible to Launch or debug with the iOS Emulator from Windows, which is something to expect, fortunately Apache Ripple Simulator can help us a lot and when it’s time to test and debug something on the Emulator, it is suppose to be possible via remote debugging, we’re going to try it at the end here.

Android 4.4

It’s easy to Launch the Android emulator, if you have a configured Device all you have to do is change the Debugger target in Visual Studio to “Android Emulator”.

More info about the AVD Configuration with the AVD Manager here.

The current release make the promise of debugging, but I were not able to do it, it may be a problem with my AVD emulator configuration, Although the promise of showing the console.log results on the Visual Studio Output window was delivered:

As you can see the Visual Studio JavaScript Console Output displays what was passed to the console.log, but the application did not stop on the breakpoint : (

Using the iOS Simulator (you need a mac for this)

First you will need to set up the “vs-mda-remote”.

Open your console and install the vs-mda-remote (via node.js npm):

    npm install vs-mda-remote
For full instructions about how to install "vs-mda-remote" in your mac you can follow the instructions on the following StackOverflow question Visual Studio Cordova iOS build server setup

Once that you have installed the “vs-mda-remote” in your mac, you will have to create a folder for the builds (on the mac), that folder will be a parameter for the execution of the vs-mda-remote

vs-mda-remote --buildDir [YOUR_FOLDER] --allowsEmulate=true

In my case the folder was inside the Documents folder, so my full command was:

vs-mda-remote --buildDir /Users/robalarcon/Documents/remote-build/ --allowsEmulate=true

 

To test that everything is working, open safari and go to localhost:3000, you should have served a page like the following:

 

Configuring Your Remote Build Server in Visual Studio
You have the mac waiting for something, is ready for business, now it’s turn to configure Visual Studio for that business.

 

1. Get the ip address of your mac, open a terminal and type ifconfig

2. In Visual Studio navigate to TOOLS > Options > Multi-Device Hybrid Apps > General. And set the Host variable with the ip address of your mac, and the Port variable to 3000.
3. Set Enable remote iOS processing to True 

We’re ready to go, in my case, I just select “simulator – iphone” to debug, and the console on the mac start printing tons of messages and the it said: ** BUILD SUCCEEDED ** 😀

Be careful with typos i.e. when I setup the “vs-mda” on the mac, I typed —allowEmulate=true without the s in allows, and it didn’t throw an error, it just start with allowsEmulate option as False, and We don’t want that.

Note: if you don’t see the Simulator – iPhone as an option to debug, it’s because you have to choose iOS as platform at the DropDown component at the right.

Troubleshooting

* Problems with third party software

I had trouble installing joyent node.js, after installing all the third party software Visual Studio told me that it was a problem installing it, it was because I had previously installed an older version of node.js, if this happen to you, just install again node.js (the version that you previously had), and then install the latest version.

 

I also had problems with Apache ant, when I tried to build the sample App, the compiler throw an error telling that  the system environment variable was not well configured,

Because I didn’t want to spend more time with this problems I just manually installed Apache Ant, and set my environment variable (variable value is the folder that contains the ANT bin and lib folder).

 

Also you’ll probably need to add the following line to the system path:

%ANT_HOME%\bin

 

* Problems when trying to create a New Project

I spent an hour trying to find a workaround for an error when I was trying to create a new Project, the following error appear every time I tried to create a project:

I could not found a fix for the problem, it’s not included in the Multi-Device Hybrid Apps Known Issues, but I found a workaround, every time I was trying to create a project was in the default location Visual Studio Projects folder, I changed that location for a custom folder under “my documents” and it let me create a project. Following for this issue at StackOverflow.

 

* This AVD’s configuration is missing a kernel file!

If you try to debug an app with the Android emulator an the output shows that ERROR.

That means that you don’t have an Android device configured, you should configure one using the AVD Manager, you should have the AVD Manager already installed, so just look for it and configure an Android 4.4 device.

 

 

Conclusion

As always there’s cons and pros with “Multi-Device Hybrid Apps”

The big CON was the setup, it took me hours of downloading, installing and troubleshooting the requirements, that was really expensive and stressful, definitevely MS have to work with the installation of the plugin, at least in my case, it was really painful.

There’s a couple of big PROS at least for me, once everything is installed is really easy to play around with this stuff, the ready to go Apache Ripple Debugging is hot, really hot, and the iOS Remote Emulation on the mac was surprisingly easy to install and run.

At the end, is Apache Cordova/PhoneGap, if you’re familiar with Cordova/PG and with Visual Studio you’ll love this plugin and it may speed up your development workflow with all the available tools, I have a good impression on my first hands on Multi-Device Hybrid Apps, and the best of all is that because Apache Cordova Code is just HTML, CSS and JavaScript, every developer on a team can choose their own IDE and development workflow without a problem.

 

Resources:

• Multi-Device Hybrid Apps for Visual Studio. Documentation for CTP1.1 Last updated: May 29, 2014. Documentation for Multi-Device Hybrid Apps for Visual Studio (THIS GUY IS ALL YOU NEED, BESIDES STACKOVERFLOW THIS WAS MY MAIN RESOURCE).
• Apache Cordova integrated in Visual Studio for Multi-Device Hybrid App development, Last retrieved: June 16 2014. http://msopentech.com/blog/2014/05/12/apache-cordova-integrated-visual-studio/

 

This “tuturial” is over,

— rob