PhoneGap talk from Singapore
- 2. Steve Gill PhoneGap Champ Facebook.com/stevengill97 @SteveSGill [email protected]
- 4. 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++
- 5. 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!
- 6. Supported Platforms • iOS (iPad, iPod Touch, iPhone) • Android (Everything) • BlackBerry (Smartphones, PlayBook) • WebOS • Windows Phone • Symbian • Bada
- 7. Write once debug everywhere
- 9. W3C Device APIs and Policies Working Group (DAP)
- 10. PhoneGap & Apache Cordova
- 11. How do you write PhoneGap apps?
- 12. Basics: HTML <button>I’m native codes!</button>
- 14. 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!
- 15. CSS3 Animations -webkit-transform: translate3d(x,y,z) scale3D(1,1,1.0)
- 16. Media Query
- 17. Media Query <link rel="stylesheet" media="all and (max-device- width: 480px)" href="iphone.css">
- 18. 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">
- 19. 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">
- 20. 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">
- 21. Basics: JavaScript • Language of the web. • Some quirks: http://wtfjs.com
- 22. Startup document.addEventListener( ‘deviceready’, function() { alert(‘WINNING!’); }, false);
- 24. Clear as Mud
- 25. Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS
- 26. Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS • PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
- 27. Clear as Mud • WRITE IN HTML, JAVASCRIPT AND CSS • PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS • NO CROSS COMPILING MAGIC
- 28. 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
- 29. 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
- 30. Partners / Contributors • Adobe • IBM • Sony Ericsson • Symbian • HP/Palm • RIM • Microsoft
- 31. Power Users • Alcatel Lucent • Sabre • Deutsche Telecom • Ars Technica • WikiMedia
- 32. PhoneGap APIs • Sensors • Data • Events http://docs.phonegap.com
- 33. Sensors • GPS • Accelerometer • Compass • Network • Camera
- 34. Data • Contacts • Media • File system • Notifications
- 35. Events • onload (duh) • ondeviceready (this is special) • onnativeready • onresume • onpause
- 36. 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 =(
- 37. Libraries • DOM • Testing • Style / GUI • Persistence
- 38. Plugins
- 39. Facebook PhoneGap Plugin Take your mobile Facebook app and make it native Take advantage of PhoneGap APIs Distribute in app stores & go offline
- 40. 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
- 41. Demo
- 42. More Fb Plugin Info Source Code: github.com/davejohnson/phonegap-plugin-facebook-connect iOS Install video: youtube.com/phonegap Android Video Coming Soon!
- 43. 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
Editor's Notes
- #2: \n
- #3: Always wanted to see how this picture looked on the big screen\n
- #4: 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
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: This approach lets you write once run anywhere\n
- #10: 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
- #11: \n
- #12: We achieve cross platform development through neither magic nor the force, but through HTML, JavaScript and CSS.\n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: Bring it all together\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: \n
- #39: SSO, Dialogs, etc\n
- #40: \n
- #41: \n
- #42: \n