Apps with Apache Cordova and Phonegap
Post on 14-May-2015
22564 Views
Preview:
DESCRIPTION
Transcript
+ PhoneGap (tm)
Christian Grobmeierwww.grobmeier.de
@grobmeier
ASF Hacker + VP Logging, Freelancer, Founder: www.timeandbill.de
PhoneGap?Cordova?
PhoneGap> Company aquired by Adobe
> Packages Cordova> Provides Build-Services
Cordova> Home of code> Community
> Apache Software Foundation
Apache
HTML5JavaScript
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 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]);};
Getting started
IDE
-SDKon build
path
cd lib/android/bin
./create ~/app de.app App
$> chrome --disable-web-security --allow-file-access-from-files
Apache RIPPLE
FRIENDS 4 EVER?
Roadcrew.js
zepto.js / jQuery+ Roadcrew.js+ Custom.js
100% Performance
<html><body> <div>Hey!</div> <!-- include your js -->
<script type=“text/javascript“> $(document).on( 'deviceready', onDeviceReady ); </script>
</body></html>
<body><div id=“page1“> Page 1</div>
<div id=“page2“> <a href=“#page1“>...</div>
<div id=“page3“> Page 3</div></body>
Single Page Apps
<body><div id=“p1“ class=“start page“>
<button id=“refresh“> Refresh </button>
<ul id=“list“></ul></div></body>
2:30
Refresh
2:30
Refresh
onDeviceReady() {
$('#refresh').on( 'click', function() { app.refresh(); });
}
2:30
Refresh
var app = { refresh: function() { $.get( ,data.json‘, function (data) { $(,#list‘).html(list); }); }}
RippleWave
...
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
SHIP!
SHIP!$> ant release
SHIP!build.
phonegap.com
Service by Adobe
Drawbacks?
Write once,debug
everywhere
SHIP!
NeedAnimations?
SHIP!
Design ityourself
JavaScript.Is it hard?
Christian Grobmeierwww.grobmeier.de
@grobmeier
Thanks!:-)
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)
top related