Devoxx 2015, Atelier Ionic - 09/04/2015

Loïc Knuchel
Loïc KnuchelScala tech lead at Gospeak
3h pour créer une application mobile de chat
Par Loïc Knuchel (@loicknuchel) et Loïc Delmaire (@loicdelmaire)
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/
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
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015
Défi !
Créer une application mobile de chat en 3h ;)
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015
Devoxx 2015, Atelier Ionic - 09/04/2015
Cool, non ?
Bien s’organiser :
★ Bons outils :
✔ Ionic
✔ Firebase
★ Pair programming ?
Devoxx 2015, Atelier Ionic - 09/04/2015
Framework UI spécialisé mobile
et basé sur Angular
- Styles
- Directives
- Outils
Natif
Web
Téléphone & APIs natives
Cordova : webview +
JavaScript bridges
AngularJS
Ionic
Votre application
Stack technologique
Ionic, c’est le bootstrap
des applications mobiles
hybrides (et bien plus...)
● 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
<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
$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);
});
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
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/
Getting started
$ git clone … && cd …
$ npm install
$ bower install
$ ionic serve --lab
PS: Bien lire le help-angular.md
A vos claviers ;)
1 of 24

Recommended

Devoxx 2015, ionic chat by
Devoxx 2015, ionic chatDevoxx 2015, ionic chat
Devoxx 2015, ionic chatLoïc Knuchel
2.5K views24 slides
Devoxx France 2015 - Introduction à Ionic framework by
Devoxx France 2015 - Introduction à Ionic frameworkDevoxx France 2015 - Introduction à Ionic framework
Devoxx France 2015 - Introduction à Ionic frameworkStéphanie Moallic
1.9K views24 slides
Breizhcamp 2015 Ionic Framework by
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkStéphanie Moallic
1.1K views17 slides
Présentation Ionic Framework by
Présentation Ionic FrameworkPrésentation Ionic Framework
Présentation Ionic FrameworkNdongo Samb
1.9K views31 slides
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015 by
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015
Le développement mobile hybride sort du bois, Ch'ti JUG le 15-04-2015Loïc Knuchel
3.4K views47 slides
BlendWebMix - Concevez rapidement vos applications mobiles by
BlendWebMix - Concevez rapidement vos applications mobilesBlendWebMix - Concevez rapidement vos applications mobiles
BlendWebMix - Concevez rapidement vos applications mobilesStéphanie Moallic
724 views22 slides

More Related Content

What's hot

Panorama des solutions mobile hybrides by
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybridesekino
4.4K views79 slides
Panorama des Technologies mobiles by
Panorama des Technologies mobilesPanorama des Technologies mobiles
Panorama des Technologies mobilesAbdoulaye Dieng
91 views19 slides
Dev Fest Nantes - Ionic le développement hybride mobile fun et productif by
Dev Fest Nantes - Ionic le développement hybride mobile fun et productifDev Fest Nantes - Ionic le développement hybride mobile fun et productif
Dev Fest Nantes - Ionic le développement hybride mobile fun et productifStéphanie Moallic
607 views44 slides
Ionic, react native, native script by
Ionic, react native, native scriptIonic, react native, native script
Ionic, react native, native scriptStéphanie MOALLIC
1.8K views39 slides
Réaliser une application mobile pour un groupe de presse avec PhoneGap by
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGapBenjamin LUPU
5K views26 slides
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit by
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKituncatcrea
2K views10 slides

What's hot(20)

