Initial commit

2026-09-06 18:39:10 -03:00
commit e5caf1c462
10 changed files with 425 additions and 0 deletions
@@ -0,0 +1,108 @@
+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.