En 2012, le marché des mobiles est en pleine évolution avec 1,6 milliard de mobiles vendus, dont 390 millions de smartphones. Les défis du développement mobile incluent des technologies non unifiées et la nécessité d'adapter les applications à une variété de terminaux et d'affichages. Les méthodes de développement doivent inclure des tests et une intégration continue pour répondre aux exigences de chaque plateforme.

1. Eutech SSII – 31 janvier 2012 – JB. Boisseau – A. Pagnier

2. Jean-Baptiste Boisseau

3.  Nous sommes en 1997
 Un marché prometteur, mais...
 Applis mobiles vs. Web mobile

4. Jean-Baptiste Boisseau
Le Mobile en 2012

5.  Le marché n'est pas 100% smartphone
 1,6 milliard de mobiles vendus en 2011 dans le
monde
 Dont 390 millions de smartphones
 En France, 40% des utilisateurs de mobile ont
un smartphone

6. Caractéristiques du smartphone en 2012 :
 Interface tactile
 GPS / boussole
 Appareil photo / Caméra
 Accéléromètre
 Système proposant navigateur web avancé et
gestion de fichiers
 Réseau 3G+ minimum, wifi

7.  Apple : Iphone 4, Iphone 4S
 Samsung : Galaxy/Galaxy S, Nexus, Wave
 Nokia : N9, C6, Lumia
 RIM : Torch, Bold
 HTC : Gamme Android, gamme Windows
 Sony Ericsson : Xperia
 Les autres : LG, Huawei, Motorola, Acer...

8.  Statistiques françaises (données d'utilisation
sur le web obtenues via webanalyse, 12/11) :
 IOS : 56%
 Android : 32%
 Symbian : 4%
 Bada : 2,5%
 Blackberry OS : 1,5%
 Windows Phone : 1%
 Les autres : MeeGo (Tizen), WebOS...

9. Arnaud Pagnier
Développer « Mobile »

10.  Réaliser des interfaces utilisateurs
 Réaliser du code technique
 Exploiter les capacités spécifiques des terminaux
 Réaliser du code « métier »
 Architecturer son application, la situer dans
son Système d’information.

11.  Pas d’unification des technologies
 iOS : Objective C et Cocoa
 Android : JAVA et XML
 BlackBerry : JAVA et XML
 C++, pour Bada, Symbian, WebOS…
 HTML5 et CSS3 pour WebOS
 Mille et une résolutions d’affichage…
 Les API ne sont pas unifiées

12.  Accès aux données, accès au réseau
 Sécurité et authentification
 Programmation graphique, 3D
 NFC
 …
 Les capacités spécifiques des smartphones

13.  Un véritable travail d’ingénierie logicielle
 Un code robuste, des designs patterns…
 Les guides de conception et d’architecture des
éditeurs ?
 De la méthode
 Des outils
 Xcode, Eclipse
 Des processus, du maquettage au déploiement

14. IOS ANDROID
 
Model Controller Model Controller
Activity Activity
View View

15.  Eclipse VS XCode
 Editeur de code (autocomplétion, template de
code, …), gestion des sources
 Concepteur visuel d’interface
 Compilateur, debugger pas à pas
 Simulateurs
 Gestion des terminaux physiques
 Intégration continue…

18.  L’application et son
« écosystème d’informations »
 L’application comme « frontend »
 Quel « backend » ?
 Communication par services web.
 Gestion de la sécurité
 Le mode asynchrone…

19. Interface
Logique « métier » d’admin
Terminal JSON
Données
locales
Logique « métier »
Serveur
d’application
Synchronisation web
Données
distantes

21. XML
Données
Données Logiciel
locales
XTea « Perceaval »
Services SOAP
(J2E)
XML Services REST
(ZendFramework)

23. 3 sites « maison » Services Web
JSON (ZendFramework)
Données
utilisateurs
Données
Sites « partenaires » métiers
Backoffice
6 applis mobiles

