PhoneGap – Installing and using PhoneGap with Windows Phone SDK

I had been thinking for a long time to start something with PhoneGap. Well let me tell you what PhoneGap is.

PhoneGap is an HTML5 application platform that allows to write native applications with web technologies and get access to API stores. It is basically used for writing applications for iPhone, Androids, Blackberries, Windows Phone and contains HTML, CSS and JavaScript. PhoneGap bridges the gap between JavaScript and native code which means it is taking the native language of each platform C#, Objective-C and Javascript and provide a framework with these languages that expose interface to JavaScript developer.

More about PhoneGap can be learned from various forums and sites but especially you can look into Phonegap.com for more detailed understanding of this framework.

Let’s follow some steps to install and associate Phonegap with Visual Studio.

Step 1: First of all you need to download the Windows Phone Software Development Kit (SDK) 7.1 from the following location. This will install Visual Studio 2010 Express for Windows Phone in your development machine.

image

During installation of the kit, you might encounter an error if you are using a system with Windows 8/8.1 which states “Your version of Windows Phone SDK 7.1 isn’t compatible with this version of Windows.” No need to worry, since you still have the chance to install the kit. Download and install the Live redistributable latest version of  Games for Windows from the following link.

image 

Once done, try to reinstall the same SDK  for Windows Phone 7.1. Now since we are planning to do Windows Phone development, we need to install Windows Phone SDK 7.1.1 Update.

Then create your membership account in Windows Phone Dev Center where you can submit your app and test it in a device.

image

image

Step 2: Currently Phonegap has been renamed as Cordova. Now to associate or setting up Phonegap for Microsoft Visual Studio, you can download and install Cordova 2.1.0 from the following location. To install PhoneGap you need to run the below command as shown in the screenshot using Node Package Manager. But remember you need to have NodeJS installed in  your machine. If NodeJS is not installed, then install it from the http://nodejs.org and then run the below command.

image

Install Node.JS from the following location.

image

Now run the following command to install Phonegap

C:> npm install -g phonegap

image

Step 3: Next you need to download PhoneGap 2.9.1 from this http://phonegap.com/install where you can get the list of zip files, Download the zip file from there.

image

Once downloaded extract the zip file and browse inside the extracted folder of PhoneGap 2.9.1 to the path \phonegap-2.9.1libwindows-phone. There you will find a windows batch file named createTemplates. Run that batch file and it will create two template file CordovaWP7_2_9_1 and CordovaWP8_2_9_1.

image

Now copy the template CordovaWP7_2_9_1 into the Project Templates folder of Visual Studio 2010.

image

Once this task is completed, start Microsoft Visual Studio 2010 Express for Windows Phone that you have installed earlier and select New Project. There you can find the template of Cordova.

image

Once you create the solution then you can see the solution structure that got created.

image

Run the project and you will find the emulator running and setting up the Cordova device

image   image

Good we have our emulator ready to use.

Also you can do the same by downloading Phonegap-start-master.zip from the following location

image

In my next session I will try to create a sample application with PhoneGap using HTML5.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s