Diseño front-end con React para una aplicación web

-

Este proyecto consiste en la realización de una plataforma web que gestione y optimice el stock de medicamentos en la Farmacia PYC. Este sistema de gestión es una decisión estratégica que permite al servicio farmacéutico documentar todas sus actividades con el fin de planificar, operar y controlar eficazmente sus procesos, además de la implementación y mejora continua que son aspectos fundamentales en el sistema. La plataforma es desarrollada haciendo uso de los diferentes lenguajes web como son HTML, JSX, CSS. Asimismo, para facilitar el desarrollo de la interfaz, se utiliza una librería de JavaScript, React, la cual está focalizada en el desarrollo de interfaces de usuario. React ofrece herramientas y aisladas piezas de código llamadas ‘componentes’ que facilitan el diseño y disminuyen el tiempo de trabajo.

En esta primera parte del proyecto solo nos centramos en construir el front-end del sistema de gestión de farmacia con React. En trabajos posteriores nos centraremos en construir el back-end de la misma aplicación descrita. La aplicación se puede encontrar en GitHub.


Para el diseño de la aplicación web se trabajó con una estructura de microservicios, además se trabajó con la librería React de JavaScript que permite crear interfaces de usuario por medio de componentes. La aplicación web es una Single Page Application (SPA) por lo que solo cuenta con un archivo HTML y el contenido cambia dinámicamente al consumir servicios por medio de API’s. Toda la página se desarrolló con JavaScript, HTML y CSS, adicionalmente se usó el framework Bootstrap para el estilo de las tablas y los formularios. Este proyecto no incluye las conexiones a la base de datos, solo el front-end de la página.


Las aplicaciones basadas en arquitecturas de microservicios por lo general se ejecutan en diferentes contenedores y entornos, por lo que es necesario saber dónde están las diferentes instancias con el fin de que las solicitudes lleguen efectivamente al microservicio de destino. El denominado “server discovery” mostrado en el esquema es un servidor central que mantiene una vista global de la aplicación, su objetivo principal es conocer la ubicación de cada una de las instancias del desarrollo. Estos microservicios se comunican a través de una interfaz bien definida mediante APIs ligeras y cada uno de los módulos es propietario de una base de datos específica. 

Mediante el siguiente esquema se resume cómo sería a grandes rasgos la arquitectura de microservicios para la aplicación del sistema de gestión de farmacia diseñada. 




A continuación se describen cada una de los microservicios para la administración del inventario en una farmacia.

  • Microservicio de “login” : En este caso, el componente se refiere al login como el servicio en el que el usuario (administrador) se autentica en la página Web para tener acceso a la información del resto de módulos. En otras palabras, el usuario logueado podrá observar los datos del inventario, ventas, compradores, personal, medicamentos y proveedores. Para este microservicio, se tiene un único usuario con la información del correo electrónico y la contraseña de manera “quemada”, es decir, escrita de manera forzada en código sin consultar una base de datos. Dicho usuario contiene los siguientes datos: 

Correo: admin@hotmail.com

Contraseña: admin



  • Microservicio de “inventario”: Para este módulo de servicio se tiene la información indispensable al momento de llevar un conteo de los productos (medicamentos) en una farmacéutica, es decir, fecha en que se hace el inventario, el medicamento en cuestión y la cantidad de este en stock, diferenciando cada caso mediante un número identificador “id”. Para obtener el nombre del medicamento, debe coincidir el “id” del archivo tipo JSON “Medicamentos” con el “id” del archivo de “Inventario”. En el momento en el que existe una relación, se muestra en pantalla el nombre del medicamento. Dentro de este módulo, existe la posibilidad de editar, agregar o eliminar algún dato del inventario, si es necesario.

  • Microservicio de “medicamentos”: Este componente agrupa la información necesaria de cualquier medicamento que se almacena en una farmacéutica, en el que se incluye el número identificador “id”, nombre del medicamento, presentación (líquido oral, tabletas…), dosificación (cantidad por usuario), fecha de vencimiento, tipo de medicamento y finalmente, los proveedores que distribuyen el mismo. Para obtener la información del nombre del medicamento, el tipo y los proveedores, se procedió de manera similar a la descrita en el anterior módulo, en donde se usó la coincidencia del “id” y se usó cada archivo tipo JSON respectivo en cada caso. En este módulo de microservicio también es posible modificar la información ya almacenada, borrarla o agregar la información de un nuevo medicamento a la base de datos.

  • Microservicio de “proveedor”: Esta sección contiene la información de los proveedores que distribuyen un medicamento en específico, donde se encuentra el nombre, NIT, dirección, persona encargada, número de contacto, correo y ciudad de ubicación. Adicionalmente, para que los demás módulos accedan a la información que contiene la base de datos de este microservicio, también debe contener el “id”. De la misma manera que los otros módulos de microservicios, es posible agregar, eliminar o editar algún proveedor.


  • Microservicio de “comprador” : Este componente contiene información del usuario que compra el medicamento. Sirve para llevar un registro de los clientes de la farmacia, dentro de este módulo se podrá ingresar, editar y eliminar cada uno de ellos.

  • Microservicio de “personal”: Este componente abarca la información del personal de la farmacia. Sirve para llevar un registro de ventas por persona encargada del área, y así, poder hacer una comparativa mes a mes. Dentro de este componente se podrá  ingresar, editar y eliminar información del personal. 

  • Microservicio de “ventas”:  Este componente hace referencia a la información que abarca una venta completa, donde se va a registrar cada unidad que sale de cada medicamento. Esto ayuda a hacer un sondeo de las ventas que ha realizado la farmacia, para luego compararlas con la cantidad de medicamentos que salieron del inventario. En este microservicio se podrá editar, eliminar y agregar las diferentes ventas realizadas. Este microservicio se conecta por medio de APIs a los microservicios de comprador, personal y medicamentos.

  • Microservicio de “formulario”:  Este componente se conecta por medio de APIs a cada uno de los otros microservicios presentes en la aplicación. En este módulo se almacenan los diferentes formularios que se requieren para el manejo de la información de la farmacia (adición y edición) y el diseño o los estilos que se requiere que estos tengan.



La arquitectura de microservicios que se usó en la página tiene la ventaja de que cada parte de la aplicación es autónoma, se pudieron desarrollar e implementar de forma independiente. En microservicios cuando un componente debe interactuar con otro, lo hace por medio de APIs, esto hace que la aplicación web se pueda implementar de forma sencilla y escalar cada servicio es más fácil, sin embargo como cada microservicio cuenta con sus propios recursos y su propia base de datos hay un alto consumo de memoria.

Si bien React no es un framework, es de las bibliotecas más flexibles para crear interfaces de usuario para aplicaciones pequeñas y al trabajar por módulos fue posible reutilizar código para diferentes microservicios. Finalmente, el uso de Bootstrap, para el diseño de tablas y formularios, permitió que su implementación fuese más ágil.


Referencias

Comentarios

Publicar un comentario