#jsmeetup

@csantanapr

Triangle JavaScript Meetup 06.11.14

Where Web Meets Native, Building Mobile Hybrid Apps Using JavaScript

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] }"

Demo (UX)

“So you want to build a native app?”

It's Not 2007 Anymore

Mobile devices and web views have rapidly improved!

Apache Cordova

Open Source Project for Hybrid Development

Web Technologies You Already Know and Love

(You'll feel right at home)

Cordova Platforms

iOS
Android
Blackberry 10
Windows Phone 8
Firefox OS
Ubuntu
Tizen
Amazon FireOS
Windows 8

Cordova APIs (19 total)

Accelerometer
Camera
Compass
Device
Dialogs
File
InAppBrowser
Geolocation
Network-Information
Vibration
more here cordova.io

Cordova Events

deviceready
pause
resume
backbutton, menubutton, searchbutton
startcallbutton
endcallbutton
volumedownbutton, volumeupbutton
batterycritical, batterylow, batterystatus
online
offline

Camera API


getPicture: function(){
    navigator.camera.getPicture(
        app.onSucessCamera, 
        app.onFailCamera, 
        { 
            quality: 50,
            destinationType: Camera.DestinationType.FILE_URI 
        });
}
onSucessCamera: function(imageURI) {
    var image = document.getElementById('myImage');
    image.src = imageURI;
},
onFailCamera: function(message) {
    alert('Failed because: ' + message);
},

Demo Apache Cordova CLI and Camera Plugin

Install Cordova


	            npm install -g cordova

Step 0: Read the Help


$cordova help

Step 1: Create Multi Platform Project


$ cordova create jsmeetup com.example.jsmeetup trianglejs
Creating a new cordova project with name "jsmeetup" and id "com.example.jsmeetup"
Downloading cordova library for www...
Download complete
$cd jsmeetup; tree trianglejs
.
├── 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
$ cordova platform add ios

$cordova platform ls
Installed platforms: android 3.5.0, ios 3.5.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

Discover core Apache Cordova plugins + 3rd party plugins at plugins.cordova.io

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.camera
Fetching plugin "org.apache.cordova.camera" via plugin registry


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

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

NodeJS Command Line Tools

Start with node APIs (FileSystem, Process)
npm handles install and bin path
cli [verb] [action] [arguments]
verbs and actions as node modules
leverage 3rd party module to parse arguments

Frameworks

Cloud

Demo (Ionic + Bluemix)

Pebble Watch JS SDK cloudpebble.net

Triangle Meetups

Book Series @getify/You-Dont-Know-JS

Local Conferences

Fin and Gracias

BY Carlos Santana / @csantanapr

Slides: csantana.io