Hochgeladen vonDeveloperConference
Hdc2012 cordova-präsi
Das Dokument behandelt die Entwicklung einer plattformübergreifenden mobilen App mit Apache Cordova und jQuery Mobile. Es skizziert Lösungen für häufige Probleme bei der App-Entwicklung und bietet Beispiele für den Einsatz von HTML5 und JavaScript zur Erstellung nativer Apps. Zudem werden alternative Frameworks und die Architektur von Apache Cordova beschrieben, einschließlich Hinweisen zu Plugins und Debugging-Tools.
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 Frameworkfü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/
- 7.
- 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 • Projektfü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 derGeschichte • 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.
- 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... ...! <scripttype="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>! ...!
- 22.
- 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 PlattformXYZ?... • 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