Documentation "Nos GEStes Climat ECN"

Qu'est-ce que c'est ?

“Nos GEStes Climat” (NGC) permet d'évaluer l’empreinte carbone individuelle dans le cadre de l'établissement de Central Nantes. Cette empreinte carbone est donc à cheval sur les volets professionnels et personnels. Les postes d’émissions sont classés par grandes catégories (profil, alimentation, transport, numérique, divers). Le calcul permet à l’utilisateur de se situer par rapport aux objectifs climatiques et surtout de passer à l’action au travers d’actions personnalisées.

Il est basé sur le simulateur Nos GEStes Climat créé par Datagir, une start-up d'État, et l’ABC (Association Bilan Carbone). Ce simulateur est inspiré du modèle MicMac des associations Avenir Climatique et TaCa.

Un article scientifique a été publié en avril 2021 (disponible ici). Il apporte les éléments nécessaires à la compréhension du modèle de calcul et les choix effectués lors de la première phase de développement.

Qui le développe ?

Ce simulateur d'empreinte carbone liée à l'activité au sein de Centrale Nantes a été développé, dans la version actuelle, par les membres du pôle informatique de l'équipe-projet Neutralité Carbone.

1. Pré-requis et catégorie « Profil »

Avant de se lancer dans une déclinaison campus selon le modèle décrit dans la présente documentation, il est important de préciser que la réalisation d’un Bilan d’Emissions de Gaz à Effet de Serre (BEGES) de votre établissement est prérequis. En effet, une partie « Profil », calculée selon le statut de l’utilisateur, est définie à partir du bilan de l’établissement et correspond aux émissions liées à son fonctionnement. Ces émissions sont prises en compte dans le profil utilisateur et sont considérées comme fixe à l’échelle d’un individu. Ces émissions sont « ajoutées » seulement à la fin du calcul une fois les questions répondues (à l’instar de ce qui est fait sur Nos Gestes Climat version national avec les émissions des services publics).

2. Environnement de développement

Pour comprendre ce guide et développer cet outil efficacement et dans les meilleures conditions, il est nécessaire de maîtriser les bases de git puisque le code de l’application est hébergé sur GitHub .

Note : le lancement nécessitera l’installation de certains outils (node , yarn , etc..) pour les utilisateurs, développeurs React débutants ! 

NGC-ECN est un fork du simulateur national. L’avantage de conserver une liaison entre la déclinaison et le code source national est qu’il est possible de "récupérer" les mises à jour effectuées dans la version nationale facilement.

Le code du simulateur est divisé en 2 dépôts (repositories). Le premier contient le modèle de calcul du simulateur. Le second correspond à l’interface.
 

• Modèle (nosgestesclimat-model-ecn)

Ce dépôt contient un modèle d'empreinte carbone annuelle, écrit en YAML. Ce modèle pose des questions sur les aspects de la vie professionnelle d'un individu qui émettent le plus de gaz à effet de serre (GES) mesuré en CO2e. L'objectif n'est pas d'en faire une comptabilité parfaite, mais la plus représentative en posant un nombre de questions qui reste acceptable pour tous. Le périmètre est restreint aux activités liées à l’ECN (cf article).

Le code du modèle repose sur le langage public.codes. Le langage est décrit et documenté sur le site internet de publi.codes. Il est développé par beta.gouv dans le cadre du projet mon-entreprise. Il permet de coder en français des règles de calculs, dans un langage (qui se veut) simple et extensible. De ces règles de calcul, des simulateurs (pour l'utilisateur lambda) et des pages de documentation qui expliquent le calcul (pour l'expert ou le curieux) sont générés automatiquement.

La bibliothèque de calcul publi.codes vient d'être publiée comme un paquet NPM ce qui facilite le développement.
 

• Interface (nosgestesclimat-site-ecn)

Ce dépôt contient le code de l’interface de l’application web. Le langage utilisé est Javascript/Typescript via le framework React. Les fichiers du modèle YAML sont chargés par webpack, et les modifications apportées à ces fichiers seront actualisées dans l'interface utilisateur instantanément.

3. Premiers pas pour un développeur

La première étape pour commencer le développement localement est l’installation. Pour débuter, il est nécessaire de cloner chacun des deux dépôts vers le même dossier local (à la même racine donc). 

Via le terminal, il faut ensuite se déplacer dans nosgestesclimat-site-ecn et lancer la commande “yarn” qui installera les paquets puis, “yarn start”. Il suffit ensuite d’ouvrir son navigateur, l’application apparaît à l’adresse : http://localhost:8080/. Toute modification du modèle ou de l’interface via un éditeur de code (vscode, sublime text…) sera visible automatiquement sur le navigateur (sans avoir besoin de relancer l’app via yarn à chaque changement).

