Phonegap

Speaker: Essam A. El-Zinaty

Building Native Mobile Applications using PhoneGap

Google Technology User Group (GTUG)

Agenda

• Mobile Application Overview• PhoneGap Overview• PhoneGap Architecture• PhoneGap Using

Google Technology User Group (GTUG)

$ Mobile Applications $

http://www.abmuku.com/2011/02/24/technology/american-cell-phone-usage-infographic/

Google Technology User Group (GTUG)

But

Google Technology User Group (GTUG)

Lets try web app !

Google Technology User Group (GTUG)

Ok

Google Technology User Group (GTUG)

But we are still No native support NO MONY

Google Technology User Group (GTUG)

PhoneGap

Google Technology User Group (GTUG)

So what is PhoneGapIt's a tool for building mobile apps using web-tech.

Google Technology User Group (GTUG)

How???

Google Technology User Group (GTUG)

Native Support

Google Technology User Group (GTUG)

Application Structure

HTML/JS/CSS + graphic assets are on the device, packaged as part of the build process.JavaScript can store retrieved data in a SQLite database or from localStorage (key/value pair) for offline access.Often a server component involved.JavaScript communicates with the server via XHR to get retrieve data.

Google Technology User Group (GTUG)

PhoneGap Architecture Diagram

PhoneGap Plug-insWeb App

PhoneGap Application

HTML

CSS

JavaScript

Resources

Accelerometer

Camera

Compass

Contacts

File

Geolocation

Media

Network

Notification

Storage

Custom Plug-insHTML Rendering Engine (WebView)

PhoneGap Native APIs

HTM

LAP

Is

Phon

eGap

JS A

PIs

Mobile OS OS

APIs

OS

APIs

Input

Services Sensors

Graphics

Google Technology User Group (GTUG)

Best Practices

• Where possible use single HTML pageUse JavaScript to show/hide page elements based on user interaction instead of linking to a separate page.Those JavaScript toolkits come in handy here!

• Consider offline usagenavigator.network.connection.typeonline /offline eventsNote: Apple checks for offline support

Google Technology User Group (GTUG)

Best Practices

• Utilize persistent storageFile APIsStorage APIs

• SQL Lite / LawnchairWhere possible use single HTML pageUse JavaScript to show/hide page elements based on user interaction instead of linking to a separate page.Those JavaScript toolkits come in handy here!

• Obfuscate / crunch your JavaScript before release

Google Technology User Group (GTUG)

Using PhoneGap

• Create resources in www directory• Include cordova.*.js in your start page (usually

index.html)• Create onload handler• In onload handler register for deviceReady event from

PhoneGap• When deviceready fires PhoneGap is ready.• Build, install and test for each platform• Use console.log for debuging

Google Technology User Group (GTUG)

Links• http

://docs.phonegap.com/en/1.9.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

• http://docs.phonegap.com/en/1.9.0/index.html• http://brian.io/lawnchair/• http://zeptojs.com/

The EndThanks

Google Technology User Group (GTUG)