Bonjour et bienvenue dans ce podcast consacré au projet Frontoffice Vigicrues.
Aujourd’hui, on vous propose de découvrir, en trois étapes, comment cette application web permet de visualiser les données hydrologiques de manière progressive, claire et interactive… le tout en JavaScript pur, sans frameworks.
C’est parti !

On commence avec la première version du projet.
L’idée ici est simple : permettre à un utilisateur de s’authentifier, puis d’afficher les données d’une station hydrologique sous forme de graphique.
Pour cela, l’application propose :
- Un formulaire de connexion,
- Une récupération des données via l’API Vigicrues,
- Et un affichage clair des mesures à travers un graphique.
Le tout est accompagné d’une fonction de déconnexion.

Pour tester cette version, il suffit d’ouvrir le dossier vigicrues/etape-01, de lancer un serveur local, puis d’ouvrir la page index.html dans votre navigateur.

Deuxième étape, et cap sur la carte !
En plus du graphique, cette version permet d’afficher la station directement sur une carte interactive, par exemple grâce à la bibliothèque Leaflet.
Cela donne une nouvelle dimension à la visualisation, plus géographique et intuitive.

Même démarche que pour la première étape : ouvrez le dossier vigicrues/etape-02, lancez un serveur local, puis accédez à index.html.

Enfin, la troisième étape marque un tournant vers l’interactivité.
L’utilisateur peut désormais sélectionner un cours d’eau, puis une station associée.
L’application affiche alors les données sous forme de graphique, et la station est visible sur la carte.

Pour l’essayer, direction le dossier vigicrues/etape-03. Lancez le serveur local, puis ouvrez la page index.html.

Voilà, vous venez de parcourir les trois étapes du projet Frontoffice Vigicrues.
Une application pensée pour évoluer étape par étape, en gardant un code simple, clair, et entièrement en JavaScript natif.

N’oubliez pas d’ajuster l’URL de l’API dans le fichier params.js si nécessaire, et pensez à toujours passer par un serveur local pour éviter les blocages du navigateur.

Merci de votre écoute et à bientôt pour de nouvelles explorations web !