Desarrollo Frontend de una aplicación web

para el control y promoción de las actividades

de extensión.

José Amado García Rosales

 UNIVERSIDAD DEL VALLE DE GUATEMALA
Facultad de Ingeniería

Desarrollo Frontend de una aplicación web para el control y

promoción de las actividades de extensión.

Trabajo de graduación presentado por José Amado García Rosales para

optar al grado académico de Licenciado en Ingeniería en Ciencias de la
Computación y Tecnologías de la Información

Guatemala,

2023
Vo.Bo.:

(f)
Ing. Ludwing Cano

Tribunal Examinador:

(f)
Ing. Ludwing Cano

(f)
MSc. Douglas Barrios

(f)

Fecha de aprobación: Guatemala, de de 2023.

 Prefacio

El presente proyecto consiste en el desarrollo de una aplicación web utilizando React

como tecnología principal enfocada en el frontend. La aplicación fue creada para administrar
y facilitar la visibilidad y el acceso a las horas de extensión en la Universidad del Valle de
Guatemala.

En primer lugar, agradezco a la Universidad del Valle de Guatemala por brindarme la

oportunidad de trabajar en este proyecto y permitirme aplicar mis conocimientos y habili-
dades en un contexto real. También agradezco a los profesores de la facultad de Ingeniería
en Ciencias de la Computación por su apoyo y asesoría en todo momento.

El objetivo de este proyecto fue crear una interfaz de usuario intuitiva y útil para el
manejo de las horas de extensión, permitiendo a los usuarios acceder de manera fácil y
eficiente a esta información.

Durante el proceso de desarrollo, se realizaron pruebas de usabilidad y experiencia de

usuario, lo que permitió mejorar significativamente la interfaz de usuario y garantizar una
experiencia satisfactoria para los usuarios.

En este sentido, agradezco a los participantes de las pruebas por su tiempo y disposición
para colaborar con el proyecto.

Por el soporte económico, afectivo, moral y social, agradezco a mis padres, a mis herma-
nos, a mis mascotas y a mi familia cercana por estar conmigo en esta travesía. Comparto
con todos ustedes este logro y los que vienen.

En resumen, el proyecto se enfocó en crear una aplicación web robusta y amigable para
facilitar el acceso y la administración de las horas de extensión en la Universidad del Valle
de Guatemala. Espero que este proyecto sea de utilidad para la comunidad universitaria y
sirva como una herramienta para mejorar la gestión de las horas de extensión.

iii
 Índice

Prefacio iii

Lista de figuras vii

Lista de cuadros viii

Resumen ix

Abstract x

1. Introducción 1

2. Justificación 2

3. Objetivos 3
3.1. Objetivo general . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3.2. Objetivos específicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

4. Alcance 4
4.1. Entregables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
4.2. Límites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

5. Marco teórico 6
5.1. Aplicaciones Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
5.1.1. ¿Qué es una aplicación web? . . . . . . . . . . . . . . . . . . . . . . . . 6
5.1.2. Beneficios de una aplicación web . . . . . . . . . . . . . . . . . . . . . 6
5.1.3. Aplicaciones web más populares . . . . . . . . . . . . . . . . . . . . . 7
5.1.4. ¿Cómo funcionan las aplicaciones web? . . . . . . . . . . . . . . . . . . 7
5.1.5. Diferencias entre una aplicación web y un sitio web . . . . . . . . . . . 8
5.1.6. Diferencias entre una aplicación web y una aplicación nativa . . . . . . 8
5.2. Librerías y recursos para el desarrollo frontend . . . . . . . . . . . . . . . . . 8
5.2.1. JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
5.2.2. Typescript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
5.2.3. Babel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

iv
 5.2.4. HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
5.2.5. CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
5.2.6. Sass/SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
5.2.7. Material UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
5.2.8. React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
5.2.9. React-Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5.2.10. Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5.2.11. React-Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5.2.12. Yarn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.2.13. RESTful API . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.2.14. Axios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.2.15. Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

6. Metodología 16
6.1. Stack de tecnología . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
6.1.1. Comparación de popularidad . . . . . . . . . . . . . . . . . . . . . . . 16
6.1.2. Cuadros de pros y contras . . . . . . . . . . . . . . . . . . . . . . . . 17
6.1.3. Tecnología escogida (React, Angular, Vue) . . . . . . . . . . . . . . . . 18
6.1.4. ¿Por qué Typescript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
6.1.5. Lenguaje de programación escogido . . . . . . . . . . . . . . . . . . . . 19
6.1.6. Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.1.7. Material UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.1.8. SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.2. Arquitectura y patrones de diseño . . . . . . . . . . . . . . . . . . . . . . . . . 20
6.2.1. Pros y contras: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
6.2.2. Elección de arquitectura: . . . . . . . . . . . . . . . . . . . . . . . . . 23
6.3. Creación, instalación y configuraciones iniciales . . . . . . . . . . . . . . . . . 23
6.3.1. React and Typescript . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
6.3.2. React-Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
6.3.3. React-Router . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.3.4. Material UI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.3.5. SCSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.3.6. Github . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.3.7. Firebase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.3.8. Axios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
6.4. Funcionalidades, componentes, reductores y estilos . . . . . . . . . . . . . . . 25

7. Resultados 27
7.1. Pruebas de experiencia de usuario y usabilidad . . . . . . . . . . . . . . . . 27
7.1.1. Experiencia de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
7.1.2. Usabilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.1.3. Observaciones: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.2. Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
7.2.1. Pruebas de performance en la Home Page . . . . . . . . . . . . . . . . 28
7.2.2. Pruebas de performance en el Dashboard y la navegación entre funcio-
nalidades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
7.2.3. Observaciones: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
7.3. Aplicación de funcionalidades . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

v
 7.3.1. Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
7.3.2. Log In Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
7.3.3. Search Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
7.3.4. Current Projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
7.3.5. Create Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
7.3.6. Own Projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7.3.7. Project Participants . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
7.3.8. Project Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
7.3.9. Observaciones: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

8. Discusión 35
8.1. Experiencia de usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
8.2. Usabilidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
8.3. Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
8.4. Integración de funcionalidades . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
8.5. Seguridad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
8.6. Alcance del proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

9. Conclusiones 37

10.Recomendaciones 38

11.Bibliografía 39

12.Anexos 40
12.1. Encuestas a participantes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

13.Glosario 41

vi
 Lista de figuras

1. Estudio de popularidad de tecnologías web entre desarrolladores profesionales 17

2. Flujo y proceso de integración del Client Side Rendering . . . . . . . . . . . . 21
3. Flujo y proceso de integración del Server Side Rendering . . . . . . . . . . . . 22

4. Porcentaje de usuarios encuestados sobre la intuición de la interfaz de usuario 27

5. Porcentaje de usuarios con base en las tareas completas logradas . . . . . . . 28
6. Performance de carga de la Home Page . . . . . . . . . . . . . . . . . . . . . 29
7. Performance de carga del Dashboard y navegación entre funcionalidades . . . 29
8. Captura de la implementación de la Home Page . . . . . . . . . . . . . . . . . 30
9. Captura de la implementación de la Log In Page . . . . . . . . . . . . . . . . 31
10. Captura de la implementación del Dashboard . . . . . . . . . . . . . . . . . . 31
11. Captura de la implementación de los proyectos inscritos . . . . . . . . . . . . 32
12. Captura de la implementación de la creación de proyectos . . . . . . . . . . . 32
13. Captura de la implementación de los proyectos propios creados . . . . . . . . 33
14. Captura de la implementación de los participantes de un proyectos . . . . . . 33
15. Captura de la implementación de los detalles de un proyecto . . . . . . . . . 34

