Using PhoneGap Build and Debug

PhoneGap is a great solution for building mobile applications for multiple platforms using the “write once, run everywhere” paradigm. However there is a tricky part: when you want to package your app and get the native installers you get back to the native development nightmare.

Typically you package your PhoneGap app using the developer tool chain for the specific platform. In other words, if you want to package your app for iOS and Android you will be using a Mac and XCode for iOS and Eclipse with Android plugins for Android. As you add more platforms you can get a sense of the magnitude of the problem.

This is exactly the problem PhoneGap Build solves. Using PhoneGap Build you can let the “cloud” do the crunching task for you. So from the comfort of your browser you only have to upload your application files (HTML, CSS, JavaScript, and images files) and PhoneGap Build will give you back installers for:

  • iOS
  • Android
  • BlackBerry
  • webOS
  • Symbian

Windows mobile support is coming in case this question was about to land in the comments section :)

Before moving on I want to stress one thing so I make sure you get the awesomeness of this service: in order to use it and get the native installers you don’t have install anything – no IDEs or developer SDKs.

What’s the catch?

If it sounds t0o good to be true then I will have to partly disagree with you. It does what it advertises for. However, you have to understand that as of today (March 7th, 2012) this service is still in beta. So you might find some rough edges or you might discover that some things you need are not there.

However, the service is completely free and it will remain free for open source projects. We haven’t announced any other pricing details yet.

Another rough edge is the support for PhoneGap plugins. Out of the box, PhoneGap Build supports the ChildBrowser plugin (again, you may want to verify this info going forward because this is true as of March 7th, 2012). However, if you are not afraid of a little work you might be able to use other plugins too. You can read more here.

Using PhoneGap Build

Once you’ve created an account at https://build.phonegap.com it is time to rock. And you can rock like a newbie and upload a ZIP file with your application or you can rock like U2 and point the PhoneGap Build to a GitHub or SVN repository.

A couple of weeks ago I built a simple web app for splitting a restaurant bill. And because I have the app uploaded to my GitHub account I thought that this might be perfect for testing the service. So all I had to do was click the New App button and then fill in two fields: application name and GitHub application URL.

Then I hit the Create button. In less than one minute I was able to download the Android APK file, and files for webOS and Symbian (the BlackBerry one wasn’t successful first time). The only one that needs a little bit more work than that is the iOS (you have to provide signing key/provisioning files).

I don’t know about you but I was really impressed to see that it only took 2-3 minutes to go from a web app to running an Android app on my phone.

For now the PhoneGap Build doesn’t support private GitHub repositories (this feature will come). But you can work around this buy creating a new Git repository on the service servers. Read more here.

You can make your application private and then add people so they can download the app. These individuals can have two roles: tester (read access only) and developer (read/write access). If you want to play with this feature all you have to do is to click the Edit button from the application page and then, from the left-hand menu choose the Collaborators entry.

The PhoneGap Build API

The PhoneGap Build API it is really cool. Basically you have programmatic access to the service and thus you can add PhoneGap Build support to IDEs or automated build processes.

You can read more here.

Debug Build

Another cool and time saving feature is the ability to build a debug version of your app and then use http://debug.phonegap.com to start a Web Inspector session on your computer that is connected to your app running on the mobile device.

The first thing you have to do is to enable debug mode for your app. So from the Application view click the Edit button, then select the enable debug mode option.

Once you click Save you will see the Application build page and a new button labeled Debug. After couple of minutes you should get builds created (refresh the page to see this). Install the native app on your device, fire up the app on your mobile device, and make sure it is connected to the Internet.

Then click the Debug button on the Application page. This will open a new browser and you will be able to use the Elements and Console sections of this remote Web Inspector. Pretty cool, isn’t it?

Once again I have to warn you that because it is a beta service sometimes the servers are overloaded with requests from people from all over the world.

Rebuild the app

Every time you change your app you may want to test the app again on your devices. With PhoneGap Build this task is extremely easy. From the Application page all you have to do is to click the Update Code button and then Rebuild all or Rebuild for the platform you are interested in. Of course before rebuilding the app you have to remember to push the changes to your GitHub repository.

You have to refresh the page if you want to know when the build process has finished.

Adding code signing certificates

If you have ever done mobile development for iOS, Android, or BlackBerry you know that in order to be able to submit your application to their stores the app must be properly signed. PhoneGap build supports this.

Under the Navigation section, choose Edit account link and then Signing (it is on the right hand side) – see the picture below.

Once the Signing page loads you will see that you can add the keys for Android, iOS, and BlackBerry. You can add multiple keys for each supported platform and select the one for the default option.

Using the config.xml file

At a minimum all you have to provide to PhoneGap Build is an index.html file of your application. However you can control a number of settings using a file named config.xml, which has to stay in the root folder of your application. Using this file you can specify a version number, icons for your app, splash screens, and device orientation among other things. You can read more here.

For my app I wanted to set icons, a splash screen, and the orientation mode to portrait. Here is the file:


<?xml version="1.0" encoding="UTF-8" ?>
 <widget xmlns = "http://www.w3.org/ns/widgets"
 xmlns:gap = "http://phonegap.com/ns/1.0"
 id = "org.corlan.atabsplitter"
 version = "1.0.0">

<name>aTabSplitter</name>

<description>
 A simple app for splitting a restaurant bill.
 </description>

<author href="http://corlan.org" email="mcorlan@adobe.com">
 Mihai Corlan
 </author>

 <preference name="orientation" value="portrait" />

 <!-- the default attribute can also be used -->
 <icon src="assets/icons/48.png" gap:role="default" />

 <!-- Android icons -->
 <icon src="assets/icons/36.png" width="36" height="36"/>
 <icon src="assets/icons/48.png" width="48" height="48"/>
 <icon src="assets/icons/72.png" width="72" height="72"/>

 <!-- if a single splash screen is specified it will be used for all platforms -->
 <gap:splash src="assets/images/table_01.png" />
</widget>

Where to go next

First of all make sure you go to https://build.phonegap.com and you create an account :) Then you can read the documentation, give feedback, make feature requests, and start building your app.

5 thoughts on “Using PhoneGap Build and Debug

  1. hello

    How can i create the .apk file from the xcode source code using the phonegap build site (build.phonegap.com ).

    Thanks

  2. Is there any way to create custom keys for iOS app development. I live in Ethiopia and I can’t afford to subscribe to apple developer group. Any ideas, please?

    Any help is appreciated!

Leave a Reply

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