Présentation IONIC au JUG de Genève

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 ?

5. 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/10
React 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

6. Pourquoi ionic ?
WWW
https://creator.ionic.io/

7. Pourquoi ionic ?
http://ionicons.com/

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

23. ANNEXES

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