Windows Phone App Development With Cordova

Introduction

My interests are in desktop, mobile and web apps. I’ve released Android apps (here) and Windows Phone apps (here). My Windows Phone apps are actually web apps built with HTML5 game frameworks, etc.

The goal of this tutorial is to help you get started with Windows app development using Cordova.

Cordova enables you to use web technologies to create an app that can run on multiple platforms. Traditionally, if you wanted to make an app for a certain platform, you would be required to use the programming language native to that platform. For example, you would use Java for Android, C# for Windows Phone, Obective-C for iOS, etc. Cordova gives you the potential to create an app that works on multiple platforms without having to re-write code for each platform.

 

Upgrade to Windows 8 Professional

Windows 8/8.1 Professional is required to run the Windows Phone 8 emulator. I also had trouble building/compiling projects while using non-professional Windows 8, so if you have this problem, then upgrading to Professional may help. Here is how I upgraded from Windows 8 to Windows 8 Professional:

  1. Open Search. Type in add features. Click the first result.
    1_search add features
  2. You should then see the Add features window. Here, you can choose to purchase a Windows 8 Pro Product Key if you don’t have one yet.
    2_get product key
  3. Assuming you now have a Windows 8 Pro Product Key, enter it in the next screen.
    3_enter product key
  4. Follow the onscreen directions to guide you through the remainder of the process.

 

Install Windows Phone SDK and Updates

  1. Download and install the latest version of the Windows Phone SDK here.
  2. After installation, open Visual Studio For Windows Phone and install updates.
    4_install vs updates

 

Install Node.js

  1. Node.js is required for Cordova. Download and install from here.
  2. Verify your Node.js installation by opening a command window and entering the following command. If installation was successful, you should see the Node.js version number returned.
    5_verify node
  3. If the previous step didn’t work, check your environment variables and make sure the Node.js path is included in the Path variable. I installed the 32-bit version of Node.js, so change your path according to the version you installed.
    6_env var
    7_env var
    8_env var

 

Install Cordova

  1. Open a command window and enter the following.
    9_install cordova
  2. After installation is complete, verify by entering the following. If installation was successful, you should see the Cordova version number returned.
    10_verify cordova
  3. If the previous step didn’t work, check your environment variables and make sure the Cordova path is included in the Path variable. For me, I had to add the path C:\Users\YOUR_USER_NAME\AppData\Roaming\npm\node_modules\cordova\bin. Replace YOUR_USER_NAME with your user name.
    11_env var

 

 

Creating a Windows Phone 8 App with Cordova

  1. After you have everything properly installed and set up, you may proceed with creating an app.
  2. I’m going to quickly go through the next steps with screenshots. If you would like more detail, go here.
    1. Create project
      12_create project
    2. Change into project directory
      13_change dir
    3. Add wp8 platform to your project
      14_add wp8
    4. Verify wp8 platform was added
      15_verify add
    5. Build project
      16_build
    6. Run app on wp8 emulator
      17_emulate
  3. Eventually, you should see your app running on the emulator.
    18_emulate

 

Conclusion

I hope you found this tutorial helpful. I plan to follow up with more tutorials related to development with Cordova and web technologies for Windows Phone.