@steffy_29#Ionic
Développer des applications multiplateformes
facilement à l'aide de Ionic
@steffy_29#Ionic
Stéphanie MOALLIC
@steffy_29
Passionnée
d'informatique mais pas
que...
@steffy_29#Ionic
Plan
• Présentation de Ionic et des outils nécessaires
• Démo de génération d'une application et
déploiem...
Objectifs
Créer votre première application multiplateforme à l'aide
de Ionic, Cordova, HTML, CSS, AngularJS...
@steffy_29#Ionic
Ionic c'est quoi ?
• Open source
• Création d'applications mobiles hybrides
– HTML5, CSS avec une note d'...
@steffy_29#Ionic
Pourquoi ce choix ?
Eurêka !!
Mon idée :
@steffy_29#Ionic
Pourquoi ce choix ?
Mais :
• Nouvel outil
• Nouveau type
• ...
@steffy_29#Ionic
Pourquoi ce choix ?
Développement natif Android :
• TOUTES les fonctionnalités du téléphone
• Java en maj...
@steffy_29#Ionic
Pourquoi ce choix ?
Développement hybride :
• Beaucoup de plateformes disponibles
• HTML5, CSS, AngularJS...
@steffy_29#Ionic
Outils parents
• PhoneGap de la société Adobe
– Framework pour créer des applications mobiles en
HTML5, C...
@steffy_29#Ionic
Showcase
@steffy_29#Ionic
Pré-requis
• Node.js et Java installés
• Installation du SDK Android
• Configuration des variables d'envi...
@steffy_29#Ionic
> npm install -g cordova ionic
Installation
En cas d'erreur, penser au mode super-user
$ ionic info
Your ...
@steffy_29#Ionic
Ionic start templates
$ ionic start -l
Downloading Starter Templates - http://code.ionicframework.com/con...
@steffy_29#Ionic
$ ionic start myapp
$ cd myapp
$ ionic serve
$ ionic platform add android
$ ionic run android
Première ap...
@steffy_29#Ionic
IDE
• Intégration dans vos IDE préférés :
– Plugin Eclipse (AppLaud PhoneGap),
– Plugin IntelliJ (Ionic F...
@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Demo
@steffy_29#Ionic
Composants CSS
• Façon Bootstrap
– Header, Content, Footer
– Lists, Cards, Forms, Tabs, Grid
– Buttons, C...
@steffy_29#Ionic
Composants Javascript
• Extension d'AngularJS
• Loading
• Popup
• Side menus
• Spinner
• ...
@steffy_29#Ionic
Composants CLI
• Génération d'icône
• Génération de « splash screen »
• Configuration de Sass
• Ouverture...
@steffy_29#Ionic
Mon application
• Développement d'une application pour le tricot
@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Summary
@steffy_29#Ionic
Liens
• Ionic :
●
http://ionicframework.com/
• Github :
●
https://github.com/driftyco/ionic
• Apache Cord...
@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Q & A
Prochain SlideShare
Chargement dans…5
×

Devoxx France 2015 - Introduction à Ionic framework

1 441 vues

Publié le

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

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

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

Aucune remarque pour cette diapositive

Devoxx France 2015 - Introduction à Ionic framework

  1. 1. @steffy_29#Ionic Développer des applications multiplateformes facilement à l'aide de Ionic
  2. 2. @steffy_29#Ionic Stéphanie MOALLIC @steffy_29 Passionnée d'informatique mais pas que...
  3. 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. 4. Objectifs Créer votre première application multiplateforme à l'aide de Ionic, Cordova, HTML, CSS, AngularJS...
  5. 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. 6. @steffy_29#Ionic Pourquoi ce choix ? Eurêka !! Mon idée :
  7. 7. @steffy_29#Ionic Pourquoi ce choix ? Mais : • Nouvel outil • Nouveau type • ...
  8. 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. 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. 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. 11. @steffy_29#Ionic Showcase
  12. 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. 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. 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. 15. @steffy_29#Ionic $ ionic start myapp $ cd myapp $ ionic serve $ ionic platform add android $ ionic run android Première application
  16. 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. 17. @YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic Demo
  18. 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. 19. @steffy_29#Ionic Composants Javascript • Extension d'AngularJS • Loading • Popup • Side menus • Spinner • ...
  20. 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. 21. @steffy_29#Ionic Mon application • Développement d'une application pour le tricot
  22. 22. @YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic Summary
  23. 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. 24. @YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic Q & A

×