C'est quoi une application mobile ?

Grace à son téléphone mobile, on a aujourd'hui accès à toute la richesse des contenus d'Internet et à des millions d'applications. Mais quand on est fournisseur de contenu à quoi cela sert-il de réaliser une application mobile ? Et comment la réaliser pour qu'elle fonctionne sur le plus de terminaux mobiles ? Cet article vous propose mon retour d'expérience sur le développement d'une application mobile pour un site sportif.

Les smartphones c'est formidable pour aller sur le web (il parait)

Le Football Américain est un sport peu connu en France mais qui a pourtant de nombreux inconditionnels (spectateurs et joueurs) et même une fédération et un championnat dédié. Sur ce sujet, le site qui fait référence en France est sans aucun doute le site FootballAmericain.com. Animé par une dizaine de volontaires journalistes sportifs amateurs qui travaillent comme des pros, il délivre en Français depuis une douzaine d'années des informations quotidiennes de qualité.

Le site web de FootballAmericain.com, est un site sportif classique: des actualités, des analyses, les résultats des derniers matchs, un calendrier des rencontres, … J'ai pris l'habitude depuis plusieurs mois de le consulter régulièrement depuis mon mobile. Or, il faut bien dire que comme beaucoup de sites, l'expérience depuis un mobile est assez décevante. Voir ci-dessous sous Windows Phone 7.

Car si l'arrivée de l'Internet sur mobile est une réalité, la taille d'un smartphone reste toujours un handicap pour reproduire à l'identique l'expérience d'un site prévu pour un écran de PC. Oui on peut visualiser un site web sur smartphone mais en l'absence d'un site adapté, le confort de lecture est plus que limité et l'utilisateur doit multiplier les actions: passage en mode paysage, zoom, scrolling, déplacement, …

Et si on faisait une application mobile… pour iPhone ?

Lassé de mon expérience mobile de lecteur du site FootballAmericain.com, je décide il y a quelques mois de prendre contact avec les auteurs pour savoir s'ils ont envisagés de développer une application mobile pour leur site. L'objectif étant d'avoir depuis le mobile une expérience plus sympathique que le site web standard c’est-à-dire notamment:

• Taille de page adaptée au mobile,
• Information plus synthétique : des contenus réduits et, peut-être, moins de contenus,

• Navigation simplifiée.

J'échange avec Pierre-François, rédacteur en chef et créateur du site qui par ailleurs est informaticien et développeur ) La bonne nouvelle est que la version mobile du site est prévue dans les cartons. La mauvaise nouvelle est que le carton est grand et qu'il y a d'autres évolutions plus urgentes à venir, sans compter la maintenance et la mise à jour au quotidien. De plus, pour un site web réalisé par des bénévoles, même si le travail est semi-pro, le temps reste limité et le site étant sans publicité, il n'y a pas de moyens pour payer l'hébergement, et encore moins pour rémunérer des journalistes, des exploitants ou des développeurs !

Je propose donc mon aide à Pierre-François pour développer une version mobile du site. Je propose notamment de développer l'application mobile pour mes téléphones (et en fonction de mes compétences): donc pour Windows Phone 7 et pour webOS. La réponse de Pierre-François ne se fait pas attendre: "Super ! Mais… tu ne pourrais pas prendre en charge plutôt le développement pour iPhone et Android ?".

Evidemment: quel intérêt de développer une application mobile d'un site si la majorité des  utilisateurs ne peuvent pas l'utiliser sur leur Smartphone ? Le graphique ci-dessous résume le problème:

