Développer des applications mobiles

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

INTRODUCTIONJean-Baptiste Boisseau

Le mobile après le web…

Nous sommes en 1997

Un marché prometteur, mais...

Applis mobiles vs. Web mobile

PREMIERE PARTIEJean-Baptiste Boisseau

Le Mobile en 2012

SmartPhone : définition

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

SmartPhone : définition

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

Les principaux terminaux

Apple : Iphone 4, Iphone 4SSamsung : Galaxy/Galaxy S, Nexus,

Wave Nokia : N9, C6, LumiaRIM : Torch, BoldHTC : Gamme Android, gamme

Windows Sony Ericsson : XperiaLes autres : LG, Huawei, Motorola,

Acer...

Les systèmes d’exploitation

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...

DEUXIEME PARTIEArnaud Pagnier

Développer « Mobile »

La problématique de développement

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.

Les technologies de développement

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

Coup d’œil sur les API

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

Mise en oeuvre

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

Architecture du code

IOS

ANDROID

Model

View

Controller

View

Activity

ControllerModel

Activity

Coup d’œil sur les EDI

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…

Eclipse

XCode

Une architecture « classique » 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…

Serveur d’applicatio

n web

Une architecture « classique »

Logique « métier »

Interface d’admin

Terminal

Données

distantes

Données

locales

Logique « métier »

Synchronisation

JSON

Le cas « Xtea »

Le cas « Xtea »

Données

XTea

Logiciel « Perceav

al »

XML

XML

Données

locales

Services SOAP(J2E)

Services REST(ZendFramework)

Le cas « atHome »

Le cas « atHome »

Données

métiers

Donnéesutilisateu

rs

6 applis mobiles

3 sites « maison »

Sites « partenaires »

Backoffice

Services WebJSON (ZendFramework)

Les solutions « multiplateformes »

Un seul développement pour toutes les plateformes ?

PhoneGap : une solution pertinente.

Un développement « web » avec HTML5, CSS3, et…

Une API JavaScript

Les solutions « multiplateformes »

HTML 5 et CSS3

JavaScript

API PhoneGap

API natives

des terminau

x

Compilation

Quelles solutions choisir ?

Développement « natif » ?

Développement « PhoneGap » ?

Développement « full web » ?

TROISIEME PARTIEJean-Baptiste Boisseau

Du web au web mobile

Ce qui change du web

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 !

Choisir les terminaux cibles

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

Design d’un site mobile

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

au clavier

HTML5 / CSS 3

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

Web mobile et CMS

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

Le cas « EnigmApp »

QUATRIEME PARTIEArnaud Pagnier

Conduire un projet « Mobile »

Conduite de projet

Une méthodologie classique… ingénierie logicielle. Développements agiles : Xtrem

Programming, SCRUM…

Etape 0 : choix de la technologie

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

Etape clé 1 : maquetter

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 !

Balsamiq, MockApp, Powerpoint ?

Les documents techniques…

L’API

CanalBlog

dans le

moindre détail

Etape clé 2 : coder

Outils de productivité EDI Gestion des sources Tests unitaires, tests fonctionnels Intégration continue

Design Patterns

Small Releases

Etape clé 3 : tester

Les tests utilisateurs Emulateurs Terminaux ▪ iOS : quelles versions ?▪ Android : quelles versions ? Quels terminaux ?▪ Et les autres ?

Certificats, plateformes de déploiement en test

Etape 4 : distribuer

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…

L’AppStore, n’y rentre pas qui veut !

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…

Le Cas « Diable Vauvert »

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

Le Cas « Diable Vauvert »

http://www.audiable.com

CONCLUSIONArnaud Pagnier

Questions ? et réponses !