2.2: Wetterdaten abfragen

In dieser Aufgabe geht es darum, den Benutzer nach seiner Postleitzahl zu fragen und dann eine Wetter-API abzufragen, um die aktuelle Temperatur und die Wettervorhersage (optional) für diese Postleitzahl zu erhalten.

Teil: Benutzereingabe erhalten Frage den Benutzer mit einem passenden Formular nach einer schweizerischen Postleitzahl. Stelle sicher, dass die Eingabe gültig ist, d.h., dass nur Zahlen enthält und die richtige Anzahl an Ziffern hat.
Teil: API abfragen Füge das notwendige JavaScript hinzu, welches die Daten von der nachfolgend beschriebenen API bezieht.
- Die Funktion sollte einen GET-Request an die Wetter-API von Meteo Schweiz senden. Die URL lautet: https://app-prod-ws.meteoswiss-app.ch/v1/plzDetail?plz=818000, wobei die ersten 4-Zahlen der Postleitzahl entsprechen. Die URL für den Request sollte die gegebene Postleitzahl enthalten.
- Verarbeite die JSON-Antwort der API, um die aktuelle Temperatur und optional die Wettervorhersage zu extrahieren.
Teil: Ergebnisse ausgeben Gebe die aktuelle Temperatur, das zugehörige Datum und die Wettervorhersage (optional) für die vom Benutzer eingegebene Postleitzahl aus.
Teil (optional): Ordne die Postleitzahl einem Ort zu, indem du diese JSON-Daten verwendest: https://github.com/zauberware/postal-codes-json-xml-csv/blob/master/data/CH.zip

⚠️ Tipp: Benutze die fetch-Funktion um die API abzufragen. Verwende einen Dienst wie https://corsproxy.io/, um die CORS-Probleme zu umgehen.

Lösungsvorschlag

`App.tsx`

import { useEffect, useState } from 'react';
import './App.css'
import { WeatherDisplay } from './WeatherDisplay'
import { ZipInputForm } from './ZipInputForm'

function App() {

  const [zip, setZip] = useState<number>();
  const [temperature, setTemperature] = useState<number>();

  useEffect(() => {
    if(zip) {
      fetch(`https://corsproxy.io/?url=https://app-prod-ws.meteoswiss-app.ch/v1/plzDetail?plz=${zip}00`)
        .then(response => response.json())
        .then(data => {
          setTemperature(data.currentWeather.temperature)
        });
    }
  }, [zip]);

  return (
    <>
      <ZipInputForm setZip={setZip} />
      {zip
        && temperature
        && <WeatherDisplay zip={zip} temperature={temperature} />}
    </>
  )
}

export default App

`ZipInputForm.tsx`

import { FormEvent } from "react";

type Props = {
    setZip: (zip: number) => void;
}

export function ZipInputForm({ setZip }: Props) {
    const onSubmit = (e: FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const data = new FormData(e.currentTarget);
        const formZip = data.get("zip");
        if (typeof formZip === "string") {
            setZip(parseInt(formZip))
        }
    }

    return (
        <form onSubmit={onSubmit}>
            <input name="zip" placeholder="Your zip code" />
            <button type="submit">
                Get weather
            </button>
        </form>
    );
}

`WeatherDisplay.tsx`

type Props = {
    zip: number,
    temperature: number
};

export function WeatherDisplay({ zip, temperature }: Props) {
    return (
        <div>
            The current temperature in {zip} is {temperature}.
        </div>
    );
}