Getting Started with Cordova and Multi-Device Hybrid App in Visual Studio

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.

Capture1

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

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:

Capture2

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:

Application properties

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:

Capture3

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.

Debugging - Dom Explorer

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 device

You 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!

16 Comments
  • Visual Studio Cordova Tools
    August 4, 2014

    Zoink! We just released an update and we now support Windows 7 as well 🙂

  • kimi
    August 13, 2014

    Hai i want to develop an app that gives the contact list of the phone then how should i do..

  • gsaadeh
    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

    • kimi
      August 29, 2014

      Tank you gsaadeh

  • Guy Ronen
    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?

    • George Saadeh
      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

      • Guy Ronen
        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()

        • George Saadeh
          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

          • Guy Ronen
            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!

  • Gowtham S
    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

    • George Saadeh
      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

  • Shahzeb
    December 17, 2014

    Hi George

    Can we have more tutorial for Hybird App with Visual Studio.

    • George Saadeh
      December 17, 2014

      Absolutely Shahzeb ! I will be posting several tutorials in the next few days

  • SPDebug
    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

  • ravichaitanya
    October 2, 2015

    hi how to read an file from assets folder using apache cordova using vs2015

  • Javier Marcon
    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.

Leave a Reply

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