Modelo Estructural

Modelo Clases
LOGAPP
Versión 1.0
 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

HISTORIA DE REVISIONES

Fecha Versión Descripción

Documento Revisado por:

Walter Garcia Salazar

Versión del Documento Elaborado por:

Walter Garcia Salazar

Confidencial Corporación Universitaria Iberoamericana 2023

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

TABLA DE CONTENIDO

1. INTRODUCCIÓN2
1.1. PROPÓSITO 2
1.2. ALCANCE 3
1.3. REFERENCIAS 3

2. SCRUM 4

2.1 PRODUCT BACKLOG 4

3. MODELO ARQUITECTONICO DEL SISTEMA 5

3.1 DISEÑO ARQUITECTONICO 5
3.1.1 ARQUITECTURA FÍSICA 6
3.1.2 ARQUITECTURA LOGICA O FUNCIONAL 6
3.1.3 DESPLIEGUE DEL SISTEMA 7

Confidencial Corporación Universitaria Iberoamericana 2023

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

1. INTRODUCCIÓN

LOGAPP, que permite un inicio de sesión y perfilamiento centralizado, usando como

usuario los correos corporativos de la empresa y su modelo de autenticación

La plataforma estará compuesta por varios módulos: aplicaciones, roles, permisos y

usuarios, contará con un módulo de reportes y conexión al modelo de BI de la
organización para generar data analítica.

La plataforma estará soportada bajo una infraestructura en la nube, garantizando su

disponibilidad y escalabilidad. A nivel de software la plataforma será un aplicativo web que
conecte con un API y almacene la información en una base de datos.

1.1. PROPÓSITO

Para la industria del servicio público que administra la flota vehicular 100% eléctrica, es de
suma importancia la implementación de una herramienta tecnológica (Software) la cual se
encargue de almacenar, capturar, notificar y modelar los datos correspondientes a la
gestión e información actualizada de sus vehículos 100% eléctricos, etc.

Algunas de las necesidades prioritarias para la operación son:

1. Obtener y establecer límites de tiempo para la vigencia del Soat y Tecno mecánica.
2. Administrar y resguardar la información de daños y soluciones de los vehículos
(Mantenimientos preventivos y correctivos).
3. Visualizar desde las diferentes áreas la disponibilidad de los buses (Operativo -
Inoperativo).
4. Ordenar y modificar las horas de disponibilidad de la flota (Inicio y fin de ruta).
5. Administración de usuarios para la alimentación de la plataforma (daños, soluciones,
hora de disponibilidad, kilometraje, etc).

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.2

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

6. Disponer de un Dashboard con la información de los Soat y Tecno mecánica.

7. Disponer de un Dashboard con la disponibilidad de los vehículos.
8. Permitir que la plataforma exporte informes con la información anteriormente definida.

Un modelo de autorización juega un papel vital en la protección de los datos

confidenciales de una empresa. Las empresas a menudo codifican una lógica
personalizada adicional además de las soluciones tradicionales de control de acceso,
como Active Directory. Sin embargo, a medida que las empresas crecen, necesitan un
control de acceso que pueda escalar para adaptarse a su crecimiento.

Los modelos de autorización generalmente administran el acceso de los usuarios y se

basan en estructuras departamentales, jerarquías y roles de trabajo de los empleados.
Hay dos aspectos importantes de los modelos de autorización: decisión y ejecución.

● La decisión evalúa si un usuario puede realizar una acción particular en un

recurso. Por ejemplo, la evaluación de una solicitud de usuario genera una
decisión permitida o denegada.
● La ejecución define la progresión de la solicitud en función de la decisión. Por
ejemplo, qué se le debe presentar al usuario cuando se deniega o aprueba una
solicitud.

En ausencia de un modelo de autorización, los administradores se esfuerzan por definir

los permisos. Podría haber muchas solicitudes aleatorias involucradas en la gestión del
control de acceso, lo que puede convertirse rápidamente en una tarea engorrosa. Sin
embargo, los modelos de autorización brindan una estructura y una jerarquía, lo que
protege su aplicación y mejora la experiencia del usuario.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.3

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

Control de acceso basado en roles

Un control de acceso basado en roles (RBAC) define el acceso en forma de roles y sus
tareas asociadas. Un rol es un conjunto de derechos y capacidades que definen lo que un
usuario puede hacer. Puede pensar en roles como filtros: agrega usuarios a los roles para
aplicar permisos. Por ejemplo, un rol de Cuentas por cobrar tendrá acceso a herramientas
y datos de cuentas por cobrar, mientras que un rol de Cuentas por pagar no lo tendrá.

