Zusatz 2: Dynamische Datenabfrage vom Server

Aufgabe 1

Das folgende Arbeitsblatt enthält Aufgaben zur Erstellung einer eigenen Wetter-App.

BrückenkursJS9.pdf
weather_app.html

Hinweis 1: Verwenden Sie die Netzwerkkonsole zum Untersuchen der Serverantwort! Wählen Sie dort den Bereich “Preview” (das ist eine bessere Ansicht als bei “Response”).

Hinweis 2: Das Arbeitsblatt stammt von 2015. Mittlerweile wird ein API-Key benötigt, um GET-Anfragen an openweathermap stellen zu können. Wenn Sie sich bei openweathermap registrieren, können Sie sich gern selbst eine solche ID besorgen. Ansonsten verwenden Sie einfach meine ID:

a5be275a1cefc9346763e2be0647af12

Die ID muss bei jeder Anfrage als zusätzlicher Parameter “appid” mitgesendet werden. Sie können z.B. folgende Anfrage in die Adresszeile des Browsers kopieren:

api.openweathermap.org/data/2.5/weather?q=Goerlitz&appid=a5be275a1cefc9346763e2be0647af12

 

Aufgabe 2

Gestalten Sie für jede der folgenden APIs eine HTML-Seite, in der die API genutzt wird. Überlegen Sie sich jeweils eine geeignete Interaktion mit Buttons und / oder Input-Elementen. Verwenden Sie CSS, um die Seiten ansprechend zu formatieren.
 

API 1: NASA APOD (Astronomy Picture of the Day)

Diese API liefert jeden Tag ein interessantes NASA-Bild mit einer Beschreibung.

Dokumentation: https://api.nasa.gov#apod

Beispiel für eine GET-Anfrage: https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY

Hinweis: Sie sollten sich hier einen eigenen API-Schlüssel (API Key) holen und ihn anstelle von DEMO_KEY einsetzen: https://api.nasa.gov/index.html#apply-for-an-api-key

Sie könnten eine HTML-Seite erstellen, die das “Bild des Tages” und die Beschreibung anzeigt. Außerdem könnte die Seite einen DatePicker enthalten, mit dem der Nutzer ein beliebiges Datum aus der Vergangenheit auswählen kann. Anschließend sollte das “Bild des Tages” für das gewählte Datum angezeigt werden.

Informationen zum DatePicker: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

 

API 2: NASA Mars Rover Photos

Diese API stellt alle Fotos des Mars-Rovers “Curiosity” für einen Tag bereit:

https://api.nasa.gov (Wählen Sie “Browse APIs” –> “Mars Rover Photos”)

Erstellen Sie eine HTML-Seite, die ein Inputfeld enthält (type=”date”). Dort kann der Nutzer ein Datum auswählen.

Fügen Sie in die HTML-Seite auch ein “select”-Element ein (also ein Dropdown-Menü), mit dem der Nutzer die Kamera des Mars-Rovers (FHAZ, RHAZ, …) auswählen kann.

Für den ausgewählten Tag und die ausgewählte Kamera sollen einige Marsfotos auf der Webseite angezeigt werden. Verwenden Sie ein Grid-Layout.

Informationen zum select-Tag: https://www.w3schools.com/tags/tag_select.asp

 

API 3: GIPHY

Giphy.com ist eine beliebte GIF-Suchmaschine.

Die Gifs von Giphy können in eine eigene HTML-Seite eingebunden werden. Dazu steht eine JSON-API bereit.

Dokumentation: https://developers.giphy.com/docs/api#quick-start-guide

Sie könnten eine HTML-Seite erstellen, die ein Inputfeld enthält (type=”text”). Dort kann der Nutzer Suchbegriffe eintragen (z.B. “funny cats”). Anschließend sollte eine GET-Anfrage an den Server gestellt werden, um Gifs herunterzuladen und in der HTML-Seite anzuzeigen.
 

Aufgabe 3 – Komplexaufgabe

Entwickeln Sie eine interaktive Wetter-App für Smartphones! Sie können auf den Lösungen von Aufgabe 1 aufbauen.

Die App soll eine ansprechende grafische Gestaltung durch CSS erhalten. Dafür gibt es keine konkreten Vorgaben. Sie können sich bei Google inspirieren lassen (Bildersuche nach “weather app”):

