PhoneGap in a Day
Upcoming SlideShare
Loading in...5

PhoneGap in a Day



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 ...

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.



Total Views
Views on SlideShare
Embed Views



6 Embeds 21 9 4 4 2 1 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

PhoneGap in a Day PhoneGap in a Day Presentation Transcript

  • PhoneGap in a Daywith Troy Miles aka @therockncoderMonday, June 3, 13
  • Free mobile tutorials with sourcecode @ therockncoder.blogspot.comMonday, June 3, 13
  • Want more? Follow me, new tutorials areannounced on Twitter first:@therockncoderMonday, June 3, 13
  • Source code for my tutorials hosted onGitHub @, June 3, 13
  • Check out my, June 3, 13
  • Schedule• 8:00 Morning Session 1• 10:00 Break• 10:15 Morning Session 2• 12:00 Lunch• 12:45 Afternoon Session 1Monday, June 3, 13
  • Schedule• 2:45 Break• 3:00 Afternoon Session 2• 4:45 Wrap UpMonday, June 3, 13
  • Where Is?• Water• RestroomsMonday, June 3, 13
  • Agenda• Setup• Introduction to PhoneGap• JavaScript Best Practices• Using Libraries• Ajax• Location & MapsMonday, June 3, 13
  • Agenda• Media• Storage• User Interface• Icons & Splash Pages• Performance TipsMonday, June 3, 13
  • How We Will Progress• Show a Few Slides• Show Some Code• LetYou Have a Turn• Back to SlidesMonday, June 3, 13
  • The Apps• Calculator• Camera• Compass• Coffee + Coffee• Touch PaintMonday, June 3, 13
  • Setup Android• Java SE 6u45 (not 7)• Android Developer Tools• Intellij IDEA 12 CEMonday, June 3, 13
  • Build an Android AppMonday, June 3, 13
  • Setup PhoneGap• Apache Ant 1.9.1• PhoneGap 2.7.0Monday, June 3, 13
  • Build a PhoneGap AppMonday, June 3, 13
  • Android Alphabet Soup• ADB - Android Debug Bridge• ADT - Android Developer Tools• AVD Manager - AndroidVirtual Device• DDMS - Dalvik Debug Monitor Server• SDK Manager - Software Development KitMonday, June 3, 13
  • PhoneGapMonday, 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 implementationMonday, June 3, 13
  • Other CordovaImplementations• 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 anmobile app• Rather HTML or HTML5, more like HTML6Monday, June 3, 13
  • How it Works?• Most device APIs include an internal webbrowser• PhoneGap uses this internal web browseras its app canvas• It adds more features to the navigator viasoftware which bridges the gap betweenthe internal web and the deviceMonday, 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 anew version right awayMonday, June 3, 13
  • JavaScript BestPractices• Avoid sloppy JavaScript• Avoid the Global Space• Encapsulate Code into Objects• Use Design PatternsMonday, June 3, 13
  • Avoid Sloppy JavaScript• JavaScript is a Harsh Mistress• Always use ‘===’ & ‘!==’• Code in JavaScript not C#, Java, Ruby, etc.• Use JSLint or JSHintMonday, June 3, 13
  • Avoid the Global Space• Minimize Use of GlobalVariables• Use Namespacing• Use Anonymous/Immediate FunctionsWhen AppropriateMonday, June 3, 13
  • Use Design Patterns• Singleton• Chaining•Revealing Module Structure• + many moreMonday, June 3, 13
  • JavaScript Tips• Functions• Objects• EventsMonday, June 3, 13
  • Functions• Functions are first class type• Like other types they can be passed andassigned freely• Anonymous functions are used frequentlyMonday, June 3, 13
  • Objects• Thing of JavaScript Objects like Key/Valuedictionary• The Key can be anything when wrapped inquotes• TheValue can be any type including afunctionMonday, June 3, 13
  • Events• Events allow for excellent separation ofconcerns• You can listen for system events or• Trigger and respond to your own• Many external libraries will communicatevia eventsMonday, June 3, 13
  • Libraries• jQuery - DOM manipulation / Ajax• jQuery Mobile - Mobile UI• zepto.js - lightweighter substitute forjQuery• underscore.js - utility belt library• backbone.js - client side frameworkMonday, June 3, 13
  • PGDCalculator• Single Page App• Uses jQuery Mobile for UI• Hooks jQuery Mobile EventsMonday, June 3, 13
  • PGDCalculator• HTML/jQuery Mobile UI• My JQM Kernel to Dispatch Events• JavaScript LogicMonday, June 3, 13
  • Your Turn• Open Project PCDCalculatorEx• The UI is complete• The Logic is complete• Bind the two together, aka make thebuttons work• Hint: Compare to the working versionMonday, June 3, 13
  • PGDCompass• Even simpler than the Calculator• Uses navigator.compass to supply rotationvalue for a CSS3 object• Only works on devices which have acompassMonday, June 3, 13
  • PGDCoffee• Fairly Complicated App• 5 Main Sections: Listings, Map, Settings,Credits, and Details• Use jQuery Mobile for UIMonday, June 3, 13
  • Ajax• We rely on jQuery for Ajax• We also implement pull to refresh usingiScroll4 library and custom code• location servicesMonday, June 3, 13
  • Location• Use HTML5 location services• Give user a way to use app with locationturned offMonday, June 3, 13
  • Maps• Most Web Mapping Kits will work• PGDCoffee using Google MapsV3 for Mapsand reverse geocoding• Reverse geocoding turns some part of anaddress into a lat/longMonday, June 3, 13
  • Media & Camera• PhoneGap allows for the recording ofaudio and video. Plus the taking of picturesMonday, June 3, 13
  • PCDCamera• Uses the device’s default camera• Places picture into a canvas• Dynamically sizes the canvasMonday, 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 likeMonday, June 3, 13
  • Storage Options• Memory• Local Storage• SQLiteMonday, June 3, 13
  • Links••••, June 3, 13
  • The Rock n Coder••••, June 3, 13
  • What We Learned• What PhoneGap is and isn’t• Some JavaScript Best Practice• How to go from web to appMonday, June 3, 13