Musisz rozwinąć pulpit sieciowy przy użyciu Pythona i Flaska.

Pulpit to strona internetowa wyświetlająca informacje w przejrzysty sposób. W tym zadaniu otrzymasz dane przykładowe dotyczące różnych urządzeń w sieci oraz użyjesz Flaska i Jiny do prezentacji tych informacji.

Celem nie jest jeszcze stworzenie prawdziwego systemu monitorowania. Tutaj przede wszystkim ćwiczysz:

• Flask
• trasy (routes)
• sablony (templates)
• przesyłanie informacji z Pythona do HTML-a
• sprawdzania warunków (if) i pętli (for) w Jince
• tworzenie uporządkowanej i łatwej w obsłudze strony internetowej

Dane, których możesz użyć ✅

devices = [
    {
        "name": "Główne routery",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Router",
        "status": "online",
        "response_time": 12,
        "location": "Pomieszczenie serwerowe",
        "last_checked": "14:32:10",
        "uptime": "12 dni",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Główny router sieci"
    },
    {
        "name": "Serwer WWW",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Serwer",
        "status": "online",
        "response_time": 34,
        "location": "Pomieszczenie serwerowe",
        "last_checked": "14:32:12",
        "uptime": "4 dni",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Uruchamia wewnętrzny serwis internetowy"
    },
    {
        "name": "Drukarka",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Drukarka",
        "status": "offline",
        "response_time": None,
        "location": "Sala lekcyjna 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Nieznany",
        "notes": "Brak odpowiedzi przy ostatniej kontroli"
    },
    {
        "name": "PC nauczyciela",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Komputer",
        "status": "online",
        "response_time": 18,
        "location": "Sala lekcyjna 204",
        "last_checked": "14:32:16",
        "uptime": "6 godzin",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Serwer magazynowania danych",
        "status": "warning",
        "response_time": 87,
        "location": "Pomieszczenie serwerowe",
        "last_checked": "14:32:18",
        "uptime": "38 dni",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Wysoki czas odpowiedzi"
    }
]

Nie musisz wyświetlać wszystkich informacji. Sam zdecyduj, co pasuje do Twojego panelu sterowania. Możesz również modyfikować, dodawać lub usuwać dane, jeśli chcesz, albo jeśli uważasz, że część danych jest nieprecyzyjna (np.: może czas aktywności powinien być wyrażony w sekundach? 🤔).

Zadanie

1. Utwórz panel sterowania (dashboard)

Stwórz stronę internetową wyświetlającą informacje o urządzeniach w sieci.

Sposób prezentacji panelu jest dowolny.

Możesz na przykład użyć:

• kart dla każdego urządzenia
• tabeli
• wskaźników stanu
• sekcji
• ikon
• kolorów
• statystyk lub podsumowań

Panel musi być łatwy do zrozumienia po otwarciu strony przez użytkownika.

2. Użycie Flaska i tras

Aplikacja ma używać Flaska.

Musisz mieć co najmniej:

• jedną trasę wyświetlającą stronę główną/pulpit nawigacyjny (dashboard)
• jedną dodatkową trasę z inną funkcją

Do Ciebie należy decyzja o przeznaczeniu tej dodatkowej trasy.

Może ona na przykład:

• wyświetlać informacje o jednym konkretnym urządzeniu
• wyświetlać tylko urządzenia offline
• wyświetlać osobną stronę statusu
• wyświetlać bardziej szczegółowe informacje
• wyświetlać prostą stronę „o nas” (about)

3. Używanie szablonów

Strony HTML powinny znajdować się w folderze o nazwie templates.

Dane należy przesyłać z kodu Python do szablonu za pomocą Flask. Należy używać Jinji, aby wyświetlać informacje dynamicznie.

Rozwiązanie powinno korzystać z:

• zmiennych
• pętli for
• sprawdzania warunku if

Oznacza to, że informacji o wszystkich urządzeniach należy wpisywać ręcznie w kodzie HTML.

4. Wyświetlaj status w wyraźny sposób

Pulpit powinien umożliwiać łatwe sprawdzanie stanu urządzeń.

Na przykład:

• 🟢 Online
• 🟡 Ostrzeżenie
• 🔴 Offline

Możesz użyć tekstu, CSS, ikon lub innych rozwiązań wizualnych.

5. Uczyń dashboard swoim własnym

Nie ma jednego właściwego sposobu na rozwiązanie tego zadania.

Przemyśl:

• Które informacje są najważniejsze?
• Co użytkownik powinien zobaczyć najpierw?
• Czego nie trzeba pokazywać?
• Jak można jasno wyświetlić status?
• Jak strona może być uporządkowana, nawet jeśli istnieje wiele urządzeń?
• Możesz użyć CSS i ewentualnie JavaScript, jeśli chcesz.

Wymagania

Rozwiązanie musi:

• korzystać z Pythona i Flaska
• używać co najmniej dwóch tras (routes)
• używać co najmniej jednego szablonu HTML
• przesyłać dane z Pythona do szablonu
• korzystać z Jiny
• używać co najmniej jednej pętli <emp>for</emp>
• używać co najmniej jednej instrukcji warunkowej <emp>if</emp>
• wyświetlać wiele jednostek danych z zestawu danych
• mieć wyraźny sposób na wyświetlanie stanu

Gotowe?

Dostawa