☀️ Projet : "TeoMe" – Météo en temps réel
Lien vers le site :
Document
Technologie : Vue.js 3 + API OpenWeatherMap
🎯 Objectif du projet
Créer une application météo élégante et fonctionnelle permettant aux utilisateurs d'accéder aux conditions météorologiques instantanées de n'importe quelle ville dans le monde. L'accent a été mis sur la simplicité d'utilisation et la rapidité d'affichage des données.
⚙️ Fonctionnalités clés
- Recherche interactive : Barre de recherche permettant de cibler des villes précises.
- Données en temps réel : Affichage de la température, de l'humidité, de la vitesse du vent et de l'icône météorologique correspondante.
- Dynamisme : Mise à jour automatique de l'interface en fonction des données reçues via l'API.
🛠️ Stack Technique
- Frontend : Vue.js 3.
- Intégration API : OpenWeatherMap API (fetch des données météo via requêtes asynchrones).
- Gestion des états : Utilisation des
ref et computed de Vue pour une interface réactive.
- Design : CSS personnalisé pour une interface épurée et lisible (Responsive Design).
🧠 Défis rencontrés & Apprentissages
- Gestion des API : Apprendre à gérer les clés API, les requêtes
GET et surtout le traitement des erreurs (que faire si la ville n'est pas trouvée ou si l'API ne répond pas ?).
- Formatage des données : Conversion des données brutes reçues de l'API (ex: unités de température, timestamps) pour les rendre lisibles pour l'utilisateur final.
- Expérience utilisateur (UX) : Mise en place d'un chargement fluide (loading spinner) pendant que l'API traite la requête.
🚀 Améliorations futures
- Ajout d'une prévision sur 5 jours pour enrichir les informations fournies.
- Utilisation de la géolocalisation automatique du navigateur pour afficher la météo locale dès l'ouverture du site.