Go Mobile with Apache Cordova, Zagreb 2014

Go Mobile! !

with

Christian Grobmeier www.grobmeier.de

@grobmeier Freelancer and Entrepreneur

Wears his own shirts

Writes Books

Tracks time

Hires People!

http://www.grobmeier.de

PhoneGap? Apache Cordova?

!

HTML5 JavaScript

CSS

Plugins

Webview

PLATFORMS?

+ BlackBerry + WebOS + Symbian + Bada

+ QT + Tizen + OS X + Windows

Accelerometer Camera Compass Contacts

File Geolocation

Media Network

Notifications Storage

Plugins

1. Create a JavaScript function 2. Develop a native plugin

More?

extends CordovaPlugin

window.echo = function(str, callback) { cordova.exec(callback, function(err) { callback('Nothing to echo.'); }, "Echo", "echo", [str]); };

Getting started

Editor-SDK

on build path

cordova create places com.opendi.places Places cordova platform add android cordova build android cordova emulate android

Starting from scratch

$> cordova serve !Static file server running on port 8000 (i.e. http://localhost:8000) CTRL + C to shut down

Testing in Chrome

Apache RIPPLE

FRIENDS 4 EVER?

Roadcrew.js

Your Code

Plugins

Webview

<html> <body> <div id="map"></div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/mapbox-2.1.2.js"></script> <script type="text/javascript" src="js/app.js"></script> </body></html>

Single Page Apps

<body><div id=“page1“> <a href=“#page2“>...</div><div id=“page2“> <a href=“#page3“>...</div><div id=“page3“> <a href=“#page1“>...</div></body>

Single Page Apps2:30

2:30

2:30

with Roadcrew.js

Anatomy of a

!

Click

<body><div id="p1" class="start page"> <button id="refresh"> Refresh </button> <ul id="list"></ul></div></body>

2:30

Refresh

var app = { initialize: function() { document.addEventListener( 'deviceready', this.onDeviceReady, false); }, onDeviceReady: function() { // Your Code } }; app.initialize();

2:30

Refresh $('#refresh').click( function() { app.refresh(); });

In onDeviceReady

Consider Touch Events!

2:30

Refresh var app = { refresh: function() { $.get("data.json", function(d) { $("#list").html(d); }); } }

Ripple Wave

...

Still JS

Beware: Caching!

Camera

cordova plugin add org.apache.cordova.camera

var options = { quality: 50, destinationType: Camera.DestinationType.FILE_URI} function cb(uri) { $('#img').attr('src ', uri); } function fail(message) { alert(message); } navigator.camera.getPicture(cb, fail, options);

Camera

navigator.geolocation.getCurrentPosition( function(pos) { view.html( pos.coords.latitude + ',' + pos.coords.longitude); }, function (error) { console.log(error.message); });

Geolocation

Ey! That’s HTML5!!

cordova plugin add org.apache.cordova.geolocation

Ship it!

Icons<platform name="android"> <icon src="res/android/ldpi.png" density="ldpi" /> <icon src="res/android/mdpi.png" density="mdpi" /> <icon src="res/android/hdpi.png" density="hdpi" /> <icon src="res/android/xhdpi.png" density="xhdpi" /></platform>

config.xml:

SHIP!$> ant release

xcode

SHIP!build.

phonegap. com

Service by Adobe

Quirks?

Write once, debug everywhere.

!

A billion browsers.

SHIP!

Performance?

SHIP!Design it yourself.

!

It’s just a container.

JavaScript. !

Is it hard?

Building can be hard.

Christian Grobmeier !

www.grobmeier.de @grobmeier

Thanks! :-)

http://www.grobmeier.de

Image Credits !

Oil platform: NOAA Photolib (Flickr) Plugs: Brad.K (stopbits@Flickr)

Car: Juan Alvaro (Flickr) Zebra: flowcomm (Flickr)

Ship: eamoncurry123 (Flickr) Ant: sanchom (Flickr)

Broken Tube: L. Marie (Flickr)

Technology

Go Mobile with Apache Cordova, Zagreb 2014