Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to-phone gap-techwed-14dec2011

323 views

Published on

phonegap technology

Published in: Education
  • Be the first to comment

  • Be the first to like this

Intro to-phone gap-techwed-14dec2011

  1. 1. Who Am I? Steve Gill PhoneGap Community Champ Black Belt in TaeKwonDo Drinks Beer Loves Hockey @SteveSGill steveng@adobe.com
  2. 2. What isPhoneGap?
  3. 3. Why Cross-platform?
  4. 4. Smartphone Platform Market Share • 90 million people in the US own smartphone s Source: comScore MobiLens, October 2011
  5. 5. The Trend: Smartphone Platform Market Share Source: comScore MobiLens, October 2011
  6. 6. Convert from Desktop to Mobile
  7. 7. 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
  8. 8. Differentiators• Runs on more platforms• Open community & contributors• Web and App with same code• Framework and tool support
  9. 9. Supported Platforms• iOS (iPad, iPod Touch, iPhone)• Android (Everything)• BlackBerry (Smartphones, PlayBook)• WebOS• Symbian• Windows Phone• Bada
  10. 10. Standards Based + W3C Device APIs and Policies Working Group (DAP)
  11. 11. APIs• Accelerometer • File• Camera • Geolocation • Media• Capture • Network• Compass • Notification• Connection • Storage• Contacts• Device• Events
  12. 12. Basics Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  13. 13. BasicsListen for the Device Ready Eventdocument.addEventListener("deviceready", onDeviceReady,false);function onDeviceReady(){//Do Stuff}
  14. 14. Basics Accelerometer Examplefunction 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);
  15. 15. Plugins• Push Notifications (Urban Airship)• Child browser• Facebook• Native Controls• Many more, and more coming
  16. 16. Free & Open Source
  17. 17. Tools• Emulators • Ripple • Any platform emulator (iOS Simulator, Android Virtual Devices, etc)• Debugging • Weinre (web inspector remote)• IDEs • Eclipse • Dreamweaver • Textmate
  18. 18. Javascript Libraries xui
  19. 19. 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
  20. 20. http://build.phonegap.com 26
  21. 21. Basics DEMO TIME
  22. 22. 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
  23. 23. phonegap.com @phonegap facebook.com/phonegapThanks!

×