Entwicklung einer wöchentlichen Wettervorhersageanwendung

Einführung

In diesem Projekt lernst du, wie du eine Wettervorhersage-Applikation erstellst, die die wöchentlichen Wetterinformationen für einen bestimmten Standort anzeigt. Das Projekt umfasst das Abrufen von Wetterdaten von einer API, das Analysieren der Antwort und das dynamische Aktualisieren der HTML-Elemente, um die Wettervorhersage dem Benutzer vorzustellen.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du mit Hilfe der AJAX-Funktionalität von jQuery Wettervorhersagedaten von einer API abrufst
• Wie du die abgerufenen Daten an die entsprechenden HTML-Elemente auf der Webseite bindest
• Wie du die wöchentlichen Wettervorhersageinformationen in einem benutzerfreundlichen Format anzeigst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• Eine einfache Wettervorhersage-Applikation zu erstellen, die den Benutzern wöchentliche Wetterinformationen bietet
• Zu verstehen, wie AJAX-Anfragen gestellt werden, um Daten von einer API abzurufen
• Die Fähigkeit zu demonstrieren, die DOM zu manipulieren und HTML-Elemente mit jQuery zu aktualisieren

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien und -Struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur sieht wie folgt aus:

├── images        ## Bildressourcen
├── js            ## Verzeichnis für js-Dateien und json-Dateien
├── index.html    ## Wettervorhersage-Seite
├── style.css     ## css-Datei

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Wettervorhersagedaten abrufen

In diesem Schritt wirst du lernen, wie du die wöchentlichen Wettervorhersagedaten für W-town mit der bereitgestellten API abrufst.

1. Öffne die Datei js/index.js in deinem Code-Editor.
2. Locate die getweather()-Funktion, die für das Abrufen der Wettervorhersagedaten verantwortlich ist.
3. Inside der getweather()-Funktion, verwenden Sie die jQuery-$.get()-Methode, um einen GET-Anfrage an den API-Endpunkt js/weather.json zu stellen.

// TODO
$.get("js/weather.json", function (data) {
  // Bind die Wettervorhersagedaten an die HTML-Elemente
  //...
});

4. Die Antwortdaten von der API werden als data-Parameter an die Callback-Funktion übergeben. Diese Daten enthalten die wöchentlichen Wettervorhersageinformationen.

Wettervorhersagedaten an die HTML binden

In diesem Schritt wirst du lernen, wie du die abgerufenen Wettervorhersagedaten an die entsprechenden HTML-Elemente auf der Seite bindest.

1. Inside der Callback-Funktion der $.get()-Methode, finde den Code, in dem du die Daten an die HTML binden wirst.
2. Verwende jQuery, um die erforderlichen HTML-Elemente auszuwählen, wie das Wetter-Icon, die Wetterbeschreibung, die Temperatur und die Windinformation.

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];
      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. Der obige Code iteriert durch das data.result-Array, das die wöchentlichen Wettervorhersageinformationen enthält. Für jedes Element wählt er die entsprechenden HTML-Elemente aus und aktualisiert ihren Inhalt mit den Daten aus der API-Antwort.
4. Speichere die Änderungen in der Datei js/index.js.
5. Aktualisiere die Webseite, und du solltest die wöchentlichen Wettervorhersageinformationen wie in dem Zielbild angezeigt sehen.

Herzlichen Glückwunsch! Du hast das Wettervorhersage-Projekt erfolgreich abgeschlossen, indem du die Daten von der API abgerufen und an die HTML-Elemente auf der Seite gebunden hast.

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.