• Save
Hdc2012 cordova-präsi
Upcoming SlideShare
Loading in...5
×
 

Hdc2012 cordova-präsi

on

  • 574 views

 

Statistics

Views

Total Views
574
Views on SlideShare
574
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hdc2012 cordova-präsi Hdc2012 cordova-präsi Presentation Transcript

  • 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="fieldcontain“>          <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 APIAccelerometer   Events  Camera   File  Capture   Geolocaion  Compass   Media  Connecion   Noificaion  Contacts   Storage  Device   *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•  Zugriff  auf  Hardware  /  Funkionen  •  Zentral  zu  erreichen  unter:   hmps://github.com/phonegap/phonegap-­‐plugins.git  
  • Plugins 2/2-­‐  Barcodescanner  (iOS,android,BB)  -­‐  Push-­‐Noificaion  (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!  
  • DankeHabt  Ihr  noch  Fragen?    Alternaiv  auch  gerne  unter:  -­‐  @zahlenhelfer  -­‐  marcus.ross@zahlenhelfer.de