Debes desarrollar un panel de red utilizando Python y Flask.

Un panel es una página web que muestra información de manera clara y concisa. En esta tarea se te proporcionarán datos de ejemplo sobre diferentes dispositivos de la red, y deberás utilizar Flask y Jinja para presentar dicha información.

El objetivo no es crear aún un sistema real de monitoreo. Aquí el enfoque principal será practicar lo siguiente:

• Flask
• rutas (routes)
• plantillas (templates)
• enviar información desde Python a HTML
• comprobaciones con if y bucles for en Jinja
• crear una página web ordenada y fácil de usar

Datos que puedes usar ✅

devices = [
    {
        "name": "Rutas principales",
        "ip": "192.168.1.1",
        "hostname": "router.local",
        "device_type": "Router",
        "status": "online",
        "response_time": 12,
        "location": "Sala del servidor",
        "last_checked": "14:32:10",
        "uptime": "12 días",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Ruta principal para la red"
    },
    {
        "name": "Servidor web",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Servidor",
        "status": "online",
        "response_time": 34,
        "location": "Sala del servidor",
        "last_checked": "14:32:12",
        "uptime": "4 días",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Ejecutando sitio web interno"
    },
    {
        "name": "Impresora",
        "ip": "192.168.1.50",
        "hostname": "printer-01.local",
        "device_type": "Impresora",
        "status": "offline",
        "response_time": None,
        "location": "Aula 204",
        "last_checked": "14:32:14",
        "uptime": None,
        "open_ports": [],
        "os": "Desconocido",
        "notes": "No respondió en la última comprobación"
    },
    {
        "name": "PC de profesor",
        "ip": "192.168.1.101",
        "hostname": "teacher-pc.local",
        "device_type": "Equipo informático",
        "status": "online",
        "response_time": 18,
        "location": "Aula 204",
        "last_checked": "14:32:16",
        "uptime": "6 horas",
        "open_ports": [445],
        "os": "Windows 11",
        "notes": ""
    },
    {
        "name": "NAS",
        "ip": "192.168.1.30",
        "hostname": "storage.local",
        "device_type": "Servidor de almacenamiento",
        "status": "warning",
        "response_time": 87,
        "location": "Sala del servidor",
        "last_checked": "14:32:18",
        "uptime": "38 días",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Tiempo de respuesta alto"
    }
]

No es necesario mostrar toda la información. Elige tú lo que mejor se adapte a tu panel de control. También puedes modificar, agregar o eliminar datos si deseas, o si consideras que algunos de los datos son imprecisos (ej.: ¿quizás el tiempo de actividad debería estar en segundos? 🤔).

La tarea

1. Crea un panel de control (dashboard)

Crea una página web que muestre información sobre los dispositivos en la red.

El aspecto del panel de control es decisión tuya.

Por ejemplo, puedes utilizar:

• tarjetas para cada dispositivo
• tablas
• indicadores de estado
• secciones
• iconos
• colores
• estadísticas o resúmenes

El panel de control debe ser fácil de entender cuando alguien abra la página.

2. Usa Flask y rutas

La aplicación debe usar Flask.

Debes tener al menos:

• una ruta que muestre la página principal/tablero de control (dashboard)
• una ruta adicional con otra función

Tú decides para qué se utiliza la ruta adicional.

Por ejemplo, puede:

• mostrar información sobre un dispositivo específico
• mostrar solo los dispositivos que están fuera de línea
• mostrar una página de estado propia
• mostrar más información detallada
• mostrar una sencilla página “acerca de”

3. Usa plantillas

Las páginas HTML deben estar en una carpeta llamada plantillas.

Los datos se enviarán desde el código de Python a la plantilla mediante Flask. Debes usar Jinja para mostrar la información dinámicamente.

La solución debe utilizar:

• variables
• un bucle for
• una comprobación if

Por lo tanto, no debes escribir manualmente la información sobre todos los dispositivos en el código HTML.

4. Mostrar el estado de manera clara

El panel debe facilitar la visualización del estado de los dispositivos.

Por ejemplo:

• 🟢 En línea
• 🟡 Advertencia
• 🔴 Fuera de línea

Puedes usar texto, CSS, iconos u otras soluciones visuales.

5. Haz el panel de control tuyo

No hay una única forma correcta de resolver esta tarea.

Piensa en lo siguiente:

• ¿Qué información es la más importante?
• ¿Qué debe ver primero el usuario?
• ¿Qué no necesita mostrarse?
• ¿Cómo puede mostrarse el estado con claridad?
• ¿Cómo puede mantenerse limpia la página aunque haya muchos dispositivos?
• Puedes usar CSS y, si lo deseas, también JavaScript.

Requisitos

La solución debe:

• usar Python y Flask
• usar al menos dos rutas
• usar al menos una plantilla HTML
• enviar datos desde Python a la plantilla
• usar Jinja
• usar al menos un bucle for
• usar al menos una comprobación if
• mostrar varias unidades del conjunto de datos
• tener una forma clara de mostrar el estado

¿Listo?

Entrega