Hay dos enfoques en los que puede modelar RBAC: central o jerárquico.

RBAC central

Core RBAC está diseñado mediante la definición de roles: grupos de usuarios con
características comunes. Designa tareas específicas para cada rol definido por el usuario,
lo que permite a los usuarios realizar diferentes tareas en función de su(s) rol(es)
asignado(s). Un administrador específico es responsable de definir usuarios, roles y
permisos.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.4

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

Diseño basado en modelos

En un diseño basado en modelos, puede usar entidades de base de datos para

representar roles, permisos, usuarios y sus asociaciones relacionadas.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.5

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

En la figura anterior, puede ver que las principales entidades que participan en el
modelado RBAC incluyen las siguientes:

● El usuario almacena la información del usuario

● El rol almacena información relacionada con el rol
● UserRole almacena el mapeo de roles de usuario
● El permiso almacena las acciones y los recursos en los que se puede realizar la
acción.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.6

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

● RolePermission almacena la asociación de cada rol a su(s) permiso(s) asociado(s)

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.7

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

Desarrollar un sistema informático de tipo SSO (single sign-on), cuyo nombre será
LOGAPP, que permite un inicio de sesión y perfilamiento centralizado, usando como
usuario los correos corporativos de la empresa y su modelo de autenticación

La plataforma estará compuesta por varios módulos: aplicaciones, roles, permisos y

usuarios, contará con un módulo de reportes y conexión al modelo de BI de la
organización para generar data analítica.

La plataforma estará soportada bajo una infraestructura en la nube, garantizando su

disponibilidad y escalabilidad. A nivel de software la plataforma será un aplicativo web que
conecte con un API y almacene la información en una base de datos.

En el siguiente github presentó la versión mvp del sistema con funcionalidades de CRUD,
autenticación, autorización y persistencia.

https://github.com/wgarcia43/logapp

● REST con Swagger

Swagger es un conjunto de herramientas de software de código abierto para diseñar,

construir, documentar, y utilizar servicios web RESTful. Fue desarrollado por SmartBear
Software e incluye documentación automatizada, generación de código, y generación de
casos de prueba.

La documentación de las APIS en swagger es un estándar de desarrollo en equipos

distribuidos, ya que automatiza una parte de la tarea de la documentación y permite que
los equipos front conozcan los métodos y contratos de las API que tienen que
implementar, así estas no tenga un funcionamiento al 100%, esta práctica se conoce
como mockear.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.8

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

Los equipos de back también usan el swagger para verificar el funcionamiento de sus
métodos, sin recurrir a herramientas de terceros como postman, básicamente generan
colecciones de CURL que permiten simular los llamados entre front y back, la gran ventaja
de swagger es correr desde el navegador y poder adjuntar más información de los
métodos expuestos como medios de autenticación o lógica de negocio.

https://api-auth.bancointernacional.com.ec/swagger/#!/External/ApiExtClaimsPost

Este ejemplo de swagger es expuesto por el banco internacional de ecuador y es usado

por los desarrolladores que tengan procesos de integración con la entidad, es una buena
práctica usar versionamiento sobre el swagger para poder tener todo el tracking de los
cambios en métodos y contratos que normalmente tienen un API.

● ReactJS.

Es una librería open source de JavaScript para desarrollar interfaces de usuario. Fue
lanzada en el año 2013 y desarrollada por Facebook, quienes también la mantienen
actualmente junto a una comunidad de desarrolladores independientes y compañías.

Hoy en día muchas empresas de primer nivel utilizan React para el desarrollo de sus
aplicaciones, y es que entre ellas podemos encontrar Facebook, Instagram y el cliente
web de WhastApp (todas propiedad de Facebook), y otras como AirBnb, Uber, Netflix,
Twitter, Reddit o Paypal.

React JS es hoy en día una de las librerías más usadas a nivel de front en Colombia, esto
basado para mi en los siguientes puntos:
- Es la evolución natural de los desarrolladores que venimos de tecnologías .net
como asp o C#, al dar el mismo manejo MVC a nivel de patrón de arquitectura.
- La posibilidad de poder saltar a Reac Native y generar aplicaciones móviles
multiplataforma.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.9

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

- La gran cantidad de plugins y librerías de terceros, gracias a la gran comunidad de

desarrollo que lo soporta.

