← Retour aux SAÉ

SAÉ 2.03 : Application Météo Dynamique (Instant Weather V2)

Développement d'une Single Page Application (SPA) consommant plusieurs API (Météo & Géo).

Contexte & Objectifs

Le projet consistait à développer une Single Page Application (SPA) permettant de consulter la météo de n'importe quelle commune française. C'était un projet individuel avec une forte exigence sur la qualité du code (respect des standards W3C) et l'expérience utilisateur (UX).

Le Défi : Consommer et orchestrer deux API distinctes. D'abord l'API GéoGouv pour identifier la commune recherchée, puis l'API Météo Concept pour récupérer les prévisions correspondantes, le tout sans rechargement de page.

🌤️ Voir le Site en Live 💻 Voir le Code (GitHub)

Apprentissages Critiques (AC)

AC13.03 - Traduire un algorithme

Validé par la fonction displayWeather() qui transforme un tableau de données JSON brut en cartes visuelles, en appliquant des classes CSS conditionnelles (ex: .sunny-gradient) selon les données reçues.

AC13.04 - Architecture Web

Validé par la manipulation avancée du DOM (createElement, appendChild) et la gestion dynamique du Dark Mode via l'injection de classes CSS.

AC13.01 - Outils & Git

Validé par la gestion rigoureuse de l'historique des commits et l'intégration de bibliothèques tierces comme Leaflet.js.

Réalisation & Tâches Techniques

  • Double Appel API : Chaînage des requêtes fetch asynchrones. Conversion Code Postal → Code INSEE via API GéoGouv, puis récupération des prévisions via API Météo Concept.
  • Cartographie Interactive (Bonus) : Intégration de la librairie Leaflet.js. La carte se centre automatiquement sur la ville recherchée et affiche un marqueur grâce aux coordonnées (Lat/Lon) renvoyées par l'API.
  • Expérience Utilisateur (UX) :
    • Ajout d'un Mode Sombre (Dark Mode) complet basculant tout le thème via un bouton toggle.
    • Design réactif avec des dégradés de couleurs (Gradients) changeant selon la météo (Ensoleillé, Nuageux, Pluvieux).

Preuves

Interface principale montrant la carte Leaflet et les prévisions en mode sombre
Interface Dark Mode avec Leaflet
Extrait du script.js montrant la gestion de la carte (Leaflet) et le fetch API
Code JS : Fetch & Map

Autoévaluation

Réussite : Je suis particulièrement fier de l'intégration de la carte interactive. Au début, synchroniser l'affichage météo avec le repositionnement du marqueur GPS était complexe, mais cela apporte une vraie dimension "Pro" et immersive à l'application.

Recul : J'ai compris l'intérêt majeur de bien séparer la logique (JS) de la vue (HTML/CSS). Si je devais refaire le projet aujourd'hui, j'envisagerais d'utiliser un framework réactif comme Vue.js ou React pour simplifier la gestion des mises à jour du DOM.