Intro to-phone gap-techwed-14dec2011

Who Am I?

Steve GillPhoneGap Community Champ

Black Belt in TaeKwonDoDrinks Beer

Loves Hockey@SteveSGill

steveng@adobe.com

What is PhoneGap?

Why Cross-platform?

Smartphone Platform Market Share

Source: comScore MobiLens, October 2011

• 90 million people in

the US own smartphone

s

The Trend: Smartphone Platform Market Share

Source: comScore MobiLens, October 2011

Convert from Desktop to Mobile

Benefits

• One code base, multiple platforms• Reuse existing web developer skills• Shorter learning curve• Faster development• Mobile site and app with same code• Reusable web code and infrastructure• Code portable to other environments• Based on open standards• Active and growing community• Open source with multiple large stakeholders

Differentiators

• Runs on more platforms• Open community & contributors• Web and App with same code • Framework and tool support

Supported Platforms

• iOS (iPad, iPod Touch, iPhone)• Android (Everything)• BlackBerry (Smartphones, PlayBook)• WebOS• Symbian• Windows Phone• Bada

Standards Based

W3C Device APIs and Policies Working Group

(DAP)

++

APIs

• Accelerometer• Camera• Capture• Compass• Connection• Contacts• Device• Events

• File• Geolocation• Media• Network• Notification• Storage

Basics

Setup the Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

Basics

Listen for the Device Ready Eventdocument.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){//Do Stuff}

Basics

function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n');};function onError() { alert('onError!');};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

Accelerometer Example

Plugins

• Push Notifications (Urban Airship)• Child browser• Facebook• Native Controls

• Many more, and more coming

Free & Open Source

Tools

• Emulators• Ripple• Any platform emulator

(iOS Simulator, Android Virtual Devices, etc)

• Debugging• Weinre (web inspector remote)

• IDEs• Eclipse• Dreamweaver• Textmate

Javascript Libraries

xui

Perceived Risks & Concerns

• Web tech not appropriate for everything• Many webkits• Many screens/pixel densities• There are bugs!

• App store rejections• Not "native"• Performance• Security

26

http://build.phonegap.com

Basics

DEMO TIME

Resources

• Source: github.com/callback• Bugs: issues.apache.org/jira/browse/CB• Docs: docs.phonegap.com• Wiki: wiki.phonegap.com• Support:

groups.google.com/group/phonegap• IRC: irc.freenode.net #phonegap• Apps: phonegap.com/apps

Thanks!

@phonegap

phonegap.com

facebook.com/phonegap