Repository logo
Repository logo
 

Desarrollo modular web con atomic design para autenticación de usuarios y generación de reportes en Next.js

Simple item page
dc.contributor.advisorÁlvarez,Pedro
dc.contributor.authorRuano Quintero,Miguel Alejandro
dc.coverage.spatialPopayán
dc.date.accessioned2025-10-21T22:24:55Z
dc.date.available2025-10-21T22:24:55Z
dc.date.issued2024
dc.description.notesEl presente documento describe el proyecto de trabajo de grado titulado "Desarrollo Modular Web con Atomic Design para Autenticación de Usuarios y Generación de Reportes en Next.js". El objetivo principal es crear una aplicación web enfocada en el sector agropecuario, utilizando la metodología Atomic Design. Este proyecto, que forma parte del centro de desarrollo tecnológico Creatic, se enfoca en dos funcionalidades clave: 1. Autenticación de usuarios: Facilitar el acceso a usuarios previamente registrados y ofrecer la opción de registro para nuevos usuarios. 2. Visualización de reportes: Permitir a los usuarios ver información de reportes contables específicos del sector agropecuario.
dc.description.tableofcontentsINTRODUCCIÓN.................................................................................................. 1 ANTECEDENTES ................................................................................................ 2 I. PLANTEAMIENTO DEL PROBLEMA ........................................................ 2 II. OBJETIVOS ............................................................................................. 5 Objetivo General: ....................................................................................... 5 Objetivos Específicos................................................................................. 5 III. JUSTIFICACIÓN ......................................................................................... 6 IV. METODOLOGÍA ATOMIC DESIGN............................................................ 7 Jerarquía de Componentes en Atomic Design......................................... 7 Átomos....................................................................................................... 7 Moléculas................................................................................................... 7 Organismos................................................................................................ 7 Plantillas..................................................................................................... 7 Páginas...................................................................................................... 8 V. ALCANCE................................................................................................... 9 VI. Metodología del desarrollo. .................................................................... 11 Capítulo 1- Marco de Referencia ..................................................................... 13 1. Marco Teórico ........................................................................................ 13 1.1. Principios de Atomic Design................................................................... 14 1.2. Pattern Lab y Ejemplo de aplicación Atomic Design. ............................. 15 1.3. Trabajos relacionados con Atomic Design ............................................. 17 1.4. Herramientas para el desarrollo de la aplicación web............................ 18 1.5. Evaluación y aplicabilidad ...................................................................... 19 1.5.1. Evaluación de la reutilización de componentes............................ 20 1.5.2. Consistencia y escalabilidad en el diseño atómico....................... 20 1.5.3. Mantenibilidad y modularidad del código...................................... 20 Capítulo 2. Definición de Componentes Basados en la Metodología Atomic Design. 21 2. Análisis de Requerimientos Funcionales.............................................. 21 2.1. Identificación de requerimientos por el centro de desarrollo tecnológico Creatic 21 2.1.1. Diagramas de flujo y de secuencia............................................... 25 2.2. Identificación y Clasificación de Componentes. ..................................... 29 2.2.1. Átomos para el módulo de Autenticación. .................................... 30 2.2.2. Átomos para el módulo de Reportes. ........................................... 32 2.2.3. Moléculas para el módulo de Autenticación ................................. 33 2.2.4. Moléculas para el módulo de Reportes ........................................ 34 2.2.5. Organismos para el módulo de Autenticación .............................. 34 2.2.6. Organismos para el módulo de Reportes ..................................... 38 2.2.7. Exclusión en la construcción de Témplate ................................... 42 2.2.8. Paginas (Pages)........................................................................... 43 Capítulo 3. Desarrollo del Proyecto Aplicando Atomic Design para los Módulos Autenticación y Generación y Visualización de Reportes ....................... 44 3. Arquitectura del Proyecto....................................................................... 44 3.1. Estructura y desarrollo de átomos.......................................................... 45 3.2. Estructuras y desarrollo de moléculas.................................................... 55 3.3. Estructura y desarrollo de organismos ................................................... 58 Capítulo 4. Evaluación De Metodología Atomic Design................................ 70 4. Pruebas y Evaluación de la Aplicación Web......................................... 70 4.1. Evaluación de la Aplicabilidad de Atomic Design ................................... 70 4.1.1. Módulo de Autenticación .............................................................. 70 4.1.2. Módulo de Generación y Visualización de Reportes .................... 72 4.2. Modularidad y Mantenibilidad................................................................. 73 4.3. Implementación de Pruebas con React Testing Library y Jest............... 73 4.4. Pruebas de seguridad en el uso de Tokens. .......................................... 77 4.5. Implementación de Rutas Protegidas..................................................... 79 4.6. Pruebas de Autenticación ...................................................................... 80 4.7. Uso de Claves Secretas y Algoritmos de Firma: .................................... 81 Recomendaciones............................................................................................ 82 Conclusiones.................................................................................................... 83 Bibliografía........................................................................................................ 84
dc.identifier.instnameInstitución Universitaria Colegio Mayor Del Cauca
dc.identifier.reponamehttp://creativecommons.org/licenses/by-nc-nd/4.0/
dc.identifier.urihttps://repositorio.unimayor.edu.co/handle/20.500.14203/964
dc.language.isospa
dc.publisherInstitución Universitaria Colegio Mayor del Cauca
dc.publisher.facultyFACULTAD DE INGENIERÍA
dc.publisher.programIngeniería Informática
dc.rightsrestricted access
dc.subjectDesarrollo web modular
dc.subjectAtomic Design
dc.subjectAutenticación de usuarios
dc.subjectReportes contables agropecuarios
dc.titleDesarrollo modular web con atomic design para autenticación de usuarios y generación de reportes en Next.js
dc.typeinfo:eu-repo/semantics/bachelorThesis
dc.typeinfo:eu-repo/semantics/publishedVersion
dcterms.licensehttp://creativecommons.org/licenses/by-nc-nd/4.0/

Files

Original bundle

Now showing 1 - 1 of 1
Thumbnail Image
Name:
Ruano2024-Doc.pdf
Size:
1.33 MB
Format:
Adobe Portable Document Format
Download

Collections

Trabajos de grado del programa Ingeniería Informática

Institución Universitaria Colegio Mayor de Cauca

Somos Institución de Educación Superior Pública sijeta a inspección y vigilancia por Mineducación

Código SNIES 3104

Carrera 5 # 5-40 Claustro de la Encarnación | Carrera 7 # 2-41 Edificio Bicentenario Código postal 190003

Calle 3 # 6-52 Casa Obando | Carrera 6 # 46N-44 Sede Norte Código postal 190002

Carrera 7 # 3-60 Sede Administrativa Cuarto Piso Código postal 190003

Teléfono: PBX: (602)8274178 Línea Nacional Gratuita 018000931018 Ext 1

Línea Anticorrupción_ 018000931018 Ext 2

Correo de notificaciones judiciales: notificacionjudicial@unimayor.edu.co

NIT 891.500.759-1

Política de Tratamiento y Proteccion de Datos Personales

Estatuto de Propiedad intelectual

Canales para atención al público    Mapa del sitio

Siguenos en nuestras Redes Sociales:

Tecnología DSpace implementada por