Du soll ein Netzwerk-Dashboard mithilfe von Python und Flask entwickeln.

Ein Dashboard ist eine Webseite, die Informationen auf übersichtliche Weise anzeigt. In dieser Aufgabe werden Ihnen Beispieldaten zu verschiedenen Geräten in einem Netzwerk bereitgestellt, welche Sie mit Flask und Jinja präsentieren sollen.

Das Ziel besteht noch nicht darin, ein echtes Überwachungssystem zu erstellen. Hier üben Sie vor allem Folgendes:

• Flask
• Routen
• Vorlagen (Templates)
• das Senden von Informationen aus Python nach HTML
• If-Prüfungen und For-Schleifen in Jinja
• die Erstellung einer sauberen und benutzerfreundlichen Webseite

Daten, die Sie verwenden können ✅

devices = [
    {
        "name": "Hauptrouter",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Router",
        "status": "online",
        "response_time": 12,
        "location": "Serverraum",
        "last_checked": "14:32:10",
        "uptime": "12 Tage",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Hauptrouter für das Netzwerk"
    },
    {
        "name": "Webserver",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Server",
        "status": "online",
        "response_time": 34,
        "location": "Serverraum",
        "last_checked": "14:32:12",
        "uptime": "4 Tage",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Betreibt interne Website"
    },
    {
        "name": "Drucker",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Drucker",
        "status": "offline",
        "response_time": None,
        "location": "Klassenzimmer 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Unbekannt",
        "notes": "Keine Antwort bei letzter Prüfung"
    },
    {
        "name": "Lehrer-PC",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Computer",
        "status": "online",
        "response_time": 18,
        "location": "Klassenzimmer 204",
        "last_checked": "14:32:16",
        "uptime": "6 Stunden",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Speicherserver",
        "status": "warning",
        "response_time": 87,
        "location": "Serverraum",
        "last_checked": "14:32:18",
        "uptime": "38 Tage",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Hohe Antwortzeit"
    }
]

Sie müssen nicht alle Informationen anzeigen. Wählen Sie selbst aus, was zu Ihrem Dashboard passt. Sie können auch Daten ändern, hinzufügen oder entfernen, wenn Sie möchten, oder weil Sie der Meinung sind, dass einige Daten ungenau sind (z. B.: Sollte die Uptime in Sekunden angegeben werden? 🤔).

Die Aufgabe

1. Erstellen Sie ein Dashboard

Erstellen Sie eine Website, die Informationen zu den Geräten im Netzwerk anzeigt.

Wie das Dashboard aussehen soll, liegt bei Ihnen.

Sie können beispielsweise Folgendes verwenden:

• Karten für jedes Gerät
• Tabellen
• Statusanzeigen
• Abschnitte
• Symbole
• Farben
• Statistiken oder Zusammenfassungen

Das Dashboard muss einfach verständlich sein, wenn jemand die Seite öffnet.

2. Verwende Flask und Routen

Die Anwendung soll Flask verwenden.

Es müssen mindestens vorhanden sein:

• eine Route, die die Hauptseite/Dashboard anzeigt
• eine zusätzliche Route mit einer anderen Funktion

Wofür die zusätzliche Route verwendet wird, bestimmst du selbst.

Sie kann beispielsweise:

• Informationen über ein bestimmtes Gerät anzeigen
• nur Geräte anzeigen, die offline sind
• eine eigene Statusseite anzeigen
• detailliertere Informationen anzeigen
• eine einfache „About“-Seite anzeigen

3. Nutzung von Templates

Die HTML-Seiten müssen sich in einem Ordner namens templates befinden.

Die Daten sollen über Flask vom Python-Code an das Template gesendet werden. Sie sollen Jinja verwenden, um die Informationen dynamisch darzustellen.

Die Lösung soll Folgendes enthalten:

• Variablen
• eine for-Schleife
• eine if-Prüfung

Sie dürfen also die Informationen zu allen Geräten nicht manuell im HTML-Code eingeben.

4. Status klar anzeigen

Das Dashboard soll es einfach machen, den Status der Geräte zu sehen.

Zum Beispiel:

• 🟢 Online
• ⚠️ Warnung (Note: The original uses a yellow circle emoji, I will keep it exactly as is) -> - 🟡 Warnung
• 🔴 Offline

Sie können Text, CSS, Symbole oder andere visuelle Lösungen verwenden.

5. Gestalte das Dashboard nach deinen Vorstellungen

Es gibt nicht den einen richtigen Weg, um diese Aufgabe zu lösen.

Denke darüber nach:

• Welche Informationen sind am wichtigsten?
• Was sollte der Benutzer zuerst sehen?
• Was muss nicht angezeigt werden?
• Wie kann der Status klar dargestellt werden?
• Wie kann die Seite aufgeräumt bleiben, selbst wenn es viele Geräte gibt?
• Du kannst CSS und bei Bedarf JavaScript verwenden, falls du möchtest.

Anforderungen

Die Lösung soll:

• Python und Flask verwenden
• mindestens zwei Routen verwenden
• mindestens eine HTML-Vorlage verwenden
• Daten von Python an die Vorlage senden
• Jinja verwenden
• mindestens eine Schleife(For-Schleife) verwenden
• mindestens einen If-Check verwenden
• mehrere Einheiten aus dem Datensatz anzeigen
• eine klare Methode zur Anzeige des Status haben

Fertig?

Lieferung