intro to-phone gap-techwed-14dec2011
TRANSCRIPT
Who Am I?
Steve GillPhoneGap Community Champ
Black Belt in TaeKwonDoDrinks Beer
Loves Hockey@SteveSGill
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