#todd2014

@csantanapr

Triangle Open Data Day 2014

Hybrid Apps with PhoneGap/Apache Cordova

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
v0.10.24

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


$ nvm ls

   v0.8.26
  v0.10.22
  v0.10.24
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
v1.3.21

For other alternatives: @isaacs/npm

Install Cordova CLI

Install cordova using npm


$npm install -g cordova
$cordova -v
3.4.0-0.1.0

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 1.8.3.4 (Apple Git-47)

Step 0: Read the Help


$cordova help

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
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

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

Step 7B: Debug Android Hybrid App

Chrome Developer Tools Inspect Emulator or Device
url = chrome://inspect