Greenflex · 2015-2017
EcoGuide IT, rendez-vous à la COP21
EcoGuide IT aide les entreprises à choisir un matériel informatique plus responsable. En 2015, j’ai reconstruit le site de zéro, données et notation comprises, pour un lancement à l’ouverture de la COP21. Puis j’en ai fait une plateforme capable d’accueillir d’autres guides.
- 7 moisdu premier commit au lancement, pendant la COP21
- 4 300produits notés, dans 11 catégories
- ≈ 450règles de notation configurables, à la place de 6 000 lignes de code
- 98 %des évolutions du code : un développement quasi solo
Le contexte
Un guide public, une date qui ne bouge pas
Ordinateurs, écrans, imprimantes, smartphones, serveurs… EcoGuide IT note chaque produit sur trois axes : son cycle de vie, de la fabrication au recyclage, la maturité environnementale et sociale de son fabricant, et sa consommation d’énergie. Les acheteurs comparent, puis choisissent.
Greenflex voulait lancer une nouvelle version pendant la COP21, à Paris, fin 2015. J’ai conduit le projet de bout en bout, avec une designer et les experts métier qui définissaient les critères de notation.
Le point de départ
Une version impossible à faire évoluer
- Trois sites clonés les uns des autres, environ 30 000 lignes de PHP où se mêlaient requêtes, logique et HTML.
- Des données stockées en texte libre : « o », « n », « nc », « Oui, possible en option », des notes et des dates sous forme de texte, des décimales avec une virgule.
- Un calcul des notes de 6 257 lignes, une condition écrite à la main par critère et par catégorie.
Contrairement à mes habitudes, j’ai choisi de tout reconstruire : nouvelle base de données, nouveau moteur de notation, nouveau site. Les anciennes données ont été reprises, nettoyées et typées une à une.
L’ancien calcul des notes
if ($o->type == 'ECRAN')
{
$p = 1; if ($o->epeat_silver == 'o' and $o->epeat_gold != 'o')
$rating['0'] += 2 * $p; if ($o->blue_angel == 'o')
$rating['0'] += 3 * $p; if ($o->epeat_gold == 'o')
$rating['0'] += 4 * $p; if ($o->nordic_swan == 'o')
$rating['0'] += 4 * $p; if ($o->tco == 'o')
$rating['0'] += 5 * $p;
if ($debug) echo 'epeat + blue_angel : '.$rating['0'].'<br/>';if, placé en fin de ligne, s’applique à la ligne suivante. Les 2 points dépendent d’EPEAT Silver, pas de l’Ange bleu. Extrait reformaté.Le moteur de notation
Des règles qu’on peut relire
J’ai conçu un moteur générique : une règle lit une caractéristique du produit, ou une formule qui en combine plusieurs, la compare à des seuils et rapporte des points pondérés. Les règles se regroupent par étape du cycle de vie.
Chaque catégorie a sa configuration, de 33 à 54 règles. Chaque règle porte son libellé métier et renvoie à la spécification : les critères se vérifient un à un, et une règle se modifie sans toucher au code.
Une règle de la nouvelle version
mass:
label: Masse du produit (kg/pouce)
ponderation: 16
type: ranges
input:
type: expression
document_data:
weight: technical_specifications.weight
screen_size: technical_specifications.screen_size
result: "weight / screen_size"
ranges:
- { range: ']0.25:', output: 0 }
- { range: ']0.2:0.225]', output: 2 }
- { range: ']0.1:0.125]', output: 6 }Des notes relatives, recalculées en arrière-plan
Les lettres, de A+ à F−, situent un produit par rapport aux autres de sa catégorie. Modifier un seul produit peut donc changer la lettre de tous les autres : le recalcul se fait en arrière-plan, sans ralentir la saisie.
- 1
Un produit ou une marque est modifié dans le back-office.
- 2
Une tâche de recalcul est créée, sans doublon.
- 3
Une file de messages (RabbitMQ) la transmet à un traitement en arrière-plan.
- 4
Les notes du produit, puis les lettres de toute sa catégorie, sont recalculées.
Ce que j’ai construit
Un site pour choisir, comparer et comprendre
Trouver le bon produit
Une recherche avec autocomplétion et des filtres par caractéristiques, prix ou année, sur plus de 4 300 produits.
Une fiche claire
Trois notes et une lettre, les points forts et les points faibles, les labels du produit et une fiche PDF à partager.
Comparer
Un comparateur côte à côte, des classements par catégorie et un simulateur de coût.
Évaluer les fabricants
Une note de maturité RSE par marque (certifications, rapports, engagements), prise en compte dans la note de chaque produit.
Des contenus éditoriaux
Actualités, conseils, livres blancs et bonnes pratiques de fin de vie, rédigés par le marketing dans WordPress.
Ouvert et bien référencé
Quatre langues, des redirections de toutes les anciennes adresses et une API utilisée par d’autres applications du groupe.
Base de données
MongoDB pour des produits très différents
Un serveur et une tablette n’ont pas les mêmes caractéristiques : environ 150 champs, organisés par catégorie, sans multiplier les tables.
Recherche
Elasticsearch pour chercher et filtrer
Les produits et les contenus éditoriaux sont indexés à chaque modification. La recherche, les filtres et l’API passent par cet index.
Contenus
WordPress, sans son affichage
Le marketing rédige dans WordPress, qu’il connaît. Chaque publication est transmise à l’application, qui l’affiche dans le design du site.
PHP · Symfony · MongoDB · Elasticsearch · RabbitMQ · WordPress (headless) · React · Docker
Sept mois
Du prototype au lancement
Mai 2015
Premier prototype
Le modèle de données et un premier back-office, puis la reprise des anciennes données.
Été 2015
Le moteur de notation
Les règles relues une à une, configurées par catégorie et vérifiées contre l’ancien calcul.
Automne 2015
Le site
Le nouveau design, les fiches marques, les labels, les contenus et les traductions.
Décembre 2015
Le lancement
Mise en ligne à l’ouverture de la COP21, puis recalcul des notes en arrière-plan.
2016-2017
La plateforme
Un socle commun et un deuxième guide, consacré à l’éclairage. Puis une documentation complète pour la suite.
Et ensuite
D’un site à une plateforme
En 2016, Greenflex a voulu un deuxième guide, consacré à l’éclairage. J’ai séparé ce qui était commun à tous les guides de ce qui était propre à chacun. Le guide de l’éclairage tient en une petite couche au-dessus du socle.
Le code du guide de l’éclairage, à droite, comparé au socle partagé.
Un socle commun
Moteur de notation, recherche, API, back-office, contenus et recalcul en arrière-plan sont partagés par tous les guides.
Des caractéristiques sans développement
Les champs et les formulaires de chaque type de produit sont décrits dans la base, et non plus dans le code.
Un back-office en React
Un moteur de formulaires affiche ces définitions : une dizaine de types de champs, des onglets et des panneaux, en plusieurs langues. Le même principe que le générateur de formulaires que je développe aujourd’hui pour SeineYonne.
Voir l’étude de cas SeineYonneImport et export Excel
Les équipes métier travaillent les données dans leur outil habituel. Les notes se recalculent seules à l’import.
Au-delà du code
Des notes justes, livrées à temps
Des notes défendables
J’ai relu toutes les anciennes règles et rejoué les calculs jusqu’à retrouver les mêmes notes. Chaque erreur repérée était consignée dans un tableau soumis aux équipes métier, qui décidaient de la correction.
Avec les experts et la designer
Les critères de notation venaient des experts métier de Greenflex, le design d’une designer. Mon rôle : traduire l’un et l’autre en un produit qui tienne.
Tenir la date
La COP21 ne se décalait pas. Prioriser, livrer l’essentiel pour le lancement, garder le reste pour les semaines suivantes.
Transmettre
Avant mon départ, une documentation en 27 documents : installation, architecture, moteur de notation et procédure pour créer un nouveau guide.
Et pour vos projets
Ce que j’en retiens aujourd’hui
Réécrire, quand c’est la bonne décision
Je privilégie d’habitude la migration progressive. Ici, le code et les données ne permettaient pas de bâtir dessus : repartir de zéro était le choix raisonnable.
Sortir les règles du code
Des règles métier décrites en configuration se relisent, se vérifient et évoluent sans risquer de casser le reste.
Penser au produit suivant
Un premier site bien découpé devient une plateforme : le deuxième guide n’a demandé qu’une petite partie du travail.
À la même époque, chez Greenflex, je faisais aussi migrer progressivement un SaaS vers Symfony : lire l’étude de cas BeeGreen.