Przejdź do głównej zawartości
Codex13

07. Aplikacja pogodowa

Cel projektu

Dział zatytułowany „Cel projektu”

Zbudujesz aplikację pogodową wyświetlającą aktualną pogodę i prognozę dla wybranych miast. Dane będą pobierane z OpenWeatherMap API — jednego z najpopularniejszych darmowych API pogodowych.

Czego się nauczycie?

  • Integracja z prawdziwym, komercyjnym API (OpenWeatherMap)
  • Zarządzanie kluczami API w projektach Vite
  • Dynamiczne ikony i tła oparte na warunkach pogodowych
  • Lista ulubionych miast zapisana w localStorage
  • Praca zespołowa — jeden robi wyszukiwanie i bieżącą pogodę, drugi prognozę i ulubione

Co ma robić aplikacja?

Dział zatytułowany „Co ma robić aplikacja?”

Główne funkcjonalności

Dział zatytułowany „Główne funkcjonalności”

  1. Wyszukiwanie miasta — pole wyszukiwania, po Enter lub kliknięciu pobiera dane

  2. Aktualna pogoda — temperatura, odczuwalna, wilgotność, wiatr, opis, ikona

  3. Prognoza 5-dniowa — temperatura min/max i opis na kolejne dni

  4. Ulubione miasta — szybki dostęp do zapisanych lokalizacji

  5. Jednostki — przełącznik Celsius / Fahrenheit

Widoki aplikacji

Dział zatytułowany „Widoki aplikacji”

Widok główny

Wyszukiwarka + bieżąca pogoda dla wybranego miasta + prognoza 5-dniowa.

Ulubione miasta

Lista kart z bieżącą temperaturą dla każdego zapisanego miasta.

Dane z API

Dział zatytułowany „Dane z API”
{
  "name": "Warsaw",
  "main": {
    "temp": 15.3,
    "feels_like": 13.1,
    "humidity": 72,
    "pressure": 1013
  },
  "weather": [{ "description": "scattered clouds", "icon": "03d" }],
  "wind": { "speed": 4.2 },
  "sys": { "country": "PL" }
}

Warianty realizacji

Dział zatytułowany „Warianty realizacji”
  • Wyszukiwanie miasta i wyświetlenie bieżącej pogody
  • Temperatura, wilgotność, wiatr, opis
  • Ikona pogody z OpenWeatherMap
  • Obsługa błędów (miasto nie znalezione)
  • Routing: /, /city/:name
Ocena: 3.0

Wskazówki implementacyjne

Dział zatytułowany „Wskazówki implementacyjne”

Pobieranie pogody

Dział zatytułowany „Pobieranie pogody”
src/hooks/useWeather.js
const API_KEY = import.meta.env.VITE_WEATHER_API_KEY;
const BASE_URL = 'https://api.openweathermap.org/data/2.5';


function useWeather() {
  const [weather, setWeather] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);


  async function fetchWeather(city) {
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(
        `${BASE_URL}/weather?q=${city}&appid=${API_KEY}&units=metric&lang=pl`
      );
      if (!res.ok) throw new Error('Miasto nie znalezione');
      const data = await res.json();
      setWeather(data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }


  return { weather, loading, error, fetchWeather };
}

Geolokalizacja

Dział zatytułowany „Geolokalizacja”
function useGeolocation() {
  const [coords, setCoords] = useState(null);
  const [geoError, setGeoError] = useState(null);


  const getLocation = () => {
    if (!navigator.geolocation) {
      setGeoError('Geolokalizacja nie jest wspierana');
      return;
    }
    navigator.geolocation.getCurrentPosition(
      (pos) => setCoords({ lat: pos.coords.latitude, lon: pos.coords.longitude }),
      (err) => setGeoError(err.message)
    );
  };


  return { coords, geoError, getLocation };
}

Najczęstsze błędy

Dział zatytułowany „Najczęstsze błędy”

Zasoby

Dział zatytułowany „Zasoby”
OpenWeatherMap API Darmowe API pogodowe — 1000 żądań/dzień za darmo.
Geolocation API — MDN Pobieranie lokalizacji użytkownika.

Do dzieła!

Dział zatytułowany „Do dzieła!”

Powodzenia!

Aplikacja pogodowa to klasyczny projekt pokazujący integrację z API. Zarejestrujcie konto na OpenWeatherMap i pobierzcie darmowy klucz API — aktywacja zajmuje kilka minut. Zacznijcie od wariantu A z jednym miastem, a potem dodawajcie funkcje!