Panorama des solutions mobile hybrides by ekino
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
ekino4.4K views
Dev Fest Nantes - Ionic le développement hybride mobile fun et productif by Stéphanie Moallic
Dev Fest Nantes - Ionic le développement hybride mobile fun et productifDev Fest Nantes - Ionic le développement hybride mobile fun et productif
Dev Fest Nantes - Ionic le développement hybride mobile fun et productif
Stéphanie Moallic607 views
Réaliser une application mobile pour un groupe de presse avec PhoneGap by Benjamin LUPU
Réaliser une application mobile pour un groupe de presse avec PhoneGapRéaliser une application mobile pour un groupe de presse avec PhoneGap
Réaliser une application mobile pour un groupe de presse avec PhoneGap
Benjamin LUPU5K views
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit by uncatcrea
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKitConstruire une Application Mobile en 30 minutes avec le plugin WP-AppKit
Construire une Application Mobile en 30 minutes avec le plugin WP-AppKit
uncatcrea2K views
Développer des applications mobiles avec phonegap by Makina Corpus
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
Makina Corpus2K views
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015 by Loïc Knuchel
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Ionic Framework, L'avenir du mobile sera hybride, bdx.io le 16-10-2015
Loïc Knuchel2.8K views
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android by Bosco Basabana
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour androidDébuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
Bosco Basabana5.4K views
Kinect pour les développeurs Web by ekino
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
ekino2.3K views
jQuery mobile / PhoneGap : contenus dynamiques client-side by maru.maru
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
maru.maru6.3K views
Phonegap by VISEO
PhonegapPhonegap
Phonegap
VISEO1.9K views
J'ai fait une app native en React Native by CocoaHeads France
J'ai fait une app native en React NativeJ'ai fait une app native en React Native
J'ai fait une app native en React Native
CocoaHeads France5.5K views
Tuto Phonegap by SUN
Tuto PhonegapTuto Phonegap
Tuto Phonegap
SUN1.4K views
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks... by Raphaël Kueny
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Introduction au développement mobile avec Titanium Appcelerator @ Human Talks...
Raphaël Kueny2K views
PhoneGap VS Appcelerator by Tiyab K.
PhoneGap VS AppceleratorPhoneGap VS Appcelerator
PhoneGap VS Appcelerator
Tiyab K.14.2K views
Présentation retour d'experience sur l'application MyLittleParis by CocoaHeads France
Présentation retour d'experience sur l'application MyLittleParisPrésentation retour d'experience sur l'application MyLittleParis
Présentation retour d'experience sur l'application MyLittleParis
CocoaHeads France5.4K views

Viewers also liked

Mta by
MtaMta
MtaTECOS
752 views1 slide
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi... by
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...Grégoire Arnould
2.8K views85 slides
Angular 4 - ngfor -- Français by
Angular 4  - ngfor -- FrançaisAngular 4  - ngfor -- Français
Angular 4 - ngfor -- FrançaisVERTIKA
789 views16 slides
Meet up paris 13 of jun 2017 by
Meet up paris 13 of jun 2017Meet up paris 13 of jun 2017
Meet up paris 13 of jun 2017Jasmine Conseil
256 views33 slides
Traitement numérique des images - Projet Android "Virtual Pong" - Présentation by
Traitement numérique des images - Projet Android "Virtual Pong" - PrésentationTraitement numérique des images - Projet Android "Virtual Pong" - Présentation
Traitement numérique des images - Projet Android "Virtual Pong" - PrésentationValentin Thirion
902 views12 slides
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur... by
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...Mathias Seguy
5.8K views71 slides

Viewers also liked(20)

Mta by TECOS
MtaMta
Mta
TECOS752 views
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi... by Grégoire Arnould
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...
La Veille en E-Réputation et Community Management [2/3] : Outils, méthodologi...
Grégoire Arnould2.8K views
Angular 4 - ngfor -- Français by VERTIKA
Angular 4  - ngfor -- FrançaisAngular 4  - ngfor -- Français
Angular 4 - ngfor -- Français
VERTIKA789 views
Traitement numérique des images - Projet Android "Virtual Pong" - Présentation by Valentin Thirion
Traitement numérique des images - Projet Android "Virtual Pong" - PrésentationTraitement numérique des images - Projet Android "Virtual Pong" - Présentation
Traitement numérique des images - Projet Android "Virtual Pong" - Présentation
Valentin Thirion902 views
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur... by Mathias Seguy
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Conférence "Architecture Android" du 19 Mars 2013 par Mathias Seguy fondateur...
Mathias Seguy5.8K views
Développement Android by Franck SIMON
Développement AndroidDéveloppement Android
Développement Android
Franck SIMON27.7K views
Algea - 04 - conclusion by Yann Caron
Algea - 04 - conclusionAlgea - 04 - conclusion
Algea - 04 - conclusion
Yann Caron423 views
01 programmation mobile - android - (introduction) by TECOS
01 programmation mobile - android - (introduction)01 programmation mobile - android - (introduction)
01 programmation mobile - android - (introduction)
TECOS1.6K views
Radio cognitive et intelligence artificielle by benouini rachid
Radio cognitive et intelligence artificielleRadio cognitive et intelligence artificielle
Radio cognitive et intelligence artificielle
benouini rachid4.8K views
Mobilization 2017: Don't lose your users because of endless quality issues by Olivier Destrebecq
Mobilization 2017: Don't lose your users because of endless quality issuesMobilization 2017: Don't lose your users because of endless quality issues
Mobilization 2017: Don't lose your users because of endless quality issues
Olivier Destrebecq382 views
04 programmation mobile - android - (db, receivers, services...) by TECOS
04 programmation mobile - android - (db, receivers, services...)04 programmation mobile - android - (db, receivers, services...)
04 programmation mobile - android - (db, receivers, services...)
TECOS898 views
1cours virologie généralités (1) by imlen gan
1cours virologie généralités (1)1cours virologie généralités (1)
1cours virologie généralités (1)
imlen gan2.8K views
Andcx formation-android-avance-creation-d-applications-complexes by CERTyou Formation
Andcx formation-android-avance-creation-d-applications-complexesAndcx formation-android-avance-creation-d-applications-complexes
Andcx formation-android-avance-creation-d-applications-complexes
CERTyou Formation402 views
Android Studio, premier contact by Jasmine Conseil
Android Studio, premier contactAndroid Studio, premier contact
Android Studio, premier contact
Jasmine Conseil4.9K views
Support de la formation Android 5 , Avancé by Alphorm
Support de la formation Android 5 , Avancé Support de la formation Android 5 , Avancé
Support de la formation Android 5 , Avancé
Alphorm13.8K views