16. Encuesta de prueba de usabilidad y experencia de usuario . . . . . . . . . . . 40

vii
 Lista de cuadros

1. Pros y constras de React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

2. Pros y Contras de Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3. Pros y Contras de Vue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
4. Pros y Contras de CSR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5. Pros y Contras de SSR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

viii
 Resumen

El proyecto consistió en la creación de una aplicación web utilizando React como tec-
nología principal enfocada en el frontend. La aplicación se desarrolló con el objetivo de
administrar y facilitar la visibilidad y acceso a las horas de extensión de la Universidad del
Valle de Guatemala.

Durante el proceso de desarrollo, se realizaron pruebas de usabilidad y experiencia de

usuario mediante la aplicación de encuestas. Los resultados de estas pruebas permitieron
realizar mejoras significativas en la interfaz de usuario, lo que garantizó una experiencia de
usuario más intuitiva y satisfactoria.

En resumen, el proyecto logró su objetivo de crear una aplicación web robusta con una
interfaz de usuario amigable y útil para el manejo de las horas de extensión.

ix
 Abstract

The project consisted of creating a web application using React as the main technology
focused on the frontend. The application was developed with the aim of managing and
facilitating visibility and access to the outreach hours of Universidad del Valle de Guatemala.

During the development process, usability and user experience tests were conducted
through surveys. The results of these tests allowed for significant improvements in the user
interface, ensuring a more intuitive and satisfying user experience.

In summary, the project successfully achieved its goal of creating a robust web application
with a friendly and useful user interface for managing outreach hours.

x
 CAPÍTULO 1

Introducción

El mundo laboral es tan competitivo para la juventud actual, que la experiencia laboral
y la participación en proyectos se ha convertido en una necesidad. La práctica profesional es
fundamental para que los estudiantes puedan desarrollar sus habilidades y actitudes hacia
un determinado trabajo, puesto o carrera, demostrar todo lo que saben y aprender un poco
sobre el oficio.

Las prácticas te permiten crear vínculos y relaciones con profesionales y ampliar tu red.
El campo de trabajo es dinámico y profesional, y las relaciones que se desarrollan durante
las prácticas pueden determinar el futuro y la carrera del estudiante.

Actualmente la Universidad del Valle de Guatemala cuenta con diferentes maneras con
las cuales sus estudiantes pueden ganar experiencia comprobable dentro de sus campos de
estudio mientras siguen estudiando. Una de estas oportunidades son las horas de extensión.

De acuerdo con el artículo 33 del reglamento de graduación de la universidad, las horas

de extensión son un requisito para todos los estudiantes, sin excepción, que forman parte de
la comunidad UVG.

De igual manera, dentro del reglamento de extensión de la universidad se establecen

desde el articulo 2 hasta el articulo 9 todas las reglas, evidencias y deberes que se tienen
respecto al cumplimiento de las horas de extensión. El objetivo principal de estas es obtener
experiencia en la elaboración de proyectos fuera del ámbito universitario. Cada estudiante
deberá cumplir con un mínimo de 10 horas de trabajo de extensión por año de duración de su
carrera universitaria, debiendo entregar a las debidas autoridades evidencias que demuestren
su cumplimiento.

Actualmente la UVG no cuenta con un sistema para el control de las horas de extensión,
ya que todo este proceso se realiza de forma manual según el director de carrera. Por lo
tanto,se plantea realizar una aplicación web en donde las instituciones puedan publicar los
proyectos disponibles, los directores pueden llevar un registro de los alumnos inscritos, de
sus horas y avances y los alumnos pueden buscar y registrarse a proyectos de interés.

1
 CAPÍTULO 2

Justificación

Con base en las estadísticas e investigaciones realizadas por expertos dentro del ámbito
de marketing y analytics (Affde, 2021), se determinó que las empresas u organizaciones que
no tienen un sitio web tienden a perder un alcance del 25 %; por otro lado, los estudiantes
actualmente carecen de información sobre las horas de extensión, más que por medio de
correos o anuncios esporádicos. Los estudiantes actualmente no pueden ver de forma ac-
cesible cuantas horas han trabajado o llevar un récord sobre el trabajo realizado que sea
eficiente. Todo esto les sucede a los estudiantes de todas las facultades con requisitos de
horas de extensión, por lo tanto, se propone una solución informática, una aplicación web,
para aumentar el alcance y optimizar la inscripción, creación o monitoreo de proyectos de
voluntariado.

Además de optimizar el tiempo y procesos relacionados a las horas de extensión, también

se busca causar un impacto positivo en los estudiantes, para que puedan involucrarse de
forma más activa en las iniciativas y fomentar una cultura de ayuda social.

2
 CAPÍTULO 3

Objetivos

3.1. Objetivo general

Desarrollar el frontend de una aplicación web para la selección, control y publicación de

proyectos de horas de extensión para organizaciones, directores de carrera y estudiantes de
la Universidad del Valle de Guatemala.

3.2. Objetivos específicos

Desarrollar una solución útil, con tecnologías web, con la cual los directores de carrera
tengan la posibilidad de observar, evaluar y presentar opciones de proyectos o empresas
al estudiantado para realizar horas de extensión.

Crear un sistema que permita a los estudiantes registrarse, ingresar, observar y suscri-
birse a proyectos presentados por ciertas empresas, cargar información, multimedia o
documentación acerca del progreso en proyectos existentes y actualizar su información.

Presentar una herramienta que permita la comunicación entre empresas y estudiantes

con el fin de crear una relación profesional para un proyecto en específico.

3
 CAPÍTULO 4

Alcance

Una propuesta de desarrollo frontend de una plataforma que sea capaz de gestionar la
información de los proyectos para los estudiantes, directores y organizaciones, enfocando
a las necesidades que presentan cada uno de los tipos de usuarios de la plataforma. La
aplicación web incluye distintas funcionalidades para los usuarios, siendo estas:

– Estudiantes
• Visualizar, buscar y filtrar proyectos
• Ver los Proyectos Recomendados
• Acceder a la descripción de los proyectos de su interés
• Aplicar al proyecto en el que desea participar
• Editar su perfil
• Adjuntar documentación que valide el trabajo realizado en un proyecto
– Organizaciones
• Visualizar, buscar y filtrar proyectos creados por ellos
• Crear y editar un proyecto
• Ver los participantes dentro de un proyecto
• Editar su perfil
– Directores
• Visualizar, buscar y filtrar proyectos creados por ellos
• Crear y editar un proyecto
• Ver los participantes dentro de un proyecto
• Editar su perfil
• Revisar solicitudes de empresas para nuevos proyectos
• Aceptar o rechazar postulaciones de estudiantes

4
4.1. Entregables

1. Código Fuente: Repositorio con la implementación creada con React Typescript

2. Frontend de la web application en funcionamiento: URL de la instancia de producción

4.2. Límites

Los siguientes puntos no están dentro del scope de la aplicación

Creación de Diseños o Prototipos en Figma u otros medios

Arquitectura de la base de datos

Arquitectura de la API Rest

Implementación del backend

5
 CAPÍTULO 5

Marco teórico

5.1. Aplicaciones Web

5.1.1. ¿Qué es una aplicación web?

