BitEdu - liceum i technikum
INF.04
Lekcje otwarte możesz czytać od razu. Materiały oznaczone kontem zawierają zadania, kod lub pliki przeznaczone dla przypisanych uczniów.
Aplikacje webowe
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...
Visual Studio 2026 i ASP.NET Core — środowisko pracy
Zanim napiszesz jakikolwiek kod, musisz mieć gotowe, poprawnie skonfigurowane środowisko pracy. W tym dziale będziesz łączyć DWIE technologie naraz (Angular na front-endzie, ASP.NET Core na backendzie) — dobra wiadomość jest taka, że Visual Studio 2026, któreg...
Pierwszy projekt w Visual Studio — struktura Angular + ASP.NET Core
Czas utworzyć pierwszy prawdziwy projekt łączący Angular i ASP.NET Core i zrozumieć, z jakich plików i folderów się składa. To trochę jak rozpakowanie nowej walizki narzędzi — zanim zaczniesz cokolwiek budować, warto wiedzieć, co gdzie leży i do czego służy. T...
Omówienie gotowego małego programu — kalkulator BMI krok po kroku
Zanim zaczniesz uczyć się każdej technologii osobno i szczegółowo (Node.js, TypeScript, Bootstrap, Angular — kolejne lekcje), zobacz najpierw, jak to wszystko wygląda RAZEM, w praktyce, na przykładzie małego, kompletnego programu — kalkulatora BMI. Nie musisz...
Node.js — środowisko uruchomieniowe JavaScript i npm
Widziałeś już w poprzedniej lekcji polecenie "ng generate component" wpisywane w terminalu. Żeby to w ogóle zadziałało, komputer potrzebuje Node.js — silnika, który pozwala uruchamiać kod JavaScript/TypeScript POZA przeglądarką. Bez Node.js narzędzia Angulara...
TypeScript — podstawy języka: typy, interfejsy i klasy
Angular pisze się w TypeScript, więc zanim zbudujesz cokolwiek poważniejszego niż jeden przycisk, musisz poznać ten język. Dobra wiadomość: jeśli znasz C#, TypeScript będzie Ci się wydawał bardzo znajomy — silne typowanie, klasy, interfejsy — to te same koncep...
Bootstrap — szybkie i spójne stylowanie interfejsu
Komponenty Angulara, które zaczniesz budować w kolejnych lekcjach, na start wyglądają bardzo surowo — zwykły, nieostylowany HTML. Ręczne pisanie CSS dla każdego przycisku, formularza i układu strony od zera zajęłoby mnóstwo czasu. Bootstrap to gotowy zestaw st...
jQuery — klasyczna biblioteka do manipulacji DOM i AJAX
Podstawa programowa INF.04.7.2 wymienia jQuery obok Angulara, React.js i Node.js jako jeden z frameworków/bibliotek, które powinieneś znać — to pytanie może pojawić się na egzaminie pisemnym, nawet jeśli w praktyce budujesz aplikacje w Angularze. jQuery to zna...
Angular I — architektura komponentowa i szablony
Czas na główny framework tego działu. Angular to sposób budowania interfejsu z małych, niezależnych "klocków" (komponentów), które można łączyć w większe całości — dokładnie ta sama idea, co komponenty Blazor, do których być może zajrzysz w dodatkowym bloku na...
Angular II — data binding, zdarzenia własne i serwisy
W poprzedniej lekcji dane w komponencie były "na sztywno" wpisane w kodzie. Prawdziwe aplikacje muszą reagować na działania użytkownika (kliknięcia, wpisywanie tekstu) i pobierać dane z zewnątrz (z backendu). Ta lekcja pokazuje mechanizm wiązania danych w obie...
Angular III — formularze reaktywne, walidacja i routing SPA
Ostatni element układanki Angulara: prawdziwe formularze z walidacją (nie tylko proste [(ngModel)] z lekcji 10) oraz nawigacja między "stronami" aplikacji jednostronicowej (SPA) — bez przeładowania całej strony w przeglądarce. Po tej lekcji będziesz mieć kompl...
ASP.NET Core jako backend dla Angular — Web API i CORS
Masz już gotowy frontend w Angularze (lekcje 9-11) i wiesz, jak budować backend w ASP.NET Core (lekcje 3, wcześniejsze doświadczenia). Czas je POŁĄCZYĆ. Backend, który komunikuje się z frontendem SPA, nie zwraca gotowego HTML — zwraca WYŁĄCZNIE dane (najczęści...
Sesje i ciasteczka w ASP.NET Core
HTTP jest z natury "bezstanowy" — serwer normalnie NIE pamięta niczego między jednym żądaniem a drugim, każde żądanie traktowane jest jak od zupełnie nowego, nieznajomego użytkownika. Ale przecież aplikacje muszą pamiętać, że ktoś jest zalogowany, co ma w kosz...
Logowanie i autoryzacja — ASP.NET Core Identity
Prawie każda poważna aplikacja webowa rozróżnia użytkowników — gość, zalogowany użytkownik, administrator. Pisanie własnego systemu logowania od zera (hashowanie haseł, blokowanie po kilku nieudanych próbach, resetowanie hasła) jest trudne i pełne pułapek bezp...
Entity Framework Core — wprowadzenie do bazy danych w ASP.NET Core
Dotychczasowe przykłady w tym dziale trzymały dane "na sztywno" w pamięci (listy w kodzie C#) — znikające przy każdym restarcie aplikacji. Prawdziwa aplikacja webowa potrzebuje trwałej bazy danych. Entity Framework Core (EF Core) to oficjalne narzędzie Microso...
Pełny CRUD z bazą danych w EF Core — lista produktów
Czas połączyć wszystko z poprzedniej lekcji w jeden, kompletny, DZIAŁAJĄCY przykład: pełny CRUD (Create, Read, Update, Delete) na prawdziwej bazie SQLite przez Entity Framework Core, z walidacją danych przez Data Annotations. To najbardziej praktyczny, powtarz...
Relacje między tabelami w EF Core — klucze obce i Include
Prawdziwe aplikacje niemal zawsze mają dane POWIĄZANE ze sobą — produkt należy do kategorii, zamówienie należy do klienta i zawiera wiele produktów. Ta lekcja pokazuje, jak Entity Framework Core reprezentuje takie relacje w klasach C# (bez ręcznego pisania SQL...
Przesyłanie plików (upload) w ASP.NET Core
Wiele aplikacji webowych pozwala użytkownikowi przesłać plik — zdjęcie profilowe, załącznik do zgłoszenia, zdjęcie produktu w panelu sprzedawcy. Ta lekcja pokazuje, jak ASP.NET Core odbiera przesłane pliki, jak bezpiecznie zapisać je na serwerze, i jakich regu...
Wdrażanie aplikacji ASP.NET Core — publikacja i środowiska
Gotowa aplikacja uruchamiana z Visual Studio (tryb Debug) to nie to samo, co aplikacja gotowa do udostępnienia prawdziwym użytkownikom w internecie. Ta lekcja pokazuje, jak przygotować aplikację ASP.NET Core do wdrożenia (publish), czym różnią się środowiska D...
Projekt 1: Kalkulator BMI z historią pomiarów (Angular + ASP.NET Core)
Czas na pierwszy z czterech pełnych projektów łączących wszystko, czego się nauczyłeś. Pamiętasz kalkulator BMI z lekcji 4? Tam był to prosty, samodzielny komponent Angular liczący wynik lokalnie. Teraz rozbudujemy go o prawdziwy backend ASP.NET Core — każdy p...
Projekt 2: Kolorowy zgadywacz — gra w Angularze z zapisem wyników
Drugi projekt jest lżejszy niż kalkulator BMI — skupia się głównie na logice front-endowej (Angular) i dynamicznym stylowaniu elementów, z prostym zapisem najlepszego wyniku na backendzie. To dobre ćwiczenie przed dużym, trzecim projektem (system zamówień).
Projekt 3: Sklep internetowy (e-sklep) — katalog, wyszukiwanie i koszyk
Podstawa programowa INF.04.7.3 wprost wymienia "funkcjonalności e-sklepu" jako jeden z typów aplikacji, które powinieneś umieć zaprogramować. Ten projekt buduje WŁAŚNIE to — prawdziwy, kompletny sklep internetowy z katalogiem produktów podzielonym na kategorie...
Projekt 4: System zamówień restauracji (Angular + EF Core, relacje)
Trzeci projekt to pełny system zarządzania menu i zamówieniami restauracji — najbardziej rozbudowany dotąd, łączący WSZYSTKIE elementy backendu z lekcji 13-19 (relacje w EF Core, sesje, przesyłanie plików) z pełnym interfejsem Angular. To dokładnie ten typ zad...
Projekt 5: Mini portal społecznościowy — wpisy, komentarze i polubienia
Kolejna nazwana wprost w podstawie programowej (INF.04.7.3) funkcjonalność — portal społecznościowy. Ten projekt buduje uproszczony "feed" (strumień wpisów) z możliwością komentowania i polubień, wymagający zalogowania — dobre ćwiczenie z relacji WIELE-do-WIEL...
Projekt 6: Serwis ogłoszeniowy — dodawanie, wyszukiwanie i filtrowanie
Trzecia z czterech funkcjonalności nazwanych wprost w podstawie programowej (INF.04.7.3) — serwis ogłoszeniowy (jak OLX czy Otomoto). Ten projekt ćwiczy zaawansowane filtrowanie WIELOMA kryteriami naraz (kategoria, cena od-do, lokalizacja) oraz sortowanie wyni...
Projekt 7: System głosowania i ankiet — wyniki na żywo
Czwarta i ostatnia z funkcjonalności nazwanych wprost w podstawie programowej (INF.04.7.3) — system głosowania/ankiet. Ten projekt uczy dwóch nowych umiejętności: AGREGACJI danych (zliczanie głosów pogrupowanych po opcji) oraz PREZENTACJI wyników jako pasków p...
Projekt 8 (końcowy): System rezerwacji wizyt — Angular + logowanie + zadanie kontrolne
Ostatni, czwarty projekt i jednocześnie podsumowanie całego działu. Łączymy WSZYSTKO: Angular (komponenty, formularze, routing, serwisy), ASP.NET Core Web API z bazą danych, oraz logowanie użytkowników (ASP.NET Core Identity, lekcja 14) — dokładnie ten typ peł...
Blazor — interaktywny interfejs webowy w C#, bez JavaScriptu
Ten i kolejne 4 tematy to materiał DODATKOWY, wykraczający poza wymagania egzaminu zawodowego INF.04.7 — oficjalna podstawa programowa (INF.04.7.2) i informator CKE o egzaminie zawodowym wymieniają jako wymagane frameworki: ASP.NET Core, Django, Angular, React...
Komponenty Blazor — parametry, zdarzenia własne i cykl życia
Prawdziwa aplikacja nie mieści się w jednym komponencie — dzieli się na mniejsze, wielokrotnego użytku klocki (np. "karta produktu", "przycisk oceny gwiazdkami"), które przekazują sobie dane i informują się nawzajen o zdarzeniach. To dokładnie ta sama potrzeba...
Data binding i formularze w Blazor — @bind i EditForm
Formularze w Razor Pages (lekcje 6-7) wymagają wysłania CAŁEGO formularza (POST) i przeładowania strony, żeby zobaczyć wynik walidacji. Blazor pozwala na coś więcej — dwukierunkowe wiązanie danych (data binding) aktualizujące zmienne C# NATYCHMIAST, w miarę pi...
Routing i layout w Blazor — nawigacja między komponentami
Prawdziwa aplikacja Blazor ma wiele stron/komponentów — listę produktów, formularz dodawania, szczegóły. Ta lekcja pokazuje, jak poruszać się między nimi (routing), jak zbudować wspólne menu nawigacyjne widoczne na każdej stronie (layout — dokładnie ta sama po...
Projekt Blazor: kalkulator BMI i kolorowa gra zgadywanka
Czas połączyć wszystko z lekcji 9-12 (komponenty, parametry, zdarzenia, binding, formularze, routing) w dwa kompletne, samodzielne projekty — kalkulator BMI i grę „Kolorowy zgadywacz”. To dokładnie te same projekty, które w oryginalnej wersji tego działu były...
Our Voice: aplikacja PWA od pomysłu do wdrożenia
Ta lekcja pokazuje cały proces tworzenia prawdziwej aplikacji webowej na przykładzie Our Voice - mobilnego towarzysza wyjazdu chóru do Strasburga. Projekt musiał działać na iPhonie, Androidzie i komputerze, zużywać mało internetu, przechowywać plan offline ora...