Giter Club home page Giter Club logo

mission-transition-ecologique's Introduction

Transition écologique des entreprises


WARNING : work in progress


An app + a web component + a dataset to help french entreprises finding public aid programs for their ecological transition.

A project from the transition-ecologique-entreprises SE team.



Screenshots

Project Setup

Stack

Description

This repository is a monorepo, based on npm workspaces composed of two workspaces:

Getting started

NVM

The runtime is Node 18.x for this application.
You can use nvm to install this specific version.

# from the root folder of the project
nvm install
nvm use

Environment variables

Some environment variables are needed for the services to work. Copy and modify the .env.example file from the folders (back/data/web) you want to build/start to .env in the same directory.

Quick Start

If you want to run the project locally and quickly, you can use the following commands:

# from the root folder of the project
npm install
npm run start-all

Build

Use the following commands to build the project:

# All workspaces
npm run build
# Or for a specific workspace
npm run build-front # web
npm run build-back  # backend

# Or alternatively
npm run build -w packages/web
npm run build -w packages/backend

Start services

Use the following commands to start the project:

# All workspaces
npm run start-all
# Or for a specific workspace
# Front-end
npm run start-front
# Back-end
npm run start-back

# Or alternatively
PORT=4242 npm run start --workspace packages/web
npm run start --workspace packages/backend

Development Mode

To run the project in development mode, use the following commands:

# All workspaces
npm run dev
# Or for a specific workspace
# Front-end
npm run dev-front
# Back-end
npm run dev-back

# Or alternatively
npm run dev --workspace packages/web
npm run dev --workspace packages/backend

Linting and type check

  • Linting is done with eslint and type check with tsc or vue-tsc (typescript compiler).
npm run lint
# With fix
npm run lint:fix
# Type check on web workspace
npm run vue:type:check
npm run lint:sass

# With fix
npm run lint:sass:fix
IDE configuration:

Preview front before deploying in production

# This script builds the front 
# and previews the produced index.html file from the dist folder
# on http://localhost:4242
npm run dev:build:start

Commands for a specific workspace

More scripts are defined for each workspace: checkout their respective documentation and package.json file.

Scripts can be triggered with:

npm run <script-name> -w packages/<workspace-name>

Data validation

Source program data are stored as YAML files, we use JSON Schema to validate every file.

The validations are triggered by Github CI on each pull request on preprod and main branches.

To run the validation tests manually, run:

npm run test-data -w packages/backend

Scalingo, deployment and review apps

We use scalingo manifest json to deploy the app on scalingo with specific environment variables. see scalingo manifest for more details.


Credits

  • Team
    • Product owner: Jean-Baptiste Le Dévéhat
    • Coaching: Julien Rayneau
    • Designers: Coline Lebaratoux
    • Maintainers:
      • Pierre Camilleri
      • Julien Paris
      • Yohann Valentin

mission-transition-ecologique's People

Contributors

dependabot[bot] avatar dolemoine avatar jbledevehat avatar julienparis avatar oumeimaelisbihani avatar pierrecamilleri avatar ttdm avatar yvalentin avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

mission-transition-ecologique's Issues

✏️ Faire évoluer "j'ai un objectif en tête" vers "j'ai un projet en tête"

Les verbatims qui illustrent le besoin d'avoir un parcours plus précis pour le parcours "j'ai un objectif en tête" :

“Les chefs d’entreprises il ont des projets précis “je veux acheter un véhicule électrique”, “je veux changer mon fournil” “enlever de la pénibilité à mon collaborateur”, c’est comme ça qu’on veut réaliser une recherche. Comment on fait ici pour trouver l’aide qui correspond à ça ?"

"j’ai un objectif précis en tête” pour moi c’est quand on a un projet très précis comme “je veux changer mon système de chauffage pour du chauffage au bois” ça veut dire que je sais précisement ce que je veux faire. Je ne m’attends pas à trouver derrière « diminuer ma facture d’électricité » ou mes consommations d’eau » pour moi c’est trop large."

