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

Ein Dashboard ist eine Webseite, die Informationen auf übersichtliche Weise anzeigt. In dieser Aufgabe erhältst du Beispieldaten zu verschiedenen Geräten in einem Netzwerk und nutzt Flask sowie Jinja, um diese Information darzustellen.

Das Ziel besteht nicht darin, bereits ein echtes Überwachungssystem zu erstellen. Hier übst du vor allem Folgendes:

• Flask
• Routen
• Vorlagen
• das Senden von Informationen von Python nach HTML
• if-Prüfungen und for-Schleifen in Jinja
• die Erstellung einer ordentlichen 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 Webseite"
    },
    {
        "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": "Reagierte nicht bei letzter Überprü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 die Daten auch ändern, hinzufügen oder entfernen, falls gewünscht, oder wenn 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 über die Geräte 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 sollte leicht verständlich sein, wenn jemand die Seite öffnet.

2. Verwende Flask und Routen

Die Anwendung soll Flask verwenden.

Sie muss mindestens enthalten:

• eine Route für die Hauptseite/Dashboard-Ansicht
• eine zusätzliche Route mit einer anderen Funktion

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

Diese 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. Verwendung von Templates

Die HTML-Seiten sollen sich in einem Ordner namens templates befinden.

Die Daten müssen über Flask vom Python-Code an das Template gesendet werden. Du sollst Jinja verwenden, um die Informationen dynamisch darzustellen.

Die Lösung muss Folgendes nutzen:

• Variablen
• eine for-Schleife
• einen if-Check

Du solltest also nicht die Informationen zu allen Geräten manuell im HTML-Code eingeben.

4. Status auf eine klare Weise anzeigen

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

Zum Beispiel:

• 🟢 Online
• 🟡 Warnung
• 🔴 Offline

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

5. Mache das Dashboard zu deinem eigenen

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 Status klar dargestellt werden?
• Wie kann die Seite aufgeräumt bleiben, obwohl es viele Geräte gibt?
• Du kannst CSS und gegebenenfalls JavaScript verwenden, wenn 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 übergeben
• Jinja verwenden
• mindestens eine for-Schleife verwenden
• mindestens einen if-Check verwenden
• mehrere Einheiten aus dem Datensatz anzeigen
• eine klare Möglichkeit bieten, den Status anzuzeigen

Fertig?

Lieferung