Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML

Erstellen einer einfachen Wetter-App mit Vanilla JavaScript

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

Final product image
What You'll Be Creating

Im heutigen Tutorial erfahren Sie, wie Sie mit Vanilla JavaScript eine einfache, aber voll funktionsfähige Wetter-App erstellen. Wir haben viele interessante Dinge zu besprechen, also nimm eine Tasse Kaffee und lass uns anfangen!

Was werden wir erstellen?

Hier ist ein Einführungsvideo, das die Funktionalität der App zeigt, die wir erstellen werden:

Hier ist die Demo auf CodePen, mit der Sie spielen können:

Hinweis: In diesem Tutorial wird davon ausgegangen, dass Sie mit AJAX, einer wichtigen Front-End-Technik, vertraut sind. Wenn Sie gerade erst anfangen, schauen Sie sich diese Serie an.

1. Gerüst der App

Bevor wir mit der Erstellung unserer App beginnen, müssen wir einige Dinge berücksichtigen.

Suchen Sie eine Wetter-API

Zuerst müssen wir einen Anbieter finden, der es uns ermöglicht, seine Wetterdaten in unsere App zu integrieren. Glücklicherweise gibt es verschiedene Anbieter für die Entwicklung von Wetter-Apps. Die meisten von ihnen enthalten ein kostenloses Paket sowie Premium-Abonnements, die je nach Service / Funktionen skaliert werden können.

In unserem Fall verwenden wir OpenWeatherMap, eine der beliebtesten kostenlosen Optionen. Um seine Funktionen nutzen zu können, müssen wir uns zunächst für einen API-Schlüssel anmelden:

Register for an API

Dieser Service wird mit verschiedenen Paketen geliefert. Wie Sie der folgenden Visualisierung entnehmen können, ermöglicht der Starter (kostenlos) 60 Anrufe pro Minute, was unseren Anforderungen entspricht:

The available packages for the OpenWeatherMap API

Bevor Sie fortfahren, stellen Sie bitte sicher, dass Sie sich für einen API-Schlüssel registriert haben. Später werden wir diesen Schlüssel in unser Skript aufnehmen.

Denken Sie daran, dass Sie die App am besten testen können, indem Sie die Codepen-Demo abspalten und Ihren eigenen Schlüssel hinzufügen. Wenn wir alle denselben Schlüssel verwenden, funktioniert die App aufgrund von API-Aufrufbeschränkungen wahrscheinlich nicht.

Finden der Wettersymbole

Für die Zwecke dieses Tutorials benötigen wir eine Reihe von Wettersymbolen. Es ist erwähnenswert, dass OpenWeatherMap über ein eigenes Symbol-Set verfügt, das wir uns ansehen werden. Wir werden jedoch noch einen Schritt weiter gehen und einige benutzerdefinierte verwenden.

Wir werden erneut die Envato Elements-Bibliothek nutzen und ein Paket mit Vektorwettersymbolen herunterladen:

The custom weather icons were going to use from Envato Elements
Die benutzerdefinierten Wettersymbole, die wir von Envato Elements verwenden werden

2. Definieren Sie das Seiten-Markup

Wir werden zwei Abschnitte definieren.

Der erste Abschnitt enthält eine Überschrift, ein Suchformular und ein leeres span-Element. Dieses Element wird unter bestimmten Bedingungen mit einer entsprechenden Meldung sichtbar. Insbesondere, wenn für eine angeforderte Stadt keine Wetterdaten verfügbar sind oder die Daten für diese Stadt bereits bekannt sind.

Der zweite Abschnitt enthält eine Liste der Städte. Standardmäßig enthält es keine Städte. Wenn wir jedoch nach dem Wetter für eine bestimmte Stadt suchen und Wetterdaten verfügbar sind, wird ein entsprechendes Listenelement (Stadt) an die ungeordnete Liste angehängt.

Hier ist das erste Seiten-Markup:

Hinweis: In unserer CodePen-Demo funktioniert das autofokus-Attribut des Suchfelds nicht. Tatsächlich wird der folgende Fehler ausgegeben, den Sie sehen können, wenn Sie Ihre Browserkonsole öffnen:

