Gaviotas 160
Panel de administración web (PWA) para el edificio Gaviotas 160: control de deudas, contómetros (medidores), registro de movimientos, generación de recibos y consolidación de períodos.
Estructura del proyecto
| Archivo | Contenido |
|---|
index.html | Shell principal de la app (login, dashboard, módulos) |
app.js | Lógica de la aplicación (auth, render de tablas, llamadas al backend, consolidación, etc.) |
CSS.css | Estilos, organizados en bloques por módulo |
Contometros.html | Vista de contómetros (medidores) |
RegistroMov.html | Vista de registro de movimientos |
manifest.json | Manifiesto PWA (instalable en Android/iOS) |
sw.js | Service worker: solo cachea el "cascarón" estático; las llamadas al backend siempre van a la red |
icons/ | Íconos de la PWA |
No hay build ni dependencias de Node: es HTML/CSS/JS plano, servido directo.
Backend
La app consume un backend RPC vía fetch (constante GAS_API_URL en app.js):
https://backend-zeta-coral-88.vercel.app/api/rpc
Anteriormente el backend era un Google Apps Script (URL comentada en app.js como referencia/fallback).
Autenticación
El token de sesión (AUTH_TOKEN) se guarda en sessionStorage (no en localStorage), se revalida en cada carga y se limpia al cerrar sesión. No hay credenciales ni claves hardcodeadas en el código.
Cómo ejecutarlo localmente
Al ser archivos estáticos, basta con servirlos con cualquier servidor HTTP (necesario para que el service worker funcione):
npx serve .
# o
python3 -m http.server 8080
Luego abrir http://localhost:8080/index.html en el navegador.
PWA / Service Worker
- El manifest permite instalar la app en Android/iOS como aplicación independiente.
- El service worker (
sw.js) cachea únicamente el cascarón estático (index.html, CSS.css, app.js, manifest.json, íconos). Las respuestas del backend nunca se cachean, para evitar mostrar cifras desactualizadas.
- Usa
cache: 'reload' en cada fetch del cascarón para forzar red fresca y que las actualizaciones publicadas se vean de inmediato sin depender de que el usuario borre caché.
Seguridad
- Todo el contenido dinámico insertado vía
innerHTML pasa por escapeHTML() / escapeHtml() antes de renderizarse, para evitar XSS con datos provenientes del backend o de campos editables.
