CartoBio - Frontend

Application de suivi et de certificaton du parcellaire bio à destination des opérateurs bio et des organismes de certification.

Cette application implémente la maquette Figma CartoBio ainsi que le Système de Design de l'État avec Vue 3, Vue Router, Vue Pages, Pinia et OpenLayers entre autres.

Les erreurs sont centralisées avec Sentry et les mesures pour les statistiques d'utilisation avec Matomo.

Développement

Outils nécessaires

• node 20

On pourra utiliser nvm pour faciliter la gestion de différentes versions de node (cf. .nvmrc) :

nvm install && nvm use

Configuration

Créer un fichier .env inspiré de .env.local.example.
Bien vérifier l'API mobilisée paramétrée avec VUE_APP_API_ENDPOINT.

Application

Récupérer les dépendances :

# Versions verrouillées
npm ci

# Et/ou en les mettant à jour
npm install

Démarrer :

npm start

Ouvrir :

• http://localhost:3000/

WebComponent Notification

Le composant est intégré au portail de notification de l'Agence Bio pour proposer une option de chargement de parcellaire dès la première étape règlementaire.

Le code source se situe dans widget/.

La variable d'environnement VUE_APP_NOTIFICATIONS_AB_SAMPLE_WEBCOMPONENT_TOKEN doit être configurée avec un jeton valide.

La clé publique de vérification doit être installée côté API via la variable d'environnement NOTIFICATIONS_AB_PUBLIC_KEY.

npm start -- --config vite.widget.config.js

Ouvrir :

• http://localhost:3000/

La page documente son intégration dans une page web tout en proposant une version interactive.

Exécution des tests

npm test

Préparation au déploiement

npm run build

Les fichiers produits sont dans le répertoire dist.

Déploiement

Environnement de test

Chaque commit/push sur la branche test déploie en test : Build and deploy (test)

Environnement de préproduction

Chaque commit/push sur la branche v2 v3 déploie en préproduction : Build and deploy (staging)

Environnement de production

Chaque nouveau tag v2.* v3.* déploie en production : Build and deploy (production)

Pour créer un tag :

# Lors d'ajout de fonctionnalités
npm version minor

# Lors d'un correctif ou ajout très mineur
npm version patch

Puis :

git push --tags

Maintenance

Mettre à jour les codes cultures PAC

npm install @agencebio/rosetta-cultures@latest