Setting Up Cordova (PhoneGap) for Development on Windows Machines
The terms PhoneGap and Cordova can be a bit confusing for folks, especially for those just getting started. PhoneGap was a platform for creating mobile applications using native web technologies produced by Nitobi. Adobe then purchased PhoneGap. Around version 1.9 of the product, they Open Sourced PhoneGap and called it Cordova. They kept the PhoneGap name and have extended things a bit by creating an great back end system to build for multiple platforms as well as starter solution for different platforms. More information about PhoneGap can be found at phonegap.com. The reality is I, and most people, refer to the names interchangeably, but there are differences.
So with that out of the way, let's look at how wo install Cordova on Windows 8.
First, you will need to download and install Node.js from http://nodejs.org/download. After this, you should be able to start up PowerShell and run Node from the command line. You can ensure you have node setup by running node –version within a PowerShell prompt
We will be installing global packages via the Node Package Manager (NPM). If you have never used or installed Node previously, you will need to update your path variables to the global packages location is in your path.
This is done by going to the computer properties and selecting Advanced System Settings
Since we need to update the path, we choose Environment Variables
Within the Environment Variables, there are two paths you can choose between, the path for the logged in use and the path for all users. I usually update the current logged in user (the first Path listed under user variables for jptacek)
You then just update the Path by clicking edit and adding the location of the NPM packages by appending the following
Note, if you did not have the NPM packages in your path and have taken these steps, you will need to restart PowerShell for your environment variables to be set. At this point, we have Node setup and are set to install Cordova. This is accomplished via the Node Package Manager (NPM), which downloads and sets up Node applications.
Npm install –g cordova
–g flag indicates to the NPM package manager that that package should be installed globally. On Windows, this directory
is often your user directory,
AppData\Roaming\NPM, which we talked about setting up above.
Now that we have Node and Cordova setup and configured on our machine, we are moving on to the fun stuff, app development!
Let us take a look at this…
To create an application in Cordova, we use the CLI to have it generate the shell of our application by running the Cordova create command
cordova create MyApp com.jptacek.MyApp MyApplication
MyApp parameter identifies the directory for the application, which will be created. The second argument,
is the identifier, which you want to be unique. Most people use the reverse domain style identifier.
The last parameter is optional, but is the title of the application for display.
This process will actually go and download the latest template and create the project structure
If we take a look in our directory, you will see it created the default structure for the application with the creation of a www directory with a shell application, a plugins directory, etc.
Since we are doing this on a Windows machine, we will add two platforms, one for Windows Phone 8 and one for Windows “Metro” 8
Note, if you try and add platforms that are not available for development, Cordova will not allow this. For example, you cannot do iOS development on a Windows 8 machine, so Cordova will not be able to find the XCode libraries and will raise an error trying to setup. If you want to be able to build locally for an Android device, you will need eclipse and the Android SDK, etc.
By adding the platform, you are actually creating Visual Studio solution files for creating both a native Windows Phone 8 and
Windows 8 application that can be loaded in Visual Studio and run with the appropriate emulator.
You can load up these solutions and run them natively. However, you first need to build the solution. At this point, you just have a skeleton setup for the project, no assets have been deployed to the skeleton of the project. To do this, you will run the build command in Cordova.
This then enables you to run either Windows 8 or Windows Phone 8 to see your solution. Two things… Since each build recreates your solution files from the default WWW directory, your changes will be overwritten. As a result, I usually don’t like doing my code editing with the WP8 and Windows 8 emulator.
Second, since you essentially have a web application, you like having access to tools you have come to know and love like Chrome Developer tools or FireFox as you develop your code. For this reason, I usually will create a Virtual Directory to server up the WWW assets from a platform, for example, Windows8, that are deployed during a build. This allows for me to use my tools of choice for web development.
The reality is, I am most likely to use build.phonegap.com for testing by using the actual native deivces. Build.PhoneGap.com will actually take your source, and build your application for the multiple platforms supported by PhoneGap. Its hydrate function automatically check for new versions and downloads when you launch on a mobile device like Android or Windows Phone.
I have not found a great way to do development with PhoneGap. I am VERY interested in the workflow other people use for their Cordova/PhoneGap development, please share!