Podstawowy · lekcja 1
Czym są aplikacje webowe — rodzaje, cykl życia i przykłady
Zanim zainstalujesz cokolwiek i napiszesz pierwszą linijkę kodu, musisz dokładnie rozumieć, CZYM w ogóle jest "aplikacja webowa" i czym różni się od zwykłej strony internetowej, jakie są jej rodzaje, i jak wygląda jej cykl życia — to fundament wymagany przez j...
Zacznij tutaj
Po co się tego uczymy?
Wprowadzenie
Teoria
Aplikacja webowa to program, który działa w przeglądarce internetowej i NIE wymaga instalacji na urządzeniu użytkownika (w przeciwieństwie do aplikacji desktopowej z działu WPF czy aplikacji mobilnej z działu MAUI). Użytkownik wpisuje adres URL, przeglądarka łączy się z serwerem, a wynikiem jest interfejs, z którym można wchodzić w interakcję — kliknięcia, formularze, dynamicznie zmieniająca się treść.
Czym różni się "zwykła strona" od "aplikacji webowej"? Granica jest płynna, ale kluczowa różnica to STOPIEŃ INTERAKTYWNOŚCI i obecność logiki biznesowej: strona wizytówkowa firmy (statyczny tekst, zdjęcia, dane kontaktowe) to zwykła STRONA; sklep internetowy z koszykiem, logowaniem i płatnościami, albo arkusz kalkulacyjny działający w przeglądarce (jak Arkusze Google), to prawdziwa APLIKACJA — ma stan, reaguje na działania użytkownika, przetwarza i zapisuje dane.
Rodzaje aplikacji webowych ze względu na miejsce renderowania (wyświetlania):
| Rodzaj | Jak działa | Przykład technologii |
|---|---|---|
| Strona statyczna | Serwer wysyła gotowy, niezmienny plik HTML — ten sam dla każdego odwiedzającego | zwykły HTML/CSS |
| Aplikacja z renderowaniem po stronie serwera (SSR — Server-Side Rendering) | Serwer za KAŻDYM razem generuje HTML "na świeżo", często na podstawie danych z bazy — przeglądarka dostaje gotową stronę | ASP.NET Core (Razor Pages/MVC), PHP, Django |
| Aplikacja jednostronicowa (SPA — Single Page Application) | Przeglądarka pobiera JEDEN raz "szkielet" aplikacji (kod JavaScript/TypeScript), a dalej SAMA, lokalnie, renderuje kolejne widoki i pobiera tylko potrzebne dane (zwykle w formacie JSON) z serwera — bez przeładowania całej strony | Angular, React, Vue |
| Progresywna aplikacja webowa (PWA) | SPA rozszerzone o możliwość działania offline (częściowo) i instalacji jako "aplikacja" na pulpicie/telefonie, mimo że to nadal strona webowa | Angular/React + Service Worker |
Kurs bitedu.pl w dziale INF.04.7 uczy podejścia SPA — front-end w Angularze (TypeScript), komunikujący się przez sieć z back-endem w ASP.NET Core, który zarządza danymi w bazie — dokładnie ta architektura, którą zobaczysz "rozebraną na czynniki pierwsze" w kolejnych lekcjach.
Architektura klient-serwer. Każda aplikacja webowa (niezależnie od rodzaju z tabeli wyżej) opiera się na podziale na dwie współpracujące części: front-end (klient — to, co widzi i czym steruje użytkownik: HTML/CSS/JavaScript-TypeScript, wykonuje się w przeglądarce) oraz back-end (serwer — logika biznesowa, dostęp do bazy danych, bezpieczeństwo, wykonuje się na komputerze-serwerze, niewidoczny bezpośrednio dla użytkownika). Komunikacja między nimi odbywa się przez protokół HTTP, najczęściej wymieniając dane w formacie JSON.
Cykl życia aplikacji webowej (analogiczny do ogólnego cyklu projektowania oprogramowania z działu "Programowanie konsolowe", ale z krokami specyficznymi dla weba):
- Analiza wymagań — co aplikacja ma robić, kto jej użyje, jakie dane przetwarza;
- Projekt — makieta interfejsu (UI/UX), projekt bazy danych, wybór architektury (SPA czy SSR, jakie technologie front-end/back-end);
- Implementacja — pisanie kodu front-endu i back-endu równolegle (albo najpierw jednego, potem drugiego);
- Testowanie — sprawdzanie poprawności działania (dział INF.04.8 tego kursu), w tym debugger w przeglądarce (Narzędzia deweloperskie);
- Wdrożenie (deployment) — publikacja na serwerze dostępnym w internecie (pełne omówienie w lekcji 19);
- Utrzymanie — poprawki błędów, aktualizacje bezpieczeństwa, nowe funkcje po premierze.
Przykłady prawdziwych aplikacji webowych z różnych kategorii: sklep internetowy (Allegro, Amazon), bankowość internetowa, portal społecznościowy, systemy pocztowe działające w przeglądarce (Gmail — klasyczny przykład SPA), pakiety biurowe online (Dokumenty/Arkusze Google), oraz systemy zarządzania treścią (CMS) — sama strona bitedu.pl, na której się właśnie uczysz, jest zbudowana na WordPressie, czyli jednym z najpopularniejszych CMS-ów na świecie, opartym o PHP i MySQL (dokładnie te technologie, które poznałeś w dziale "Aplikacje internetowe PHP").
Wskazówka egzaminacyjna. W Informatorze o Egzaminie Zawodowym (CKE) pojawia się przykładowe pytanie o domyślne porty lokalnego serwera deweloperskiego: aplikacje uruchomione we frameworku Angular korzystają domyślnie z portu 4200 (adres http://localhost:4200), a aplikacje w bibliotece React — z portu 3000 (http://localhost:3000). Warto zapamiętać te dwie liczby — to dokładnie ten typ szczegółu, o który pyta się na egzaminie pisemnym.
Dokumentacja i dalsza lektura (Microsoft Learn):
Zobacz zależności
Schemat
PRZEGLĄDARKA (klient / front-end) SERWER (back-end)
┌─────────────────────────────┐ ┌──────────────────────────┐
│ HTML + CSS + TypeScript │ żądanie │ ASP.NET Core │
│ (skompilowany do JS przez │─── HTTP ────►│ (logika biznesowa, │
│ Angular) │ │ dostęp do bazy danych) │
│ │◄─── JSON ────│ │
│ Renderuje interfejs │ odpowiedź │ Baza danych (SQLite/SQL) │
│ na podstawie danych JSON │ │ │
└─────────────────────────────┘ └──────────────────────────┘
SPA (Single Page Application) REST API
Cykl życia aplikacji webowej:
Analiza wymagań → Projekt (UI/UX, baza danych) → Implementacja (front+back)
→ Testowanie → Wdrożenie → Utrzymanie → (powrót do analizy przy nowych funkcjach)
Połącz z praktyką
Przykład z życia
Kiedy otwierasz Gmaila, przeglądarka pobiera JEDEN raz aplikację (kod JavaScript/TypeScript), a potem — gdy klikasz kolejne maile, przechodzisz między folderami — strona NIE przeładowuje się w całości, tylko dociąga same potrzebne dane (treść konkretnego maila) w tle. To klasyczny przykład SPA. Z kolei prosta strona z regulaminem sklepu, która wygląda identycznie za każdym razem i nie ma żadnej interakcji poza czytaniem, to statyczna strona — nie aplikacja.