Para correr el programa:
- Backend:
docker-compose upen la carpeta de backend - Frontend:
ionic serveen la carpeta de frontend
Se debe generar la carpeta node_modules en backend y frontend, ejecutando npm install
Primero, en el backend se definen las dependencias y puertos a utilizar. A continuación, se define el ruteo para lo que voy a usar, que en este caso es una carpeta para dispositivos, otra para mediciones y otra para las elecroválvulas. Las 3 carpetas se ubican en src/backend/routes:
Primero se definen las dependencias, que en este caso son ExpressJS y la base de MySQL que tiene los datos que se van a procesar. Luego, se programa lo que debe estar en cada pantalla de la aplicación:
- En primer lugar, se van a imprimir todos los dispositivos que están en la tabla Dispositivos. Para eso, se usa una query
SELECT * from Dispositivosy se devuelve el resultado - También es necesario completar la pantalla para cada dispositivo en particular. La ruta que llevará a eso es, por ejemplo, http://localhost:8100/dispositivos/1. Entonces, se necesita una query que devuelva únicamente la información del dispositivo que se eligió. Se logra con
SELECT * FROM Dispositivos WHERE Dispositivos.dispositivoId = ?, donde?será reemplazado por el ID del dispositivo que se busca en ese momento - Otra necesidad es saber cuál es la última medición del sensor. Más adelante, esa información se ploteará en un gráfico. Para eso, se define que la ruta será, por ejemplo, http://localhost:8100/dispositivos/1/ultima-medicion. La query que cumple con lo pedido es
SELECT * from Mediciones WHERE Mediciones.dispositivoId=? ORDER BY Mediciones.fecha DESC LIMIT 1, donde, nuevamente, el?será reemplazado por el ID del dispositivo en cuestión. Además, primero se ordenan todas las mediciones del dispositivo por fecha (usando ORDER BY), y luego se filtra solamente la primera (LIMIT 1), con el objetivo de obtener la medición más actualizada
En este caso, se necesita imprimir todas las mediciones de un sensor. Se define la ruta, por ejemplo, http://localhost:8100/dispositivos/1/mediciones. La query que cumple con lo pedido es SELECT * from Mediciones WHERE dispositivoId=?. Esta información se usará más adelante para plotear la ruta en cuestión
El objetivo es leer la tabla Log_Riegos de la database y devolverlos en un array, que luego será ploteado. Para eso, se usa la query SELECT * From Log_Riegos WHERE electrovalvulaId = ?
En la carpeta frontend/src/src/app/app-routing.module.ts se definen distintos paths: home, dispositivo/:id, dispositivo/:id/mediciones y dispositivo/:id/logs, que serán detallados a continuación
Para crear estas carpetas, se usa el comando ionic generate page nombreModulo, donde nombreModulo podría ser home, dispositivo o lo que se necesite. Esto creará los archivos necesarios (por ejemplo, el .ts y el .html), y definirá los links al selector, el template y el estilo.
Carpeta: src/frontend/src/app/home
En el archivo home.page.ts se define el selector, el template y el estilo. También se importa el servicio dispositivo.service
En este servicio tengo definidos los dispositivos que levantaré en el template de abajo. Se usa el modelo de Dispositivos definido en model/Dispositivo.ts
En el home se tiene el título del proyecto ("Sistema de riego automatizado") y el listado de dispositivos, leído de dispositivoServ.listado y recorrido con *ngFor. Cada sensor está linkeado a su respectiva página, usando routerLink (es decir, acá se define que, al apretar un botón, te redirija a la página que corresponde, como podría ser http://localhost:8100/dispositivo/1. Esto puede verse en frontend/src/app/home/home.page.html
En el archivo .html se define el título de la página, se verifica si el sensor tiene mediciones (en caso de no tener, se imprimirá un mensaje indicándolo) y se crean los botones (con el link que corresponde) para ver las mediciones y el log de un sensor. En el archivo de TypeScript se crea el gráfico que indicará la última medición de cada sensor. Por ejemplo, si el último valor es 60 se indicará:
Si el último valor es 30:
Además, en la consola de logs se imprimirá un mensaje según lo definido en el enunciado. Por ejemplo, cuando la última medición es de 30 kPA, dirá "El suelo está seco. Debe regarse de inmediato"
El objetivo es completar una pantalla como la siguiente:
Se trae la información que hay en, por ejemplo, http://localhost:8000/dispositivo/2/mediciones. Notar que en el puerto 8000 se verá la información como:
Para traer los logs de la tabla Logs_Riego, por ejemplo, de http://localhost:8000/electrovalvula/log/2, se usa el archivo log.service.ts que lee:
y, luego, del procesamiento completo, se imprime en el puerto 8100 como:
Cuando se abra una electroválvula, apretando en el botón "Abrir electroválvula", se imprimirá una línea en el log (botón "Ver logs"):
Cuando se cierre la electroválvula, se calculará un valor random entre 0 y 30 y se lo imprimirá en el gráfico:
También se agregará una fila en la tabla de mediciones:
Y en la de logs:
