How PhoneGap enters in the world of Windows Phone?
1 / 14

How to develop PhoneGap App for Windows Phone? - PowerPoint PPT Presentation

  • Uploaded on

MobilePundits: PhoneGap is a mobile development framework that helps build Apps for mobile platforms like Android, iOS, Windows Phone, Blackberry, Bada, Symbian, WebOS and Tizen. The PhoneGap and Windows Phone team at MobilePundits is well equipped with multiple JavaScript frameworks such as PhoneJS, AngularJS, jQuery among others. Here are step by step instructions to install Phonegap in windows for windows phone development.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'How to develop PhoneGap App for Windows Phone?' - alisnikol

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

About phonegap
About PhoneGap

  • PhoneGap is an open source framework for building mobile apps using web-technologies.

  • HTML for layout ( Better yet HTML5 )

  • JavaScript for accessing device functionality

  • CSS for look and feel.

  • It's a collection of tools + a consistent cross-device API.

  • Use the same JavaScript calls to access device functions. 

  • navigator.notification.vibrate();

  • Supports development for the following operating systems:

  • Android, iOS, Windows Phone, webOS, Windows Mobile, Symbian OS and BlackBerry.


Applications built with Apache Cordova/Phonegap for Windows Phone 8 will only run on Windows Phone 8 devices. If you are looking to target both 7.5 and 8 devices, then you should be using Apache Cordova for Windows Phone 7, which does not have all the new shiny features included in IE10, but implements the same APIs.

Since the Android, iOS, and Windows Phone apps use the same codebase, the usage is identical. However, a fun fact is that you can now develop on an OS X machine and preview on a Windows Phone device. Cross-platform, indeed!

Why windows phone 8
Why Windows Phone 8?

On Windows Phone, PhoneGap is incredibly flexible. The API is implemented inside a user-control. This means that you can easily add a little PhoneGap to an existing WP7 app, or if you choose, you can add Silverlight controls to your PhoneGap app.

On the other hand, till the end of 2013, usage of Windows Phone 8 (WP8) has increased everywhere with almost 4% of global market share and 10% of the European market. It's also important to note that Microsoft is listening to developers and has made WP8 a legitimate mobile platform - including making Internet Explorer 10, with its standards compliant and performant engine, the default browser.

How phonegap for windows phone
How PhoneGap for Windows Phone?

Method 1: Phonegap templates and Visual Studio 2012

  • With this method, the provided templates are easy to use and most of the time you can work with the graphical interface of Visual Studio 2012. One little disadvantage is, that these templates are not compatible to Visual Studio 2012.

  • This method requires following tools at hand, to start developing your native windows phone 8 web app and to make your app a great one:

    • Phonegap on Github

    • Visual Studio 2012 Pro

    • Visual Studio 2012 Update 4

    • Windows Phone 8 SDK

How phonegap for windows phone1
How PhoneGap for Windows Phone?

1. Get Phonegap repository with template files

Clone Phonegap repository on Github:

> git clone

Go to windows-phone folder:

> cd Phonegap\lib\windows-phone

2. Create template files

“createTemplate.bat” automatically creates template files for you.


> createTemplates.bat


> start-process createTemplates.bat

How phonegap for windows phone2
How PhoneGap for Windows Phone?

3. Implementation of Phonegap template files

Copy and in

> lib\windows-phone

and paste them into

> Documents\Visual Studio 2012\Templates\ProjectTemplates

That’s the trick, your

Phonegap templates for

Windows Phone 8

and Windows Phone7

are now installed.

How phonegap for windows phone3
How PhoneGap for Windows Phone?

4. Build and deploy to emulatorMake sure Windows Phone Emulator is selected in the main drop-down menu. Then press the green play button to start debugging, or type F5.

How phonegap for windows phone4
How PhoneGap for Windows Phone?

Method 2: Phonegap-Cli and Visual Studio 2013 (preferred)

  • Method 2 is for those who are used to the console and happy with the new Phonegap cli. Another benefit is that this method is compatible with the new Visual Studio 2013.

  • For this method, following tools will help you developing your native windows phone 8 web app and make this tutorial a great one:

    • -Visual Studio 2013 Pro

    • -Phonegap Docs

    • -node.js

How phonegap for windows phone5
How PhoneGap for Windows Phone?

1. Phonegap

Install the newest version of Phonegap:

> npm install -g Phonegap

Go to your existing project and create a Phonegap project in an extra folder in your project,

here it’s “/native”:

> phonegap create native

Go into the folder

> cd native

Copy your project files into the “native\www” folder. Be sure you have no empty css or

JavaScript files in your project. Build the app within a native container

> Phonegap build wp8

How phonegap for windows phone6
How PhoneGap for Windows Phone?

2. Run the app on the emulator

To run the app on the emulator Windows Phone 8 SDK has to be installed

on your computer and then run the project into the emulator or device

> Phonegap run wp8

3. Edit and debug project

To edit and debug the Phonegap app its recommended to use Visual

Studio 2013 Pro go to your project build by Phonegap:

> cd \native\platforms\wp8

Open the .sln file with Visual Studio 2013

How phonegap for windows phone7
How PhoneGap for Windows Phone?

4. Build and deploy to emulator

In Visual Studio 2013 make sure Windows Phone emulator is selected in the main drop-

down menu. Then press the green play button to start debugging, or type F5.

In Cli make sure you are in the phonegap directory, to build and install it to the emulator.

> phonegap run wp8 --emulator

> phonegap install wp8 --emulator

What you have learnt so far
What you have learnt so far…

Hopefully this presentation has brought to light how easy it can be to add that third platform to your PhoneGap app. By exploring the Windows Phone 8 platform you are not only broadening the reach of your app, but you are also helping to legitimize PhoneGap itself.

You now know two methods to put your web app, which is written in JavaScript, HTML, CSS into a native Windows phone 8 Phonegap container, so you can access your web app directly on your home screen of the Windows phone. The good news is, that this is just the beginning. If you are motivated and this post has awaken your curiosity, there are plenty things you can learn.