SlideShare une entreprise Scribd logo
BreizhCamp 2016 #BzhCmp
#ionicBzhCmp
BreizhCamp 2016 #BzhCmp
Développer une application
mobile avec Ionic
Stéphanie Moallic - @steffy_29
Audrey Neveu - @Audrey_Neveu
Qui sommes-nous ?
Stéphanie
Développeur Web & Mobile
@steffy_29
Audrey
Dévangeliste @StreamdataIO
@Audrey_Neveu
Avant de commencer
Si vous ne les avez pas déjà, vous allez avoir besoin de ces
outils :
● Java JDK 7 or 8 - java.oracle.com
● Android SDK - developer.android.com/sdk/index.html
● NodeJS - nodejs.org
● Git - git-scm.com/download/
Je veux une application mobile ...
compatible iOS et Android, et vite !
Comment je fais ?
Le problème
...
Les solutions
● Construire une application native
○ Meilleure performance
○ Un développement par plateforme
■ Consommateur en temps / argent
○ Utilisation d’outils spécifiques
● Construire une application hybride
Solution hybride
Une technologie pour les développer toutes !
Qu’est-ce qu’une application hybride ?
● Utilisation des technologies du Web
○ HTML5, CSS, Javascript
○ Accès à l’API native via Cordova
● Applications indépendantes de la plateforme
○ Une application pour tous les systèmes
○ Rapide à développer
● Performances plus «faibles»
Et Ionic dans tous ça ?
Un framework open source pour développer des
applications hybrides
+
=
+ +
+ +
Chacun son rôle !
✓ Conception des interfaces
➙ HTML5, CSS3, Sass, LESS,
Javascript
➙ Ionic framework
✓ Logique métier
➙ Angular JS
✓ Génération plates-formes cibles
➙ Cordova
L’environnement
Command Line Interface
Gestion des dépendances
Ionic Start
Les templates
Structure d’un projet
Les services
Les composants
CSS
Ionicons
Splashscreen & Icon
NG-Cordova
✓ File
✓ Media
✓ Camera
✓ iBeacon
✓ Calendar
✓ Geolocation
✓ Bluetooth
✓ OAuth
✓ Contacts
✓ HealthKit
✓ Push notifications
✓ TouchID
✓ Social sharing
✓ Battery
✓ ...
Ionic run ...
Tester / Debugger
✓ Dans le navigateur : Serve
➙ http://localhost:8100/
➙ tout ne peut pas être émulé
➙ option --lab pour avoir un aperçu android et iOs
✓ Sur device ou émulateur : Run
➙ option livereload (-l) pour exécuter sur http://192.168.1.1:
8100/
➙ option log console (-c) pour avoir les logs de l’application
chrome://inspect/#devices
Ionic
Installation de Ionic
● Installation de Cordova
$ npm install -g cordova
● Installation de Ionic
$ npm install -g ionic
Test sur Android
Lancer la commande :
$ ionic run
● Si un émulateur est lancé, il sera utilisé,
sinon il démarrera celui par défaut
○ Lent
○ Consommateur de mémoire
● Si un device est connecté, il sera utilisé
pour démarrer l’application
⇒ Penser à activer le mode
développeur (Remember: 7 taps on Build Number)
Créer votre première application
● Créer un projet
$ ionic start myapp
$ cd myapp
$ ionic serve
● Ajouter le support Android / iOs ...
$ ionic platform add android ios
● Construire, tester, déployer !
$ ionic build android
$ ionic run android
A votre tour...
● Ionic Beers tutorial
○ http://www.beer-tutorials.org/2015/12/05/Ionic-
Beers/
● Git
○ https://github.com/Steffy29/IonicBeers.git

Contenu connexe

Tendances

SkillValue LesJeudis Master Class React Native
SkillValue LesJeudis Master Class React NativeSkillValue LesJeudis Master Class React Native
SkillValue LesJeudis Master Class React Native
Benoit Fillon
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front Side
Thomas Champion
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
Horacio Gonzalez
 
J'ai fait une app native en React Native
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 France
 
Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30
Horacio Gonzalez
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Horacio Gonzalez
 
Créer votre expérience de réalite virtuelle avec drupal
Créer votre expérience de réalite virtuelle avec drupalCréer votre expérience de réalite virtuelle avec drupal
Créer votre expérience de réalite virtuelle avec drupal
Christophe Villeneuve
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
Laurent Duveau
 
