gap - s3.amazonaws.com · gap . Created Date: 20190922080125Z
Intro to-phone gap-techwed-14dec2011
-
Upload
minyawi-amino -
Category
Education
-
view
219 -
download
2
Transcript of Intro to-phone gap-techwed-14dec2011
![Page 1: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/1.jpg)
![Page 2: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/2.jpg)
Who Am I?
Steve GillPhoneGap Community Champ
Black Belt in TaeKwonDoDrinks Beer
Loves Hockey@SteveSGill
![Page 3: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/3.jpg)
What is PhoneGap?
![Page 4: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/4.jpg)
![Page 5: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/5.jpg)
![Page 6: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/6.jpg)
![Page 7: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/7.jpg)
Why Cross-platform?
![Page 8: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/8.jpg)
Smartphone Platform Market Share
Source: comScore MobiLens, October 2011
• 90 million people in
the US own smartphone
s
![Page 9: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/9.jpg)
The Trend: Smartphone Platform Market Share
Source: comScore MobiLens, October 2011
![Page 10: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/10.jpg)
![Page 11: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/11.jpg)
![Page 12: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/12.jpg)
Convert from Desktop to Mobile
![Page 13: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/13.jpg)
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
![Page 14: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/14.jpg)
Differentiators
• Runs on more platforms• Open community & contributors• Web and App with same code • Framework and tool support
![Page 15: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/15.jpg)
Supported Platforms
• iOS (iPad, iPod Touch, iPhone)• Android (Everything)• BlackBerry (Smartphones, PlayBook)• WebOS• Symbian• Windows Phone• Bada
![Page 16: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/16.jpg)
Standards Based
W3C Device APIs and Policies Working Group
(DAP)
++
![Page 17: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/17.jpg)
APIs
• Accelerometer• Camera• Capture• Compass• Connection• Contacts• Device• Events
• File• Geolocation• Media• Network• Notification• Storage
![Page 18: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/18.jpg)
Basics
Setup the Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
![Page 19: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/19.jpg)
Basics
Listen for the Device Ready Eventdocument.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){//Do Stuff}
![Page 20: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/20.jpg)
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
![Page 21: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/21.jpg)
Plugins
• Push Notifications (Urban Airship)• Child browser• Facebook• Native Controls
• Many more, and more coming
![Page 22: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/22.jpg)
Free & Open Source
![Page 23: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/23.jpg)
Tools
• Emulators• Ripple• Any platform emulator
(iOS Simulator, Android Virtual Devices, etc)
• Debugging• Weinre (web inspector remote)
• IDEs• Eclipse• Dreamweaver• Textmate
![Page 24: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/24.jpg)
Javascript Libraries
xui
![Page 25: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/25.jpg)
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
![Page 26: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/26.jpg)
26
http://build.phonegap.com
![Page 27: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/27.jpg)
Basics
DEMO TIME
![Page 28: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/28.jpg)
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
![Page 29: Intro to-phone gap-techwed-14dec2011](https://reader030.fdocuments.in/reader030/viewer/2022032615/55a2699d1a28ab89308b4652/html5/thumbnails/29.jpg)
Thanks!
@phonegap
phonegap.com
facebook.com/phonegap