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 ?

5. Le problème
...

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

11. L’environnement

12. Command Line Interface

13. Gestion des dépendances

14. Ionic Start

15. Les templates

16. Structure d’un projet

17. Les services

18. Les composants

19. CSS

20. Ionicons

21. Splashscreen & Icon

22. NG-Cordova
✓ File
✓ Media
✓ Camera
✓ iBeacon
✓ Calendar
✓ Geolocation
✓ Bluetooth
✓ OAuth
✓ Contacts
✓ HealthKit
✓ Push notifications
✓ TouchID
✓ Social sharing
✓ Battery
✓ ...

23. Ionic run ...

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

25. chrome://inspect/#devices

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