Una aplicación web es un programa que se ejecuta en un navegador web. Es una for-
ma en que las empresas o instituciones pueden intercambiar información y proveer servicios
de forma remota. Estas instituciones utilizan estas aplicaciones para que el usuario pueda
interactuar de forma conveniente y segura. Las funcionalidades más comunes de estas apli-
caciones son: carretas de compras, búsquedas y filtros de productos, mensajes instantáneos,
entre otros. Todas estas funcionalidades complejas se logran sin que los usuarios instalen o
configuren algún programa, sino haciendo el uso de su navegador. (Aws, 2023)

5.1.2. Beneficios de una aplicación web

Las aplicaciones web nos proveen de muchos beneficios, entre los cuales se encuentran:

– Accesibilidad: Pueden ser accedidas desde cualquier navegador y en múltiples dis-

positivos personales o de trabajo. Equipos de cualquier ubicación pueden acceder a
documentos compartidos, sistemas de manejo de contenido y otros servicios, según el
contexto que se requiera.

– Eficiencia en el desarrollo: El proceso de desarrollo es relativamente simple y con

un buen balance de precio-costo para las empresas. No existen mayores problemas
de compatibilidad ya que las aplicaciones funcionan en todos los navegadores moder-
nos, así que solo hay que validar que funcione apropiadamente para algunas versiones
antiguas, si esto se encuentra dentro del alcance de los usuarios objetivo.

6
 – Simplicidad para el usuario: Los usuarios no necesita descargar o instalar las apli-
caciones, lo que hace que sea sumamente accesible para ellos, eliminando los requeri-
mientos generales de capacidad de la máquina, además que una aplicación web se le
puede dar mantenimiento de una forma sencilla, incluso con actualizaciones de segu-
ridad, lo que significa que todos los usuarios tienen la última versión de desarrollo, lo
que disminuye considerablemente el riesgo a brechas de seguridad.

– Escalabilidad: Las empresas pueden añadir usuarios a discreción, sin necesidad de

una infraestructura adicional o costo de hardware, además que los datos generalmente
se almacenan en la nube, lo que representa un ahorro en servidores físicos que corran
las aplicaciones.

(Aws, 2023)

5.1.3. Aplicaciones web más populares

Espacios de trabajo colaborativos: Utilizada para acceder a documentos, calen-

darios compartidos, servicios de mensajería instantánea, entre otras funcionalidades.

E-Commerce: Servicios en línea que permiten buscar, filtrar y pagar por productos
de variedad, según la necesidad del cliente.

Correo electrónico: Utilizadas para acceso empresarial o personal a los correos elec-
trónicos, incluyendo regularmente herramientas de comunicación como reuniones en
línea y mensajería instantánea, además de conversaciones grupales privadas.

Bancas virtuales: Se les provee a los usuarios una plataforma para realizar transac-
ciones o movimientos bancarios en línea.

Documentación técnica: Manuales de usuario, documentación de código, uso de

librerías, notas de nuevas versiones de programas, entre otros.

(Aws, 2023)

5.1.4. ¿Cómo funcionan las aplicaciones web?

La arquitectura puede ser client-side or server-side, cada uno con características, pros y
contras, además de distintos scripts.

– Arquitectura client-side: Se enfoca en las funcionalidades de la interfaces de usua-

rio, la interacción y respuesta del frontend cuando el usuario interactúa con ciertos
elementos, cómo presionar un botón, colocar el ratón sobre un hipertexto o enviar un
formulario. La arquitectura se enfoca en cargar los scripts necesarios para renderizar
todos los elementos gráficos, texto y multimedia.

7
 – Arquitectura server-side: Se centra en el procesamiento de datos. Recibe requeri-
mientos del cliente y envía de vuelta una respuesta. Estos requerimientos usualmente
son para agregar más datos, para editar los existentes o eliminar lo que sea requerido.
En algunas ocasiones el servidor puede devolver contenido HTML completo, lo cuál se
conoce como Server Side Rendering.

(Aws, 2023)

5.1.5. Diferencias entre una aplicación web y un sitio web

Los sitios web son recursos antiguos que se utilizan para desplegar contenido estático.
Se debe instalar y correr programas con funcionalidades complejas. Por otro lado, las apli-
caciones web se crearon para crear un puente entre los programas y sitios estáticos, con
implementación de datos dinámicos y funciones interactivas al alcance de un navegador y
una URL.

5.1.6. Diferencias entre una aplicación web y una aplicación nativa

Una aplicación nativa es un programa de computadora que se ha sido creada para un

ambiente específico. Las aplicaciones nativas o para móvil, deben ser descargadas para ser
utilizadas, regularmente en tiendas en línea, pueden ser utilizadas únicamente en el dispositi-
vo para el cuál fue creado y el usuario es responsable de descargar las últimas actualizaciones.

Los desarrolladores tiene que construir diferentes versiones para cada sistema operativo
y que cumplan con los requisitos mínimos, términos y condiciones, entre otros factores para
que sean aprobados en las tiendas respectivas para los distintos dispositivos.

(Aws, 2023)

5.2. Librerías y recursos para el desarrollo frontend

5.2.1. JavaScript

Es un lenguaje de programación ligero, interpretado y con funciones de primer orden.

Aunque es conocido por su popular uso en el desarrollo web, también suele ser utilizado
en otros ambientes, aplicando principalmente Node.js, aunque existen otros servicios dispo-
nibles. Tiene un sistema de prototipos y multiparadigma, además que puede comunicarse
directamente con el DOM, el cuál es el encargado del manejo de los nodos de elementos en
un archivo HTML. Los estándares son regulados por ECMAScript. (Mozilla, 2023c)

8
5.2.2. Typescript

Es un lenguaje de programación tipado, que se compila en JavaScript, proveyendo un

mejor manejo sobre los tipos de datos, ya que JavaScript infiere los tipos de datos, Typescript
provee una solución más óptima respecto a rendimiento y posibles errores a nivel de tipos.
Actualmente tiene un auge notorio con respecto al 2012, cuando fue creado. Muchas librerias
y frameworks ofrecen documentación y soporte, e incluso otras han migrado a este lenguaje.
(Typescript, 2023)

5.2.3. Babel

”It is a JavaScript compiler” (BabelJS, 2023). También conocido como un transpilador,

Babel convierte código de ES2015 a versiones anteriores para que el código sea retro compa-
tible con versiones antiguas de navegadores. Con la llevada de un nuevo estándar y sintaxis a
JavaScript en 2015, Babel es fuertemente utilizado para el proceso de traspilación de código
de 2015 a versiones anteriores para evitar incompatibilidades. (Babel, 2023)

5.2.4. HTML5

Es un lenguaje de hiper texto de alto nivel, el cuál es utilizado para renderizar contenido
en el navegador. La versión 5 incluye nuevos elementos, además de mejoras en funcionalidades
y reducción de otras. (Mozilla, 2023b)

W3C (World Wide Web Consortium) es una comunidad internacional donde los miem-
bros se encargan de establecer los estándares para el desarrollo web. Con base a estos están-
dares, existe documentación oficial en la que se puede revisar los patrones o estructuras uti-
lizadas para mantener una buena práctica con los elementos y comportamientos de HTML5.
(W3C, 2023)

5.2.5. CSS3