“Si je clique sur le deuxième (j’ai un objet en tête), j’aimerais avoir une réponse à “est-ce que ça existe des subventions sur les panneaux solaires” “je peux pas aller sur quelque chose de plus fin ? Comment je peux trouver les subventions pour véhicules lourds électriques ? moi peut importe la nature de l’aide, j’ai pas de filtre supplémentaire sur le transport de marchandise ?”

cf maquette sur la HP

cf maquette en remplacement du parcours "j'ai un objectif en tête"

🖥 ⚡️ Encapsuler les appels d'API Brevo dans notre API back-end

Contexte

Brevo (ex Send in Blue) est une plateforme de relation usager. Elle est utilisée pour stocker les informations renseignées dans le formulaire de contact, et suivre les échanges ultérieurs.

Les données transitent via des appels d'API qui sont exécutées par le front-end.

Problématique

Les appels d'API sont exposées au public, mais elles portent l'information d'un Token d'accès qui devrait rester secret.

Pour éviter de divulguer cette information, il est souhaitable de transmettre les informations au back-end, qui peut alors exécuter l'appel d'API en privé.

Critères d'acceptation

  • L'API du backend expose un endpoint lié au stockage d'informations du formulaire de contact.
  • Ce point d'API transmet les informations à l'API Brevo, et les données sont stockées dans l'outil à l'identique que le comportement actuel.
  • Le Front-end consomme ce point d'API
  • Le point d'API est documenté
  • Tous les changements sont mis en préproduction, puis en production.
  • Créer un nouveau token dans Brevo, supprimer l'ancien dans Brevo, ajouter le nouveau token en prod/preprod/staging dans Scalingo (et en local)

🖥 mettre l'étape SIRET directement sur la HP à la place du CTA "je me lance"

cf proto

  • mettre le siret sur la HP
  • rassurer l'utilisateur dès la première étape que l'on prend bien en compte son secteur d'activité, sa taille, sa localisation pour lui proposer des résultats personnalisés.
  • engager plus d'utilisateur à cliquer sur "je me lance"
  • plébiscité en test utilisateur (12/12 interrogés sont d'accord de partager leur SIRET et comprenne l'intérêt de le renseigner pour obtenir des informations personnalisées.)
  • c'est un point commun des 2 parcours que l'on peut mutualiser

Image

🖥 Faire le setup Scalingo pour les applications back-end

Contexte

L'API typescript est fonctionnelle sur le monorepo, mais n'est pas encore utilisée en prod.

Il faut donc déployer la nouvelle API.

C'est également l'occasion de créer des apps de preprod et staging pour le backend.

TODO

Dependant de #62.

  • App scalingo tee-backend
    • Créer une app tee-backend
    • Mettre à jour l'URL de requête dans le front sur la branche preprod.
    • Mettre en production la preprod front.
    • Supprimer app scalingo tee-backend-test
    • Archiver le repo backend "transition-ecologique-des-entreprises-backend".
  • App scalingo tee-backend-preprod
  • App scalingo tee-backend-staging
  • Transférer la propriété des apps Scalingo à Tristan Robert
  • (COULD HAVE) noms de sous-domaines pour les apps scalingo de backend en .incubateur.net et .beta.gouv.fr
  • (OPTIONNEL) supprimer les apps Netlify désormais inutiles et qui ne se déploient pas de la même manière que Scalingo
  • Spécifier le serveur de requête de Swagger pour pouvoir utiliser la fonction "Try it out" Testé à l'instant, ça fonctionne directement vu que le chemin du serveur est relatif.

🖥 Navigation formulaire : validation automatique et scroll vertical

1) Créer une validation automatique entre chaque question.
règles de navigation :

  • ajouter un bouton "ok" et la mention "appuyer sur entrée" sur desktop en alternative
  • imposer la validation au clic sur ok uniquement lorsqu'il y a un texte à saisir / une selection multiple

2) Changer la navigation horizontale pour une navigation "verticale" à la typeform

  • mettre en place une animation avec un défilement des questions de haut en bas (parfait pour la navigation mobile)
  • permettre une navigation top down - down top

