This is an all day course focused on building good PhoneGap applications. This is not a class for newbies or those wanting to learn programming. It is intended for those who have some programming experience and some knowledge of JavaScript or other curly brace language. This class is hands-on and focused on development. You will write code, not watch slides.
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
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
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
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
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