Implementación backend y Docker: Sistema computarizado de datos LIS perfil lipídico
El link del repositorio es: https://github.com/DanielVallejo98/TECNOLOGIASWEB-BACKEND-FRONTEND-MONGO-DOCKER
Para la implementación del backend de la aplicación de frontend realizada en React se hizo uso de Docker, la cual es una tecnología que permite contener imágenes de software (node,python,etc). Como parte de backend se utilizó el framework Flask de python. En este se configuró el servidor el cual va a responder a las peticiones realizadas desde el frontend.
Para implementar todo el trabajo se partió del repositorio dado en clase y se realizó una inspección del mismo para poderlo adaptar el proyecto. Luego de eso se tomó la decisión de implementar un nuevo proyecto con un dockerfile distinto al dado. La decisión de realizar un proyecto a parte se tomó debido a que el repositorio dado en la clase hacía difícil implementar el hot reload del frontend (tocaba aplicar el comando de instalar los dependencias y el build para servirlo con nginx, y normalmente tardaba demasiado en ejecutarse los comandos), pues en el frontend se necesitaba realizar cambios para ver si las cosas funcionaban bien, pues los datos estaban “quemados”; se implementó el api fetch para traer los datos del servidor de backend. Para la construcción de este nuevo proyecto además de las imágenes que tenía, se decidió montar la imagen de mongo-express, pues este servicio permite visualizar la data almacenada en la base de datos de mongodb por medio de otro puerto en el host. Hay que recalcar que para este proyecto no fue posible incorporarlo con una máquina virtual, debido a los escasos recursos computacionales, pues en este entorno se demoraba muchísimo la creación de las imágenes, por lo que se hacía inviable. Para solucionar este inconveniente se decidió hacer la instalación de docker en windows, siguiendo el paso a paso que está en la guía oficial de la página de instalación para los diferentes sistemas operativos, pero de igual forma sigue funcional para una máquina virtual pues en el trabajo final se muestra el vagrantfile por si se desea correrlo ahí.
En el proyecto aparte que se creó no se montó nginx, pues como se mencionó se necesitaba debuggear la parte de los componentes en react pero ya con backend y base de datos en docker. En esta parte solo servía el proyecto con node, y en el dockerfile se tenía
Luego en el docker compose file se tenía:
Es importante resaltar la configuración de environment, pues aquí node se configura para que se pueda hacer el hot reload del proyecto.
Otra configuración importante se realizó en el script Run.sh pues aquí este debía estar configurado como LF.
Además mongo-express debía tener la siguiente configuración:
Pues aquí se le decía que debía comunicarse con la imagen de mongo, a través de las credenciales que se ven en environment, pues previamente mongo fue creado con esas credenciales. Luego de estas configuraciones y otras menores, se pasó a realizar el backend per se. Para esta aplicación se crearon las siguientes apirest:
@app.route("/pacientes/<documento>", methods=['GET'])
Trae la información del resultado del examen de perfil lipidico de un paciente en la base de datos. En esta api consultan los pacientes con su numero de documento.
@app.route("/pacientes/<documento>", methods=['DELETE'])
Borra a un paciente
@app.route("/pacientes", methods=['GET'])
Trae a todos los pacientes del sistema
@app.route("/pacienteresultado/<id>", methods=['GET'])
Cuando el bacteriólogo quiere ver la info de un paciente, utiliza este ruta para ver a un paciente, pero el bacteriólogo puede ver todas la info incluso con todas las citas previas, el paciente, solo ve el resultado de la ultima cita.
@app.route("/loginbac", methods=['POST'])
En esta ruta se comprueba las credenciales de un bacteriólogo registrado en el sistema.
@app.route("/cita/<documento>", methods=['PUT'])
Si un paciente ya existía en el sistema, el bacteriólogo tiene la posibilidad de actualizar toda la info del paciente, añadiendo otra cita.
@app.route("/crearpaciente", methods=['POST'])
Aquí está el api donde se crea un paciente cuando se ha agregado toda la información necesaria para guardarlo en la base de datos. Esto solo se puede hacer si el paciente a agregar es nuevo, pues si el número de cédula ya está registrado, se notifica en el front de que no se puede agregar porque hay un paciente con esas credenciales
Luego de haber comprobado que en este proyecto el frontend tuviera una buena integración con el backend y tendiendo en cuenta los favores del hot reload, se pudo actualizar el frontend ya listo para ser utilizado en la siguiente etapa.
Ahora, tomando el proyecto base dado en clase que sí utiliza nginx, se descargó el frontend finalizado en la carpeta frontend. Aquí se tuvo que añadir de nuevo mongo express para el manejo de la data. Además el backend obviamente tuvo que ser modificado con las apis creadas y mostradas anteriormente; en el archivo app.py se puede ver detalladamente que hacer esas apis. Luego de desplegar el proyecto con nginx, se pudo ver ue solo se desplegaba bien la intro de la aplicación, pero las rutas no funcionaban bien en nginx. Esto debido a que este actúa como un servidor “real” donde todo el proyecto realizado en react se toma como un archivo de html y la parte de react-router no la comprende pues en react se desarrolloa una sigle web application. Para solucionar este inconveniente se tuvo que realizar una configuración a nginx:
se creo una carpeta aparte de nginx la cual tiene un archivo llamado nginx.conf
La parte más importante de esto es el try_files, pues en esta configuración ahora el servidor si va a poder reconocer las rutas de la aplicación definida en react. Ahora esta parte se modificó en los archivos de maquina física, sin embargo también es necesario informarle al contenedor que se va a cambiar la configuración estándar, por la personalizada. Para eso se creó un volumen en la imagen de nginx:
Con el último volumen se informa al contenedor que la información en la carpeta conf.d va a ser modificada por lo que nosotros personalizamos.
Para el despliegue de la app por otro usuario se debe ejecutar el archivo que se encuentre en el archivo readme y por último docker-compose up. Para que se puede evidenciar mucho mejor el proceso, también en el proyecto se encuentra la carpeta data, en la cual se guardaron los datos de los pacientes y el bacteriólogo que puede ingresar al sistema.
En caso de que al ejecutar los comandos previos mongo y monog express no corran, se deberá borrar la carpeta data y volver a correr los comandos. Ahora como ya no hay datos, se podrá verificar que en el puerto 8080 que es del front, aparecen 2 botones, el de iniciar sesión y el de consultar resultados. En la parte de iniciar sesión es para el login del bacteriologo y el de consultar resultados es del paciente. Se podrá comprobar que al ingresar cualquier dato, el sistema no funcionara, pues tratara de buscar datos en la base de datos, pero como la carpeta data fue borrada, no habrán registros de la base de datos lis, donde se supone deben estar dos colecciones, la de pacientes y bacteriologos. Para solucionar este inconveniente, se deber dirigir al puerto 8081 donde esta mongo express y debe crear la base de datos llamada lis, y de ahi crear 2 colecciones, una que se llame pacientes y otra que se llama bacteriólogos. En la parte de bacteriologos deberá crear un documento con la siguinete información:
{
_id: ObjectId('61661049e117cf9e52071eb2'),
password: 'testeo',
email: 'testeo@testeo.com',
documento: '123456789',
edad: '35',
genero: 'masculino',
nombre: 'Alfonso'
}
Se puede cambiar los valores de los campos, pero tenga presente recordar el email y password, pues esto servirá para que se pueda autenticar en el sistema. Si de una vez desea, podrá ingresar un nuevo documento en la collección pacientes, puede ingresar la siguiente información: (de lo contrario puede loguearse y verificar en directo la funcionalidad el crud, creando un nuevo paciente en el formulario- seccion de ingresar paciente y guardar )
{
_id: ObjectId('6164ede2721c1d74676bbab6'),
nombre: 'Daniel Vallejo',
eps: 'Sanitas',
genero: 'masculino',
documento: '1234',
fecha_nacimiento: '07/09/98',
citas: [
{
_id_cita: ObjectId('6165da4ad209afcc08b875b0'),
fecha: '12/09/2021',
perfil_lipidico: {
colesterol_total: 0.45,
trigliceridos: 0.56,
ldl: 0.4,
hdl: 1.2
}
},
{
_id_cita: ObjectId('6165f376882cfd8b12d89fc6'),
fecha: '20/09/2021',
perfil_lipidico: {
colesterol_total: 1.2,
trigliceridos: 0.3,
ldl: 0.2,
hdl: 1.3
}
},
{
_id_cita: ObjectId('6165da4ad209afcc08b875b1'),
fecha: '22/12/22',
perfil_lipidico: {
colesterol_total: 0.45,
trigliceridos: 0.56,
ldl: 0.4,
hdl: 1.2
}
},
{
_id_cita: ObjectId('6165da4ad209afcc08b875b2'),
fecha: '22/12/21',
perfil_lipidico: {
colesterol_total: 0.45,
trigliceridos: 0.56,
ldl: 0.4,
hdl: 1.2
}
},
{
_id_cita: ObjectId('6166e6ffc9ba2d1feea71903'),
fecha: '12/13/21',
perfil_lipidico: {
colesterol_total: '5',
trigliceridos: '5',
hdl: '5',
ldl: '5'
}
},
{
_id_cita: ObjectId('6166e801c9ba2d1feea71908'),
fecha: '13/10/2021 9:06:57',
perfil_lipidico: {
colesterol_total: '8',
trigliceridos: '8',
hdl: '8',
ldl: '8'
}
},
{
_id_cita: ObjectId('6166ea9dc9ba2d1feea7190e'),
fecha: '13/10/2021 9:18:05',
perfil_lipidico: {
colesterol_total: '9',
trigliceridos: '9',
hdl: '9',
ldl: '9'
}
},
{
_id_cita: ObjectId('6166ead0c9ba2d1feea71912'),
fecha: '13/10/2021 9:18:56',
perfil_lipidico: {
colesterol_total: '1',
trigliceridos: '1',
hdl: '1',
ldl: ''
}
},
{
_id_cita: ObjectId('6166edac9d71c689a3a4928b'),
fecha: '13/10/2021 9:31:08',
perfil_lipidico: {
colesterol_total: '15',
trigliceridos: '15',
hdl: '15',
ldl: '15'
}
},
{
_id_cita: ObjectId('6166edf89d71c689a3a4928d'),
fecha: '12/13/21',
perfil_lipidico: {
colesterol_total: '11',
trigliceridos: '11',
hdl: '11',
ldl: '11'
}
},
{
_id_cita: ObjectId('6166ef7935ebbbfc80b5bc58'),
fecha: '13/10/2021 9:38:49',
perfil_lipidico: {
colesterol_total: '50',
trigliceridos: '50',
hdl: '50',
ldl: '50'
}
}
]
}
Si decidió ingresar el documento de una vez podrá verificar una de las partes del crud, el cual es la de crear. Ahora, puede dirigirse a la otra sección donde está el listado, en donde se muestra una tabla, en esta se podrá ver el documento ingresado (se ven todos los pacientes ingresados del sistema, esta es la parte de lectura del crud ), tanto si lo ingresó en mongo express, o lo creo con un formulario. En esa tabla aparece la opción de lupa para ver toda la info del paciente, en donde se ven todas las citas del paciente y su información. En la opción de + se permite actualizar un paciente, la cual corresponde a la modificación del paciente, agregando una cita nueva donde se ingresan los datos de perfil lipídico de este paciente. En la opción del basurero está el bote de basura el cual borra al paciente del sistema. Ahora para ver el proyecto pero ya no como bacteriólogo si no como paciente, deberá primero salirse del sistema en la opción de log out que se encuentra en el menú principal. Ahora deberá dar click en la sección de consultar resultados y poner en el número de documento de un paciente que ya exista en el sistema. Si el paciente está en el sistema, se mostrará los resultados de su perfil lipídico. Si el paciente ya había tenido más datos se mostrará la información de la última cita que haya tenido el paciente.
Si el proyecto pudo correr con la carpeta data sin ningún problema, puede iniciar sesión con el email testeo@testeo.com y con contraseña testeo. Si quiere ingresar como paciente ingrese el documento 1234, el cual corresponde al numero de documento que ya tiene un paciente en esta data.
Si por el contrario tuvo que eliminar la carpeta data, aquí se muestra en imágenes en orden, lo que debe hacer:
Se crea la base de datos lis donde dice create database
Una vez en la base de datos lis se crea las dos colecciones, bacteriologos y pacientes.
Una vez en la coleccion de bacteriologos, se da click en new document, se borra todo lo que este ahi y se pega la información del primer documento que se dio previamente (el objeto de color azul).
Si se opto por crear al paciente aqui, se debe dirigir a la colección pacientes, y crear el primer paciente en new document, se borra lo que esta ahi y se pega el segundo objeto dado anteriomente (el objeto que sta en color rojo)
Una vez creado esto ya se puede ir al front y observar todo el crud.
Se inicia sesion como bacteriologo con los datos que se ingresó
Si se loggeo correctamente aparece esto en pantalla principal, donde se ve la parte de ingresar un nuevo paciente, y el lista de todos los pacientes A partir de aquí se podrá implementar las opciones del crud normalmente. El botón superior derecho rojo es para cerrar sesión. Al cerrar sesión ahora puede ir y loguearse como paciente, con el documento de identificación que haya ingresado. Recuerdo los 2 enfoques de la app, como bacteriólogo y como paciente.
Conclusiones:
Docker es una herramienta muy útil para los desarrolladores, debido a que permite compartir proyectos entre distintos sistemas operativos sin generar conflictos, pues de la manera tradicional, en muchas ocasiones pueden ocurrir errores a la hora de desplegar proyectos entre diferentes sistemas operativos por las distintas configuraciones que los sistema operativos puedan tener. Además permite trabajar en aplicaciones sin necesidad de tener tecnologías instaladas localmente en la máquina física como node, python, etc si no que a través de una imagen se puede correr el proyecto por medio de la ejecución de esta imagen, lo que corresponde a un contenedor, el cual tiene ya todas las dependencias instaladas. Esto permite poner aprueba la aplicación diseñada en varios entornos y ver su funcionalidad
Se debe tener en cuenta diferentes configuraciones para las imagenes, pues la configuración predeterminada no siempre suela ser la mejor para el proyecto que se esté realizando.
Flask es un framework que sirve para desarrollar el backend de una aplicación de una manera eficiente y clara. El uso de un backend por separado del frontend permite tener un mejor manejo de la aplicación que se esté desarrollando, permitiendo solucionar problemas que se puedan presentar en este de una manera más estructurada y organizada.
Referencias:
https://www.netapp.com/es/devops-solutions/what-are-containers/
Comentarios
Publicar un comentario