3) Revoir le comportement du fil d'arianne par thématiques cliquables

  • garder en mémoire les choix précédents

références :
https://www.typeform.com/templates/t/market-research/?attribution_user_id=80642cc0-120a-4d7f-a54f-da0276b0a68f
https://www.teamzero.com/safety-ideas

🖥 Correction page objectifs

  • Reformulations :

  • Remplacer "⚡️ Mieux gérer l’énergie dans mon entreprise" par "⚡️ Améliorer la performance énergétique de mon entreprise"

  • Remplacer "♻️ Améliorer mon produit ou service dans une logique d'éco-conception" par "💡 Améliorez la performance environnementale de mes produits et services" (dont le picto)

  • Remplacer l'objectif "🔍 Connaître et améliorer l’impact environnemental de mon entreprise" par "🌱 Mesurer mon impact carbone et le réduire"(dont le picto)

  • Remplacer "💦 Faire des économies rapides en réduisant nos pertes en énergie, matière, déchets et eau" par "💶 Faire des économies en réduisant nos pertes en énergie, matière, déchets et eau"
    Supprimer :

  • supprimer "📂 Consolider mon projet d'investissement durable"

  • Les boutons radios n'ont pas la même taille

Image

✏️ Mise à jour des maquettes "tests utilisateurs"

  • Protos d'accueil à tester
  • Modifier le menu sur les page d'accueil (confusion pour les tests)
  • Protos du parcours 1/ "je ne sais pas par ou commencer
  • Proto page de résultats
  • Proto fiche "étude"
  • Proto fiche "aide"
  • Proto du parcours 2/ je cherche un financement
  • ajouter les actions ?
  • modifier les visages + nom sur "ils l'ont fait"

📱Correction responsive

  • Au clic sur suivant, scroll automatique en haut de la page au niveau de la question (desktop et mobile)
  • UI des select : garder la même hauteur de champ (64px) avec un espacement de 16px + ferrer le texte sur la gauche. Texte 16 / interlignage 24

fil d'ariane :

🖥 Finaliser le parcours front depuis la piste de question SIRET

A faire

  • Enregistrer le choix de l'utilisateur depuis le composant TeeTrackInput
  • Activer le bouton suivant si le choix est valide
  • Enregistrer le choix dans le store Pinia et peupler les pistes correspondantes
    • Traduire les résultats bruts de l'API SIRENE vers un objet avec uniquement les infos qui nous intéressents
    • Table de correspondance entre code NAF et secteur
  • Aller directement à la piste track_roles
  • Vérifier que les infos déduites depuis les données API-SIRET permettent de faire correctement le filtrage des dispositifs en fin de parcours

Alternative pour l'utilisateur

  • Proposer un choix de plus à l'utilisateur : "Je complète les infos manuellement" menant à la piste suivante

Tasks

