Upload
loic-knuchel
View
1.834
Download
4
Embed Size (px)
Citation preview
Construire un application hybride de qualité !
@loicknuchel
Loïc Knuchel
● Développeur web freelance
● Startuper
● Organisateur des HumanTalks, Bagger
Me contacter : [email protected] - @loicknuchel - http://loic.knuchel.org/blog/
Il vous faut une application mobile ?
Pour quoi faire ?
Avec quelles contraintes ?
Et quel contexte ?
Gagner un hackthonUn outil interneTester une idée
Avoir une application hype
Développement rapide
Pas cher
Mutli-plateforme dès le débutApplication stratégique
Equipe en placeStartup
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: Nitobi crée PhoneGap● 2011: Adobe rachète PhoneGap● 2012: PhoneGap est cédé à Apache sous le nom de Cordova
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 le mobile● Animations● Gestures
Créé par
Natif
Web
Téléphone & APIs natives
Cordova : webview +JavaScript bridges
AngularJS
Ionic
Votre applicationStack technologique
Composants Ionic
<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
<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
<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
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>
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; });});
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>
Et beaucoup d’autres● Modal● Popup● Action Sheet● Form (Toggle, Range, Select, Checkbox,
Radio...)● Loading● Slide Box● Backdrop
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 platform add [android/ios]
$ ionic [run/emulate] [android/ios]
Ionic SDK
● Livereload
● Génération d’icones & splash screens
● Intégration de Crosswalk
ngCordovaAdMob
App AvaiabilityApp Rate
ActionSheet
App VersionBadge
Background GeolocationBattery Status
Barcode ScannerCalendarCameraCapture
ClipboardContacts
Date pickerDevice
Device MotionDevice Orientation
DialogsEmail Composer
FacebookFile
File TransferFileOpener2
SQLiteSplashscreenSocial Sharing
Vibration
SMSPush NotificationsProgress IndicatorPrinterPreferencesPin DialogOAuthNetworkNative AudioMediaLocal NotificationKeychain
KeyboardIn App Browser
Image PickerHealth Kit
Google AnalyticsGlobalization
GeolocationFlashlight
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){
'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/
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 & animations will freeze :(
for(var i=0; i<1000; i++){
console.log(i);
}
})
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);
}
});
})
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));
}
});
})
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
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
Lienshttp://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
Merci :)