Trudny / egzaminacyjny · lekcja 23
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...
Zacznij tutaj
Po co się tego uczymy?
Wprowadzenie
Teoria
Wymagania projektu:
- Menu restauracji podzielone na kategorie (Przystawki, Dania główne, Desery...) — relacja jeden-do-wielu między
KategoriaaDanie(EF Core, lekcja 16); - Każde danie ma nazwę, cenę, opis i OPCJONALNIE zdjęcie (upload plików, lekcja 17);
- Klient wybiera dania i tworzy zamówienie — relacja jeden-do-wielu między
ZamowienieaPozycjaZamowienia(każda pozycja: danie + ilość); - Panel kelnera/administratora (Angular) do zarządzania menu (CRUD dań i kategorii) — pełny zestaw operacji: lista, dodawanie, edycja, usuwanie;
- Lista złożonych zamówień ze statusem ("Przyjęte" / "W przygotowaniu" / "Gotowe") — aktualizowanym przez personel.
Model danych (4 powiązane klasy, C#):
public class Kategoria { public int Id; public string Nazwa; public List<Danie> Dania; }
public class Danie { public int Id; public string Nazwa; public double Cena; public string? SciezkaZdjecia;
public int KategoriaId; public Kategoria? Kategoria; }
public class Zamowienie { public int Id; public DateTime DataZlozenia; public string Status;
public List<PozycjaZamowienia> Pozycje; }
public class PozycjaZamowienia { public int Id; public int ZamowienieId; public int DanieId;
public Danie? Danie; public int Ilosc; }
Struktura komponentów Angular (rozłożenie dużej aplikacji na mniejsze części, zgodnie z lekcją 8-9): MenuComponent (lista dań pogrupowana wg kategorii) → używa DanieKartaComponent (potomny, jedna pozycja menu z przyciskiem "Dodaj do zamówienia") → KoszykZamowieniaComponent (aktualnie składane zamówienie, serwis ZamowienieService współdzielony między komponentami) → PanelAdminComponent (CRUD zarządzania menu, chroniony — pełne logowanie wykracza poza zakres tego projektu, ale można dodać prosty ekran z hasłem jako rozszerzenie).
Relacja w praktyce — pobieranie zamówienia z pozycjami. context.Zamowienia.Include(z => z.Pozycje).ThenInclude(p => p.Danie).ToListAsync() — ThenInclude (nowość względem Include z lekcji 17) pozwala dociągnąć relację NA DRUGIM POZIOMIE zagnieżdżenia: nie tylko pozycje zamówienia, ale też danie przypisane do KAŻDEJ pozycji.
Zobacz zależności
Schemat
Kategoria (1) ──── (N) Danie Zamowienie (1) ──── (N) PozycjaZamowienia (N) ──── (1) Danie
"Dania główne" "Pierogi" 24.99zł Zamówienie #7 2× Pierogi
"Schabowy" 32.00zł Status: W przygotowaniu 1× Schabowy
Angular:
MenuComponent (rodzic)
@for (kategoria of kategorie) {
<h3>{{ kategoria.nazwa }}</h3>
@for (danie of kategoria.dania; track danie.id) {
<app-danie-karta [danie]="danie" (dodano)="dodajDoZamowienia($event)">
}
}
│ @Output() dodano
▼
ZamowienieService (singleton, przechowuje aktualnie składane zamówienie)
│
▼
KoszykZamowieniaComponent — pokazuje pozycje, sumę, przycisk "Złóż zamówienie"
│ POST /api/zamowienia
▼
ASP.NET Core: ZamowieniaController → EF Core → SQLite
Połącz z praktyką
Przykład z życia
Aplikacje do składania zamówień w restauracjach (tablety przy stolikach, systemy dla kelnerów) działają dokładnie na tej zasadzie: menu podzielone na kategorie, możliwość dodania kilku pozycji do jednego zamówienia, i śledzenie statusu przygotowania — to jeden z najbardziej praktycznych, kompletnych przykładów systemu CRUD z relacjami w prawdziwym biznesie.