Initial commit
This commit is contained in:
Dsupanta
@@ -0,0 +1,7 @@
|
||||
# Example environment variables - do NOT commit secrets
|
||||
VITE_COGNITO_USER_POOL_ID=
|
||||
VITE_COGNITO_CLIENT_ID=
|
||||
VITE_API_URL=https://your-api-id.execute-api.<region>.amazonaws.com
|
||||
|
||||
# Optional: if you have a Cognito Hosted UI domain you can add it to enable redirects
|
||||
# VITE_COGNITO_HOSTED_UI_DOMAIN=your-domain.auth.<region>.amazoncognito.com
|
||||
+47
@@ -0,0 +1,47 @@
|
||||
# Node
|
||||
node_modules/
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
pnpm-lock.yaml
|
||||
|
||||
# Environment
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
out/
|
||||
.cache/
|
||||
|
||||
# Vite/Next/CRA
|
||||
.next/
|
||||
.cache/
|
||||
|
||||
# Static analysis
|
||||
coverage/
|
||||
|
||||
# Logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# AWS / Amplify
|
||||
aws-exports.js
|
||||
aws-exports.ts
|
||||
amplify/
|
||||
|
||||
# Credentials and keys
|
||||
*.pem
|
||||
*.key
|
||||
credentials
|
||||
aws-credentials
|
||||
|
||||
# Editor / OS
|
||||
.vscode/
|
||||
.idea/
|
||||
.DS_Store
|
||||
|
||||
# Misc
|
||||
*.local
|
||||
@@ -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.
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>IoT Front Dashboard</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "iot-front-dashboard",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.0.0",
|
||||
"vite": "^5.0.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vue-tsc": "^1.0.0"
|
||||
}
|
||||
}
|
||||
+201
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>IoT Dashboard</h1>
|
||||
|
||||
<div v-if="!token" class="card">
|
||||
<h2>Iniciar sesión</h2>
|
||||
<p>La aplicación usa Amazon Cognito para autenticación. Obtén un JWT (id o access token) desde Cognito y pégalo aquí.</p>
|
||||
|
||||
<textarea v-model="tokenInput" placeholder="Pega tu JWT aquí" rows="6"></textarea>
|
||||
<div class="row">
|
||||
<button @click="doLogin">Usar token (Login)</button>
|
||||
<button @click="clearToken" class="secondary">Limpiar</button>
|
||||
</div>
|
||||
|
||||
<p class="hint">Opcional: si tienes configurado Hosted UI, genera el JWT mediante Cognito (ver README).</p>
|
||||
</div>
|
||||
|
||||
<div v-else>
|
||||
<div class="row space-between">
|
||||
<div>
|
||||
<strong>Autenticado</strong>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="logout" class="secondary">Cerrar sesión</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Indicadores</h2>
|
||||
<div v-if="loading">Cargando datos...</div>
|
||||
<div v-else-if="error">No fue posible obtener los datos: {{ error }}</div>
|
||||
<div v-else>
|
||||
<div class="indicators">
|
||||
<div class="indicator">
|
||||
<div class="label">Temperatura actual</div>
|
||||
<div class="value">{{ latest?.temperature ?? '—' }} °C</div>
|
||||
</div>
|
||||
<div class="indicator">
|
||||
<div class="label">Humedad actual</div>
|
||||
<div class="value">{{ latest?.humidity ?? '—' }} %</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Lecturas</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Dispositivo</th>
|
||||
<th>Fecha</th>
|
||||
<th>Temperatura (°C)</th>
|
||||
<th>Humedad (%)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="r in readings" :key="r.deviceId + r.timestamp">
|
||||
<td>{{ r.deviceId }}</td>
|
||||
<td>{{ r.timestamp }}</td>
|
||||
<td>{{ r.temperature }}</td>
|
||||
<td>{{ r.humidity }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
|
||||
type Reading = {
|
||||
deviceId: string
|
||||
timestamp: string
|
||||
temperature: number
|
||||
humidity: number
|
||||
}
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const API_URL = (import.meta.env.VITE_API_URL as string) || ''
|
||||
|
||||
const token = ref<string | null>(localStorage.getItem('iot_token'))
|
||||
const tokenInput = ref('')
|
||||
const readings = ref<Reading[]>([])
|
||||
const loading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
const latest = computed(() => {
|
||||
if (!readings.value.length) return null
|
||||
// try to find the latest by timestamp (ISO strings assumed)
|
||||
return readings.value.slice().sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1))[0]
|
||||
})
|
||||
|
||||
async function fetchReadings() {
|
||||
if (!API_URL) {
|
||||
error.value = 'VITE_API_URL no está configurada. Revisa .env'
|
||||
return
|
||||
}
|
||||
if (!token.value) {
|
||||
error.value = 'No autenticado'
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
error.value = null
|
||||
try {
|
||||
const res = await fetch(`${API_URL.replace(/\/+$/, '')}/readings`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token.value}`
|
||||
}
|
||||
})
|
||||
if (res.status === 401) {
|
||||
error.value = 'No autorizado (401)'
|
||||
readings.value = []
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
if (!res.ok) {
|
||||
error.value = `HTTP ${res.status}`
|
||||
readings.value = []
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
const data = await res.json()
|
||||
readings.value = Array.isArray(data?.data) ? data.data : []
|
||||
} catch (e: any) {
|
||||
error.value = e?.message || String(e)
|
||||
readings.value = []
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function doLogin() {
|
||||
if (!tokenInput.value) return
|
||||
token.value = tokenInput.value.trim()
|
||||
localStorage.setItem('iot_token', token.value)
|
||||
// immediately fetch
|
||||
fetchReadings()
|
||||
}
|
||||
|
||||
function logout() {
|
||||
token.value = null
|
||||
localStorage.removeItem('iot_token')
|
||||
readings.value = []
|
||||
}
|
||||
|
||||
function clearToken() {
|
||||
tokenInput.value = ''
|
||||
}
|
||||
|
||||
// If token already present, fetch on mount
|
||||
onMounted(() => {
|
||||
if (token.value) {
|
||||
fetchReadings()
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
token,
|
||||
tokenInput,
|
||||
doLogin,
|
||||
clearToken,
|
||||
logout,
|
||||
readings,
|
||||
latest,
|
||||
loading,
|
||||
error
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 32px auto;
|
||||
padding: 0 16px;
|
||||
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
|
||||
}
|
||||
.card {
|
||||
background: #fff;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 16px;
|
||||
margin-top: 16px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.row { display:flex; gap:8px; align-items:center; }
|
||||
.space-between { justify-content:space-between; }
|
||||
textarea { width:100%; font-family: monospace; }
|
||||
button { padding:8px 12px; cursor:pointer; }
|
||||
button.secondary { background:#eee; }
|
||||
.indicators { display:flex; gap:16px; margin-bottom:12px; }
|
||||
.indicator { padding:8px; background:#f7f7f7; border-radius:4px; }
|
||||
.label { font-size:0.9rem; color:#666; }
|
||||
.value { font-size:1.5rem; font-weight:600; }
|
||||
table { width:100%; border-collapse:collapse; margin-top:8px; }
|
||||
th, td { text-align:left; padding:8px; border-bottom:1px solid #eee; }
|
||||
.hint { color:#666; font-size:0.9rem; }
|
||||
</style>
|
||||
@@ -0,0 +1,5 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
@@ -0,0 +1,2 @@
|
||||
html, body, #app { height: 100%; margin: 0; }
|
||||
body { background: #f0f2f5; }
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["ESNext", "DOM"]
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 5173
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user