Zadania na lekcje

Pogodynka IMGW - Fetch API

Javascript
Priorytet: Normalny Szkic

Zadanie 350: Pogodynka IMGW - Fetch API

Wstęp

W dzisiejszym internecie rzadko kiedy aplikacje działają w całkowitej izolacji. Większość nowoczesnych stron internetowych pobiera dane z zewnętrznych serwerów (API) – mogą to być listy produktów w sklepie, posty w mediach społecznościowych czy, tak jak w naszym przypadku, aktualne dane pogodowe.

W tym zadaniu nauczysz się, jak korzystać z mechanizmu fetch() w JavaScript, aby pobrać dane z oficjalnego serwisu IMGW (Instytut Meteorologii i Gospodarki Wodnej).

Czym jest API i JSON?

  • API (Application Programming Interface): To "okienko", przez które Twoja aplikacja może rozmawiać z innym systemem.
  • JSON (JavaScript Object Notation): To najpopularniejszy format przesyłania danych. Wygląda prawie identycznie jak obiekty w JavaScript, co sprawia, że praca z nim jest niezwykle prosta.

Jak pobrać dane (Fetch API)?

Aby pobrać dane z adresu URL, używamy funkcji fetch(). Jest ona asynchroniczna, co oznacza, że program nie "zamraża się" w oczekiwaniu na odpowiedź, lecz kontynuuje działanie, a wynik obsłuży, gdy ten nadejdzie.

Oto podstawowy schemat pobierania danych z IMGW:

const URL = 'https://danepubliczne.imgw.pl/api/data/synop';

async function pobierzPogode() {
    try {
        // 1. Wysyłamy zapytanie
        const odpowiedz = await fetch(URL);
        
        // 2. Zamieniamy surową odpowiedź na obiekt JSON
        const dane = await odpowiedz.json();
        
        // 3. Wyświetlamy dane w konsoli, aby zobaczyć ich strukturę
        console.log(dane);
        
        // Tutaj możesz zacząć przetwarzać tablicę 'dane'
        // Każdy element to obiekt z polami takimi jak: stacja, temperatura, cisnienie, predkosc_wiatru
    } catch (blad) {
        console.error("Wystąpił błąd podczas pobierania danych:", blad);
    }
}

pobierzPogode();

Jak wyświetlić dane na stronie?

Mając dane w formie tablicy obiektów, możesz użyć metod takich jak .find() (aby znaleźć konkretne miasto) lub .forEach() (aby wyświetlić listę wszystkich stacji). Następnie wystarczy zmodyfikować zawartość elementu HTML (np. używając innerText lub innerHTML).

Zadania do wykonania (Wykaż się samodzielnością!)

Twoim zadaniem jest stworzenie prostej, ale estetycznej strony "Pogodynka".

  1. Wybór Miasta/Regionu: Przygotuj pole tekstowe (<input>) lub listę rozwijaną (<select>), w której użytkownik będzie mógł wpisać lub wybrać nazwę stacji (np. "Warszawa", "Bielsko-Biała", "Kraków").
  2. Pobieranie na żądanie: Dane powinny zostać pobrane i przefiltrowane po kliknięciu przycisku "Sprawdź pogodę" lub po zmianie wyboru w liście.
  3. Prezentacja wyników: Wyświetl na stronie co najmniej:
    • Nazwę stacji
    • Aktualną temperaturę (z dopiskiem °C)
    • Godzinę pomiaru
    • Dodatkowy parametr (np. wilgotność lub ciśnienie)
  4. Obsługa błędów: Jeśli użytkownik wpisze nazwę miasta, której nie ma w danych z IMGW, wyświetl przyjazny komunikat, np. "Nie znaleziono stacji o podanej nazwie".
  5. Stylizacja (CSS): Spraw, aby strona wyglądała nowocześnie. Użyj ciekawych kolorów (może zmieniających się w zależności od temperatury?), zaokrąglonych rogów i czytelnych czcionek.

[!TIP] Dokumentację API IMGW oraz listę dostępnych stacji znajdziesz pod adresem: https://danepubliczne.imgw.pl/pl/apiinfo