SAÉ 2.03 - Application Météo JS

01. Résumé du Projet

Cette SAE avait pour objectif la conception d'une application web météo interactive en JavaScript. Le projet consistait à consommer l'API Météo Concept, manipuler dynamiquement le DOM, et offrir à l'utilisateur une interface complète avec diverses options de personnalisation (nombre de jours, données avancées, charte graphique, etc.). Le projet devait être responsive, accessible et publié sur GitHub Pages avec un README clair.

02. Apprentissages Critiques

CODE	DESCRIPTION DE LA COMPÉTENCE	STATUT SYSTÈME
AC13.01	Utiliser un système informatique et ses outils.	VALIDÉE
AC13.02	Lire, exécuter, corriger et modifier un programme.	VALIDÉE
AC13.03	Traduire un algorithme, dans un langage et pour un environnement donné.	VALIDÉE
AC13.04	Connaître l’architecture et les technologies d’un site Web.	VALIDÉE
AC13.05	Choisir les mécanismes de gestion de données adaptés (API, LocalStorage).	VALIDÉE
AC13.06	S’intégrer dans un environnement de travail collaboratif (Git).	VALIDÉE

03. Actions Réalisées

Intégration de l’API Météo Concept avec gestion du token personnel.
Manipulation avancée du DOM (createElement, appendChild...).
Affichage dynamique de prévisions météo sur 1 à 7 jours.
Ajout d’options affichables via cases à cocher (pluie, vent, coordonnées).
Création d’une fonctionnalité dark mode.
Charte graphique personnalisée, responsive et accessible (WCAG AA).
Validation W3C HTML/CSS et publication GitHub Pages.

04. Preuves & Livrables

Repository GitHub Code Source

Application Live GitHub Pages

Résultat Recherche Capture d'écran

Interface 7 Jours Capture d'écran

05. Débriefing Mission

POINTS FORTS

Code bien structuré et conforme aux bonnes pratiques JS.
Compréhension claire de l’utilisation d’une API et gestion des erreurs.
Interface responsive et agréable à utiliser.
Utilisation correcte de Git et GitHub avec commits réguliers.

🔧 Diagnostic des Problèmes

PROBLÈME RENCONTRÉ	SOLUTION APPLIQUÉE
Erreur 401 sur appel API.	Vérification du token et gestion via variable privée dans le code.
Éléments mal centrés en responsive.	Utilisation de Flexbox/Grid avec media queries pour adapter l'affichage.

PROTOCOLE CONSEILLÉ POUR OPTIMISATION

01. Tester l'API avec Postman avant l’intégration pour comprendre la structure JSON.
02. Prévoir un plan de responsive design dès le début (Mobile First).
03. Versionner régulièrement avec des messages de commit clairs.
04. Utiliser des composants réutilisables pour le DOM (fonctions de création).