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

$ npm install -g cordova

$ cordova create ./mydemo com.mydemo MyDemo

$ cd mydemo

$ cordova platform add android

$ cordova run android

Java-like package

name

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”