Développement d'une application de prévision météorologique hebdomadaire

Introduction

Dans ce projet, vous allez apprendre à créer une application de prévision météorologique qui affiche les informations météorologiques hebdomadaires pour un emplacement spécifique. Le projet consiste à récupérer des données météorologiques à partir d'une API, à analyser la réponse et à mettre à jour dynamiquement les éléments HTML pour présenter la prévision météorologique à l'utilisateur.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment récupérer des données de prévision météorologique à partir d'une API à l'aide de la fonctionnalité AJAX de jQuery
• Comment lier les données récupérées aux éléments HTML correspondants sur la page web
• Comment afficher les informations de prévision météorologique hebdomadaires dans un format convivial pour l'utilisateur

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Créer une simple application de prévision météorologique qui fournit aux utilisateurs des informations météorologiques hebdomadaires
• Comprendre comment effectuer des requêtes AJAX pour récupérer des données à partir d'une API
• Monter en évidence la capacité à manipuler le DOM et à mettre à jour des éléments HTML à l'aide de jQuery

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── images        ## ressources d'images
├── js            ## dossier pour les fichiers js et les fichiers json
├── index.html    ## page de prévision météorologique
├── style.css     ## fichier css

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Récupérer les données de prévision météorologique

Dans cette étape, vous allez apprendre à récupérer les données de prévision météorologique hebdomadaires pour W-town à l'aide de l'API fournie.

1. Ouvrez le fichier js/index.js dans votre éditeur de code.
2. Localisez la fonction getweather(), qui est responsable de la récupération des données de prévision météorologique.
3. Dans la fonction getweather(), utilisez la méthode $.get() de jQuery pour effectuer une requête GET sur l'URL de l'API js/weather.json.

// TODO
$.get("js/weather.json", function (data) {
  // Lier les données de prévision météorologique aux éléments HTML
  //...
});

4. Les données de réponse de l'API seront passées à la fonction de rappel en tant que paramètre data. Ces données contiennent les informations de prévision météorologique hebdomadaires.

Lier les données de prévision météorologique au HTML

Dans cette étape, vous allez apprendre à lier les données de prévision météorologique récupérées aux éléments HTML correspondants sur la page.

1. Dans la fonction de rappel de la méthode $.get(), localisez le code où vous allez lier les données à l'HTML.
2. Utilisez jQuery pour sélectionner les éléments HTML nécessaires, tels que l'icône météo, la description météo, la température et les informations sur le vent.

function getweather() {
  // TODO
  $.get("js/weather.json", function (data) {
    let item = $(".item");
    let img, one, two, three, time;
    for (let i = 0; i < data.result.length; i++) {
      img = item[i].children[0];
      one = item[i].children[1].children[0];
      two = item[i].children[1].children[1];
      three = item[i].children[1].children[2];
      time = item[i].children[1].children[3].children;
      img.src = data.result[i].weather_icon;
      one.innerText = data.result[i].weather;
      two.innerText = data.result[i].temperature;
      three.innerText = data.result[i].winp;
      time[0].innerText = data.result[i].days;
      time[1].innerText = data.result[i].week;
    }
  });
}

3. Le code ci-dessus itère à travers le tableau data.result, qui contient les informations de prévision météorologique hebdomadaires. Pour chaque élément, il sélectionne les éléments HTML correspondants et met à jour leur contenu avec les données de la réponse de l'API.
4. Enregistrez les modifications dans le fichier js/index.js.
5. Rafraîchissez la page web, et vous devriez voir les informations de prévision météorologique hebdomadaires affichées comme dans l'image cible.

Félicitations! Vous avez réussi à terminer le projet de prévision météorologique en récupérant les données depuis l'API et en les liant aux éléments HTML de la page.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.