iot-front-dashboard

Resumen

Aplicación web sencilla (Vue 3 + Vite + TypeScript) para visualizar las mediciones IoT. Está diseñada como una primera versión didáctica, deliberadamente simple, de modo que los alumnos puedan luego refactorizarla.

Tecnologías

• Vue 3
• Vite
• TypeScript
• HTML / CSS
• Amazon Cognito (autenticación)

Estructura

iot-front-dashboard/
├── package.json
├── vite.config.ts
├── tsconfig.json
├── .env.example
├── index.html
└── src/
    ├── main.ts
    ├── App.vue
    └── style.css

Variables de entorno

Copiar .env.example a .env y ajustar valores:

• VITE_COGNITO_USER_POOL_ID: (no obligatorio para esta primera versión)
• VITE_COGNITO_CLIENT_ID: (no obligatorio para esta primera version)
• VITE_API_URL: URL base de la API (por ejemplo https://.execute-api..amazonaws.com)

No pongas credenciales reales en el repositorio.

Login y obtención del JWT

Esta primera versión implementa un login simple: el usuario debe obtener un JWT (id o access token) desde Cognito y pegarlo en la aplicación. El token se almacena en localStorage como iot_token.

Cómo obtener un token desde Cognito (sugerencias):

• Usar el Hosted UI de Cognito (si el App Client está configurado con callback y dominio) y copiar el token desde la URL o desde las herramientas de desarrollador.
• Obtener un token con herramientas administrativas o scripts (ej. usar AWS CLI/AdminInitiateAuth si se dispone de permisos).

Nota: automatizar el flujo de login (Hosted UI redirect / Authorization Code) requiere configurar callback URLs y dominio en el App Client y puede ser añadido en versiones posteriores.

Ejecución local

1. Instalar dependencias:

npm install

2. Crear .env a partir de .env.example y ajustar VITE_API_URL.

3. Ejecutar la app en modo desarrollo:

npm run dev

Uso

1. Obtener un JWT de Cognito (ver sección anterior).
2. Pegar el token en el textarea y hacer click en "Usar token (Login)".
3. La app llamará a GET ${VITE_API_URL}/readings enviando el header Authorization: Bearer <TOKEN>.
4. Verás indicadores sencillos (temperatura/humedad actuales) y una tabla con las lecturas.

API esperada

El endpoint /readings debe devolver JSON con la forma:

{
  "data": [
    {
      "deviceId": "ARDUINO-01",
      "timestamp": "2026-09-02T18:00:00Z",
      "temperature": 24.7,
      "humidity": 58.2
    }
  ]
}

Estados iniciales y manejo de errores

• Cargando: "Cargando datos..."
• Error simple: "No fue posible obtener los datos"
• 401: mostrado como "No autorizado (401)" (API Gateway/Cognito normalmente maneja la validación)

Refactorización posterior

Esta versión concentra gran parte de la lógica en App.vue intencionalmente. En tareas posteriores se pedirá a los alumnos que separen responsabilidades (componentes, servicios HTTP, manejo de estado) y mejoren la experiencia y seguridad.

Relación con Cognito y la API

• Cognito emite el JWT que la app usará como bearer token.
• La API (API Gateway + Cognito Authorizer + Lambda) protege /readings y delega la autenticación a Cognito.

Contacto

Proyecto educativo — implementación simple para fines didácticos.