Why PhoneGap for Windows Phone?. Presented BY Mobile Pundits. How PhoneGap for Windows Phone. Outline. Why develop for Windows Phone? How do I get started? How do I submit my awesome app to the Windows Phone Marketplace? Now that I’ve submitted my sweet app, what should I do now? There are no secrets to success. Here are some easy yet fruitful tips which give your app an extra edge to reach out to your potential customer base.
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 Phonegaplibwindows-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
> libwindows-phone
and paste them into
> DocumentsVisual Studio 2012TemplatesProjectTemplates
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 emulator
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.
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 “nativewww” 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 nativeplatformswp8
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.