Cordova Tools for Visual Studio: A first Look

CordovaInVS

If you’ve heard of PhoneGap or Cordova, you know that it’s a powerful platform to bridge the ‘gap’ between mobile web applications and mobile devices. The way it works is by hosting an internal loop back server which provides services to the web app for access to things like:

  • Bluetooth
  • Push Notifications
  • Accelerometer

Recently Visual Studio put out an early preview of Cordova tools for Visual Studio which allows you to run + debug apps on Andriod/iOS/Windows Phone.  This Visual Studio blog post has more detailed information on it.

To get started, all you need to do is install the package here. The installer will require you to install the Andriod SDK as well as iTunes for remote debugging to an iOS device.

Once you’ve installed the necessary SDKs pop open VS (2013) and create a new project. You’ll see that you have a new ‘Multi-device Hybrid App’ template available:

cordovass1

Create the new project and you’ll notice that on the run button you have several options as to where you can run your app:

cordovass2

No, no, no. Visual Studio is not confused, you can actually run on the Andriod Emulator! Go ahead and run your project on the Andriod Emulator. Be sure to go off to get some coffee or a drink because the Andriod emulator is slower than my grandmother running through molasses.

First you’ll see the all the android compilation tools get kicked off plus a variety of other android tools to build the package:

cordovass4

Lay down a breakpoint just like it was any other application. In the JavaScript console within Visual Studio call window.location.reload() and your app will restart allowing you to debug. And like magic you are debugging on an Andriod device (actually make sure you run ‘window.location.reload() in the VS javascript console or else nothing will happen :-) ):

cordovass3

note: If your android tools are installed to your root directory like C:\andriod-sdk you may have to run VS as admin.

How cool is that? VS just went into the android tools, built an apk and stuffed it into your android device and now you can run and debug your app straight from VS!

And if you go to the output folder you’ll see you have the .apk’s ready for app store submission:

 

cordovass5

Visual Studio is looking better for cross platform every day!

8 responses on “Cordova Tools for Visual Studio: A first Look

    1. sedouard Post author

      There’s some slight differences between the two, and as far as I can tell from the commands VS uses, its packaged with the official Cordova bits and not the ‘PhoneGap’ flavor. The whole thing is a bit confusing to me to be honest. :-). A few good blog posts try to differentiate but from what I know since this is packaged with Cordova you can’t use phonegap specific tools (that is unless you hackup the tooling).

  1. Tyler

    Just a slight correction to your article. The .apk files shown are technically not ready for app store submission. For those wanting to submit their .apk to an Android store, you need to produce a “release” version of your .apk, one which is “aligned” and “signed”.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>