JUST DO IT.
Je vais vous raconter l’histoire de la préparation de la réalisation du nouveau site web de Whoz.com ainsi que des plaquettes de communication afin d’être prêts à honorer l’invitation que Manpower, notre partenaire, nous avait faite à être présent au salon Vivatech qui se tenait les 24 et 25 mai à Paris.
Tout a commencé avec cette user story :
1. Description du besoin
En tant que visiteur du salon Vivatech qui aura lieu les 24 et 25 mai à Paris je souhaite, lors de ma visite sur le stand Whoz (stand L22–002 au Hall1 de la Porte de Versailles), repartir avec une ou deux plaquettes qui présentent l’offre Whoz ainsi que sa proposition de valeur et dans la foulée utiliser mon mobile pour partager le site Whoz.com à mes collaborateurs afin de pouvoir rapidement passer à l’étape suivante : adopter Whoz.
2. Attendus
• Plaquettes papiers de 8 pages au format A4 décrivant les 2 produits Whoz Consulting et Whoz Workforce.
• Site web responsive (mobile, tablette et desktop) présentant l’offre de Whoz ainsi que son équipe.
3. Le débat
Nous avons noté cette user story lors du sprint planning du Sprint 54 en date du 7 mai 2018.
Petit rappel, chez Whoz nous pratiquons l’agilité depuis le début. En quelques chiffres, à date, c’est :
- 54 sprints de 2 semaines,
- 4600 user stories,
- 6000+ déploiements,
- 7500+ builds,
- 1800+ scénarios de tests,
- 2200+ feedbacks,
- 350+ démos.
Nous appelons cela la 3D factory : Design | Data | DevOps. Pour plus d’informations cliquez-ici.
Revenons au débat (en mode Questions & Answers) :
Vincent : Combien de pages sur le site ?
François : 2, en fait 3. Non 4 : 2 pages produits, 1 page à propos de nous, et bien sûr la home.Vincent : On fait tout en interne ou est-ce que l’on sous-traite ?
François : Ça dépend : il faut vraiment que ça soit prêt pour le 21 mai dernier carat (mise en production du site et impression des plaquettes le 22).Vincent : La maquette du site est-elle prête ?
Carole : Non, Nicholas va la fournir d’ici mercredi 9.Vincent : Et pour la plaquette papier ?
François : Il faut que l’on trouve quelqu’un.François : Alors, combien ?
Vincent & David : Bon ça va être “chaud”. Le délai est vraiment court, surtout avec tous ces jours fériés, mais on devrait s’en sortir. Bon par contre pas de version anglaise, uniquement du français et bien sûr en statique…. 8 points, donc un développeur à temps plein sur ce sprint.François : Top c’est parti. A toi de jouer Nicho pour le site. Sinon pour les plaquettes on utilisera notre app Whoz pour trouver le bon talent.
Aussitôt dit, aussitôt fait : pour trouver quelqu’un qui réaliserait la plaquette nous avons utilisé en live notre moteur de casting disponible dans l’appli Whoz.
En créant un besoin puis en renseignant les dates de la mission ainsi que les compétences requises. Un petit clic sur recherche… et voilà, nous avons trouvé un partenaire externe : Marie-Reine Lim. Elle semblait dispo et nous avions déjà travaillé avec elle : elle est top et c’est une vraie pro en édition.
Pour ceux qui se demanderaient si Marie-Reine existe vraiment, je vous invite à découvrir ses réalisations sur son site.
Marie-Reine a travaillé avec nous pour produire en un temps record ce matériel de communication. Nous en sommes très fiers !
Découvrez-les en utilisant les liens ci-dessous :
• Whoz Consulting
• Whoz Workforce
4. La réalisation
Nicholas a réalisé, très rapidement, la maquette qui représente l’interface générale et me l’a présentée le mercredi 9 mai.
Nous avions un très grand avantage à réaliser le site et les plaquettes en même temps : nous allions bénéficier d’une seule et même rédaction et ainsi nous pourrions mutualiser notre réflexion et notre architecture pour ces nouveaux supports de communication.
Pour pouvoir réaliser un site fiable et effectuer le moins de tests possible tout en étant certains que le rendu final serait optimal, nous avons choisi un framework web au lieu d’un CMS. Partir sur l’utilisation d’un CMS nous a paru contenir un risque trop élevé sur la durée d’un seul sprint.
Nous avons donc décidé d’utiliser Material Design Components for Web (MDC) qui offre à la fois un système solide de grille pour site responsive et surtout une qualité d’intégration très élevée.
En première phase de développement il fallait tout d’abord visionner cette vidéo :
Une fois visionnée, nous avons procédé comme cela :
Jour 1 (jeudi 10 mai 2018)
J’ai créé un nouveau repository dans Bitbucket (un logiciel de gestion de source de la suite Atlassian). Ensuite j’ai récupéré le projet dans mon IDE (IntelliJ Idea parce qu’il n’y a pas mieux pour bosser).
Puis j’ai commencé à intégrer l’interface générale du site en utilisant les modules MDC (principalement : layout-grid, button, typography et bien évidemment theme).
So far so good, à ce stade, je me dis que c’est chaud mais que ça va passer :-).
Jour 2
Je me suis vite retrouvé face au besoin de gérer du contenu partagé entre plusieurs pages/zones du site.
Et là, c’est le … drame. Ça commence à se corser. Pour cela un CMS aurait été parfait.
Notre application front est développée sous Angular. Je me suis alors dit que je pouvais bénéficier de ce framework pour me créer un semblant de CMS et permettre de rendre dynamique des parties du site plutôt que de tout intégrer à la main. Cependant je savais que cela pouvait poser un souci de référencement du contenu par les moteurs de recherches.
J’ai alors pensé à Angular Universal qui peut générer une version statique d’une application Angular facilement consultable, lisible et navigable sans JavaScript (le langage qui fait fonctionner, dans votre navigateur, les applications comme Gmail ou Whoz).
Angular Universal rend également disponible un aperçu du site puisque chaque adresse renvoie une page entièrement rendue : parfait donc pour le référencement par des moteurs comme Google ou Bing.
J’en ai parlé avec l’équipe lors de notre stand up quotidien qui se tient en début d’après midi heure de Paris à 14h14 : comme nous sommes distribués sur plusieurs fuseaux horaires entre la France, le Portugal et la Martinique, le milieu d’après-midi pour Paris nous permet à tous de rester synchronisés. Si vous souhaitez en savoir plus, c’est par ici.
Ah j’oubliais, pourquoi 14h14 et non pas 14h15 : nous vous expliquerons cela très prochainement… :).
J’ai eu l’approbation de mes co-équipiers Jérôme et David et nous nous sommes dit qu’au pire si nous n’étions pas capables de mettre en production le site avec Angular Universal, nous pourrions toujours exporter à la main chaque page générée par le framework et les héberger de manière statique.
Jour 3
David avait testé pendant le week-end la fourniture d’un nouvel environnement sur notre espace d’intégration pour permettre de livrer une image Docker qui fait tourner NodeJS pour servir Angular Universal. Tout cela intégré dans Bamboo (toujours de la suite Atlassian) comme l’ensemble de nos applications permettant de fournir notre application.
Génial, ça s’annonce bien : nous allons donc pouvoir nous appuyer à 100% sur Angular.
Je dois avouer que ça m’a vraiment soulagé. J’allais pouvoir aborder la suite du sprint avec un peu plus de sérénité.
Les product owners (POs), Carole, Emilie, François et Mikael, et bien sûr Nicholas, ont travaillé d’arrache pied à la rédaction du contenu ainsi qu’à la réalisation de l’ensemble des captures d’écrans pour illustrer le contenu des pages.
J’allais pouvoir m’en servir pour intégrer les pages du site.
Mon expérience passée m’a montré que dans ce genre de réalisation, il est important de pouvoir a minima gérer des corrections et des modifications du site en flux tendu. Nous avons identifié un modèle que nous allions appliquer sur l’ensemble des pages du site.
Qui dit Angular, dit possibilité d’utiliser un système de traduction type ngx-translate.
Vous vous demandez très certainement et légitiment pourquoi utiliser un module comme ngx-translate si on ne prévoit qu’une version en français. La réponse est simple : l’installation et l’utilisation de ce module sont d’une très grande simplicité. Cela permet de centraliser l’ensemble des textes du site et qui sait peut-être proposer une version en anglais dès le lancement sans effort de développement particulier. Je connais bien mes chers POs : ils aiment les surprises de ce genre lorsque nous restons dans le même budget !
Jours 4 et 5
Plus le travail d’intégration avance, plus le fichier de langue devient en fait un modèle de données qui gère le texte, l’affichage et la structure du site.
Le template d’une page s’articule sur un modèle identifié et donc un objet modélisé. Concrètement notre site s’appuie sur deux composants Angular pour fournir le contenu :
- un pour la page d’accueil qui a une apparence et donc un architecture spécifique,
- un pour l’ensemble des autres pages du site (les 2 pages produits et la page à propos). Tous deux incluent des parties de contenus qui sont répétées sous un format commun que nous avons modélisé dans un objet PageSection que voici :
La même chose, sans le jargon technique : une section de page contient un titre, un sous-titre, un contenu (texte, liste, etc…), un numéro d’identification visuelle, une image ainsi que ses dimensions d’affichage, et enfin d’autres paramètres permettant de décider de l’affichage de la section dans la page. Concrètement :
Jour 6
L’ensemble du site est intégré. J’ai donc pu fournir aux product owners un fichier de langue au format JSON contenant l’ensemble du texte du site pour réaliser la traduction vers l’anglais directement intégrable dans l’application lors de sa livraison.
Une fois le fichier livré, son intégration et donc l’obtention d’une version du site 100% en anglais nous a pris quelques instants : grâce bien sûr à ngx-translate mais aussi à la facilité à gérer les routes avec Angular. Une simple copie de définition des routes pour proposer une version anglaise bien distincte avec des URLs propres et donc un SEO séparé pour l’anglais.
David, lui a travaillé à l’intégration des meta tags (ce sont les informations utilisées pour décrire le site pour les moteurs de recherche mais aussi lorsque l’on partage une page sur les réseaux sociaux tels que Facebook, Twitter, LinkedIn) en utilisant le service approprié fourni par Angular tout en le faisant fonctionner pour Angular Universal.
Jérôme, de son côté, s’est occupé de la configuration de notre serveur web nginx frontal pour permettre la livraison de cette nouvelle version dans notre architecture logicielle actuelle.
On sent qu’on touche au but, ça s’accélère, j’adore toute cette énergie !
Jour 7
La fin du sprint a sonné.
Le défi est relevé, le site est prêt. Bon pour être tout à fait honnête et comme nous sommes des éternels insatisfaits, nous nous sommes attelés à beautifier (comprenez rendre beau) l’expérience de visite.
Et maintenant que le format de page est bien fonctionnel, pourquoi ne pas ajouter aussi les pages Carrières, Mentions légales & cie ? C’est également ce que nous avons fait très facilement grâce au modèle de page que nous avons adopté.
Jour 8 (lundi 21 mai)
C’est le jour de la démo du sprint ! L’équipe est enthousiaste. Nous avons dû appliquer quelques petites corrections mais dans la globalité on est bon pour la livraison en production que nous effectuons systématiquement à chaque lendemain de démo.
5. Jour 9 et fin (mardi 22 mai 2018)
Nous avons reçu les plaquettes papier au bureau de Paris, elles sont prêtes à être distribuées pour Vivatech.
Le site est en production depuis 09h00 CEST, visitez-le :
Qu’en pensez-vous ? N’hésitez pas à nous donner votre avis !
