The Cordova support is important for a number of reasons. It very much aligns with the company’s strategy to target all the platforms and provide the developers with the tools to do it. After announcing the partnership with Xamarin at //Build, we can now literally build Web, Hybrid and Native apps using Visual Studio. Now how cool is that?
Wait, we are not really here to analyze this strategic alliance. We are here to discuss how to use and build the first Hybrid App in Visual Studio together, so let’s get started.
Step 1: Install Visual Studio Update 2
Visual Studio Update 2 is now available for everyone and brings a lot of enhacements and new features to the IDE. You can either download it from here or simply check the Notification Window in your Visual Studio 2013.
Step 2: Install the Preview of Visual Studio Tooling Support for Apache Cordova
Once Visual Studio Update 2 is downloaded and installed, you can proceed by installing the preview of visual studio tooling support for Apache from here.
During the installation you will be prompted to install the third party programs that the tooling depends on. If you’ve worked with Apache Cordova before, you know that you have to install a few sdks like the Android SDK. Instead of installing them manually, just allow the installer to do it for you.[EDIT] The Apache Cordova tooling will not install on Windows Server 2012
Step 3: Create your first Multi-Device Hybrid App
When you create a new Project in Visual Studio, you will see the following:
Step 4: Configure the Capabilities and Properties
For every Cordova project you need to decide which plugins you want to use and that will enable you to access some of the capabilities of the device. We can configure the properties by opening the Config.xml file from the Solution Explorer. Here’s how it looks like:
Step 5: Start coding! yay!
First, we start with the view:
Step 6: Run the Application in a Simulator
When you run the application for the first time, Visual Studio will download a bunch of packages related to Cordova. That could take a few minutes.
Once the build is successful and the application has been packaged, Visual Studio will launch a new window in Chrome with the Simulator. Our application looks like the following:
From there, you can start playing around with your application and see how it behaves offline and when your location changes.
Step 7: Debugging your application
Visual Studio is our favorite IDE and today it just got a lot better with the support of Apache Cordova tooling. While it’s still in Preview, the experience was relatively smooth and I was able to have the application up and running in a little time. I wasn’t able to run the application on my device though and I will share with you the solution as soon as I have it.[EDIT] Here’s how you can run the app on your Android device
You can download the sample application from here