Your SlideShare is downloading. ×
CAS DE LA

REFONTE DE
STM.INFO
DrupalCamp Montréal 2013
!
Bonjour !
Jan-Nicolas Vanderveken, associé, TP1, @nvanderv
Albert Albala, développeur, TP1, @alberto56
Frédéric Gouin, ana...
Aujourd’hui
Contexte
Gestion de projet
Intégration avec les
systèmes de la STM

Tests automatisés et
intégration continue
...
Contexte

4
Des utilisateurs satisfaits
Site développé en 1996 - 1997
Mis en ligne en 1997
90 % de satisfaction
Dans le contexte actue...
L’open source à la STM
La STM crée un blogue WordPress en 2008
En 2009, elle entreprend de choisir un outil pour la refont...
Philosophie
Nous avons, tout au long du projet, considéré STM.info
comme un service, et non comme un site web.
Comme pour ...
Gestion de projet

8
rue Stanley

rue Sainte-Catherine
L’objectif du client
Ce que le chargé de 

compte explique
Ce que l’ergonome envisage
Ce que le designer propose
Ce que le développeur a compris
Ce que l’utilisateur voulait
Les équipes multidisciplaires
Encourage la discussion parmi les différentes expertises
Les expertises sont impliquées tôt ...
Ça prend du rythme !
Des cycles de deux semaines, 

qu’on planifie un lundi sur deux.
Une démo client un vendredi sur deux...
Ça va vite! - Nicole Gruslin, STM
Nos musts :
Des équipes multidisciplinaires
Un espace de travail propice
Un rythme d’agence constant
Des produits plutôt q...
Intégration avec les 

systèmes de la STM

21
Solution A : Drupal seul
Infos sur les
trajets

Infos sur les
autobus

22

?

Infos sur les
emplois

Site
Drupal
Solution B : Drupal + middleware
Infos sur les
trajets

Infos sur les
autobus

23

Infos sur les
emplois

