SlideShare a Scribd company logo

PhoneGap talk from Singapore

•Download as KEY, PDF•
•
S
Steve Gill

PhoneGap allows developing mobile apps using HTML, CSS, and JavaScript that can be deployed across multiple platforms. It works by embedding a webview component within a native container app, and uses a bridge to allow access to native device APIs. Key features include writing code once and deploying to iOS, Android, BlackBerry and other platforms; using standard web technologies; and accessing device capabilities like contacts, camera through JavaScript APIs. Plugins can extend PhoneGap functionality like the Facebook plugin that allows building native Facebook apps.

1 of 43
PhoneGap Facebook Hack
Steve Gill PhoneGap Champ Facebook.com/stevengill97 @SteveSGill steveng@adobe.com
What is PhoneGap?
Lay of the Land iOS .............................. Objective C Android ...................... Java ‘Harmony’ / C++ BlackBerry ................. Java J2ME / C++ (maybe?) webOS ........................ HTML, CSS and JS Windows Phone 7 ... .NET Bada ............................. C++
PhoneGap Pattern 1. Embed a chromeless browser in a native app 2. Create a “bridge” between the browser and the native code 3. Write a web app 4. Package the web app with the native code and deploy to devices!
Supported Platforms • iOS (iPad, iPod Touch, iPhone) • Android (Everything) • BlackBerry (Smartphones, PlayBook) • WebOS • Windows Phone • Symbian • Bada
Write once debug everywhere
PhoneGap talk from Singapore
W3C Device APIs and Policies Working Group (DAP)
PhoneGap & Apache Cordova
How do you write PhoneGap apps?
Basics: HTML <button>I’m native codes!</button>
Setup the Viewport <meta name="viewport" content="width=dev ice-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=no;" />
Basics: CSS3 • Media queries come in handy for tablets • Many folk using precompilers these days • Opacity, rounded corners, gradients and fucking drop shadows fuck ya!
CSS3 Animations -webkit-transform: translate3d(x,y,z) scale3D(1,1,1.0)
Media Query
Media Query <link rel="stylesheet" media="all and (max-device- width: 480px)" href="iphone.css">
Media Query <link rel="stylesheet" media="all and (max-device- width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device- width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
Media Query <link rel="stylesheet" media="all and (max-device- width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device- width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> <link rel="stylesheet" media="all and (min-device- width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad- landscape.css">
Media Query <link rel="stylesheet" media="all and (max-device- width: 480px)" href="iphone.css"> <link rel="stylesheet" media="all and (min-device- width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css"> <link rel="stylesheet" media="all and (min-device- width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad- landscape.css">
Basics: JavaScript • Language of the web. • Some quirks: http://wtfjs.com
Startup document.addEventListener( ‘deviceready’, function() { alert(‘WINNING!’); }, false);
PhoneGap talk from Singapore
Clear as Mud
Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS
Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS • PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS • PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS • NO CROSS COMPILING MAGIC
Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS • PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS • NO CROSS COMPILING MAGIC • NO FAIRY DUST / SPARKLES
Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS • PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS • NO CROSS COMPILING MAGIC • NO FAIRY DUST / SPARKLES • NO UNICORNS GET HURT
Partners / Contributors • Adobe • IBM • Sony Ericsson • Symbian • HP/Palm • RIM • Microsoft
Power Users • Alcatel Lucent • Sabre • Deutsche Telecom • Ars Technica • WikiMedia
PhoneGap APIs • Sensors • Data • Events http://docs.phonegap.com
Sensors • GPS • Accelerometer • Compass • Network • Camera
Data • Contacts • Media • File system • Notifications
Events • onload (duh) • ondeviceready (this is special) • onnativeready • onresume • onpause
Tooling • Use any IDE • Use the platform emulators (at your peril) • Use Ripple emulator • Use Web Inspector Remote (Weinre) • Srsly use Weinre • Console.log and alert =(
Libraries • DOM • Testing • Style / GUI • Persistence
Plugins
Facebook PhoneGap Plugin Take your mobile Facebook app and make it native Take advantage of PhoneGap APIs Distribute in app stores & go offline
How the Fb Plugin Works Adds hooks into Facebook JS SDK to call the plugin Maps some FB JS calls to native FB iOS SDK
Demo
More Fb Plugin Info Source Code: github.com/davejohnson/phonegap-plugin-facebook-connect iOS Install video: youtube.com/phonegap Android Video Coming Soon!
project resources phonegap.com docs.phonegap.com wiki.phonegap.com git.apache.org issues.apache.org/jira/browse/CB groups.google.com/group/phonegap twitter.com/phonegap facebook.com/phonegap #phonegap on freenode youtube.com/phonegap thank you github.com/davejohnson/phonegap- plugin-facebook-connect

More Related Content

PhoneGap talk from Singapore

Editor's Notes

  1. \n
  2. Always wanted to see how this picture looked on the big screen\n
  3. Who has heard of PhoneGap before? PhoneGap is a free and open source framework that enables developers to write cross platform mobile applications using html5, css3 and javascript.\n
  4. \n
  5. \n
  6. \n
  7. \n
  8. This approach lets you write once run anywhere\n
  9. HTML 5 is huge. All you hear now a days is html5 this and html 5 that. With PhoneGap you get to use HTML5, CSS3 and Javascript. The PhoneGap team is \n
  10. \n
  11. We achieve cross platform development through neither magic nor the force, but through HTML, JavaScript and CSS.\n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. Bring it all together\n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. SSO, Dialogs, etc\n
  39. \n
  40. \n
  41. \n