Your SlideShare is downloading. ×
Phonegap facebook plugin - Seoul & Tokyo
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Phonegap facebook plugin - Seoul & Tokyo

2,482
views

Published on

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,482
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
55
Comments
0
Likes
4
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
  • 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
  • Transcript

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

    ×