apps with apache cordova and phonegap

33
+ PhoneGap (tm)

Upload: christian-grobmeier

Post on 14-May-2015

22.598 views

Category:

Technology


4 download

DESCRIPTION

A few introductory slides on Apache Cordova / Phonegap. Presentation was held on 17.05.2013 at the Mobile Forum Stuttgart.

TRANSCRIPT

Page 1: Apps with Apache Cordova and Phonegap

+ PhoneGap (tm)

Page 2: Apps with Apache Cordova and Phonegap

Christian Grobmeierwww.grobmeier.de

@grobmeier

ASF Hacker + VP Logging, Freelancer, Founder: www.timeandbill.de

Page 3: Apps with Apache Cordova and Phonegap

PhoneGap?Cordova?

Page 4: Apps with Apache Cordova and Phonegap

PhoneGap> Company aquired by Adobe

> Packages Cordova> Provides Build-Services

Page 5: Apps with Apache Cordova and Phonegap

Cordova> Home of code> Community

> Apache Software Foundation

Apache

Page 6: Apps with Apache Cordova and Phonegap

HTML5JavaScript

CSS

Plugins

Webview

Page 7: Apps with Apache Cordova and Phonegap

PLATFORMS?

+ BlackBerry+ WebOS+ Symbian+ Bada

+ QT+ Tizen+ OS X+ Windows

Page 8: Apps with Apache Cordova and Phonegap

> Accelerometer > Camera> Compass> Contacts

> File> Geolocation

> Media> Network

> Notifications> Storage

Plugins

Page 9: Apps with Apache Cordova and Phonegap

1. Create a JavaScript function2. Develop a native plugin

More?

extends CordovaPlugin

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

Page 10: Apps with Apache Cordova and Phonegap

Getting started

Page 11: Apps with Apache Cordova and Phonegap

IDE

-SDKon build

path

Page 12: Apps with Apache Cordova and Phonegap

cd lib/android/bin

./create ~/app de.app App

Page 13: Apps with Apache Cordova and Phonegap
Page 14: Apps with Apache Cordova and Phonegap

$> chrome --disable-web-security --allow-file-access-from-files

Page 15: Apps with Apache Cordova and Phonegap

Apache RIPPLE

Page 16: Apps with Apache Cordova and Phonegap

FRIENDS 4 EVER?

Roadcrew.js

Page 17: Apps with Apache Cordova and Phonegap

zepto.js / jQuery+ Roadcrew.js+ Custom.js

100% Performance

Page 18: Apps with Apache Cordova and Phonegap

<html><body> <div>Hey!</div> <!-- include your js -->

<script type=“text/javascript“> $(document).on( 'deviceready', onDeviceReady ); </script>

</body></html>

Page 19: Apps with Apache Cordova and Phonegap

<body><div id=“page1“> Page 1</div>

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

<div id=“page3“> Page 3</div></body>

Single Page Apps

Page 20: Apps with Apache Cordova and Phonegap

<body><div id=“p1“ class=“start page“>

<button id=“refresh“> Refresh </button>

<ul id=“list“></ul></div></body>

2:30

Refresh

Page 21: Apps with Apache Cordova and Phonegap

2:30

Refresh

onDeviceReady() {

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

}

Page 22: Apps with Apache Cordova and Phonegap

2:30

Refresh

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

RippleWave

...

Page 23: Apps with Apache Cordova and Phonegap

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

Page 24: Apps with Apache Cordova and Phonegap

SHIP!

Page 25: Apps with Apache Cordova and Phonegap

SHIP!$> ant release

Page 26: Apps with Apache Cordova and Phonegap

SHIP!build.

phonegap.com

Service by Adobe

Page 27: Apps with Apache Cordova and Phonegap

Drawbacks?

Page 28: Apps with Apache Cordova and Phonegap

Write once,debug

everywhere

Page 29: Apps with Apache Cordova and Phonegap

SHIP!

NeedAnimations?

Page 30: Apps with Apache Cordova and Phonegap

SHIP!

Design ityourself

Page 31: Apps with Apache Cordova and Phonegap

JavaScript.Is it hard?

Page 32: Apps with Apache Cordova and Phonegap

Christian Grobmeierwww.grobmeier.de

@grobmeier

Thanks!:-)

Page 33: Apps with Apache Cordova and Phonegap

Image CreditsOil 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)