Flask – 05 Abschlussprojekt

Flask Abschlussprojekt

Projekt-Optionen

Wähle eines der folgenden Projekte:

Option 1: To-Do-Listen-App

Beschreibung: Eine Web-App, mit der Benutzer Aufgaben erstellen, anzeigen, bearbeiten und löschen können.

Mindest-Funktionen:

1. Aufgabe erstellen

   • Formular mit Titel (Pflicht) und Beschreibung (optional)
   • Validierung: Titel mindestens 3 Zeichen
   • Jede Aufgabe hat Status: “Offen” oder “Erledigt”

2. Aufgaben anzeigen

   • Liste aller Aufgaben
   • Offene und erledigte Aufgaben visuell unterscheidbar
   • Statistik: Anzahl offener/erledigter Aufgaben

3. Aufgabe als erledigt markieren

   • Button/Link um Status zu ändern
   • Visuelles Feedback (z.B. durchgestrichen)

4. Aufgabe löschen

   • Button/Link zum Löschen
   • Optional: Bestätigungsdialog

Bonus-Features (optional):

• Priorität (Hoch/Mittel/Niedrig) für Aufgaben
• Fälligkeitsdatum
• Aufgaben filtern (nur offene/nur erledigte)
• Aufgaben nach Priorität sortieren
• Bearbeitungs-Funktion

Technologien:

• Listen zum Speichern
• Funktionen für CRUD-Operationen
• Jinja-Schleifen für Darstellung
• Formulare mit Validierung
• Bedingungen in Templates

Option 2: Quiz-App

Beschreibung: Eine interaktive Quiz-App mit mehreren Fragen und Auswertung.

Mindest-Funktionen:

1. Quiz-Fragen definieren

   • Mindestens 10 Fragen
   • Jede Frage hat 4 Antwortmöglichkeiten
   • Eine richtige Antwort pro Frage
   • Verschiedene Kategorien (z.B. Allgemeinwissen, Python, Mathe)

2. Quiz starten

   • Zeige alle Fragen in einem Formular
   • Radio-Buttons für Antworten
   • Validierung: Alle Fragen müssen beantwortet werden

3. Auswertung

   • Zähle richtige Antworten
   • Zeige Prozent-Punktzahl
   • Zeige welche Fragen richtig/falsch waren
   • Zeige die richtigen Antworten

4. Ergebnis-Seite

   • Zusammenfassung der Leistung
   • Visuelle Darstellung (z.B. farbige Balken)
   • Button um Quiz neu zu starten

Bonus-Features (optional):

• Highscore-Liste (beste Ergebnisse speichern)
• Timer für Quiz (z.B. 2 Minuten)
• Kategorien-Auswahl (nur Fragen einer Kategorie)
• Schwierigkeitsgrade
• Zufällige Reihenfolge der Fragen
• Zeige nur X zufällige Fragen (nicht alle)

Technologien:

• Liste von Dictionaries für Fragen
• Funktionen für Auswertung
• Jinja-Schleifen für Fragen/Ergebnisse
• Bedingungen für richtig/falsch
• Berechnungen (Prozent)

Option 3: Mini-Shop

Beschreibung: Ein einfacher Online-Shop mit Produkten und Warenkorb.

Mindest-Funktionen:

1. Produkt-Katalog

   • Mindestens 10 Produkte
   • Jedes Produkt hat: Name, Preis, Beschreibung, Kategorie
   • Produkte in Kategorien anzeigen
   • Suchfunktion (nach Name)

2. Warenkorb

   • Produkte zum Warenkorb hinzufügen
   • Warenkorb anzeigen (alle hinzugefügten Produkte)
   • Anzahl pro Produkt anzeigen
   • Gesamtpreis berechnen und anzeigen

3. Produkt-Detail-Seite

   • Einzelne Seite pro Produkt
   • Zeige alle Produktinformationen
   • Button “In den Warenkorb”

4. Checkout

   • Formular mit Name, Adresse, E-Mail
   • Validierung aller Felder
   • Bestellbestätigung mit Zusammenfassung

Bonus-Features (optional):

• Filter nach Kategorie
• Sortierung (nach Preis, Name)
• Anzahl im Warenkorb ändern (erhöhen/verringern)
• Produkt aus Warenkorb entfernen
• Bewertungen/Sterne für Produkte
• Produktbilder (URL zu Bildern)

