Smart home - PedroRosito/daw-project GitHub Wiki
- Introducción
- Tecnologías utilizadas
- Requerimientos
- Ejecutando la aplicación
- Funcionamiento de la aplicación
- Finalizando la aplicación
- Licencia
Smart Home es una aplicación que corre sobre el template daw-project. La misma simula el manejo básico de una casa a través de una aplicación web.
Esta aplicación fue desarrollada como trabajo final de la materia Desarrollo de aplicaciones web de la carrera de especialización en internet de las cosas de la UBA.
Antes de introducirse en el manejo y funcionamiento de ésta aplicación es recomendable leer la documentación del template daw-project (documentación) anteriormente mencionado y realizar las descargas y configuraciones pertinentes.
- Docker
- Docker-compose
- NodeJs
- Typescript
- MySQL
- PHPMyAdmin
- Materializecss
Para correr la aplicación, es necesario realizar las instalaciones mencionadas en el template daw-project.
Una vez realizadas todas las instalaciones y configuraciones necesarias. Descargar el contenido de este repositorio en una carpeta de su elección ejecutando el siguiente comando en una ventana de comandos:git clone http://github.com/PedroRosito/daw-project.git
.
Una vez hecho esto entrar a la carpeta daw-project con cd daw-project
y luego levantar el docker-compose con el siguiente comando: docker-compose up
.
Para verificar que todo haya funcionado correctamente, abra un navegador y diríjase a http://localhost:8000, debería ver una página como la siguiente.
Si en una primera ejecución algo no funciona correctamente, como por ejemplo que la lista de dispositivos aparezca vacía, diríjase a la ventana de comandos en la que esté corriendo el docker-compose y presione "ctrl + c" y , una vez detenidos todos los contenedores, ingrese el siguiente comando docker-compose down
. Una vez hecho esto pruebe a levantar nuevamente el docker-compose.
En la página principal puede identificar la lista de dispositivos asociados a la base de datos del smart home. Desde ésta página es posible modificar la información de cada dispositivo o su estado (apagado o prendido).
Al clickear en el menú configuración verá una página como la siguiente.
Desde ésta página es posible apagar todos los dispositivos, agregar un dispositivo nuevo o quitar un dispositivo.
Si accedemos a las opciones de añadir o quitar un dispositivo verá que para el primero de los casos se abre un formulario como el siguiente.
Si en cambio clickea en la opción de quitar dispositivo verá una lista de los dispositivos, con la posibilidad de clickear en el que desea quitar.
Todos los estilos y funciones relacionados con la apariencia de la aplicación, fueron implementados a través de la utilización de materializecss.
Materialize es un framework que facilita la implementación de estilos y funciones para aplicaciones tanto web como mobile. Para aprender más sobre éste framework, dirigirse a su sitio web.
El frontend de la aplicación está compuesto por archivos typescript y código html. El compilador de Typescript que viene integrado en el template utilizado se encarga de generar los archivos javascript necesarios para el funcionamiento de la aplicación web.
Desde el frontend se presenta la interfaz de usuario que permite la carga y modificación de los datos de los dispositivos.
El backend de la aplicación está compuesto fundamentalmente por una API de express corriendo sobre NodeJS. Ésta API es la encargada de recibir los pedidos o requests del cliente y actuar en consecuencia, accediendo a la base de datos MySQL para modificar, añadir o quitar dispositivos.
En el siguiente diagrama puede verse de forma simplificada como se realiza la comunicación entre el frontend y el backend.
El frontend envía peticiones mediante requests de tipo GET o POST, ya sea utilizando funciones de javascript o formularios HTML al backend el cuál las recibe a través de la API de express que utiliza los métodos app.get() o app.post().
Una vez que quiera finalizar el uso de la aplicación, es conveniente realizar una limpieza correcta del espacio de trabajo. Para eso diríjase a la ventana de comandos sobre la que está corriendo el docker-compose y presione "ctrl + c", una vez detenidos los distintos contenedores ingrese el comando docker-compose down
.
Este proyecto es publicado bajo licencia GPLV3+.