The cross-origin error due to the autofocus attribute

Wenn Sie diese App jedoch lokal ausführen (nicht als Codepen-Projekt), tritt dieses Problem nicht auf.

Und hier ist das Markup für ein Listenelement, das wir dynamisch über JavaScript generieren:

2. Geben Sie einige grundlegende Stile an

Nachdem das Markup für die App fertig ist, werden wir mit dem CSS fortfahren. Der erste Schritt besteht wie immer darin, einige CSS-Variablen und allgemeine Rücksetzstile anzugeben:

4. Legen Sie die Hauptstile fest

Lassen Sie uns nun die Hauptstile unserer App diskutieren.

Abschnitt #1 Stile

Zunächst fügen wir den Elementen des ersten Abschnitts einige einfache Stile hinzu.

Auf mittleren Bildschirmen und höher (>700px) sollte das Layout folgendermaßen aussehen:

The layout of the first section on large screens

Auf kleineren Bildschirmen werden die Formularelemente in zwei Zeilen aufgeteilt:

The layout of the first section on small screens

Hier sind die zugehörigen Stile:

Abschnitt #2 Stile

Wir werden CSS Grid verwenden, um die Listenelemente zu gestalten. Denken Sie daran, dass jedes Listenelement eine Stadt darstellt. Ihre Breite hängt von der Bildschirmgröße ab.

Auf großen Bildschirmen ( >1000px) haben wir ein vierspaltiges Layout.

The unordered list layout on large screens

Dann werden auf mittleren Bildschirmen ( > 700px und ≤1000px) ein dreispaltiges Layout, auf kleinen Bildschirmen ( > 500px und ≤700px) ein zweispaltiges Layout und schließlich auf besonders kleinen Bildschirmen(≤500px) alle Elemente gestapelt.

Hier sind die entsprechenden Stile:

Jede Spalte sieht aus wie eine Karte mit einem unteren Schatten, der über das Pseudoelement ::after hinzugefügt wird.

Auf der Karte finden Sie Wetterinformationen zur gewünschten Stadt. Diese werden, abgesehen von den Symbolen, von unserer Anfrage stammen. Diese Symbole, die wie oben erwähnt von Envato Elements übernommen wurden, zeigen die aktuellen Wetterbedingungen dieser Stadt an und stimmen mit den entsprechenden OpenWeatherMap-Symbolen überein.

The card layout

Unten sehen Sie einen Teil des CSS, der für dieses Layout benötigt wird:

5. Fügen Sie das JavaScript hinzu

An diesem Punkt sind wir bereit, die Kernfunktionalität unserer App zu erstellen. Lassen Sie es uns tun!

Beim Einreichen des Formulars

Jedes Mal, wenn ein Benutzer das Formular durch Drücken der Eingabetaste oder der Schaltfläche "Senden" sendet, werden zwei Dinge ausgeführt:

  1. Verhindern Sie das Senden des Formulars und verhindern Sie daher das erneute Laden der Seite.
  2. Holen Sie sich den Wert, der im Suchfeld enthalten ist.

Hier ist der Startcode:

Als Nächstes prüfen wir, ob sich im zweiten Abschnitt Listenelemente (Städte) befinden.

Führen Sie eine AJAX-Anforderung durch

Wir gehen davon aus, dass die Liste leer ist. Das heißt, es hat in der Vergangenheit noch nie eine AJAX-Anfrage ausgeführt. In diesem Fall führen wir eine Anforderung an die OpenWeatherMap-API aus und übergeben die folgenden Parameter:

  1. Der Städtename (z. B. Athen) oder der durch Kommas getrennte Städtename zusammen mit dem Ländercode (z. B. Athen, gr), der der Wert des Suchfelds ist
  2. Der API-Schlüssel. Auch hier sollten Sie Ihren eigenen Schlüssel verwenden, um unerwartete Fehler aufgrund von API-Aufrufbeschränkungen zu vermeiden.
  3. Die Temperatureinheit für die gewünschte Stadt. In unserem Fall gehen wir mit Celcius.

