Wie kann ich eine API für meine Wetter-App erhalten?

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet
horsti98
10.05.2025, 20:06

Naja, kommt bisschen drauf an, was du möchtest. Der DWD bietet eine API für Warnungen und dann gibt es auch noch andere kostenlose Anbieter, z.B. https://open-meteo.com/

Die DWD API habe ich bereits genutzt und kann ich weiterempfehlen (trotz ein paar Macken), die andere habe ich noch nicht getestet
Erzesel
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Programmiersprache, Programmieren & Softwareentwicklung
11.05.2025, 10:00

Wieso willst Du eine API "bekommen"?

Solche APIs befinden sich auf Servern und Du schickst lediglich ein Anfrage mittels eins festgelegten Strings an den entsprechenden Server und bekommst hoffentlich eine Antwort.

Die Arbeit mit open-meteo.com ist nahezu ein Kinderspiel. Die nötigen Strings kann man sich theoretisch auf der Seite zusammenklicken.

Vor längerer Zeit hatte ich mal mit Open-Meteo und Powerschell experimentiert. (einfach, weil sich mit Powershell wunderbar "one the fly" xperimentieren lässt )

weather.ps1

$ProgressPreference = 'SilentlyContinue'    # Consolefortschrittsbalken   aus
#WMO weather interpretation code descriptions (& images)
#full description: https://www.nodc.noaa.gov/archive/arc0021/0002199/1.1/data/0-data/HTML/WMO-CODE/WMO4677.HTM
#https://github.com/roe-dl/weathericons?tab=readme-ov-file#wmo-symbole--wmo-symbols
#https://www.meteopool.org/en/encyclopedia-wmo-ww-wx-code-id2
#https://artefacts.ceda.ac.uk/badc_datadocs/surface/code.html    (Present weather (from manned (code 4677) and automatic (4680) stations))