🖥 Corrections fiche dispositif + formulaire de contact

  • Remettre le formulaire sur la fiche dispositif. Cf new UI proposée sur la maquette Figma (mettre le téléphone avant le siret)

  • Supprimer tous les textes d'exemple sur le formulaire de contact "Camille" "Dujardin" "0605040302""je souhaite connaitre les aides pour installer des éoliennes" dans le formulaire de contact, qui alourdissent le formulaire.
    (sauf SiRET pré-rempli = gain de temps pour l'utilisateur)

Image

🖥️ Traduction isofonctionnelle du backend TEE en TS (TypeScript) / Express

Contexte

Un backend, a été créé il y a 10 jours pour encapsuler l'appel d'API pour récupérer les informations Sirene. Cette encapsulation permet de dissimuler le TOKEN d'accès à l'API Sirene.

Cette API est relativement peu complexe à ce stade, elle sert de "passe-plat" entre la base Sirene et le front-end.

Elle a été codée en python avec le framework FastAPI.

Proposition

Comme je (Pierre) vais travailler sur le back-end, j'ai émis le souhait de coder le back-end en TypeScript (Node), pour des raisons de préférence personnelle, mais également car il s'agit du même langage utilisé en Front-end et maîtrisé par Julien, ce qui facilite la mutualisation de certains éléments (par exemple des types d'objet).

Le framework d'API proposé est Express

Comme le backend existe déjà, cela implique de traduire celui-ci en Typescript (autrement dit, c'est maintenant ou jamais).

Critères d'acceptation

  • Le dépôt de backend contient le code d'une API Express, qui expose les points d'API "/get_by_siret" (POST) + healthcheck ("/api/health", en GET) + et "/get_by_siren"
  • Swagger : doc swagger exposée sur "api/docs"
  • Le code est linté (= formaté) de la même manière que le frontend, en vue de leur future fusion.
  • La documentation est mise à jour en conséquence. (modulo le README principal, #87)
  • L'API se déploie sur Scalingo + ~~ Déploiement Scalingo sur app Scalingo dédiée ~~ > Ticket dédié #88
  • Mettre les modifications en preprod.

Nice to have

  • Le serveur d'API est exposé via un docker file, et un docker compose (prod + dev) Pas besoin pour le déploiement Scalingo. On utilise un serveur de staging pour les tests.

Matomo x widget

L'objectif est de permettre de suivre le funnel de l'utilisateur sur le parcours.
Le moyen : ajouter des événements Matomo sur chaque étape

🖥 Correction SIRET

1) Ajouter la mention (14 chiffres) à côté de "Renseignez le SIRET de votre entreprise" cf figma

2) Sur l'encart résultat, est-ce possible de présenter les informations de la même manière que sur [le figma ](https://www.figma.com/file/tHgzORFkJYTVspsQgR2kg6/TEE-V5?type=design&node-id=1071%3A88888&mode=design&t=3RbcTYK2iZSlT7pp-1)

  • dans l'ordre suivant : secteur activité, taille entreprise, adresse, date création.
  • Peux-tu grouper le secteur d'activité avec le code naf ? sans nommer "secteur d'activité"
  • remplacer "date de création" par "Création le"
  • Est-ce possible de changer le format de la date pour Date de création :
    à la place de 2020-07-04 > 04 juillet 2020 ou 04/07/2020 ?
  • Enlever la mention "Catégorie" avant "TPE" ou "PME"

3) Mettre le résultat entreprise en non sélectionné pour permettre à l'utilisateur de le sélectionner au clic.
(Mes excuses, c'est un retour en arrière. En faisant tester le parcours, je me suis rendu compte que l'utilisateur a envie de cliquer sur le résultat)
Image

🖥 Correction SIRET

  • Le code postal s'affiche 2 fois sous 2 formes

Image

  • Pour la taille de l'entreprise, est-ce possible d'ajouter "Auto-Entrepreneur·e." "ETI (entre 250 et 4999 salarié.e.s)" "Grande Entreprise (plus de 5000 salarié.e.s)" à la place de "Autre" ?

🖥 Navigation formulaire : UI

Reprendre l'UI du figma :

  • boutons Select en tracé noir (et non bleu)+ Etat selectionné en gris (et non bleu)
  • Texte ferré à gauche (et non centré) desktop & mobile
  • UI de l'encart "onboarding"
    cf figma

Image

Image

[Bug] 🐞 Pour une TPE qui entre son siret, l'aide "TPE gagnante" ne s'affiche jamais

Raison

Les données SIRENE ne différencient pas TPE et PME, et renvoient systématiquement PME.

Pistes envisagées

Fix rapide :

  • Poser la question à l'utilisateur
  • Assimiler le champ TPE à PME
  • Déformer la fiche dispositif pour inclure les PME dans ce dispositif.

Plus long terme :

  • Obtenir la donnée d'effectif d'une source plus fiable.

Décision

  • Hotfix : on demande à l'utilisateur, et on colle à la définition de TPE du dispositif "TPE gagnantes" > "Moins de 19 salariés (inclus)"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.