Devoxx 2015, Atelier Ionic - 09/04/2015

1 956 vues

Publié le

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

Publié dans : Logiciels
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

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

×