Creating apps for windows 8 phone using web technologies & phonegap

mwayblog_jan2013

Many didn’t expect that Windows Phone would stand a chance against Android and iOS on the smartphone market. But statistical evidence shows that the Windows Phone market share in Germany grew by 6% from July 2012 to September 2013. This and many other influences encouraged many companies to reconsider their decision on this operating system. The following article includes a tutorial of an intermediate level of difficulty, which describes a way to make your The-M-Project v2.0 Absinthe web app running on your windows mobile phone with the help of Phonegap.

Dependencies

For this tutorial, there are several ways to get your native packaging done. You should consider the following methods at first glance:

Method 1: Phonegap templates and Visual Studio 2012

The benefits of method 1 are, that 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.

For method 1, consider having the following tools at hand to start developing your native windows phone 8 web app and to make this tutorial a great one:

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 method 2, these tools will help you developing your native windows phone 8 web app and make this tutorial a great one:

 

Method 1: Phonegap templates and Visual Studio 2012

1. Get Phonegap repository with template files

Clone phonegap repository on Github. Need help with cloning a Github repository?

> 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

3. Install Visual Studio 2012

To develop Apps for Windows Phone 8 Visual Studio is required. Phonegap templates are only supported by Visual Studio 2012 Pro, Premium or Ultimate:

4. Trick: 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 Phone 7 are now installed.

5. Embedding existing projects into Phonegap container

Open your visual studio 2012. You should see the following screen:

step1

Create a new project:

“File > New > Project”

Step2

Choose the Coordova WP8(or WP7) template in:

“Installed > Templates >Visual C#”

Step3

Put your “index.html” and additional files inside the www folder.

Step4

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

Step5

7. Build the project for device

After all, it’s time to build the project for testing. But before testing consider that

  • the developer has to be signed in with his Windows account on the phone,
  • the phone has to be registered as developer phone,
  • the tool to register is included in the Windows SDK,
  • the Windows phone is connected to the Computer, unlocked and the date is set correctly: Program Files (x86)/Microsoft SDKs/Windows Phone/v8.0/Tools/Phone Registration

In Visual Studio

  • make sure your phone is connected and the screen is unlocked,
  • select device from the drop-down menu at the top,
  • press the green play button to start debugging, or else type F5.

Step5

 

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

1. Install Visual Studio 2013

To develop web apps for Windows Phone 8 with phonegap-cli, Visual Studio 2013 is required. Therefore, it is recommended to use the Visual Studio 2013 Pro or higher.

  • Download and install: Visual Studio 2013 Pro
  • (Windows Phone SDK can be installed with Visual Studio 2013 Pro installer)

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

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

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

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

step2013

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

6. Build the project for Device

Before testing consider that

  • the developer has to be registered with his Windows Account on the phone,
  • the phone has to be registered as developer phone,
  • the tool to register is included in Windows SDK,
  • the Windows Phone is connected to the computer, unlocked and date is correct: Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Tools\Phone Registration

In Visual Studio make sure your phone is connected, and the screen is unlocked. Select Device from the drop-down menu at the top. Press the green play button to start debugging, or else type F5.

step2013

In Cli make sure you are in the phonegap directory and have the device connected to build and install it to the device

> phonegap run wp8 --device

or

> phonegap run wp8 --target=

only install it to the device

> phonegap install wp8 --device

or

> phonegap install wp8 --target=

 

What you have learnt so far

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 homescreen 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. You can check out Phonegap to access native functionality from your web app. Or you can check out the new The-M-Project v2.0 Absinthe Framework for creating wonderful mobile web apps easy and fast.

2 thoughts on “Creating apps for windows 8 phone using web technologies & phonegap

  1. Sneha Shinde

    Thank you uploading this post ! I tried Second method (Using CLI) and it worked for me . 🙂

    Reply
  2. Pingback: Creating apps for windows 8 phone using web technologies & phonegap | Thinking Mobile - appgong

Leave a Reply

Your email address will not be published. Required fields are marked *