Intro to PhoneGap
Ramesh Nair / hiddentao
Oct 2014 @ Taipei Javascript Enthusiasts

What is PhoneGap?
• Build mobile apps using HTML5, Javascript and CSS
• Created by Nitobi in 2008
• Acquired by Adobe in 2011
• Code also given to Apache to create “Cordova”
• Today 2 projects: Phonegap and Cordova
• If Cordova = Blink/Webkit then Phonegap = Chrome
• PhoneGap adds extra features to Cordova (e.g. cloud build)
• http://cordova.apache.org/
• http://phonegap.com/

Single codebase
Multiple platforms
img: http://adrocknaphobia.github.io/preso-future-of-mobile/

img: http://chelramsey.com/phonegap-vs-native-builds-a-12-month-review/

How does it work?
HTML, Javascript, CSS
PhoneGap Javascript API
Web browser / UIWebView
PhoneGap Native Library
Native Platform
Mobile app

Getting started
Java-like
package
name
$ npm install -g cordova
$ cordova create ./mydemo com.mydemo MyDemo
$ cd mydemo
$ cordova platform add android
$ cordova run android
Assume
iOS/Android
SDK is
setup
Pre-requisites: Android SDK, ANDROID_HOME, ant

Folder layout
config.xml - used to generate iOS/Android config
hooks/ - actions to run at various points during the build
platforms/ - apps for each platform, same as normal apps
plugins/ - cordova/phonegap plugins which add functionality
www/ - where your HTML, JS and CSS live
-> platforms/android/assets/www
-> platforms/ios/www
-> …

Live-reload = rapid feedback
• “The PhoneGap Developer App”
• http://app.phonegap.com/
• Available from iOS and Android app stores
• phonegap serve
• npm install -g phonegap
• Watches www/ folder for changes, tells page to reload itself
• You can test this in a normal browser too
• There is also cordova serve but not sure what it’s supposed to do

Plugins
• Allow you to interact with the rest of your device (beyond the web
browser) through Javascript
• Plugins usually have 2 components:
1. Platform-specific native layer (Android, iOS, etc)
2. Javascript API (used by your app)
• All standard device features (e.g. contacts, compass, etc) accessed
through plugins
• Can also interact with other apps (e.g. Facebook app, Google Maps)
• Plugin registry: http://plugins.cordova.io/

Adding a plugin
• Geolocation plugin (lat/long)
• http://plugins.cordova.io/#/package/
org.apache.cordova.geolocation
• We use navigator.geolocation.watchPosition to get
the latitude/longitude co-ordinates.
$ cordova plugin add org.apache.cordova.geolocation
$ cordova run android …OR… phonegap serve

Live-reload issues
• PhoneGap Developer App comes with basic plugins -
geolocation, camera, etc.
• But what if we want to use a plugin it doesn’t have, e.g.
Google Maps or our own custom plugin?
• We can’t use live-reload with phonegap serve…
• …so we will build the live reload mechanism ourselves!

Live-reload issues
• PhoneGap Developer App comes with basic plugins -
geolocation, camera, etc.
• But what if we want to use a plugin it doesn’t have, e.g.
Google Maps or our own custom plugin?
• We can’t use live-reload with phonegap serve…
• …so we will build the live reload mechanism ourselves!

Use gulp for live-reload
• gulp-server-livereload - watch for changes and
send reload signal
• gulp-replace-task - auto-insert live reload
host:port into HTML page
• Demo app
• https://github.com/hiddentao/phonegap-demo-app

Useful links
• Ionic framework - http://ionicframework.com
• Like Twitter Bootstrap but for hybrid apps.
• Built on Angular.JS
• Meteor - http://meteor.com/
• Isomorphic Javascript framework (built on node.js)
• Lets you push code update to clients on-the-fly
• PhoneGap build - https://build.phonegap.com/
• Build and packaging done on a cloud server, saves you time and effort
• Trigger.io - https://trigger.io/
• Like PhoneGap but is proprietary and costs money
• Easier to use than PhoneGap, better plugin integration, etc.

Any Questions?
“PhoneGap is making the world a
better place through constructing
elegant hierarchies for maximum
code reuse and extensibility”