Developing multi device hybrid apps using VS 2013/VS 2015 preview

Apache cordova is a framework used for developing hybrid apps and was a core part of phonegap. Microsoft added cordova support from visual studio 2013 update 3.

The preview release of VS 2015 comes with cordova tools.

So what is a multi device hybrid app?.

Its a hybrid app targeted for multiple devices (android, windows phone, ios and so on). A hybrid app contains a combination of html5, css and javascript which runs in a device specific native chrome less browser. Cordova offers a specific native browser and plugins for each device, through which the html app access native functionality such as camera, accelerometer, contacts etc. in JavaScript.

How do I create a hybrid app?

Its simple, just create a cordova project. The project template sits under other languages –> Javascript ( If your editor configured to C# environment as default )

Cick on the Blank app, VS create a solution with the following structure

Its easy, the file config.xml contains configuration for all the devices, and opens a configuration window like below when clicked.

Lets have a look at the structure

index.html : is starting point of the app

scripts folder contains all the Jscript files referenced,

css folder contains all the stylesheets that app references

Images folder contains images

res folder contains all the resources

merge folder contains all the device specific overrides

You can modify index.html with your own content.

How do I build and test the app in multi devices?

Its easy, with the help of solution platforms configuration.

Select one of the solution platforms

Windows phone

Android

Ios

Windows

and select the device type in each selected solution platform

Build the project and run the app.

Change the solution platform to Android and device type to android emulator

IOS emulators require remote agents to run, so I haven’t configured any but in future posts I’ll try to build one for IOS platform.

Visual studio with cordova tools also supports ripple emulators with the help of chrome browser. If you wish not to run device specific emulators because of performance, just use ripple emulators. The advantage of ripple emulators is that it supports real time updates i,e. once you open ripple emulator in chrome, any changes that are made in the app are reflected immediately in the emulator.