PhoneGap talk from Singapore at Facebook mobile world hack tour

1. PhoneGap
Facebook Hack

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

3. What is PhoneGap?

4. 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++

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

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

7. Write once debug everywhere

9. W3C Device APIs and
Policies Working Group
(DAP)

10. PhoneGap
&
Apache Cordova

11. How do you write
PhoneGap apps?

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

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

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

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

16. Media Query

17. Media Query
<link rel="stylesheet" media="all and (max-device-
width: 480px)" href="iphone.css">

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

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. 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. Basics: JavaScript
• Language of the web.
• Some quirks: http://wtfjs.com

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

24. Clear as Mud

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

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

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

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

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
• NO FAIRY DUST / SPARKLES
• NO UNICORNS GET HURT

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

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

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

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

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

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

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

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

38. Plugins

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

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

41. Demo

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

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