1. Par Zaïd BOUDAMOUZ
Et Moussa BOUDAMOUZ
http://ionicframework.com/
Soirée Quickies pour les 6 ans du GenevaJUG
2 février 2016
2. 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..).
3. 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 ?
4. 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 ?
8. 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 ?
9. 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 -v
sudo ionic info
# Exemple sur ubuntu desktop 14.04 LTS
curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash –
sudo apt-get install -y nodejs
# Vérifier la version de Nodejs
sudo npm –v
Démarrer un nouveau projet3 ionic start demo-jug tabs
cd demo-jug
# Tester le projet sur un navigateur
ionic serve --lab --address localhost
10. 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 ?
11. 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.js
WWW
Matériel
(batterie,
audio…)
PLUGINS Contact
Stockage local,
iCloud backup
Caméra GPS Motions …PLATE
FORME
Webview
(firefox, chrome, …)
iPhone iPad Android Windows Phone
BACKEND AS A SERVICE
Firebase - Parse core
BACKEND REST API
Angular.JS ngResources
12. 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-jug
ionic lib update
ionic platform add android
ionic platform add android
Lanceur de
commande
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
13. Qu’est ce qui se cache derrière ?
WWW
https://apps.ionic.io/apps
14. 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 ?
15. Quelles compétences requises ?
WWW
• Plugins Eclipse et IntelliJ existes.
Plateforme de développement ?1
Webstorm
(payant)
Visual studio
code (Express)
Intel XDK
(Gratuit)
16. Quelles compétences requises ?
WWW
• 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
17. Quelles compétences requises ?
Réaliser un projet destiné à un grand public ?3
Favoriser le cloud computing (backend as a service)
End of life
28.01.2016
18. 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 ?
19. Intégration au monde Java?
WWW
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
20. Intégration au monde Java?
WWW
Web Application SpringBoot + Ionic + wro4j + maven1
21. Intégration au monde Java?
WWW
Web Application SpringBoot + Ionic + wro4j + maven2
22. A suivre…
Q & A
Releases Date
Ionic 2
2.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
24. ANNEXES
Ajout / suppression d’une plateforme1
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 android
cd demo-jug
ionic platform add android
ionic platform remove android
Emuler une application depuis un poste de développement3
sudo mkdir resources
sudo wget http://genevajug.ch/images/geneva-jug-duke-181.png -O ./resources/icon.png
sudo 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
25. ANNEXES
Finaliser les détails du projet4
Supprimer les plugins inutiles5
# Exemple sur ubuntu desktop 14.04 LTS – ajout de la plateforme android
cd demo-jug
# Configurer la description et l’email des développeurs
nano config.xml
Générer un APK6
sudo cordova plugin rm cordova-plugin-console
sudo cordova build --release android
Notes de l'éditeur
1) Ionic, par où commencer ? * On présente le get started * Une brève comparaison avec ses concurrents
2) Mais qu'est ce qui se cache derrière ? * On présente l'architecture
* On présente les outils : - https://apps.ionic.io/apps
- https://creator.ionic.io/ - http://view.ionic.io/
- http://ionicons.com/
3) Mais comment gérer le multi-plateforme ? * On précise les lignes de commandes pour ajouter les différentes plateformes
* On précise la ligne de commande pour ajouter un splashscreen
4) Et quelle compétence sont nécessaires ou requise pour développer Ionic ? * On parle donc d'angular js; cordova, et autre * On parle de cloud computing (intégration avec firebase)
5) Mais dans ce cas là ? Pourquoi le présenter au JAVA User Group ? * On parle des contraintes métiers que peut rencontrer dans le métier (intégration backend, développement mobile B2B vs B2C)
(Et peut-être : je présente l'intégration ionic avec Spring boot + wro4j + ionic, si j'arrive à terminer le POC)
1) Ionic, par où commencer ? * On présente le get started * Une brève comparaison avec ses concurrents
2) Mais qu'est ce qui se cache derrière ? * On présente l'architecture
* On présente les outils : - https://apps.ionic.io/apps
- https://creator.ionic.io/ - http://view.ionic.io/
- http://ionicons.com/
3) Mais comment gérer le multi-plateforme ? * On précise les lignes de commandes pour ajouter les différentes plateformes
* On précise la ligne de commande pour ajouter un splashscreen
4) Et quelle compétence sont nécessaires ou requise pour développer Ionic ? * On parle donc d'angular js; cordova, et autre * On parle de cloud computing (intégration avec firebase)
5) Mais dans ce cas là ? Pourquoi le présenter au JAVA User Group ? * On parle des contraintes métiers que peut rencontrer dans le métier (intégration backend, développement mobile B2B vs B2C)
(Et peut-être : je présente l'intégration ionic avec Spring boot + wro4j + ionic, si j'arrive à terminer le POC)
1) Ionic, par où commencer ? * On présente le get started * Une brève comparaison avec ses concurrents
2) Mais qu'est ce qui se cache derrière ? * On présente l'architecture
* On présente les outils : - https://apps.ionic.io/apps
- https://creator.ionic.io/ - http://view.ionic.io/
- http://ionicons.com/
3) Mais comment gérer le multi-plateforme ? * On précise les lignes de commandes pour ajouter les différentes plateformes
* On précise la ligne de commande pour ajouter un splashscreen
4) Et quelle compétence sont nécessaires ou requise pour développer Ionic ? * On parle donc d'angular js; cordova, et autre * On parle de cloud computing (intégration avec firebase)
5) Mais dans ce cas là ? Pourquoi le présenter au JAVA User Group ? * On parle des contraintes métiers que peut rencontrer dans le métier (intégration backend, développement mobile B2B vs B2C)
(Et peut-être : je présente l'intégration ionic avec Spring boot + wro4j + ionic, si j'arrive à terminer le POC)
Fixer les enjeux : dans 15 minutes vous en aurez fini.
Donner la problématique
- Développer sous IOS et finir sous android
1) Ionic, par où commencer ? * On présente le get started * Une brève comparaison avec ses concurrents
2) Mais qu'est ce qui se cache derrière ? * On présente l'architecture
* On présente les outils : - https://apps.ionic.io/apps
- https://creator.ionic.io/ - http://view.ionic.io/
- http://ionicons.com/
3) Mais comment gérer le multi-plateforme ? * On précise les lignes de commandes pour ajouter les différentes plateformes
* On précise la ligne de commande pour ajouter un splashscreen
4) Et quelle compétence sont nécessaires ou requise pour développer Ionic ? * On parle donc d'angular js; cordova, et autre * On parle de cloud computing (intégration avec firebase)
5) Mais dans ce cas là ? Pourquoi le présenter au JAVA User Group ? * On parle des contraintes métiers que peut rencontrer dans le métier (intégration backend, développement mobile B2B vs B2C)
(Et peut-être : je présente l'intégration ionic avec Spring boot + wro4j + ionic, si j'arrive à terminer le POC)
1) Ionic, par où commencer ? * On présente le get started * Une brève comparaison avec ses concurrents
2) Mais qu'est ce qui se cache derrière ? * On présente l'architecture
* On présente les outils : - https://apps.ionic.io/apps
- https://creator.ionic.io/ - http://view.ionic.io/
- http://ionicons.com/
3) Mais comment gérer le multi-plateforme ? * On précise les lignes de commandes pour ajouter les différentes plateformes
* On précise la ligne de commande pour ajouter un splashscreen
4) Et quelle compétence sont nécessaires ou requise pour développer Ionic ? * On parle donc d'angular js; cordova, et autre * On parle de cloud computing (intégration avec firebase)
5) Mais dans ce cas là ? Pourquoi le présenter au JAVA User Group ? * On parle des contraintes métiers que peut rencontrer dans le métier (intégration backend, développement mobile B2B vs B2C)
(Et peut-être : je présente l'intégration ionic avec Spring boot + wro4j + ionic, si j'arrive à terminer le POC)