PhoneGapFacebook Hack
What is PhoneGap?
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
How do you write PhoneGap apps?
Basics: HTMLBasic HTML5 file
Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=n...
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...
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...
Partners / Contributors•   Adobe•   IBM•   Sony Ericsson•   Symbian•   HP/Palm•   RIM•   Microsoft
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
Camera API Demonavigator.camera.getPicture( success, fail,               options);
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...
Initialize PluginFb.init({ appId:”Your appId”,   nativeInterface: PG.FB, useCachedDialogs: false});
Demo
More Fb Plugin Info                      Source Code:github.com/davejohnson/phonegap-plugin-facebook-connect              ...
Steve Gill    PhoneGap ChampFacebook.com/stevengill97       @SteveSGill   steveng@adobe.com
project resources                    phonegap.com                    docs.phonegap.com                    wiki.phonegap.co...
Phonegap facebook plugin - Seoul & Tokyo
Upcoming SlideShare
Loading in...5
×

Phonegap facebook plugin - Seoul & Tokyo

2,543

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,543
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \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
  • We achieve cross platform development through neither magic nor the force, but through HTML, JavaScript and CSS.\n
  • \n
  • Bring it all together\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • SSO, Dialogs, etc\n
  • \n
  • \n
  • \n
  • Always wanted to see how this picture looked on the big screen\n
  • \n
  • Phonegap facebook plugin - Seoul & Tokyo

    1. 1. PhoneGapFacebook Hack
    2. 2. What is PhoneGap?
    3. 3. 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!
    4. 4. Supported Platforms• iOS (iPad, iPod Touch, iPhone)• Android (Everything)• BlackBerry (Smartphones, PlayBook)• WebOS• Windows Phone• Symbian• Bada
    5. 5. Write once debug everywhere
    6. 6. How do you write PhoneGap apps?
    7. 7. Basics: HTMLBasic HTML5 file
    8. 8. Setup the Viewport<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    9. 9. Media Query
    10. 10. Media Query<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
    11. 11. 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">
    12. 12. 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">
    13. 13. 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">
    14. 14. Startupdocument.addEventListener( ‘deviceready’, function() { alert(‘WINNING!’); }, false);
    15. 15. Clear as Mud
    16. 16. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS
    17. 17. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS
    18. 18. Clear as Mud• WRITE IN HTML, JAVASCRIPT AND CSS• PRODUCE A NATIVE APP PACKAGED PACKAGED ON A PER PLATFORM BASIS• NO CROSS COMPILING MAGIC
    19. 19. Partners / Contributors• Adobe• IBM• Sony Ericsson• Symbian• HP/Palm• RIM• Microsoft
    20. 20. PhoneGap APIs• Sensors• Data• Events http://docs.phonegap.com
    21. 21. Sensors• GPS• Accelerometer• Compass• Network• Camera
    22. 22. Data• Contacts• Media• File system• Notifications
    23. 23. Events• onload (duh)• ondeviceready (this is special)• onnativeready• onresume• onpause
    24. 24. Camera API Demonavigator.camera.getPicture( success, fail, options);
    25. 25. 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 =(
    26. 26. Libraries• DOM• Testing• Style / GUI• Persistence
    27. 27. Plugins
    28. 28. Facebook PhoneGap PluginTake your mobile Facebook app and make it native Take advantage of PhoneGap APIs Distribute in app stores & go offline
    29. 29. How the Fb Plugin WorksAdds hooks into Facebook JS SDK to call the plugin Maps some FB JS calls to native FB iOS SDK
    30. 30. Initialize PluginFb.init({ appId:”Your appId”, nativeInterface: PG.FB, useCachedDialogs: false});
    31. 31. Demo
    32. 32. More Fb Plugin Info Source Code:github.com/davejohnson/phonegap-plugin-facebook-connect iOS Install video: youtube.com/phonegap Android Video Coming Soon!
    33. 33. Steve Gill PhoneGap ChampFacebook.com/stevengill97 @SteveSGill steveng@adobe.com
    34. 34. 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.

    ×