Meine erste Wetter-App

Erstellen einer einfachen Wetter-App mit API-Integration

Während ich weiter lerne und meine Programmierfähigkeiten verbessere, beschloss ich, mithilfe einer API eine einfache Wetter-App zu erstellen, um Echtzeitdaten zu erhalten. Dieses Projekt hat mir geholfen zu verstehen, wie man mit APIs interagiert, asynchrone Vorgänge abwickelt und die Benutzeroberfläche dynamisch aktualisiert. In diesem Blog werde ich Sie durch den Code führen, den ich zum Erstellen der App verwendet habe.

---

Projektübersicht

Die Wetter-App ruft Wetterdaten für einen bestimmten Standort ab und zeigt das aktuelle Wetter und eine 3-Tage-Vorhersage an. Es nutzt die WeatherAPI zum Sammeln von Daten und JavaScript übernimmt die Funktionalität.

---

Hauptfunktionen

1. Standortsuche: Benutzer können einen Stadtnamen eingeben, um Wetterdaten zu erhalten.

2. Aktuelles Wetter: Zeigt die aktuelle Temperatur, Wetterbedingungen und mehr an.

3. Vorhersage: Wettervorhersagen für die nächsten 3 Tage anzeigen.

Werfen wir einen Blick auf die wichtigsten Teile des Codes, die dafür sorgen, dass diese App funktioniert.

---

1. Wetterdaten mithilfe einer API abrufen

Der erste Schritt besteht darin, die Wetterdaten von der WeatherAPI abzurufen. So richte ich die Funktion für die Verarbeitung des API-Aufrufs ein:

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

Diese Funktion verwendet fetch(), um eine asynchrone Anfrage an die WeatherAPI zu stellen. Es ruft das aktuelle Wetter und eine 3-Tage-Vorhersage ab und übergibt diese Daten dann an die Funktionen displayCurrent() und displayForecast().

---

1. Umgang mit Benutzereingaben

Die App wartet auf Benutzereingaben über das Suchfeld. Wenn der Benutzer einen Ort eingibt (z. B. „London“), wird die Wettersuche ausgelöst:

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

Zusätzlich habe ich eine Schaltfläche hinzugefügt, um die Suche auszulösen, wenn darauf geklickt wird:

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

Dadurch kann der Benutzer entweder etwas in das Suchfeld eingeben oder auf die Suchschaltfläche klicken, um Wetterdaten abzurufen.

---

1. Anzeige des aktuellen Wetters

Sobald die Daten abgerufen wurden, ist die Funktion displayCurrent() dafür verantwortlich, die aktuellen Wetterdetails auf der Seite anzuzeigen. So funktioniert es:

Funktion displayCurrent(location, currentWeather) {
    if (aktuelles Wetter) {
        let lastUpdatedDate = new Date(currentWeather.last_updated);
        let cardHTML = `
            <div>



<p>Diese Funktion generiert eine Karte, die die aktuelle Temperatur, die Wetterbedingungen und zusätzliche Details wie Windgeschwindigkeit und Luftfeuchtigkeit anzeigt. Es aktualisiert die Seite dynamisch, indem es den generierten HTML-Code in das DOM einfügt.</p>


<hr>

<ol>
<li>Anzeige der 3-Tages-Vorhersage</li>
</ol>

<p>Als nächstes zeige ich die Wettervorhersage für die nächsten drei Tage. Dies wird von der Funktion displayForecast() erledigt:<br>
</p><pre class="brush:php;toolbar:false">Funktion displayForecast(forecastData) {
    let ForecastHTML = '';
    for (let i = 1; i < ForecastData.length; i ) {
        PrognoseHTML = `
            <div>



<p>Diese Funktion durchläuft die Vorhersagedaten und generiert Karten für jeden der nächsten zwei Tage, die die Höchst- und Mindesttemperaturen, Wetterbedingungen und Symbole anzeigen.</p>


<hr>

<p>Fazit</p>

<p>Das Erstellen dieser Wetter-App war eine großartige Übung für mich, da ich gelernt habe, wie man mit APIs interagiert, JSON-Daten verarbeitet und eine Webseite dynamisch aktualisiert. Das Projekt hat mir geholfen, mein Wissen über asynchrones JavaScript, DOM-Manipulation und Ereignisbehandlung zu festigen.</p>

<p>Wenn Sie gerade erst mit JavaScript und APIs beginnen, ist diese Wetter-App eine einfache, aber leistungsstarke Möglichkeit, Ihre Fähigkeiten zu üben. Sie können dieses Projekt erweitern, indem Sie weitere Funktionen wie Fehlerbehandlung, detailliertere Prognosen oder sogar einen Dunkelmodus für die Benutzeroberfläche hinzufügen.</p>


<hr>

<p>Probieren Sie den Code gerne aus und passen Sie ihn an Ihre Bedürfnisse an. Lassen Sie mich wissen, wenn Sie Fragen oder Anregungen haben!</p>


          

            
        

Das obige ist der detaillierte Inhalt vonMeine erste Wetter-App. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!