Vor diesem Hintergrund sollte unsere Anforderungs-URL gemäß der API-Dokumentation ungefähr so aussehen:

Um die AJAX-Anfrage auszuführen, haben wir viele Optionen. Wir können die einfache alte XMLHttpRequest-API, die neuere Fetch-API oder sogar eine JavaScript-Bibliothek wie jQuery und Axios verwenden. In diesem Beispiel verwenden wir die Fetch-API.

Um die gewünschten Daten zu erhalten, müssen wir folgende Schritte ausführen:

  • Übergeben Sie die URL, auf die wir zugreifen möchten, an die Methode fetch().
  • Diese Methode gibt ein Versprechen zurück, das die Antwort enthält (ein Response-Objekt). Dies ist jedoch nicht die eigentliche Antwort, sondern nur eine HTTP-Antwort. Um die Antwortdaten im gewünschten JSON-Format abzurufen (dies ist das Standarddatenformat von OpenWeatherMap), verwenden wir die json()-Methode des Antwortobjekts.
  • Diese Methode gibt ein weiteres Versprechen zurück. Wenn es erfüllt ist, stehen die Daten zur Bearbeitung zur Verfügung.
  • Wenn die Anforderung aus irgendeinem Grund nicht erfolgreich ist, wird eine entsprechende Meldung auf dem Bildschirm angezeigt.

Unsere AJAX-Anfrage würde also ungefähr so aussehen:

Tipp: Anstatt then() s zu verketten, hätten wir den neueren und besser lesbaren async/await -Ansatz für die AJAX-Anforderung verwenden können..

An example of the response data

Hier müssen wir zwei Dinge besprechen:

  1. Wenn Sie sich die obige Antwortvisualisierung noch einmal ansehen, werden Sie feststellen, dass die API einen icon-Code (z. B. "50d") zurückgibt, der die aktuellen Wetterbedingungen für die Zielstadt enthält. Basierend auf diesem Code können wir die Symbol-URL erstellen und über das img-Tag auf der Karte anzeigen.
  2. Innerhalb des .city-name-Elements jedes Listenelements wird das Attribut data-name mit dem Wert cityName,countryCode (z. B. madrid,es) angehängt. Später werden wir diesen Wert verwenden, um doppelte Anforderungen zu vermeiden.

Dinge zurücksetzen

Zuletzt löschen wir nach der AJAX-Anforderung den Inhalt des .msg-Elements und den Wert des Suchfelds und konzentrieren uns auch auf dieses Feld:

Großartige Arbeit, Leute! Wir haben gerade die erste Version unserer App erstellt. Wenn Sie Ihren eigenen API-Schlüssel eingeben und nach einer Stadt suchen, sollte ein Kartenlayout ähnlich dem folgenden angezeigt werden:

The unordered list layout with the default icons

Hier ist die zugehörige CodePen-Demo:

Fügen Sie benutzerdefinierte Symbole hinzu

Passen wir jetzt das Erscheinungsbild unserer App ein wenig an. Wir ersetzen die Standard-OpenWeatherMap-PNG-Symbole durch die SVGs, die wir zuvor von Envato Elements heruntergeladen haben.

Zu diesem Zweck habe ich alle neuen Symbole in Codepen hochgeladen (über den Asset Manager, da ich ein PRO-Mitglied bin) und ihre Namen geändert, sodass sie den Namen und Wetterbedingungen der ursprünglichen Symbole wie folgt entsprechen:

Mapping the custom icons with the original ones

Dann müssen wir im Code nur den Symbolpfad ändern:

Doppelte Anfragen verhindern

Eines müssen wir noch beheben. Bisher wird bei der Durchführung einer erfolgreichen AJAX-Anforderung ein Listenelement erstellt. Die Liste kann jedoch mehrere identische Listenelemente enthalten, die sich auf dieselbe Stadt beziehen, wie z.B.

Identical list items

Das ist eine schlechte Benutzererfahrung. Stellen Sie daher sicher, dass nur eine einzige Anfrage für eine bestimmte Stadt ausgelöst wird.

