Jak zbudować aplikację pogodową z Claude AI - od zera do działającej aplikacji w 30 minut

Otwórz Claude. Poważnie - zrób to teraz. Otwórz drugą kartę, zaloguj się (darmowe konto wystarczy) i wróć tutaj.

Gotowe?

Za 30 minut będziesz mieć działającą aplikację pogodową. Z ciemnym motywem, prognozą 5-dniową, geolokalizacją i animacjami. Jeden plik HTML. Zero instalowania czegokolwiek. Zero doświadczenia z kodem.

Jedyne, co potrzebujesz: przeglądarkę, edytor tekstu (Notatnik wystarczy) i darmowy klucz API z OpenWeatherMap. Resztę zrobi Claude.

To nie jest artykuł o tym, jak działa programowanie. To jest artykuł o tym, jak współpracować z AI, żeby zbudować coś realnego. Każdy krok ma gotowy prompt - kopiujesz, wklejasz, dostajesz kod.

Zaczynamy.

---

W liczbach: 5 kroków | 5 promptów CRISP | 1 plik HTML | 0 instalacji | ~30 minut do działającej aplikacji

---

Co zbudujemy

Funkcja	Krok
Wyszukiwanie pogody po mieście	#1
Aktualna temperatura, wilgotność, wiatr, ciśnienie	#1
Ciemny motyw z glassmorphism i animacjami	#2
Prognoza 5-dniowa (min/max, ikony)	#3
Automatyczne wykrywanie lokalizacji	#4
Obsługa błędów po polsku	#5

Stack: Jeden plik HTML (z CSS i JavaScript w środku). Otwierasz w przeglądarce - działa.

Zobacz gotową aplikację - efekt końcowy, który zbudujesz w tym tutorialu.

---

Krok 0: Przygotowanie - klucz API (5 minut)

Zanim zaczniemy budować, potrzebujesz jednej rzeczy: klucza API z OpenWeatherMap. To darmowe i nie wymaga karty kredytowej.

Co to jest API i klucz API?

API (Application Programming Interface) to sposób, w jaki programy rozmawiają ze sobą. Twoja aplikacja pyta OpenWeatherMap: "Jaka jest pogoda w Krakowie?", a serwer odpowiada danymi w formacie JSON. Klucz API to Twój identyfikator - OpenWeatherMap musi wiedzieć, kto pyta (żeby nikt nie przeciążył ich serwerów).

Jak zdobyć klucz:

1. Wejdź na openweathermap.org
2. Kliknij "Sign Up" - załóż darmowe konto (email + hasło)
3. Po zalogowaniu wejdź w API keys (menu górne → Twój profil)
4. Skopiuj klucz "Default" - to ciąg znaków typu a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6
5. Zapisz go gdzieś - będzie potrzebny w następnym kroku

Ważne: Nowy klucz API zaczyna działać po 10-30 minutach od założenia konta. Jeśli dostaniesz błąd "Invalid API key" - poczekaj i spróbuj ponownie. Darmowy plan daje 1000 zapytań dziennie - do nauki i osobistego użytku to więcej niż wystarczy.

Przygotuj plik

Utwórz nowy plik tekstowy i nazwij go pogoda.html. Możesz użyć dowolnego edytora - Notatnik, VS Code, Sublime Text, cokolwiek. To będzie jedyny plik, z którym pracujemy.

---

