Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (19)
Destacado
Destacado (9)
Similar a Hdc2012 cordova-präsi
Similar a Hdc2012 cordova-präsi (20)
Hdc2012 cordova-präsi
- 1. Ein Code = iOS, Android, BB, WP7 Marcus Ross (Trainer/Berater) @zahlenhelfer
- 2. Agenda • Das Problem • Die Lösung (3 Teile)
- 3. 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!“
- 4. Lösung (3 Teile) • X-Plattform UI -> jQueryMobile • ein Sourcecode -> JavaScript • native App -> Apache Cordova
- 5. jQueryMobile • Touch-Optimiertes Framework für eine Vielzahl von Geräten/Browsern • Eigenes UI-Paradigma, nicht nativ! • Leicht, da mit HTML5 Attributen („data-xxx“)
- 6. 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/
- 8. jQueryMobile UI <div data-‐role="fieldcontain“> <label for="name">Text Input:</label> <input type="text" name="name“ id="name“ value="" /> </div>
- 9. 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
- 10. Lösung (3 Teile) • X-Plattform UI -> jQueryMobile • Ein Sourcecode -> JavaScript • native App -> Apache Cordova
- 11. Logik mit JavaScript • Client-Site-Rendering (Templates) • Seitenlogik (Routing/Hyperlinks/Forms) • Filter (Datenfilter) • Kommunikation mit Servern (XHR) oder auch kompakt • Single Page Apps
- 12. MVC/MVR´s • Backbone.js • AngularJS • Ember.js • und noch viele mehr! Aber welches nehme ich nun?
- 13. Die Rettung • Projekt für MVx-Frameworks • ToDo-Liste wurde implementiert • http://addyosmani.github.com/todomvc/
- 15. Lösung (3 Teile) • X-Plattform UI -> jQueryMobile • Ein Sourcecode -> JavaScript / HTML5 • native App -> Apache Cordova
- 16. 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
- 17. 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!
- 18. Architektur
- 19. Apache Cordova • Unterstützt die PlaHormen:
- 20. Zugriff per API Accelerometer Events Camera File Capture Geolocaion Compass Media Connecion Noificaion Contacts Storage Device *Plugins
- 21. 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>! ...!
- 23. 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>! ...!
- 24. Cordova 101 (iOS) • Project erstellen $ ./create /path/to/HDCCordovaProject de.zhapps.hdc2012 HDC2012Project
- 25. Aber Debugging? • hmp://debug.phonegap.com • npm -‐g install weinre • Plugin hmps://github.com/phonegap/phonegap-‐plugins
- 26. Plugins 1/2 • Zugriff auf Hardware / Funkionen • Zentral zu erreichen unter: hmps://github.com/phonegap/phonegap-‐plugins.git
- 27. Plugins 2/2 -‐ Barcodescanner (iOS,android,BB) -‐ Push-‐Noificaion (iOS, android) -‐ AugmentedReality durch WikiTude (iOS,android)
- 28. ja, aber Plattform XYZ?... • Build von Projekten auch per Cloud hmp://build.phonegap.com
- 29. Mehr Info bitte... • Dokumentaion der API unter: hmp://docs.phonegap.com • auch in Deutsch durch den Referenten J
- 30. FAQ • Performance!? -‐> Ja, aber... • jQueryMobile – $.mobile.ajaxEnabled = false; – $.mobile.linkBindingEnabled = false; • Nutzen von MVC -‐> manchmal muss es sein! • Datenbankproblem -‐> WebSQL/Storage
- 31. Fazit • Apache Cordova stellt eine Lösung dar • Erweiterbar durch Plugins • OpenSource, daher keine SLA´s • Webdeveloper können nun auch Apps!
- 32. Danke Habt Ihr noch Fragen? Alternaiv auch gerne unter: -‐ @zahlenhelfer -‐ marcus.ross@zahlenhelfer.de