Aber vorher gibt es noch etwas zu berücksichtigen. Der gleiche Städtename kann in mehr als einem Land existieren. Wenn wir beispielsweise im Sucher von OpenWeatherMap nach "Athen" suchen, werden folgende Ergebnisse angezeigt:

Cities that share the same name

Vor diesem Hintergrund schreiben wir einen Code, der sicherstellt, dass nur eine einzige Anfrage pro Stadt und Land ausgeführt wird:

Lassen Sie mich erklären, welche Aktionen hier stattfinden:

  1. Während des Submit-Handlers prüfen wir erneut, bevor eine AJAX-Anfrage gestellt wird, ob die ungeordnete Liste leer ist oder nicht. Wenn es nicht leer ist, bedeutet dies, dass mindestens eine erfolgreiche AJAX-Anforderung bereits ausgeführt wurde.
  2. Als Nächstes prüfen wir, ob ein Listenelement vorhanden ist, dessen Städtename oder der Wert seines data-name-Attributs dem Wert des Suchfelds entspricht.
  3. Wenn ja, bedeutet dies, dass der Benutzer das Wetter für diese Stadt bereits kennt, sodass keine weitere AJAX-Anforderung ausgeführt werden muss. Bei den folgenden Aktionen zeigen wir ihnen eine verwandte Nachricht, löschen den Wert des Suchfelds und geben ihm den Fokus.

Hinweis #1: Wie ich bemerkt habe, gibt die API nichts zurück, wenn Sie nach einer Stadt mit höchstens zwei Buchstaben suchen, die keinen Ländercode darstellen (z. B. athens, aa). Wenn Sie dagegen nach einer Stadt mit mindestens drei Buchstaben suchen, die auch keinen Ländercode darstellen (z. B. athens, aaaa), ignoriert die API den Teil nach dem Komma und gibt alle als "benannten" Städte zurück erster Teil (z. B. Athen).

Hinweis #2: In dieser Übung wird auch nicht auf den Sonderfall eingegangen, in dem ein Land mehr als eine Stadt mit demselben Namen enthält (z. B. Athen in den USA). Wenn ein Benutzer beispielsweise nach "athens, us" sucht, wird nur eine Stadt auf dem Bildschirm angezeigt und nicht mehr. Um das ideale Szenario abzudecken, sollten Benutzer die Stadt-ID irgendwie kennen (z. B. sie möglicherweise als Dropdown-Liste verfügbar machen) und darauf basierend suchen, anstatt anhand ihres Namens zu suchen.

Ausgezeichnete Arbeit, Leute! Wir haben gerade unsere App erstellt. Lassen Sie uns einen Blick darauf werfen: 

Schlussfolgerung

Und wir sind fertig! Dies war wirklich eine ziemlich lange Reise, aber ich hoffe, dass es Ihnen gefallen hat und dass es dazu beigetragen hat, Ihre Front-End-Fähigkeiten zu verbessern.

Vergessen Sie nicht, Ihren eigenen Schlüssel für Live-App-Tests einzugeben!

Schauen wir uns zur Erinnerung noch einmal an, wie die App funktioniert:

Wie immer vielen Dank fürs Lesen!

Nächste Schritte

Es gibt so viele Dinge, die Sie tun können, um die Funktionalität dieser App zu erweitern. Hier sind einige Gedanken:

  • Verwenden Sie die Geolokalisierung, um den Standort des Benutzers zu ermitteln, und führen Sie dann eine AJAX-Anforderung zum Abrufen von Wetterdaten für die nächstgelegenen Städte aus.
  • Verwenden Sie localStorage, um die oben genannten Daten oder sogar eine Echtzeitdatenbank wie Firebase beizubehalten.
  • Verwenden Sie eine Diagrammbibliothek wie Highcharts.js, um ein Meteogramm zu erstellen, das eine Wettervorhersage liefert. In diesem Fall kann dieses Tutorial hilfreich sein.
  • Verwenden Sie eine Bild-API wie die Flickr-API, um als Galerie-Leuchtkasten eine Liste mit Fotos für jede Stadt anzuzeigen.

Wenn Sie noch etwas als App-Erweiterung sehen möchten, lassen Sie es mich in den Kommentaren unten wissen!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.