Création d'une application météo d'une seule page en JavaScript

Présentation
Pour clôturer enfin la phase 1 du programme de génie logiciel de la Flatiron School, nous avons été chargés de créer une application Web d'une seule page utilisant uniquement HTML, CSS et JavaScript, ainsi que d'incorporer une API publique qui fournirait les données de notre page Web.

Pour mon projet, j'ai décidé de créer ma propre application météo intitulée « Prévisions météorologiques du jour ». Même si le projet en lui-même était certes un peu basique, c'était un défi amusant à relever. L'objectif était de créer une application conviviale et réactive fournissant des mises à jour météorologiques en temps réel et des prévisions détaillées pour n'importe quelle ville du monde.

Exigences du projet
Le projet comportait plusieurs exigences, chacune renforçant les concepts fondamentaux et les leçons enseignées tout au long de la phase 1 :

L'application doit s'exécuter entièrement sur une seule page. Aucune redirection ou rechargement n'est autorisé et les données doivent provenir d'une API publique ou d'un fichier db.json.
L'API ou le fichier db.json doit renvoyer au moins cinq objets différents, chacun contenant au moins trois attributs.
Toutes les interactions client et API doivent être gérées de manière asynchrone, en utilisant JSON comme format de communication.
Le projet doit utiliser au moins trois écouteurs d'événements uniques, chacun écoutant un type d'événement différent, ajoutés à l'aide de la méthode addEventListener(). Chaque écouteur d'événement doit avoir son propre rappel unique.
L'application doit implémenter au moins une instance d'itération de tableau.

Personnellement, j'ai trouvé que la mise en œuvre sur l'API était la plus difficile, en partie à cause de ma propre indécision, mais aussi parce que le concept me semblait le plus étranger. Cependant, après quelques recherches, j'ai découvert que la mise en œuvre de l'API était en fait l'un des aspects les plus simples de ce projet.

Caractéristiques des « Prévisions météorologiques du jour » :

Mises à jour météo en temps réel
Lorsque l'utilisateur saisit le nom d'une ville, l'application renvoie des données météorologiques en temps réel spécifiques à cet emplacement. La première page affichera la température actuelle en degrés Celsius, une brève description météo et une icône pour représenter visuellement les prévisions.

Prévisions sur 3 heures :
L'application fournit également une prévision sur 24 heures par intervalles de 3 heures. Cette section affiche à l'utilisateur à la fois l'heure actuelle de la journée et la température prévue en degrés Celsius.

Mises à jour dynamiques :
Toutes les données sont récupérées et affichées dynamiquement sans recharger la page, garantissant une expérience utilisateur transparente.

Comment j'ai satisfait aux exigences

1. Application d'une seule page
   Cette application météo fonctionne entièrement sur une seule page. Lorsqu'un utilisateur recherche une ville, JavaScript récupère les données requises, efface l'ancien contenu et met à jour dynamiquement la page avec les nouvelles informations, le tout sans redirection ni rechargement.

2. Cinq objets avec attributs
   Les objets suivants ont été implémentés :

1.) Objet de la ville :
Attributs : comprend le nom, la latitude et la longitude.

2.) Objet météo :
Attributs : comprend la température, la description et l'icône.

3.) Objet de prévision :
Attributs : comprend l'heure, la température et l'icône.

4.) Objet DateTime :
Attributs : inclut la date, l'heure et le jour.

5.) Objet élément DOM :
Attributs : inclut l'identifiant, le type et le contenu.

Chaque objet a joué un rôle pour structurer les données et assurer la modularité.

1. Gestion asynchrone des API
   À l'aide de l'API fetch, l'application récupère les données météorologiques et de prévisions en temps réel à partir de l'API OpenWeather. Toutes les interactions de données utilisent JSON, répondant aux exigences du projet.

2. Trois auditeurs d'événements uniques
   L'application intègre trois auditeurs d'événements distincts :

Cliquez sur Événement : lorsque les utilisateurs cliquent sur le bouton « Rechercher », les données météorologiques sont récupérées.
Événement de pression de touche : lorsque la touche « Entrée » est enfoncée dans le champ de saisie, elle déclenche la même fonctionnalité de récupération météo.
Événement de survol : lorsque l'utilisateur survole l'icône météo, des informations supplémentaires (par exemple, "Données fournies par OpenWeatherMap") sont affichées dynamiquement.

1. Itération du tableau La section de prévisions utilise la méthode forEach pour créer dynamiquement des éléments HTML pour chaque prévision sur 3 heures.

Défis et solutions
Certains défis que j'ai rencontrés au cours de ce projet consistaient à comprendre comment gérer les opérations asynchrones lors de la récupération des données de l'API OpenWeather, ainsi qu'à comprendre l'API en elle-même et en quoi elle diffère d'un fichier db.json.
Le style de l'application a été un autre grand défi pour moi, car CSS a été un point faible sur lequel j'ai tendance à ne pas me concentrer au profit de concepts plus intimidants et techniques.
Avec de la pratique, cependant, ces concepts ne semblent pas aussi monstrueux et même si je sais que mon code est loin d'être parfait, je me sens beaucoup plus confiant dans mes compétences de développeur après avoir relevé ces défis.

Conclusion
Ce projet a non seulement consolidé ma compréhension de JavaScript, mais m'a également appris de précieuses leçons sur la persévérance, la résolution de problèmes et l'importance d'un code propre et modulaire.

J'espère que vous prendrez autant de plaisir à explorer l'application que j'en ai eu à la créer. N'hésitez pas à partager vos commentaires ou suggestions d'amélioration. J'aimerais connaître votre avis !

Si vous souhaitez consulter le code source de ce projet, vous pouvez y accéder dans ce référentiel : https://github.com/CourtneyKerr19/Todays_Weather_Forecast

Merci d'avoir lu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!