L’APPLICATION 
GAZETTE DES 
COMMUNES 
Réaliser une application mobile pour un groupe de presse avec 
PhoneGap 
Meetup Paris #8
Les intervenants
Benjamin LUPU 
Directeur 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 Desnos 
Responsable 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 projet 
marketing, fonctionnel 
• Conception 
analytics, 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 juridique 
Information métier payante 
Offres d’emploi 
Formations 
Pré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éduit 
5% 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. app 
books, 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îtriser 
Pé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)
Les fonctionnalités en 1 slide 
Écran d’accueil favori 
Paramètres 
Gestion de la connexion pour 
accéder aux contenus 
premium 
Actualité 
Contenus premium Offres d’emploi 
Accessibles si on est connecté
Enfin avec quand même un petit schéma… 
Offres d’emploi 
Authentification 
Recherche 
Détail des offres 
Contenus 
droits d’accès attachés aux contenus 
Connexion 
droits d’accès attachés à l’utilisateur 
Web services
Les technologies mises en oeuvre 
• PhoneGap 
Gestion de conteneur natif 
• BackBoneJS 
Framework MVC 
• jQueryMobile 
Composants 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 oeuvre : 
– 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/

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

  • 1.
    L’APPLICATION GAZETTE DES COMMUNES Réaliser une application mobile pour un groupe de presse avec PhoneGap Meetup Paris #8
  • 2.
  • 3.
    Benjamin LUPU Directeurdigital Pour le Groupe Moniteur Aujourd’hui pour le Groupe Jeune Afrique @benjaminlupu
  • 4.
    Comme tout lemonde, j’ai bien sûr une identité secrète… http://uncatcrea.com
  • 5.
    Benoît Desnos Responsableoffre 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
  • 6.
    Groupe Moniteur •Cadrage du projet marketing, fonctionnel • Conception analytics, 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
  • 7.
  • 8.
    Information et servicesà destinations des collectivités locales Actualité Veille juridique Information métier payante Offres d’emploi Formations Préparation aux concours Magazine / Site web • 1,7 million de professionnels • 1 million visites/mois • Dans le top 5 des sites professionnels en France
  • 9.
  • 10.
    Versions iOS etAndroid disponibles depuis le 27 février 2014
  • 11.
    Mi‐2013 • Untrafic mobile encore réduit 5% 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
  • 12.
    Mais… • Unquestionnement 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
  • 13.
    Mais… • Unusage 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. app books, 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).
  • 14.
  • 15.
    Une opportunité àmaîtriser Pé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)
  • 16.
    Les fonctionnalités en1 slide Écran d’accueil favori Paramètres Gestion de la connexion pour accéder aux contenus premium Actualité Contenus premium Offres d’emploi Accessibles si on est connecté
  • 17.
    Enfin avec quandmême un petit schéma… Offres d’emploi Authentification Recherche Détail des offres Contenus droits d’accès attachés aux contenus Connexion droits d’accès attachés à l’utilisateur Web services
  • 18.
    Les technologies misesen oeuvre • PhoneGap Gestion de conteneur natif • BackBoneJS Framework MVC • jQueryMobile Composants frontend, web services
  • 19.
    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 oeuvre : – Pull to refresh – Listes infinies • Compatibilité iOS 8 (jQuery)
  • 20.
  • 21.
  • 22.
    Apporte des complémentsIHM à jQueryMobile sous la forme de composants Quelle alternative ?
  • 23.
    • Librairies compatiblesmulti‐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 ?
  • 24.
    Alors ça amarché ?
  • 25.
    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
  • 26.