1. PhoneGap
Facebook Hack

2. What is PhoneGap?

3. 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!

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: HTML
Basic HTML5 file

9. Setup the Viewport
<meta name="viewport" content="width=dev
ice-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no;" />

10. Media Query

11. Media Query
<link rel="stylesheet" media="all and (max-device-
width: 480px)" href="iphone.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">

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. 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">

15. Startup
document.addEventListener(
‘deviceready’,
function() {
alert(‘WINNING!’);
},
false);

16. Clear as Mud

17. Clear as Mud
• WRITE IN HTML, JAVASCRIPT AND CSS

18. Clear as Mud
• WRITE IN HTML, JAVASCRIPT AND CSS
• PRODUCE A NATIVE APP PACKAGED
PACKAGED ON A PER PLATFORM BASIS

19. Clear as Mud
• WRITE IN HTML, JAVASCRIPT AND CSS
• PRODUCE A NATIVE APP PACKAGED
PACKAGED ON A PER PLATFORM BASIS
• NO CROSS COMPILING MAGIC

20. Partners / Contributors
• Adobe
• IBM
• Sony Ericsson
• Symbian
• HP/Palm
• RIM
• Microsoft

21. PhoneGap APIs
• Sensors
• Data
• Events
http://docs.phonegap.com

22. Sensors
• GPS
• Accelerometer
• Compass
• Network
• Camera

23. Data
• Contacts
• Media
• File system
• Notifications

24. Events
• onload (duh)
• ondeviceready (this is special)
• onnativeready
• onresume
• onpause

25. Camera API Demo
navigator.camera.getPicture( success, fail,
options);

26. 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 =(

27. Libraries
• DOM
• Testing
• Style / GUI
• Persistence

28. Plugins

29. Facebook PhoneGap
Plugin
Take your mobile Facebook app and make it native
Take advantage of PhoneGap APIs
Distribute in app stores & go offline

30. 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

31. Initialize Plugin
Fb.init({ appId:”Your appId”,
nativeInterface: PG.FB,
useCachedDialogs: false});

32. Demo

33. More Fb Plugin Info
Source Code:
github.com/davejohnson/phonegap-plugin-facebook-connect
iOS Install video:
youtube.com/phonegap
Android Video Coming Soon!

34. Steve Gill
PhoneGap Champ
Facebook.com/stevengill97
@SteveSGill
steveng@adobe.com

35. 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