Das neue Crossplattform Dreamteam - Ionic/Angular/Cordova

DWX 2015

Transcript

1. Crosspla(orm  Dreamteam   Marcus  Ross   @zahlenhelfer  
2. <<<  „Hi,  I´m  Marcus!“   h3p://about.me/marcus.ross   Historie:   •  Developer   •  Trainer  /   DevCoach   •  Unbequem-­‐Frager  
3. Agenda   •  Das  App-­‐Problem     •  Die  Antworten   – alten  Antworten   – neuen  Antworten   •  Das  Tooling  um  Ionic   •  Die  ZukunC  
4. Wie  war  das  damals  2012...  
5. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   KonzepMon  von  Apps   -­‐   Web  vs.NaMve   Marcus  Ross   Trainer/Freelancer   @zahlenhelfer  
6. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   Das  Problem   •  Chef:  „Wir  brauchen  eine  App“   •  IT:  „Wow,  ja  gerne,  welche  PlaVorm?“   •  Chef:  „Wieso  PlaVorm  –  Mobil!“   •  IT:  „Also  Web  oder  naMve  iOS?“   •  Chef:  „Na  alle!  Oder  nicht?“   •  IT:  „OK  –  Problem!“  
7. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   Web  vs.  NaMve  
8. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   Was  passiert  durch                ios  ?   <label>Single  file</label>   <input  type="file">  
9. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   WebApp  UI   •  Mögliche  Frameworks  für  UI   – jQueryMobile   – iUi   – Bootstrap   – SenchaTouch   – Enyo  
10. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   WebApp  MVC   •  Mögliche  Frameworks  für  MVC/MVR   – Backbone.js   – Knockout.js   – Ember.js   – Batman.js       Quellen  für  Ideen:  TODOMVC!  
11. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   Was  also  nehmen?   •  naMve  Power  vs.  HTML   (lange  Listen,  flackern,  etc.)   •  Monetarisierung  der  App  vs.  Freies   Deployment  (schnelles  Update)   •  Zugriff  auf  Sensoren  vs.  HTML5   •  nur  ein  System  vs.  jedes  System   •  naMve  UI  vs.  Irgend  was  an  UI   •  SQL  Datenbanken  vs.  local  Storage  
12. ipdc_conference                      #ipdc12   www.iphone-­‐developer-­‐conference.de   Antwort:   •  Kommt  drauf  an  L   •  ...daher  schauen  wir  uns  die  Praxis  an!  
13. ...und  wieder  ins  jetzt   hqp://cinecenta.com/images/movies/592/image1.jpg  
14. Die  neue  Lösung   •  Programmiersprache  =  JS   •  Hardware  &  Packaging  =  Cordova   •  SinglePageApplicaMon  =  Angular.js   •  UserInterface  =  Ionic  
15. •  ehemals  PhoneGap  von  Nitobi   •  miqlerweile  Apache  Toplevel  Projekt   •  PhoneGap  jetzt  als  DistribuMon  bei  Adobe   •  Zugriff  auf  Hardware  &  Co.  mit  JS   •  JavaScript  Call  dispatch  zu  naMven  Calls  
16. Cordova  Kamera  Beispiel   navigator.camera.getPicture(onSuccess,  onFail,  {            quality:  50,          destinationType:  Camera.DestinationType.DATA_URL      }   );     function  onSuccess(imageData)  {          var  image  =  document.getElementById('myImage');          image.src  =  "data:image/jpeg;base64,"  +  imageData;   }     function  onFail(message)  {          alert('Failed  because:  '  +  message);   }  
17. Angular.js   •  der  defacto  Standard  zu  MVVM   •  von  Google  gepusht   •  aktuell  Version  2.0  in  der   Entwicklung   •  SPA-­‐Framework   •  bringt  RouMng,  Templates   und  Dependency-­‐Mgmt  
18. Ist  Angular  wichMg?  
20. Hersteller   •  Erstellt  von   •  2012  gegründet   •  Ionic  unter  MIT  Lizenz   •  2014  -­‐  $1.0  Mio  seed   •  2015  -­‐  $2.6  Mio.  add   (Techcrunch)  
21. ionic  –  Was  ist  es?   •  ist  mehr  als  css  magic  für  mobile-­‐gui   •  denkt  einfach  an  Bootstrap  für  mobile   •  ist  natürlich  responsive   •  pla(orm  conMnuity  (mehr  dazu  gleich)   •  nutzt  Apache  Cordova  zum  App  verpacken   •  nutzt  Angular.js  für  RouMng  und  Struktur   •  es  ist  ein  Stack  von  Tools  
22. Die  Gretchenfrage     Ist   IONIC   nicht  einfach     nur  wieder   ein  mobile  UI   Framework?  
23. pla(orm  conMnuity  
24. pla(orm  conMnuity   •  NaMve  Feel  bei  gleicher  Codebase  (Titanium?)    
25. Das  ist  der  Code   var  hideSheet  =  $ionicActionSheet.show({            buttons:  [                {  text:  '<b>Share</b>  This'  },                {  text:  'Move'  }            ],            destructiveText:  'Delete',            titleText:  'Modify  your  album',            cancelText:  'Cancel',            cancel:  function()  {                      //  add  cancel  code..                  },            buttonClicked:  function(index)  {                return  true;            }        });  
26. Der  Stack  ist  kompleq   •  Cordova   •  JavaScript   •  Angular   •  ionic  
27. Ist  es  schon  brauchbar?   *12.  Mai  2015   *
28. ...aber  nur  Hipster  nutzen  es?  
29. ShowCase  
30. Ionic  Templates  für  Visual  Studio  
31. ionic  View   •  Sandbox  für  App´s   •  Teilen  von  Apps  ohne  ZerMfikate  möglich   •  Prima  für  Kunden   •  Invite  per  Email   •  Hardwarezugriff   funkMoniert   •  kostenloser  Download   im  AppStore  
32. ionicPush   •  Service  von  DriCy   •  aktuell  in  der  closed  Alpha   •  AnalyMcs  und  Mgmt-­‐Tools  möglich   •  alternaMve  zum  generischem   Plugin  von  Cordova   •  Pricing  nicht  vorhanden  
33. GUI  in  der  Beta   hqp://creator.ionic.io/  
34. Ionic  Playground   hqp://play.ionic.io/  
35. Vorbereitung  zum  Start   •  iOS  -­‐>  Xcode     •  android  -­‐>  Google  SDK  (17)   •  npm  install  –g  ios-­‐sim  
36. ionicons   •  100  %  freie  Icons  (MIT)   •  Als  CSS-­‐Klasse  nutzbar   •  hqp://ionicons.com/  
37. Erste  Schriqe   •  $  npm  install  –g  ionic  cordova   •  dann  
38. Mögliche  weitere  Schriqe   •  Template  auswählen:   – $  ionic  start  myApp  blank   – $  ionic  start  myApp  tabs   – $  ionic  start  myApp  sidemenu   •  Pla(orm  Support   – $  ionic  pla(orm  add  ios   – $  ionic  pla(orm  add  android   – $  ionic  pla(orm  add  windowsphone  
39. DokumentaMon   hqp://ionicframework.com/docs/api/  
40. Developer  Loop   •  $  ionic  serve     •  $  ionic    [run|emulate]  <pla(orm>  [opMons]   – [-­‐-­‐livereload|-­‐l]  LiveReload  auf  dem  Device   – [-­‐-­‐consolelogs|-­‐c]  Applogs  auf  der  Ionic  CLI   – [-­‐-­‐serverlogs|-­‐s]  Serverlogs  auf  der  Ionic  CLI     $  ionic  run  ios  -­‐-­‐livereload  -­‐-­‐consolelogs  -­‐-­‐ serverlogs  
41. Ionic  Projektstruktur   •  www  -­‐>  place  to  work  (index.html)   •  plugins  -­‐>  place  for  cordova  plugins   •  scss  -­‐>  like  to  assemble  your  sass   •  hooks  -­‐>  internal  stuff  like  cordova  hooks   •  config.xml  -­‐>  cordovas  manifest  
42. Ionic  UMls      var  deviceInformation  =  ionic.Platform.device();        var  isWebView  =  ionic.Platform.isWebView();      var  isIPad  =  ionic.Platform.isIPad();      var  isIOS  =  ionic.Platform.isIOS();      var  isAndroid  =  ionic.Platform.isAndroid();      var  isWindowsPhone  =  ionic.Platform.isWindowsPhone();        var  currentPlatform  =  ionic.Platform.platform();      var  currentPlatformVersion  =  ionic.Platform.version();        ionic.Platform.exitApp();  //  stops  the  app  
44. ngCordova   •  Layer  der  über  Apache  Cordova  liegt   •  Vereinfachung  der  cordova-­‐api   •  Nutzt  Promises  staq  Callbacks   •  Stellt  eine  Angular-­‐freundliche  Api  bereit  
45. ngCrodova  einbinden   $  bower  install  -­‐-­‐save  ngCordova   •  index.html  erweitern   <script  src="lib/ngCordova/dist/ng-­‐ cordova.min.js"></script>   •  app.js  erweitern   angular.module('starter',  ['ngCordova',...])   •  Cordova  Plugins  laden   $  cordova  plugin  add   org.apache.cordova.camera  
46. Bisher  bei  Cordova   navigator.camera.getPicture(onSuccess,  onFail,  {  quality:  50,          desMnaMonType:  Camera.DesMnaMonType.DATA_URL   });     funcMon  onSuccess(imageData)  {          var  image  =  document.getElementById('myImage');          image.src  =  "data:image/jpeg;base64,"  +  imageData;   }     funcMon  onFail(message)  {          alert('Failed  because:  '  +  message);   }  
47.  mit  ngCordova   module.controller('PictureCtrl',  function($scope,  $cordovaCamera)  {        $scope.takePicture  =  function()  {          $cordovaCamera.getPicture({            }).then(function(imageData)  {                //  Success!  Image  data  is  here            },  function(err)  {                //  An  error  occured.  Show  a  message  to  the  user            });      }     });  
48. Farben  und  Style   •  default  css  @  index.html   <link  href="lib/ionic/css/ionic.css"   rel="stylesheet">   <link  href="css/style.css"   rel="stylesheet">   ...aber  es  geht  auch  anders  
49. Anpassungs  durch  SASS   •  Support  für  Sass  laden   $  ionic  setup  sass   •  Sass-­‐Source  liegt  im  Projekt  unter   scss/ionic.app.scss     •  Änderungen  werden  automaMsch  übernommen   $  ionic  serve  
50. collecMon-­‐repeat  vs.  ngRepeat   •  Renderd  im  DOM  nur  was  aktuell  sichtbar  ist     <ion-­‐content>      <ion-­‐item  collection-­‐repeat="item  in  items">          {{item}}      </ion-­‐item>   </ion-­‐content>  
51.          Die  ZukunC  
52. Ionic  -­‐  Demo  
53. hqps://www.flickr.com/photos/davidrn/  
54. DANKE!   Marcus  Ross  –  Zahlenhelfer  ConsulMng  -­‐  @zahlenhelfer   alle  Folien  auch  auf  www.speakerdeck.com/u/zahlenhelfer