PWA Offline-First para la supervisión y control de un sistema de riego inteligente. Proyecto de grado de la Tecnología en Desarrollo de Software de UNIMINUTO Villavicencio.
- Monitoreo en Tiempo Real: Visualiza la humedad y el estado de las electroválvulas desde Firestore.
- Arquitectura Offline-First: La aplicación garantiza su funcionalidad en casos de conectividad intermitente, sincronizando datos automáticamente al recuperar la conexión gracias a la persistencia de Firestore.
- Control Manual Remoto: Activa o desactiva el riego de cada línea directamente desde la interfaz.
- Gestión de Usuarios Basada en Roles: Acceso diferenciado para
AdministradoresySupervisores. - Historial y Analítica: Gráficos con la evolución de las métricas históricas.
- Notificaciones Push: Alertas en tiempo real sobre eventos críticos del sistema.
- Por seguridad y para evitar la filtración de claves y tokens, la aplicación no imprime en producción:
- La VAPID key (
NEXT_PUBLIC_FIREBASE_VAPID_KEY) - Tokens de FCM ni valores parciales de estos
- La VAPID key (
- El hook
useFCMahora solo muestra logs de debug en entornos no productivos (NODE_ENV !== 'production'). - Si necesitas debug, ejecuta la app en modo desarrollo o revisa logs del servidor; evita copiar tokens o claves al repositorio.
| Componente | Tecnología | Propósito |
|---|---|---|
| Aplicación Web (PWA) | Next.js (React) | Frontend, Backend integrado y capacidades de PWA. |
| Base de Datos | Firebase Firestore | Base de datos NoSQL para almacenamiento centralizado. |
| Base de Datos Local | IndexedDB | Almacenamiento de datos en el navegador para uso offline. |
| Autenticación | Firebase Authentication | Gestión de usuarios y seguridad. |
| Dispositivo IoT | Arduino | Control de sensores y actuadores en el campo. |
| Despliegue | Vercel | Hosting y despliegue continuo de la aplicación web. |
- Node.js (v18 o superior)
- Git
- Una cuenta de Firebase con un proyecto configurado (Firestore y Authentication habilitados).
-
Clonar el repositorio:
git clone [https://github.com/DANIELXXOMG2/uniminuto-riego-pwa.git](https://github.com/DANIELXXOMG2/uniminuto-riego-pwa.git) cd uniminuto-riego-pwa/app -
Instalar dependencias:
npm install
-
Configurar variables de entorno:
- Crea un archivo
.env.localen la raíz de la carpetaapp. - Añade las credenciales de tu proyecto de Firebase.
NEXT_PUBLIC_FIREBASE_API_KEY="TU_VALOR" NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="TU_VALOR" NEXT_PUBLIC_FIREBASE_PROJECT_ID="TU_VALOR" NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="TU_VALOR" NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="TU_VALOR" NEXT_PUBLIC_FIREBASE_APP_ID="TU_VALOR" - Crea un archivo
-
Ejecutar la aplicación:
npm run dev
El sistema incluye un script para asignar roles a usuarios registrados. Los roles disponibles son:
admin: Acceso completo al sistema, incluida la gestión de usuarios.supervisor: Acceso a monitoreo y control, sin gestión de usuarios.estudiante: Acceso de solo lectura para monitoreo.
Antes de usar el script, necesitas obtener las credenciales de administrador de Firebase:
-
Obtener el Service Account Key:
- Ve a Firebase Console
- Selecciona tu proyecto
- Ve a Project Settings (⚙️) → Service Accounts
- Haz clic en Generate New Private Key
- Se descargará un archivo JSON (por ejemplo:
mi-proyecto-firebase-adminsdk-xxxxx.json)
-
Colocar el archivo en la ruta correcta:
# Desde la raíz del proyecto mv ~/Downloads/mi-proyecto-firebase-adminsdk-xxxxx.json ./functions/serviceAccountKey.json
⚠️ Importante: Este archivo contiene credenciales sensibles. Asegúrate de que esté en.gitignorey nunca lo subas a Git.
Desde la raíz del proyecto:
node setAdmin.js <email> [role]Ejemplos:
# Asignar rol de administrador (por defecto)
node setAdmin.js usuario@ejemplo.com
# Asignar roles específicos
node setAdmin.js usuario@ejemplo.com admin
node setAdmin.js usuario@ejemplo.com supervisor
node setAdmin.js usuario@ejemplo.com estudianteEl script actualiza tanto los Custom Claims de Firebase Authentication como el documento del usuario en Firestore. El usuario deberá cerrar sesión y volver a iniciar para que los cambios surtan efecto.
Para desplegar la aplicación web en producción, consulta la guía completa:
La guía incluye:
- Configuración del proyecto monorepo
- Lista de variables de entorno obligatorias
- Pasos de verificación post-deploy
- Troubleshooting común
- Daniel Sebastián Bello Hernández
- Jorge Alberto Roncancio Enciso
- Samuel David Gómez Piamba