One Source = iOS, Android, BB, WP7

Ein Code = iOS, Android, BB, WP7 Marcus
Ross (Trainer/Berater) @zahlenhelfer

Agenda •  Das Problem •  Die Lösung (3 Teile)

Das Problem •  Chef: „Wir brauchen eine App“
•  IT: „Wow, ja gerne, welche PlaHorm?“ •  Chef: „Wieso PlaHorm – Mobil!“ •  IT: „Ja, aber WP7, iOS, android, BB?“ •  Chef: „Na alle! Oder nicht?“ •  IT: „OK – Problem!“

Lösung (3 Teile) •  X-Plattform UI -> jQueryMobile •  ein
Sourcecode -> JavaScript •  native App -> Apache Cordova

jQueryMobile •  Touch-Optimiertes Framework für eine Vielzahl von Geräten/Browsern • 
Eigenes UI-Paradigma, nicht nativ! •  Leicht, da mit HTML5 Attributen („data-xxx“)

jQueryMobile Bspl. <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/ jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Hallo HDC 2012</h1> </div> <div data-role="content"> <p>Apache Cordova Track</p> </div> </div> </body> http://jsfiddle.net/Lwryv/

...das kommt raus.

jQueryMobile UI <div data-‐role="ﬁeldcontain“> <label for="name">Text
Input:</label> <input type="text" name="name“ id="name“ value="" /> </div>

Alternativen? •  iUi (iPhone-Mimikri) http://www.iui-js.org/ •  Bbui.js (Blackberry-Mimikri) http://www.github.com/blackberry/bbUi.js • 
SenchaTouch (Touch-Framework) http://www.sencha.com

Lösung (3 Teile) •  X-Plattform UI -> jQueryMobile •  Ein
Sourcecode -> JavaScript •  native App -> Apache Cordova

Logik mit JavaScript •  Client-Site-Rendering (Templates) •  Seitenlogik (Routing/Hyperlinks/Forms) • 
Filter (Datenfilter) •  Kommunikation mit Servern (XHR) oder auch kompakt •  Single Page Apps

MVC/MVR´s •  Backbone.js •  AngularJS •  Ember.js •  und noch
viele mehr! Aber welches nehme ich nun?

Die Rettung •  Projekt für MVx-Frameworks •  ToDo-Liste wurde implementiert
•  http://addyosmani.github.com/todomvc/

Lösung (3 Teile) •  X-Plattform UI -> jQueryMobile •  Ein
Sourcecode -> JavaScript / HTML5 •  native App -> Apache Cordova

Kurzer Abriss der Geschichte •  PhoneGap erstellt durch die Firma
Nitobi •  Nach Release V1.0 kauf durch Adobe •  Übertragung des IP an die ASF •  Jetzt ist es Apache Cordova

Mind the (Phone)Gap – 60 Sek. •  Was macht Apache
Cordova? Packager/JS-Bridge! •  www-‐Verzeichnis für HTML5 / JS / CSS3 •  Was ist der Tick? native WebView!

Architektur

Apache Cordova •  Unterstützt die PlaHormen:

Zugriff per API Accelerometer Camera Capture Compass
Connecion Contacts Device Events File Geolocaion Media Noiﬁcaion Storage *Plugins

Einfach mal machen... ...! <script type="text/javascript" charset="utf-8“>! ! document.addEventListener("deviceready", onDeviceReady,
false);! !! function onDeviceReady() {! var element = document.getElementById('deviceEigenschaften');! ! !'Geräte Name: ' + device.name + '<br />' + ! ! !'Geräte Cordova: ' + device.cordova + '<br />' + ! ! !'Geräte Platform: ' + device.platform! }! </script>! ...!

...das kommt raus.

oder auch... ...! <script type="text/javascript" charset="utf-8“>! ! document.addEventListener("deviceready", onDeviceReady, false);!
!! function onDeviceReady() {! var element = document.getElementById('deviceEigenschaften');! ! !'Geräte Name: ' + device.name + '<br />' + ! ! !'Geräte Cordova: ' + device.cordova + '<br />' + ! ! !'Geräte Platform: ' + device.platform! }! </script>! ...!

Cordova 101 (iOS) •  Project erstellen $ ./create /path/to/HDCCordovaProject
de.zhapps.hdc2012 HDC2012Project

