PhoneGap (aka Cordova) is a cross-platform framework for developing mobile apps using standard web development tools like HTML, CSS, and JavaScript. Join Troy Miles to learn how to create mobile apps with PhoneGap by building a simple but full-featured app during this hands-on class. Troy explores PhoneGap’s important capabilities, including GPS, camera, and audio recordings. Because JavaScript has a reputation as a somewhat difficult language, Troy teaches techniques for keeping your code robust and clean. To give your app the appropriate look and feel for the device on which it is running, the class will use the open source Chocolate Chip UI framework for testing. Troy shares ways to debug the code by running it as a web app, using browser development tools, or as a phone app, using the Chrome browser’s remote debugging features. Leave with the basics you need to start building your own cross-platform mobile apps.
2. Troy Miles
Over 35 years of programming experience
Blog: http://therockncoder.blogspot.com/
Twitter: @therockncoder
Email: rockncoder@gmail.com
GitHub: https://github.com/Rockncoder
3. Agenda
A Quick & Dirty JavaScript Overview
What is PhoneGap?
Building PhoneGap Apps
Debugging
Plugins
6. The End of HTML5 as a
Platform?
Facebook mobile apps on iOS and Android were
originally using HTML5
Users complained about speed and style
In 2012, Facebook switch to native apps
The pundits announced the end of HTML5 as a mobile
platform and the end of PhoneGap too
8. Avoid Sloppy JavaScript
Use “strict” mode
Always use ‘===’ & ‘!==’
Code in JavaScript not C#, Java, Ruby, etc.
Use JSLint or JSHint
9. Avoid the Global Space
Minimize use of global variables
Use Name-spacing
Use anonymous/immediate functions when appropriate
10. Functions
Functions are a first class type
Like other types they can be passed and assigned
freely
Anonymous functions are used frequently
11. Objects
Objects are some what like Key/Value dictionaries in
other languages
The Key can be anything when wrapped in quotes
The Value can be any type including a function
12. 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
13. Promises
A rather new JavaScript concept
Used to handle asynchronous callbacks
The app uses jQuery’s version
14. PhoneGap/Cordova History
2009: 1st developed at an
iPhoneDevCamp event
2009: Developers form a
company, Nitobi
2011: Adobe acquires Nitobi
2011: Adobe open sources
PhoneGap project to Apache
2012: Apache gives the
project the name Cordova
17. Development Platforms
OS X
All except Windows Phone / Windows
Windows
All except iOS
Linux
All except Windows Phone and iOS
18. PhoneGap
Current release is 4.2
Node.js is a hard requirement since version 3.0
It is all command line instead of IDE
Recommend not upgrading your app to a new version
right away
19. How PhoneGap 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
21. Node Package Manager
npm is very popular in the open source community
cross-platform
coding standard
storage site + discovery mechanism
delivery mechanism
used by phonegap/cordova
23. Hello, world
cordova create hello com.rnc.hello Hello
cd hello
cordova platform add browser --usegit
cordova run browser
24. hooks
Allows you to execute code at defined points in the
Cordova application build process
Example minify your JavaScript
25. platforms
One directory for each device framework you support
Because of the complexity involved in getting individual
machines setup, we will demonstrate this but not
actually work through it as an excercise
26. plugins
Modular pieces of native code which give your app increased
functionality
Familiar Plugins
console
device
dialogs
inappbrowser
27. www
Your app's root directory
laid out as a set of sub-directories
css
img
js
index.html
28. config.xml
Defines a widget
Must be in root directory
Actually defined by the W3C
http://www.w3.org/TR/widgets/#configuration-
document-0
30. Adding a plugin
Two important pieces of information
how to install a plugin
how to make it work
http://plugins.cordova.io/#/package/
org.apache.cordova.camera
cordova plugin add org.apache.cordova.camera
31. navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL});
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;}
function onFail(message) {
alert('Failed because: ' + message);}
32. Debugging
Using the browser while developing
Chrome remote for Android devices
Safari remote for iOS devices
Windows Phone winre
33. UI Options
Roll Your Own
jQuery / jQuery UI
jQuery Mobile
Bootstrap
Chocolate Chip UI
35. Underscore
A utility belt library for JavaScript
Excellent at manipulating objects and collections
About 6kb minified and compressed
Required for Backbone apps
36. Backbone
A MV* Framework
Note: There are no controllers hence no ‘C’
More lightweight than Angular, Ember, or Knockout
Requires jQuery and Underscore
37. Models
The base object in Backbone
Essentially a wrapper around a JavaScript object
Use get and set command to access properties
38. Collections
A collection of models
Can associate a URL with a collection
Backbone native support of RESTful API
Can also use third party API
40. The Router
The router controls application state
In a web site it would control what is in the URL bar
PhoneGap apps may lack a visible URL bar, but it still
exists
41. Templates
Templates render markup to the DOM in a cookie
cutter fashion
Especially good for render collections to a view
Make it easier to create single page apps
42. Chocolate Chip UI
A UI Framework akin to jQuery Mobile or even
Bootstrap
Does a great job of impersonating iOS, Android, and
Windows Phone 8
43. Lists
You will work a lot with lists in mobile apps
In CC, lists will have the look and feel of the device
Lists typically will need a bit of code to make them fully
functional
44. Lists
Lists have classes which enhance their looks
Classes exists to indicate:
Navigation to another page
Navigation to a details page
45. Widgets
CC uses a combo of its own stuff with HTML5
For example the Range Slider is simply an HTML5
input type=range
But a switch is a combination of HTML, CSS3, and
JavaScript
46. Look & Feel
Switching the look and feel is easy, just change CSS
files
PhoneGap version 3+ automates the process
48. Look & Feel
PhoneGap’s merges folder
one directory for each supported device
Its contents will be copied and overwrite during the
build command
Name all of the css files identically
Place in each appropriate folder
51. merges directory
Must be created by hand
named after support platforms
contents of the merge directory will be written to the
www during build
files/directories with the same name will be overwritten