Le marché se divise aujourd'hui entre Android, iOS, Symbian et BlackBerry. La part de marché du reste des systèmes d'exploitation dont Windows Phone 7, Bada et webOS (qui n'apparait même pas sur le graphique) est négligeable.

Vive la diversité !

Mais alors pourquoi ne pas développer une application mobile pour chaque système d'exploitation ? Encore une fois le tableau ci-dessous résume le problème:

Il n'y a pas un seul langage de développement et un seul environnement commun entre les différents systèmes d'exploitation mobile ! Dans ces conditions, même s'il existe quelques initiatives, disposer d'un framework multi-plateforme est une utopie.

Si vous voulez développer une application mobile pour différentes plateformes, il vous faut donc :

• réaliser un développement différent pour chaque plateforme,
• faire appel à des compétences différentes (un développeur maîtrisant rarement plusieurs plateformes),
• maintenir/faire évoluer votre application en parallèle sur chaque plateforme.

Sans compter qu'au sein d'une même plateforme on peut être amené à gérer des versions différentes de la plateforme (Android 2.1/2.2, iOS 4/5, Windows Phone 7/7.5, …) voire même des formats d'écrans différents ! Inutile donc de préciser que cela coûte TRES cher d'autant qu'un développeur mobile est aujourd'hui une denrée rare (et donc chère).

De très nombreuses entreprises qui proposent des applications mobiles, font donc tout simplement l'impasse sur plusieurs plateformes et considèrent que tout le monde a un iPhone (ce qui est probablement le cas non ? ).

Application ou site web mobile ?

Revenons au problème de départ: comment accéder au site  FootballAmericain.com à la fois depuis Windows Phone 7 et webOS mais aussi sur iPhone et Android.

Une solution: développer une "version mobile du site web" plutôt qu'une "application mobile". Autrement dit, faire une autre version des pages du site qui soit plus adaptée aux mobiles. Chose intéressante, pour réaliser cela il existe une multitude de framework qui gèrent le multiplateforme, c'est par exemple le cas de Sencha Touch, iUI ou JQuery Mobile.

Le fonctionnement de ces frameworks est identique: ils déchargent le développeur du travail d'adaptation des écrans à chaque plateforme en fournissant des éléments graphiques proches de ceux d'une véritable application mobile. Pour cela, ils utilisent notamment les capacité qu'a HTML5 de "dessiner" les contrôles plutôt que de s'appuyer sur les contrôles HTML standard.

Après réflexion, je me suis donc lancé cet été dans la réalisation d'une version mobile du site  FootballAmericain.com en JQuery Mobile. Voilà ci-dessous ce que donne le site mobile sur Android (il est accessible sur http://m.footballamericain.com).

On voit que les fonctionnalités ont été réduites (Articles, Scores/Calendrier et Classements uniquement) et sont accessibles d'un clic. On voit aussi que l'interface est adaptée à un mobile. On constate enfin que, grâce à JQuery Mobile, on dispose nativement d'éléments graphiques (Listes, Barre de bouton, …) qui fonctionnent sur tous les terminaux (liste des terminaux supportés ici).

Le schéma suivant décrit l'architecture de la solution web mobile: le code source HTML5 et JavaScript de l'application s'appuie sur JQuery Mobile et sollicite le site web pour obtenir les données.

Néanmoins vous me direz: "ce n'est pas une application mobile". C'est vrai !

Mais qu'est ce que cela change ?

1. L'utilisateur n'a pas un icône de lancement dans la liste de ses applications,
2. On ne peut pas l'installer depuis l'App Store/Android Market/App Catalog,
3. Cela ne fonctionne pas quand on n'a pas accès au réseau,
4. On ne peut pas utiliser de fonctionnalités natives du terminal (photo, GPS, contacts, accéléromètre, notification, stockage …).

Concernant l'icône de lancement ce n'est pas tout à fait vrai car toute les plateformes permettent aujourd'hui de transformer un raccourci web en un icône de lancement (exemple ci-dessous sous webOS). Mais il est vrai que les utilisateurs ne connaissent pas toujours cette fonctionnalité.

Concernant la présence dans l'App Store, c'est vrai que cela rend l'application moins visible, néanmoins cela simplifie le déploiement et il n'y a plus à attendre (espérer !) la validation de l'application par l'App Store pour mettre en ligne une nouvelle version.

Par contre il est vrai qu'un site web mobile n'est pas accessible lorsqu'il n'y a pas le réseau mais par définition, dans un mode déconnecté on ne pourrait de toute manière avoir accès qu'à un historique des contenus.

Enfin, il est vrai également qu'un site web mobile ne peut pas, accéder aux fonctionnalités du terminal (GPS par exemple) ce qui peut limiter ses fonctionnalités.

Le meilleur des 2 mondes

Peut-on bénéficier des avantages d'avoir un site web mobile (code identique pour toutes les plateformes) sans perdre les avantages d'une application mobile (intégration au terminal) ? C'est exactement ce que propose PhoneGap.

PhoneGap est  à la fois un outillage et un framework. Concrètement, il vous propose de résoudre le dilemme "web ou application" en partant du principe suivant:

• Vous écrivez votre application en HTML5/JavaScript,
• Vous intégrez à votre application la librairie JavaScript PhoneGap qui vous donne accès à toutes les fonctionnalité de votre terminal (liste exhaustive ici),
• Vous développez une application native sur votre plateforme cible qui intègre uniquement un contrôle "navigateur" pointant sur vos pages HTML (ce code est fourni par PhoneGap),
• Vous compilez votre application en utilisant les outils du SDK de la plateforme cible,
• Vous publiez votre application sur votre App Store.

Sur ce principe là, j'ai donc réalisé une version "PhoneGap" du site web mobile FootballAmericain.com. Voici l'écran principal de l'application sur iPhone. Elle est évidemment identique visuellement au site web mobile mais c'est une véritable application qui dispose de son icône sur le terminal et qui peut être publiée sur un App Store.

L'application est d'ailleurs déjà disponible ici pour sur l'Android Market Place, ici sur l'App Catalog webOS et - le sera bientôt - sur l'AppStore iPhone (elle a rejetée 2 fois par Apple pour de mauvaises raisons ) et sur la Market Place Windows Phone.

Le schéma suivant décrit l'architecture de l'application.

Concrètement on voit qu'il suffit de recopier le code de la version web mobile dans le "template" d'application proposé par PhoneGap. PhoneGap étant disponible pour de nombreuses plateformes (détail ici), cela veut dire qu'on peut réaliser simplement une véritable application mobile pour chacune des plateformes cibles. On a de plus la possibilité d'accéder à toutes les fonctionnalités du terminal dont le stockage local, qui permet de gérer le mode déconnecté.

A noter que PhoneGap repose sur les outils de développement de chaque plateforme cible et nécessite  donc pour générer l'application d'avoir, à minima, installé et configuré le SDK de la plateforme. De même, pour publier son application sur l'App Store il faut avoir un compte développeur de la plateforme.

Conclusion

Une application mobile permet de proposer des contenus adaptés et intégrés à l'ergonomie d'un smartphone.  Quel site web ou quelle entreprise ne souhaite pas disposer de son application mobile ? Mais comment supporter le coût de développement et de maintenance pour de multiples plateformes dans une période ou précisément les entreprises recherchent des  sources d'économie ?

L'utilisation de framework comme JQuery Mobile/PhoneGap est un bon moyen de réduire les coûts de réalisation et de déploiement d'une application mobile sans réellement faire de concession sur sa qualité. Une bonne preuve que le couple HTML 5/JavaScript peut être une solution efficace pour garantir la portabilité des développements.

De nombreuses applications mobiles sont déjà complétement ou partiellement construites de cette manière (l'application AppStore iOS par exemple !), je fais le pari que leur nombre ne va pas cesser de croître dans les années qui viennent. Alors: qu'attendez-vous ?

Pour ceux qui veulent aller plus loin, notez que les sources de l'application sont disponibles sur Github. J'en profite pour remercier Pierre-François de m'avoir ouvert le capot du CMS du site FootballAmericain.com et d'avoir partagé avec moi (c'est le roi du SQL ) cette réalisation.