Technologien:

• Liste von Dictionaries für Produkte
• Globale Liste für Warenkorb
• Funktionen für Berechnungen
• Jinja-Schleifen für Produkte
• Formulare mit Validierung
• URL-Parameter für Produkt-IDs

Bewertungskriterien

Dein Projekt wird nach folgenden Kriterien bewertet:

1. Funktionalität (40 Punkte)

• Vollständigkeit (20 Punkte)

  • Alle Mindest-Funktionen implementiert
  • Funktionen arbeiten korrekt
  • Keine kritischen Bugs

• Datenvalidierung (10 Punkte)

  • Eingaben werden validiert
  • Fehlerhafte Eingaben führen nicht zum Absturz
  • Sinnvolle Fehlermeldungen

• Benutzerführung (10 Punkte)

  • App ist intuitiv bedienbar
  • Navigation funktioniert
  • Feedback für Benutzeraktionen

2. Code-Qualität (30 Punkte)

• Struktur & Organisation (10 Punkte)

  • Code ist logisch organisiert
  • Funktionen werden sinnvoll genutzt
  • Keine Wiederholungen (DRY-Prinzip)

• Lesbarkeit (10 Punkte)

  • Aussagekräftige Variablen-Namen
  • Kommentare wo nötig
  • Einheitlicher Code-Stil

• Flask-Best-Practices (10 Punkte)

  • Template-Vererbung genutzt
  • URL-Parameter korrekt verwendet
  • Post-Redirect-Get Pattern
  • Statische Dateien korrekt eingebunden

3. Design & User Experience (20 Punkte)

• Visuelles Design (10 Punkte)

  • CSS sinnvoll eingesetzt
  • Konsistentes Aussehen
  • Übersichtliche Layouts

• Benutzererfahrung (10 Punkte)

  • Fehler werden klar kommuniziert
  • Erfolgs-Feedback wird gegeben
  • Navigation ist logisch

4. Dokumentation (10 Punkte)

• README-Datei (5 Punkte)

  • Beschreibt was die App macht
  • Erklärt wie man sie startet
  • Listet verwendete Technologien

• Code-Kommentare (5 Punkte)

  • Wichtige Funktionen dokumentiert
  • Komplexe Logik erklärt

Projekt-Struktur

Dein Projekt sollte folgende Struktur haben:

mein_projekt/
│
├── app.py                 # Haupt-Flask-App
├── README.md              # Projekt-Dokumentation
│
├── templates/
│   ├── base.html          # Basis-Template
│   ├── home.html          # Startseite
│   └── ...                # Weitere Templates
│
└── static/
    ├── style.css          # Haupt-Stylesheet
    └── ...                # Weitere CSS/Bilder

templates/
├── base.html
├── layouts/
│   ├── header.html
│   └── footer.html
└── pages/
    ├── home.html
    ├── ...

Zeitplan & Vorgehensweise

Empfohlener Zeitplan (3-4 Stunden)

Phase 1: Planung (30 Minuten)

• Projekt-Option wählen
• Features definieren
• Datei-Struktur skizzieren
• Datenmodell überlegen (welche Listen/Dictionaries?)

Phase 2: Grundgerüst (30 Minuten)

• app.py und Ordner erstellen
• base.html mit Navigation
• Basis-CSS für Layout
• Erste Route / erstellen

Phase 3: Haupt-Features (90 Minuten)

• CRUD-Operationen implementieren
• Formulare mit Validierung
• Templates erstellen
• Daten speichern/abrufen

Phase 4: Design & Polish (30 Minuten)

• CSS verbessern
• Fehlerbehandlung testen
• User Experience optimieren
• Konsistenz prüfen

Phase 5: Testing & Dokumentation (30 Minuten)

• Alle Features testen
• Bugs fixen
• README schreiben
• Code kommentieren

Schritt-für-Schritt Anleitung

Schritt 1: Projekt initialisieren

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

# Ordner erstellen
mkdir mein_flask_projekt
cd mein_flask_projekt

# Unterordner erstellen
mkdir templates static

# Dateien erstellen
touch app.py README.md
touch templates/base.html templates/home.html
touch static/style.css

Schritt 2: Basis-Setup (app.py)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

# app.py
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