Enib cours c.a.i. web - séance #5 : td grails
Enib   cours c.a.i. web - séance #5 : td grailsEnib   cours c.a.i. web - séance #5 : td grails
Enib cours c.a.i. web - séance #5 : td grails
Horacio Gonzalez
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
Laurent Duveau
 
Node.js
Node.jsNode.js
Le service workers
Le service workersLe service workers
Le service workers
neuros
 
Construire le web en AR - VR
Construire le web en AR - VRConstruire le web en AR - VR
Construire le web en AR - VR
Christophe Villeneuve
 
Le gameday...un concept devopsludique
Le gameday...un concept devopsludiqueLe gameday...un concept devopsludique
Le gameday...un concept devopsludique
EspritAgile
 
2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation web2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation web
Thibault Vinchent
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - Théorie
Horacio Gonzalez
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
Jérémy Buget
 
Creation De Sites Internet
Creation De Sites InternetCreation De Sites Internet
Creation De Sites Internet
zestef
 

Tendances (19)

SkillValue LesJeudis Master Class React Native
SkillValue LesJeudis Master Class React NativeSkillValue LesJeudis Master Class React Native
SkillValue LesJeudis Master Class React Native
 
Adopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front SideAdopter les web components avec stencil.js - Front Side
Adopter les web components avec stencil.js - Front Side
 
FinistJUG - J’ai besoin d’une appli web rapidement
FinistJUG -   J’ai besoin d’une appli web rapidementFinistJUG -   J’ai besoin d’une appli web rapidement
FinistJUG - J’ai besoin d’une appli web rapidement
 
J'ai fait une app native en React Native
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
 
Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30
 
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !Enib   cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
Enib cours c.a.i. web - séance #5 - j’ai besoin d’une appli web rapidement !
 
B2 g
B2 gB2 g
B2 g
 
Créer votre expérience de réalite virtuelle avec drupal
Créer votre expérience de réalite virtuelle avec drupalCréer votre expérience de réalite virtuelle avec drupal
Créer votre expérience de réalite virtuelle avec drupal
 
Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)Angular 6, CLI 6, Material 6 (french)
Angular 6, CLI 6, Material 6 (french)
 
Enib cours c.a.i. web - séance #5 : td grails
Enib   cours c.a.i. web - séance #5 : td grailsEnib   cours c.a.i. web - séance #5 : td grails
Enib cours c.a.i. web - séance #5 : td grails
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
Node.js
Node.jsNode.js
Node.js
 
Le service workers
Le service workersLe service workers
Le service workers
 
Construire le web en AR - VR
Construire le web en AR - VRConstruire le web en AR - VR
Construire le web en AR - VR
 
Le gameday...un concept devopsludique
Le gameday...un concept devopsludiqueLe gameday...un concept devopsludique
Le gameday...un concept devopsludique
 
2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation web2 jours pour se lancer dans la programmation web
2 jours pour se lancer dans la programmation web
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - Théorie
 
Introduction à web assembly
Introduction à web assemblyIntroduction à web assembly
Introduction à web assembly
 
Creation De Sites Internet
Creation De Sites InternetCreation De Sites Internet
Creation De Sites Internet
 

Similaire à Ionic

Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
Jean David Olekhnovitch
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
Christophe Zome
 
Native script
Native scriptNative script
Native script
Neticoa Sénégal
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
Fabernovel
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic Framework
Stéphanie Moallic
 
Apache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéroApache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéro
Alexandre Pereira
 