Aber Debugging? •  hmp://debug.phonegap.com •  npm -‐g install weinre
•  Plugin hmps://github.com/phonegap/phonegap-‐plugins

Plugins 1/2 •  Zugriﬀ auf Hardware / Funkionen • 
Zentral zu erreichen unter: hmps://github.com/phonegap/phonegap-‐plugins.git

Plugins 2/2 -‐  Barcodescanner (iOS,android,BB) -‐  Push-‐Noiﬁcaion (iOS, android)
-‐  AugmentedReality durch WikiTude (iOS,android)

ja, aber Plattform XYZ?... •  Build von Projekten auch per
Cloud hmp://build.phonegap.com

Mehr Info bitte... •  Dokumentaion der API unter: hmp://docs.phonegap.com
•  auch in Deutsch durch den Referenten J

FAQ •  Performance!? -‐> Ja, aber... •  jQueryMobile
–  $.mobile.ajaxEnabled = false; –  $.mobile.linkBindingEnabled = false; •  Nutzen von MVC -‐> manchmal muss es sein! •  Datenbankproblem -‐> WebSQL/Storage

Fazit •  Apache Cordova stellt eine Lösung dar • 
Erweiterbar durch Plugins •  OpenSource, daher keine SLA´s •  Webdeveloper können nun auch Apps!

Danke Habt Ihr noch Fragen? Alternaiv auch gerne
unter: -‐  @zahlenhelfer -‐  [email protected]

One Source = iOS, Android, BB, WP7

One Source = iOS, Android, BB, WP7

Marcus Ross

More Decks by Marcus Ross

Other Decks in Programming

Featured

Transcript

Ein Code = iOS, Android, BB, WP7 Marcus

Agenda •  Das Problem •  Die Lösung (3 Teile)

Das Problem •  Chef: „Wir brauchen eine App“

Lösung (3 Teile) •  X-Plattform UI -> jQueryMobile •  ein

jQueryMobile •  Touch-Optimiertes Framework für eine Vielzahl von Geräten/Browsern •

jQueryMobile Bspl. <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/ jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

...das kommt raus.

jQueryMobile UI <div data-‐role="ﬁeldcontain“> <label for="name">Text

Alternativen? •  iUi (iPhone-Mimikri) http://www.iui-js.org/ •  Bbui.js (Blackberry-Mimikri) http://www.github.com/blackberry/bbUi.js •

Lösung (3 Teile) •  X-Plattform UI -> jQueryMobile •  Ein

Logik mit JavaScript •  Client-Site-Rendering (Templates) •  Seitenlogik (Routing/Hyperlinks/Forms) •

MVC/MVR´s •  Backbone.js •  AngularJS •  Ember.js •  und noch

Die Rettung •  Projekt für MVx-Frameworks •  ToDo-Liste wurde implementiert

Lösung (3 Teile) •  X-Plattform UI -> jQueryMobile •  Ein

Kurzer Abriss der Geschichte •  PhoneGap erstellt durch die Firma

Mind the (Phone)Gap – 60 Sek. •  Was macht Apache

Architektur

Apache Cordova •  Unterstützt die PlaHormen:

Zugriff per API Accelerometer Camera Capture Compass

Einfach mal machen... ...! <script type="text/javascript" charset="utf-8“>! ! document.addEventListener("deviceready", onDeviceReady,

...das kommt raus.

oder auch... ...! <script type="text/javascript" charset="utf-8“>! ! document.addEventListener("deviceready", onDeviceReady, false);!

Cordova 101 (iOS) •  Project erstellen $ ./create /path/to/HDCCordovaProject

Aber Debugging? •  hmp://debug.phonegap.com •  npm -‐g install weinre

Plugins 1/2 •  Zugriﬀ auf Hardware / Funkionen •

Plugins 2/2 -‐  Barcodescanner (iOS,android,BB) -‐  Push-‐Noiﬁcaion (iOS, android)

ja, aber Plattform XYZ?... •  Build von Projekten auch per

Mehr Info bitte... •  Dokumentaion der API unter: hmp://docs.phonegap.com

FAQ •  Performance!? -‐> Ja, aber... •  jQueryMobile

Fazit •  Apache Cordova stellt eine Lösung dar •

Danke Habt Ihr noch Fragen? Alternaiv auch gerne