Une collectivité partage l'électricité de ses panneaux photovoltaïques entre plusieurs bâtiments publics, mais ses agents n'avaient que des relevés bruts. J'ai mené seul toute la chaîne du portail qui rend l'opération lisible, des wireframes à l'implémentation.
- Cadre
- Alternance
- Période
- oct. 2024 - sept. 2025
- Structure
- Wit, Nice
- Rôle
- Toute la chaîne, menée seul : wireframes, maquettes, implémentation
- Outils et technologies
- Figma
- JavaScript
- Chart.js
- Leaflet
- Statut
- Application en production
Une collectivité installe des panneaux photovoltaïques et partage l'électricité produite entre plusieurs bâtiments publics. Les agents disposent des relevés, mais sous forme de données brutes : impossible de savoir qui consomme quoi, à quel moment, ni quelle part de la production est réellement consommée sur place plutôt que réinjectée.
L'enjeu du portail : rendre cette opération lisible par des agents territoriaux qui ne sont pas des techniciens de l'énergie. C'est le seul projet où j'ai tenu toute la chaîne, du wireframe à l'implémentation.
La chaîne complète, menée seul
- Wireframes : structurer l'écran et les parcours avant toute décision graphique. Quelles informations sont permanentes, lesquelles dépendent de la sélection, ce qui doit rester visible sans défilement.
- Propositions graphiques explorées puis écartées : plusieurs directions présentées avant d'arriver à la version retenue. Elles expliquent pourquoi la version finale est ce qu'elle est.
- Maquettes Figma validées : direction arrêtée et approuvée avant l'implémentation.
- Implémentation dans l'atelier de composition d'applications de l'éditeur, un outil qui décrit l'interface de façon déclarative et la rend via un moteur générique.
- Comportement en JavaScript : l'outil pose les composants et la mise en page, toute la logique métier est du code écrit à la main dans les points d'extension prévus par le moteur.
Ce que permet l'application
- Naviguer dans une arborescence de sites et de bâtiments, avec la mise à jour de tout l'écran à la sélection.
- Analyser sur cinq granularités temporelles, jour, semaine, mois, année et historique complet, avec la navigation d'une période à l'autre.
- Lire un graphique en barres empilées, une couleur par poste de consommation ou par type d'énergie, avec une légende interactive.
- Basculer entre une vue consolidée par bâtiment et une vue détaillée par poste, et entre consommation et production.
- Suivre des indicateurs de synthèse et leurs variations par rapport à la période précédente.
- Afficher une étiquette énergétique calculée à partir de la consommation rapportée à la surface.
- Situer les points de mesure sur une carte, recadrée automatiquement sur le périmètre sélectionné.
- Partager une vue par lien : son état est conservé dans l'adresse.
Ce que je peux détailler en entretien
Un cadrage de carte adaptatif
Deux stratégies selon le niveau sélectionné : vue d'ensemble du parc au niveau du site, recentrage sur les points concernés au niveau du bâtiment.
Des composants générés à la volée
L'échelle de l'étiquette énergétique n'est pas déclarée dans l'outil : elle est construite en JavaScript à partir des seuils de configuration, puis injectée dans l'arbre de rendu. Du rendu déclaratif obtenu par le code, dans un environnement qui ne le prévoyait pas.
Se protéger des courses de rendu
Après chaque appel asynchrone, vérifier que le composant est toujours monté avant d'écrire dans son état : l'équivalent d'un AbortController dans un framework moderne.
Une navigation temporelle bornée
Arrondi au début de période, avec le cas du dimanche traité explicitement, troncature à la date du jour pour ne jamais afficher une période future, et boutons désactivés aux limites du jeu de données.
Une agrégation adaptative
La granularité du graphique suit automatiquement la période choisie, de l'heure à l'année.
Mesuré sur l'application livrée
- 158
- points d'extension renseignés
- 1 400
- lignes de JavaScript environ
- 5
- granularités temporelles, du jour à l'historique complet
Aucune capture : le portail contient les données réelles d'une collectivité, qui n'est pas nommée. Les wireframes et maquettes d'origine sont du travail de commande et ne sont pas publiés.
