Download - PhoneGap in a Day
PhoneGap in a Daywith Troy Miles aka @therockncoder
Monday, June 3, 13
Free mobile tutorials with source code @ therockncoder.blogspot.com
Monday, June 3, 13
Want more? Follow me, new tutorials are announced on Twitter first:
@therockncoder
Monday, June 3, 13
Source code for my tutorials hosted on GitHub @
https://github.com/Rockncoder
Monday, June 3, 13
Check out my videos:www.youtube.com/rockncoder
Monday, June 3, 13
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
Schedule
• 2:45 Break
• 3:00 Afternoon Session 2
• 4:45 Wrap Up
Monday, June 3, 13
Where Is?
• Water
• Restrooms
Monday, June 3, 13
Agenda
• Setup
• Introduction to PhoneGap
• JavaScript Best Practices
• Using Libraries
• Ajax
• Location & Maps
Monday, June 3, 13
Agenda
• Media
• Storage
• User Interface
• Icons & Splash Pages
• Performance Tips
Monday, June 3, 13
How We Will Progress
• Show a Few Slides
• Show Some Code
• Let You Have a Turn
• Back to Slides
Monday, June 3, 13
The Apps
• Calculator
• Camera
• Compass
• Coffee + Coffee
• Touch Paint
Monday, June 3, 13
Setup Android
• Java SE 6u45 (not 7)
• Android Developer Tools
• Intellij IDEA 12 CE
Monday, June 3, 13
Build an Android App
Monday, June 3, 13
Setup PhoneGap
• Apache Ant 1.9.1
• PhoneGap 2.7.0
Monday, June 3, 13
Build a PhoneGap App
Monday, June 3, 13
Android Alphabet Soup
• ADB - Android Debug Bridge
• ADT - Android Developer Tools
• AVD Manager - Android Virtual Device
• DDMS - Dalvik Debug Monitor Server
• SDK Manager - Software Development Kit
Monday, June 3, 13
PhoneGap
Monday, June 3, 13
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
Other Cordova Implementations
• appMobi
• Convertigo
• Icenium (Telerik)
• ViziApps
• Worklight (IBM)
Monday, June 3, 13
Intro to PhoneGap
• What the heck is it?
• How it works?
Monday, June 3, 13
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
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
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
JavaScript Best Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns
Monday, June 3, 13
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
Avoid the Global Space
• Minimize Use of Global Variables
• Use Namespacing
• Use Anonymous/Immediate Functions When Appropriate
Monday, June 3, 13
Use Design Patterns
• Singleton
• Chaining
•Revealing Module Structure
• + many more
Monday, June 3, 13
JavaScript Tips
• Functions
• Objects
• Events
Monday, June 3, 13
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
Objects
• Thing of JavaScript Objects like Key/Value dictionary
• The Key can be anything when wrapped in quotes
• The Value can be any type including a function
Monday, June 3, 13
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
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
PGDCalculator
• Single Page App
• Uses jQuery Mobile for UI
• Hooks jQuery Mobile Events
Monday, June 3, 13
PGDCalculator
• HTML/jQuery Mobile UI
• My JQM Kernel to Dispatch Events
• JavaScript Logic
Monday, June 3, 13
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
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
PGDCoffee
• Fairly Complicated App
• 5 Main Sections: Listings, Map, Settings, Credits, and Details
• Use jQuery Mobile for UI
Monday, June 3, 13
Ajax
• We rely on jQuery for Ajax
• We also implement pull to refresh using iScroll4 library and custom code
• Calls YP.com location services
Monday, June 3, 13
Location
• Use HTML5 location services
• Give user a way to use app with location turned off
Monday, June 3, 13
Maps
• Most Web Mapping Kits will work
• PGDCoffee using Google Maps V3 for Maps and reverse geocoding
• Reverse geocoding turns some part of an address into a lat/long
Monday, June 3, 13
Media & Camera
• PhoneGap allows for the recording of audio and video. Plus the taking of pictures
Monday, June 3, 13
PCDCamera
• Uses the device’s default camera
• Places picture into a canvas
• Dynamically sizes the canvas
Monday, June 3, 13
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
Storage Options
• Memory
• Local Storage
• SQLite
Monday, June 3, 13
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
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
What We Learned
• What PhoneGap is and isn’t
• Some JavaScript Best Practice
• How to go from web to app
Monday, June 3, 13