Réaliser une application mobile pour un groupe de presse avec PhoneGap

L’APPLICATION GAZETTE DES COMMUNESRéaliser une application mobile pour un groupe de presse avec PhoneGap

Meetup Paris #8

Les intervenants

Benjamin LUPUDirecteur digital

Pour le Groupe Moniteur

Aujourd’hui pour le Groupe Jeune Afrique

@benjaminlupu

Comme tout le monde, j’ai bien sûr une identité secrète…

http://uncatcrea.com

Benoît DesnosResponsable offre Mobile

Pour Netapsys

@netapsys

Création en 2004

350 collaborateurs

Couvre tout le spectre des technologies mobiles

Couvre toute la chaîne d’un projet mobile

Groupe Moniteur

• Cadrage du projetmarketing, fonctionnel

• Conceptionanalytics, wireframing, design, spécifications fonctionnelles

• Développement et mise à disposition des web services

• Recette fonctionnelle

Netapsys

• Conseil durant la phase de conception (faisabilité)

• Conception technique

• Développements et intégrations technique

La Gazette des communes

Information et services à destinations des collectivités locales

ActualitéVeille juridiqueInformation métier payanteOffres d’emploiFormationsPréparation aux concours

Magazine / Site web

• 1,7 million de professionnels• 1 million visites/mois• Dans le top 5 des sites professionnels en France

Convaincre de l’intérêt du projet

Versions iOS et Android disponibles depuis le 27 février 2014

Mi‐2013

• Un trafic mobile encore réduit5% des visites du site

• Mais en croissance forte+120% vs 2012

• 25% des utilisateurs équipés de smartphones

• 67% des possesseurs de smartphones l’utilisent pour un usage professionnel

Mais…

• Un questionnement sur l’intérêt par rapport à un site mobile

• Un précédent : l’application native iOS Emploi public

• Un coût et un impact organisationnel importants

• Ça vous rappelle quelque chose ?*

* « Il vous faut un site internet ! Ah… Pourquoi ? » Hit du début des années 2000 

Mais…

• Un usage qui s’impose à nous

• Une occasion

• d’enrichir nos offres

• d’atteindre notre audience sur des nouvelles plages de temps et de nouveaux canaux

• d’engager une démarche vers de nouveaux services portés par des applications mobiles (ex. appbooks, m‐learning)

• Défendre la marque

45% de l’audience mobile se fait tôt le matin et en soirée (vs 18% pour les ordinateurs).

La démarche

Une opportunité à maîtriserPérimètre fonctionnel, design et technologie.

• Les solutions hybrides repérées tôt dans le projet

• PhoneGap choisi après un prototypage

• Un fact checking tout au long de la conception pour s’assurer des coûts et de la faisaibilité technique

• Un périmètre volontairement restreint mais avec les fonctions essentielles notifications, consultation offline, accès aux contenus premium, offres d’emploi

• Une implication forte des concepteurs pour garantir à la fois une bonne intégration et une parité des versions pour chaque OS (iOS et Android)

Écran d’accueil favori

ParamètresGestion de la connexion pour accéder aux contenus premium

Offres d’emploiContenus premiumAccessibles si on est connecté

Actualité

Les fonctionnalités en 1 slide

Authentification

Offres d’emploiRecherche

Contenus

Connexiondroits d’accès attachés à l’utilisateur

droits d’accès attachés aux contenus

Web services

Détail des offres

Enfin avec quand même un petit schéma…

Les technologies mises en œuvre

• PhoneGapGestion de conteneur natif

• BackBoneJSFramework MVC

• jQueryMobileComposants frontend, web services

Côté interface utilisateur

?+• Orienté MVC• Peu de composants disponibles • Complexité pour faire évoluer des composants existants

• Gestion facilitée de l’IHM avec des devices différents – CSS par plateforme

• Fonctions mobiles complexes à mettre en œuvre :– Pull to refresh– Listes infinies

• Compatibilité iOS 8 (jQuery)

Listes infinies

Pull to refresh

Quelle alternative ?

Apporte des compléments IHM à jQueryMobile sous la forme de composants

Quelle alternative ?

• Librairies compatibles multi‐devices– Stockage local (Limite de 5Mo pour le 

localstorage) – illimité avec librairie– Google Analytics

• Évènements déconnectés

• Avantages– Simplicité– Gestion de composants natifs

Et PhoneGap dans tout ça ?

Alors ça a marché ?

Les objectifs ont été atteints• Les applications sont sorties en février 2014• Les coûts ont été maîtrisés• 18 000 utilisateurs les ont adoptées• Une première mise à jour est en attente de validation

Les points à travailler• L’adaptation des contenus au mobile• La disponibilité des web services• L’implication des équipes internes sur le support, les mises à jour• Optimisation de la présence dans les app stores (ex. notations)• Une nécessaire évolution technologique dans la prochaine 

version majeure

http://www.lagazettedescommunes.com/mobile/