0
PhoneGapFacebook Hack
Steve Gill    PhoneGap ChampFacebook.com/stevengill97       @SteveSGill   steveng@adobe.com
What is PhoneGap?
Lay of the LandiOS .............................. Objective CAndroid ...................... Java ‘Harmony’ / C++BlackBerry...
PhoneGap Pattern1. Embed a chromeless browser in a native app2. Create a “bridge” between the browser and the   native cod...
Supported Platforms•   iOS (iPad, iPod Touch, iPhone)•   Android (Everything)•   BlackBerry (Smartphones, PlayBook)•   Web...
Write once debug everywhere
W3C Device APIs andPolicies 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=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=n...
Basics: CSS3• Media queries come in handy for tablets• Many folk using precompilers these days• Opacity, rounded corners, ...
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...
Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media...
Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css"><link rel="stylesheet" media...
Basics: JavaScript• Language of the web.• Some quirks: http://wtfjs.com
Startupdocument.addEventListener(  ‘deviceready’,  function() {     alert(‘WINNING!’);  },  false);
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...
Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED  PACKAGED ON A PER PLATFORM BASIS• NO CROSS...
Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED  PACKAGED ON A PER PLATFORM BASIS• NO CROSS...
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)• ...
Libraries• DOM• Testing• Style / GUI• Persistence
Plugins
Facebook PhoneGap          PluginTake your mobile Facebook app and make it native        Take advantage of PhoneGap APIs  ...
How the Fb Plugin           WorksAdds hooks into Facebook JS SDK to call the plugin   Maps some FB JS calls to native FB i...
Demo
More Fb Plugin Info                      Source Code:github.com/davejohnson/phonegap-plugin-facebook-connect              ...
project resources                    phonegap.com                    docs.phonegap.com                    wiki.phonegap.co...
PhoneGap talk from Singapore
PhoneGap talk from Singapore
Upcoming SlideShare
Loading in...5
×

PhoneGap talk from Singapore

1,106

Published on

PhoneGap talk from Singapore at Facebook mobile world hack tour

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,106
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

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 of "PhoneGap talk from Singapore"

    1. 1. PhoneGapFacebook Hack
    2. 2. Steve Gill PhoneGap ChampFacebook.com/stevengill97 @SteveSGill steveng@adobe.com
    3. 3. What is PhoneGap?
    4. 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. 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. 6. Supported Platforms• iOS (iPad, iPod Touch, iPhone)• Android (Everything)• BlackBerry (Smartphones, PlayBook)• WebOS• Windows Phone• Symbian• Bada
    7. 7. Write once debug everywhere
    8. 8. W3C Device APIs andPolicies Working Group (DAP)
    9. 9. PhoneGap &Apache Cordova
    10. 10. How do you write PhoneGap apps?
    11. 11. Basics: HTML<button>I’m native codes!</button>
    12. 12. Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    13. 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. 14. CSS3 Animations-webkit-transform: translate3d(x,y,z) scale3D(1,1,1.0)
    15. 15. Media Query
    16. 16. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
    17. 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. 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. 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. 20. Basics: JavaScript• Language of the web.• Some quirks: http://wtfjs.com
    21. 21. Startupdocument.addEventListener( ‘deviceready’, function() { alert(‘WINNING!’); }, false);
    22. 22. Clear as Mud
    23. 23. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS
    24. 24. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
    25. 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. 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. 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. 28. Partners / Contributors• Adobe• IBM• Sony Ericsson• Symbian• HP/Palm• RIM• Microsoft
    29. 29. Power Users• Alcatel Lucent• Sabre• Deutsche Telecom• Ars Technica• WikiMedia
    30. 30. PhoneGap APIs• Sensors• Data• Events http://docs.phonegap.com
    31. 31. Sensors• GPS• Accelerometer• Compass• Network• Camera
    32. 32. Data• Contacts• Media• File system• Notifications
    33. 33. Events• onload (duh)• ondeviceready (this is special)• onnativeready• onresume• onpause
    34. 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. 35. Libraries• DOM• Testing• Style / GUI• Persistence
    36. 36. Plugins
    37. 37. Facebook PhoneGap PluginTake your mobile Facebook app and make it native Take advantage of PhoneGap APIs Distribute in app stores & go offline
    38. 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. 39. Demo
    40. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×