112 lines
5.4 KiB
Markdown
112 lines
5.4 KiB
Markdown
# 🏆 Modul 08: Master-Abschlussprojekt – Interaktive Task-App (MVC)
|
||
|
||
> **Leitgedanke:** *„Ein wahrer Software-Engineer zeichnet sich nicht nur dadurch aus, einzelne Funktionen zu schreiben, sondern komplexe Systeme mit klarer Model-View-Architektur, State-Management und 100% testgetriebener Logik zu strukturieren.“*
|
||
|
||
---
|
||
|
||
## 📚 Übersicht & Projektziel
|
||
|
||
Herzlichen Glückwunsch zum Erreichen des **Master-Abschlussprojekts** des JavaScript & TypeScript Kurses! In diesem Abschlussprojekt entwickelst du eine vollständige, professionelle Aufgaben- und Projektmanagement-Web-Applikation.
|
||
|
||
### Kernanforderungen:
|
||
1. **Saubere Model-View-Trennung (MVC / Clean Architecture)**:
|
||
- Die Geschäftslogik (`TaskManager`) ist zu 100% unabhängig vom DOM und läuft headless in jedem Test-Runner.
|
||
- Die View (`TaskApp`) reagiert reaktiv auf State-Änderungen und visualisiert Tasks mit Prioritäts-Badges und Fälligkeitsdaten.
|
||
2. **Umfassende Aufgabenverwaltung**:
|
||
- Aufgaben hinzufügen mit Titel, Priorität (`high`, `medium`, `low`) und Fälligkeitsdatum (`dueDate`).
|
||
- Status umschalten (Toggle: Offen <-> Erledigt).
|
||
- Aufgaben löschen und abgeschlossene Aufgaben gesammelt aufräumen.
|
||
- Dynamische Filterung (`all`, `active`, `completed`) und Volltextsuche (Live Search).
|
||
- Aggregat-Statistiken in Echtzeit (Gesamtzahl, Offen, Erledigt, Hohe Priorität).
|
||
3. **100% Unittest-Abdeckung** mit automatisierter Testsuite.
|
||
|
||
---
|
||
|
||
## 🏛️ 1. Architektur: Model-View-Controller (MVC)
|
||
|
||
```
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ BENUTZER / BROWSER UI │
|
||
└──────────────────────────────┬──────────────────────────────┘
|
||
│ Klick / Formular-Eingabe
|
||
▼
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ VIEW / CONTROLLER (app.js) │
|
||
│ - Reagiert auf DOM-Events (submit, click, input) │
|
||
│ - Aktualisiert das DOM bei State-Änderungen │
|
||
│ - Formatiert UI-Elemente (Badges, Datumsanzeige) │
|
||
└──────────────────────────────┬──────────────────────────────┘
|
||
│ Ruft Methoden auf
|
||
▼
|
||
┌─────────────────────────────────────────────────────────────┐
|
||
│ MODEL / STATE (TaskManager) │
|
||
│ - addTask(title, priority, dueDate) │
|
||
│ - toggleTask(id) │
|
||
│ - deleteTask(id) │
|
||
│ - getFilteredTasks(status, query) │
|
||
│ - getStatistics() │
|
||
└─────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📐 2. TypeScript Datenmodell & Interfaces
|
||
|
||
```typescript
|
||
type TaskPriority = "high" | "medium" | "low";
|
||
type FilterStatus = "all" | "active" | "completed";
|
||
|
||
interface Task {
|
||
id: number;
|
||
title: string;
|
||
priority: TaskPriority;
|
||
completed: boolean;
|
||
dueDate: string | null;
|
||
createdAt: string;
|
||
}
|
||
|
||
interface TaskStatistics {
|
||
total: number;
|
||
active: number;
|
||
completed: number;
|
||
highPriorityCount: number;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 3. Deine Aufgaben in `aufgabe.js`
|
||
|
||
Implementiere die Klasse `TaskManager`:
|
||
|
||
### 🎯 TODO 1: `constructor(initialTasks = [])` & `addTask(title, priority = 'medium', dueDate = null)`
|
||
- Erzeugt eine neue Aufgabe mit fortlaufender ID (1, 2, 3, ...).
|
||
- Validiert den Titel (muss ein nicht-leerer String sein; wirft sonst einen `Error`).
|
||
- Setzt Standardwerte für `priority` ('medium') und `dueDate` (null).
|
||
- Gibt das neu erstellte `Task`-Objekt zurück.
|
||
|
||
### 🎯 TODO 2: `toggleTask(id)`
|
||
- Schaltet `completed` für die Aufgabe mit der angegebenen ID um (`true` <-> `false`).
|
||
- Liefert den aktualisierten Task zurück, oder `null` falls die ID nicht gefunden wurde.
|
||
|
||
### 🎯 TODO 3: `deleteTask(id)`
|
||
- Entfernt die Aufgabe mit der ID aus der internen Liste.
|
||
- Gibt `true` bei erfolgreichem Löschen zurück, sonst `false`.
|
||
|
||
### 🎯 TODO 4: `getFilteredTasks(filterStatus = 'all', searchQuery = '')`
|
||
- Filtert nach Status: `'all'` (alle), `'active'` (nur unerledigte), `'completed'` (nur erledigte).
|
||
- Filtert optional case-insensitive nach Teilübereinstimmung im Titel (`searchQuery`).
|
||
- Gibt eine Kopie des gefilterten Arrays zurück.
|
||
|
||
### 🎯 TODO 5: `getStatistics()`
|
||
- Liefert ein Objekt mit `{ total, active, completed, highPriorityCount }`.
|
||
|
||
---
|
||
|
||
## 🧪 4. Verifikation & Ausführung
|
||
|
||
### Unittests ausführen:
|
||
Öffne das Modul in der integrierten Web-IDE oder führe `test_aufgabe.js` aus.
|
||
|
||
### Interaktive Browser-App testen:
|
||
Öffne `index.html` direkt im Browser, um die live gerenderte Task-App auszuprobieren!
|