Tuesday, 24 September 2013

Hybrid mobile application native packaging using PhoneGap 2.9 in Windows Phone 8

Hi,

Microsoft was conducting developers challenge in major cities across the globe to empower the Windows Phone store catalog. But still it is not in a position to compete with Google Play or iTunes store. If you have a popular mobile web application, you can be in limelight by adding your app to Windows store. The only challenge is to convert your mobile app to native app. This blog will assist you to achieve that goal.

Pre-requisites

  1. Windows 8 OS 64 bit (hyper v enabled)
  2. Visual Studio 2012 Ultimate
  3. Windows Phone SDK 8.0
  4. PhoneGap 2.9.0 downloaded and extracted

Create a Windows Phone 8 application project

PhoneGap provides command line tools to create templates for Windows Phone 7 or 8. Open command prompt or windows explorer and navigate to lib\windows-phone-8 and run createTemplates.bat file.This will generate zip files named CordovaWP8_2_9_0.zip and CordovaWP7_2_9_0.zip in the same folder. We are focusing on first file as our context is Windows Phone 8 native app packaging. Copy this zip file to project template folder of Visual studio. In general it will located in the following location.

C:\Users\machine_name\Documents\Visual Studio 2012\Templates\ProjectTemplate

Restart Visual Studio and create new project. In the wizard templates will be listed and Cordova template can be found there. Sometimes it may be listed under a subsection. For me it was listed under Visual C# as given below.


Select the template and provide name, location and solution name and click OK. Windows Phone 8 application project is ready for you.
Open Solution explorer and you can find the application structure as follows.

You can replace the content of www with your web application code by ensuring that cordova.js included in your app.

Click on the green play button present in toolbar and deploy it in simulator. If you have a Windows Phone 8 device, you have to register it first before deploying apps into that. You can find instructions for registering a device here.

Happy coding!

No comments:

Post a Comment