PhoneGap allows us to write our applications once and deploy to multiple mobile platforms including Android, iPhone/iPad, Windows Phone 7, Blackberry, WebOS, Symbian, and Bada. It also gives our apps access to native features like the accelerometer, the camera, notifications, and location services to name a few.
Phonegap is free (as in beer and speech) and can be used under Windows, Linux, and Mac OS X.
Download PhoneGap and then follow the Getting Started Tutorial for your intended target device. Alternatively you can use the PhoneGap Build service instead of a local install. It's currently free while in beta, but will eventually be a pay for use service.
The markup for our applications will be written in HTML5. If you need a quick HTML5 introduction or review you should head over to Dive into HTML5 by Mark Pilgrim.
The base markup we will be using is a stripped down version of the Mobile HTML5 Boilerplate. In future posts I will explore what those
meta elements do, and how the
viewport one can be tweaked.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width"> </head> <body> <div id="container"> <header> </header> <div id="main" role="main"> </div> <footer> </footer> </div> </body> </html>
For our CSS we will also be using the Mobile HTML5 Boilerplate as our starting place. For now we will simply grab the "reset" portion of Mobile Boilerplate CSS file. When targeting all phone types we will grab the CSS from the top of that file up until the section labeled "primary styles". If you are not planning on developing for Windows Phones you can safely remove all the sections that mention fixes for IE. Doing that, we are left with this generic mobile CSS reset.
Before we use any fancy CSS3 properties in our app, we will always check the incredible When Can I Use resource to see if the phone we are targeting supports the property we wish to use. For Android development, for example, we will ensure that all the CSS3 we use is supported in Android 2.1 and greater.
To test your applications you will need a smartphone emulator, especially if you are like me and you don't actually own a smartphone. There are official simulators and/or emulators available for the full suite of mobile web-browsers. However, we want an emulator that includes support for the PhoneGap API. Luckily, a company called tinyHippos (recently acquired by RIM) makes such an emulator. It's called Ripple. Ripple supports PhoneGap built mobile applications, allows you to emulated GPS and Accelerometer events, and includes a web inspector for debugging purposes.
In our next blog post we will use these tools to build our very first mobile app and deploy it to the Android Market.