The document outlines a PhoneGap workshop led by Troy Miles, featuring tutorials on mobile app development with source code available on GitHub and blog. It includes detailed schedules, topics covered such as JavaScript best practices, AJAX, and media handling, as well as practical applications and projects. Participants will gain insights into PhoneGap's functionality, its history, and best practices for developing mobile applications.

1. PhoneGap in a Day
with Troy Miles aka @therockncoder
Monday, June 3, 13

2. Free mobile tutorials with source
code @ therockncoder.blogspot.com
Monday, June 3, 13

3. Want more? Follow me, new tutorials are
announced on Twitter first:
@therockncoder
Monday, June 3, 13

4. Source code for my tutorials hosted on
GitHub @
https://github.com/Rockncoder
Monday, June 3, 13

5. Check out my videos:
www.youtube.com/rockncoder
Monday, June 3, 13

6. Schedule
• 8:00 Morning Session 1
• 10:00 Break
• 10:15 Morning Session 2
• 12:00 Lunch
• 12:45 Afternoon Session 1
Monday, June 3, 13

7. Schedule
• 2:45 Break
• 3:00 Afternoon Session 2
• 4:45 Wrap Up
Monday, June 3, 13

8. Where Is?
• Water
• Restrooms
Monday, June 3, 13

9. Agenda
• Setup
• Introduction to PhoneGap
• JavaScript Best Practices
• Using Libraries
• Ajax
• Location & Maps
Monday, June 3, 13

10. Agenda
• Media
• Storage
• User Interface
• Icons & Splash Pages
• Performance Tips
Monday, June 3, 13

11. How We Will Progress
• Show a Few Slides
• Show Some Code
• LetYou Have a Turn
• Back to Slides
Monday, June 3, 13

12. The Apps
• Calculator
• Camera
• Compass
• Coffee + Coffee
• Touch Paint
Monday, June 3, 13

13. Setup Android
• Java SE 6u45 (not 7)
• Android Developer Tools
• Intellij IDEA 12 CE
Monday, June 3, 13

14. Build an Android App
Monday, June 3, 13

15. Setup PhoneGap
• Apache Ant 1.9.1
• PhoneGap 2.7.0
Monday, June 3, 13

16. Build a PhoneGap App
Monday, June 3, 13

17. Android Alphabet Soup
• ADB - Android Debug Bridge
• ADT - Android Developer Tools
• AVD Manager - AndroidVirtual Device
• DDMS - Dalvik Debug Monitor Server
• SDK Manager - Software Development Kit
Monday, June 3, 13

18. PhoneGap
Monday, June 3, 13

19. History
• Create by Nitobi in 2009 at an Apple Event
• Nitobi Acquired by Adobe
• Open Sourced as Apache Cordova
• PhoneGap is only one implementation
Monday, June 3, 13

20. Other Cordova
Implementations
• appMobi
• Convertigo
• Icenium (Telerik)
• ViziApps
• Worklight (IBM)
Monday, June 3, 13

21. Intro to PhoneGap
• What the heck is it?
• How it works?
Monday, June 3, 13

22. What the Heck is it?
• Think of it as a web site wrapped by an
mobile app
• Rather HTML or HTML5, more like HTML6
Monday, June 3, 13

23. How it Works?
• Most device APIs include an internal web
browser
• PhoneGap uses this internal web browser
as its app canvas
• It adds more features to the navigator via
software which bridges the gap between
the internal web and the device
Monday, June 3, 13

24. PhoneGap
• Current release is 2.7.0
• New release every few months
• Last few have been mainly bug fixes
• Recommend not upgrading your app to a
new version right away
Monday, June 3, 13

25. JavaScript Best
Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns
Monday, June 3, 13

26. Avoid Sloppy JavaScript
• JavaScript is a Harsh Mistress
• Always use ‘===’ & ‘!==’
• Code in JavaScript not C#, Java, Ruby, etc.
• Use JSLint or JSHint
Monday, June 3, 13

27. Avoid the Global Space
• Minimize Use of GlobalVariables
• Use Namespacing
• Use Anonymous/Immediate Functions
When Appropriate
Monday, June 3, 13

28. Use Design Patterns
• Singleton
• Chaining
•Revealing Module Structure
• + many more
Monday, June 3, 13

29. JavaScript Tips
• Functions
• Objects
• Events
Monday, June 3, 13

30. Functions
• Functions are first class type
• Like other types they can be passed and
assigned freely
• Anonymous functions are used frequently
Monday, June 3, 13

31. Objects
• Thing of JavaScript Objects like Key/Value
dictionary
• The Key can be anything when wrapped in
quotes
• TheValue can be any type including a
function
Monday, June 3, 13

32. Events
• Events allow for excellent separation of
concerns
• You can listen for system events or
• Trigger and respond to your own
• Many external libraries will communicate
via events
Monday, June 3, 13

33. Libraries
• jQuery - DOM manipulation / Ajax
• jQuery Mobile - Mobile UI
• zepto.js - lightweighter substitute for
jQuery
• underscore.js - utility belt library
• backbone.js - client side framework
Monday, June 3, 13

34. PGDCalculator
• Single Page App
• Uses jQuery Mobile for UI
• Hooks jQuery Mobile Events
Monday, June 3, 13

35. PGDCalculator
• HTML/jQuery Mobile UI
• My JQM Kernel to Dispatch Events
• JavaScript Logic
Monday, June 3, 13

36. Your Turn
• Open Project PCDCalculatorEx
• The UI is complete
• The Logic is complete
• Bind the two together, aka make the
buttons work
• Hint: Compare to the working version
Monday, June 3, 13

37. PGDCompass
• Even simpler than the Calculator
• Uses navigator.compass to supply rotation
value for a CSS3 object
• Only works on devices which have a
compass
Monday, June 3, 13

38. PGDCoffee
• Fairly Complicated App
• 5 Main Sections: Listings, Map, Settings,
Credits, and Details
• Use jQuery Mobile for UI
Monday, June 3, 13

39. Ajax
• We rely on jQuery for Ajax
• We also implement pull to refresh using
iScroll4 library and custom code
• CallsYP.com location services
Monday, June 3, 13

40. Location
• Use HTML5 location services
• Give user a way to use app with location
turned off
Monday, June 3, 13

41. Maps
• Most Web Mapping Kits will work
• PGDCoffee using Google MapsV3 for Maps
and reverse geocoding
• Reverse geocoding turns some part of an
address into a lat/long
Monday, June 3, 13

42. Media & Camera
• PhoneGap allows for the recording of
audio and video. Plus the taking of pictures
Monday, June 3, 13

43. PCDCamera
• Uses the device’s default camera
• Places picture into a canvas
• Dynamically sizes the canvas
Monday, June 3, 13

44. Your Turn
• Open Project PCDCamera
• Currently it can: take a pic
• Add functionality to the tweak button,
make it do anything you’d like
Monday, June 3, 13

45. Storage Options
• Memory
• Local Storage
• SQLite
Monday, June 3, 13

46. Links
• http://www.appmobi.com/
• http://www.convertigo.com/
• http://www-03.ibm.com/software/products/
us/en/worklight/
• http://www.viziapps.com/
Monday, June 3, 13

47. The Rock n Coder
• http://therockncoder.blogspot.com
• http://www.youtube.com/user/rockncoder
• https://github.com/Rockncoder
• http://www.slideshare.net/rockncoder
Monday, June 3, 13

48. What We Learned
• What PhoneGap is and isn’t
• Some JavaScript Best Practice
• How to go from web to app
Monday, June 3, 13