Apache Cordova is the most popular way to build mobile apps using HTML. You can download all of the required tools to build installers on to your machine to build PhoneGap apps for any platform… provided you have the machines and environment configurations necessary to do so. What can start out easy can quickly become unwieldy as you start copying your code to different machines to do platform specific builds. Recognizing this problem, Adobe created the PhoneGap cloud build service.
The Adobe PhoneGap cloud build service lets you create an HTML based app, zip it up and the service will create platform specific installers. It supports Android, iOS, Windows Phone, Blackberry, WebOS, and Symbian.
Getting Started
Open a free account at http://build.phonegap.com and create your first project. When you create your first project it will give you the option of pointing it to a github repro or uploading a zip file containing your project.
To get a basic build working in phonegap, all you really need is a single “index.html” file in the zip file you upload.
To access the phonegap API, you can add a reference to the phonegap.js file in the HEAD of your index.html file. When you’re developing code and running off of local disk, you’ll need this file in the directory of your app but when you upload your app to the PhoneGap cloud build service you’ll need to delete this file.
<script src="phonegap.js"></script>
To access some of the more sophisticated development tools and emulators, you can optionally download the PhoneGap extensions to Eclipse for Android, XCode for iOS and Visual Studio for Windows Phone from http://www.phonegap.com . These extensions are platform specific but if you plan on using the Adobe PhoneGap build service you can develop on your favored platform, then upload to the PhoneGap build service to build for the other platforms.
Configuration
For PhoneGap applications, the Config.xml file defines the apps meta data including icons, splash screens, security and permissions. It isn’t required to have a Config.xml defined to successfully do a build in PhoneGap but you will eventually need to do one to get too far beyond “hello world”.
At a minimum, the config.xml should define the basic meta-data about your application. This includes the id, which is done in reverse domain format and should be completely unique to your application, your app’s name and your contact information.
<?xml version="1.0" encoding="UTF-8"?> <widget xmlns_gap="http://phonegap.com/ns/1.0" id="com.yourorg.yourappname" version="0.0.1"> <name>Your App Name</name> <description> A short sentence or two about your application. </description> <author href="http://yoursite.com" email="contact@yoursite.com"> Author Name </author> </widget>
Icons and splash screens should both be created as PNGs. Icons can include transparency but splash screens will behave inconsistently depending on which platform you’re on if you include transparency. To define the generic icon and splash screen, you should name your default icon “icon.png” and splash icon must be named “splash.png” and need to be referenced in your app’s Config.xml as seen below.
<gap:splash src="splash.png" /> <icon src="icon.png" />
Although you can use just a generic icon and splash screen for all platforms, it is recommended to include platform and device-resolution specific images as appropriate so your images will look correct on the types of screens you are targeting.
Your Config.xml file also includes the request for permissions your app will need when it runs. This is done by including feature tags as sub-tags of the widget. As with any security related request, you shouldn’t ask for more permissions than what your app really needs. The specific features are listed below.
<feature name="http://api.phonegap.com/1.0/battery"/> <feature name="http://api.phonegap.com/1.0/camera"/> <feature name="http://api.phonegap.com/1.0/contacts"/> <feature name="http://api.phonegap.com/1.0/file"/> <feature name="http://api.phonegap.com/1.0/geolocation"/> <feature name="http://api.phonegap.com/1.0/media"/> <feature name="http://api.phonegap.com/1.0/network"/> <feature name="http://api.phonegap.com/1.0/notification"/>
PhoneGap apps assume the HTML your app is using is stored locally. If you need to load pages from the internet, you will need to add an entry into your config file to allow the web sites you need your app to access. You can allow “*” instead of specific sites if you need your app to be able to access any site on the internet but this isn’t recommended unless you really need it. Controlling the origins your app can access can minimize the probability of your app being used as an attack vector on the user’s device.
<access origin="https://www.yoursite.com" />
When you build a PhoneGap app, your application’s active domain will be the device. This means any AJAX request you make from HTML stored inside of your PhoneGap app will be a cross-origin request. You will need to configure your server to allow cross-origin requests. If you are using ASP.NET as your server product, you will need to make the configuration changes shown below. These two custom header tags configure ASP.NET to allow cross origin requests and allows content-type headers both of which are necessary to make cross-origin AJAX calls work.
<system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> </customHeaders> </httpProtocol> </system.webServer>
Conclusion
It only takes a few minutes to get started and building apps using Adobe PhoneGap targeting most major mobile platforms. The cloud build services save you from having to have multiple development machines to build on and save you from needing to copy your code between multiple development environments. Get out there and start building some apps!
About the Author:
David Talbot currently works as a Principal Architect at EverBank. He has over 15 years of experience in the software industry and specializes in building rich UI web applications. He is also the author of Applied ADO.NET and numerous articles on technology. He can be reached at david@legendarycode.com
