Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Devoxx 2015, Atelier Ionic - 09/04/2015

2,870 views

Published on

Devoxx est la plus grosse conférance française de développeurs. Cette année, j'ai eu la chance de pouvoir y présenter un atelier sur Ionic Framework. L'objectif de cet atelier était de faire développer aux participants une application de chat en utilisant Firebase comme backend.

Les instructions de l'atelier se trouvent ici : https://github.com/loicknuchel/devoxx-2015-ionic-chat

Published in: Software
  • Be the first to comment

Devoxx 2015, Atelier Ionic - 09/04/2015

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

×