4. Ajouter une catégorie, une question

Les données associées au modèle sont situées dans le dossier “data” de nosgestesclimat-model-ecn. Chaque fichier YAML correspond à une catégorie. Les catégories sont situées dans total.yaml. Dans la version actuelle du simulateur, l’ordre des catégories dans le simulateur est défini ici.

Pour une explication du fonctionnement en vidéo, la documentation du simulateur national peut être utile et est disponible sur le site de Datagir .

Pour ajouter une question, il faut se rendre dans le fichier YAML correspondant à la catégorie de notre nouvelle question. Prenons l’exemple d'internet, dans la catégorie numérique, avec la question “Combien d'heures passez-vous par jour sur internet dans la cadre professionnel (envoi de mail, Web, etc.) ?”. Dans le fichier numérique.yaml, on crée une sous-catégorie “numérique . internet” dont la formule est le produit de l’empreinte horaire d’internet et du temps d’utilisation. Il est nécessaire d’ajouter “internet” dans la somme du numérique définie en haut de la page. Le temps d’utilisation dépend de la durée journalière d’utilisation, question posée ici et prend en compte le nombre de semaines de présence liée au profil utilisateur et défini dans profil.yaml. Plusieurs mécanismes permettent d’écrire avec précision le modèle de calcul. Tous les éléments décrits ici seront visibles quelque part dans le simulateur. A noter que cette question est un exemple typique de question dont le facteur d’émission est susceptible d’évoluer prochainement.
 

Il est également possible d’aller plus loin avec le mécanisme “applicable si”, très utile pour certaines questions dont les conditions d’application sont multiples. Un exemple ici avec les déplacements professionnels.
 

De manière générale, il est important de compléter avec attention les parties descriptions qui s’afficheront dans le simulateur si l’utilisateur désire en savoir plus ou a besoin d’indications pour répondre à une question. Dans l’exemple précédent, une image est même ajoutée pour améliorer l’expérience utilisateur.

5. Valeurs par défaut

Afin de permettre aux utilisateurs de se situer par rapport aux résultats des « profils-type » correspondant à leur statut, il est intéressant de proposer un profil par défaut comme point de départ. L’utilisateur peut alors visualiser l’évolution de son empreinte carbone par rapport aux valeurs moyennes correspondantes à son profil.

Il est possible de définir plusieurs valeurs par défaut selon le profil grâce au mécanisme variation. Pour illustrer ce fonctionnement, on peut prendre l’exemple de la question de l’engagement dans la vie associative de l’école, dans le fichier « associatif ». Tout d’abord, on peut remarquer que cette question est posée uniquement pour les étudiants et doctorants grâce au mécanisme « applicable si » ligne 2. Parmi ces utilisateurs, une question booléenne sur l’engagement associatif est posée. Les étudiants étant le plus souvent engagés, la valeur par défaut associée est « oui ». Pour les doctorants, qui sont, parfois seulement, engagé dans l’association sportive, la valeur par défaut est « non » (lignes 24 à 34).
 

6. Créer une action

L’un des points forts du simulateur est la possibilité de passer à l’action, à son niveau, avec des actions personnalisées et quantifiées. Dans la version actuelle (10/07/2021), deux modes d’accompagnement sont proposés : « Guidé » ou « Autonome ».
 

Les données associées au modèle sont situées dans le dossier “data/actions” de nosgestesclimat-model-ecn. Les mécanismes sont similaires à ceux de l’ajout d’une question. Il y a toutefois une différence en termes de calcul de l’impact de l’action (i.e. sa quantification). En général, la somme définie pour chaque action est comptée négativement : la partie “évitée” est soustrait au total relatif à la question associée. A l’heure actuelle les actions sont indépendantes entre elle-même si l’ABC et Datagir réfléchissent à un moyen de quantifier de manière adéquate l’impact de plusieurs actions. Elles sont répertoriées et doivent être mises à jour dans index.yaml. Il faut donc veiller à compléter le fichier index.yaml lors de la création d’actions.

7. Modifier l'interface

Tout ce qui concerne les visuels de l’application se situe dans le dépôt nosgestesclimat-site-ecn. La fonction recherche de GitHub ou de votre éditeur est une option qu’il ne faut pas négliger pour repérer les éléments que l’on souhaite modifier. Il est nécessaire d'être familier avec langage Javascript pour bien comprendre les mécanismes. Voici quelques exemples d’interventions sur le visuel de l’application :
 

• 7.1 Modifier les logos

