Devoxx 2015, ionic chat

24
3h pour créer une application mobile de chat Par Loïc Knuchel (@loicknuchel ) et Loïc Delmaire (@loicdelmaire )

Transcript of Devoxx 2015, ionic chat

Page 1: Devoxx 2015, ionic chat

3h pour créer une application mobile de chat

Par Loïc Knuchel (@loicknuchel) et Loïc Delmaire (@loicdelmaire)

Page 2: Devoxx 2015, ionic chat

Loïc Knuchel

Développeur web full-stack

Fondateur de SalooN

Fan de depuis l’alpha ;)

Me contacter : [email protected] - @loicknuchel - http://loic.knuchel.org/

Page 3: Devoxx 2015, ionic chat

Loïc Delmaire

Développeur web full-stack

CTO & co-founder de Jam, l’assistant personnel pour les étudiants.

Me contacter : [email protected] - @loicdelmaire - Jam: https://beta.meetj.am

Page 4: Devoxx 2015, ionic chat
Page 5: Devoxx 2015, ionic chat
Page 6: Devoxx 2015, ionic chat
Page 7: Devoxx 2015, ionic chat

Défi !

Page 8: Devoxx 2015, ionic chat

Créer une application mobile de chat en 3h ;)

Page 9: Devoxx 2015, ionic chat
Page 10: Devoxx 2015, ionic chat
Page 11: Devoxx 2015, ionic chat
Page 12: Devoxx 2015, ionic chat

Cool, non ?

Page 13: Devoxx 2015, ionic chat

Bien s’organiser :

★ Bons outils :✔ Ionic✔ Firebase

★ Pair programming ?

Page 14: Devoxx 2015, ionic chat
Page 15: Devoxx 2015, ionic chat

Framework UI spécialisé mobile et basé sur Angular

- Styles- Directives- Outils

Page 16: Devoxx 2015, ionic chat

Natif

Web

Téléphone & APIs natives

Cordova : webview +JavaScript bridges

AngularJS

Ionic

Votre applicationStack technologique

Page 17: Devoxx 2015, ionic chat

Ionic, c’est le bootstrap des applications mobiles

hybrides (et bien plus...)

Page 18: Devoxx 2015, ionic chat

● collection-repeat: un ng-repeat efficace pour de listes longues

<div class="list"> <div class="item item-avatar" collection-repeat="user in users"> <img ng-src="{{user.avatar}}"/> <h2>{{user.name}}</h2> <p>{{user.description}}</p> </div></div>

Listes

Page 19: Devoxx 2015, ionic chat

<ion-view>

<ion-header-bar class="bar-positive"> <h1 class="title">Header</h1> <button class="button button-clear icon ion-settings"></button> </ion-header-bar>

<ion-content> </ion-content>

<ion-footer-bar class="bar-dark"> <div class="title">Footer</div> </ion-footer-bar>

</ion-view>

Header, Footer & Content

Page 20: Devoxx 2015, ionic chat

$ionicPopup$ionicPopup.show({ template: '<input type="password" ng-model="data.wifi">', title: 'Enter Wi-Fi Password', subTitle: 'Please use normal things', scope: $scope, buttons: [ { text: 'Cancel' }, { text: '<b>Save</b>', type: 'button-positive', onTap: function(e) { if (!$scope.data.wifi) { //don't allow the user to close unless he enters wifi password e.preventDefault(); } else { return $scope.data.wifi; } } } ]}).then(function(code){ console.log('code', code);});

Page 21: Devoxx 2015, ionic chat

Déroulement du Hands-on

● présentation du projet (done !)

● sprints de 20/30 min puis correction sous forme de live-code

● pause à la mi-temps

Page 22: Devoxx 2015, ionic chat

Ressources :

● Le workshop : http://bit.ly/devoxx-ionic-chat

● CheatSheet Angular : help-angular.md (dans le repo)

● Doc Ionic : http://ionicframework.com/docs/components/

● Icônes Ionic : http://ionicons.com/

● API Angular : https://docs.angularjs.org/api/

● Docs Firebase : https://www.firebase.com/docs/web/

● Docs Angularfire : https://www.firebase.com/docs/web/libraries/angular/

Page 23: Devoxx 2015, ionic chat

Getting started

$ git clone … && cd … $ npm install$ bower install$ ionic serve --lab

PS: Bien lire le help-angular.md

Page 24: Devoxx 2015, ionic chat

A vos claviers ;)