Upload
troy-miles
View
1.523
Download
2
Embed Size (px)
DESCRIPTION
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.
Citation preview
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