Krok 1: Fundament - aktualna pogoda (Prompt #1)

Zaczynamy od rdzenia aplikacji: formularz do wpisania miasta i wyświetlanie aktualnej pogody.

Dlaczego ten prompt działa

Ten prompt używa formatu CRISP - mojego autorskiego frameworku promptowania:

Element	Co robi	W tym prompcie
Context	Daje AI kontekst projektu	Jeden plik HTML, API OpenWeatherMap
Role	Definiuje rolę AI	Frontend developer, czysty JS
Intent	Precyzuje cel	Formularz + wyświetlanie pogody
Scope	Ogranicza zakres	Ciemny motyw, responsywny, po polsku
Precision	Format odpowiedzi	Pełny plik, komentarze po polsku

Pełne wyjaśnienie metody: Inżynieria promptów - Framework CRISP

Prompt do skopiowania

Otwórz Claude i wklej:

<context>
Buduję prostą aplikację pogodową w jednym pliku HTML
(z CSS i JavaScript w środku). Używam darmowego API
OpenWeatherMap (endpoint: api.openweathermap.org/data/2.5/weather).
Mój klucz API: [WKLEJ_SWOJ_KLUCZ]. Aplikacja ma działać
po otwarciu pliku .html w przeglądarce - zero serwera,
zero instalacji.
</context>

<role>
Jesteś doświadczonym frontend developerem specjalizującym
się w czystym HTML/CSS/JavaScript bez frameworków.
</role>

<intent>
Stwórz kompletny plik HTML z aplikacją pogodową, która:
1. Ma formularz do wpisania nazwy miasta
2. Po wciśnięciu Enter lub kliknięciu przycisku pobiera
   dane pogodowe z OpenWeatherMap API
3. Wyświetla: nazwę miasta, temperaturę (°C), opis pogody
   po polsku, wilgotność (%), prędkość wiatru (m/s),
   ciśnienie (hPa) i ikonę pogody z API
4. Używa jednostek metrycznych (lang=pl, units=metric)
</intent>

<scope>
- Jeden plik HTML - wszystko w środku (style, skrypt)
- Ciemny motyw (tło #1a1a2e, tekst #e0e0e0, akcent #00d4ff)
- Polski interfejs (przyciski, etykiety, komunikaty)
- Responsywny - ma wyglądać dobrze na telefonie i desktopie
- Komentarze w kodzie po polsku - wyjaśniające co robi
  każda sekcja
</scope>

<precision>
Zwróć KOMPLETNY plik HTML gotowy do zapisania i otwarcia
w przeglądarce. Kod ma być czytelny i dobrze skomentowany.
Nie pomijaj żadnej części - pełna implementacja.
</precision>

Co dostaniesz

Claude wygeneruje plik HTML z formularzem wyszukiwania i wyświetlaniem pogody. Skopiuj cały kod, wklej do pliku pogoda.html, zapisz i otwórz w przeglądarce.

Weryfikacja

Sprawdź te rzeczy:

• Formularz się wyświetla
• Po wpisaniu "Warszawa" i wciśnięciu Enter pojawia się pogoda
• Temperatura jest w stopniach Celsjusza
• Ikona pogody się ładuje

Jeśli coś nie działa - najczęstsze przyczyny:

• "Invalid API key" - klucz API jeszcze się nie aktywował (poczekaj 10-30 minut)
• Nic się nie dzieje po kliknięciu - sprawdź konsolę przeglądarki (F12 → Console) - Claude pomoże naprawić błąd
• Dziwne znaki zamiast polskich liter - upewnij się, że plik jest zapisany w kodowaniu UTF-8

---

Krok 2: Styl i UX - ciemny motyw (Prompt #2)

Masz działający fundament. Teraz zróbmy z niego coś, co wygląda profesjonalnie.

Prompt do skopiowania

Wklej do Claude (w tej samej rozmowie - Claude pamięta kontekst):

<context>
Mam działającą aplikację pogodową w jednym pliku HTML.
Chcę ulepszyć jej wygląd i doświadczenie użytkownika.
</context>

<role>
Jesteś UI/UX designerem z doświadczeniem w tworzeniu
nowoczesnych, ciemnych interfejsów webowych.
</role>

<intent>
Przeprojektuj wygląd mojej aplikacji pogodowej:
1. Ciemny motyw z subtelnymi gradientami
   (baza: #0f0f23, karty: #1a1a3e, akcent: #00d4ff)
2. Karty z efektem glassmorphism (półprzezroczyste tło,
   rozmycie, subtelny border)
3. Animacja ładowania (spinner lub pulsujący tekst)
   widoczna podczas pobierania danych
4. Duża ikona pogody z OpenWeatherMap (rozmiar 4x: @4x)
5. Temperatura jako główny element - duża czcionka,
   wycentrowana
6. Pozostałe dane (wilgotność, wiatr, ciśnienie)
   w mniejszych kartach poniżej
7. Efekt hover na przycisku wyszukiwania
8. Płynne animacje pojawiania się wyników (CSS transitions)
</intent>

<scope>
- Nadal jeden plik HTML - zaktualizuj istniejący
- Font: system-ui (bez zewnętrznych czcionek)
- Responsywny: na telefonie karty układają się
  pionowo, na desktopie w siatce
- Dodaj stan ładowania i stan pustego ekranu
  ("Wpisz nazwę miasta, aby sprawdzić pogodę")
</scope>

<precision>
Zwróć KOMPLETNY, zaktualizowany plik HTML. Nie zwracaj
fragmentów - pełny plik gotowy do zapisania.
Zachowaj całą istniejącą funkcjonalność.
</precision>

Co się zmieni

Aplikacja powinna teraz wyglądać profesjonalnie - ciemne tło, karty z efektem szkła, animacje. Jeśli Claude zaproponuje inny schemat kolorów niż podany - to normalne. Możesz go skorygować:

"Zmień kolory na dokładnie te, które podałem: tło #0f0f23, karty #1a1a3e z opacity 0.7, akcent #00d4ff. Przyciski też w kolorze akcentu."

To jest sedno pracy z AI - iteracja. Pierwszy wynik rzadko jest idealny. Ale każda poprawka to jedno zdanie, nie godzina kodowania.

Wskazówka: Nie zamykaj rozmowy z Claude między krokami. Pracuj w jednej sesji - Claude pamięta kontekst i każdy kolejny prompt buduje na poprzednim kodzie.

---

Krok 3: Prognoza 5-dniowa (Prompt #3)

Aktualna pogoda to za mało. Dodajmy prognozę na 5 dni.

Nowy endpoint API

OpenWeatherMap ma osobny endpoint do prognozy: api.openweathermap.org/data/2.5/forecast. Zwraca prognozę co 3 godziny na 5 dni (40 punktów danych). Nasz prompt każe Claude wybrać dane na godzinę 12:00 każdego dnia - to daje nam 5 prognoz dziennych.

Prompt do skopiowania

<context>
Moja aplikacja pogodowa wyświetla aktualną pogodę.
Chcę dodać sekcję z prognozą na 5 dni, używając endpointu
OpenWeatherMap forecast:
api.openweathermap.org/data/2.5/forecast
(ten sam klucz API, te same parametry lang=pl, units=metric).
Endpoint zwraca dane co 3 godziny - potrzebuję filtrowania
do jednej prognozy dziennej (godzina 12:00).
</context>

<role>
Jesteś frontend developerem specjalizującym się w prezentacji
danych pogodowych i wizualizacji.
</role>

<intent>
Dodaj do aplikacji sekcję prognozy 5-dniowej:
1. Pod aktualną pogodą pojawia się sekcja "Prognoza 5-dniowa"
2. 5 kart - jedna na każdy dzień
3. Każda karta zawiera: dzień tygodnia (po polsku),
   datę (DD.MM), ikonę pogody, temperaturę maksymalną
   i minimalną, krótki opis pogody
4. Karty w układzie poziomym (na desktopie) i pionowym
   (na telefonie)
5. Dane pobierają się automatycznie razem z aktualną pogodą
   (jedno wyszukiwanie - dwa zapytania API równolegle)
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Styl kart prognozy spójny z resztą aplikacji
  (glassmorphism, ciemny motyw)
- Nazwy dni tygodnia po polsku (Poniedziałek, Wtorek...)
- Obsłuż sytuację, gdy API zwróci mniej niż 5 dni
</scope>

<precision>
Zwróć KOMPLETNY plik HTML ze wszystkimi zmianami.
Nie pomijaj istniejącego kodu - pełna implementacja.
Dodaj komentarze przy nowych sekcjach.
</precision>

Wskazówka do weryfikacji

Po wklejeniu kodu sprawdź:

• Czy po wyszukaniu miasta pojawiają się karty prognozy
• Czy nazwy dni są po polsku
• Czy temperatury min/max się różnią (nie są identyczne)
• Czy na telefonie karty układają się pionowo

Jeśli karty prognozy się nie pojawiają - prawdopodobnie Claude zapomniał wywołać drugi endpoint. Napisz:

"Prognoza się nie wyświetla. Sprawdź, czy funkcja fetchForecast jest wywoływana po fetchWeather i czy endpoint forecast jest poprawny."

Wskazówka: Gdy coś nie działa, otwórz konsolę przeglądarki (F12 → Console). Skopiuj treść błędu i wklej do Claude z opisem: "Dostaję ten błąd w konsoli: [treść]. Co poprawić?" Claude zdiagnozuje problem w 90% przypadków.

---

Krok 4: Geolokalizacja (Prompt #4)

---

Stan aplikacji po kroku 3: Formularz + aktualna pogoda + ciemny motyw + prognoza 5-dniowa. Brakuje: automatycznego wykrywania lokalizacji.

---

Wpisywanie miasta jest OK, ale wygodniej, gdy aplikacja sama wykryje, gdzie jesteś.

Jak działa Geolocation API

Każda nowoczesna przeglądarka ma wbudowane Geolocation API. Twoja aplikacja może poprosić o dostęp do lokalizacji - przeglądarka pokaże użytkownikowi okno z pytaniem "Czy zezwalasz?". Jeśli tak - dostajemy współrzędne (szerokość i długość geograficzną). Jeśli nie - używamy domyślnego miasta.

Prompt do skopiowania

<context>
Moja aplikacja pogodowa wymaga ręcznego wpisania miasta.
Chcę dodać automatyczne wykrywanie lokalizacji użytkownika.
OpenWeatherMap obsługuje zapytania po współrzędnych:
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
</context>

<role>
Jesteś frontend developerem z doświadczeniem w Browser APIs,
szczególnie Geolocation API.
</role>

<intent>
Dodaj geolokalizację:
1. Przy pierwszym otwarciu aplikacji - poproś użytkownika
   o dostęp do lokalizacji (navigator.geolocation)
2. Jeśli zgodzi się - pobierz pogodę dla jego współrzędnych
3. Jeśli odmówi lub API nie jest dostępne - użyj Warszawy
   jako domyślnego miasta
4. Dodaj przycisk "Moja lokalizacja" (ikona celownika)
   obok pola wyszukiwania - kliknięcie ponownie pobiera
   pogodę dla bieżącej lokalizacji
5. Pokaż nazwę wykrytego miasta nad pogodą
</intent>

<scope>
- Zaktualizuj istniejący plik HTML
- Geolokalizacja nie blokuje interfejsu - użytkownik może
  od razu wpisać miasto ręcznie
- Stan ładowania: "Wykrywanie lokalizacji..." podczas
  oczekiwania na Geolocation API
- Działaj poprawnie zarówno na HTTP jak i HTTPS
  (geolokalizacja wymaga HTTPS w produkcji, ale na
  localhost/file:// działa)
</scope>

<precision>
Zwróć KOMPLETNY plik HTML. Zachowaj wszystkie dotychczasowe
funkcje (aktualna pogoda, prognoza 5-dniowa, ciemny motyw).
</precision>

Czego się tu uczysz

• Geolocation API - wbudowane w przeglądarkę, nie wymaga żadnych bibliotek
• Promise.then / async-await - obsługa asynchronicznych operacji
• Fallback pattern - zawsze miej plan B (jeśli lokalizacja niedostępna, użyj domyślnej)
• UX asynchroniczny - użytkownik nie powinien czekać bez informacji co się dzieje

---

Krok 5: Obsługa błędów (Prompt #5)

Ostatni krok - ale najważniejszy z perspektywy użytkownika. Aplikacja bez obsługi błędów jest jak samochód bez hamulców.

Prompt do skopiowania

<context>
Moja aplikacja pogodowa działa poprawnie, ale nie obsługuje
błędów. Użytkownik nie wie, co się stało, gdy coś pójdzie
nie tak.
</context>

<role>
Jesteś frontend developerem z silnym naciskiem na UX
i obsługę stanów brzegowych (edge cases).
</role>

<intent>
Dodaj obsługę błędów z czytelnymi komunikatami po polsku:
1. Brak połączenia z internetem - "Brak połączenia
   z internetem. Sprawdź swoje połączenie i spróbuj
   ponownie."
2. Miasto nie znalezione (HTTP 404) - "Nie znaleziono
   miasta '[nazwa]'. Sprawdź pisownię i spróbuj ponownie."
3. Nieprawidłowy klucz API (HTTP 401) - "Błąd autoryzacji
   API. Sprawdź swój klucz API."
4. Przekroczony limit zapytań (HTTP 429) - "Przekroczono
   limit zapytań API. Poczekaj chwilę i spróbuj ponownie."
5. Brak zgody na lokalizację - "Nie udzielono zgody
   na lokalizację. Wpisz miasto ręcznie."
6. Ogólny błąd serwera (5xx) - "Serwer pogodowy jest
   chwilowo niedostępny. Spróbuj za chwilę."
7. Timeout - jeśli odpowiedź nie przyjdzie w 10 sekund,
   pokaż komunikat o timeout. UWAGA: NIE używaj
   AbortController ani AbortSignal do timeout - zamiast
   tego użyj Promise.race z setTimeout (AbortSignal
   powoduje błędy na file://)
</intent>

<scope>
- Komunikaty błędów w karcie z czerwonym/pomarańczowym
  akcentem - wyraźnie odróżnialne od normalnych danych
- Przycisk "Spróbuj ponownie" w komunikacie błędu
- Błędy znikają po nowym wyszukiwaniu
- Walidacja pola wyszukiwania - nie wysyłaj zapytania
  dla pustego stringa
- Dodaj obsługę offline (navigator.onLine) z komunikatem
- NIE używaj AbortController - aplikacja otwierana z dysku
  (file://) nie obsługuje klonowania AbortSignal
</scope>

<precision>
Zwróć KOMPLETNY, FINALNY plik HTML. To jest ostateczna wersja
aplikacji - zawiera WSZYSTKO: aktualną pogodę, prognozę
5-dniową, geolokalizację, ciemny motyw, animacje i obsługę
błędów. Pełny, gotowy do użycia kod.
</precision>

Dlaczego obsługa błędów jest tak ważna

W Górskich Resortach, gdzie buduję 9 aplikacji webowych, obsługa błędów to 30-40% kodu w każdym projekcie. Nie dlatego, że jestem pesymistą. Dlatego, że użytkownicy robią rzeczy, których nie przewidzisz:

• Wpisują miasto z literówką
• Tracą internet w połowie ładowania
• Używają przeglądarki sprzed 5 lat
• Klikają przycisk 10 razy pod rząd

Dobra obsługa błędów to nie "ładny komunikat". To szacunek dla użytkownika - mówisz mu, co się stało i co może zrobić.

---

Efekt końcowy - co masz po 30 minutach

Zobacz działającą aplikację - dokładnie taki efekt uzyskasz po przejściu 5 kroków.

Po przejściu 5 kroków masz plik pogoda.html z:

Funkcja	Status
Wyszukiwanie miasta	Działa
Aktualna pogoda (temp, wilgotność, wiatr, ciśnienie)	Działa
Ikona pogody z OpenWeatherMap	Działa
Ciemny motyw z glassmorphism	Działa
Responsywny design (telefon + desktop)	Działa
Animacja ładowania	Działa
Prognoza 5-dniowa	Działa
Automatyczne wykrywanie lokalizacji	Działa
Przycisk "Moja lokalizacja"	Działa
Obsługa błędów po polsku	Działa
Stan offline	Działa

Jeden plik. Zero instalacji. Zero serwera. Otwierasz w przeglądarce i masz działającą aplikację pogodową.

---

Co właśnie się nauczyłeś

Ten tutorial to nie tylko "jak zrobić appkę pogodową". To lekcja współpracy z AI przy budowaniu oprogramowania. Cztery kompetencje, które ćwiczyłeś:

1. Briefowanie AI (prompt engineering)

Każdy prompt miał strukturę CRISP: Context, Role, Intent, Scope, Precision. To nie przypadek - taka struktura daje powtarzalne wyniki. AI nie czyta w myślach. Im lepszy brief, tym lepszy kod.

2. Iteracja i korekta

Pierwszy wynik Claude rzadko jest idealny. Uczysz się mówić: "Zmień to. Popraw tamto. To nie działa - dlaczego?" To jest sedno pracy z AI - konwersacja, nie jednorazowe zapytanie.

3. Weryfikacja wyniku

AI generuje kod, ale to Ty go testujesz. Otwierasz przeglądarkę, wpisujesz miasto, sprawdzasz wynik. Jeśli coś nie gra - wracasz do Claude z konkretnym opisem problemu. To jest kompetencja, która odróżnia zaawansowanego użytkownika od eksperymentatora z BCG.

4. Myślenie w krokach

Nie budowaliśmy całej aplikacji jednym promptem. Dzieliliśmy zadanie na 5 kroków - każdy miał jeden cel. To jest ta sama zasada, którą stosuję w frameworku S.H.I.P. przy budowie złożonych systemów.

---

5 sposobów na rozbudowę aplikacji

Masz fundament. Oto kierunki, w których możesz go rozwinąć - tą samą metodą (prompt do Claude, kopiuj-wklej, iteruj):

1. Mapa pogodowa

"Dodaj interaktywną mapę (Leaflet.js, darmowe) z pinezkami dla wyszukiwanych miast. Po kliknięciu pinezki - pokaż pogodę w popupie."

2. Alerty pogodowe

"Dodaj sekcję alertów pogodowych z OpenWeatherMap One Call API. Jeśli są ostrzeżenia (burza, mróz, upał) - pokaż je nad aktualną pogodą z odpowiednim kolorem i ikoną."

3. Porównanie miast

"Dodaj możliwość porównywania pogody w 2-3 miastach obok siebie. Karty miast w układzie kolumnowym z wizualnym porównaniem temperatur."

4. Historia wyszukiwań

"Zapisuj ostatnie 10 wyszukiwanych miast w localStorage. Pokaż je jako klikalne tagi pod polem wyszukiwania. Kliknięcie tagu ładuje pogodę dla tego miasta."

5. Widget na stronę

"Przekształć aplikację w widget - mały komponent (300x400px), który mogę osadzić na dowolnej stronie przez iframe. Pokaż tylko temperaturę, ikonę i prognozę na 3 dni."

Każdy z tych kierunków to 1-2 dodatkowe prompty do Claude. Tą samą metodą, którą już znasz.

---

Najczęstsze problemy i rozwiązania

Problem	Przyczyna	Rozwiązanie
"Invalid API key"	Klucz API jeszcze się nie aktywował	Poczekaj 10-30 minut od rejestracji
Brak polskich opisów pogody	Brakuje parametru lang=pl	Sprawdź, czy URL API zawiera &lang=pl
Ikona pogody się nie ładuje	Zły URL ikony	Powinno być: openweathermap.org/img/wn/{icon}@4x.png
Aplikacja nie działa na telefonie	Brak meta viewport	Dodaj: <meta name="viewport" content="width=device-width, initial-scale=1">
CORS error w konsoli	Otwierasz plik przez file://	Użyj prostego serwera: npx serve . lub otwórz przez http://localhost
"AbortSignal could not be cloned"	Claude użył AbortController do timeout	Poproś Claude: "Zamień AbortController na Promise.race z setTimeout"
Geolokalizacja nie działa	Przeglądarka blokuje na HTTP	Użyj HTTPS lub localhost

Jeśli masz inny problem - wklej treść błędu z konsoli (F12 → Console) do Claude i opisz, co się dzieje. AI pomoże zdiagnozować.

---

Nie chodzi o pogodę. Chodzi o model pracy.

W artykule o kompetencjach przyszłości pisałem o przejściu od egzekucji do orkiestracji. Ten tutorial to praktyczny przykład: nie piszesz kodu - orkiestrujesz AI, żeby go napisało. Ty definiujesz cel, strukturę, wymagania. AI wykonuje. Ty weryfikujesz.

59% pracowników wymaga przekwalifikowania do 2030 (WEF 2025). Umiejętność "zbuduj coś z AI" nie jest luksusem - to jest baza. I właśnie ją ćwiczysz.

---

Co dalej

Chcesz...	Przeczytaj
Opanować promptowanie	Framework CRISP
Budować zaawansowane aplikacje	Vibe coding z Claude Code
Poznać więcej narzędzi AI	50 narzędzi AI dla marketerów
Przejść kurs od zera	Kurs Claude AI - darmowy, 38 lekcji

Jeśli jesteś nowy na blogu - Zacznij Tutaj. 3 ścieżki nauki dopasowane do Twojej roli.

---

Ten artykuł to część serii o praktycznym budowaniu z AI. Zobacz też: Vibe coding z Claude Code, Autonomiczny zespół deweloperski z AI, Freelancer x AI: Framework S.C.A.L.E.