Building a mobile app with PhoneGap: The basics

This article provides an introduction to PhoneGap as well as some general mobile development advice that you should consider before you start building your mobile app.

PhoneGap is an open source framework that enables you to use HTML, CSS, and JavaScript to build mobile apps for multiple platforms. It supports seven platforms: Android, iOS, BlackBerry, Windows Phone 7, webOS, Symbian, and Bada.

Benefits of PhoneGap

PhoneGap allows you to use a single code base to build and deploy an application to multiple platforms. In traditional mobile development, you would have to create a separate app for each platform using the programming language of that platform. With PhoneGap, you can use HTML, CSS, and JavaScript—technologies you're likely already familiar with. Plus, you can use the same code for all platforms and even your mobile website.

Because you do not have to rewrite your code in a different programming language for each platform, developing a multiplatform app with PhoneGap is often significantly faster than developing apps for each platform individually.

PhoneGap provides access to native APIs that you cannot normally access with JavaScript, so your application has access to the camera, accelerometer, geolocation, contacts, and other native features.

If you've yet to start a mobile development project, there are a few things to consider before you do, including whether you need to build a mobile app at all and which platforms you will be targeting.

Mobile app versus mobile web

A big question to consider before you start development is if you should make a mobile application in the first place. In some cases, it might make sense to skip the mobile application and instead develop for the browser. Here are some points that might help you decide:

Reasons to build a mobile app

• Your application needs access to one or more native APIs (such as the camera, accelerometer, and so on).
• You want the application's icon to appear on the home screen of the mobile device.
• Your application needs to be available offline.
• You want to monetize your application by making it available in an app store or market.

Reasons to build a mobile website

• You do not want to go through the App Store submission process.
• You would rather have your users use their browser instead of downloading an application.
• Some device browsers have better functionality than the webviews.

Designing for multiple mobile devices

When designing for multiple mobile devices, consider the following best practices and caveats:

• Know and understand the devices you are targeting. It is important to have access to actual devices and not just emulators. Know the screen resolutions, screen sizes, and aspect ratios of the devices for which you are designing. Use CSS3 media queries to build fluid layouts that can handle all of the different screen characteristics of your target devices.
• User flow and functionality should be the same on every device. For example, if your application enables the user to take a picture on an Android device, it should provide the same capability on a BlackBerry device, following the same basic steps on both devices.
• Be aware of each platform's navigational convections. Devices and platforms may have different input conventions. For instance, many Android devices have hardware buttons for Home and Back, whereas iOS devices use the touch interface.
• Develop for your brand. An application that is styled using iOS conventions will not look as appealing on an Android device and vice versa. Instead of styling to a device, style to your brand.

Learn HTML5, CSS3, and JavaScript

If you are not already proficient with HTML5, CSS3, and JavaScript, then learning more about them will enable you to make even more compelling mobile apps. You can get by with some basic knowledge while using Dreamweaver, but if you want to build more sophisticated apps, you should start learning about these three technologies.

After reading this brief introduction to PhoneGap and considering a few mobile development options, you're ready to move on to Andrew Trice's PhoneGap series, such as:

• Getting started with PhoneGap in Eclipse for Android
• Getting started with PhoneGap in Xcode for iOS
• Extending PhoneGap with native plugins for Android
• Extending PhoneGap with native plugins for iOS

Also, explore the following sites:

• HTML5Rocks
• Which Element
• Dive into HTML5
• The HTML5 Doctor
• (When) can I use…
• HTML5 developer center
• HTML5 Weekly
• Adobe & HTML5