Upload
stephanie-moallic
View
421
Download
0
Embed Size (px)
Citation preview
@steffy_29#Ionic
Développer des applications multiplateformes facilement à l'aide de Ionic
@steffy_29#Ionic
Stéphanie MOALLIC
@steffy_29Passionné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éploiement sur mobile Android
• Les composants CSS de Ionic
• Les composants Javascript de Ionic
• Une application développée à l'aide de Ionic
Objectifs
Créer votre première application multiplateforme à l'aidede 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'AngularJS et de Sass
• Pour les différentes plateformes existantes– Android, iOS, windows8, ubuntu...
@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 majorité et XML
• Nouvelle plateforme : recoder
• Evolutions Android
• C'est long !
@steffy_29#Ionic
Pourquoi ce choix ?
Développement hybride :
• Beaucoup de plateformes disponibles
• HTML5, CSS, AngularJS, Sass
• C'est fun !
• Ajout des bibliothèques
@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
@steffy_29#Ionic
Showcase
@steffy_29#Ionic
Pré-requis
• Node.js et Java installés
• Installation du SDK Android
• Configuration des variables d'environnement
Spécificités Windows
@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.0Cordova CLI: 4.3.0Ionic CLI Version: 1.3.17
> npm install -g cordova ionic$ npm install -g cordova ionic
@steffy_29#Ionic
Ionic start templates
$ ionic start -lDownloading Starter Templates - http://code.ionicframework.com/content/starter-templates.json
maps ................. An Ionic starter project using Google Maps and a side menutabs ................. A starting project for Ionic using a simple tabbed interfacesidemenu ............. A starting project for Ionic using a side menu with navigation in the content areablank ................ A blank starter project for Ionicsalesforce ........... A starter project for Ionic and Salesforcetests ................ A test of different kinds of page navigationcomplex-list ......... A complex list starter template
@steffy_29#Ionic
$ ionic start myapp
$ cd myapp
$ ionic serve
$ ionic platform add android
$ ionic run android
Première application
@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)
@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Demo
@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
@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 de la documentation en ligne
• ...
@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 Cordova :● http://cordova.apache.org/
• Ionic and Material design :● http://ionicmaterial.com/
@YourTwitterHandle@YourTwitterHandle @steffy_29#Ionic
Q & A