In this tutorial we will explore the PhoneGap Build cloud service, which will take the strain and stress out of manually compiling applications for each specific mobile platform by automatically generating the required native packages for us. We’ll see how we can hook in our code using a Git repository for easier code management, and how we can make use of debugging features and automatic application updates to test and deploy our application directly on the device.
Build service account
To begin, we will need to have an account with the PhoneGap Build Service, which is free and easy to set up. Head over to either downloading the raw, platform-specific, package file, or instead by using your device’s camera to scan the unique QR code generated by
the PhoneGap Build service. Doing this will download the file directly onto the device.
You may already have a PhoneGap project that you would like to use within the build service. If you do not, or are completely new to PhoneGap development, let’s download the PhoneGap Starter project from GitHub.com/coldfumonkeh/phonegap-start. If you have a GitHub account, fork the project into your own repository for easier integration into the build service.
Open the downloaded project in a text editor. Thanks to the versatility of the PhoneGap Build service, we are not tied to any specific coding software – as long as you can write HTML, JS and CSS, you can use whatever tool suits you best. The core application code exists within the www directory.
Open the config.xml in your editor. This file allows us to set the main attributes for our project, including icon and image data, the description, title and author details, as well as enabling access to device features. PhoneGap Build requires this file to properly process and create the packaged application ready for deployment.
The config.xml file contents and configurable attributes can be fairly in-depth and confusing. There are tools available to help you work with this file, including ConfiGAP, which is an AIR application. Download and install this application from the following URL to assist you in completing the configuration data to suit your needs. Open up the config.xml file we downloaded into the application and amend the values.
Open index.html in your code editor. One of the script tags references a version of the Cordova library. However, that file does not exist within the local project structure. If we wanted to test and emulate the application locally, we would need it, but the PhoneGap Build service will inject the required file on our behalf during the build process.
Time to submit
With the basic application created and the configuration details stored in the config.xml file, we are now able to submit our app to the build service. If this is your first time, you will be presented with the upload option box, from which you have the ability to upload the app as an open-source or private project.
The private option gives you a little more privacy over your submitted application and how you can submit it. You can use any Git repository (GitHub or your own private repos), or you can upload the application files as an archived zip file. For this tutorial we will use the repository option and paste the URL directly into the provided address bar.
The PhoneGap Build service will automatically clone the code within the provided Git repository and import the application. It has automatically been assigned an App ID numeric identifier, and the core details from the config.xml file have also been referenced, including the version of PhoneGap to compile against, as well as the owner’s name. Click Ready to build the first compile.
The build service will now start to compile the submitted mobile application for the six key platforms it currently supports. The user interface provides an easy to read real-time notification of any failures or issues that may arise during this process. Here, no iOS signing key was provided, so the build for that platform was unable to finish.
Clicking on the application title will take you through to the individual app page. From here you can see the latest build information and how long it took, as well as the ability to add a new collaborator to the project, which is ideal for development teams and enhanced workflow.
One incredible feature of the build service is the Hydration facility. Under the Settings tab, click the Enable Debugging and Enable Hydration options. Hydration will rebuild the native compiled code into a new binary format to assist with easier development and deployment to devices used for testing.
To see the Hydration features we enabled in the previous step in action, install the compiled application onto your mobile device. You can do this by either downloading the raw, platform-specific, package file, or instead by using your device’s camera to scan the unique QR code generated by the PhoneGap Build service. Doing this will download the file directly onto the device.
With the Hydrated application installed on the device, let’s now update our application code and commit it to the repository. Run a simple test to change the default text on the home screen. Once committed to the repository, head back to the PhoneGap Build settings panel and click the Pull Latest button to grab the latest code.
Once the code has recompiled, open the application that is currently installed on your device. As the Hydration feature is enabled, it will detect whether an updated version of the compiled app is available, and ask if you would like to download and install directly to the device wirelessly. This really
is a big timesaver!
Remote debugging and element inspection is powered by the open-source weinre project (Web Inspector Remote). With the application running on your device, select the debug button in the build service, which will open an instance of debug.phonegap.com with a unique UUID in the URL. You should see your device listed here.
Using Git WebHooks
We can further enhance the workflow and help to automate the processes by adding in a new process to handle the communication between the Git repository and the build service.
Once code is committed to the repository, we still have to manually select the option to pull that latest code from the source control and rebuild the application. Many Git repositories – including GitHub –contain service hooks, which will run after a successful commit to the code base. Selecting WebHook URL, we can ask GitHub to post to a specific address – in this case autobuild.monkeh.me – which will then in turn send a request to your PhoneGap Build application, force a new pull request, and rebuild on your behalf. This removes the need for manual interaction and streamlines development. Find out more at autobuild.monkeh.me.