Debes desarrollar un panel de control de red utilizando Python y Flask.

Un panel de control es una página web que muestra información de manera clara y organizada. En esta tarea se te proporcionarán datos de ejemplo sobre diferentes dispositivos en una red, y deberás usar 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": "Enrutador",
        "status": "online",
        "response_time": 12,
        "location": "Sala de servidores",
        "last_checked": "14:32:10",
        "uptime": "12 días",
        "open_ports": [53, 80, 443],
        "os": "RouterOS",
        "notes": "Ruta principal de la red"
    },
    {
        "name": "Servidor web",
        "ip": "192.168.1.20",
        "hostname": "webserver.local",
        "device_type": "Servidor",
        "status": "online",
        "response_time": 34,
        "location": "Sala de servidores",
        "last_checked": "14:32:12",
        "uptime": "4 días",
        "open_ports": [22, 80, 443],
        "os": "Ubuntu Server",
        "notes": "Ejecuta 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 verificación"
    },
    {
        "name": "PC del 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 de servidores",
        "last_checked": "14:32:18",
        "uptime": "38 días",
        "open_ports": [22, 80, 443, 445],
        "os": "TrueNAS",
        "notes": "Tiempo de respuesta alto"
    }
]

No necesitas mostrar toda la información. Elige tú lo que se ajuste a tu panel de control. También puedes modificar, agregar o eliminar datos si deseas, o si consideras que algunos son inexactos (por ejemplo: ¿quizás el tiempo activo 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. Usar 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 detalles
• mostrar una simple página “acerca de” (about)

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. Muestra el estado de manera clara

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

Por ejemplo:

• 🟢 En línea
• 🟡 Advertencia
• 🔴 Desconectado

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

5. Haz el panel de control tuyo

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

Piensa en lo siguiente:

• ¿Qué información es la más importante?
• ¿Qué debería 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 (routes)
• usar al menos una plantilla HTML
• enviar datos desde Python a la plantilla
• usar Jinja
• usar al menos un bucle for (for)
• usar al menos una comprobación de condición (if) (if)
• mostrar varias entidades del conjunto de datos
• tener una forma clara de mostrar el estado

¿Listo?

Entrega