# Datenstrukturen (Beispiel für To-Do-Liste)
todos = []

@app.route("/")
def home():
    return render_template("home.html")

if __name__ == "__main__":
    app.run(debug=True)

Schritt 3: Basis-Template (base.html)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Mein Projekt{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <h1 class="logo">Mein Projekt</h1>
            <ul class="nav-links">
                <li><a href="/">Home</a></li>
                <!-- Weitere Links hier -->
            </ul>
        </div>
    </nav>

    <main class="container">
        {% block content %}{% endblock %}
    </main>

    <footer>
        <p>&copy; 2025 Mein Flask-Projekt</p>
    </footer>
</body>
</html>

Schritt 4: Basis-CSS (style.css)

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

/* static/style.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    background-color: #333;
    color: white;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

.nav-links a:hover {
    color: #ddd;
}

/* Main Content */
main {
    min-height: calc(100vh - 200px);
    background-color: white;
    padding: 2rem;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    color: #666;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-danger {
    background-color: #dc3545;
    color: white;
}

.btn-success {
    background-color: #28a745;
    color: white;
}

/* Forms */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

/* Messages */
.fehler-box {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.erfolg-box {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

Schritt 5: README schreiben

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

# Mein Flask-Projekt

## Beschreibung
[Beschreibe dein Projekt in 2-3 Sätzen]

## Features
- Feature 1
- Feature 2
- ...

## Installation & Start

1. Flask installieren:
   ```bash
   pip install flask

2. App starten:

   1	python app.py

3. Browser öffnen:

   http://localhost:5000

Verwendete Technologien

• Python 3
• Flask
• HTML/CSS
• Jinja2 Templates

Autor

[Dein Name]

---

## Hilfreiche Code-Beispiele

### CRUD-Operationen für To-Do-Liste

```python
# CREATE - Neues To-Do hinzufügen
@app.route("/todos/neu", methods=['POST'])
def todo_erstellen():
    titel = request.form.get('titel', '').strip()
    beschreibung = request.form.get('beschreibung', '').strip()

    if len(titel) < 3:
        return render_template("fehler.html", fehler="Titel zu kurz")

    todo = {
        "id": len(todos) + 1,
        "titel": titel,
        "beschreibung": beschreibung,
        "erledigt": False
    }
    todos.append(todo)

    return redirect(url_for('todos_anzeigen'))


# READ - Alle To-Dos anzeigen
@app.route("/todos")
def todos_anzeigen():
    return render_template("todos.html", todos=todos)


# UPDATE - To-Do als erledigt markieren
@app.route("/todos/<int:todo_id>/erledigt")
def todo_erledigen(todo_id):
    for todo in todos:
        if todo["id"] == todo_id:
            todo["erledigt"] = not todo["erledigt"]
            break

    return redirect(url_for('todos_anzeigen'))


# DELETE - To-Do löschen
@app.route("/todos/<int:todo_id>/loeschen")
def todo_loeschen(todo_id):
    global todos
    todos = [t for t in todos if t["id"] != todo_id]

    return redirect(url_for('todos_anzeigen'))

Berechnungen im Warenkorb

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

def berechne_gesamtpreis(warenkorb, produkte):
    """Berechnet den Gesamtpreis aller Artikel im Warenkorb"""
    gesamt = 0

    for artikel in warenkorb:
        produkt_id = artikel["produkt_id"]
        anzahl = artikel["anzahl"]

        # Finde Produkt in der Produktliste
        produkt = next((p for p in produkte if p["id"] == produkt_id), None)

        if produkt:
            gesamt += produkt["preis"] * anzahl

    return round(gesamt, 2)

Quiz auswerten

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

def werte_quiz_aus(fragen, antworten):
    """
    Wertet Quiz aus und gibt Ergebnis zurück

    Args:
        fragen: Liste von Fragen-Dictionaries
        antworten: Dictionary mit Benutzer-Antworten

    Returns:
        Dictionary mit Auswertung
    """
    richtig = 0
    details = []

    for i, frage in enumerate(fragen):
        benutzer_antwort = antworten.get(f'frage_{i}')
        ist_richtig = benutzer_antwort == frage["richtig"]

        if ist_richtig:
            richtig += 1

        details.append({
            "frage": frage["frage"],
            "deine_antwort": benutzer_antwort,
            "richtige_antwort": frage["richtig"],
            "ist_richtig": ist_richtig
        })

    prozent = round((richtig / len(fragen)) * 100) if fragen else 0

    return {
        "richtig": richtig,
        "gesamt": len(fragen),
        "prozent": prozent,
        "details": details
    }

Häufige Probleme & Lösungen

Problem 1: Daten gehen verloren beim Neustarten

Ursache: Globale Listen werden beim Server-Neustart geleert.

Lösung: Das ist für dieses Projekt OK! In echten Apps würdest du eine Datenbank verwenden.

Workaround (optional): Speichere Daten in einer JSON-Datei:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import json

def daten_speichern(daten, dateiname="daten.json"):
    with open(dateiname, 'w') as f:
        json.dump(daten, f)

def daten_laden(dateiname="daten.json"):
    try:
        with open(dateiname, 'r') as f:
            return json.load(f)
    except FileNotFoundError:
        return []

Problem 2: Templates finden die CSS-Datei nicht

Lösung: Prüfe:

1. Liegt style.css im static/ Ordner?
2. Verwendest du {{ url_for('static', filename='style.css') }}?
3. Ist der Flask-Server neu gestartet?

Problem 3: POST-Formular funktioniert nicht

Lösung: Prüfe:

1. Route akzeptiert POST: methods=['GET', 'POST']
2. Form hat method="POST"
3. Input-Felder haben name-Attribute
4. Du verwendest request.form.get('name')

Abgabe-Checkliste

Bevor du dein Projekt abgibst, gehe diese Checkliste durch:

Funktionalität

• Alle Mindest-Features funktionieren
• Keine kritischen Bugs
• Validierung funktioniert
• Fehlerbehandlung vorhanden

Code-Qualität

• Code ist organisiert und lesbar
• Funktionen haben aussagekräftige Namen
• Keine Wiederholungen im Code
• Kommentare wo nötig

Templates & Design

• Base-Template wird verwendet
• Navigation funktioniert
• CSS ist eingebunden
• Design ist konsistent

Dokumentation

• README.md ist vorhanden
• README erklärt das Projekt
• Installations-Anleitung ist klar
• Wichtige Funktionen sind kommentiert

Testing

• Alle Features manuell getestet
• Formulare mit verschiedenen Eingaben getestet
• Validierung funktioniert bei falschen Eingaben
• Navigation zwischen Seiten funktioniert

Inspiration & Beispiele

Design-Inspiration

• Bootstrap Dokumentation - für Layout-Ideen
• CSS-Tricks - für CSS-Techniken
• Schaue dir echte Web-Apps an und überlege, was du magst

Feature-Ideen

Für alle Projekte:

• Dark Mode / Light Mode Toggle
• Suchfunktion
• Sortier-Optionen
• Filter-Funktionen
• Statistiken/Dashboards
• Export-Funktionen (z.B. als Text-Datei)

To-Do-Liste:

• Kategorien/Tags für Aufgaben
• Wiederholende Aufgaben
• Unteraufgaben
• Farbcodes für Prioritäten

Quiz-App:

• Verschiedene Quiz-Kategorien
• Schwierigkeitsgrade
• Bestenliste
• Timer pro Frage
• Erklärungen zu Antworten

Shop:

• Produktbewertungen
• Sonderangebote
• Gutschein-Codes
• Produktvergleich
• Wunschliste

Nach dem Projekt

Was du gelernt hast

Durch dieses Projekt hast du praktische Erfahrung gesammelt mit:

• Flask-Routen und Request-Handling
• Template-Vererbung und Jinja-Syntax
• Formular-Verarbeitung und Validierung
• Datenstrukturen (Listen, Dictionaries)
• CRUD-Operationen
• CSS-Styling
• Projekt-Organisation

Nächste Schritte

Wenn du mehr lernen möchtest:

1. Datenbanken: Lerne SQLite oder PostgreSQL für persistente Datenspeicherung
2. Flask-Extensions: Entdecke Flask-Login, Flask-WTF, Flask-SQLAlchemy
3. JavaScript: Füge Interaktivität hinzu (z.B. ohne Seiten-Reload)
4. Deployment: Veröffentliche deine App online (z.B. auf Render, PythonAnywhere)
5. REST APIs: Erstelle Backend-APIs für Frontend-Frameworks

Zusammenfassung