Mit Claude eine Wetteranzeige mit echten Daten bauen.
Claude schreibt die Oberfläche und den Datenabruf. Open-Meteo liefert die Vorhersage. Du verbindest beides zu einer kleinen Wetterseite und ergänzt eine Ortssuche.
Drei Lernstufen · in deinem Tempo · Stand: 10. Oktober 2026
Das kannst du danach
Du erzeugst ein Wetter-Dashboard mit echten API-Daten, testest Ortssuche und Fehlerfälle und bereitest eine nutzbare Fassung vor.
Das übernimmt die KI
Die KI programmiert die Anwendung. Die Wetterwerte kommen aus einer Wetter-API, nicht aus dem Gedächtnis des Sprachmodells.
Dein Werkzeug: Claude und Open-Meteo
Claude, ein Browser und Internet für den Datenabruf. Prüfe die Bedingungen von Open-Meteo für deinen Nutzungszweck und erhalte die erforderliche Datenattribution.
Werkzeug öffnen (neuer Tab) Open-Meteo: Wetter-API (neuer Tab)
Funktionen, Kontingente und Preise können sich ändern. Prüfe den Zugang direkt beim Anbieter.
Die Aufträge führst du im genannten Werkzeug aus. Die Klickübungen hier zeigen vorbereitete Beispiele und senden keine Daten an einen KI-Dienst.
KI-Funken
Dein erstes Ergebnis mit dem Werkzeug
Lass echte Vorhersagedaten anzeigen
Wir beginnen mit festen Koordinaten für Berlin. Ein funktionierender Abruf ist wichtiger als eine aufwendige Karte.
- Öffne die verlinkte API-Dokumentation und wähle Tageshöchst- und Tiefsttemperaturen mit passender Zeitzone.
- Sende den Auftrag an Claude und speichere die erzeugte Datei.
- Öffne sie im Browser. Falls lokale Dateiaufrufe blockiert werden, lass dir einen nur lokal erreichbaren Vorschau-Server einrichten.
Erstelle eine einzelne HTML-Datei für sieben Tage Wetter in Berlin. Lade echte Daten von https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.405&daily=temperature_2m_max,temperature_2m_min&timezone=Europe%2FBerlin&forecast_days=7 . Zeige Datum, Minimum, Maximum und °C. Ladezustand und Fehlerhinweis statt erfundener Ersatzwerte. Nenne Open-Meteo als Datenanbieter mit Link. Keine zusätzlichen Bibliotheken.
Darauf arbeitest du hin: Eine Wetterseite mit aktuellen Abrufdaten und klar beschrifteten Temperaturen.
Woher kommen die angezeigten Wetterwerte?
KI-Werkstatt
Gezielt verbessern und weiterarbeiten
Ergänze eine Ortssuche mit Fehlerfällen
Ein Ortsname ist nicht immer eindeutig. Die Anwendung soll Treffer zur Auswahl stellen, statt irgendeinen Ort zu nehmen.
- Lass die Geocoding-API von Open-Meteo anbinden.
- Teste einen mehrdeutigen Namen und einen erfundenen Ort.
- Prüfe Datum, Einheit und Koordinaten eines ausgewählten Treffers gegen die API-Antwort.
Ergänze eine Ortssuche über die offizielle Open-Meteo-Geocoding-API. Zeige mehrere Treffer mit Region und Land zur Auswahl. Fehlt results oder ist die Liste leer, zeige „Kein Ort gefunden“. Bei Abruffehlern verständliche Meldung und erneuter Versuch. Nutze die Koordinaten und Zeitzone des ausgewählten Orts.
Darauf arbeitest du hin: Eine Wetteranzeige, die Orte unterscheiden und leere Suchergebnisse erklären kann.
Was verändert die gezielte Korrektur?
Eine hübsche Wetterseite zeigt fest eingetragene Fantasiewerte.
Die Seite ruft die API ab und zeigt bei Ausfall einen erkennbaren Fehlerzustand.
Vorbereiteter Vergleich, keine Live-Ausgabe des Werkzeugs.
KI-Regie
Den Ablauf erweitern und selbst nutzen
Mach die Anzeige alltagstauglich
Ein gespeicherter Ort ist bequem. Ein fehlgeschlagener Abruf darf aber nicht wie eine neue Vorhersage aussehen.
- Lass den zuletzt gewählten Ort lokal speichern und eine Aktualisieren-Schaltfläche ergänzen.
- Teste ohne Netz: Alte Werte brauchen einen sichtbaren Stand oder werden durch einen Fehlerzustand ersetzt.
- Prüfe kleine Bildschirme und die Datenbedingungen, bevor du die Seite auf einem Hostingdienst veröffentlichst.
Ergänze den Zeitpunkt des letzten erfolgreichen Abrufs und eine Aktualisieren-Schaltfläche. Speichere nur den gewählten Ort im Browser. Wenn neue Daten nicht geladen werden, kennzeichne vorhandene Werte als alten Stand. Erhalte den Link zum Datenanbieter und teste die schmale Ansicht.
Darauf arbeitest du hin: Eine überprüfbare Wetterseite mit Standortwahl, Abrufstand und verständlichem Fehlerverhalten.
Eine Suche liefert kein results-Feld. Was soll passieren?
Was ist hängen geblieben?
Das Netz ist aus. Wie behandelst du alte Werte?
Dein eigener Versuch
Wende den Ablauf jetzt auf eine kleine eigene Aufgabe an. Prüfe das tatsächliche Ergebnis im Werkzeug anhand der Kriterien dieser Anleitung. Die vier Klickübungen bestätigen deinen Lernstand auf dieser Seite, nicht die erfolgreiche Ausführung im externen Dienst.
Weitere Übungen zum Thema programmieren