Devoxx France 2015 - Introduction à Ionic framework

1 365 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 365
Sur SlideShare
0
Issues des intégrations
0
Intégrations
119
Actions
Partages
0
Téléchargements
47
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

×