Ionic bbl le 19 février 2015

4 638 vues

Publié le

Introduction à Ionic Framework et son écosystème :
* Choisir la technologie de son application mobile : hybride vs natif
* Présentation de Cordova, AngularJS et Ionic Framework
* Exemples de composants Ionic avec le code associé
* Comment démarrer son application Ionic
* L'écosystème Ionic : Ionic CLI, ngCordova, Ionic Lab, Ionic Creator, Ionic View & Ionic Backend...
* Points d'attentions pour avoir une application qui fonctionne bien : cycle de vie des vues et contrôleurs, mocker ses plugin cordova, ne pas faire de traitement lourd, bien gérer le cache (localStorage)
* Liens utiles :
- http://codepen.io/ionic/public-list/ : exemples de composants
- https://github.com/loicknuchel/ionic-starter

Publié dans : Logiciels
0 commentaire
6 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 638
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 120
Actions
Partages
0
Téléchargements
157
Commentaires
0
J’aime
6
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Ionic bbl le 19 février 2015

  1. 1. Construire un application hybride de qualité ! @loicknuchel
  2. 2. Loïc Knuchel ● Développeur web freelance ● Startuper ● Organisateur des HumanTalks, Bagger Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/blog/
  3. 3. Il vous faut une application mobile ?
  4. 4. Pour quoi faire ? Avec quelles contraintes ? Et quel contexte ? Gagner un hackthon Un outil interneTester une idée Avoir une application hype Développement rapide Pas cher Mutli-plateforme dès le début Application stratégique Equipe en place Startup
  5. 5. Native vs Hybride
  6. 6. Des smartphones puissants ! 1.4 GHz dual-core
  7. 7. Avec de bons navigateurs
  8. 8. Et des outils efficaces...
  9. 9. L’hybride offre un bon rapport qualité/prix est convient dans la plupart des cas
  10. 10. “Hello”
  11. 11. Cordova “Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript” ● 2009: Nitobi crée PhoneGap ● 2011: Adobe rachète PhoneGap ● 2012: PhoneGap est cédé à Apache sous le nom de Cordova
  12. 12. AngularJS ● Framework JavaScript MVC le plus populaire actuellement. ● Créé par Google.
  13. 13. Ionic Ensemble de composants permettant de créer facilement une application mobile hybride. ● Composants UI optimisés pour le mobile ● Animations ● Gestures Créé par
  14. 14. Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges AngularJS Ionic Votre application Stack technologique
  15. 15. Composants Ionic
  16. 16. <ion-header-bar class="bar-positive"> <h1 class="title">Home</h1> </ion-header-bar> <ion-content> <div class="list"> <div class="item item-divider">List Icons</div> <a class="item item-icon-left item-icon-right" href="#"> <i class="icon ion-chatbubble"></i> Call Ma <i class="icon ion-ios-telephone-outline"></i> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-email"></i> Emails <span class="badge badge-assertive">0</span> </a> <a class="item item-icon-left" href="#"> <i class="icon ion-mic-a"></i> Record album <span class="item-note">Grammy</span> </a> <div class="item item-divider">List Avatar</div> <a class="item item-avatar" href="#"> <img src="http://ionicframework.com/img/docs/spengler.jpg"> <h2>Egon</h2> <p>We're gonna go full stream.</p> </a> </div> </ion-content> Composant: Lists http://codepen.io/loicknuchel/pen/GgxWwJ
  17. 17. <ion-header-bar class="bar-positive"> <h1 class="title">Pull To Refresh ...</h1> </ion-header-bar> <ion-content> <ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher> <div class="list"> <div class="item" ng-repeat="item in items"> Item {{item}} </div> </div> </ion-content> .controller('MainCtrl', function($scope) { $scope.items = [1, 2, 3]; $scope.doRefresh = function() { setTimeout(function(){ $scope.items.push($scope.items.length + 1); $scope.$broadcast('scroll.refreshComplete'); }, 1000); }; }); Composant: Pull To Refresh http://codepen.io/loicknuchel/pen/EaEmYG
  18. 18. <ion-side-menus> <ion-side-menu-content> <ion-header-bar class="bar-positive"> <button class="button button-icon ion-navicon" menu-toggle="left" ng-hide="$exposeAside.active"></button> <h1 class="title">Home</h1> </ion-header-bar> <ion-content class="padding"> <p>Hi !</p> </ion-content> </ion-side-menu-content> <ion-side-menu expose-aside-when="large"> <ion-header-bar class="bar-royal"> <h1 class="title">Left Menu</h1> </ion-header-bar> <ion-content> <div class="list"> <a class="item" ui-sref="app.page1" nav-clear menu-close>Page 1</a> <a class="item" ui-sref="app.page2" nav-clear menu-close>Page 2</a> </div> </ion-content> </ion-side-menu> </ion-side-menus> Composant: Sidemenu http://codepen.io/loicknuchel/pen/ByrWrj
  19. 19. Composant: Tabs <ion-tabs class="tabs-striped tabs-top tabs-color-calm"> <ion-tab title="Timeline" icon-on="ion-social-twitter" icon-off="ion-social-twitter- outline"> <!-- Tab 1 content --> </ion-tab> <ion-tab title="Messages" icon-on="ion-ios-chatboxes" icon-off="ion-ios-chatboxes-outline"> <!-- Tab 2 content --> </ion-tab> <ion-tab title="Profil" icon-on="ion-ios-person" icon-off="ion-ios-person-outline"> <!-- Tab 3 content --> </ion-tab> </ion-tabs>
  20. 20. Composant: Popover .controller('MainCtrl', function($scope, $ionicPopover) { $scope.user = {avatar: 'venkman.jpg', name: 'Venkman', account: '@venkman'}; $ionicPopover.fromTemplateUrl('menu-popover.html', { scope: $scope, }).then(function(popover) { $scope.popover = popover; }); });
  21. 21. Menu: markup <ion-header-bar class="bar-calm"> <h1 class="title">Timeline</h1> <button class="button button-icon ion-more" ng-click="popover.show($event)"></button> </ion-header-bar> <script id="menu-popover.html" type="text/ng-template"> <ion-popover-view> <ion-content> <div class="list"> <a class="item item-avatar" href="#"> <img ng-src="http://ionicframework.com/img/docs/{{user.avatar}}"> <h2>{{user.name}}</h2> <p>{{user.account}}</p> </a> <a class="item" href="#">Listes</a> <a class="item" href="#">Brouillons</a> <a class="item" href="#">Comptes</a> <a class="item" href="#">Paramètres</a> </div> </ion-content> </ion-popover-view> </script>
  22. 22. Et beaucoup d’autres ● Modal ● Popup ● Action Sheet ● Form (Toggle, Range, Select, Checkbox, Radio...) ● Loading ● Slide Box ● Backdrop
  23. 23. Getting started
  24. 24. Installer Ionic et Cordova $ npm install -g cordova ionic
  25. 25. Ionic templates $ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu
  26. 26. Lancer l’application ● Dans le navigateur ● Sur son téléphone (usb) ou sur l’émulateur $ ionic serve --lab $ ionic platform add [android/ios] $ ionic [run/emulate] [android/ios]
  27. 27. Ionic SDK
  28. 28. ● Livereload ● Génération d’icones & splash screens ● Intégration de Crosswalk
  29. 29. ngCordova AdMob App Avaiability App Rate ActionSheet App Version Badge Background Geolocation Battery Status Barcode Scanner Calendar Camera Capture Clipboard Contacts Date picker Device Device Motion Device Orientation Dialogs Email Composer Facebook File File Transfer FileOpener2 SQLite Splashscreen Social Sharing Vibration SMS Push Notifications Progress Indicator Printer Preferences Pin Dialog OAuth Network Native Audio Media Local Notification Keychain Keyboard In App Browser Image Picker Health Kit Google Analytics Globalization Geolocation Flashlight
  30. 30. Ionic Ions http://ions.ionic.io/
  31. 31. Ionic Creator
  32. 32. Ionic View
  33. 33. Ionic Backend ● Push ● Analytics ● A/B testing ● LiveUpdate ● Packaging
  34. 34. Et d’autres initiatives...
  35. 35. Tip #1: /! Cache Ionic des vues Attention au cycle de vie des vues & controllers .controller('MyCtrl', function($scope){ 'use strict'; // first initialization $scope.$on('$ionicView.enter', function(){ // on view enter (active) }); $scope.$on('$ionicView.leave', function(){ // on view leave (cached or destroyed) }); }) http://ionicframework.com/docs/api/directive/ionView/
  36. 36. Tip #2 : Mock des plugins ngCordovaMocks : mocks pour ngCordova cordova.js : simuler les fonctions natives
  37. 37. Tip #3 : JavaScript = Monothread .controller('MyCtrl', function($scope){ 'use strict'; // heavy work... // app & animations will freeze :( for(var i=0; i<1000; i++){ console.log(i); } })
  38. 38. Tip #3 : JavaScript = Monothread .controller('MyCtrl', function($scope){ 'use strict'; // better... $scope.$on('$ionicView.afterEnter', function(){ for(var i=0; i<1000; i++){ console.log(i); } }); })
  39. 39. Tip #3 : JavaScript = Monothread .controller('MyCtrl', function($scope){ 'use strict'; // best... but MUST avoid heady work ! $scope.$on('$ionicView.afterEnter', function(){ for(var i=0; i<1000; i++){ window.requestAnimationFrame(console.log(i)); } }); })
  40. 40. Tip #4 : Bien gérer le LocalStorage ● /! sérialisation : opération lourde si objet volumineux (cache par ex !) ● Éviter ngStorage pour le mobile (sérialisations “intempestives”) ● Utiliser angular-localForage ● Ajouter un cache en mémoire : storage-utils.js
  41. 41. Tip #5 : $digest & DOM ● Utiliser au maximum le “one-time-binding” de AngularJS (ex: {{::user.name}}) ● Utiliser le collection-repeat de Ionic pour les longues listes
  42. 42. Liens http://ionicframework.com/docs/components/ : Composants standards Ionic http://learn.ionicframework.com/ : Tutoriels Ionic http://codepen.io/ionic/public-list/ : Examples de composants Ionic http://ngcordova.com/ : Wrappers AngularJS pour les plugins Cordova http://mcgivery.com/ : Blog fourni en articles sur Ionic https://github.com/loicknuchel/ionic-starter : Démarrer rapidement un projet Ionic
  43. 43. Merci :)

×