109 lines
3.4 KiB
Markdown
109 lines
3.4 KiB
Markdown
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.
|