demarrer ionic en 5 etape
TRANSCRIPT
Par Zaïd BOUDAMOUZEt Moussa BOUDAMOUZ
http://ionicframework.com/
Soirée Quickies pour les 6 ans du GenevaJUG2 février 2016
En introduction
Une application hybride est une application multiplateforme qui combine des éléments HTML5 sous forme de web application mobile et des éléments d’une application native permettant d’utiliser les fonctionnalités natives des smartphones et d’être distribuée en tant qu’application sur les plateformes d’applications (Google Play, App Store, Windows Store, etc..).
IONIC FRAMEWORK en 5 questions
Pourquoi ionic?
Ionic framework, par où commencer ?
Qu'est ce qui se cache derrière ?
Quelles compétences requises ?
Intégration au monde JAVA ?
IONIC FRAMEWORK en 5 questions
Pourquoi ionic?
Ionic framework, par où commencer ?
Qu'est ce qui se cache derrière ?
Quelles compétences requises ?
Intégration au monde JAVA ?
Pourquoi ionic ?
http://tutorialzine.com/2015/10/comparing-the-top-frameworks-for-building-hybrid-mobile-apps/
Framework Native Look and Feel Prérequis Communauté Docs Outils Moyenne
Ionic 7/10 AngularJS (optionnel) 9/10 8/10 Ionic CLI,
Ionic SDK 8/10
Onsen UI 6/10 AngularJS (optionnel) 4/10 9/10 Monaca Cloud IDE 6.33/10
Framework 7 8/10 HTML, CSS et JS 6/10 8/10 - 7.33/10
React Native 8/10 React 8/10 5/10React Developer Tools
extention pour Chrome
7/10
jQuery Mobile 3/10 jQuery 8/10 5/10 - 5.33/10
Native Script 8/10 JavaScript 5/10 9/10 CLI, autres options payantes 7.3/10
Famous 7/10 WebGL, AngularJS 3/10 5/10 - 5/10
Pourquoi ionic ?
WW
W
https://creator.ionic.io/
IONIC FRAMEWORK en 5 questions
Pourquoi ionic?
Ionic framework, par où commencer ?
Qu'est ce qui se cache derrière ?
Quelles compétences requises ?
Intégration au monde JAVA ?
Ionic framework, par où commencer ?Installer Node.js (v4.x.x LTS privilégiée) 1
Installer les packages Cordova et ionic avec npm (node package manager)
2 sudo npm install -g cordova ionic# Vérifier les versions de cordova et ionic sudo cordova -vsudo ionic info
# Exemple sur ubuntu desktop 14.04 LTScurl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash – sudo apt-get install -y nodejs# Vérifier la version de Nodejssudo npm –v
Démarrer un nouveau projet 3 ionic start demo-jug tabscd demo-jug# Tester le projet sur un navigateurionic serve --lab --address localhost
IONIC FRAMEWORK en 5 questions
Pourquoi ionic?
Ionic framework, par où commencer ?
Qu'est ce qui se cache derrière ?
Quelles compétences requises ?
Intégration au monde JAVA ?
Qu’est ce qui se cache derrière ?Architecture du Framework
CORDOVA HTML
index.html
CSS
style.css
JS
angular.js – ionic.js – cordova.js – ng-cordova.jsWW
WMatériel (batterie, audio…)PL
UGI
NS
ContactStockage local, iCloud backupCaméra GPS Motions …
PLAT
EFO
RME
Webview(firefox, chrome, …) iPhone iPad Android Windows Phone
BACKEND AS A SERVICEFirebase - Parse core
BACKEND REST API
Angular.JS ngResources
Qu’est ce qui se cache derrière ?ionic CLI : Tous les utilitaires Ionic via le Terminal de commande
# Exemple sur ubuntu desktop 14.04 LTS – Utilisation du terminal ionic cd demo-jugionic lib updateionic platform add android
ionic platform add android Lanceur decommande Ionic
Tâche d’exécution Arguments spécifique à la tâche (0 à N arguments)
# Récupérer la liste des tâches d’exécution et leurs arguments disponibles ionic help
Qu’est ce qui se cache derrière ?
WW
W
https://apps.ionic.io/apps
IONIC FRAMEWORK en 5 questions
Pourquoi ionic?
Ionic framework, par où commencer ?
Qu'est ce qui se cache derrière ?
Quelles compétences requises ?
Intégration au monde JAVA ?
Quelles compétences requises ?
WW
W
• Plugins Eclipse et IntelliJ existes.
Plateforme de développement ? 1
Webstorm(payant)
Visual studio code (Express)
Intel XDK(Gratuit)
Quelles compétences requises ?
WW
W
• Une gestion automatique des divers résolutions d’écran• Zéro jQuery • Très peu de manipulation de l’arbre DOM
Langage et compétences requises ? 2
Quelles compétences requises ? Réaliser un projet destiné à un grand public ? 3Favoriser le cloud computing (backend as a service)
End of life 28.01.2016
IONIC FRAMEWORK en 5 questions
Pourquoi ionic?
Ionic framework, par où commencer ?
Qu'est ce qui se cache derrière ?
Quelles compétences requises ?
Intégration au monde JAVA ?
Intégration au monde Java?
WW
W
Ionic, la partie émergée de l’iceberg
Backend REST API, un large choix d’API Java accessible avec ngResource
2
J2EE, la plateforme d’intégration des applications mobiles dans les systèmes d’informations
1
Intégration au monde Java?
WW
W
Web Application SpringBoot + Ionic + wro4j + maven1
Intégration au monde Java?
WW
W
Web Application SpringBoot + Ionic + wro4j + maven2
A suivre…
Q & A
Releases Date
Ionic 22.0.0-alpha (intégration Angular 2)
1.2.4
1.0.0
Bêta
Alpha
02.01.16
12.05.15
25.03.14
23.11.13
Is coming
ANNEXES
ANNEXESAjout / suppression d’une plateforme 1
Générer l’icone et le splashscreen (fichier icon.png, Photoshop, ou Illustrator) *2
# Exemple sur ubuntu desktop 14.04 LTS – ajout de la plateforme androidcd demo-jugionic platform add android ionic platform remove android
Emuler une application depuis un poste de développement3
sudo mkdir resourcessudo wget http://genevajug.ch/images/geneva-jug-duke-181.png -O ./resources/icon.pngsudo ionic resources [optionnel --icon ou –splash pour ne générer qu’un seul type de ressource]ls resources/android/icon
ionic build android ionic emulate android
(*) http://code.ionicframework.com/resources/icon.psd, http://code.ionicframework.com/resources/splash.psd
ANNEXESFinaliser les détails du projet4
Supprimer les plugins inutiles5
# Exemple sur ubuntu desktop 14.04 LTS – ajout de la plateforme androidcd demo-jug# Configurer la description et l’email des développeursnano config.xml
Générer un APK6
sudo cordova plugin rm cordova-plugin-console
sudo cordova build --release android