Fecha: viernes 5 de septiembre
Hora: 1:30 pm - 9:30 pm
Medio: asincr贸nico
Tuvimos muchos problemas con la arquitectura que est谩bamos implementado escribiendo el backend con Python, por lo que tuvimos que pasar por el primer bloqueo grande: tuvimos que redise帽ar la arquitectura completa del proyecto (salvo el servicio de nube para tener la base de datos en CloudClusters ya que solo eso se mantuvo).
Inicialmente, est谩bamos creando la p谩gina web con HTML y CSS solamente. Por el lado del backend, se estaba trabajando todo en Python. No obstante, esto contrajo varios problemas como no poder cargar los datos del Stored Procedure SPConsultar_Empleado o pasar datos del frontend (input de nombre y salario) al backend y poder ejecutar el Stored Procedure SPInsertar_Empleado.
Por esto, como equipo nos dimos a la tarea de, a solo 3 d铆as de entregar el proyecto, realizar una investigaci贸n exhaustiva sobre una mejor tecnolog铆a por emplear, una que simplificara los procesos de iniciar el servidor, conectar a la base de datos y manejar las APIs.
Es aqu铆 que se hall贸 el siguiente video:
https://youtu.be/VuQAF-44Lo0?si=9VQOWy-HNDiN-g4w
Este video nos ayud贸 a reestructurar la soluci贸n de software aprovechando la librer铆a de JavaScript llamada Node.js.
Node.js es un entorno de ejecuci贸n del lado del servidor que incluye todo para ejecutar un programa escrito en JavaScript. En adici贸n, debido a que es de c贸digo abierto y multiplataforma, y teniendo una alta popularidad en data streaming, aplicaciones web y chats de tiempo real, se seleccion贸 para este proyecto. Dicha herramienta funciona en el motor de ejecuci贸n de JavaScript V8 y utiliza una arquitectura de E/S basada en eventos y sin bloqueos.
Adem谩s, a fin de facilitar la construcci贸n de la aplicaci贸n y el uso de APIs en Node.js, se aprovech贸 el framework minimalista y flexible de Express. Su prop贸sito es facilitar el manejo de rutas, peticiones, respuestas, middlewares, errores, entre otros, e integrar f谩cilmente bases de datos, motores de plantillas, autenticaci贸n y enrutamiento (GET, POST).
Ahora bien, hasta el momento se estaba trabajando en un repositorio llamado Tarea-1---BD:
pero debido a que se inici贸 otra vez, mejor se cre贸 otro repositorio llamado Tarea1--NuevaVersion:
El video adjuntado anteriormente fue la referencia a utilizar para esta nueva versi贸n del proyecto. Ahora, se trabaja bajo el siguiente mapa de archivos:
Cabe mencionar que, pese a ser el video de 48 minutos, se tom贸 evidentemente m谩s de ese tiempo verlo porque hab铆a que hacer varias pausas y rewinds para comprender bien lo que se estaba realizando en el tutorial, no perderse y seguir todo el proceso.
Adem谩s, nos topamos con 2 errores, pero fueron por intentar correr el c贸digo de iniciaci贸n del servidor sin antes descargar Express y npm. Luego de haberlo hecho, ya todo funcion贸.
Luego de terminar el video, se lleg贸 a un nuevo esqueleto arquitect贸nico para la aplicaci贸n. El mapa es el siguiente:
- En la carpeta "public" se trabaja el frontend con JavaScript, HTML y CSS.
- En la carpeta "database" se maneja la conexi贸n con la BD utilizando JavaScript y Node.js con Express
- En carpeta "routes" se administran las rutas para las APIs y los m茅todos GET y POST para cargar los empleados a la tabla de la p谩gina principal y para enviar los datos para insertar un empleado desde la p谩gina de Insertar.
- En la carpeta "controllers" se escribi贸 el c贸digo JavaScript para las funciones que usan los m茅todos GET y POST para cargar la tabla y crear un nuevo empleado.
- Por 煤ltimo en app.js, index.js y config.js se escribe el c贸digo para iniciar el servidor de la app.
Ahora s铆, pese a haber reiniciado el trabajo, esta versi贸n s铆 sirve y corre sin problemas. Luego de haber hecho varias pruebas ingresando empleados y verificando que la base de datos se actualizara, se lleg贸 exitosamente a que la p谩gina web carga correctamente la informaci贸n y en el orden alfab茅tico solicitado.
Luego de ver este 茅xito, se procedi贸 a trabajar el frontend desde el punto de vista est茅tico. Tranquilos de que lo m谩s importante funcionaba, nos pusimos a agregar color, fuentes, estilos a los bordes y a decorar la tabla. Finalmente, qued贸 as铆 la p谩gina principal terminada:
Adem谩s, seguido de eso nos pusimos a trabajar en mejorar la interfaz para el m贸dulo de insertar. En vez de ser un formulario gris y 谩rido, le pusimos un color que resaltara con el azul de la principal: naranja. Y nos dimos la libertad de experimentar un poco con CSS y las diferentes herramientas que podr铆amos utilizar para hacer m谩s interesante el componente. Nos pusimos a darle brillo a los botones, sombras, bordes redondeados y, casi 45 minutos despu茅s, llegamos a la versi贸n final para ese m贸dulo:
Por 煤ltimo, para finalizar la sesi贸n de trabajo del d铆a, pulimos el dise帽o de mensajes de error y 茅xito y llegamos a los siguientes:
Comentarios
Publicar un comentario