IBM MobileFirst: developper vos apps iOS Android Windows vite et bien
Developper une application mobile
-
Upload
eutech-ssii -
Category
Technology
-
view
2.204 -
download
1
Transcript of Developper une application mobile
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 !