Similar to Devoxx 2015, Atelier Ionic - 09/04/2015

Parlons App Economie : du dev à l'usage by
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageLaFrenchMobile
1.2K views112 slides
Web Mobile : quelles opportunités face aux apps ? by
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
7.4K views76 slides
Offre migrer vers_flutter by
Offre migrer vers_flutterOffre migrer vers_flutter
Offre migrer vers_flutterJulien Saumande
33 views14 slides
Veille sur : Web 2.0, Web 3.0, Social Media et Real Time Web by
Veille sur : Web 2.0, Web 3.0, Social Media et Real Time WebVeille sur : Web 2.0, Web 3.0, Social Media et Real Time Web
Veille sur : Web 2.0, Web 3.0, Social Media et Real Time Webmaclic
985 views18 slides
Gtug2 Mobile app with web technlogy by
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
496 views28 slides
Meetup sencha by
Meetup senchaMeetup sencha
Meetup senchatakeshi iri
312 views25 slides

Similar to Devoxx 2015, Atelier Ionic - 09/04/2015(20)

Parlons App Economie : du dev à l'usage by LaFrenchMobile
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
LaFrenchMobile1.2K views
Web Mobile : quelles opportunités face aux apps ? by NiceToMeetYou
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
NiceToMeetYou7.4K views
Veille sur : Web 2.0, Web 3.0, Social Media et Real Time Web by maclic
Veille sur : Web 2.0, Web 3.0, Social Media et Real Time WebVeille sur : Web 2.0, Web 3.0, Social Media et Real Time Web
Veille sur : Web 2.0, Web 3.0, Social Media et Real Time Web
maclic985 views
Gtug2 Mobile app with web technlogy by Sacha Leprêtre
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
Sacha Leprêtre496 views
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy by Meetup Mobile Montpellier
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy
Présentation du framework Titanium by Damien Laureaux
Présentation du framework TitaniumPrésentation du framework Titanium
Présentation du framework Titanium
Damien Laureaux917 views
Barcamp tunisie edition 2010 friendesk by Barcamp Tunisie
Barcamp tunisie edition 2010 friendeskBarcamp tunisie edition 2010 friendesk
Barcamp tunisie edition 2010 friendesk
Barcamp Tunisie562 views
Actualisation de site WEB : Outils : JOOMLA! by Arnold Stellio
Actualisation de site WEB : Outils : JOOMLA! Actualisation de site WEB : Outils : JOOMLA!
Actualisation de site WEB : Outils : JOOMLA!
Arnold Stellio3.8K views
Cv dridi-lotfi by Lotfi Dridi
Cv dridi-lotfiCv dridi-lotfi
Cv dridi-lotfi
Lotfi Dridi2.3K views
Atelier - Stratégie Mobile : les clés pour réussir by Medialibs
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir
Medialibs305 views
Conférence Titanium + Alloy au JUG Montpellier by Damien Laureaux
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
Damien Laureaux6K views
userADgents WWDC iOS 8 juin 2014 by USERADGENTS
userADgents WWDC iOS 8 juin 2014userADgents WWDC iOS 8 juin 2014
userADgents WWDC iOS 8 juin 2014
USERADGENTS4.7K views
Publier une application mobile en un clic by Fabernovel
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
Fabernovel632 views

