Saltar a contenido

🎨 Lab 03: Bootstrap Dashboard - Tu Centro de Comando

Escenario de Misión

Eres el Dashboard Architect de Atlantyqa. Tienes datos procesados y ahora debes crear un centro de comando visual donde los analistas puedan explorar insights sin tocar una línea de código. Tu misión: levantar un dashboard operativo en menos de 5 minutos.

1. 🗺️ Mapa de Arquitectura

Visualiza cómo los componentes se conectan.

graph TD
    User[👤 Analista] -->|Browser| UI[📊 Streamlit UI]
    UI -->|Lee| Insights[📂 outputs/insights/]
    UI -->|Verifica| Auth[🔐 Token Auth]
    Insights -->|Renderiza| Charts[📈 Gráficos]

    style User fill:#e7ae4c,stroke:#333,stroke-width:2px,color:#fff
    style UI fill:#37a880,stroke:#333,stroke-width:2px,color:#fff
    style Insights fill:#f1f5f9,stroke:#333,stroke-width:2px,color:#182232
    style Auth fill:#e0e7ff,stroke:#333,stroke-width:2px,color:#182232
    style Charts fill:#f1f5f9,stroke:#182232,stroke-width:2px,color:#182232

2. ⚔️ Ejecución de la Misión

Sigue los pasos para levantar tu dashboard.

Si no tienes datos del Lab 01/02, genera datos de demostración.

# Ingesta demo
python cogctl.py ingest sample_report.pdf

# Análisis
python cogctl.py analyze

Verificación: Confirma que existe outputs/insights/analysis.json

Para modo desarrollo, no necesitas autenticación. Para producción:

# En PowerShell
$env:COGNITIVE_ENV="prod"
$env:COGNITIVE_UI_TOKEN_ADMIN="mi_token_secreto_123"

# En Bash
export COGNITIVE_ENV=prod
export COGNITIVE_UI_TOKEN_ADMIN=mi_token_secreto_123

Ejecuta Streamlit y abre el navegador.

streamlit run frontend/streamlit_app.py --server.port 8501

Acceso: Abre tu navegador en http://localhost:8501

Deberías ver: * 📊 Gráfico de entidades detectadas * 📈 Timeline de eventos * 🚨 Alertas de riesgo (si las hay) * 📄 Resumen ejecutivo

Edita frontend/streamlit_app.py para añadir tu propio widget.

import streamlit as st
import json

# Cargar datos
with open('outputs/insights/analysis.json') as f:
    data = json.load(f)

# Tu widget personalizado
st.subheader("🎯 Mi Métrica Custom")
st.metric("Total Entidades", len(data.get('entities', [])))

Hot Reload: Streamlit recarga automáticamente al guardar cambios.

3. 📸 Evidencia de Cumplimiento

Para reclamar tu recompensa (75 XP), debes presentar pruebas.

Checklist de Entrega

  • [ ] Screenshot del Dashboard: Captura mostrando el dashboard funcionando.
  • [ ] Widget Personalizado: Código de al menos 1 widget que añadiste.
  • [ ] URL de Acceso: Confirma que funciona en localhost:8501
  • [ ] Logs de Streamlit: Captura del terminal mostrando "You can now view your Streamlit app"

📝 Template para tu Pull Request


## 🎨 Lab 03 Misión Completada

- **Dashboard URL:** http://localhost:8501
- **Widgets Añadidos:** [Describir widgets personalizados]
- **Datos Visualizados:** ✅ Sí
- **Modo:** Desarrollo Local

Screenshots adjuntos en /evidence folder.

4. 🎨 Mejoras Opcionales (Bonus XP)

¿Quieres destacar? Implementa estas mejoras:

🌙 Modo Oscuro

Añade un toggle para cambiar entre tema claro y oscuro.

Bonus: +10 XP

📥 Exportar PDF

Botón para exportar el dashboard como PDF.

Bonus: +15 XP

🔔 Alertas en Tiempo Real

Sistema de notificaciones para nuevos análisis.

Bonus: +20 XP

🆘 Problemas Comunes

Streamlit no arranca
  • ¿Instalaste Streamlit? pip install streamlit
  • ¿El puerto 8501 está ocupado? Usa --server.port 8502
No veo datos en el dashboard
  • Verifica que outputs/insights/analysis.json existe
  • Revisa la ruta en el código: debe apuntar a outputs/insights/

🎯 Siguiente Nivel

Has creado tu centro de comando visual. ¡Felicidades!

Ir a Lab 04: Gobernanza SCA → Volver a Labs