Iniciar sesión Probar Confluence gratis

Code Review Rendición Web

Propiedad de Juan Guillermo Morán Leiva
Última actualización: may 13, 2024

Propietario Galilea

Redactor @Juan Guillermo Morán Leiva

Rol Líder Técnico

Interesados @Humberto Silva Galilea

Angular: Tecnología principal.

Versionado
Auditoria de NPM
Crypto-JS
Webpack
Loader-Utils
Webpack-dev-middleware
PostCSS
Quill
Semver
Análisis de código.
Archivos principales de proyectos angular.
Organización de directorio app
Servicios
Pruebas de sistema.
Prueba de sistema ambiente local.
Prueba de sistema ambiente staging.
Conclusión.
¿Cómo debemos proseguir?
Tiempos estimados

Angular: Tecnología principal.

Angular suele ser un sitio que se actualiza constantemente por ello esta diferencia de tres versiones en el
core, es una practica recomendable actualizar estas versiones para obtener las nuevas características y
soluciones de problemas que suelen traer estas versiones sobretodo cuando se actualiza la versión mayor.
No obstante esto podría traer problemas de compatibilidad con alguna dependencia.

Versionado


Versionado de proyecto Versionado actualizado de angular

CON TECNOLOGÍA DE
 
1 "@angular/animations": "14.1.0", 1 "@angular/animations": "^17.3.0",
Iniciar sesión Probar Confluence gratis
2 "@angular/common": "14.1.0", 2 "@angular/common": "^17.3.0",
3 "@angular/compiler": "14.1.0", 3 "@angular/compiler": "^17.3.0",
4 "@angular/core": "14.1.0", 4 "@angular/core": "^17.3.0",
5 "@angular/forms": "14.1.0", 5 "@angular/forms": "^17.3.0",

Auditoria de NPM
Crypto-JS

Severidad: CRÍTICO

Descripción: La función PBKDF2 de Crypto-JS es significativamente más débil de lo especificado en

estándares antiguos y modernos.

Acción sugerida: Actualizar a crypto-js@4.2.0 realizar este cambio puede introducir

incompatibilidades. 

Más información: GHSA-xwcq-pm8m-c4vf

Webpack

Severidad: CRÍTICO

Descripción: Acceso a objetos entre distintos dominios.

Acción sugerida: Actualizar versión core de angular angular@17.3.0 .

Más información: GHSA-hc6q-2mpp-qw7j

Loader-Utils

Severidad: ALTA

Descripción: Es una dependencia de @angular-devkit/build-angular Vulnerable a ataques de

Denegación de Servicio Regular Expression (ReDoS).
Acción sugerida: Actualizar versión core de angular angular@17.3.0 .
Más información: GHSA-3rfm-jhwj-7488, GHSA-hhq3-ff78-jv3g

Webpack-dev-middleware

Severidad: : ALTA

Descripción: Vulnerabilidad de transversal de ruta.

Acción sugerida: Actualizar versión core de angular angular@17.3.0 .

Más información: GHSA-wr3j-pwj9-hqq6

PostCSS

Severidad: MODERADO

Descripción: Dependencia de desarrollo; error en el análisis de retornos de línea que puede llevar a
comportamientos inesperados.
Acción sugerida: Actualizar versión postcss@8.4.38 .
Más información: GHSA-7fh5-64p2-3v2j

Quill

Severidad: MODERADO

Descripción: Vulnerabilidad de Cross-site Scripting (XSS).

Acción sugerida: Actualizar a quill@2.0.1 realizar este cambio puede introducir incompatibilidades.

Más información: GHSA-4943-9vgg-gr5r

Semver Iniciar sesión Probar Confluence gratis

Severidad: MODERADO

Descripción: Dependencia de @angular-devkit/build-angular Vulnerable a Denegación de Servicio

Regular Expression (ReDoS).
Acción sugerida: Actualizar versión core de angular angular@17.3.0

