Erstellen einer Einzelseiten-Wetteranwendung in JavaScript

Einführung
Um Phase 1 des Software-Engineering-Lehrplans der Flatiron School endgültig abzuschließen, wurden wir beauftragt, eine einseitige Webanwendung zu erstellen, die nur HTML, CSS und JavaScript verwendet und eine öffentliche API integriert, die die Daten für unsere Webseite bereitstellen würde.

Für mein Projekt habe ich beschlossen, meine eigene Wetter-App mit dem Titel „Today's Weather Forecast“ zu erstellen. Auch wenn das Projekt selbst zugegebenermaßen etwas einfach war, hat es doch Spaß gemacht, sich der Herausforderung zu stellen. Das Ziel bestand darin, eine benutzerfreundliche, reaktionsfähige Anwendung zu entwickeln, die Wetteraktualisierungen in Echtzeit und eine detaillierte Vorhersage für jede Stadt der Welt bereitstellt.

Projektanforderungen
Das Projekt war mit mehreren Anforderungen verbunden, die jeweils grundlegende Konzepte und Lektionen stärkten, die in Phase 1 vermittelt wurden:

Die Anwendung muss vollständig auf einer einzigen Seite ausgeführt werden. Es sind keine Weiterleitungen oder Neuladungen zulässig und die Daten müssen von einer öffentlichen API oder einer db.json-Datei stammen.
Die API oder db.json-Datei muss mindestens fünf verschiedene Objekte zurückgeben, von denen jedes mindestens drei Attribute enthält.
Alle Client- und API-Interaktionen sollten asynchron abgewickelt werden, wobei JSON als Kommunikationsformat verwendet wird.
Das Projekt muss mindestens drei eindeutige Ereignis-Listener verwenden, die jeweils auf einen anderen Ereignistyp warten und mithilfe der Methode addEventListener() hinzugefügt werden. Jeder Ereignis-Listener muss über einen eigenen, eindeutigen Rückruf verfügen.
Die Anwendung muss mindestens eine Instanz der Array-Iteration implementieren.

Ich persönlich empfand die Implementierung auf der API als die größte Herausforderung, teilweise aufgrund meiner eigenen Unentschlossenheit, aber auch, weil mir das Konzept einfach am fremdartigsten vorkam. Nach einigem Nachforschen stellte ich jedoch fest, dass die API-Implementierung tatsächlich einer der einfacheren Aspekte dieses Projekts war.

Funktionen von „Heutige Wettervorhersage“:

Echtzeit-Wetteraktualisierungen
Wenn der Benutzer den Namen einer Stadt eingibt, gibt die Anwendung Echtzeit-Wetterdaten für diesen Ort zurück. Auf der Startseite werden die aktuelle Temperatur in Celsius, eine kurze Wetterbeschreibung und ein Symbol zur visuellen Darstellung der Vorhersage angezeigt.

3-Stunden-Vorhersage:
Die Anwendung bietet außerdem eine 24-Stunden-Vorhersage in 3-Stunden-Intervallen. In diesem Abschnitt wird dem Benutzer sowohl die aktuelle Tageszeit als auch die vorhergesagte Temperatur in Celsius angezeigt.

Dynamische Updates:
Alle Daten werden dynamisch abgerufen und angezeigt, ohne dass die Seite neu geladen werden muss, was ein nahtloses Benutzererlebnis gewährleistet.

Wie ich die Anforderungen erfüllt habe

1. Einzelseitige Bewerbung
   Diese Wetteranwendung funktioniert vollständig auf einer einzigen Seite. Wenn ein Benutzer nach einer Stadt sucht, ruft JavaScript die erforderlichen Daten ab, löscht den alten Inhalt und aktualisiert die Seite dynamisch mit den neuen Informationen – alles ohne Weiterleitungen oder Neuladen.

2. Fünf Objekte mit Attributen
   Folgende Objekte wurden implementiert:

1.) Stadtobjekt:
Attribute: Enthält Name, Breiten- und Längengrad.

2.) Wetterobjekt:
Attribute: Enthält Temperatur, Beschreibung und Symbol.

3.) Prognoseobjekt:
Attribute: Beinhaltet Zeit, Temperatur und Symbol.

4.) DateTime-Objekt:
Attribute: Enthält Datum, Uhrzeit und Tag.

5.) DOM-Elementobjekt:
Attribute: Enthält ID, Typ und Inhalt.

Jedes Objekt spielte eine Rolle bei der Strukturierung der Daten und der Gewährleistung der Modularität.

1. Asynchrone API-Verarbeitung
   Mithilfe der Abruf-API ruft die App Echtzeit-Wetter- und Vorhersagedaten von der OpenWeather-API ab. Alle Dateninteraktionen verwenden JSON und erfüllen so die Projektanforderungen.

2. Drei einzigartige Ereignis-Listener
   Die App enthält drei verschiedene Ereignis-Listener:

Klickereignis: Wenn Benutzer auf die Schaltfläche „Suchen“ klicken, werden Wetterdaten abgerufen.
Tastendruck-Ereignis: Wenn die „Enter“-Taste im Eingabefeld gedrückt wird, wird die gleiche Wetterabruffunktion ausgelöst.
Mouseover-Ereignis: Wenn der Benutzer mit der Maus über das Wettersymbol fährt, werden zusätzliche Informationen (z. B. „Daten bereitgestellt von OpenWeatherMap“) dynamisch angezeigt.

1. Array-Iteration Der Prognoseabschnitt verwendet die forEach-Methode, um dynamisch HTML-Elemente für jede 3-Stunden-Prognose zu erstellen.

Herausforderungen und Lösungen
Zu den Herausforderungen, denen ich während dieses Projekts begegnete, gehörte das Verständnis, wie asynchrone Vorgänge beim Abrufen von Daten von der OpenWeather-API gehandhabt werden, sowie das Verständnis der API selbst und ihrer Unterschiede zu einer db.json-Datei.
Die Gestaltung der App war eine weitere große Herausforderung für mich, da CSS eine Schwachstelle war, auf die ich mich eher nicht konzentriere, sondern mich stattdessen mit entmutigenderen und technischeren Konzepten beschäftige.
Mit zunehmender Übung kamen mir diese Konzepte jedoch nicht mehr so ​​monströs vor, und obwohl ich weiß, dass mein Code alles andere als perfekt ist, fühle ich mich nach der Bewältigung dieser Herausforderungen viel sicherer in meinen Fähigkeiten als Entwickler.

Fazit
Dieses Projekt hat nicht nur mein Verständnis von JavaScript gefestigt, sondern mir auch wertvolle Lektionen über Ausdauer, Problemlösung und die Bedeutung von sauberem, modularem Code beigebracht.

Ich hoffe, dass Ihnen die Erkundung der Anwendung genauso viel Spaß macht wie mir die Entwicklung. Teilen Sie uns gerne Ihr Feedback oder Ihre Verbesserungsvorschläge mit – ich würde gerne Ihre Meinung hören!

Wenn Sie sich den Quellcode für dieses Projekt ansehen möchten, können Sie in diesem Repository darauf zugreifen: https://github.com/CourtneyKerr19/Todays_Weather_Forecast

Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonErstellen einer Einzelseiten-Wetteranwendung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!