Ein	  Code	  =	  iOS,	  Android,	  BB,	                       WP7	                 Marcus	  Ross	               (Trainer/B...
Agenda•  Das Problem•  Die Lösung (3 Teile)
Das	  Problem	  •    Chef:	  „Wir	  brauchen	  eine	  App“	  •    IT:	  „Wow,	  ja	  gerne,	  welche	  PlaHorm?“	  •    Ch...
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!• ...
jQueryMobile Bspl.<head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /><s...
...das kommt raus.
jQueryMobile UI      <div	  data-­‐role="fieldcontain“>	        	  	  	  	  <label	  for="name">Text	  Input:</label>	     ...
Alternativen?•  iUi (iPhone-Mimikri)  http://www.iui-js.org/•  Bbui.js (Blackberry-Mimikri)  http://www.github.com/blackbe...
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 (Datenfil...
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	  durc...
Mind the (Phone)Gap – 60 Sek.•  Was macht Apache Cordova?    Packager/JS-Bridge!•  www-­‐Verzeichnis	  für	  	  HTML5	  /	...
Architektur
Apache Cordova•  Unterstützt	  die	  PlaHormen:	  
Zugriff per APIAccelerometer	     Events	  Camera	            File	  Capture	           Geolocaion	  Compass	           Me...
Einfach mal machen......!<script type="text/javascript" charset="utf-8“>!!document.addEventListener("deviceready", onDevic...
...das kommt raus.
oder auch......!<script type="text/javascript" charset="utf-8“>!!document.addEventListener("deviceready", onDeviceReady, f...
Cordova 101 (iOS)•  Project	  erstellen	     $ ./create          /path/to/HDCCordovaProject          de.zhapps.hdc2012    ...
Aber Debugging?•  hmp://debug.phonegap.com	  •  npm	  -­‐g	  install	  weinre	  •  Plugin	  	         hmps://github.com/ph...
Plugins 1/2•  Zugriff	  auf	  Hardware	  /	  Funkionen	  •  Zentral	  zu	  erreichen	  unter:	     hmps://github.com/phoneg...
Plugins 2/2-­‐  Barcodescanner	  (iOS,android,BB)	  -­‐  Push-­‐Noificaion	  (iOS,	  android)	  -­‐  AugmentedReality	  dur...
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	     ...
FAQ•  Performance!?	  -­‐>	  Ja,	  aber...	  •  jQueryMobile	      –  $.mobile.ajaxEnabled	  =	  false;	      –  $.mobile....
Fazit•  Apache	  Cordova	  stellt	  eine	  Lösung	  dar	  •  Erweiterbar	  durch	  Plugins	  •  OpenSource,	  daher	  kein...
DankeHabt	  Ihr	  noch	  Fragen?	  	  Alternaiv	  auch	  gerne	  unter:	  -­‐  @zahlenhelfer	  -­‐  marcus.ross@zahlenhelf...
Hdc2012 cordova-präsi
Upcoming SlideShare
Loading in …5
×

Hdc2012 cordova-präsi

502
-1

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
502
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hdc2012 cordova-präsi

  1. 1. Ein  Code  =  iOS,  Android,  BB,   WP7   Marcus  Ross   (Trainer/Berater)   @zahlenhelfer  
  2. 2. Agenda•  Das Problem•  Die Lösung (3 Teile)
  3. 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. 4. Lösung (3 Teile)•  X-Plattform UI -> jQueryMobile•  ein Sourcecode -> JavaScript•  native App -> Apache Cordova
  5. 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. 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. 7. ...das kommt raus.
  8. 8. jQueryMobile UI <div  data-­‐role="fieldcontain“>          <label  for="name">Text  Input:</label>          <input    type="text"      name="name“    id="name“    value=""  />    </div>    
  9. 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. 10. Lösung (3 Teile)•  X-Plattform UI -> jQueryMobile•  Ein Sourcecode -> JavaScript•  native App -> Apache Cordova
  11. 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. 12. MVC/MVR´s•  Backbone.js•  AngularJS•  Ember.js•  und noch viele mehr!Aber welches nehme ich nun?
  13. 13. Die Rettung•  Projekt für MVx-Frameworks•  ToDo-Liste wurde implementiert•  http://addyosmani.github.com/todomvc/
  14. 14. Lösung (3 Teile)•  X-Plattform UI -> jQueryMobile•  Ein Sourcecode -> JavaScript / HTML5•  native App -> Apache Cordova
  15. 15. 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  
  16. 16. 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!
  17. 17. Architektur
  18. 18. Apache Cordova•  Unterstützt  die  PlaHormen:  
  19. 19. Zugriff per APIAccelerometer   Events  Camera   File  Capture   Geolocaion  Compass   Media  Connecion   Noificaion  Contacts   Storage  Device   *Plugins  
  20. 20. 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>!...!
  21. 21. ...das kommt raus.
  22. 22. 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>!...!
  23. 23. Cordova 101 (iOS)•  Project  erstellen   $ ./create /path/to/HDCCordovaProject de.zhapps.hdc2012 HDC2012Project  
  24. 24. Aber Debugging?•  hmp://debug.phonegap.com  •  npm  -­‐g  install  weinre  •  Plugin     hmps://github.com/phonegap/phonegap-­‐plugins    
  25. 25. Plugins 1/2•  Zugriff  auf  Hardware  /  Funkionen  •  Zentral  zu  erreichen  unter:   hmps://github.com/phonegap/phonegap-­‐plugins.git  
  26. 26. Plugins 2/2-­‐  Barcodescanner  (iOS,android,BB)  -­‐  Push-­‐Noificaion  (iOS,  android)  -­‐  AugmentedReality  durch  WikiTude   (iOS,android)  
  27. 27. ja, aber Plattform XYZ?...•  Build  von  Projekten  auch  per  Cloud   hmp://build.phonegap.com  
  28. 28. Mehr Info bitte...•  Dokumentaion  der  API  unter:   hmp://docs.phonegap.com  •  auch  in  Deutsch  durch   den  Referenten  J  
  29. 29. FAQ•  Performance!?  -­‐>  Ja,  aber...  •  jQueryMobile   –  $.mobile.ajaxEnabled  =  false;   –  $.mobile.linkBindingEnabled  =  false;    •  Nutzen  von  MVC  -­‐>  manchmal  muss  es  sein!    •  Datenbankproblem  -­‐>  WebSQL/Storage  
  30. 30. Fazit•  Apache  Cordova  stellt  eine  Lösung  dar  •  Erweiterbar  durch  Plugins  •  OpenSource,  daher  keine  SLA´s  •  Webdeveloper  können  nun  auch  Apps!  
  31. 31. DankeHabt  Ihr  noch  Fragen?    Alternaiv  auch  gerne  unter:  -­‐  @zahlenhelfer  -­‐  marcus.ross@zahlenhelfer.de  

×