24.  Un seul développement pour toutes les
plateformes ?
 PhoneGap : une solution pertinente.
 Un développement « web » avec HTML5, CSS3,
et…
 Une API JavaScript

25. Compilation
HTML 5 et API API natives
JavaScript des
CSS3 PhoneGap terminaux

26.  Développement « natif » ?
 Développement « PhoneGap » ?
 Développement « full web » ?

27. Jean-Baptiste Boisseau
Du web au web mobile

28.  Gérer la diversité des terminaux
 Intégrer les principes de navigation tactile
 S'adapter aux tailles d'écran
 Oublier Flash
 Optimiser pour webkit
 Tirer partie des possibilités d'HTML5...
 … mais aussi de CSS3 !

29.  Le web mobile permet d'aller au delà du
smartphone avec...
 Les grands anciens : WML, cHTML
 XHTML et CSS 2.1 (navigateurs classiques)
 XHTML Mobile Profile et WCSS
 XHTML Basic et CSS MP
 HTML5 et CSS3
 De nombreuses extensions spécifiques

30.  Un template web mobile doit être :
 Léger, simple
 Extensible, adaptable
 Vertical
 Adapté à la navigation tactile... voire au
clavier

31.  HTML5, le plein de fonctionnalités :
 Géolocalisation
 Stockage local
 <audio> <video>
 … et bien d'autres !
CSS3, enfin la simplicité :
 Les coins arrondis... mais pas seulement !
 Gestion de l'opacité, ombrage, arrières-plans
multiples
 Présentations multi-colonnes
 Fin des limites liées aux polices
 … et ce n'est qu'un début

32.  Ajout de templates spécifiques pour mobiles
 Templates différents en fonction des terminaux
 Penser à expurger les contenus d'éléments « lourds »
Reconnaître les utilisateurs mobiles
 Via un nom de domaine spécifique : m.monsite.com
 Via le user-agent
 Par une combinaison des 2 méthodes
 Laisser des liens à disposition
Modules prêts à l'emploi existant sur certains CMS

34. Arnaud Pagnier
Conduire un projet « Mobile »

35.  Une méthodologie classique… ingénierie
logicielle.
 Développements agiles : Xtrem
Programming, SCRUM…

36.  Un dilemme cornélien :
 Ma cible, mes utilisateurs ?
 La tendance du marché ?
 Les spécificités de mon application ?
 Le couperet technologique
 Le budget…

37.  Wireframing
 Balsamiq, MockApp
 Périmètre peu étendu, exhaustivité des cas
d’utilisation
 Maquettage graphique
 Les interfaces et le « look & feel » standard du
terminal
 Les surcouches constructeurs
 Ultra-personnalisation = Ultra-facturation !

40.  Outils de productivité
 EDI
 Gestion des sources
 Tests unitaires, tests fonctionnels
 Intégration continue
 Design Patterns
 Small Releases

41.  Les tests utilisateurs
 Emulateurs
 Terminaux
▪ iOS : quelles versions ?
▪ Android : quelles versions ? Quels terminaux ?
▪ Et les autres ?
 Certificats, plateformes de déploiement en test

42.  L’hégémonie des « stores »
 App Store
 Android Market
 App World
 Market Place
 Le référencement sur les stores ?
 Référencé sur le web, marketing web…

43.  S’enrôler, devenir développeur
 Devenir éditeur d’applications
 Choisir son public, mettre en avant son
application, choisir un modèle économique
 La sentence de l’App Store…

44.  Application trop lourde pour être obtenue en
3G
 Utilisation inappropriée de la connectivité 3G
 Contenus manquants
 Fonctionnalités « privées »
 Utilisation détournée d’une icône
 Illustration inadaptée au public ciblé
 Illustration vraiment inadaptée 

45. http://www.audiable.com

46. Arnaud Pagnier
Questions ? et réponses !