Mobile Day by Microsoft & Cellenza - 25 Juin 2015. Parcours 1 Hybride Mobile (Cordova)

1. Mobile Day 2015
Cordova
Cellenza Microsoft
Lionel NIMONG @lionelthemonk
Aurélien GALTIER @AurelienGaltier
Cordova

2. Cellenza Microsoft
Lionel Nimong
Consultant Mobile
@lionelthemonk
Aurélien Galtier
Consultant Mobile
@AurelienGALTIER

3. Cellenza Microsoft
Comment nous le faisons :
• Formation continue
• Partage de
connaissance
• Partenariats
Cellenza en quelques mots
Cellenza est un cabinet de conseil, d’expertise
technique et de réalisation, exclusivement dédié
aux technologies Microsoft et aux méthodes agiles.
Notre passion, la technologie.
Nous sommes des experts Microsoft,
agilistes par nature, passionnés par
notre métier. Consultants, coachs
et/ou formateurs, nous avons à cœur
de partager avec la communauté un
savoir technique et méthodologique,
mais aussi nos valeurs

4. Cellenza Microsoft
Programme Mobile Day
9h – 9h30 Welcome Café
9h30 – 10h30 Keynote d’ouverture : Mobilité, enjeux d’aujourd’hui
10h30 – 11h30 La Mobilité selon Microsoft
11h30 – 11h 45 Pause café
11h45 – 12h45 Retour d’Expérience Client
12h45 – 13h45 Pause Déjeuner
13h 45 – 14h45 Web & Hybride
Mobile
Natif Natif Cross-
Platform
Back- Office
14h45 – 15h00 Pause
15h00 – 16h00 Web & Hybride
Mobile
Natif Natif Cross-
Platform
Back- Office
16h00 – 16h15 Pause
16h15 – 17h15 Web & Hybride
Mobile
Natif Natif Cross-
Platform
Back- Office
17h15 – 17h30 Pause
17h30 – 18h00 Conclusion

5. Cellenza Microsoft
Cellenza Microsoft
Sommaire 1 Cordova
2 Web Mobile
3 Ionic

6. Cellenza Microsoft
Qu'est-ce que Cordova ?
Permet de créer des applications mobiles
C’est de l’hybride (Interprété et native)
Le langage utilisé est HTML/CSS3/Javascript

7. Cellenza Microsoft
Historique PhoneGap ….
Cordova est le projet PhoneGap développé par la société Nitobi
Nitobi est racheté par Adobe qui créé Cordova fork de PhoneGap
Adobe laisse le moteur en open source et ce concentre sur des plugins avancés.
Adobe® PhoneGap™ Build
Adobe PhoneGap Enterprise
The PhoneGap Developer App

8. Cellenza Microsoft
Qui utilise Cordova ?

9. Cellenza Microsoft
Aujourd’hui les applications existantes

10. Cellenza Microsoft
Cordova, plus concrètement…

11. Cellenza Microsoft
L’installation
Gestionnaire de paquets NodeJS
Utilisé pour Cordova

12. Cellenza Microsoft
Structure de l'application cordova

13. Cellenza Microsoft
Les WebView
UIWebView
(et non WKWebView)
Webkit
(android.webkit.WebView)
Classique IE

14. Cellenza Microsoft
Démo

15. Cellenza Microsoft
Application Café à 1 euro

16. Cellenza Microsoft
Application Café à 1 euro

17. Cellenza Microsoft
Application Café à 1 euro

18. Cellenza Microsoft
Application Café à 1 euro

19. Cellenza Microsoft
Application Café à 1 euro

20. Cellenza Microsoft
Application Café à 1 euro

21. Cellenza Microsoft
Application Café à 1 euro

22. Cellenza Microsoft
Démo

23. Cellenza Microsoft
Application Café à 1 euro

24. Cellenza Microsoft
Démo

25. Cellenza Microsoft
Responsive design
C’est toujours aussi rapide ?

26. Cellenza Microsoft
Responsive design
Adapté a toutes les plateformes
Même site et fonctionnalités
Site dynamique

27. Cellenza Microsoft
Single Application Page
Une seule page web
Pure code en HTML/JavaScript
HTTP/REST API WEB

28. Cellenza Microsoft
JavaScript

29. Cellenza Microsoft
JavaScript
MVVM
MVC
IOC
TDD

30. Cellenza Microsoft
Si c’est pas SPA
Navigation via les liens du navigateur
Une page HTML par vue

31. Cellenza Microsoft
Les plugins
WEB NATIF
Le pont entre le web et le natif

32. Cellenza Microsoft
Les plugins
Cordova est modulaire
Contient une grille de compatibilité
Un plugin pour chaque
fonctionnalité

33. Cellenza Microsoft
Comment en ajouter
Ligne de commande
Ou Visual Studio

34. Cellenza Microsoft
Son propre plugin
Et si jamais j’ai un besoin un
peu trop spécifique ???

35. Cellenza Microsoft
Son propre plugin

36. Cellenza Microsoft
Son propre plugin
Le dossier du plugin

37. Cellenza Microsoft
Démo

38. Cellenza Microsoft
Son propre plugin
Partie C#
Partie JavaScript

39. Cellenza Microsoft
Qu’est ce que Ionic ?
Aujourd'hui de nouveaux outils construits autour de cordova (ionic/reapp)
Beaucoup de librairie/frameworks javascript facilitant le developpement mobile

40. Cellenza Microsoft
Qu’est ce que Ionic ?
Surcouche de Cordova
UI pour mobile
Ergonomique
Basé sur AngularJS

41. Cellenza Microsoft
Comment utiliser Ionic ?
Ligne de commande
Seulement IOS et Android
Emulateur Android standard
Template Visual Studio
Windows Phone
Emulateur Visual Studio Android

42. Cellenza Microsoft
A quoi cela ressemble
Android menu en haut
Ios menu en bas

43. Cellenza Microsoft
Démo

44. Cellenza Microsoft
Avantage/Inconvénient
Avantages :
Gratuit
Intégré a Visual Studio
Compétence web
BootStrap en mobile rapide
Inconvénient
Complexité (plugin …)
Contexte web limitant (Performance, …)
Même UX (Inconvénient/Avantage, …)

45. Cellenza Microsoft
Dans quel cas l’utiliser ?
A utiliser :
Si vos équipe font du web
Si votre applis est une SPA
Avoir une applis mobile sur les stores rapidement
Déconseillé :
Si vous avez des besoins très spécifique mobile
Si vous avez des interfaces très riches

46. Cellenza Microsoft
Questions
?