En mi experiencia profesional he trabajado varios sistemas en React, de tamaños

medianos y grandes, teniendo buenos resultados a nivel gráfico y de rendimiento.

● Hooks (useState, useContext, useEffect, useReducer).

Los Hooks son una nueva incorporación en React 16.8. Le permiten usar el estado y otras
características de React sin escribir una clase.

Tradicionalmente, en React.js, se necesitaban componentes basados ​en clases para

utilizar métodos de ciclo de vida y estado debido a la naturaleza de cómo React.js
interactúa con JavaScript como una biblioteca de interfaz de usuario. Sin embargo, con
las versiones más recientes de React.js, los programadores que trabajan en el front-end
con React.js ahora pueden crear componentes funcionales con hooks, que tienen
similitudes con los componentes basados ​en clases, pero son:

Más fácil de probar: aunque no tiene tanta influencia en los proyectos personales como
en las aplicaciones implementadas públicamente y de alta disponibilidad, las pruebas son
una parte vital del ciclo de vida de desarrollo de software de cualquier organización. Ya
sea que se presente en forma de servicios de integración/desarrollo continuo como
CircleCI o TravisCI o directamente de probar la funcionalidad individual con bibliotecas
como Jest o Selenium, los enlaces hacen que probar los componentes de React.js sea
mucho más fácil que si estuvieran basados ​en clases.

Más fácil de leer: esto es especialmente útil para proyectos con muchos miembros del
equipo. Aunque uno puede suponer que hay lenguajes de diseño, métodos y guías de
estilo particulares que un equipo podría seguir con respecto a cómo construir la interfaz de
usuario, eliminar la grasa de una arquitectura de componentes basada en clases permite

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.10

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

a los ingenieros volver a escribir programas que se sientan en el núcleo del lenguaje
JavaScript en lugar de abstraer cosas innecesariamente.

Más cerca del JavaScript tradicional: como se mencionó anteriormente, escribir

componentes funcionales reduce la escritura de "funciones especiales" (clases) en
JavaScript. No es que escribir componentes basados ​en clases en JavaScript sea algo
malo, ya que JavaScript técnicamente se puede usar como un lenguaje orientado a
objetos debido a su enfoque multiparadigma, pero se debe a la forma en que JavaScript
maneja las clases y el objeto que se instancia a partir de tales declaraciones de clase.
Aquí es donde entran en juego los patrones y principios subyacentes de JavaScript, como
la cadena de prototipos y la herencia, que aunque no están cubiertas en el alcance de
este artículo, son características muy importantes de JavaScript para conocer. Otra cosa
es que si usa componentes basados ​en clases, siempre tiene que extenderse desde una
clase React.js incorporada, mientras que los componentes funcionales son funciones de
JavaScript puras donde React.js reconoce el JSX y los ganchos a través de
importaciones.

Menos código intensivo: esto también podría caer bajo el mismo paraguas que "Más
fácil de leer", pero mi intuición me dice que divida esto en su propio punto basado en un
paradigma en ingeniería de software que he mencionado anteriormente; abstracción.
Aunque normalmente tiene que cambiar algo de rendimiento por la implementación de la
abstracción, es el oxígeno el que alimenta la evolución de un producto la mayoría de las
veces. Tomar algo, en nuestro código de caso, que alguna vez fue intrincado, de escasa
capacidad y duplicado en muchas instancias y convertirlo en una solución que es más
fácil de implementar, ofrece una mejor experiencia de ingeniería en general y produce lo
mismo, si no más favorable, enfoque que iteraciones anteriores es la tesis detrás del ciclo
de vida de cualquier producto. React.js no es una excepción.

● Context API.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.11

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

La API de contexto de React es una forma en que una aplicación de React produce de
manera efectiva variables globales que se pueden pasar. El contexto también se
promociona como un enfoque más fácil y ligero para la gestión del estado utilizando
Redux.

La API de contexto es una característica nueva agregada en la versión 16.3 de React que
permite compartir el estado en toda la aplicación (o parte de ella) de forma ligera y
sencilla.

React.createContext() es todo lo que necesitas. Devuelve un consumidor y un proveedor.

Provider es un componente que, como sugiere su nombre, proporciona el estado a sus
hijos. Contendrá el store y será el padre de todos los componentes que puedan necesitar
esa tienda. El consumidor como tal es un componente que consume y utiliza el estado.

● Peticiones HTTP con Axios.