https://www.google.de/search?q=weather+app&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiP6YnNiMHbAhXEJMAKHa5BCQEQ_AUICigB

Anforderungen

Die App ist für kleine Bildschirmgrößen optimiert. Sie können das testen, indem Sie das Browserfenster auf die minimale Breite skalieren. Verwenden Sie das meta-Tag “viewport”!

Oberer Seitenbereich:

Hier sollen das aktuelle Datum und der Ort angezeigt werden. Der Ort muss vom Nutzer geändert werden können.

Mittlerer Seitenbereich:

Hier sollen detaillierte Wetterdaten für den Ort am aktuellen Datum angezeigt werden, d.h. aktuelle Temperatur, Luftfeuchtigkeit (in Prozent), Bewölkung (in Prozent), Windgeschwindigkeit, Windrichtung.

Die aktuelle Temperatur soll dabei besonders hervorgehoben werden (z.B. große Schrift, zentriert).

Die Windrichtung wird von openweathermap in Grad (degree) geliefert. Die App soll die Richtung aber als Abkürzung anzeigen. So soll z.B. bei einer Windrichtung zwischen 90° und 112.5° die Abkürzung „E“ angezeigt werden (East = Ost). Programmieren Sie dazu eine Hilfs-Funktion „umrechnenRichtung“, die eine Gradzahl als Parameter entgegennimmt und die passende Abkürzung zurückgibt (mit return). Bei der Programmierung dieser Funktion können Sie sich an der Tabelle im Anhang orientieren. Sie können sich auf folgende Windrichtungen beschränken: N, NE, E, SE, S, SW, W, NW

In der Antwort von openweathermap.org ist unter „weather.icon“ die ID zu einem Bild enthalten, welches das aktuelle Wetter grafisch veranschaulicht (siehe http://openweathermap.org/current) . Auf der Seite http://openweathermap.org/weather-conditions erhalten Sie im Abschnitt „How to get Icon URL“ Informationen über diese Bilder. Das passende Bild soll in der App angezeigt werden.

Unterer Seitenbereich:

Hier wird die Wettervorhersage für die nächsten 4 Tage aufgelistet (http://openweathermap.org/forecast16).

Für jeden der 4 Tage wird angezeigt:

o Wochentag (MO, DI, MI, DO, FR, SA, SO)
o das passende Bild (icon)
o Tagestemperatur
o Nachttemperatur

Programmieren Sie eine Hilfsfunktion „umrechnenWochentag“, die das von openweathermap gelieferte Datum als Parameter entgegennimmt und die Abkürzung des Wochentages zurückgibt (mit return). Hilfestellung: http://www.w3schools.com/jsref/jsref_getday.asp

Anforderungen an das CSS-Styling

o ein Hintergrundbild: ein eigenes Foto oder ein frei verwendbares Bild mit der Lizenz “public domain”, z.B. von pixabay.com – eventuell benötigen Sie für das Bild die CSS-Eigenschaft “opacity”: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity

o Verwendung eines Layout-Systems wie z.B. flexbox oder Grid

Zusatzaufgaben

Führen Sie mindestens eine der folgenden Zusatzaufgaben aus!

Zusatzaufgabe 1

Damit der Nutzer beim Öffnen der App nicht jedesmal den Ort neu eingeben muss, können wir ihn vom Browser abspeichern lassen. Informieren Sie sich dazu über den „HTML5 local Storage“:
http://www.w3schools.com/html/html5_webstorage.asp

Verwenden Sie den local Storage, um den vom Nutzer eingegebenen Ort dauerhaft abzuspeichern! Wenn der Nutzer den Ort ändert, muss natürlich der neue Ort abgespeichert werden.

Hinweis: Im Chrome-Browser können Sie den Inhalt des local Storage in den Entwicklertools sehen: F12 drücken und dann den Bereich “Application” wählen.

Zusatzaufgabe 2

Das Hintergrundbild soll abhängig von der Temperatur ausgetauscht werden. Beispiel:

  • bei Temperaturen unter 0 wird eine Winterlandschaft gezeigt
  • bei Temperaturen zwischen 0 und 20 Grad Celsius wird eine Herbst- oder Frühlingslandschaft gezeigt (eventuell abhängig vom aktuellen Datum)
  • ab 20 Grad Celsius wird eine Sommerlandschaft gezeigt

 
Anhang Windrichtungen:
windrichtungen


Comments are closed.