The Multi-Device Hybrid Apps extension for Visual Studio Kinda Rocks

项目
10/24/2014

NOTE: The CTP3 of this Visual Studio extension (now called Apache Cordova Tools for Visual Studio ) was just released —I'm test driving it now so stay tuned!

I have been messing around with creating Cordova (PhoneGap) apps, mostly ones that are derived from the Mobile Services quickstart project for PhoneGap. However, I have just been using the standard tools of text editor (Notepad++), command prompt, Android or iOS emulator, and/or my physical Windows Phone 8.1 device (for some reason I can’t get the WP8.1 emulator VM to run on my machine) for building and testing my Cordova apps.

After running into a missing bit of API for Windows Phone (hey Cordova folks, let’s get this fixed for Windows Phone), I tried to flip quickly over to build and test my app using the Android emulator and Eclipse. After spending nearly a day trying to get the Android/Java stuff setup correctly, and then getting fed-up with the ponderously slow Android emulator, I decided to give the Multi-Device Hybrid Apps extension for Visual Studio a try. (Let’s shorten Multi-Device Hybrid Apps to MDA, which saves precious characters, and the name of the node.js module is vs-mda.)

Since I already had Visual Studio 2013 with Update 3 installed (so that I could have all the goodness of all the latest Azure Mobile Services tooling), all I needed to do was install the Multi-Device Hybrid Apps extension for Visual Studio CTP2.0. The install completed without errors (always a plus for a CTP—especially one installing lots of non-MS bits). After messing around for a bit, I got so excited about this new VS tooling for non-MS platforms, that I wanted to share what I found; first…..

Visual Studio is actually a pretty good JS editor

My past experiences working with JavaScript in Visual Studio were only so-so, such that I was primarily using Notepad++ and web browsers to write and debug my JS code. I’m not sure if it’s just a matter of having the right metadata files on hand, but the debugging experience of my JS code was actually surprisingly good using VS. Breakpoints were hit correctly, current variable values were displayed in intellisense, and exceptions opened-up in VS, just as I would have expected from a C# app. Plus all of the pretty colors of a code page in VS (and you get to debug in the non-minimized version).

Hides the “crazy” of Cordova

For those of you who haven’t played with Cordova (or PhoneGap), it’s lots of command-prompts…to add plugins, to build and run apps on specific platforms. For every command, Cordova is downloading and installing npm modules from the Cordova Git repo, running complex build commands that generate and merge platform-specific builds—the command window just flies by. I must admit that many times, I have had failures in Cordova trying to build and run from the command line (especially for Android), and have resorted to manually starting the app in a specific platform’s IDE. Not only does MDA hide most of these myriad commands, but it just seems to build and execute a bit more consistently than the Cordova commands. JavaScript purists (and iOS devs) will probably really miss watching the commands churn by—but I really didn’t miss it, plus how much more magical when it just runs.

Let me just add that I’ve found it to often be a challenge just getting Eclipse to start on my Windows laptop (Java is in the wrong place…wrong Java is installed). For me, the MDA installation had no trouble finding my Java installation, and it installed the Android SDK somewhere where Visual Studio knew where to find it (in \AppData\Local\Android for my installation). In fact, the MDA extension installed a lot of non-MS tooling that I already had elsewhere on my machine (npm, node.js, Git, Android SDK, Chrome, iTunes) plus some new stuff (Java JDK, Apache Ant, SQLLite). The only problem that I had was MDA couldn’t find the Git (that I assumed it installed), but it provided a clear warning, and I was able to easily set the path in the GIT_HOME environment. variable. With that one manual fix, MDA seems to build and run just fine. Then I went and removed the extra Android SDK (which is huge).

Check a box to turn plugins on and off

Cordova uses plugins, which are external (often third-party) modules that implement some device-native functionality, like camera capture or file system access. You usually add them from the Cordova Git repo, with a command like this:

 cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

