Create Your First Mobile App with PhoneGap Build – Setup
The modern web is always changing, and this article is more than two years old.
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.
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.
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.
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 http://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.
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.
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.
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 http://bit.ly/11PsyPe.
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.