Más información: GHSA-c2qf-rxjj-qqgw

Análisis de código.
El objetivo de este análisis es buscar todos los puntos de mejoras a implementar para aumentar la facilidad
de mantención y limpieza de código

Archivos principales de proyectos angular.

[Link]

Desacoplamiento: Considero que el código podría facilitar su lectura al disminuir las lineas escritas en el
archivo, para ello se propone exportar matriz de rutas hijas tipo Routes (Array<Routes>) por modulo.
Función de ayuda para generación de rutas: Recomiendo implementar función para construir rutas, de
esta forma reducimos la duplicidad y centralizamos la capa de rutas hijas. function
routesBuilder(Array<{path:string,module<T>:unkown}>):Array<Routes>

Implementación de enum: Recomiendo el uso de enum para el mapping de rutas con el fin de evitar
hardcoded en diferentes puntos de navegación. enum paths {confirmationRequired:'confirmation-
required'} .

Paths poco intuitivos y redundantes: los paths actualmente implementados son poco amigables para la
percepción de un usuario común, para esto se recomienda que el enfoque del path sea orientado a la
acción de la ruta. Ej: [Link]/asignacion/listar_rendiciones/por_confirmar
reemplazar por [Link]/asignacion/lista/pendientes . Ademas existe
redundancia en algunos path [Link]/rendicion/rendidor/Rendidor

[Link]

Desacoplamiento: El resolver parece estar cargando varios datos para múltiples áreas de la aplicación, lo
que es una practica común. No obstante en caso de que la aplicación escale, es probable que las cargas
se vuelvan complejas; para prevenir este comportamiento se recomienda separar en resolvers específicos
los segmentos de cargas.
Tipado Estricto: Es muy recomendable implementar interfaz que indique lo que resuelve el servicio
Navigation, Message[], Notification[], any, Shortcut[], User

Control de error observable: se recomienda usar CatchError de Rxjs para gestionar de manera global
los errores de carga inicial.

1 this._navigationService.get(),
2 this._messagesService.getAll(),
3 this._notificationsService.getAll(),
4 this._quickChatService.getChats(),
5 this._shortcutsService.getAll(),
6 this._userService.get()

[Link]

Modularización: Considero que el sistema parece estar bien modularizado, lo que es una
implementación positiva para la mantenibilidad.
Desacoplamiento: Recomiendo separar las configuraciones de dependencias para quitar responsabilidad
al modulo principal, de esta forma nos acercamos a la arquitectura hexagonal.
 Importaciones sin uso: Recomiendo eliminar los imports no usados con el fin de mantener limpio el
Iniciar sesión Probar Confluence gratis
código.

Organización de directorio app

Para analizar la organización del proyecto ocuparemos el enfoque que se establece en innovaweb mediante
la implementación de la arquitectura hexagonal más conocida como puertos y adaptadores, esta
arquitectura promueve ciertos conceptos requeridos de entender para realizar una correcta implementación
y obtener el beneficio de mejorar la mantenibilidad y legibilidad del sistema.

Conceptos Arquitectura Hexagonal

Core

El concepto de core en la arquitectura hexagonal promueve la generación de interfaces y servicios para los
diferentes adaptadores que se implementaran el modelo de negocio del sistema.

Puertos (Ports)

Conjunto de archivos del core que definen interfaces de puertos de entrada (Inputs) y de salida (outputs),
estos puertos implementan la comunicación entre adaptadores y el modelo de negocio.

Servicios (Services)

Conjunto de clases que centran el modelo de negocio establecido en el sistema.

Adaptadores (Adapters)

Conjunto de funcionalidades que se encargan de armar la infraestructura del proyecto, tales cómo la gestión
de navegación, gestión de estilos, configuraciones, gestión de integraciones etc.

Propuesta de organización hexagonal.

1 -src
2 -- Core
3 --- Interfaces
4 ---- Modules
5 ---- Services
6 ---- Ports
7 ----- Inputs
8 ----- Ouputs
9 --- Services
10 -- Infrastructure
11 --- Adapters
12 ---- navigation
13 ---- httpRequest
14 ---- httpInterceptors
15 --- Configs
16 --- Layouts
17 --- Styles

Esquema organizacional actual del sistema.

1 - src
2 -- app
3 --- Core /** Conflicto de concepto: core contiene definiciones de infraestructura */
4 ---- auth
5 ---- config
6 ---- icons
7 ---- navigation
8 ---- transloco
9 ---- user
10 ---- [Link]
 11 --- layout /** falta de concepto: Infraestructura */
Iniciar sesión Probar Confluence gratis
12 ---- layouts /** redundacia de nombres */
13 ---- ......
14 --- common
15 ---- ......
16 --- mock-api /** ¿dependencia de desarrollo? o ¿dependencia de testing? *
17 --- model /** Conflicto de concepto: definición de puertos fuera del core */
18 --- modules /** falta de concepto: Infraestructura */
19 --- services /** Conflicto de concepto: lógica de negocio fuera del core */
20 --- shared /** falta de concepto: Infraestructura */
21 -- [Link]
22 -- [Link]
23 -- [Link]

Servicios

El análisis de los servicios tiene un enfoque común dado que en la mayoría de servicios se presentan las
mismas observaciones.

harcoded: Es una constante en los servicios tener hardcoded en la definición de rutas de integración para la
comunicación con los servicios REST; se recomienda crear un mapping de esas rutas.

Interceptores de cabeceras: Noto una inconsistencia en la implementación respecto al interceptor de

sesión AuthInterceptor dado que por lo que expresa el código este interceptor se encarga de inyectar el
accessToken cómo bearer token en la cabecera de autorización Authorization de las request, pero los
servicios cómo GastoService obtiene el accessToken y vuelve a inyectar el token en la cabecera de la
solicitud, para mejorar esta inconsistencia recomiendo realizar un análisis de los servicios y centralizar la
lógica de implementación para no tener diferidas implementaciones en el código.

Limpieza de código: Se recomienda eliminar importaciones no utilizadas.

Pruebas de sistema.
Prueba de sistema ambiente local.
Sin resultados.

No se logra realizar pruebas en ambiente local porque no se encuentra disponible un API con ambiente
desarrollo, se intento probar el código apuntando al ambiente staging pero no se obtuvieron resultados
positivos dado que se bloquean las solicitudes por cors, acción que esta bien. No obstante es importante
tener un ambiente de desarrollo para agilizar la mantención del front end de forma independiente al back
end.

Prueba de sistema ambiente staging.

El enfoque que utilizare para estas pruebas es principalmente asociado a obtener el mayor feedback sobre la
experiencia de usuario, oportunidad de mejoras visuales y búsqueda de errores en el comportamiento del
sistema.

Usuario Contraseña Tipo de usuario URL

rendidorg@[Link] Galilea10201 Admin RindeApp - Sistema de rendiciones

Observación: Carga de recursos

Pantalla / Sección Pantalla inicial

Comentarios Falta favicon de sistema.

Evidencia de prueba carga de recursos
Iniciar sesión Probar Confluence gratis

Favicon faltante

Prueba: Inicio de sesión

Pantalla / Sección Pantalla inicial

Comentarios Sin observaciones.

Prueba: Registro de cuenta

Pantalla / Sección Paginas publicas sin funcionalidad

Comentarios Se encuentran disponibles paginas de registro de usuarios pero esta no presenta

funcionalidad, ademas de que existen bloques de textos en ingles que no expresan
información relacionada con el sistema.

Evidencia de registro de cuenta

Pagina de registro de usuario

 Iniciar sesión Probar Confluence gratis

Pagina post registro de usuario

Propuesta de mejora: Modal de selección holding

Pantalla / Sección Modal de selección holding

Comentarios Se recomienda centrar los botones para un equilibrio visual en la pantalla y mejorar
el aspecto para dispositivos móviles.

Referencia de mejora para Modal de selección holding

Centrar contenido
 Iniciar sesión Probar Confluence gratis

Mejorar visualización de modal en vista de dispositivo

móvil

Prueba: filtro de rendiciones por confirmar

Pantalla / Sección Filtro de rendiciones por confirmar

Comentarios Presenta listado de rendiciones pendientes de confirmación, en caso de aplicar el

filtro por rango de fecha lo realiza pero no me ofrece una opción para poder limpiar
el filtro ingresado

Evidencia prueba filtro de rendiciones por confirmar

No se puede resetear el filtro

Propuesta de mejora: filtro de rendiciones por confirmar



Pantalla / Sección Filtro de rendiciones por confirmar

 
Comentarios se recomienda agregar un botón con un icono similar a que me permita
Iniciar sesión Probar Confluence gratis

Prueba: creación de gasto - modulo del rendidor.

Pantalla / Sección Creación de gasto



Comentarios Se crea gasto desde el modulo del rendidor, este se logra crear con éxito no
obstante posterior a la creación se ejecuta una carga del sitio de forma completa,
este comportamiento afecta a la experiencia de usuario al recibir visualmente un
refresco completo de la pantalla.

Comentarios Por otro lado en la búsqueda de errores, se encontró un comportamiento poco

habitual que permite el ingreso de un total con número negativo en la creación
de gastos lo que considero a primeras impresiones que es un error, no obstante
puede ser una regla de negocios que desconozco al momento de la prueba.

Evidencia prueba creación de gasto - modulo rendidor

Creación de gasto con valor negativo

Gasto registrado con valor negativo

Prueba: creación de rendición - modulo del rendidor



Pantalla / Sección Creación de rendición

Comentarios Control de error para solicitud que supera el peso permitido: Web no controla
la excepción enviada desde el back end cuando se envía un archivo que supera el
limite de peso establecido, esta acción afecta a la experiencia de usuario al no
obtener un feedback visual del servicio, para esto se recomienda agregar alerta o
mensaje del error devuelto por el servicio.

Comentarios crear una rendición con valores de gastos negativos: Este punto puede ser un
comportamiento permitido por alguna regla de negocio que desconozco al
 momento de la prueba, no obstante personalmente me parece que es un 
Iniciar sesión Probar Confluence gratis
comportamiento poco habitual.

Comentarios No se actualiza listado de rendiciones posterior a la creación de rendición:

Listado queda congelado posterior al confirmar el registro de rendición, obligando

Evidencia prueba creación de rendición

Crear rendición con archivo PDF que supera el limite de peso

Permite crear rendición con valores negativos.

 Iniciar sesión Probar Confluence gratis

Listado de rendiciones.

Propuesta de mejora: botón agregar gasto - modulo rendidor

Pantalla / Sección Botón agregar gasto

Comentarios considero que el botón agregar gasto es poco intuitivo con un icono de “like” que
represente la aprobación de un gasto a rendir, para ello recomiendo un icono
similar a

Evidencia propuesta de mejora: botón agregar gasto - modulo rendidor

Botón de “like” poco intuitivo, es un icono de red social, más que una confirmación de elemento.

Prueba: asignación de rendición - modulo del asignador.



Pantalla / Sección Asignación de rendición

Comentarios Se logra asignar con éxito las rendiciones de pruebas en el flujo establecido
 
Comentarios solo tengo comentarios visuales orientados a la experiencia, consideroIniciar
que el sesión Probar Confluence gratis

botón “Guardar Asignación” esta fuera de linea visualmente en la tabla, al igual que
otras columnas tienden a estar muy cerca unos de otros, recomiendo mejorar esta
is ali ación de tabla para q e q ede con espacios holgados no obstr ir la ista

Tabla de asignación de rendiciones

Prueba: revisar rendición - modulo del revisor

Pantalla / Sección Revisión de rendición

Comentarios Se logra cambiar estados de una rendición en modo de revisión llegando hasta el
final de proceso y logrando confirmar una rendición, pero el flujo funciona igual
con números negativos.

Comentarios Error al cancelar la edición de gasto, row queda con formulario deshabilitado y con
el error de campo marcado, ademas botón de editar desaparece del listado de
botonera de acciones.

Comentarios Error al generar reporte completo, se abre nueva ventana y queda cargando de
forma permanente

Evidencia prueba revisión de rendición - modulo del revisor.

Aprobación parcial con valores negativos

Aprobación parcial aprobada con números negativos.

 Iniciar sesión Probar Confluence gratis

Formulario edición de gasto

Bug al cancelar formulario de edición de gasto

Web se queda pegada al momento de generar reporte completo

Propuesta de mejora: formulario de revisión rendición - modulo del revisor

Pantalla / Sección Formulario de revisión rendición

Comentarios Se propone mejorar presentación de información, se puede reducir el espacio de

información en formulario deshabilitado para brindar mayor espacio a formularios
de edición de gastos.

Comentarios Grupo de botones de acciones en tabla gasto, considero que es poco usable, se
propone llevar estos botones de forma explicita según prioridad de acción tal
como aprobar rendición o aprobación parcial.

Comentarios Formulario de edición de gasto con scroll horizontal, la experiencia de usuario se

ve afectada con este comportamiento, este punto se complementa con el
anteriormente mencionado, al brindar más espacio a la sección de gastos este
puede tener mayor libertad al posicionar los formularios de edición.

Evidencia propuesta de mejora: formulario de revisión rendición - modulo del revisor.

 Iniciar sesión Probar Confluence gratis

Formulario deshabilitado en revisión de rendición

Botonera de acciones

Prueba: confirmar rendición como supervisor - modulo supervisor.

Pantalla / Sección Confirmar rendición

Comentarios Se logra confirmar la rendición declarada con valores negativos logrando finalizar
el ciclo de vida de una rendición.

Evidencia prueba confirmación de rendición como supervisor - modulo supervisor

Rendición con valores negativos aprobada con éxito.

Conclusión.
Para concluir esta revisión de código debo destacar tres puntos principales tales cómo:

Implementación del código estático

Resultado final de implementación con pruebas manuales
Recomendación de cómo proseguir.

Respecto a la implementación de código estático puedo comentar que se encuentra en una condición muy
básica y poco estructurada, si bien tiene una organización establecida por el framework este no logra
transmitir la importancia del modelo de negocio de forma explicita, requiere de varias lecturas al mismo
código para entender su funcionalidad, no obstante destaco que hasta este punto es moldeable sin mayor
riesgo a quebrar el sistema.

Sobre el resultado final de la implementación, la web se siente fluida en cuanto a rendimiento, pero carece
de buenas practicas respecto a la experiencia de usuario, muchos componentes se sienten forzados cómo el
grupo de botones de acciones en las tablas, la visualización de información resumida y la incorrecta
implementación de iconografía.
¿Cómo debemos proseguir? Iniciar sesión Probar Confluence gratis

Considero que nos encontramos en el punto ideal para implementar un refactor de código en función de la
implementación de la arquitectura hexagonal y mejorar las carencias de experiencia de usuario, de esta
forma podemos comenzar a tener documentación detallada del modelo de negocios a fin de facilitar la
integración de nuevas características con desarrollos de bajo esfuerzo, ademas de un soporte controlado y
documentado.

Tiempos estimados

Puntos de code review Tiempo estimado

Actualización del core angular y dependencias 32HH

Implementación de arquitectura hexagonal
Corrección de recaudaciones con valores
negativos
Refactor de rutas.

Mejoras de UX / UI 56HH
Bugs de tablas
Limpieza de fuse con paginas no usadas.

Favicon
Mejorar control de error para la subida de
archivos