Silde de ma présentation faite à Devoxx France le 08/04/2015.

1. @steffy_29#Ionic
Développer des applications multiplateformes
facilement à l'aide de Ionic

2. @steffy_29#Ionic
Stéphanie MOALLIC
@steffy_29
Passionnée
d'informatique mais pas
que...

3. @steffy_29#Ionic
Plan
• Présentation de Ionic et des outils nécessaires
• Démo de génération d'une application et
déploiement sur mobile Android
• Les composants CSS de Ionic
• Les composants Javascript de Ionic
• Une application développée à l'aide de Ionic

4. Objectifs
Créer votre première application multiplateforme à l'aide
de Ionic, Cordova, HTML, CSS, AngularJS...

5. @steffy_29#Ionic
Ionic c'est quoi ?
• Open source
• Création d'applications mobiles hybrides
– HTML5, CSS avec une note d'AngularJS et de Sass
• Pour les différentes plateformes existantes
– Android, iOS, windows8, ubuntu...

6. @steffy_29#Ionic
Pourquoi ce choix ?
Eurêka !!
Mon idée :

7. @steffy_29#Ionic
Pourquoi ce choix ?
Mais :
• Nouvel outil
• Nouveau type
• ...

8. @steffy_29#Ionic
Pourquoi ce choix ?
Développement natif Android :
• TOUTES les fonctionnalités du téléphone
• Java en majorité et XML
• Nouvelle plateforme : recoder
• Evolutions Android
• C'est long !

9. @steffy_29#Ionic
Pourquoi ce choix ?
Développement hybride :
• Beaucoup de plateformes disponibles
• HTML5, CSS, AngularJS, Sass
• C'est fun !
• Ajout des bibliothèques

10. @steffy_29#Ionic
Outils parents
• PhoneGap de la société Adobe
– Framework pour créer des applications mobiles en
HTML5, CSS et Javascript
• Apache Cordova
– Ensemble d'APIs pour accéder au matériel

11. @steffy_29#Ionic
Showcase

12. @steffy_29#Ionic
Pré-requis
• Node.js et Java installés
• Installation du SDK Android
• Configuration des variables d'environnement
Spécificités Windows

13. @steffy_29#Ionic
> npm install -g cordova ionic
Installation
En cas d'erreur, penser au mode super-user
$ ionic info
Your system information:
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.2 LTS
Node Version: v0.12.0
Cordova CLI: 4.3.0
Ionic CLI Version: 1.3.17
> npm install -g cordova ionic$ npm install -g cordova ionic

14. @steffy_29#Ionic
Ionic start templates
$ ionic start -l
Downloading Starter Templates - http://code.ionicframework.com/content/starter-templates.json
maps ................. An Ionic starter project using Google Maps and a side menu
tabs ................. A starting project for Ionic using a simple tabbed interface
sidemenu ............. A starting project for Ionic using a side menu with navigation in the content area
blank ................ A blank starter project for Ionic
salesforce ........... A starter project for Ionic and Salesforce
tests ................ A test of different kinds of page navigation
complex-list ......... A complex list starter template

15. @steffy_29#Ionic
$ ionic start myapp
$ cd myapp
$ ionic serve
$ ionic platform add android
$ ionic run android
Première application

16. @steffy_29#Ionic
IDE
• Intégration dans vos IDE préférés :
– Plugin Eclipse (AppLaud PhoneGap),
– Plugin IntelliJ (Ionic Framework et
PhoneGap/Cordova Plugin)

17. @YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Demo

18. @steffy_29#Ionic
Composants CSS
• Façon Bootstrap
– Header, Content, Footer
– Lists, Cards, Forms, Tabs, Grid
– Buttons, Checkbox, Toggle, Radio, Range, Select
– Colors, Icons, Padding

19. @steffy_29#Ionic
Composants Javascript
• Extension d'AngularJS
• Loading
• Popup
• Side menus
• Spinner
• ...

20. @steffy_29#Ionic
Composants CLI
• Génération d'icône
• Génération de « splash screen »
• Configuration de Sass
• Ouverture de la documentation en ligne
• ...

21. @steffy_29#Ionic
Mon application
• Développement d'une application pour le tricot

22. @YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Summary

23. @steffy_29#Ionic
Liens
• Ionic :
●
http://ionicframework.com/
• Github :
●
https://github.com/driftyco/ionic
• Apache Cordova :
●
http://cordova.apache.org/
• Ionic and Material design :
●
http://ionicmaterial.com/

24. @YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Q & A