Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Construire un application hybride de qualité !
@loicknuchel
Loïc Knuchel
● Développeur web freelance
● Startuper
● Organisateur des HumanTalks, Bagger
Me contacter : loicknuchel@gmai...
Il vous faut une application mobile ?
Pour quoi faire ?
Avec quelles contraintes ?
Et quel contexte ?
Gagner un hackthon
Un outil interneTester une idée
Avoir u...
Native vs Hybride
Des smartphones puissants !
1.4 GHz
dual-core
Avec de bons navigateurs
Et des outils efficaces...
L’hybride offre un bon rapport
qualité/prix est convient dans la
plupart des cas
“Hello”
Cordova
“Apache Cordova is a platform for building
native mobile applications using HTML, CSS
and JavaScript”
● 2009: Nito...
AngularJS
● Framework JavaScript MVC le plus
populaire actuellement.
● Créé par Google.
Ionic
Ensemble de composants permettant de créer facilement
une application mobile hybride.
● Composants UI optimisés pour...
Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic
Votre application
Stack technolo...
Composants Ionic
<ion-header-bar class="bar-positive">
<h1 class="title">Home</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<div ...
<ion-header-bar class="bar-positive">
<h1 class="title">Pull To Refresh ...</h1>
</ion-header-bar>
<ion-content>
<ion-refr...
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon ion-navic...
Composant: Tabs
<ion-tabs class="tabs-striped tabs-top tabs-color-calm">
<ion-tab title="Timeline" icon-on="ion-social-twi...
Composant: Popover
.controller('MainCtrl', function($scope, $ionicPopover) {
$scope.user = {avatar: 'venkman.jpg', name: '...
Menu: markup
<ion-header-bar class="bar-calm">
<h1 class="title">Timeline</h1>
<button class="button button-icon ion-more"...
Et beaucoup d’autres
● Modal
● Popup
● Action Sheet
● Form (Toggle, Range, Select, Checkbox,
Radio...)
● Loading
● Slide B...
Getting started
Installer Ionic et Cordova
$ npm install -g cordova ionic
Ionic templates
$ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu
Lancer l’application
● Dans le navigateur
● Sur son téléphone (usb) ou sur l’émulateur
$ ionic serve --lab
$ ionic platfor...
Ionic SDK
● Livereload
● Génération d’icones & splash screens
● Intégration de Crosswalk
ngCordova
AdMob
App Avaiability
App Rate
ActionSheet
App Version
Badge
Background Geolocation
Battery Status
Barcode Scann...
Ionic Ions
http://ions.ionic.io/
Ionic Creator
Ionic View
Ionic Backend
● Push
● Analytics
● A/B testing
● LiveUpdate
● Packaging
Et d’autres initiatives...
Tip #1: /! Cache Ionic des vues
Attention au cycle de vie des vues & controllers
.controller('MyCtrl', function($scope){
'...
Tip #2 : Mock des plugins
ngCordovaMocks : mocks pour ngCordova
cordova.js : simuler les fonctions natives
Tip #3 : JavaScript = Monothread
.controller('MyCtrl', function($scope){
'use strict';
// heavy work...
// app & animation...
Tip #3 : JavaScript = Monothread
.controller('MyCtrl', function($scope){
'use strict';
// better...
$scope.$on('$ionicView...
Tip #3 : JavaScript = Monothread
.controller('MyCtrl', function($scope){
'use strict';
// best... but MUST avoid heady wor...
Tip #4 : Bien gérer le LocalStorage
● /! sérialisation : opération lourde si objet volumineux
(cache par ex !)
● Éviter ng...
Tip #5 : $digest & DOM
● Utiliser au maximum le “one-time-binding”
de AngularJS (ex: {{::user.name}})
● Utiliser le collec...
Liens
http://ionicframework.com/docs/components/ : Composants standards Ionic
http://learn.ionicframework.com/ : Tutoriels...
Merci :)
Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015
Prochain SlideShare
Chargement dans…5
×

Ionic bbl le 19 février 2015

4 969 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
  • Soyez le premier à commenter

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 :)

×