Exercice Météo

Consignes

Dans cet exercice, vous allez créer une application météo en utilisant ReactJS. L'application permettra à l'utilisateur de rechercher la météo d'une ville spécifique en se basant sur l'API OpenWeatherMap.

Étapes à suivre

1. Mise en place de la structure de base

1. Créez un nouveau projet React en utilisant Create React App.
2. Divisez votre application en composants.
3. Utilisez le composant App.js ou votre routeur.js comme point d'entrée pour intégrer les autres composants.

2. Effectuez la requête à l'API

1. Dans le composant SearchForm, utilisez le hook useEffect pour effectuer une requête à l'API OpenWeatherMap en utilisant Axios ou Fetch.
2. Utilisez la ville saisie par l'utilisateur dans l'URL de la requête pour obtenir les informations météorologiques spécifiques à cette ville.
3. Stockez les données de réponse dans un état en utilisant le hook useState.

3. Affichez les informations météorologiques

1. Créez un composant WeatherDisplay pour afficher les informations météorologiques récupérées.
2. Utilisez les données stockées dans l'état pour afficher les informations pertinentes telles que la température, la description du temps, l'humidité, etc.

4. Créez un composant SearchForm

1. Ce composant sera responsable de la saisie de la ville pour obtenir les informations météorologiques.
2. Utilisez un formulaire pour permettre à l'utilisateur de saisir le nom d'une ville.
3. Gérez l'état de l'entrée de texte à l'aide du hook useState.

5. Gérez les erreurs de requête

1. Utilisez un bloc try-catch dans le hook useEffect du composant SearchForm pour gérer les erreurs potentielles lors de la requête à l'API.
2. Stockez les erreurs dans un autre état en utilisant le hook useState.
3. Affichez les erreurs à l'utilisateur, par exemple en utilisant un message d'erreur ou une boîte de dialogue.

Bonus

• Affichez des icônes météorologiques correspondant à la description du temps.
• Permettez à l'utilisateur de choisir l'unité de mesure (Celsius ou Fahrenheit).

Ressources

• API OpenWeatherMap : https://openweathermap.org/ (opens in a new tab)
• Documentation sur l'API OpenWeatherMap : https://openweathermap.org/current (opens in a new tab)

Conclusion

Dans cet exercice, vous avez appris à créer une application météo en utilisant ReactJS. Vous avez utilisé l'API OpenWeatherMap pour récupérer les informations météorologiques d'une ville spécifique. Vous avez également divisé votre application en composants réutilisables et géré les erreurs potentielles lors des requêtes à l'API.