Executing this command again fills the window with installation results and the installed plugin gets added to the master config.xml file for the project. Based on this experience, just imagine how surprise I was to discover that when I accidentally opened my Cordova project’s config.xml file in Visual Studio I found a VS project-style UI, with a Plugins tab:

Need to add or remove a plugin, just check the box! Sweet!

Ripple web-based emulator

If you have ever tried to test and debug Cordova apps (or any Android app) using the emulator that ships with the Android SDK; wow, it’s slow. I think even slower than the Windows Phone VM-based emulator (last time I was able to run it). MDA ships with Apache’s Ripple emulator

This thing runs in Chrome, is pretty fast, which makes it a great way to smoke test your app during development and before you move to the full emulator or device. You can mock Geo and acceleration, and there’s even supposed to be some camera magic, which I will be looking for soon. There are other bells and whistles that I have to still investigate—but overall this seems like a big win to have in the MDA.

Easily deploy to multiple platforms

I’d been focused on Android when I came across MDA, but you can deploy and run an MDA app on any of the supported platforms Android, Windows Phone, Windows and iOS (remotely), and just by changing the platform dropdown:

I haven’t yet tried remote deploying to the iOS simulator running on my borrowed MacBook Pro, but I will be trying it soon (you can debug as an iOS device in Ripple). Debugging on the remote iOS simulator is apparently not yet supported. (Keep in mind that push notifications require a physical device, Apple Dev account, etc…)

Built-in support for Azure Mobile Services

I was excited to see that one of the check boxes in the Plugins config page was for the Azure Mobile Services SDK. This installs the Cordova plugin for Azure Mobile Services, which (I assume) is based on the API of the Mobile Services client library for JavaScript (but for now I think without the recently added push notifications registration support). Once you add this plugin, one line of code gets you going with Mobile Services in your MDA app:

 var client = new WindowsAzure.MobileServiceClient('https://todolist.azure-mobile.net/', 
'XXXXXXXXXXXXXXXXXXXXXX'), todoItemTable = client.getTable('TodoItem');

I added the PhoneGap/HTML quickstart code files to my project, and it ran great (as you can see in an earlier screenshot). (Hey MS Open Tech guys….please add push notifications functionality to your excellent Mobile Services client so that I don’t have to download and install the one from the Azure web site. )

Overall

So far, the MDA extension for VS has worked surprisingly well for a preview, and it’s really great to be able to easily add plugins, debug in VS, and deploy and work the kinks out of my app in Ripple before having to fire-up the full (but integrated) Android emulator. I can’t wait to try and remotely debug my Cordova app on iOS (I’ll have to borrow the team MacBook Pro), when this promised feature finally shows up. I’ve read about this remote deploy/debug functionality for Cordova, but I’ve never tried it from the command-prompt.

I can’t wait for the next release of the Multi-Device Hybrid Apps extension for Visual Studio 2013. If I find out any more cool stuff, I will let you know here.

Cheers!

Glenn Gailey

Comments

Anonymous
November 14, 2014
HI George, Thanks for the nice guide. I have created a blank project using Visual Studio 2013 Update 3 with the Multi Device Hybrid App template. When I run the project for using Ripple Nexus Galaxy, it does not open the chrome. The output window displays a message that Deployment succeeded. But does not really open the browser window. Any ideas?
Anonymous
November 15, 2014
Hey Guy, I haven't seen this before, but you might want to upgrade to Visual Studio 2013 Update 4 and the Apache Cordova Tools (new name) CTP3, which was just released this past week: www.microsoft.com/.../details.aspx They maintain a known issues list for the most recent release (in this case CTP3) here: www.visualstudio.com/.../cordova-known-issues-vs -Glenn
Anonymous
December 09, 2014
Hi! Nice post! :D One question... is possible to integrate with PhoneGap Developer App http://app.phonegap.com/? :)
Anonymous
December 11, 2014
@Juan It seems like you can do this. See my new post: blogs.msdn.com/.../using-the-phonegap-developer-app-with-a-cordova-for-visual-studio-project.aspx

通过