Musisz stworzyć pulpit sieciowy za pomocą 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 tworzenie prawdziwego systemu monitoringu. Głównym celem tego ćwiczenia jest opanowanie następujących elementów:

• Flaska
• tras (routes)
• sztampów (templates)
• przesyłania informacji z Pythona do HTML-a
• warunków if i pętli for w Jinnie
• tworzenia porządkowanej i łatwej w użyciu 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ętrzną stronę internetową"
    },
    {
        "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 stacjonarny",
        "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 wybierz, co najlepiej pasuje do Twojego pulpitu. Możesz również modyfikować, dodawać lub usuwać dane, jeśli chcesz, albo uważasz, że niektóre z nich są nieprecyzyjne (np.: być może czas aktywności powinien być wyrażony w sekundach? 🤔).

Zadanie

1. Utwórz pulpit nawigacyjny (dashboard)

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

To, jak ma wyglądać panel, zależy od Ciebie.

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

• 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żyj Flaska i tras (routes)

Aplikacja powinna używać Flaska.

Musisz mieć co najmniej:

• jedną trasę wyświetlającą stronę główną/pulpit nawigacyjny
• 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 będące offline
• wyświetlać własną stronę statusu
• wyświetlać bardziej szczegółowe informacje
• wyświetlać prostą stronę „o aplikacji” (about)

3. Użyj szablonów

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

Dane muszą być przesyłane z kodu Pythona do szablona za pomocą Flask. Należy użyć Jinji, aby dynamicznie wyświetlać informacje.

Rozwiązanie powinno korzystać z:

• zmiennych
• pętli for
• sprawdzenia warunku if

Nie należy więc ręcznie wpisywać informacji o wszystkich urządzeniach bezpośrednio w kodzie HTML.

4. Wyświetlaj stan w czytelny sposób

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

Na przykład:

• 🟢 Online
• 🟡 Ostrzeżenie
• 🔴 Offline

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

5. Zrób z dashboardu coś własnego

Nie istnieje jeden właściwy sposób rozwiązania tego zadania.

Przemyśl:

• Które informacje są najważniejsze?
• Co użytkownik powinien zobaczyć jako pierwsze?
• Czego nie trzeba wyświetlać?
• Jak można jasno pokazać status?
• Jak strona może pozostać uporządkowana, nawet jeśli znajduje się na niej wiele urządzeń?
• Możesz używać CSS i ewentualnie JavaScript, jeśli chcesz.

Wymagania

Rozwiązanie powinno:

• używać Pythona i Flaska
• zawierać co najmniej dwie trasy (routes)
• używać co najmniej jednego szablonu HTML
• przesyłać dane z Pythona do szablonu
• używać Jiny
• zawierać co najmniej jedną pętlę <emp>for</emp>
• zawierać co najmniej jedno sprawdzenie <emp>if</emp>
• wyświetlać wiele elementów z zestawu danych
• posiadać wyraźny sposób wyświetlania stanu

Gotowe?

Dostawa