69 lines
3.7 KiB
Markdown
69 lines
3.7 KiB
Markdown
# Frontend Erklärung (für Einsteiger)
|
||
|
||
Dieses Dokument erklärt die Logik und Struktur des Frontends. Es basiert auf **Next.js** (einem React Framework) und **TypeScript**.
|
||
|
||
## 1. Grundkonzept: Komponenten
|
||
Die gesamte Anwendung besteht aus kleinen, wiederverwendbaren Bausteinen, sogenannten **Komponenten**.
|
||
Stell dir das wie Lego vor: Ein "Knopf" ist ein Stein, ein "Formular" ist eine kleine Platte aus Steinen, und die "Seite" ist das fertige Haus.
|
||
|
||
**Warum?**
|
||
- Übersichtlichkeit: Man muss nicht 1000 Zeilen Code auf einmal verstehen, sondern nur kleine Teile.
|
||
- Wiederverwendbarkeit: Ein Knopf wird einmal programmiert und überall benutzt.
|
||
|
||
## 2. Der Startpunkt: `layout.tsx` und `page.tsx`
|
||
|
||
### `app/layout.tsx` (Der Rahmen)
|
||
Dies ist die "Hülle" um jede Seite.
|
||
- Hier wird HTML, Body und CSS geladen.
|
||
- **Wichtig:** Hier sitzt der `NextAuthSessionProvider`. Das ist wie ein unsichtbarer "Rucksack", der die Login-Informationen (Session) trägt und sie überall in der App verfügbar macht.
|
||
|
||
### `app/page.tsx` (Der Inhalt)
|
||
Dies ist die Startseite. Sie entscheidet, was angezeigt wird:
|
||
1. **Nicht eingeloggt?** -> Zeige den Login-Screen (`AuthScreen`).
|
||
2. **Eingeloggt als Lehrer?** -> Zeige das Lehrer-Dashboard.
|
||
3. **Eingeloggt als Raumbetreuer?** -> Zeige das Betreuer-Dashboard.
|
||
|
||
**Warum?**
|
||
So haben wir eine einzige URL (Startseite), die sich aber intelligent an den Nutzer anpasst ("Conditional Rendering").
|
||
|
||
## 3. Das Gehirn der App: `lib/auth-context.tsx`
|
||
|
||
Hier liegt die wichtigste Logik. Wir nutzen einen **React Context**.
|
||
Normalerweise müsstest du Daten (z.B. "Wer ist eingeloggt?") von oben nach unten durch alle Komponenten durchreichen ("Prop Drilling"). Das ist mühsam.
|
||
Der Context ist wie ein **globaler Speicher**, auf den jede Komponente direkt zugreifen kann.
|
||
|
||
**Was passiert hier?**
|
||
- **Zustand (State)**: Hier merken wir uns:
|
||
- `user`: Wer ist gerade da?
|
||
- `tickets`: Liste aller Tickets.
|
||
- `rooms`: Liste aller Räume.
|
||
- **Aktionen**: Hier liegen die Funktionen wie `login()`, `createTicket()`, `updateTicketStatus()`.
|
||
- Diese Funktionen sprechen mit dem Backend (dem Server) über `fetch`.
|
||
|
||
**Beispiel:**
|
||
Wenn du auf "Ticket erstellen" klickst, ruft die Komponente `createTicket()` im Context auf. Der Context sendet die Daten an den Server und lädt danach die Ticketliste neu (`fetchTickets`). Alle Komponenten, die die Ticketliste anzeigen, aktualisieren sich dann automatisch.
|
||
|
||
## 4. Die Verbindung zum Backend: Authentifizierung
|
||
|
||
Wir nutzen **NextAuth.js**.
|
||
- **Frontend**: Wenn du dich einloggst, schicken wir Benutzername/Passwort an NextAuth.
|
||
- **Backend (Java)**: Unser Backend prüft die Daten und gibt einen "Token" (Ausweis) zurück.
|
||
- **Session**: NextAuth speichert diesen "Ausweis" sicher. Bei jeder Anfrage an den Server (z.B. "Lade Tickets") zeigen wir diesen Ausweis vor (`Authorization` Header).
|
||
|
||
## 5. Warum TypeScript?
|
||
|
||
TypeScript ist JavaScript mit "Typen".
|
||
Statt einfach eine Variable `data` zu haben (wo alles drin sein könnte: Text, Zahl, oder nichts), definieren wir genau:
|
||
`interface Ticket { id: number; title: string; status: 'OPEN' | 'CLOSED'; }`
|
||
|
||
**Warum?**
|
||
- **Fehlerschutz**: Wenn du versuchst, einem Ticket einen Namen statt einer ID zu geben, unterstreicht TypeScript das rot – *bevor* du das Programm überhaupt startest.
|
||
- **Autovervollständigung**: Der Code-Editor weiß genau, welche Eigenschaften ein Ticket hat und schlägt sie dir vor. Das macht das Programmieren viel schneller und sicherer.
|
||
|
||
## Zusammenfassung
|
||
1. Der Nutzer öffnet die Seite (`page.tsx`).
|
||
2. Der `AuthContext` prüft: "Kenne ich dich?".
|
||
3. Nein? -> Login Formular.
|
||
4. Ja? -> Dashboard anzeigen.
|
||
5. Das Dashboard holt sich Daten (Tickets) aus dem `AuthContext`.
|
||
6. Der `AuthContext` hat die Daten vorher vom Server geladen.
|