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://<api-id>.execute-api.<region>.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:

```bash
npm install
```

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

3. Ejecutar la app en modo desarrollo:

```bash
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:

```json
{
  "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.