Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
14th March 2013

Automate mobile app development

Use the cloud-based PhoneGap Build service to streamline your development workflow and compile mobile applications

Automate mobile app development

Automate mobile app development Since its emergence on the development market, the PhoneGap API has proven to be a roaring success. With over 1 million downloads to date, it has opened up the doors for creative professionals to build mobile applications in the familiar coding languages of HTML, JavaScript, and CSS; removing the need to learn any of those native platform-specific languages.

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.

Project template

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.

001<body>
002 <div class=”app”>
003 <h1>PhoneGap</h1>
004 <div id=”deviceready”>
005 <p class=”status pending blink”>Connecting to Device</p>
006 <p class=”status complete blink hide”
007 >Device is Ready</p>
008 </div>
009 </div>
010 <script type=”text/javascript” src=”cordova.js”></script>
011 <script type=”text/javascript” src=”js/index.
012 js”></script>
013 <script type=”text/javascript”>
014 app.initialize();
015 </script></body>

Import project

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.

Config.xml

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.

ConfiGAP tool

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.

No Cordova.js

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.

Private options

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.

Project imported

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.

Build process

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.

Available settings

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.

Enable hydration

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.

Install application

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.

Update code

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.

Retrieve build

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

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.

Mobile inspection

Weinre should be familiar to anyone who has used tools such as Firebug or Chrome developer tools. With the connection open, you can view console output, change the element content and styles and even send test JavaScript alerts directly to your mobile application. This is ideal for testing changes directly on the device.

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.

Tags:
  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://altitudestudio.com/ mobile app designers

      Wonderful post! This blog was is very helpful to keep up the latest update and to get right knowledge.
      Thanks for sharing!

    • http://nigellevy.blinkweb.com/1/2013/05/some-mobile-application-developer-training-courses-to-take-into-consideration-3f62f/ WalkerGriffin

      Nice blog this post is useful to build service account and project template and also a important project. With the all basic information. Nice sharing keep it up.

    • http://www.buyyourapp.com/ Lisa Marie

      Now a days app are very helpful to expand any business on the web.