Sus siglas en ingles significan ”Cascade Style Sheets”. Es un lenguaje de hojas de estilos,
utilizado para describir la presentación de un documento escrito en HTML o en XML (inclu-
yendo dialectos provenientes de XML, tales como: SVG, MatchML o XHTML. Se encarga
de describir como los elementos son renderizados en el navegador y su versión tres adjunta
nuevas funciones y características que se pueden utilizar. Entre los usos más comunes se
encuentran:

Colores

Imágenes de fondo

Tipo o familia de letra

Bordes

9
 Tamaños
Posiciones
Visibilidad
Márgenes

(Mozilla, 2023a)

5.2.6. Sass/SCSS

Es un lenguaje de hojas de estilos que se compila para devolver CSS, o en otras pala-
bras, un pre-procesador de CSS. Te permite utilizar variables, reglas anidadas, mezcladores,
funciones, entre otros. Este lenguaje permite organizar largas hojas de estilos y facilita com-
partir los estilos en el proyecto. (SASS, 2023)

5.2.7. Material UI

MUI, por sus siglas en ingles, es una libería de React que ofrece herramientas de interfaz
de usuario para llevar a cabo nuevas funcionalidades de forma más rápida y eficaz. La librería
ofrece componentes predeterminados y personalizables, con lo cuál los desarrolladores pueden
establecer una paleta de colores, temas y estilos por defecto para los distintos componentes
y así reducir la carga de CSS.

En sus nuevas versiones se incluye el soporte del lenguaje tipado Typescript, o el uso
tradicional de JavaScript. Incluye además un sistema de grillas y contenedores para el manejo
de la adaptabilidad a los diferentes dispositivos o resoluciones del navegador, lo que deja al
desarrollador concentrarse en las funciones complejas o adicionales sin preocuparse por los
componentes o estilos. (UI, 2023)

5.2.8. React

Aunque de forma popular se le conoce como un ”Framework”, en realidad es una librería

de JavaScript, creada por Facebook (Meta), utilizada para aplicaiones nativas, móviles y
web. React utiliza JSX (JavaScript XML) para la creación de elementos de HTML. Utiliza
un Virtual DOM (Document Object Model) para comunicarse con el DOM real y así hacer
comparaciones en diferencias o nuevos elementos para renderizarlos en pantalla.

Generalmente se utiliza para la creación de SPAs (Single Page Aplications), lo que per-
mite tener un único documento HTML con un elemento principal (”root”). Al inicio se
utilizaban clases de JavaScript para la creación de los componentes de React, pero actual-
mente se utilizan funciones en ES6. Algunas caracteristicas, buenas prácticas y estándares
son los siguientes:

Uso de Componentes para establecer los elementos a desplegar en pantalla

10
 Funciones puras

Jerarquía de componentes padre e hijo

Intercambio de propiedades o props

Reutilización de componentes

Manejo del estado de los componentes de forma local o global (Mediante Stores, Con-
text o Hooks.

Uso de código JavasScript en la sintáxis de JSX

Estilos de una linea o utilización de hojas de estilos, incluyendo el uso de pre-procesadores

o compiladores de CSS.

Separación de preocupaciones entre componentes

Navegación entre rutas

Adicional a los elementos mencionados, existe documentación oficial para los estándares,
funcionalidades y librerías adicionales que pueden interactuar con React.

React permite realizar aplicaciones web interactivas y dinámicas de forma más ordenada
y con código limpio, además de que es más práctico de mantener y documentar.

El manejo del estado y del ciclo de vida de React es fundamental para el buen funciona-
miento e interacción con el usuario, así que React ofrece Hooks para manejar el comporta-
miento y propiedades de los componentes, entre ellos se pueden mencionar:

useState: Nos permite el manejo de propiedades locales, o el estado local. Este Hook
consta de una función y un valor, con la función se puede establecer uno o mas nuevos
valores, de cualquier tipo.

useEffect: Maneja el comportamiento del estado en su ciclo de vida, es decir, cuando

se monta el componente, cuando se actualiza o cuando se desmonta. Recibe desde cero
hasta cualquier cantidad de parámetros y cuando alguno de estos cambia, sucede algún
evento que se haya determinado dentro del Hook.

useMemo: Se utiliza para realizar cálculos complejos una sola vez, a menos que la
cambie la propiedad en la cual se aplica, esto para disminuir complejidad y tiempo de
ejecución al hacer un nuevo renderizado.

useRef: Muy similar a las referencias en JavaScript, este Hook nos permite incluir y
manejar referencias en el código JSX.

Custom Hooks: Adicionalmente, React permite a los desarrolladores crear Hooks

personalizados para el manejo de datos o de componentes.

(Meta, 2023)

11
5.2.9. React-Router

Esta librería permite navegar en un proyecto de React, así que siendo una aplicación de
una sola página, React-Router nos permite conservar el estado global, renderizar los compo-
nentes necesarios y evitar refrescar el navegador cuando se cambia de ruta. Los componentes
que provee esta librería, y que cada uno cuenta con características y casos de uso específicos,
son:

– BrowserRouter

– HashRouter

– MemoryRouter

– NativeRouter

– Router

– StaticRouter

(Remix, 2023)

5.2.10. Redux

Es un contenedor de estado predecible para aplicaciónes de JavaScript. Funciona para

escribir aplicaciones que se comportan de forma constante, corren en distintos ambientes
(cliente, servidor o de forma nativa) y son fáciles de realizar pruebas. Provee una gran
experiencia para el desarrollador, cómo edición de código en vivo combinado con un Time
traveling debugger.

Redux funciona de forma independiente, aunque se puede combinar con React o con
alguna otra librería de visualización. Es bastante liviano, al rededor de 2kB, incluyendo
dependencias, pero incluye un amplio ecosistemas para agregar dependencias. (Abramov,
2023b)

5.2.11. React-Redux

Esta librería permite la interacción de los componentes de React con Redux, por medio
de una Store, que es la encargada del manejo global de los estados y datos que podrán
utilizar los distintos componentes del proyecto. Aunque existen distintas implementaciones,
las nuevas versiones de React-Redux permiten la interacción con el estado usando Hooks.
Estos son Hooks son useSelector y useDispatch.

La estructura convencional es:

– Tipos de eventos

12
 – Acciones

– Reductores

– Selectores (opcional)

useSelector se utiliza para obtener porciones del estado global para utilizar según sea nece-
sario. Dentro del estado global, que es un objeto, existen secciones que se pueden utilizar a
conveniencia a lo largo del proyecto, es decir, cada reductor se incluye dentro de uno reductor
padre que es el que se incluye en la Store.

Por otro lado, useDispatch es una función que se utiliza para enviar acciones de cierto tipo
e invocar los reductores respectivos, esto cuando por alguna acción del usuario se modifica
el estado global. Dentro de las acciones pueden incluirse llamadas a una API. (Abramov,
2023a)

5.2.12. Yarn

Es un manejador de paquetes que reemplaza al flujo de trabajo de los clientes existentes

de npm o de otros manejadores de paquetes, mientras se mantienen la compatibilidad con
el registro de npm. Tiene el mismo conjunto de funcionalidades, pero opera de forma más
rápida, segura y más consistente.

Las funciones principales de un manejador de paquetes son:

– Instalar paquetes

– Instalar una porción de código que cumple un propósito en específico

– Instalar dependencias o paquetes de un registro global hacia un ambiente local

Cada versión de los paquetes tiene su versión, por lo que deben ser compatibles entre sí
para poder funcionar, de existir alguna dependencia de paquetes.

En un proyecto de React, las dependencias se incluyen en en un archivo json, el cuál

utilizará el manejador de paquetes para instalar todas los paquetes necesarios para el fun-
cionamiento del proyecto. (Meta, 2016)

5.2.13. RESTful API

– API(Application Programming Interface): Es un conjunto de definiciones y pro-

tocolos para construir e integrar aplicaciones o programas. Es un contrato dentro del
proveedor de información y el cliente, usando un método de llamada y respuesta.
En otras palabras, si un programa necesita interactuar con un sistema para obtener
información o realizar una función, una Interfaz de programación es el enlace para
establecer la comunicación y poder suplir el requerimiento. Es una forma rápida y
segura para compartir información entre un servidor, un cliente y el usuario final.

13
 Otra ventaja es que los interfaces de programación son agnósticas a la implementación,
lo que permite que sea utilizada en cualquier programa que cumpla con el contrato
establecido.

– REST: Es un conjunto de delimitaciones de arquitectura dentro del desarrollo web,

no es un protocolo ni un estándar, lo que quiere decir que se puede implementar de
múltiples maneras.

– REST API: También conocida como RESTful API, es una interfaz de programación
que une la arquitectura REST con las funciones o contratos de una API.

(RedHat, 2020)

5.2.14. Axios

Es un cliente HTTP con base en promesas, para node.js y el navegador. Es isomórfi-

co (puede correr en en el navegador y en un servidor con la misma base de código). Del
lado del servidor, utiliza un módulo nativo, mientras que en el cliente (navegador) utiliza
XMLHttpRequests.

Es un intermediario que utiliza una promesa para interceptar los requerimientos y las
respuestas a un servicio o API. L información se puede envíar o recibir con un JSON (aplica-
tion/json), Multipart / FormData (multipart/form-data), URL encoded form (application/x-
www-form-urlencoded), Posting HTML forms, etc.

Funcionalidades:

– Hacer XMLHttpRequests desde el navegador

– Realizar requrimientos http desde node.js

– Soporta las interfaz de programación de promesas

– Intercepta requerimiento y respuesta

– Transforma datos de requerimiento y respuesta

– Cancela los requerimientos

– Tiempos límite de respuesta

– Serialización de parámetros de consulta con soporte para entradas anidadas

– Serialización automática del cuerpo del requerimiento

– Manejo automático del JSON con los datos de la respuesta.

– Captura del progreso para los navegadores y para el servidor con información adicional
(rango de velocidad, tiempo restante)

– Delimitar el ancho de banda para el servidor

14
 – Compatible con formularios y tipo de dato Blob

– Protección contra XSRF del lado del cliente

(Axios, 2023)

5.2.15. Firebase

Es un plataforma para el desarrollo de plataformas que brinda distintos servicios, en-

tre ellos construir, alojar y gestionar aplicaciones web. Es una plataforma desarrollada por
Google.

Servicios que ofrece:

Realt time Database managment

Configuración remota

Extensiones

control de tráfico y sondeo de salud de la aplicación

Funciones como servicio en la nube

Autenticación

Servicio de mensajería en la nube

Hosting

Almacenamiento en la nube

Herramientas de inteligencia artificial y aprendizaje de máquina.

(Google-Developers, 2023)

15
 CAPÍTULO 6

Metodología

6.1. Stack de tecnología

El trabajo se centra exclusivamente en el desarrollo Frontend de la aplicación y las

tecnologias seleccionadas son:

React

Typescript

Redux

Material UI

SCSS

6.1.1. Comparación de popularidad

Según State of JS (2022) las tres tecnologías que encabezan la lista de mayor popularidad
son: React, Angular y Vue. Además un estudio realizado por StackOverflow (2022) se muestra
en la Figura 1, nos provee de un porcentaje de las tecnologias web en frontend y backend.

16
 Figura 1: Estudio de popularidad de tecnologías web entre desarrolladores profesionales

6.1.2. Cuadros de pros y contras

React:

Pros Cons
Fuerte soporte de la comunidad Una considerable cantidad de código boi-
lerplate
Vasto ecosistema de librerías y herra- Actualizaciones frecuentes que podrían
mientas requerir
Excelente performance

Cuadro 1: Pros y constras de React

Alexandra Mendes, 2023

17
Angular:

Pros Cons
Excelente performance Curva amplia de aprendizaje
Escalable Código base pesado
Funcionalidades de seguridad robustas Poca flexibilidad

Cuadro 2: Pros y Contras de Angular

Alexandra Mendes, 2023

Vue:

Pros Cons
Integración sencilla con aplicaciones exis- Escalabilidad limitada
tentes
Sintaxis simple Falta de documentación oficial
Un ecosistema en crecimiento con libre- Una comunidad pequeña
rías y herramientas

Cuadro 3: Pros y Contras de Vue

Alexandra Mendes, 2023

6.1.3. Tecnología escogida (React, Angular, Vue)

Con base en las estadísticas de popularidad mostradas en la Figura 1 y la comparación

de beneficios y contras en los Cuadros 1 - 3, la tecnología escogida es React, por su riqueza
en documentación, despeño, librerías de terceros y herramientas. Además que React es una
librería y no un framework, lo que facilita la creación de proyectos y permite un ambiente de
desarrollo ligero y práctico, en comparación a Angular; React ofrece flexibilidad y soporte
de la comunidad, de lo cuál Vue aún carece en compración a React.

6.1.4. ¿Por qué Typescript?

La nueva generación de las versiones de React han incorporado soporte y compatibilidad

con Typescript y con esto toda la riqueza que el lenguaje tiene para ofrecer. A continuación se
presentan los casos de uso, pros y contras de utilizar Typescript en un proyecto o aplicación:

18
Casos de uso

Proyectos grandes: Cuando el proyecto incluye múltiples archivos con abundantes

lineas de código, es muy fácil que puedan filtrarse bugs difíciles de identificar, por lo
cual Typescript es excelente para detectar ese tipo de errores, en su mayoría relacionado
a tipos de datos. Junto a pruebas automatizadas, Typescript garantiza estabilidad para
este tipo de proyectos.
Datos complejos: Proyectos con tipos de datos complejos, por ejemplo con llamadas
a una base de datos con un numero alto de columnas o a una API con variedad de
campos, Typescript facilita el rastreo y manejo apropiado de los datos recibidos y los
que se espera recibir, evitando así comportamientos inesperados o errores de tipos.
Accesibilidad: Typescript identifica errores comunes de accesibilidad, como omitir
un texto alt en una imagen.
Reducción de errores: Proyectos con datos sensibles de usuarios deben considerar
todos los casos posibles de errores y evitarlos, Typescript permite que estos casos sean
tomados en consideración y sean marcados de forma explicita, antes de detectarlos en
tiempo de ejecución.

Casos no recomendados

Proyecto pequeños: Para un pequeño proyecto y simple, incluir Typescript puede

demorar mucho mas tiempo por motivos de configuración y depuración, lo que lo hace
mas costoso respecto a tiempo.
Complejidad: Los navegadores con pueden correr Typescript directamente, así que
se necesitan bundlers como webpack para compilar los assets. Así que si es un proyecto
simple, utilizar Typescript agrega complejidad innecesaria y de poca ayuda.
Colaboración: Si bien un desarrollador experimentado en JavaScript no le tomaría
mucho tiempo adecuarse a Typescript, para otros desarrolladores menos experimenta-
dos agrega una curva de aprendizaje y adaptación mucho mas alta, lo que crea una
colaboración menos factible para desarrolladores de distingos niveles.
Datos variables: Mientras que en JavaScript el tipo de dato es mutable, cuando
nos encontramos con variables que mutan su tipo de datos, Typescript y el manejo de
estos tipos de datos se vuelve muy complejo.

StackOverFlow, 2022

6.1.5. Lenguaje de programación escogido

Con base en los beneficios y casos de uso, se ha escogido a Typescript como lenguaje de
programación, ya que la aplicación es medianamente grande, con datos de usuarios sensibles
y variedad de tipos de datos que deben ser tratados apropiadamente para evitar la mayor
cantidad de errores. React, librerías de terceros, herramientas y documentación han migrado
a Typescript, lo cual facilita el desarrollo.

19
6.1.6. Redux

Aunque existen ciertas Stores para el manejo del estado en React, Redux, además de
ser creado por Dan Abramov, quien trabaja en Meta, ofrece una mayor documentación y
soporte que otras librerías como MobX, React Context, RxJS, entre otros. Mientras que React
Context API es esta diseñado como un mecanismo de inyección de dependencia que permite
que los datos estén disponibles en el árbol de componentes sin ser introducidos manualmente,
Redux es un manejador del estado completo, capaz de permitir a una aplicación hacer y
revertir acciones y proveer herramientas avanzadas de depuración para los desarrolladores
Fernandez, 2023. Por lo tanto se ha elegido a Redux como manejador del estado en la
aplicación.

6.1.7. Material UI

Aunque existen librerias de estilos o componentes para Bootstrap y Tailwind, las cuales se
caracterizan por su consistente experiencia de usuario, documentación solida y alta velocidad
de desarrollo, Material UI provee una libertad artística mientras se crean aplicaciones únicas,
estilizadas y con aspecto moderno, en otras palabras ofrece mayor flexibilidad y libertad a
los desarrolladores. Por lo tanto, se ha elegido a Material UI como librería de componentes
y estilos por la alta gama de opciones que ofrece, además que es de uso exclusivo de React.

6.1.8. SCSS

Aunque SCSS y Less son ambos preprocesadores de CSS, sus mayores diferencias radican
en la sintaxis, "queda a la discreción del desarrollador cual procesador utilizar"(Sharma,
2021). Less ofrece es un procesador muy robusto que ofrece funcionalidades para cálculos
complejos y mixins, SCSS ofrece opciones similares, con otra lógica de implementación y
ya que para el proyecto SCSS es requerido para cambios pequeños, ya que Material UI se
encarga de los themes de los componentes, se ha elegido a SCSS como preprocesador de
CSS.

6.2. Arquitectura y patrones de diseño

Existen múltiples arquitecturas de desarrollo web, entre las cuales se encuentran:

– Single Page Application (SPA) with Client-Side-Rendering (CSR)

– Resource Oriented Client Architecture (ROCA) with Server-Rendering (SR)

– JAM Stack with Static Serving via Static Asset Generation

– Client-Side-Rendering with Pre-Rendering

– Universal Rendering or Server-Side Rendering with (Re-)Hydration

20
 Roos, 2022

De las anteriormente mencionadas, las arquitecturas aplicables con React son SPA y SSR
con Re-Hydration.

6.2.1. Pros y contras:

Client Side Rendering (CSR)

Esta arquitectura se basa en generar el renderizado en el navegador con código JavaScript

que a su vez genera el HTMl y el CSS.

Todas los requerimientos a las API’s se mandan y obtienen desde el cliente (navegador)
para luego generar código estático que sera interpretado por el navegador. A continuación
en la figura 2 se presenta el proceso de integración y flujo del CSR, además de las tablas de
comparación de pros y contras:

Figura 2: Flujo y proceso de integración del Client Side Rendering

Roos, 2022

21
 Pros Cons
Tiempo corto de respuesta al primer bit Posible lapso alto entre la renderizado y
después del requerimiento del navegador la interactividad
al servidor
Buena experiencia de usuario para apli- No recomendado para el buen manejo de
caciones altamente interactivas SEO y previsualización de medios socia-
les
Pruebas autónomas para el Frontend Complejidad y tecnología heterogénea
Separación de preocupaciones entre el Recursos computacionales en el cliente
cliente y el servidor
HTTP APIs disponibles del lado del
cliente

Cuadro 4: Pros y Contras de CSR

Alexandra Mendes, 2023

Server-Side Rendering with (Re-)Hydration

El servidor es el encargado de retornar una pagina pre-renderizada al cliente (navegador),

utilizando el protocolo HTTP(S), así que la carga de recursos estará a cargo del servidor o
backend.

Figura 3: Flujo y proceso de integración del Server Side Rendering

22
 Pros Cons
Rendimiento mejorado y renderizado mas Complejidad incrementada en el código
rápido de paginas en el frontend base debido a la necesidad de manejar
el renderizado del lado del servidor y del
cliente
Mejor SEO y un mejor indexado de bús- Carga incrementada del servidor y poten-
queda de contenido dinámico ciales problemas de rendimiento por lle-
var a cabo del renderizado en el servidor
Habilidad para pre-renderizar paginas y Capacidad limitada de cache en el nave-
mejorar le experiencia de los usuarios con gador, ya que el HTML es generado en el
conexiones de internet lentas servidor y no en el cliente
Seguridad mejorada y protección contra Potenciales retos con el SEO, por motivos
ataques de cross-site scripting de indexado o con los motores de búsque-
da.
Soporte para conexiones de red lentas Habilidad limitada para realizar ciertas
acciones o accesos a información en el
cliente hasta que el primer proceso de hi-
dratación haya sido completado.

Cuadro 5: Pros y Contras de SSR

Alexandra Mendes, 2023

6.2.2. Elección de arquitectura:

Aunque el SSR ofrece funcionalidades para mejorar el rendimiento, los motores de bús-
queda y la carga del frontend, la arquitectura seleccionada es Client-Side Rendering. El
principal motivo de esta elección es la intervención del servidor, ya que el alcance del pro-
yecto se limita a Frontend únicamente, otra razón es la complejidad que agrega SSR y las
funciones que ofrece no se encuentran dentro del scope del proyecto.

6.3. Creación, instalación y configuraciones iniciales

6.3.1. React and Typescript

Con el manejador de paquetes Yarn, se creo la aplicación de React Typescript, con el

comando yarn add create-react-app app-name –template typescript.

6.3.2. React-Redux

– Se agregó la librería utilizando el comando yarn add react-redux.

– Se creo el archivo store.ts, en el cual se agregaron las dependencias para Redux dev
tools, la configuracion de la store y el persistor, con su respectiva whitelist.

23
 – En el render principal se agregaron los componentes Provider y PersistGate como
ancestros del componente principal App.

6.3.3. React-Router

– Se instalo la libreria con el comando yarn add react-router-dom

– Dentro del archivo index.tsx, se agregó el componente BrowserRouter como padre del
componente principal App.

– En el componenteApp se agregaron las rutas utilizadas en la aplicación.

6.3.4. Material UI

– Utilizando el comando yarn add @mui/material @emotion/react @emotion/styled,

se realizó la instalación de la librería.

– Para la configuración de la temática principal de los componentes se creo el archivo

themes.ts. Se agregaron la paleta de colores, temática de botones, inputs, familia de
letras, entre otros componentes base.

6.3.5. SCSS

Se utilizó el comando yarn add sass para utilizar archivos .scss en los componentes
requeridos.

6.3.6. Github

Se creó un repositorio en github para el manejo de versiones, utilizando branches para

las distintas funcionalidades de la aplicación.

6.3.7. Firebase

– Se creó una nueva aplicacion en Firebase para el hosting del frontend del proyecto.

– Se agregaron las dependencias necesarias para llevar a cabo un deployment en Firebase,

utilizando yarn add firebase. Posteriormente para cada versión se utilizó Firebase
deploy.

6.3.8. Axios

Se instalaron las dependencias necesarias para Axios con yarn add axios. Posterior-
mente, se crearon constantes globales para el Host’s URL.

24
6.4. Funcionalidades, componentes, reductores y estilos

Luego de las configuraciones iniciales, el flujo de implementación de funcionalidades es

cíclico con un patrón definido.

Para un nuevo componente se crearon los archivos .tsx con un nombre descriptivo

Se utilizaron los componentes base provenientes de Material UI

Para el manejo del estado local se utilizaron Hooks

En el caso de componentes que despliegan datos dinámicos provenientes de una API,

se crearon funciones que hacen uso de los Hooks de React-Redux (useSelector)

Para el manejo del estado en Redux se siguió el patrón Tipos, acciones, reductores.

En el caso de una acción para enviar datos al servidor, se siguió el mismo patrón, pero
esta vez se uso el Hook useDispatch.

Para los estilos se aplicó el estándar BEM como convención para el nombre de las
clases y el patrón mobile-first. Por otros lados se evitó usar estilos inline o dentro de
los componentes, así que se crearon archivos .scss para cada componente.

Luego de completar una funcionalidad, se crearon pruebas unitarias simples para los
componentes.

Se crearon ramas para las distintas funcionalidades para posteriormente hacer push al
repositorio.

Por último se realizó un deployment y se realizaron pruebas en el ambiente de produc-

ción.

Los pasos mencionados anteriormente se repitieron en todas las implementaciones y

funcionalidades requeridas. Se implementaron las funcionalidades requeridas para el MVP,
las cuáles son:

Landing Page

Manejo de multimedia

Inicio de sesión

Dashboard exclusivo para usuarios registrados y que han iniciado sesión

Búsqueda y filtrado de proyectos para todos los usuarios

Recomendación de proyectos para el usuario estudiante.

Ver detalles y aplicar a un proyecto para el usuario estudiante

Ver proyectos en los que se ha aplicado o se encuentran activos para el usuario estu-
diante

25
Modificar el perfil para todos los usuarios

Cambio de contraseña para todos los usuarios

Evidencias de multimedia del trabajo realizado para el usuario estudiante

Agregar y modificar el Resumé para el usuario estudiante

Crear, editar y configurar proyectos propios para usuarios director y organización

Aceptar o declinar proyectos para el usuario director

Aceptar o rechazar la aplicación de estudiantes, para el usuario director

26
 CAPÍTULO 7

Resultados

7.1. Pruebas de experiencia de usuario y usabilidad

Se realizaron pruebas para comprobar que la interfaz de usuario es intuitiva, fácil de

manejar y que los usuarios puedan realizar distintas tareas de los distintos tipos de usuarios
de la aplicación (Estudiante, Director, Organización). Se distribuyeron encuestas a doce
voluntarios y se determino cuantos participantes lograron completar las asignaciones.

7.1.1. Experiencia de usuario

Figura 4: Porcentaje de usuarios encuestados sobre la intuición de la interfaz de usuario

27
7.1.2. Usabilidad

Figura 5: Porcentaje de usuarios con base en las tareas completas logradas

7.1.3. Observaciones:

– Se entrevistaron a doce participantes de distintas carreras de la universidad

– Se utilizó un formulario de Google Forms para las encuestas

– Los números de las figuras representan el porcentaje de los encuestados

7.2. Performance

Se utilizó un Profiler de React dev tools para determinar el tiempo de renderizado para
los paginas criticas de la aplicación (Home Page, Login, Dashboard and navigation)

7.2.1. Pruebas de performance en la Home Page

Se obtuvo un tiempo de renderizado de 38ms.

28
 Figura 6: Performance de carga de la Home Page

7.2.2. Pruebas de performance en el Dashboard y la navegación entre

funcionalidades

Tiempo de renderizado: 26.2ms, desde el inicio de sesión hasta la carga del dashboard y
navegación entre funcionalidades.

Figura 7: Performance de carga del Dashboard y navegación entre funcionalidades

29
7.2.3. Observaciones:

– El Profiler evalua el tiempo de renderizado de los componentes

– El Backend y tiempos de respuesta del servidor esta fuera del alcance

– Las figuras muestran un desglose de los componentes renderizados y el tiempo de

respuesta individual

7.3. Aplicación de funcionalidades

Se incluyeron capturas de las funcionalidades criticas implementadas.

7.3.1. Home Page

Figura 8: Captura de la implementación de la Home Page

30
7.3.2. Log In Page

Figura 9: Captura de la implementación de la Log In Page

7.3.3. Search Functionality

Figura 10: Captura de la implementación del Dashboard

31
7.3.4. Current Projects

Figura 11: Captura de la implementación de los proyectos inscritos

7.3.5. Create Project

Figura 12: Captura de la implementación de la creación de proyectos

32
7.3.6. Own Projects

Figura 13: Captura de la implementación de los proyectos propios creados

7.3.7. Project Participants

Figura 14: Captura de la implementación de los participantes de un proyectos

33
7.3.8. Project Details

Figura 15: Captura de la implementación de los detalles de un proyecto

7.3.9. Observaciones:

– No se incluyeron capturas de todas las funcionalidades, sino de las más críticas

– Los datos mostrados provienen de la respuesta del servidor y no son responsabilidad

del Frontend

– Se implementaron todas las funcionalidades para un MVP aceptable

34
 CAPÍTULO 8

Discusión

8.1. Experiencia de usuario

Con base a los resultados obtenidos en las encuestas realizadas y como se muestra en
la figura 3, la percepción de los usuarios es que la interfaz de usuarios es intuitiva y fácil
de manejar. La implementación se base en los diseños provistos, así que temas de paleta de
colores, colores, tipos de letra, espaciado, entre otros, esta fuera del alcance del proyecto,
dejando que el frontend fuera fiel a los diseños y mantuviera la consistencia a través de
la aplicación. Ya que el mayor porcentaje de los usuarios encontrar la interfaz intuitiva, la
aplicación cumple con lo determinado dentro del alcance.

8.2. Usabilidad

Los usuarios fueron capaces de realizar tareas de forma parcial o completa, dejando
a un porcentaje pequeños son lograr completar las tareas, como se muestra en la figura
4, así que la aplicación funciona y es utilizable para realizar las distintas funcionalidades
establecidas previamente. 2 % de los usuarios no lograron completar sus tareas, lo que nos
deja con un punto atípico dentro del porcentaje de los que si lograron completarlas de forma
parcial o completa. Ya que la prueba fue realizada con un limite de tiempo, esto causó
que un cierto porcentaje de usuarios no lograra completar todas las tareas asignadas. Para
disminuir esos porcentajes se necesita un manual de usuario con las especificaciones básicas,
para disminuir el porcentaje de los usuarios que no lograron realizar las tareas y disminuir la
curva de aprendizaje y familiarización con la aplicación. El mayor porcentaje de los usuarios
encontraron la aplicación útil y funcional.

35
8.3. Performance

Con los datos obtenidos en las figuras 4 y 5, se observa que los tiempos de renderizado son
bajos y mantienen un tiempo aceptable para no afectar la experiencia del usuario. Posibles
retrasos con las imágenes o los datos no son responsabilidad del frontend, ya que los tiempos
de respuesta del servidor no están dentro del alcance del proyecto y las pruebas.

8.4. Integración de funcionalidades

Todas las funcionalidades minimas necesarias han sido implementadas, como se mues-
tra en las figuras 7 - 11. La aplicación Web es funcional y bug free. Aunque interfaz tiene
como base los diseños, se ha tomado libertad creativa para modificar elementos a discre-
ción, sin embargo se han mantenido las reglas de negocios respecto a las funcionalidades
e integraciones necesarias. Los usuarios estudiante, director y organización, respectivamen-
te, son capaces de realizar el proceso de aplicación, revisión, creación, búsqueda, filtrado,
recomendación y visualización de proyectos de horas de extensión.

8.5. Seguridad

Se tomaron las precauciones básicas de seguridad para el Cross Site Scripting (XSS),
manejo correcto del localstorage, rutas protegidas, uso de tokens para realizar los requeri-
mientos, restricciones de los tipos de documentos que se pueden subir al servidor, desinfección
de los inputs del usuario en los formularios, entre otros. La seguridad de la aplicación no
se encuentra dentro del alcance del proyecto, sin embargo se realizaron estas medidas
adicionales para mantener la solidez de la aplicación.

8.6. Alcance del proyecto

Los resultados obtenidos se realizaron en un ambiente controlado y de producción, no

representan resultados de la aplicación en funcionamiento live. Este tipo de pruebas no se in-
cluyen dentro de alcance del proyecto. Además, pruebas como escalabilidad, tensión, ataques
de sobrecarga, entre otros, no son responsabilidad del frontend. Los datos de producción,
incluidos usuarios, contraseñas, proyectos, aplicaciones, etc. Serán eliminados en el ambiente
de producción. El deployment no esta en el alcance, sin embargo se ha aplicado para faci-
litar las pruebas con usuarios, por lo tanto temas de integración y deployment continuo y
pipelines no son tomados en consideración como evaluacion de los objetivos planteados.

36
 CAPÍTULO 9

Conclusiones

– Se desarrolló el frontend de una aplicación web para la selección, control y publica-

ción de proyectos de horas de extensión para organizaciones, directores de carrera y
estudiantes de la Universidad del Valle de Guatemala.

– Se desarrolló una solución útil, con tecnologías web, con la cual los directores de carrera
tengan la posibilidad de observar, evaluar y presentar opciones de proyectos o empresas
al estudiantado para realizar horas de extensión.

– Se creó un sistema que permita a los estudiantes registrarse, ingresar, observar y sus-
cribirse a proyectos presentados por ciertas empresas, cargar información, multimedia
o documentación acerca del progreso en proyectos existentes.

– Se presentó una herramienta que permita la comunicación entre empresas y estudiantes

con el fin de crear una relación profesional para un proyecto en específico.

37
 CAPÍTULO 10

Recomendaciones

– Se recomienda a los desarrolladores que desean ampliar las funcionalidades que con-
serven el patrón establecido, las buenas prácticas, un código limpio y que documenten
apropiadamente.

– Se recomienda mantener las dependencias actualizadas y verificar que continúen con

mantenimiento, de lo contrario considerar otras opciones.

– Se recomienda que se refuercen las medidas de seguridad de la aplicación para asegurar

la integridad de los datos de los usuarios.

– Se recomienda realizar manuales de usuario, vídeos o capacitaciones para el uso co-

rrecto de la aplicación para los distintos tipos de usuarios.

– El proceso de verificación de la legitimidad de los usuarios debe ser optimizado

– A la Universidad del Valle se le recomienda descartar la creación y acceso manual a la

aplicación, en su lugar incluir el SSO que utilizan en todas las plataformas existentes.

– Se recomienda determinar los acuerdos, políticas y condiciones legales pertinentes para

el manejo de información de los usuarios.

– En futuras mejoras se puede incluir el uso del SSR para mejorar el SEO e implementar
búsquedas dinámicas.

– No se recomienda incluir librerías de tercero no verificadas o poco seguras

– Se recomienda no realizar funcionalidades, componentes, scripts, estilos o cálculos com-

pletos from scratch, ya que causa que el desarrollo sea lento y si no es aplicado apro-
piadamente puede generar bugs innecesarios.

38
 CAPÍTULO 11

Bibliografía

Abramov, D. (2023a). Página principal de React Redux. https://react-redux.js.org/

Abramov, D. (2023b). Página principal de Redux. https : / / redux . js . org / introduction /
getting-started
Affde. (2021). Estadísticas de diseño de sitios web o aplicaciones web. https://www.affde.
com/es/website-design-statistics.html
Alexandra Mendes, O. R. (2023). Top 10 best frontend frameworks in 2023. https://www.
imaginarycloud.com/blog/best-frontend-frameworks/#top
Aws. (2023). What is a web application. https: // www. aws .amazon. com/ what- is /web-
application/
Axios. (2023). Intro to axios. https://axios-http.com/docs/intro
Fernandez, A. (2023). Context API vs Redux. https : / / www . scalablepath . com / react /
context-api-vs-redux
Google-Developers. (2023). Products Build. https://firebase.google.com/products-build
Meta. (2016). Yarn a new package manager for JavaScrip. https://engineering.fb.com/2016/
10/11/web/yarn-a-new-package-manager-for-javascript/
Meta. (2023). Página principal de React. https://react.dev/
Mozilla. (2023a). CSS. https://developer.mozilla.org/en-US/docs/Web/CSS
Mozilla. (2023b). HTML5. https://developer.mozilla.org/en-US/docs/Glossary/HTML5
Mozilla. (2023c). JavaScript. https://developer.mozilla.org/en-US/docs/WEb/JavaScript
RedHat. (2020). What is a rest API. https://www.redhat.com/en/topics/api/what-is-a-
rest-api
Remix. (2023). Página principal de React Router. https://reactrouter.com/en/main/start/
overview
Roos, P. (2022). SASS vs LESS: What to Choose? https : / / www . workingsoftware . dev /
frontend-rendering-techniques/
SASS. (2023). Página principal de la SASS. https://sass-lang.com/documentation/
StackOverFlow. (2022). Most popular technologies platform. https://survey.stackoverflow.
co/2022/#most-popular-technologies-platform
UI, M. (2023). Página principal de Material UI. https://mui.com/
W3C. (2023). Página principal de la W3C. https://www.w3.org/Consortium/

39
 CAPÍTULO 12

Anexos

12.1. Encuestas a participantes

Figura 16: Encuesta de prueba de usabilidad y experencia de usuario

40
 CAPÍTULO 13

Glosario

Bug problema inesperado con el software o el hardware.. 41

Bundlers herramienta que permite a los desarrolladores empaquetar su código en un solo

archivo o paquete.. 41

DOM interfaz de programación de aplicaciones (API) para documentos HTML y XML..

41

Frontend parte del software que interactúa con los usuarios.. 41

Hook categoría de funciones que permiten que el código base llame al código de extensión.
41

Renderizado proceso en el ordenador representa algo en la pantalla.. 41

Scope tambien conocido como alcance, es el área del programa donde se reconoce un ele-
mento que tiene un nombre identificador.. 41

SEO Optimización de motores de búsqueda: el proceso de mejorar su sitio para los motores
de búsqueda.. 41

SSR framework para construir aplicaciones del lado del cliente.. 41

Frontend SEO SSR Scope Renderizado DOM Hook Bug Bundlers

41