More from Loïc Knuchel

Scala bad practices, scala.io 2019 by
Scala bad practices, scala.io 2019Scala bad practices, scala.io 2019
Scala bad practices, scala.io 2019Loïc Knuchel
803 views22 slides
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe... by
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...Loïc Knuchel
1.7K views43 slides
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016 by
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016Loïc Knuchel
962 views63 slides
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016 by
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016Loïc Knuchel
504 views106 slides
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016 by
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016Loïc Knuchel
705 views71 slides
FP is coming... le 19/05/2016 by
FP is coming... le 19/05/2016FP is coming... le 19/05/2016
FP is coming... le 19/05/2016Loïc Knuchel
681 views98 slides

More from Loïc Knuchel(11)

Scala bad practices, scala.io 2019 by Loïc Knuchel
Scala bad practices, scala.io 2019Scala bad practices, scala.io 2019
Scala bad practices, scala.io 2019
Loïc Knuchel803 views
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe... by Loïc Knuchel
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...
Mutation testing, enfin une bonne mesure de la qualité des tests ?, RivieraDe...
Loïc Knuchel1.7K views
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016 by Loïc Knuchel
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Loïc Knuchel962 views
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016 by Loïc Knuchel
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
Ionic2, les développeurs web à l'assaut du mobile, BDX I/O le 21/10/2016
Loïc Knuchel504 views
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016 by Loïc Knuchel
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Ionic2 - the raise of web developer, Riviera DEV le 17/06/2016
Loïc Knuchel705 views
FP is coming... le 19/05/2016 by Loïc Knuchel
FP is coming... le 19/05/2016FP is coming... le 19/05/2016
FP is coming... le 19/05/2016
Loïc Knuchel681 views
Programmation fonctionnelle en JavaScript by Loïc Knuchel
Programmation fonctionnelle en JavaScriptProgrammation fonctionnelle en JavaScript
Programmation fonctionnelle en JavaScript
Loïc Knuchel1.2K views
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015 by Loïc Knuchel
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Ionic, ce n'est pas que de l'UI, meetup PhoneGap le 25-05-2015
Loïc Knuchel1.6K views
Ionic HumanTalks - 11/03/2015 by Loïc Knuchel
Ionic HumanTalks - 11/03/2015Ionic HumanTalks - 11/03/2015
Ionic HumanTalks - 11/03/2015
Loïc Knuchel1.7K views
Ionic bbl le 19 février 2015 by Loïc Knuchel
Ionic bbl le 19 février 2015Ionic bbl le 19 février 2015
Ionic bbl le 19 février 2015
Loïc Knuchel5.7K views
Des maths et des recommandations - Devoxx 2014 by Loïc Knuchel
Des maths et des recommandations - Devoxx 2014Des maths et des recommandations - Devoxx 2014
Des maths et des recommandations - Devoxx 2014
Loïc Knuchel1.2K views

Devoxx 2015, Atelier Ionic - 09/04/2015

  • 1. 3h pour créer une application mobile de chat Par Loïc Knuchel (@loicknuchel) et Loïc Delmaire (@loicdelmaire)
  • 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. 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
  • 8. Créer une application mobile de chat en 3h ;)
  • 13. Bien s’organiser : ★ Bons outils : ✔ Ionic ✔ Firebase ★ Pair programming ?
  • 15. Framework UI spécialisé mobile et basé sur Angular - Styles - Directives - Outils
  • 16. Natif Web Téléphone & APIs natives Cordova : webview + JavaScript bridges AngularJS Ionic Votre application Stack technologique
  • 17. Ionic, c’est le bootstrap des applications mobiles hybrides (et bien plus...)
  • 18. ● 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
  • 19. <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
  • 20. $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); });
  • 21. 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
  • 22. 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/
  • 23. Getting started $ git clone … && cd … $ npm install $ bower install $ ionic serve --lab PS: Bien lire le help-angular.md