Hdc2012 cordova-präsi

  • 371 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
371
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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/
  • 7. ...das kommt raus.
  • 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/
  • 14. Lösung (3 Teile)•  X-Plattform UI -> jQueryMobile•  Ein Sourcecode -> JavaScript / HTML5•  native App -> Apache Cordova
  • 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. 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. Architektur
  • 18. Apache Cordova•  Unterstützt  die  PlaHormen:  
  • 19. Zugriff per APIAccelerometer   Events  Camera   File  Capture   Geolocaion  Compass   Media  Connecion   Noificaion  Contacts   Storage  Device   *Plugins  
  • 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. ...das kommt raus.
  • 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. Cordova 101 (iOS)•  Project  erstellen   $ ./create /path/to/HDCCordovaProject de.zhapps.hdc2012 HDC2012Project  
  • 24. Aber Debugging?•  hmp://debug.phonegap.com  •  npm  -­‐g  install  weinre  •  Plugin     hmps://github.com/phonegap/phonegap-­‐plugins    
  • 25. Plugins 1/2•  Zugriff  auf  Hardware  /  Funkionen  •  Zentral  zu  erreichen  unter:   hmps://github.com/phonegap/phonegap-­‐plugins.git  
  • 26. Plugins 2/2-­‐  Barcodescanner  (iOS,android,BB)  -­‐  Push-­‐Noificaion  (iOS,  android)  -­‐  AugmentedReality  durch  WikiTude   (iOS,android)  
  • 27. ja, aber Plattform XYZ?...•  Build  von  Projekten  auch  per  Cloud   hmp://build.phonegap.com  
  • 28. Mehr Info bitte...•  Dokumentaion  der  API  unter:   hmp://docs.phonegap.com  •  auch  in  Deutsch  durch   den  Referenten  J  
  • 29. FAQ•  Performance!?  -­‐>  Ja,  aber...  •  jQueryMobile   –  $.mobile.ajaxEnabled  =  false;   –  $.mobile.linkBindingEnabled  =  false;    •  Nutzen  von  MVC  -­‐>  manchmal  muss  es  sein!    •  Datenbankproblem  -­‐>  WebSQL/Storage  
  • 30. Fazit•  Apache  Cordova  stellt  eine  Lösung  dar  •  Erweiterbar  durch  Plugins  •  OpenSource,  daher  keine  SLA´s  •  Webdeveloper  können  nun  auch  Apps!  
  • 31. DankeHabt  Ihr  noch  Fragen?    Alternaiv  auch  gerne  unter:  -­‐  @zahlenhelfer  -­‐  marcus.ross@zahlenhelfer.de