1. PhoneGap
Facebook Hack

2. Steve Gill
PhoneGap Champ
facebook.com/stevengill97
@SteveSGill
steveng@adobe.com

3. What is PhoneGap?

4. PhoneGap

5. PhoneGap
&
Apache Cordova

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

8. Write once debug everywhere

10. Supported Platforms
• iOS (iPad, iPod Touch, iPhone)
• Android (Everything)
• BlackBerry (Smartphones, PlayBook)
• WebOS
• Windows Phone
• Symbian
• Bada

11. Lay of the Land
iOS .............................. Objective C
Android ...................... Java ‘Harmony’ / C++
BlackBerry ................. Java J2ME / C++ (maybe?)
webOS ........................ HTML, CSS and JS
Windows Phone 7 ... .NET
Bada ............................. C++

12. How do you write
PhoneGap apps?

13. Basics: HTML
<button>I’m native codes!</button>

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

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

16. CSS3 Animations
-webkit-transform:
translate3d(x,y,z) scale3D(1,1,1.0)

17. Media Query

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

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

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

22. Basics: JavaScript
• Language of the web.
• Scheme with a C syntax.
• Some quirks: http://wtfjs.com

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

24. Performance
• Use those CSS transforms
• Don’t set style properties inside a loop
• Don’t do what you do on the web

26. Clear as Mud

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

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

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

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

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

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

33. Power Users
• Alcatel Lucent
• Sabre
• Deutsche Telecom
• Ars Technica
• WikiMedia

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

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

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

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

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

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

40. Plugins

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

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

43. Demo

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

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