Axios es una librería cliente HTTP basada en promesas que se puede usar tanto en Node
JS como en el navegador; por lo que podremos configurar y realizar solicitudes a un
servidor y recibiremos respuestas fáciles de procesar.
Nos ayuda en el envío de peticiones asíncronas HTTP, así ayudándonos a realizar las
operaciones CRUD.

Normalmente Axios es la librería estándar en javascript para construir proxy, generar

peticiones y materializar la data de respuesta al trabajar aplicaciones cliente web y
servidor servidor rest, con Axios podemos realizar peticiones HTTP básicas (GET, POST,
PUT, DELETE) siempre respetando el estándar html, de trabajar los contratos en formato
JSON y manejar los estados de respuesta HTTP y ss headers de seguridad.
● Rutas y navegación.

Realizar navegación en la aplicación, es tan sencillo como entender la documentación de

React Router DOM. La navegación consiste en definir rutas, para que un componente sea

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.12

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

visualizado al dirigirse a la ruta en el navegador. También podemos navegar entre rutas, a

través de enlaces y hooks, para enviarle un estado asociado al componente navegado.

Gracias a la librería react-router-dom, podemos crear rutas fijas, por ejemplo, para mostrar
formularios, listas o tablas de datos, entre otros. También podemos crear rutas dinámicas,
para mostrar los datos de un cliente específico, un producto identificado, alguna orden o
contrato, etc.

Debemos entender que cuándo deseemos implementar un sistema de navegación, lo

primero es determinar qué tipo de sistema de ruteo queremos, si la navegación física del
navegador usando BrowserRouter, una navegación de ruta fija con hash variable usando
HashRouter, una navegación en memoria con MemoryRouter o demás estilos como
estáticas y demás que encontraremos en la documentación. Lo siguiente será definir cada
ruta en nuestro Switch y determinar el componente o los componentes que se mostrarán
bajo la ruta mediante Route. Esto nos permitirá darle riqueza a nuestra aplicación, y
atacar problemáticas comunes como las de la siguiente lista.
● Definir una ruta que muestre una lista o tabla de datos.
● Definir una ruta que muestre un formulario para agregar nuevos datos a la lista o
tabla.
● Definir una ruta que detalle un elemento de la lista o tabla de datos.
● Definir una ruta que edite un elemento de la lista o tabla
● Definir una ruta que muestre los datos públicos de un elemento de la lista,
recibiendo los parámetros desde la url, como el identificador y token de acceso.
● Definir rutas seguras que requieran un token de acceso provisto sobre la url o bajo
el estado de navegación.

Así, podremos ir extendiendo la lista anterior, con problemáticas comunes entre una
aplicación y otra, para ir consolidando hooks y demás componentes reutilizables de un
proyecto a otro.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.13

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

● Despliegue.

El despliegue continuo es una estrategia de desarrollo de software en la que los cambios

de código de una aplicación se publican automáticamente en el entorno de producción.
Esta automatización se basa en una serie de pruebas predefinidas. Una vez que las
nuevas actualizaciones pasan esas pruebas, el sistema envía las actualizaciones
directamente a los usuarios del software.
El despliegue continuo ofrece varias ventajas, agiliza el tiempo de comercialización al
eliminar el desfase entre la programación y el valor al cliente, que suele ser de días,
semanas o incluso meses.
Normalmente las aplicaciones web se despliegan en la nube (AWS, GCP, Azure), siendo
en colombia por penetración de mercado y costo más usado AWS, los despliegues se
pueden realizar de varias maneras, manuales, automáticos o semiautomáticos,
normalmente la infraestructura para desplegar una aplicación web está compuesta de:
- un router que administre el enrutamiento al dominio
- un servidor de enlace o cloudfront que direccione al contenido estático
- un almacén de certificados
- un servidor donde queden los compilados

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.14

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

Esta infraestructura puede o no estar dockerizada para facilitar el despliegue y aumento o

disminución de recursos físicos de acuerdo al tráfico de la aplicación, el pipeline de CI/CD
integración y despliegue continuo, normalmente va acompañada de un servidor de control
de flujos como jenkins, el cual automatiza tareas como el análisis automático de código a
través de herramientas como sonarqube, o testing automático con herramientas de
automatización tipo selenium o apium.

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.15

 LOGAPP Versión: 1.0
Modelo Clases Fecha: 12 de diciembre de 2023
Documento Modelo Estructural

Diagrama No. 1 Despliegue del Sistema

Confidencial Corporación Universitaria Iberoamericana, 2023 Pág.16