Two days ago at TechEd conference, Microsoft announced the future step in its “mobile first, cloud first” strategy with a preview of Apache Cordova support in Visual Studio. Apache Cordova is a popular open source toolkit for building apps for iOS, Android, and Windows using HTML, CSS, and JavaScript. With the Cordova integration, Visual Studio will directly support building apps for all of these platforms.
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 2012Step 3: Create your first Multi-Device Hybrid App
After you install the preview tooling support for Apache Cordova you have two project templates to choose from. Project templates are available for both JavaScript and TypeScript, and provide a standard blank Cordova starter project. Developers can pick their HTML/JavaScript framework of choice, whether it’s Kendo UI mobile, JQuery mobile, Ionic etc.
When you create a new Project in Visual Studio, you will see the following:
For this sample app, we’re going for plain JavaScript Hybrid App so we select the first highlighted template. You need to make sure not to have any spaces in the location of the project, for some reason the project template did not like it.
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!
For this sample application, I am going to display a list of conferences from the Telerik Backend Services using the ListView widget of KendoUI Mobile.
First, we start with the view:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>SampleHybridApp</title> <link href="scripts/libs/kendoui/styles/kendo.common.min.css" rel="stylesheet" /> <link href="scripts/libs/kendoui/styles/kendo.black.mobile.min.css" rel="stylesheet" /> <!-- SampleHybridApp references --> <link href="css/index.css" rel="stylesheet" /></head><body> <div id="main" data-role="view" data-title="Sample Hybrid" data-layout="default-layout"> <ul id="conferences-listview"></ul> </div> <div data-role="layout" data-id="default-layout"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> </div> <script src="cordova.js"></script> <script src="scripts/libs/kendoui/js/jquery.min.js"></script> <script src="scripts/libs/kendoui/js/kendo.all.min.js"></script> <script src="scripts/libs/everlive/everlive.all.min.js"></script> <script src="scripts/index.js"></script></body></html>and of course the JavaScript which is pretty straightforward:
(function () { "use strict"; document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false ); function onDeviceReady() { // Handle the Cordova pause and resume events document.addEventListener( 'pause', onPause.bind( this ), false ); document.addEventListener( 'resume', onResume.bind( this ), false ); // TODO: Cordova has been loaded. Perform any initialization that requires Cordova here. //Initialize the kendo ui mobile app var app = new kendo.mobile.Application(document.body); //Load the data and bind it to the listview initApp(); }; function initApp() { var appSettings = { apiKey: 'XXXXXXX', scheme: 'http' }; //Initialize an Everlive datastore var el = new Everlive({ apiKey: appSettings.apiKey, scheme: appSettings.scheme }); var confDatasource = new kendo.data.DataSource({ type: 'everlive', transport: { read: function (options) { //Get the data from everlive el.data('Conferences').get() .then(function (data) { options.success(data.result); }); } } }); //Bind the data to the view $("#conferences-listview").kendoMobileListView({ dataSource: confDatasource, template: '${Title}'}); }; function onPause() { // TODO: This application has been suspended. Save application state here. }; function onResume() { // TODO: This application has been reactivated. Restore application state here. };} )();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
My favorite part was debugging the application using DOM Explorer and the JavaScript Console. DOM Explorer is not a new feature in Visual Studio that got installed specifically for Apache Cordova. I have been using it since Visual Studio 2012. DOM Explorer is a great visual debugging tool where you in runtime can understand exactly how an why the DOM is represented. You can even change individual properties and see the effect immediately.
Conclusion
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 deviceYou can download the sample application from here
Did you learn something? I really recommend you attend FalafelCON 2014, where there will be many deep dives into Mobile. Let me know you’re coming on Twitter!
August 4, 2014
Zoink! We just released an update and we now support Windows 7 as well 🙂
August 13, 2014
Hai i want to develop an app that gives the contact list of the phone then how should i do..
August 13, 2014
Hi kimi,
You can use the Contacts plugin for Cordova to access the contacts on your device. You can find more information on that here https://cordova.apache.org/docs/en/3.0.0/cordova_contacts_contacts.md.html
You will need to enable the plugin for the Multi-Device Hybrid apps from the Config file.
Best,
George
August 29, 2014
Tank you gsaadeh
November 15, 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?
November 17, 2014
Hey Guy,
When you open the project in VS do you get any error message saying that there is a component missing? Can you post a screenshot of what you see in the output window?
Thanks,
G
November 18, 2014
Hi George,
When I opened the project in VS I didn’t get any errors at all (btw, creating a Multi-Device Hybrid App project crushed my VS several times, and so did opening an existing one, but that’s another issue).
When try to run the project for using Ripple Nexsus Galaxy, it throws all bunch of errors in the output window, and at the end it writes “Deploy succeeded”, and nothing happens.
This is the output logged at the output window when I try to run the project:
1>—— Build started: Project: BlankCordovaApp4, Configuration: Debug Android ——
1>C:Program Files (x86)MSBuildMicrosoftVisualStudiov12.0TypeScriptMicrosoft.TypeScript.targets(95,5): warning : The TypeScript Compiler was given no files for compilation, so it will skip compiling.
1> F:_CoursesMWCBlankCordovaApp4BlankCordovaApp4>call “C:Program Files (x86)nodejs”nodevars.bat
1> Your environment has been set up for using Node.js 0.10.33 (ia32) and npm.
1> —— Ensuring correct global installation of package from source package directory: C:Program Files (x86)Microsoft Visual Studio 12.0Common7IDEExtensions44vdpfsi.y12packagesvs-mda
1> —— Build Settings:
1> —— buildCommand: prepare
1> —— platform: Android
1> —— cordovaPlatform: android
1> —— configuration: Debug
1> —— cordovaConfiguration: Debug
1> —— projectName: BlankCordovaApp4
1> —— projectSourceDir: F:_CoursesMWCBlankCordovaApp4BlankCordovaApp4
1> —— language: en-US
1> —— App dir F:_CoursesMWCBlankCordovaApp4BlankCordovaApp4bldDebug already exists
1> —— Platform android already exists
1> —— Updating plugins
1> —— Currently installed plugins:
1> —— Currently installed dependent plugins:
1> —— Currently configured plugins:
1> —— Preparing platform: android
1> cordova library for “android” already exists. No need to download. Continuing.
1> Generating config.xml from defaults for platform “android”
1> Calling plugman.prepare for platform “android”
1> Wrote out Android application name to “BlankCordovaApp4”
1> no icon found matching Android typical densities
1> no icon found matching Android typical densities
1> no icon found matching Android typical densities
1> no icon found matching Android typical densities
1> Wrote out Android package name to “io.cordova.BlankCordovaApp4”
2>—— Deploy started: Project: BlankCordovaApp4, Configuration: Debug Android ——
========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
========== Deploy: 1 succeeded, 0 failed, 0 skipped ==========
18/11/2014 13:00:47: An exception was thrown when running bundles: System.ArgumentException: The path is not of a legal form.
at System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength, Boolean expandShortPaths)
at System.IO.Path.GetFullPathInternal(String path)
at System.IO.FileSystemEnumerableIterator`1..ctor(String path, String originalUserPath, String searchPattern, SearchOption searchOption, SearchResultHandler`1 resultHandler, Boolean checkHost)
at System.IO.Directory.EnumerateFiles(String path, String searchPattern, SearchOption searchOption)
at MadsKristensen.EditorExtensions.BundleFilesMenu.d__12.MoveNext()
18/11/2014 13:00:47: An exception was thrown when running sprites: System.ArgumentException: The path is not of a legal form.
at System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength, Boolean expandShortPaths)
at System.IO.Path.GetFullPathInternal(String path)
at System.IO.FileSystemEnumerableIterator`1..ctor(String path, String originalUserPath, String searchPattern, SearchOption searchOption, SearchResultHandler`1 resultHandler, Boolean checkHost)
at System.IO.Directory.EnumerateFiles(String path, String searchPattern, SearchOption searchOption)
at MadsKristensen.EditorExtensions.Images.SpriteImageMenu.d__f.MoveNext()
18/11/2014 13:00:53: An exception was thrown when running solution-wide compilers: System.ArgumentException: The path is not of a legal form.
at System.IO.Path.NormalizePath(String path, Boolean fullCheck, Int32 maxPathLength, Boolean expandShortPaths)
at System.IO.Path.GetFullPathInternal(String path)
at System.IO.FileSystemEnumerableIterator`1..ctor(String path, String originalUserPath, String searchPattern, SearchOption searchOption, SearchResultHandler`1 resultHandler, Boolean checkHost)
at System.IO.Directory.EnumerateFiles(String path, String searchPattern, SearchOption searchOption)
at MadsKristensen.EditorExtensions.BundleFilesMenu.d__12.MoveNext()
— End of stack trace from previous location where exception was thrown —
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at MadsKristensen.EditorExtensions.BuildMenu.d__12.MoveNext()
— End of stack trace from previous location where exception was thrown —
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at MadsKristensen.EditorExtensions.EditorExtensionsPackage.c__DisplayClass16.<b__b>d__19.MoveNext()
November 19, 2014
Hi Guy,
I think you will need to repair the installation first because it’s throwing exceptions there especially that you ran into issues creating a blank project and you are not upgrading a preexisting app.
Let me know how it goes.
Thanks,
George
November 20, 2014
Actually, I kind of gave up, and then isntalled VS 2015 preview (and all the plugns etc.), and there everything works perfectly, so i guess i’ll just use it there :/
Thanks for the replies!
November 15, 2014
Hi George,
When i am trying to run javascript Blank app cordova i am getting
“Warning: The TypeScript Compiler was given no files for compilation, so it will skip compiling.”
And i cant see any emulator showing contents in index.html
November 17, 2014
Hi Gowtham, I assume you are using the TypeScript template which i haven’t used myself. Can you check the build action on the typescript files and can you also see if you have Web Essentials installed? Web Essentials has an option to build all typescript files on build. Let me know how it goes and i’ll be happy to help
December 17, 2014
Hi George
Can we have more tutorial for Hybird App with Visual Studio.
December 17, 2014
Absolutely Shahzeb ! I will be posting several tutorials in the next few days
August 18, 2015
Hey can u help me on one issue pl refer here when i’m adding more js/css files in www folder build is failing
October 2, 2015
hi how to read an file from assets folder using apache cordova using vs2015
December 1, 2015
These jind of apps are impossible to upload to store because application id is different of windows store id and if we put the windows id to the application id, the app does not compile giving an error that application id is not valid. In all ms products we only get burocratic errors and headaches but never a good solution.