Middleware
Rails...
Avantages
Sous-équipes au sein de l’équipe de développement
Impératif de garder une bonne communication
Objets bidons (« M...
Site mobile

25
Les grands objectifs
Optimiser les activités de déplacement pour les téléphones
intelligents (itinéraires, horaires, tarif...
L’écosystème mobile
Un site web adaptatif (dès le début)
Une application web (à 80% du développement)
Des applications nat...
Solution proposée
Optimisation mobile, en mode adaptatif, pour les sections
informationnelles du site.
Développer une appl...
ACCUEIL ET

PAGES DE CONTENU

ACCUEIL ET

THÈMES DE DÉPLACEMENT

(ADAPTATIF)

THÈMES DE DÉPLACEMENT

ordinateur + tablette...
Orientations technologiques
Optimiser le planificateur de trajet pour une expérience
mobile en misant sur un développement...
visiteur

ordinateur + tablette

répartiteur de charge

téléphone intelligent

(HAProxy)

appel à
l’action

stm.info

m.st...
Les avantages?
Un client web mobile ultra-léger qui met l’accent sur
l’expérience du client en déplacement.
Aucun changeme...
Tests utilisateurs

45
Beta public
TP1
Tests
d’accessibilité
AccessibilitéWeb
Yu Centrik

Tri de cartes
TP1 / Adviso

Tests
utilisateurs sur
maqu...
Tests automatisés et 

intégration continue

47
Défi #1 : Tests de JavaScript
Drupal est excellent pour tester des pages statiques
Mise en place de tests avec Behat
Nécess...
Défi #2 : Bien définir les tests
Développement piloté par les besoins d’affaires, ou

« Behavior-driven development »
Utilis...
1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
 
 
 
 

Scénario: (Sprint 7, Story STMMEO-43) En tant que client, Je veux être!
en mesu...
Défi #3 : Tests d’APIs externes
Objets bidons
Développement et contribution du module Mockable
Importance de simuler tous l...
Défi #4 : Internet Explorer
Selenium
Machine virtuelle
Batterie de tests relativement longue : 2 heures
Images de VM de Mic...
Intégration continue
Un serveur d’intégration continue Jenkins a été mis en
place plus tard dans le projet.
Les prochaines...
Avantages et défis
Très peu de régressions se sont rendues en production
Découverte de bogues tôt dans le processus de
dépl...
Infrastructure et performance

57
Infrastructure STM.info
Des dizaines de serveurs physiques et virtuels
Des centaines de milliers d’utilisateurs par jour, ...
Leçon : bien utiliser la cache Drupal
Tests de charge
Identifier et reproduire une utilisation réaliste pour la STM
Cache ...
Contributions à la 

communauté Drupal

60
Contributions à la communauté
Participation à plus de 100 « issues »
Près de 30 « patchs » soumises à divers modules, 

Dr...
Des questions ?

62
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Cas de la refonte de STM.info
Upcoming SlideShare
Loading in...5
×

Cas de la refonte de STM.info

2,203

Published on

La refonte du site web de la STM (Société de Transport de Montréal), tant en version classique que mobile, présentait une série d'exigences, de défis et de risques. Avec le lancement du site l'été dernier, il est temps de faire un retour sur le travail accompli, tant d'un point de vue organisationnel que technique. Cette présentation vise les gestionnaires de projet et développeurs (Drupal et Ruby on Rails). Sans trop entrer dans les détails techniques, nous nous concentrerons avant tout sur les principes de haut niveau qui ont gouverné le projet.

Published in: Technology
3 Comments
8 Likes
Statistics
Notes
  • Il n'y a pas de blogue dédié à ce projet, mais différents billets de blogue. On va reformuler. Tu peux en trouver sur notre blogue: http://www.tp1.ca/blogue/views-drupal-7-onglets-2013 et plusieurs autres sur le blogue d'Albert Albala: http://mediatribe.net.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Est-ce qu'on pourrais avoir l'adresse du blogue technique ? (slide 61)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Très intéressant :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,203
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Cas de la refonte de STM.info"

  1. 1. CAS DE LA
 REFONTE DE STM.INFO DrupalCamp Montréal 2013 !
  2. 2. Bonjour ! Jan-Nicolas Vanderveken, associé, TP1, @nvanderv Albert Albala, développeur, TP1, @alberto56 Frédéric Gouin, analyste applications, STM Nicole Gruslin, conseillère corporative web, STM 2
  3. 3. Aujourd’hui Contexte Gestion de projet Intégration avec les systèmes de la STM Tests automatisés et intégration continue Infrastructure et performance Site mobile Tests utilisateurs 3 Contributions à la communauté Drupal Gestion du changement
  4. 4. Contexte 4
  5. 5. Des utilisateurs satisfaits Site développé en 1996 - 1997 Mis en ligne en 1997 90 % de satisfaction Dans le contexte actuel, STM.info doit avant tout faciliter les déplacements des usagers et être disponible en tout temps, même dans les périodes de pointe et de crise. 5
  6. 6. L’open source à la STM La STM crée un blogue WordPress en 2008 En 2009, elle entreprend de choisir un outil pour la refonte de ses propriétés web. Drupal est sélectionné. L’open source fait désormais partie intégrante des outils privilégiés par la STM (Drupal, Nuxeo, Liferay, etc.) Début du projet STM.info : mi-2012 6
  7. 7. Philosophie Nous avons, tout au long du projet, considéré STM.info comme un service, et non comme un site web. Comme pour ses services de déplacement, STM.info devait être accessible au plus grand nombre possible. Nous avons placé l’utilisateur au centre du projet. Finalement, chaque solution était évaluée en fonction de sa stabilité, de son évolutivité et de sa performance. 7
  8. 8. Gestion de projet 8
  9. 9. rue Stanley rue Sainte-Catherine
  10. 10. L’objectif du client
  11. 11. Ce que le chargé de 
 compte explique
  12. 12. Ce que l’ergonome envisage
  13. 13. Ce que le designer propose
  14. 14. Ce que le développeur a compris
  15. 15. Ce que l’utilisateur voulait
  16. 16. Les équipes multidisciplaires Encourage la discussion parmi les différentes expertises Les expertises sont impliquées tôt dans le processus Un plus grand sens d'autonomie et de ownership Moins d’ego, moins de « divas », nulle part où se cacher Une dimension sociale plus grande Place l’utilisateur au centre des préoccupation 17
  17. 17. Ça prend du rythme ! Des cycles de deux semaines, 
 qu’on planifie un lundi sur deux. Une démo client un vendredi sur deux. Chaque matin, un meeting debout. Et une démo d’agence chaque deux semaines. 18
  18. 18. Ça va vite! - Nicole Gruslin, STM
  19. 19. Nos musts : Des équipes multidisciplinaires Un espace de travail propice Un rythme d’agence constant Des produits plutôt que des plans
  20. 20. Intégration avec les 
 systèmes de la STM 21
  21. 21. Solution A : Drupal seul Infos sur les trajets Infos sur les autobus 22 ? Infos sur les emplois Site Drupal
  22. 22. Solution B : Drupal + middleware Infos sur les trajets Infos sur les autobus 23 Infos sur les emplois Middleware Rails RESTful API Site Drupal
  23. 23. Avantages Sous-équipes au sein de l’équipe de développement Impératif de garder une bonne communication Objets bidons (« Mock objects ») Tests plus efficaces Abstraction des APIs Documentation des interfaces 24
  24. 24. Site mobile 25
  25. 25. Les grands objectifs Optimiser les activités de déplacement pour les téléphones intelligents (itinéraires, horaires, tarifs et état du service métro et autobus). Obtenir un design de marque cohérent, pour les trois environnements ciblés par la STM : ordinateurs, tablettes 
 et téléphones intelligents. Créer une solution évolutive tenant compte des grandes tendances du marché et pouvant s’adapter. 26
  26. 26. L’écosystème mobile Un site web adaptatif (dès le début) Une application web (à 80% du développement) Des applications natives (hors mandat) 28
  27. 27. Solution proposée Optimisation mobile, en mode adaptatif, pour les sections informationnelles du site. Développer une application web mobile optimisée pour le plus d’appareils mobiles intelligents possible. Mettre à profit les API et le CMS développés à ce jour. Rendre la carte disponible sur les téléphones intelligents. Offrir à la clientèle une expérience optimisée et unifiée pour les téléphones intelligents sur l’ensemble du site. 29
  28. 28. ACCUEIL ET PAGES DE CONTENU ACCUEIL ET THÈMES DE DÉPLACEMENT (ADAPTATIF) THÈMES DE DÉPLACEMENT ordinateur + tablette + téléphone intelligent téléphone intelligent (ADAPTATIF) ordinateur + tablette
  29. 29. Orientations technologiques Optimiser le planificateur de trajet pour une expérience mobile en misant sur un développement en Ruby on Rails. C’est le volet applicatif. Optimiser les pages intérieures pour les plateformes mobiles en version adaptative, sous Drupal. C’est le volet informationnel, en développement depuis le début du projet. La gestion du site et l’entrée du contenu sont centralisées dans Drupal. Une seule interface pour les webmestres. 42
  30. 30. visiteur ordinateur + tablette répartiteur de charge téléphone intelligent (HAProxy) appel à l’action stm.info m.stm.info lien en pied de page ordinateur + téléphones intelligents application mobile
  31. 31. Les avantages? Un client web mobile ultra-léger qui met l’accent sur l’expérience du client en déplacement. Aucun changement à l’infrastructure nécessaire. Développement accéléré utilisant l’architecture existante. Environnement permettant de répondre aux besoins spécifiques des utilisateurs de téléphones intelligents. Gains de performance grâce à un accès direct aux API. 44
  32. 32. Tests utilisateurs 45
  33. 33. Beta public TP1 Tests d’accessibilité AccessibilitéWeb Yu Centrik Tri de cartes TP1 / Adviso Tests utilisateurs sur maquettes fonctionnelles Yu Centrik Beta panel 
 6000 clients TP1 / Adviso Focus group 
 sur le design Callosum Beta panel 
 3000 employés STM Tests utilisateurs sur version alpha Yu Centrik 46
  34. 34. Tests automatisés et 
 intégration continue 47
  35. 35. Défi #1 : Tests de JavaScript Drupal est excellent pour tester des pages statiques Mise en place de tests avec Behat Nécessité de tester Internet Explorer, Firefox, Chrome... Défi : la prolifération des plateformes mobiles 48
  36. 36. Défi #2 : Bien définir les tests Développement piloté par les besoins d’affaires, ou
 « Behavior-driven development » Utilisation d’exemples concrets pour les tâches à accomplir dans Jira (agile) Automatisation basée sur un langage commun 49
  37. 37. 1 2 3 4 5 6 7 8 9 10 11 12 13             Scénario: (Sprint 7, Story STMMEO-43) En tant que client, Je veux être! en mesure de minimiser les correspondances dans mon itinéraire! ! Soit je suis sur la page d'accueil! Et je cherche le premier itinéraire entre "cote ste-ca" et "jean-talon [m"! Alors je vois "Ligne orange" avant "Itinérare 2"! Alors je vois "Ligne bleue" avant "Itinérare 2"! Et j'appuie sur "Modifier l'itinéraire"! Et j'appuie sur "Afficher les options"! Et je mets dans les options "Minimiser les correspondances"! Et j'appuie sur "Rechercher l'itinéraire"! Alors je ne vois pas "Ligne orange" avant "Itinérare 2"! Alors je ne vois pas "Ligne bleue" avant "Itinérare 2"! /**"  * @Given /^je vois sur la carte la ligne verte mise en évidence$/"  */" public function jeVoisSurLaCarteLaLigneVerteMiseEnEvidence() {"   _assert_html($this, MARKUP_CARTE_LIGNE_VERTE_SELECTIONNEE);" }" ! 50
  38. 38. Défi #3 : Tests d’APIs externes Objets bidons Développement et contribution du module Mockable Importance de simuler tous les scénarios potentiels (serveur externe non-disponible, temps de réponse inacceptable, etc.) 52
  39. 39. Défi #4 : Internet Explorer Selenium Machine virtuelle Batterie de tests relativement longue : 2 heures Images de VM de Microsoft (un cauchemar!) 53
  40. 40. Intégration continue Un serveur d’intégration continue Jenkins a été mis en place plus tard dans le projet. Les prochaines phases utiliseront l’intégration continue dès le début. 54
  41. 41. Avantages et défis Très peu de régressions se sont rendues en production Découverte de bogues tôt dans le processus de déploiement Batterie de tests trop longue, nécessité de l’automatiser davantage À l’avenir, importance de mieux simuler l’environnement de production 56
  42. 42. Infrastructure et performance 57
  43. 43. Infrastructure STM.info Des dizaines de serveurs physiques et virtuels Des centaines de milliers d’utilisateurs par jour, des centaines de requêtes simultanées Mise en cache : entre 60 secondes et 30 minutes 58
  44. 44. Leçon : bien utiliser la cache Drupal Tests de charge Identifier et reproduire une utilisation réaliste pour la STM Cache Varnish à 30 minutes et cache Drupal anonyme, sauf l’information importante (60 secondes) et les
 formulaires (aucune cache) Utilisation massive de AJAX 59
  45. 45. Contributions à la 
 communauté Drupal 60
  46. 46. Contributions à la communauté Participation à plus de 100 « issues » Près de 30 « patchs » soumises à divers modules, 
 Drupal core 7.x et 8.x Blogue technique Deux modules Drupal : Mockable et Representative Image Partage de code avec NBCUniversal 61
  47. 47. Des questions ? 62

×