PhoneGap Build levels up

PhoneGap Build has become the secret sauce of PhoneGap development. I think people are (suitably) impressed by how easy PhoneGap makes mobile development. But time and time again, I find that people have no idea about, or haven’t tried, the PhoneGap Build service. In this article I give you a brief overview of what PhoneGap Build provides and spend some time highlighting our recent updates.

Typically, PhoneGap developers make use of native tools to build their mobile applications. While they write their applications with HTML, JavaScript, and CSS, they end up using tools like Android™ ADB or Apple XCode to compile and deploy their applications to a device. This isn’t terribly difficult. The PhoneGap docs provide step-by-step instructions on how to setup these tools and convert your HTML into an application. Even better, recent updates to the PhoneGap SDK have provided a CLI (Command Line Interface). The CLI allows you to do more at the command line (if that suits you) and less in tools that may not be—shall we say—all that fun to use.

PhoneGap Build makes the process even simpler. Let’s take a quick tour.

1. The quickest way to test PhoneGap Build is to simply create a quick HTML file in your favorite editor and save it to your desktop.
2. Then, navigate over to build.phonegap.com.

3. Click the very obvious, very simple “Get started!” button.
4. Select one of two ways to register: either with your Adobe ID or your GitHub account.

Once signed in, the build service provides you a list of any previous applications you’ve built with the service before. Since this is probably your first time here, you will be immediately dropped into a form to create a new application.

1. Begin by giving your application a name.

The name you chose isn’t terribly important. You can use the tried and true HelloWord, or something more awe-inspiring. Ignore the settings for the moment. I’ll talk more about them in a minute.
PhoneGap Build applications are created from two main sources. You can either point to a public (for now, keep reading!) repository or simply upload a file.

2. Then select “by upload” and pick your file.

Note that you can also zip up an entire directory of HTML, JS, CSS, and image files into one zip. One thing to keep in mind is this; you can’t change how an application is sourced. If you plan on using a repository in the future but it isn’t set up yet—stop. You won’t be able to switch.

3. Now it’s business time. Click the Create button and stand back as the powerful servers—I imagine something along the lines of a Google-size farm—behind PhoneGap Build start compiling your HTML file into native mobile applications. For seven platforms. At once. If that’s not magic, I don’t know what is.

What you’ve got here is a list of all the supported platforms for PhoneGap along with links to download each individual file. Obviously, this isn’t complete. Note the red iOS link there. Scary, right? All this means is that you need to provide the proper signing certificates (also known as provisioning) for iOS and Blackberry. PhoneGap Build has a simple interface for uploading these certificates and using them within your applications. Once you’ve done that, iOS and Blackberry will work.

Just to repeat because I want to be sure this is clear: Write HTML. Upload. Wait about a minute. Winning. In case you’re wondering about price—PhoneGap Build has both free and paid options. Now you’re not just winning, but Tiger Blood Winning.

Even better, you have the choice of making your applications private or public. For your end users who aren’t technically inclined, this provides a way for you to host builds for them. They can simply navigate to the build site (or even use the fancy QR codes—yes, QR codes. They will be useful!) and download the bits for their respective platform. Even iOS. On my iPad I can open up the site, download an IPA file, and get an app installed on my device. While not quite as "open" as Android, it is certainly doable with the PhoneGap Build platform.

There is, of course, more to the story here. PhoneGap Build has a full API for every part of the web-based service. There is also support for configuring installation icons and privacy settings. I encourage you to check the full PhoneGap docs for further details on PhoneGap Build. For the rest of the article, though, pay special attention to something recent additions to the PhoneGap Build service.

Hopefully with the introduction above you have a basic idea of what using PhoneGap Build is like. You write your HTML and then either upload it to the website or update your repository. End users then grab the bits and install it on their devices. While that is simple enough, it does put the onus on the end user to actually go forth and download the new bits. For end users who may be—how shall we say—technically challenged, this may be a bit difficult for them. Even for people familiar with the process, when an app is going through numerous updates every day, it can be a bit tiring to keep fetching new builds and reinstalling. Thankfully, PhoneGap Build Hydration, with load checking, comes to the rescue.

If you remember, when you created your first application, above, Hydration was an option. You can edit your first application to enable it, or simply create a new application. Once you’ve enabled Hydration, go ahead and upload some HTML. It doesn’t matter what HTML you actually use, just write something. If you are editing your first application, then you don’t need to re-upload anything.

Let PhoneGap Build recreate your application. Once done, download the application to your device and open it up. You immediately notice something different.

Figure 4 shows a Hydrated PhoneGap application loading. It is a bit different from a regular PhoneGap app as you will see. After a second or two, you then see the screen in Figure 5.

What you are seeing is the core Hydration feature in action. Hydration adds a "load checker" to the front of your application. Whenever the application runs, it checks with the PhoneGap Build service to see if a new version is ready. (Technically, this may be your first install, so it really isn’t an update.) If a new version exists, the user is presented with the option to get the update or ignore it. What’s great is that the end user does not have to go to the PhoneGap Build site. You don’t have to do anything really outside of clicking the “Update” option.

Your end user downloads and installs the application (see Figure 6). You push new updates to Build. As soon as your end user runs the application again, they are prompted to get the update automatically.

Earlier in the article, I talked about how you can “source” a PhoneGap Build application. You have the choice to upload your files by way of a public repository (instead of uploading a file or a zip of files, as in the example, above). As of the most recent update to PhoneGap Build, you can now point the service at a private Github repository. Simply provide your authentication information and the build service uses it when creating new builds of your code.

PhoneGap Build continues to evolve. With recent UI updates (those of us at Adobe who don’t spend our time updating Acrobat have quite a few design skills as well), making the site easier to use, Hydration making it simpler for clients, and other core upgrades, I strongly encourage you to take a look at the service!