Triangle Open Data Day 2014

Hybrid Apps with PhoneGap/Apache Cordova

Created by Carlos Santana / @csantanapr

Carlos Santana

"musician" : false,
"company": "IBM",
"careers" : [
    "Server Engineer",
    "Mobile Developer",
    "Open Source Committer",
    "MobileFirst Architect"
"dependencies": {
    "Family":   "~1.0",
    "Gadgets":  "~0.1",
    "Software": "~0.2"
"ethnicity": "geek",
"languages": ["spanish","english","javascript"],
"loves what it does": true,
"In 5 years": "function () { [native code] }"
“So you want to build a native app?”

More Platforms. More Problems.

Why are we still coding for multiple platforms?

Native Development

  • Proficiency in each platform required
  • Entirely separate code bases
  • Timely & expensive development
“Is there an alternative?”

Hybrid Apps!

  • HTML5 that acts like native
  • Web wrapped in native layer
  • Direct access to native APIs
  • Cordova/Phonegap
  • Familiar web dev environment

It's Not 2007 Anymore

Mobile devices have rapidly improved!

Web Technologies You Already Know and Love

(You'll feel right at home)

Apacahe Cordova/PhoneGap

Platform native mobile Apps using HTML, CSS and JavaScript cordova.io

  • New version 3.x CLI based using NodeJS
  • Cordova Project Directory
    • Focus on Cross Platform Web Development
  • Platforms:
    • Android, iOS, BB10, WP8, Win8, Ubuntu, FFXOS*,...
  • Plugins:
    • Device, File, Contacts, Media, Chromium, ...

Cordova Plugins

Modular System for Features

  • Apache Cordova Core APIs
  • Chrome Package Apps APIs
  • BlackBerry WebWorks APIs

Check out more plugins.cordova.io

NodeJS: Command Line Interfaces (CLI)

Install Node

Download and Install Node http://nodejs.org/download

$node -v

My favorite tool Node Version Manager (NVM) https://github.com/creationix/nvm

$ nvm ls

current: 	v0.8.26
default -> 0.10 (-> v0.10.24)
NVM avoids the use of sudo, can easily change versions of node to test

Install NPM

Super Easy Install: npm comes with node now.

$npm -v

For other alternatives: @isaacs/npm

Install Cordova CLI

Install cordova using npm

$npm install -g cordova
$cordova -v
Check the README or Docs for requirements based on Platform
  • Android: Android SDK
  • iOS: Mac and iOS SDK with XCode CLI Tools
  • WP8: Windows and Windows Phone SDK

Upgrading Software

Upgrading is as easy as installing using npm

$npm update -g cordova

Install Git command line

You will need this to download Cordova assets

$ git --version
git version (Apple Git-47)

Step 0: Read the Help

$cordova help
cordova help text

Step 1: Create Multi Platform Project

$ cordova create todd com.example.todd todd
Creating a new cordova project with name "todd" and id "com.example.todd"
Downloading cordova library for www...
Download complete
$cd todd; tree todd
├── config.xml
├── hooks
│   └── README.md
├── merges
├── platforms
├── plugins
└── www
    ├── css
    │   └── index.css
    ├── img
    │   └── logo.png
    ├── index.html
    └── js
        └── index.js

Step 3: Add Platforms

$ cordova platform add android
Creating android project...
Preparing android project
$ cordova platform add ios
Creating ios project...
Preparing ios project
$ls platforms
 ├── android
 └── ios
 $cordova platform ls
Installed platforms: android 3.4.0, ios 3.4.0
Available platforms: blackberry10, firefoxos

Check Platform requirements

  • iOS: Mac and iOS SDK with XCode CLI Tools
  • Android: Android SDK
  • WP8: Windows8 and Windows Phone 8 SDK

Check iOS requirements

$ xcodebuild --help
Download XCode from Mac App Store

$ npm install -g ios-sim
$ ios-sim --version
$ 1.8.2
To Run App on iOS Simulator, instead of XCode GUI

$ npm install -g ios-deploy
$ ios-deploy --version
$ 1.0.4
To Run App on Device, instead of XCode GUI

Check Android requirements

$ ant -version
Get Ant from http://ant.apache.org

$ java -version
Get JDK SE from http://www.oracle.com/technetwork/java/javase

$ android --help
Get Android SDK from http://developer.android.com/sdk Add Android tools to path

$ android list target
Install Android API (i.e. API 19 = 4.4) Use Android SDK Manager, $ android sdk

$ android list avd
(Optional) Create Android Device Emulator if you don't have an Android Phone or Tablet

$ adb --help
Add Android platform-tools to path

Check Windows Phone requirements

$ msbuild /?
Download Visual Studio and Windows Phone SDK 8 dev.windowsphone.com For Windows Phone 8 SDK you need Windows 8 or higher Add msbuild.exe to the path if not already presetn in To Run the Emulator check that Computer supports hyperv, or VM is setup with the cpu flag

Step 4: Add Plugins

$ cordova plugin add org.apache.cordova.device
Fetching plugin "org.apache.cordova.device" via plugin registry

$ cordova plugin add org.apache.cordova.geolocation
Fetching plugin "org.apache.cordova.geolocation" via plugin registry

$ cordova plugin ls
[ 'org.apache.cordova.device',
  'org.apache.cordova.geolocation' ]

Step 5: Build App (prepare + compile)

$ cordova build android
Generating config.xml from defaults for platform "android"
Preparing android project
Platform "android" compiled successfully.

$ cordova build ios
Generating config.xml from defaults for platform "ios"
Preparing ios project
Platform "ios" compiled successfully.

Step 6: Run or Emulate App

$ cordova run android
$ cordova emulate ios
ios simulator ios simulator

Tips for Emulators and Devices

  • Android
    • Use Device instead of Emulator
    • Genymotion Emulators: use run command
    • Use Emulator with Intel HAXM and Intel Image
    • Enable Android USB Debugging before running on Device
    • Tap 7 times on About version info (4.x up)
  • Apple iOS
    • May need to run emulate command twice
    • Use XCode to Run and Emulate, easier to select type
    • Register with iOS Developer Program to run on Device

Step 7A: Debug iOS Hybrid App

  • Safari Developer Tools to Inspect Simulator or Device
  • Safari->Preferences->Advance->Check Show Develop menu
  • Develop->iPhone Simulator->index.html
ios inpect web view

Step 7B: Debug Android Hybrid App

  • Chrome Developer Tools Inspect Emulator or Device
  • url = chrome://inspect
ios inpect web view

Today's Picks

Fin and Gracias

BY Carlos Santana / @csantanapr

Slides: csantana.io