Use the PhoneGap cloud-based service to build mobile apps using HTML and Javascript
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.
Leave a Comment