ÉcoConso – Application de suivi de consommation énergétique
Date : 26 mai – 28 juin 2024
Entreprise : La Sorégies
Rapport de stage
Au cours de mon stage, j’ai pu développer une application web interactive dédiée au suivi de la consommation énergétique d’un foyer. Ce projet m’a permis de concevoir une interface dynamique capable de visualiser les données de consommation mensuelles sous forme de graphiques, grâce à l’utilisation de JavaScript et de la bibliothèque Chart.js.
J’ai également mis en place plusieurs fonctionnalités, telles que le choix entre différents types de tarification (basique ou heures pleines/heures creuses), la conversion des consommations en coût financier, ainsi que le calcul de l’empreinte carbone. Les données ont d’abord été exploitées via un fichier JSON, puis intégrées dynamiquement à l’aide d’appels API.
Ce projet m’a permis de renforcer mes compétences en développement web (HTML, CSS, JavaScript), en manipulation de données, ainsi qu’en résolution de problèmes, notamment lors de la gestion et de la correction d’erreurs liées à l’intégration des données. J’ai également appris à améliorer l’ergonomie et le responsive design d’une interface utilisateur.
Description du projet
ÉcoConso est une application web interactive permettant de visualiser la consommation énergétique d’un foyer sur l’année 2024. L’interface est intuitive et dynamique grâce à JavaScript et la bibliothèque Chart.js.
Fonctionnalités principales
- 📈 Affichage graphique des consommations mensuelles
- 🔁 Choix entre tarifs Basique et Heures Pleines / Heures Creuses (HP/HC)
- 💶 Conversion des kWh en coût (€)
- 🌍 Calcul automatique de l’empreinte carbone
- 📊 Visualisation via Chart.js
- 🔄 Données chargées depuis un fichier JSON puis via API en temps réel
Technologies utilisées
- HTML / CSS
- JavaScript
- Chart.js
- JSON
- API REST
Déroulement du stage (5 semaines)
Semaine 1 – Mise en place de la base
- Création de la structure du projet (index.html, style.css, script.js)
- Création du fichier consommation.json avec les données mensuelles
- Premier graphique de consommation avec Chart.js
Semaine 2 – Fonctionnalités dynamiques
- Ajout d’un toggle pour choisir le type de contrat
- Adaptation du graphique pour afficher HP/HC ou Basique
- Toggle pour l’affichage en kWh ou en euros
- Améliorations CSS et début du responsive design
Semaine 3 – Bilan de consommation
- Restructuration de l’interface avec plusieurs « box »
- Calcul et affichage d’indicateurs (total annuel, coût, empreinte carbone, moyenne mensuelle)
- Intégration de scripts pour les calculs
- Optimisation du responsive design
Semaine 4 – Données en temps réel
- Remplacement du fichier JSON par une API
- Tests des requêtes avec Postman
- Adaptation du code pour les données dynamiques
Semaine 5 – Corrections et améliorations
- Résolution de problèmes d’affichage API
- Mise en place d’un calcul moyen temporaire
- Utilisation d’appels API simulés en local