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

Like this? Share it with your network

Share

Cas de la refonte de STM.info

on

  • 2,347 views

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 ...

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.

Statistics

Views

Total Views
2,347
Views on SlideShare
2,234
Embed Views
113

Actions

Likes
8
Downloads
0
Comments
3

4 Embeds 113

http://www.entreprise-marketing.fr 51
http://www.scoop.it 28
https://twitter.com 22
http://www.linkedin.com 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • Est-ce qu'on pourrais avoir l'adresse du blogue technique ? (slide 61)
    Are you sure you want to
    Your message goes here
    Processing…
  • Très intéressant :)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Cas de la refonte de STM.info Presentation Transcript

  • 1. CAS DE LA
 REFONTE DE STM.INFO DrupalCamp Montréal 2013 !
  • 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. 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. Contexte 4
  • 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. 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. 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. Gestion de projet 8
  • 9. rue Stanley rue Sainte-Catherine
  • 10. L’objectif du client
  • 11. Ce que le chargé de 
 compte explique
  • 12. Ce que l’ergonome envisage
  • 13. Ce que le designer propose
  • 14. Ce que le développeur a compris
  • 15. Ce que l’utilisateur voulait
  • 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. Ç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. Ça va vite! - Nicole Gruslin, STM
  • 19. Nos musts : Des équipes multidisciplinaires Un espace de travail propice Un rythme d’agence constant Des produits plutôt que des plans
  • 20. Intégration avec les 
 systèmes de la STM 21
  • 21. Solution A : Drupal seul Infos sur les trajets Infos sur les autobus 22 ? Infos sur les emplois Site Drupal
  • 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. 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. Site mobile 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. 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. 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. 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. 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. 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. 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. Tests utilisateurs 45
  • 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. Tests automatisés et 
 intégration continue 47
  • 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. 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. 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. 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. Défi #4 : Internet Explorer Selenium Machine virtuelle Batterie de tests relativement longue : 2 heures Images de VM de Microsoft (un cauchemar!) 53
  • 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. 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. Infrastructure et performance 57
  • 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. 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. Contributions à la 
 communauté Drupal 60
  • 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. Des questions ? 62