Application Météo : application web communicante avec carte interactive

Contexte et objectif

Dans le cadre de la SAE 3.02, nous avons conçu et développé en groupe de trois une application web communicante fournissant des données météorologiques en temps réel et prévisionnelles, couplées à une carte interactive. Le projet couvre toute la chaîne technique : client Vue.js, API REST Node.js/Express servant de proxy sécurisé, cache Redis et services externes OpenWeather.

Ce que j'ai réalisé

• D'après le tableau d'attribution des rôles, j'étais chargé avec un coéquipier du backend et de l'API : création des routes API REST sous Express, connexion et requêtage de l'API OpenWeather avec Axios.
• Nous avons implémenté un cache Redis à durée d'expiration configurable (exemple cité : 30 minutes).
• Nous avons développé une interface Vue.js : recherche d'une ville via l'API Geocoding, affichage des conditions actuelles et des prévisions horaires et journalières.
• Nous avons intégré une carte Mapbox GL JS qui se centre sur la ville recherchée et permet de cliquer n'importe où pour obtenir la météo du lieu.

Difficultés rencontrées et solutions

• Protection de la clé API OpenWeather, soumise à des quotas : clé stockée uniquement côté serveur dans une variable d'environnement, le frontend n'appelant que notre backend.
• Mapbox GL JS n'est pas une librairie Vue native : carte instanciée dans le hook onMounted et détruite dans onUnmounted pour éviter les fuites de mémoire.
• Enchaînement d'opérations asynchrones (Redis, puis Axios si nécessaire) : usage systématique de async/await.
• Cohérence des flux entre frontend, backend et cache : définition d'un contrat d'API (format JSON stable).

Résultats

• Application fonctionnelle, répondant au cahier des charges selon le rapport.
• Sans cache, une requête dépend du temps de réponse d'OpenWeather (souvent plus de 500 ms) ; servie par le cache Redis, elle l'est en moins de 50 ms.
• Axes d'amélioration identifiés : couches de données sur la carte, favoris, design plus responsive, gestion des erreurs.

Ce que j'en retiens

Le cache Redis s'est révélé être la pierre angulaire de l'application : il répond à la fois aux enjeux de performance et aux quotas de l'API externe. La gestion de problématiques concrètes (CORS, protection des clés API, cycle de vie de Mapbox dans Vue) a été très formatrice.