PhoneGap talk from Singapore

  • 1,051 views
Uploaded on

PhoneGap talk from Singapore at Facebook mobile world hack tour

PhoneGap talk from Singapore at Facebook mobile world hack tour

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,051
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
25
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • Always wanted to see how this picture looked on the big screen\n
  • 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
  • \n
  • \n
  • \n
  • \n
  • This approach lets you write once run anywhere\n
  • 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
  • \n
  • We achieve cross platform development through neither magic nor the force, but through HTML, JavaScript and CSS.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Bring it all together\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • SSO, Dialogs, etc\n
  • \n
  • \n
  • \n

Transcript

  • 1. PhoneGapFacebook Hack
  • 2. Steve Gill PhoneGap ChampFacebook.com/stevengill97 @SteveSGill steveng@adobe.com
  • 3. What is PhoneGap?
  • 4. Lay of the LandiOS .............................. Objective CAndroid ...................... Java ‘Harmony’ / C++BlackBerry ................. Java J2ME / C++ (maybe?)webOS ........................ HTML, CSS and JSWindows Phone 7 ... .NETBada ............................. C++
  • 5. PhoneGap Pattern1. Embed a chromeless browser in a native app2. Create a “bridge” between the browser and the native code3. Write a web app4. 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
  • 8. W3C Device APIs andPolicies Working Group (DAP)
  • 9. PhoneGap &Apache Cordova
  • 10. How do you write PhoneGap apps?
  • 11. Basics: HTML<button>I’m native codes!</button>
  • 12. Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  • 13. 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!
  • 14. CSS3 Animations-webkit-transform: translate3d(x,y,z) scale3D(1,1,1.0)
  • 15. Media Query
  • 16. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
  • 17. 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">
  • 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"><link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and(orientation:landscape)" href="ipad-landscape.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. Basics: JavaScript• Language of the web.• Some quirks: http://wtfjs.com
  • 21. Startupdocument.addEventListener( ‘deviceready’, function() { alert(‘WINNING!’); }, false);
  • 22. Clear as Mud
  • 23. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS
  • 24. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
  • 25. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS• NO CROSS COMPILING MAGIC
  • 26. 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
  • 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• NO FAIRY DUST / SPARKLES• NO UNICORNS GET HURT
  • 28. Partners / Contributors• Adobe• IBM• Sony Ericsson• Symbian• HP/Palm• RIM• Microsoft
  • 29. Power Users• Alcatel Lucent• Sabre• Deutsche Telecom• Ars Technica• WikiMedia
  • 30. PhoneGap APIs• Sensors• Data• Events http://docs.phonegap.com
  • 31. Sensors• GPS• Accelerometer• Compass• Network• Camera
  • 32. Data• Contacts• Media• File system• Notifications
  • 33. Events• onload (duh)• ondeviceready (this is special)• onnativeready• onresume• onpause
  • 34. 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 =(
  • 35. Libraries• DOM• Testing• Style / GUI• Persistence
  • 36. Plugins
  • 37. Facebook PhoneGap PluginTake your mobile Facebook app and make it native Take advantage of PhoneGap APIs Distribute in app stores & go offline
  • 38. How the Fb Plugin WorksAdds hooks into Facebook JS SDK to call the plugin Maps some FB JS calls to native FB iOS SDK
  • 39. Demo
  • 40. More Fb Plugin Info Source Code:github.com/davejohnson/phonegap-plugin-facebook-connect iOS Install video: youtube.com/phonegap Android Video Coming Soon!
  • 41. 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