[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap
Thomas Bassetto
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
jeromevdl
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobiles
Michael Laguerre
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
Thierry Gayet
 
Dev Fest Nantes - Ionic le développement hybride mobile fun et productif
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 Moallic
 
"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours
Laurent MEURISSE
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
VISEO
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
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 Basabana
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
Makina Corpus
 
La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!
OCTO Technology
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
DEFO KUATE Landry
 
Electron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDElectron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARD
La Cuisine du Web
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
Martin Arvisais
 

Similaire à Ionic (20)

Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2Développement web mobile avec IONIC 2
Développement web mobile avec IONIC 2
 
Cours cordova & REST
Cours cordova & RESTCours cordova & REST
Cours cordova & REST
 
Native script
Native scriptNative script
Native script
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
 
Breizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic FrameworkBreizhcamp 2015 Ionic Framework
Breizhcamp 2015 Ionic Framework
 
Apache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéroApache Cordova 3.3 de zéro
Apache Cordova 3.3 de zéro
 
[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap[FR] Présentation de PhoneGap
[FR] Présentation de PhoneGap
 
Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013Jug Lausanne Android Janvier2013
Jug Lausanne Android Janvier2013
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobiles
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
 
Dev Fest Nantes - Ionic le développement hybride mobile fun et productif
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
 
"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours"Introduction aux Developements iOS" in Three hours
"Introduction aux Developements iOS" in Three hours
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Débuter avec phonegap (APACHE CORDOVA) dans eclipse pour android
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
 
Développer des applications mobiles avec phonegap
Développer des applications mobiles avec phonegapDévelopper des applications mobiles avec phonegap
Développer des applications mobiles avec phonegap
 
La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!La Duck Conf - Continuous Security : Secure a DevOps World!
La Duck Conf - Continuous Security : Secure a DevOps World!
 
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...Développer une application Chrome avec AngularJs (Google Développers Group Sa...
Développer une application Chrome avec AngularJs (Google Développers Group Sa...
 
Electron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARDElectron, une alternative intéressante ? par Florent MOIGNARD
Electron, une alternative intéressante ? par Florent MOIGNARD
 
Actionscript: du web au mobile
Actionscript: du web au mobileActionscript: du web au mobile
Actionscript: du web au mobile
 

Ionic

  • 1. BreizhCamp 2016 #BzhCmp #ionicBzhCmp BreizhCamp 2016 #BzhCmp Développer une application mobile avec Ionic Stéphanie Moallic - @steffy_29 Audrey Neveu - @Audrey_Neveu
  • 2. Qui sommes-nous ? Stéphanie Développeur Web & Mobile @steffy_29 Audrey Dévangeliste @StreamdataIO @Audrey_Neveu
  • 3. Avant de commencer Si vous ne les avez pas déjà, vous allez avoir besoin de ces outils : ● Java JDK 7 or 8 - java.oracle.com ● Android SDK - developer.android.com/sdk/index.html ● NodeJS - nodejs.org ● Git - git-scm.com/download/
  • 4. Je veux une application mobile ... compatible iOS et Android, et vite ! Comment je fais ?
  • 6. Les solutions ● Construire une application native ○ Meilleure performance ○ Un développement par plateforme ■ Consommateur en temps / argent ○ Utilisation d’outils spécifiques ● Construire une application hybride
  • 7. Solution hybride Une technologie pour les développer toutes !
  • 8. Qu’est-ce qu’une application hybride ? ● Utilisation des technologies du Web ○ HTML5, CSS, Javascript ○ Accès à l’API native via Cordova ● Applications indépendantes de la plateforme ○ Une application pour tous les systèmes ○ Rapide à développer ● Performances plus «faibles»
  • 9. Et Ionic dans tous ça ? Un framework open source pour développer des applications hybrides + = + + + +
  • 10. Chacun son rôle ! ✓ Conception des interfaces ➙ HTML5, CSS3, Sass, LESS, Javascript ➙ Ionic framework ✓ Logique métier ➙ Angular JS ✓ Génération plates-formes cibles ➙ Cordova
  • 19. CSS
  • 22. NG-Cordova ✓ File ✓ Media ✓ Camera ✓ iBeacon ✓ Calendar ✓ Geolocation ✓ Bluetooth ✓ OAuth ✓ Contacts ✓ HealthKit ✓ Push notifications ✓ TouchID ✓ Social sharing ✓ Battery ✓ ...
  • 24. Tester / Debugger ✓ Dans le navigateur : Serve ➙ http://localhost:8100/ ➙ tout ne peut pas être émulé ➙ option --lab pour avoir un aperçu android et iOs ✓ Sur device ou émulateur : Run ➙ option livereload (-l) pour exécuter sur http://192.168.1.1: 8100/ ➙ option log console (-c) pour avoir les logs de l’application
  • 27. Installation de Ionic ● Installation de Cordova $ npm install -g cordova ● Installation de Ionic $ npm install -g ionic
  • 28. Test sur Android Lancer la commande : $ ionic run ● Si un émulateur est lancé, il sera utilisé, sinon il démarrera celui par défaut ○ Lent ○ Consommateur de mémoire ● Si un device est connecté, il sera utilisé pour démarrer l’application ⇒ Penser à activer le mode développeur (Remember: 7 taps on Build Number)
  • 29. Créer votre première application ● Créer un projet $ ionic start myapp $ cd myapp $ ionic serve ● Ajouter le support Android / iOs ... $ ionic platform add android ios ● Construire, tester, déployer ! $ ionic build android $ ionic run android
  • 30. A votre tour... ● Ionic Beers tutorial ○ http://www.beer-tutorials.org/2015/12/05/Ionic- Beers/ ● Git ○ https://github.com/Steffy29/IonicBeers.git