How to develop PhoneGap App for Windows Phone?

1. How PhoneGap enters in the world of Windows Phone?

2. 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.

3. Requirement 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!

4. 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.

5. 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

6. How PhoneGap for Windows Phone? 1. Get Phonegap repository with template files Clone Phonegap repository on Github: > git clone https://github.com/phonegap/phonegap.git Go to windows-phone folder: > cd Phonegap\lib\windows-phone 2. Create template files “createTemplate.bat” automatically creates template files for you. CMD: > createTemplates.bat Powershell: > start-process createTemplates.bat

7. How PhoneGap for Windows Phone? 3. Implementation of Phonegap template files Copy CordovaWP7.zip and CordovaWP8.zip 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.

8. 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.

9. 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

10. 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

11. 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

12. 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

13. 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.

14. MobilePundits