La modification des logos se fait dans le fichier « source/sites/publicodes/App.tsx », dans la balise de navigation, et via une balise <a> afin d’insérer un lien hypertexte vers un site associé au logo si on le souhaite. Après avoir importé les logos en début de fichier, logos préalablement ajoutés au fichier « source/sites/publicodes/images », on les insère dans la bar de navigation (lignes 82-86, 103-107). Il sera peut-être nécessaire de jouer sur les paramètres du css pour gérer la taille et l’emplacement des logos.


 

• 7.2 Modifier la fenêtre Pop-Up de départ

Le fichier « source/sites/publicodes/Landing.js » permet de gérer la page de lancement du simulateur. Dans la déclinaison ECN, nous avons fait le choix d’intégrer une fenêtre de type « Modal » (ou « Pop Up ») au niveau de la page de démarrage afin d’expliquer rapidement le lancement du simulateur.



C’est dans le fichier « Landing.js » qu’il est possible de modifier le texte de cette fenêtre d’explication, plus précisément dans la balise <Modal>. Le composant « Modal » est créé dans le fichier « source/components/Modal.tsx ». La manipulation des logos est identique à la méthode décrite précédemment. Le fichier « source/sites/publicodes/Landing.js » permet de gérer la page de lancement du simulateur. Dans la déclinaison ECN, nous avons fait le choix d’intégrer une fenêtre de type « Modal » (ou « Pop Up ») au niveau de la page de démarrage afin d’expliquer rapidement le lancement du simulateur.
 

• 7.3 Modifier la page finale

Le fichier « source/sites/publicodes/Fin.js » permet de gérer la page de fin. L’empreinte carbone complète (indivviduelle + profil) est affichée. Les valeurs moyennes des usagers de l’école sont affichées à titre de comparaison. Ces valeurs sont issues du Bilan Carbone 2019 de l’école.

8. Créer un composant spécial de sélection

Les interfaces de certaines questions sont traitées “à part”. C’est le cas pour la sélection des repas, la sélection des moyens de transport domicile-travail, la sélection des laboratoires et la sélection des associations.

Le principe est le suivant : une interface de type « Mosaïque » permet de répondre à plusieurs questions issues du modèle vient un unique envoi « Suivant ». Pour comprendre ce fonctionnement, il ne faut pas hésiter à étudier la mise en place de ce mécanisme dans les fichiers data correspondants.

La création de ces éléments se fait actuellement dans le dossier « source/components/conversation/select ». Une fois les mosaïques créées, le fichier « source/components/conversation/mosaicQuestions.js » traite les informations et regroupe les différentes mosaïques en un seul composant (qui s’activera selon les critères conditionnels propres à chaque question). Il est ensuite intégré dans le simulateur dans le fichier « source/components/conversation/Conversation.tsx »

Pour certaines mosaïques, des images sont intégrées pour personnaliser davantage le simulateur. C’est le cas pour les laboratoires et associations. Le fonctionnement est le suivant:
-    Dans le fichier YAML du modèle, on identifie le fichier dans le mécanisme “icônes”.

-    On enregistre les images correspondantes et nommées de la même manière dans le dossier source/sites/publicodes/images. Dans le fichier de création de l’interface du dossier « select », on importe les images stockées dans le dossier de l’étape précédente (cf figure ci-après). L’appel de cette image se fait dans une balise div via « src={images[icônes].default} ». Elles apparaîtront ensuite au niveau de l’interface simulateur.

9. Sauvegarde des simulations

En plus de jouer un rôle de sensibilisation, le simulateur présente une réelle opportunité d’alternative à la récolte de données par sondage. La mise en place de la sauvegarde de données a été initiée via FaunaDB, un gestionnaire de base de données NoSQL, plug-in Netlify, ce qui facilite la mise en place de cette connexion.

La sauvegarde se fait de manière anonyme, à l'initiative de l’utilisateur. Arrivé au niveau de la page finale, une fenêtre “PopUp” apparaît pour demander à l’utilisateur de partager les résultats de sa simulation (valeur totale du bilan carbone et réponses aux questions). Voici les différentes étapes pour la mise en place de ce mécanisme.

10. Déploiement de l’app

Aujourd’hui, le déploiement est mis en place via Netlify. Les 2 dépôts sont déployés séparément directement via GitHub : la branche master de chaque repo est déployée à chaque update sur cette branche.
 

• Pour nosgestesclimat-model-ecn: 

    Build command: yarn compile
    Publish directory: public/
    Production branch: master
 

• Pour nosgestesclimat-site-ecn: 

    Build command: yarn compile
    Publish directory: dist/
    Production branch: master
    
Dans le fichier App.js, il faut veiller à remplacer l’URL du composant Provider avec l’adresse de déploiement de nosgestesclimat-model-ecn.