#versuch eines "sparsamen" Definitionsobjects,  Nicht  alle  4677/4680-Codes   werden  von  OpenMeteo verwendet!
$WMODev_Json = '{
    "0":{
        "day":{
            "description":"Sunny",
            "image":"http://openweathermap.org/img/wn/01d@2x.png"
        },
        "night":{
            "description":"Clear",
            "image":"http://openweathermap.org/img/wn/01n@2x.png"
        }
    },
    "1":{
        "day":{
            "description":"Mainly Sunny",
            "image":"http://openweathermap.org/img/wn/01d@2x.png"
        },
        "night":{
            "description":"Mainly Clear",
            "image":"http://openweathermap.org/img/wn/01n@2x.png"
        }
    },
    "2":{
        "day":{
            "description":"Partly Cloudy",
            "image":"http://openweathermap.org/img/wn/02d@2x.png"
        },
        "night":{
            "description":"Partly Cloudy",
            "image":"http://openweathermap.org/img/wn/02n@2x.png"
        }
    },
    "3":{
        "day":{
            "description":"Cloudy",
            "image":"http://openweathermap.org/img/wn/03d@2x.png"
        },
        "night":{
            "description":"Cloudy",
            "image":"http://openweathermap.org/img/wn/03n@2x.png"
        }
    },
    "45":{
        "day":{
            "description":"Foggy",
            "image":"http://openweathermap.org/img/wn/50d@2x.png"
        },
        "night":{
            "description":"Foggy",
            "image":"http://openweathermap.org/img/wn/50n@2x.png"
        }
    },
    "48":{
        "day":{
            "description":"Rime Fog",
            "image":"http://openweathermap.org/img/wn/50d@2x.png"
        },
        "night":{
            "description":"Rime Fog",
            "image":"http://openweathermap.org/img/wn/50n@2x.png"
        }
    },
    "51":{
        "day":{
            "description":"Light Drizzle",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Light Drizzle",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "53":{
        "day":{
            "description":"Drizzle",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Drizzle",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "55":{
        "day":{
            "description":"Heavy Drizzle",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Heavy Drizzle",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "56":{
        "day":{
            "description":"Light Freezing Drizzle",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Light Freezing Drizzle",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "57":{
        "day":{
            "description":"Freezing Drizzle",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Freezing Drizzle",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "61":{
        "day":{
            "description":"Light Rain",
            "image":"http://openweathermap.org/img/wn/10d@2x.png"
        },
        "night":{
            "description":"Light Rain",
            "image":"http://openweathermap.org/img/wn/10n@2x.png"
        }
    },
    "63":{
        "day":{
            "description":"Rain",
            "image":"http://openweathermap.org/img/wn/10d@2x.png"
        },
        "night":{
            "description":"Rain",
            "image":"http://openweathermap.org/img/wn/10n@2x.png"
        }
    },
    "65":{
        "day":{
            "description":"Heavy Rain",
            "image":"http://openweathermap.org/img/wn/10d@2x.png"
        },
        "night":{
            "description":"Heavy Rain",
            "image":"http://openweathermap.org/img/wn/10n@2x.png"
        }
    },
    "66":{
        "day":{
            "description":"Light Freezing Rain",
            "image":"http://openweathermap.org/img/wn/10d@2x.png"
        },
        "night":{
            "description":"Light Freezing Rain",
            "image":"http://openweathermap.org/img/wn/10n@2x.png"
        }
    },
    "67":{
        "day":{
            "description":"Freezing Rain",
            "image":"http://openweathermap.org/img/wn/10d@2x.png"
        },
        "night":{
            "description":"Freezing Rain",
            "image":"http://openweathermap.org/img/wn/10n@2x.png"
        }
    },
    "71":{
        "day":{
            "description":"Light Snow",
            "image":"http://openweathermap.org/img/wn/13d@2x.png"
        },
        "night":{
            "description":"Light Snow",
            "image":"http://openweathermap.org/img/wn/13n@2x.png"
        }
    },
    "73":{
        "day":{
            "description":"Snow",
            "image":"http://openweathermap.org/img/wn/13d@2x.png"
        },
        "night":{
            "description":"Snow",
            "image":"http://openweathermap.org/img/wn/13n@2x.png"
        }
    },
    "75":{
        "day":{
            "description":"Heavy Snow",
            "image":"http://openweathermap.org/img/wn/13d@2x.png"
        },
        "night":{
            "description":"Heavy Snow",
            "image":"http://openweathermap.org/img/wn/13n@2x.png"
        }
    },
    "77":{
        "day":{
            "description":"Snow Grains",
            "image":"http://openweathermap.org/img/wn/13d@2x.png"
        },
        "night":{
            "description":"Snow Grains",
            "image":"http://openweathermap.org/img/wn/13n@2x.png"
        }
    },
    "80":{
        "day":{
            "description":"Light Showers",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Light Showers",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "81":{
        "day":{
            "description":"Showers",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Showers",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "82":{
        "day":{
            "description":"Heavy Showers",
            "image":"http://openweathermap.org/img/wn/09d@2x.png"
        },
        "night":{
            "description":"Heavy Showers",
            "image":"http://openweathermap.org/img/wn/09n@2x.png"
        }
    },
    "85":{
        "day":{
            "description":"Light Snow Showers",
            "image":"http://openweathermap.org/img/wn/13d@2x.png"
        },
        "night":{
            "description":"Light Snow Showers",
            "image":"http://openweathermap.org/img/wn/13n@2x.png"
        }
    },
    "86":{
        "day":{
            "description":"Snow Showers",
            "image":"http://openweathermap.org/img/wn/13d@2x.png"
        },
        "night":{
            "description":"Snow Showers",
            "image":"http://openweathermap.org/img/wn/13n@2x.png"
        }
    },
    "95":{
        "day":{
            "description":"Thunderstorm",
            "image":"http://openweathermap.org/img/wn/11d@2x.png"
        },
        "night":{
            "description":"Thunderstorm",
            "image":"http://openweathermap.org/img/wn/11n@2x.png"
        }
    },
    "96":{
        "day":{
            "description":"Light Thunderstorms With Hail",
            "image":"http://openweathermap.org/img/wn/11d@2x.png"
        },
        "night":{
            "description":"Light Thunderstorms With Hail",
            "image":"http://openweathermap.org/img/wn/11n@2x.png"
        }
    },
    "99":{
        "day":{
            "description":"Thunderstorm With Hail",
            "image":"http://openweathermap.org/img/wn/11d@2x.png"
        },
        "night":{
            "description":"Thunderstorm With Hail",
            "image":"http://openweathermap.org/img/wn/11n@2x.png"
        }
    }
}'
$WMODev_Object = $WMODev_Json|ConvertFrom-Json


#openMeteo arbeitet mit Geokoordinaten, ergo Länge und Breite  für  einen Orts/Adresse abfragen
#Geokoordinaten für  einen  Ort ermitteln
#Was  immer  an Adressdaten verfügbar  ist
$SearchStrings = @(
    'Leipzig'
    'Zentrum'
    'Petersbogen'
)


$queryStrings = $SearchStrings|%{[uri]::EscapeDataString($_)}
$Query = $queryStrings -join '+'
Write-Host " Coords - QueryString: $Query" -fo  green


#geodaten  für "Adresse"  abfragen (kann  mehrere Ergebnisse  liefern), deshalb als Array of Objects  behandeln
$GeoCoords = @()
$GeoCoords += ( Invoke-WebRequest "https://nominatim.openstreetmap.org/search?q=$Query&format=json&addressdetails=0").content | ConvertFrom-Json 
$GeoCoords #mal anshauen


#https://open-meteo.com/
#querystring  für Wetterapi basteln 
#$GeoCoords[0] ist hier  stumpf der erstbeste  Eintrag
$WeatherQuery=@(
    'latitude={0}'-f $GeoCoords[0].lat
    'longitude={0}'-f $GeoCoords[0].lon
    'current=temperature_2m,relative_humidity_2m,precipitation,rain,showers,snowfall,weather_code,cloud_cover,wind_speed_10m,wind_direction_10m'
    'hourly=temperature_2m,relative_humidity_2m,weather_code'
    #'models = icon'  #"icon" = nur Deuschland (DWD)  ,ohne Angabe des Wettermodels werden  automatisch die  zutreffensten  werte  verwendet!
)-join '&'
Write-Host "OpenMeteo - QueryString: $WeatherQuery" -fo  yellow
#Wetterdaten  für  ermittelten Geo-Tag abrufen
$html = Invoke-WebRequest "https://api.open-meteo.com/v1/forecast?$WeatherQuery"

$Weatherobject = $html.Content|ConvertFrom-Json
#$Weatherobject  #mal  angucken
Write-Host "aktuelles Wetter:" -fo green
$Weatherobject.Current
#$Weatherobject.hourly
Write-Host "7 Tage Wetter" -fo green
#die Wetterdaten  werden  als mehrere flache Arrays geliefer!
#in zu Objekten bündeln...
$Weatherobject.hourly.time|%{$cnt=0}{
    $WeatherCode = $Weatherobject.hourly.weather_code[$cnt]
    $LocalTime=(get-date $_).ToLocalTime()
    $CurrentHour = $LocalTime.Hour
    #Tag/Nacht: einfach 6..18 Uhr = Tag, sonst Nacht
    if ($CurrentHour -gt 5 -and $CurrentHour -lt 18) {
        $DayNight = 'day'
    } else {
        $DayNight = 'night'
    }
    [PSCustomObject]@{
        GMT_DateTime = $_
        Local_DateTime =$LocalTime
        Temperature_2m = $Weatherobject.hourly.temperature_2m[$cnt]
        RelativeHumidity_2m = $Weatherobject.hourly.relative_humidity_2m[$cnt]
        WeatherCode = $WeatherCode
        WeatherDescription = $WMODev_Object.$WeatherCode.$DayNight.Description
    }
    $cnt++
}|ft *
pause

In Html/JavaScript ist die Handhabung ähnlich.

Die Anfrage erfolgt hier Clientseitig via XMLHtmlRequest(). Diese Funktion entspricht weitgehend der curl (Invoke-WebRequest)-Anfrage via Powershell. (allerdings funktioniert dies nicht in jedem Browser reibungslos. je nach Sichaerheitseinstellungen werden derartige XMLHtmlRequests als potentielle Gefahr eingestuft, da auf diese Weise auch SchadCode nachgeladen werden könnte.)

Das folgende kleine Html habe ich lediglich aus der Hüfte schnell zusammengefrickelt. Ich erspare mir in dieser kleinen Demo das ermitteln der Geodaten für eine Adresse und verwende stattdessen einfach die ungefähren Goetags (Länge/Breite) direkt. Ebenso verzichte ich auf die Auflösung der Daten des aus dem gelieferten Objekts.

Demo.html

<!DOCTYPE html>
<html>
<body>
<h2>Clienteitiger Zugriff auf (Fremd)Datenquellen via XMLHttpRequest object</h2>


<h3>Erhaltene RAWdaten:</h3>
die Geodaten interessieren Hier nicht
<p id="demo"></p>


<script>
//Beispiel Länge und  breite  für Leipzig
lat=51.34
long=12.35
positionQuery='latitude='+ lat + '&' + 'longitude=' + long
//festlegen  was  wir über das aktuelle  wetter   wissen  wollen
currentWeatherQuery='current=temperature_2m,relative_humidity_2m,precipitation,rain,showers,snowfall,weather_code,cloud_cover,wind_speed_10m,wind_direction_10m' 
//festlegen  was  wir über das zukünftige wetter (sündlich  für  7) wissen  wollen
hourlyForecast='hourly=temperature_2m,relative_humidity_2m,weather_code'


// alles  bisher  festgelegte zu  enen String  zusammenfassen 
APIQuery=positionQuery + '&' + currentWeatherQuery + '&' + hourlyForecast

uri='https://api.open-meteo.com/v1/forecast?' + APIQuery

xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",uri,true); 
xmlhttp.send();               //Anfrage  abschicken
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  //wenn Daten Erfogreich  empfangen...
  {  //Achtung , dies  ist eine Callbackfunktion. 
     //Alle Zugriffe auf deren Daten können erst erfolgen, wenn die Antwort da ist.
     //(also also am sichersten innerhalb dieser definierten CallbackFunktion)
    myJsonStr=xmlhttp.responseText;
    document.getElementById("demo").innerHTML=myJsonStr; //JsonString anzeigen
    myWeatherObj=JSON.parse(myJsonStr);  //mach aus dem empfangenen text ein Object
    //die Auflösung der Objektfelder in  einzelne Variablen erspare  ich  mir an dieser Stelle
  }
}

</script>
</body>
</html>
Bevor sich eingefleischte Html/JavaScript Programmierer über das fehlen von "let" und anderen modernen Syntax-Elementen mockieren, möchte ich Anmerken, dass ich schon seit Jahren nicht mehr ernsthaft in diesen Sprachen programmiert habe.

...also seit bitte Nachsichtig... es funktioniert so... und für mehr habe ich gegenwärtig keine Muse... (wem die uraltsyntax nicht gefällt, darf gern eine korrekte Version in die Kommentare Posten