Conférence présentée par DUPUIS Laurie, EMO Kévin et WATTRELOT Gaëtan
Parlons du développement d’application mobile multiplateforme en montrant les différentes solutions existantes permettant de mutualiser un développement pour les différents supports, à travers une étude de cas avec Apache Cordova. L’objectif étant de développer une application unique et d’en permettre la portabilité sur différents systèmes (Android, iOs, Windows Phone, Bada, …). Ce sera l’occasion de parler des différentes solutions du cross-platforming et de mettre en avant les avantages et limites de Cordova.
2. Introduction
Tour d’horizon
Je ne crois que ce que je vois !
Observations
2
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin –WATTRELOT Gaëtan
3. Le développement d'application mobile multiplateforme
Introduction
3
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin –WATTRELOT Gaëtan
5. Concept du multiplateforme
5
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin –WATTRELOT Gaëtan
Différents supports,
différentes plateformes logicielles,
un seul langage.
Développeurs
(C# ou langages web)
Framework
iOS
Android
Windows
Phone
Blackberry
…
6. Tour d’horizon du développement mobile
6
Introduction > Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
7. Tour d’horizon du développement mobile
7
Introduction > Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Android
71%
iOS
15%
Windows Phone
11%
BlackBerry
1%
Autres
2%
VENTES DE SMARTPHONES EN FRANCE (JUIN 2014)
8. Tour d’horizon du développement mobile
8
Introduction > Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Android iOS Windows Phone BlackBerry
Langage Java Objective-C VB / C# Java
Nombre
d’applications
1 500 000 1 000 000 300 000 100 000
Open source
Développement
sousWindows
Développement
sous Mac OS
Développement
sous Linux
10. Solutions multiplateformes
10
Introduction > Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Apache Cordova Appcelerator
Titanium
Xamarin
Langage HTML / CSS / JS HTML / CSS / JS C#
Compilation sur le
Cloud
Open source
Développement
sousWindows
Développement
sous Mac OS
Développement
sous Linux
11. Notre choix : Cordova
11
Introduction > Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Couche
présentation
Couche
métier
Couche
accès aux
données
12. Notre choix : Cordova
12
Introduction > Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Couche accès aux données
Framework
Couche métier
JS API
Couche présentation
HTML CSS JS
Plateforme
Application native (WebView)
13. Notre choix : Cordova
13
Introduction > Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Couche
présentation
• Affichage
• Interactivité
Couche
métier
• Traitements
Couche accès
aux données
• Gestion des
données
14. Je ne crois que ce que je vois !
Graphisme
Performances
Capteurs
Fonctions & services
Code
14
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
15. Graphisme :
15
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
17. Performances :
17
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Connexion BDD et
récupération de 10 000 lignes
de données
2 393 1 127
Tri des 10 000 lignes des
données
7 386 7 523
Connexion BDD et
récupération de 30 000 lignes
de données
4 432 3 014
18. Fonctions & services :
18
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
19. Parlons un peu de code :
19
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Quelques grands principes de Cordova :
• La gestion par ligne de commandes
• Les plugins
• L’évènement « device ready » et la variable « navigator »
• cordova create [nom du répertoire] [nom du package] [nom de l’application]
• cordova platform add [nom de la plateforme]
• cordova build [nom de la plateforme]
• cordova emulate [nom de la plateforme]
• cordova run [nom de la plateforme]
• cordova plugin add [nom du plugin]
Les plugins :
• Statut de la batterie
• Caméra
• Console
• Contacts
• Informations de l’appareil mobile
• Accéléromètre et gyroscope
• Orientation
• Notification
• Vibration
• Système de fichier
• Transfert de fichier
• Géolocalisation
• Multi langage
• Gestion des médias
• Capture des médias
• Informations du réseau
• Splashcreen
• Gestion de la barre de statut
20. Parlons un peu de code :
20
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
21. Avantages
21
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Efficacité
Maintenabilité
Évolutivité
Facilité
Rapidité
Entraide
Outils
22. Avantages et limites
22
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
Avantages :
• Maintenabilité
• Évolutivité
• Facilité
• Rapidité
• Communauté
• Outils
Limites :
• Technologie jeune
• Support incomplet
des fonctionnalités et
capteurs spécifiques
• Bandeau système
23. Inconvénients
Poids des applications
Performances amoindries
Peur du changement
23
Introduction >Tour d’horizon > Je ne crois que ce que je vois > Observations
DUPUIS Laurie – EMO Kévin – WATTRELOT Gaëtan
->groupe, projet, sujet, contexte, enjeux, concept
->dev mobile, natif, solutions multiplateformes
->démo technique, comparatif entre natif et multiplateforme
->avantages, inconvénients et limites
Qui sommes nous ? Dev web
Pourquoi ? Exia, fin d’études
Que va-t-on présenter ?
Type de public ?
Contexte : nouveaux services, nouvelles demandes clients, nouvelle tendance
Supports types : smartphones et tablettes : quotidien des consomateurs
S’adapte au support, plus performant, sans internet
Avantages matériels
Plus large choix d’utilisation et d’innovation
Grands acteurs
Enjeux :
Tps de dev
Compétences multiples
Maintenance (dev supp, perte de temps, coût supp)
Enjeux financiers
Concept :
1 langage de dev > framework qui crée un code executable > fonctionne sur plusieurs plateformes
Gain de temps, domaine de compétence réduit
App mobile hybride : pas native, pas uniquement web non plus
Langages natifs des plateformes
4 acteurs principaux
Android : presque ¾ personnes
iOS : clientèle aisée
Windows Phone : téléphones peu onéreux (positionnement de marché, offre de Noël)
BlackBerry : clientèle professionnelle
Sondage
Android :
Plateforme ouverte (développement accessible : langage portable + open source + toute plateforme)
Grand nombre d’applications
Prix des licences de dev
iOS :
Plateforme fermée (langage propriétaire, nécessité d’un Mac)
Pourtant grand nombre d’applications
Windows Phone :
Plateforme fermée (nécessité d’une plateforme Windows)
Peu d’applications : plateforme encore jeune : 2010 (iOS : 2007, Android : 2008)
BlackBerry :
Plateforme fermée et clientèle professionnelle
Comparatif Android et Cordova
Mis à la place d’un néophyte
Pour répondre aux questions qu’il se pose
Explication de chaque point
Explication que nous réalisons une app afin de faire des comparaisons entre natif et multiplateforme
Ecran basique mais démontrant que le multiplateforme ne bride pas le design
Sensiblement identique
Responsive obligatoire !
Bandeau système non visible sur cordova car webview étendue
Présentation de l’écran : fonctionnement & objectifs
Conditions de tests identiques pour ne pas fausser les résultats
Bon fonctionnement (tableau bdd et valeur triées)
« On remarque que l’écart entre les deux versions n’évolu pas pour la récupération des données. Ce
qui tend à confirmer que cette différence s’explique par ….
« Apres avoir abordé le graphisme, les perf et les capteurs nous allons nous intéresser aux fonctions
et services des appareils »
Fonctions mis en place et pourquoi (photo, contact et sms => basique)
Fonctionnement similaire sur l’une et l’autre des versions
MMS non pris en charge et SMS plugin non officiel
Service explication pourquoi le GPS ?
Bon fonctionnement et précision identique sur les deux versions
Pas besoin du plugin et des librairies sur Cordova
Gestion simple et rapide de l’architecture votre projet par ligne de commande
Globalement, un plugin correspond à une fonctionnalité de l’appareil
Enormément de plugins pris en charges
Manque : SMS et MMS vu précédent ou encore les capteurs spécifiques des marques ou plus poussés
Device ready -> évènement permettant de détecter la bonne initialisation du matériel et de
l’environnement web dans lequel il est exécuté
Navigator -> variable injectée par Apache Cordova qui permet d’interagir très simplement avec les
différents plugins du projet
Graphisme
Performance
Les capteurs
Géolocalisation
Fonctions du smartphone
code
Avantages et limites
Inconvénients
Avantages et limites
Inconvénients
Avantages et limites
Inconvénients
Android : 3 Mo
Cordova : 9 Mo
Scalabilité : nouveaux smartpones moins chers que les révisons
Sujet très vaste, conf non exhaustive
Peur du changement
Initiation simple, courbe d’apprentissage faible (communauté)
API et Framework web (bootstrap, angular js)
Dev moins long, maintenance plus rapide
Contraintes : responsive, tests
2016 : les app multiplateformes mobiles représentent plus de 50% du total des app mobiles
Merci de votre attention, si vous avez des questions, nous sommes là pour y répondre!