The document outlines various aspects of using PhoneGap for developing mobile applications with HTML, CSS, and JavaScript. It discusses the features and device access capabilities, as well as the pros and cons of different testing methods like desktop browsers, web mobile, and emulators. It emphasizes the need for testing on real devices and provides links for further resources and community plugins.

1. @ChrisGriffith

2. These opinions and thoughts are my own, and
may or may not reflect the opinions of the
company that I work for.
Disclaimer

4. I need to make a mobile app…

6. Objective C Android
Flavored Java
BlackBerry
Flavored Java
C# XAML

7. Objective C Android
Flavored Java
C# XAMLBlackBerry
Flavored Java

9. PhoneGap

10. Genesis

11. Getting Started
cordova.apache.org

18. Application container that allows you to build
natively installed apps using HTML, CSS & JavaScript
What is PhoneGap?

19. What is PhoneGap
Your Code

20. What is PhoneGap
Your Code
Native Web View

21. What is PhoneGap
Your Code
Native Web View
Native APIs

22. What is PhoneGap
Your Code
Native Web View
Native APIs
Native App - .apk, .ipa, etc

23. What platforms support PhoneGap?

24. Since it is HTML, CSS & JSS, can I use existing
tools/frameworks?

25. Caution…
PhoneGap uses the NATIVE browser on the
device to render the HTML/CSS/JS
Keep that in mind, as that can affect the
experience

26. Device Access

27. • Accelerometer - when the device moves
• Camera - pictures of your cat
• Capture - audio, video, stills of your cat
• Compass - for when you're lost
• Connection - type of connection
• Contacts - find and create new friends
Features

28. • Device - device and OS version metadata
• Events - various app/hardware related
events
• File - native file system access (+ upload)
• Geolocation - for when you're lost
• Globalization - date/number/currency
formatting
Features

29. • Media - related to audio playback
(supports record as well)
• Notification - visual, audible, and tactile
notifications
• Splashscreen - for your splash screen
needs
• Storage - Mini database
Features

30. Beyond the mobile web
PhoneGap is extensible with a “native plugin”
model that enables you to write your own
native logic to access via JavaScript.
There are lots of open source plugins at
https://github.com/phonegap/phonegap-
plugins
Learn more at
http://wiki.phonegap.com/w/page/36752779
/ PhoneGap%20Plugins

31. PhoneGap Community (some…)

32. Building it
phonegap.com/start

33. Building it
build.phonegap.com

35. ConfiGAP
configap.com

36. Building it
<Demo>

37. • Desktop Browser
• Mobile via Web
• Ripple Emulator
• Local SDK to Simulator/Device
REAL WORLD BUILDING

38. • Pro: Super Fast
• Pro: No setup
• Pro: Debugging Rocks
• Con: UI isn't right
• Con: UX isn't right
• Con: Features missing
• Con: Security restrictions
DESKTOP BROWSER

39. • Pro: Kinda Fast
• Pro: Minimal setup
• Pro: UI and UX testing
• Con: Features missing
• Con: Security restrictions
• Con: Debugging (kinda) sucks
MOBILE VIA WEB

40. • Pro: Fast
• Pro: Similar UI
• Pro: Free
• Pro: Security restrictions gone
• Con: Doesn't support 100% of the PhoneGap
APIs
• Con: Still not on the device
RIPPLE EMULATOR

41. • Go to the Chrome Web Store:
https://chrome.google.com/webstore/category/
home
• Search for "ripple"
• Click Extensions
TO INSTALL

43. • Pro: The Real Deal
• Con: Slow(ish)
• Con: Not Free
• Con: Debugging can suck
TO BE CLEAR:
YOU MUST ALWAYS TEST ON A REAL DEVICE
LOCAL SDK TO SIMULATOR/DEVICE

44. Hydration

46. Now go build something!

47. Thanks!
chris.griffith@gmail.com
@chrisgriffith
http://chrisgriffith.wordpress.com/