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