Smart home - PedroRosito/daw-project GitHub Wiki

Lista de contenidos

Introducción

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.

Tecnologías utilizadas

  • Docker
  • Docker-compose
  • NodeJs
  • Typescript
  • MySQL
  • PHPMyAdmin
  • Materializecss

Requerimientos

Para correr la aplicación, es necesario realizar las instalaciones mencionadas en el template daw-project.

Ejecutando la aplicación

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.

mainpage

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.

Funcionamiento de la aplicación

Página principal

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).

menumainpage

Menú de configuración

Al clickear en el menú configuración verá una página como la siguiente.

configmenu

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.

formadd

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.

deletepage

Funcionamiento a nivel interno

Estilos

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.

Frontend

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.

Backend

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().

Finalizando la aplicación

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.

Licencia

Este proyecto es publicado bajo licencia GPLV3+.

⚠️ **GitHub.com Fallback** ⚠️