PhoneGap in a Day
4 likes2,528 views
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.
PhoneGap in a Day
- 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