PhoneGap in a Day
-
Upload
troy-miles -
Category
Technology
-
view
1.522 -
download
2
description
Transcript of PhoneGap in a Day
![Page 1: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/1.jpg)
PhoneGap in a Daywith Troy Miles aka @therockncoder
Monday, June 3, 13
![Page 2: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/2.jpg)
Free mobile tutorials with source code @ therockncoder.blogspot.com
Monday, June 3, 13
![Page 3: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/3.jpg)
Want more? Follow me, new tutorials are announced on Twitter first:
@therockncoder
Monday, June 3, 13
![Page 4: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/4.jpg)
Source code for my tutorials hosted on GitHub @
https://github.com/Rockncoder
Monday, June 3, 13
![Page 5: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/5.jpg)
Check out my videos:www.youtube.com/rockncoder
Monday, June 3, 13
![Page 6: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/6.jpg)
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
![Page 7: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/7.jpg)
Schedule
• 2:45 Break
• 3:00 Afternoon Session 2
• 4:45 Wrap Up
Monday, June 3, 13
![Page 8: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/8.jpg)
Where Is?
• Water
• Restrooms
Monday, June 3, 13
![Page 9: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/9.jpg)
Agenda
• Setup
• Introduction to PhoneGap
• JavaScript Best Practices
• Using Libraries
• Ajax
• Location & Maps
Monday, June 3, 13
![Page 10: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/10.jpg)
Agenda
• Media
• Storage
• User Interface
• Icons & Splash Pages
• Performance Tips
Monday, June 3, 13
![Page 11: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/11.jpg)
How We Will Progress
• Show a Few Slides
• Show Some Code
• Let You Have a Turn
• Back to Slides
Monday, June 3, 13
![Page 12: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/12.jpg)
The Apps
• Calculator
• Camera
• Compass
• Coffee + Coffee
• Touch Paint
Monday, June 3, 13
![Page 13: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/13.jpg)
Setup Android
• Java SE 6u45 (not 7)
• Android Developer Tools
• Intellij IDEA 12 CE
Monday, June 3, 13
![Page 14: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/14.jpg)
Build an Android App
Monday, June 3, 13
![Page 15: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/15.jpg)
Setup PhoneGap
• Apache Ant 1.9.1
• PhoneGap 2.7.0
Monday, June 3, 13
![Page 16: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/16.jpg)
Build a PhoneGap App
Monday, June 3, 13
![Page 17: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/17.jpg)
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
![Page 18: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/18.jpg)
PhoneGap
Monday, June 3, 13
![Page 19: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/19.jpg)
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
![Page 20: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/20.jpg)
Other Cordova Implementations
• appMobi
• Convertigo
• Icenium (Telerik)
• ViziApps
• Worklight (IBM)
Monday, June 3, 13
![Page 21: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/21.jpg)
Intro to PhoneGap
• What the heck is it?
• How it works?
Monday, June 3, 13
![Page 22: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/22.jpg)
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
![Page 23: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/23.jpg)
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
![Page 24: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/24.jpg)
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
![Page 25: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/25.jpg)
JavaScript Best Practices
• Avoid sloppy JavaScript
• Avoid the Global Space
• Encapsulate Code into Objects
• Use Design Patterns
Monday, June 3, 13
![Page 26: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/26.jpg)
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
![Page 27: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/27.jpg)
Avoid the Global Space
• Minimize Use of Global Variables
• Use Namespacing
• Use Anonymous/Immediate Functions When Appropriate
Monday, June 3, 13
![Page 28: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/28.jpg)
Use Design Patterns
• Singleton
• Chaining
•Revealing Module Structure
• + many more
Monday, June 3, 13
![Page 29: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/29.jpg)
JavaScript Tips
• Functions
• Objects
• Events
Monday, June 3, 13
![Page 30: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/30.jpg)
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
![Page 31: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/31.jpg)
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
![Page 32: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/32.jpg)
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
![Page 33: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/33.jpg)
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
![Page 34: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/34.jpg)
PGDCalculator
• Single Page App
• Uses jQuery Mobile for UI
• Hooks jQuery Mobile Events
Monday, June 3, 13
![Page 35: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/35.jpg)
PGDCalculator
• HTML/jQuery Mobile UI
• My JQM Kernel to Dispatch Events
• JavaScript Logic
Monday, June 3, 13
![Page 36: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/36.jpg)
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
![Page 37: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/37.jpg)
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
![Page 38: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/38.jpg)
PGDCoffee
• Fairly Complicated App
• 5 Main Sections: Listings, Map, Settings, Credits, and Details
• Use jQuery Mobile for UI
Monday, June 3, 13
![Page 39: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/39.jpg)
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
![Page 40: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/40.jpg)
Location
• Use HTML5 location services
• Give user a way to use app with location turned off
Monday, June 3, 13
![Page 41: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/41.jpg)
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
![Page 42: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/42.jpg)
Media & Camera
• PhoneGap allows for the recording of audio and video. Plus the taking of pictures
Monday, June 3, 13
![Page 43: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/43.jpg)
PCDCamera
• Uses the device’s default camera
• Places picture into a canvas
• Dynamically sizes the canvas
Monday, June 3, 13
![Page 44: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/44.jpg)
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
![Page 45: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/45.jpg)
Storage Options
• Memory
• Local Storage
• SQLite
Monday, June 3, 13
![Page 46: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/46.jpg)
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
![Page 47: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/47.jpg)
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
![Page 48: PhoneGap in a Day](https://reader038.fdocuments.in/reader038/viewer/2022103016/554bbbd9b4c9053a298b4dbb/html5/thumbnails/48.jpg)
What We Learned
• What PhoneGap is and isn’t
• Some JavaScript Best Practice
• How to go from web to app
Monday, June 3, 13