Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
31st January 2013

Build mobile apps with PhoneGap

Use the PhoneGap cloud-based service to build mobile apps using HTML and Javascript

Build mobile apps with PhoneGapDOWNLOAD TUTORIAL FILES

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 build.phonegap.com/people/sign_up to begin the registration process. You can sign in using either an Adobe ID or your GitHub account details, so you will also need one of these if you do not already have one.

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.
012js”></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.

  • 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://Chixaget.tk Chixaget

      Good

    • http://www.mercubuana.ac.id/ ululf01

      I thank you for sharing this tutorial

    • http://www.guestbook.mhs48.com/index.php http://www.guestbook.mhs48.com/index.php

      I like the helpful info you provide in your articles.
      I’ll bookmark your blog and check again here regularly. I’m quite certain I’ll learn a lot of new stuff right here! Best of luck for the next!