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 fromvisual 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 apptargeted 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, contactsetc. 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 )

image

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

image

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

image

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.

image

Select one of the solution platforms

  1. Windows phone
  2. Android
  3. Ios
  4. 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

image

Change the solution platform to Windows Phone *and device type to *Windows phone emulator

image

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.

image

Deploying apps in app stores

Visit this link http://msdn.microsoft.com/en-us/library/dn757048.aspx