Mobile App Development using PhoneGap - A Comprehensive Walk-through

Gomathi Viswanathan & Vijesh K V

Unimity Solutions Chennai

Lets Checkout an App!

Lets Checkout an App!

What do Apps typically accomplish?

Present Information

Capture and Save Information

Access device APIs Transmit Data to remote servers Handle Notifications
Images Courtesy various Internet Sources

A Sample App - Meetup Updater

Here is an App that will help you be updated with the Meetups of your preferred groups in & around your place It fetches Meetup Details from a remote server Has a local data store for your preferences Send Data to Server - Register for an Event Encompasses the typical navigational and user interaction elements

What is behind the scenes? PhoneGap

PhoneGap
Is a Cross Platform Native Mobile App development framework Leverages HTML, CSS and Javascript Supports Android, iOS, Blackberry, Symbian, Windows, WebOS, Bada and Palm Has APIs for sensors and data Was recently acquired by Adobe and the current code base is to be submitted to Apache Software Foundation

PhoneGap Build
PhoneGap Build an Online service to compile code blocks in HTML, CSS, JS to native apps without the need for the developer to work with the respective APIs Without PhoneGap build, you need to download and work using different SDKs and builds. Beta is free

Want to know how to get all this done?

Gearing Up for Development

Since the App is compiled as a Native application, respective SDKs for each platform needs to be installed.

Mac 10.6 OS computer Xcode

Windows (or) Mac computer

Android SDK Windows Computer AVD Eclipse and ADT plugin

Apache Ant
Sun JDK BB WebWorks SDK

The Nuts & Bolts

Getting Started
PhoneGap is open web-standards based, which means you can run and test and test your App on any Webkit based Browser (Chrome, Safari) The application creation is very similar to that of web pages creation, except for the installation and deployment stages. HTML, CSS and Javascript is all that you need from a programming perspective.

You can use Browser based debugging tools that are available as addons. Eg. FireBug

The Add-Ons
Use popular JS plugin like JQuery (mobile version), mobile specific like jQTouch, Sencha.

Use Webkit specific pre-release implementation of certain CSS properties.

Use Local Storages

Cookies for session maintenance

PhoneGap API Web SQL database HTML5 local Storage API is a breeze

Indexed storage option Indexed DB is upcoming

Structure App in a MVC model

Environment Views
Switching to IDE view (will be removed from slides)

Looking Inward PhoneGap API

Images Courtesy various Internet Sources

Looking Inward PhoneGap API

Accelerometer Device motion sensor Geolocation GPS Sensor Compass Capture audio, video and image capture capabilities Camera Media- Allows Record and Playback of Audio Contacts database File Connection type Device Notification Audio Visual and Tactile

Core Events
Deviceready Pause and Resume

Online and Offline

Menubutton Searchbutton Startcallbutton and endcallbutton Volumedownbutton and volumeupbutton

Looking Outward - Linking to Remote Servers

PhoneGap Applications can communicate with Remote web servers Remote servers can be public (meetup, twitter etc) (or) proprietary, eg. Any business app say a CRM APP may contact a central proprietary web server of the company. Services can be RESTful API based (or) SOAP based The response can be XML (or) JSON The client can use XHR (Ajax HTTP request) WebSockets are an emerging trend

The Demo

Flow of Building and Deploying

Courtesy www.phonegap.com

Code Aside The design elements, best practices and testing

Visual Design
User experience is enhanced when the App is Consistent in design and behavior with Native device. Eg. The menu style, notifications style. This means some of the core design components and their consistency need to be maintained. Fonts and Sizes Icon Styles Device Sizes and Resolutions Notifications Screen Navigation

Design Elements
Data display Running Text Categorized Text Images and Media Scroll - Slide, with Thumbnail

Images Courtesy various Internet Sources

Design Elements
Data capture options Text Boxes Select Fields Multi-Select

Images Courtesy various Internet Sources

Testing your App

The features testing at a unit level, needs to be done not only

on the emulator, also at the device level.

Apart from testing for the functionality, pre-market submission checklists need to be applied

Testing of the Installation Process, Upgrades Workflow and

Application fire-up are also equally critical The response to external events like incoming calls and

application state maintenance is at the outset taken care of

by PhoneGap

References
Looking for Support IRC Channel for JS, JQuery Google PhoneGap group iOS, Android communities on Social Networking Sites References made in this presentations http://www.meetup.com http://www.phonegap.com

http://www.patternsofdesign.co.uk
http://developer.android.com Images from various internet sources

Thank you.