Devoxx 2015, ionic chat

2 027 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 027
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
17
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Devoxx 2015, ionic chat

  1. 1. 3h pour créer une application mobile de chat Par Loïc Knuchel (@loicknuchel) et Loïc Delmaire (@loicdelmaire)
  2. 2. Loïc Knuchel Développeur web full-stack Fondateur de SalooN Fan de depuis l’alpha ;) Me contacter : loicknuchel@gmail.com - @loicknuchel - http://loic.knuchel.org/
  3. 3. Loïc Delmaire Développeur web full-stack CTO & co-founder de Jam, l’assistant personnel pour les étudiants. Me contacter : loic@justjam.at - @loicdelmaire - Jam: https://beta.meetj.am
  4. 4. Défi !
  5. 5. Créer une application mobile de chat en 3h ;)
  6. 6. Cool, non ?
  7. 7. Bien s’organiser : ★ Bons outils : ✔ Ionic ✔ Firebase ★ Pair programming ?
  8. 8. Framework UI spécialisé mobile et basé sur Angular - Styles - Directives - Outils
  9. 9. Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges AngularJS Ionic Votre application Stack technologique
  10. 10. Ionic, c’est le bootstrap des applications mobiles hybrides (et bien plus...)
  11. 11. ● 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
  12. 12. <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
  13. 13. $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); });
  14. 14. 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
  15. 15. 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/
  16. 16. Getting started $ git clone … && cd … $ npm install $ bower install $ ionic serve --lab PS: Bien lire le help-angular.md
  17. 17. A vos claviers ;)

×