Create Your First Mobile App with PhoneGap Build – Setup

by Brian Rinaldi

PhoneGap makes it easy to take your front-end development skills in HTML, CSS and JavaScript and translate that into developing cross-platform mobile applications. However, PhoneGap Build makes this even more accessible by simplifying the process creating builds for multiple platforms and installing those builds on your test devices.

PhoneGap Build is a service that will create builds for iOS, Android, Blackberry and other platforms in the cloud. You simply upload a zip file or connect a GitHub repository and the builds are generated for you. You can then download and install the build on your test device or simply scan the QR code and have the build installed automatically. Even cooler, the Hydration feature allows your app to automatically update to new builds once it is installed on a device, making testing even easier. Also, PhoneGap Build has integration with a number of products including Edge Code/Brackets and Dreamweaver.

This tutorial will walk you through creating your first mobile application using the PhoneGap. It only assumes you have some front-end web development experience but does not assume any mobile development experience or any knowledge of PhoneGap. Through five steps we’ll create a simple mobile application that connects to the GitHub API and uses the jQuery Mobile framework.

PhoneGap Build Setup

Before we start, we need to get some basic setup out of the way. Assuming that most of you will be building and testing on an Android or iOS device, let’s discuss what you’ll need to do to get this running. Let’s cover Android first because, honestly, it is easier to get going.

PhoneGap Build for Android

In order to install PhoneGap Build applications on Android, you will need to ensure your device will allow applications to be installed outside of the Google Play marketplace. To enable this on most Android devices you just go to the Settings > Security and then check “Allow applications from unknown sources.”

If you plan to sell your PhoneGap applications in the Google Play store, you will need a signing certificate for submitting to the Android Market but this isn’t necessary for simple testing.

PhoneGap Build for iOS

In order to test PhoneGap Build applications on your iOS device, you will need an Apple developer account which costs $99 per year. This can be purchased at https://developer.apple.com but keep in mind that there is an approximately 24 to 48 hour waiting period for your account to be reviewed and approved by Apple. Unfortunately, if you do not already have this account, it will delay your ability to test on an actual device. If you are on a Mac though, you can use the iOS simulator for the time being. Also, keep in mind that much of the demo we create in this tutorial will work fine in your browser for testing until the final step.

After you have an account, you will need to create a provisioning profile and signing certificate. On a Mac, this process is pretty straightforward, simply follow the instructions on the Apple developer site. For Windows, it is far more complex but Emanuele Feronato has provided some good directions available here.

Once you have a provisioning profile and signing certificate, you can upload these to PhoneGap Build by clicking on your profile icon in the upper-right hand corner of the PhoneGap Build site, going to the “Edit Account” option and finally choosing the “Signing Keys” tab. Simply upload the provisioning profile, signing certificate and supply the associated password. Keep in mind that new rules have been put in place in PhoneGap Build that will require you to re-enter your password each month to unlock the key.

PhoneGap Build Account

In order to complete this tutorial, you will obviously need a PhoneGap Build account. The free account will suffice for the purposes of the tutorial.

Editor

This tutorial is designed to use any code editor you choose. However, as I mentioned earlier, certain Adobe products come with PhoneGap Build integration. Dreamweaver CS6 has built in PhoneGap Build integration to allow you to upload projects directly into Build, rebuild them and access the QR code for installing them.

In addition, Brackets is a free, open-source code editor for HTML, CSS and JavaScript applications that was originally created by Adobe (and is also released in a commercial version under the name Adobe Edge Code). Brackets (and Edge Code) is extensible and Adobe has released a free, open-source Brackets extension for PhoneGap Build support that can be downloaded at https://github.com/adobe/brackets-phonegap.

Starter Files:

As a means of getting started we will be using the starter template available at https://github.com/phonegap/phonegap-start. You can go ahead and download a zip file of the starter application now.

Finished Files:

If you get lost or confused along the way, you can download a zip containing all the completed files from each step of this tutorial at https://bit.ly/11PsyPe.

Next Step

In the next step, we will use the starter files to publish our first PhoneGap application to a mobile device using PhoneGap Build. Click here for part 2.