Extending PhoneGap for Visual Studio to Android devices

PhoneGap templates for Visual Studio 2010 have been around for almost a year. The templates allow you create a working Windows Phone 7 app using the PhoneGap SDK without having to learn XAML or C#.

There are plenty of examples on how to create a WP7 app with PhoneGap templates so I will not be repeating the steps here. If you are looking for some good tutorials though check out the following links:

Windows Phone App Porting: Bridging the PhoneGap

How to create HTML5 apps on Windows Phone with PhoneGap

Developing Windows Phone 7 HTML5 apps with PhoneGap

Note: Many of the tutorials reference the older PhoneGapStarter.zip file. However, in later releases the PhoneGap templates are using the newer Apache Cordova files. Click the following links to download the project files and to view the Getting Started guide.

Once you have installed the templates into Visual Studio and completed your project you should be able to successfully run your WP7 app on both the emulator and a Windows Phone 7 device.

However, the purpose of PhoneGap is Write-once, run-anywhere. So to have code that can only be run on a WP7 phone seems to defeat the purpose. Thankfully there is a free service from PhoneGap that can help with this called PhoneGap:Build. The online service can take your HTML, CSS and JavaScript files (everything the PhoneGap templates create using Visual Studio) and compile them into apps that are ready for a vendor’s app marketplace.

To use the service you need to sign in with either your AdobeID (PhoneGap was purchased by Adobe last year) or your GitHub account. Once you are signed in you will see a dashboard similar to this:

To get started click the new app button. A dialog box will appear:

Give your app a name and select where to upload it from. You can create a new Git repository, pull from an existing one or choose to upload files from your computer. Note that if you select the latter option you can only choose an index.html file or an archive file. For me I will be using a .zip file. This file will contain an index.html file, the PhoneGap JavaScript file and a CSS file. All of these get generated in the www folder of my Visual Studio solution.

My dialog box now looks like this:

Once you hit the Create button your app will appear under the Apps heading on the Dashboard.

Clicking the app name will bring you to a page containing the various builds that have been created. You will get packages for iOS, Android, Windows Phone, BlackBerry, webOS and Symbian. Note though that PhoneGap:Build will not create packages for iOS unless you have purchased a developer account with Apple and have added the correct signing key to your PhoneGap:Build account. See the iOS Developer Program for more details.

To retrieve your app click the Download button below the appropriate package and save the file to your computer. Since I am building for Android I will receive a file with a .apk extension.

Once the item is saved to my computer I can then move the app to an Android mobile device for installation or even upload it to one of the Android marketplaces. To deploy the .apk file to my Samsung Galaxy Tab 2 10.1 Android tablet I will copy the file from my computer to my Dropbox folder.

To install the app click the file on Dropbox to begin downloading it to your Download folder on the device. Once the .apk file is in your folder click it to begin the installation process.

Note: To install apps that do not come from a recognized Android marketplace you will need to make sure that you allow installation of non-Market applications. To do this go to Settings | Applications and click the Unknown Sources checkbox.

Once the app is installed you will see it in your list of Apps. Here is my PhoneGap Hello World app. Pressing the “Say Hello World” button will put “Hello World” into a TextArea tag.

In this article we saw that by building apps with the PhoneGap template in Visual Studio 2010 we are not solely restricted to using the app on a Windows Phone 7 device. With ready-made sources like PhoneGap:Build and Dropbox we can export the finished product to other mobile devices like a Samsung Galaxy Tab 2 10.1 tablet. This gives us flexibility to test our products before we deploy them to an Android Market like Google Play.