PROGRAMA INGENIERIA DE SISTEMAS

P á g i n a 1 | 82
TIENDA ONLINE VIRTUAL PC

DOCENTE:

FREDY JACANAMEJOY

INTEGRANTES:

ANDRÉS BURBANO

HAROLD ANDRADE

VANYA PORTILLA

INSTITUTO TEGNOLOGICO DEL PUTUMAYO “ITP”

PROYECTO DE SOFTWARE I

SEMESTRE 4

MOCOA – PUTUMAYO

2025
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 2 | 82
Tabla de contenido

1. Introducción
2. Problema - Caso práctico
3. ¿Cuáles son las funcionalidades clave que deben incluirse?
4. Requerimientos
5. SCRUM
5.1 Definición del equipo SCRUM
5.2 Product Backlog – Tienda en Línea
5.3 Sprint 1
5.4 Sprint 2
5.5 Sprint 3 – Finalización y evaluación del proyecto
6. Ejemplo de caso de uso
7. Artefactos del diseño de la arquitectura de la aplicación
7.1 Objetivos del sistema
7.2 Componentes
7.3 Módulos
7.4 Comunicación entre componentes
7.5 Requerimientos técnicos
8. Diagramas e ilustraciones
8.1 Diagrama de caso de uso
8.2 Modelo dominio
8.3 Diagrama de clase
8.4 Diagramas de secuencia
9. Desarrollo de un CRUD para la gestión de pedidos
10. Organización con MVC
11. Modelo relacional de la base de datos
12. Pruebas en Postman
13. Modelo de dominio
14. Autenticación de usuarios
15. Controladores
16. ¿Qué es el frontend?
17. Implementación del frontend
18. ¿Qué son las microinteracciones?
19. ¿Qué son las macrointeracciones?
20. Conclusión
21. Bibliografía
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 3 | 82
Tabla de ilustraciones

1. Ilustración 1. Diagrama de caso de uso

2. Ilustración 2. Modelo dominio
3. Ilustración 2. Diagrama de clase
4. Ilustración 3. Diagrama de clase
5. Ilustración 4. Diagrama de clase
6. Ilustración 4. Diagrama de secuencia: Inicio de sesión
7. Ilustración 5. Diagrama de secuencia: Proceso de compra
8. Ilustración 6. Diagrama de secuencia: Solicitud de servicio técnico
9. Ilustración 7. Diagrama de secuencia: Administrador edita un producto
10. Ilustración 1. Route del módulo usuarios y sus métodos CRUD
11. Ilustración 2. Organización MVC del proyecto
12. Ilustración 3. Base de datos actual
13. Ilustración 4. Método POST del módulo pedidos
14. Ilustración 5. Método PUT del módulo pedidos
15. Ilustración 6. Método GET del módulo pedidos
16. Ilustración 7. Método DELETE del módulo pedidos
17. Ilustración 8. La clase de la entidad usuario
18. Ilustración 9. Métodos de la entidad usuario
19. Ilustración 10. Métodos de la entidad usuario
20. Ilustración 11. Métodos de la entidad usuario
21. Ilustración 12. Base de datos del proyecto terminada
22. Ilustración 13. Dependencia bcrypt
23. Ilustración 14. Ejemplo de correcto hasheo de contraseñas
24. Ilustración 15. Importación de la biblioteca bcrypt
25. Ilustración 16. Método loginUser en authController
26. Ilustración 17. Método getByEmail en el modelo User
27. Ilustración 18. Lista de controladores
28. Ilustración 19. Controller user
29. Ilustración 20. Obtener user por ID

INTRODUCCIÓN
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 4 | 82
En la actualidad, el comercio electrónico ha experimentado un crecimiento

significativo, impulsando la necesidad de sistemas eficientes que gestionen los

procesos de pedidos y control de inventario. Los sistemas CRUD (Crear, Leer,

Actualizar, Eliminar) se han consolidado como herramientas fundamentales para

administrar datos de manera estructurada y segura en aplicaciones web. Su

implementación permite a las empresas optimizar operaciones, reducir errores y

mejorar la experiencia del cliente

“Tanto pequeños como grandes negocios comercializan una gran variedad de

productos y, por lo tanto, requieren de cierto tipo de organización y fluidez al tratar con

los pedidos generados en sus tiendas virtuales" (Paéz, 2023). Esto resalta la

importancia de desarrollar sistemas que faciliten la gestión eficiente de pedidos en

entornos digitales

El presente proyecto se centra en el desarrollo de un sistema CRUD para la

tienda online "Virtual PC", utilizando tecnologías como [Link], Express, MySQL y

Auth0. La arquitectura adoptada sigue el patrón MVC (Modelo-Vista-Controlador), lo

que garantiza una estructura organizada y escalable. Además, se incorporan prácticas

de seguridad como la autenticación mediante tokens JWT y el cifrado de contraseñas

con bcrypt.

Durante el desarrollo, se realizaron pruebas exhaustivas utilizando herramientas

como Postman y Thunder Client para asegurar el correcto funcionamiento de las rutas

implementadas. Asimismo, se diseñó un modelo relacional de base de datos que refleja

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 5 | 82
de manera precisa las entidades del sistema y sus relaciones, proporcionando una

gestión de datos coherente y segura.

Este proyecto no solo busca ofrecer una solución funcional para la venta en

línea, sino también establecer una base sólida para futuras extensiones, como la

recuperación de contraseñas, la actualización de información de usuarios y la

integración de pasarelas de pago, adaptándose así a las necesidades dinámicas del

comercio electrónico moderno.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 6 | 82
2. PROBLEMA-CASO PRÁCTICO

PLANTEAMIENTO DE PROBLEMA

CONTEXTO (Lugar o
CAUSAS CONSECUENCIAS
situación)
Falta de presencia Empresa de tecnología Pérdida de clientes
digital. VIRTUAL PC. potenciales.
Limitación del
Dependencia del boca a
crecimiento del
boca.
negocio.
PROBLEMA:
No contar con Desconfianza del
Baja visibilidad y pérdida
plataforma de pedidos ni cliente por falta de
de ventas por ausencia de
pagos automatizados. profesionalismo.
una plataforma digital.
Costos operativos
Gasto excesivo en elevados.
personal para tareas Ineficiencia en la
repetitivas. atención y en los
procesos de venta.

3. ¿CUÁLES SON LAS FUNCIONALIDADES CLAVE QUE DEBEN INCLUIRSE?

 Panel de Administración

 Catálogo de Productos o Servicios

 Sistema de Pedidos y Carrito de Compras

 Integración de Pagos Online

 Sección de Preguntas Frecuentes y Soporte

 Adaptabilidad móvil, que sea funcional en cualquier dispositivo

4. REQUERIMIENTOS
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 7 | 82

Se usará STRIPE SDK porque facilita la integración de pagos, además se requerirá de

una de base de datos para la gestión de productos y clientes.

La tienda debe ser responsiva y fácil de navegar.

Se necesita una sección de contacto y redes sociales.

Se requiere un dominio (dirección web de la tienda) y un hosting (espacio donde se

almacena la web.)

5. SCRUM

5.1 Definición del equipo SCRUM

Product Owner: Andrés Burbano (quien definirá las funcionalidades y prioridades).

Scrum Master: Harold Andrade (se encargará de que el equipo siga la metodología).

Development Team:

 Frontend: Andrés Burbano, Vanya Catalina.

 Backend: Daniel Grajales, Harold Andrade.

 Base de datos: Harold Andrade, Daniel Grajales, Andrés Burbano.

Stakeholder: Administrador de la empresa.

5.2 Product Backlog - Tienda en Línea

Autenticación de usuarios
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 8 | 82
Tareas Técnicas:

Requerimiento de Usuario:

"Como usuario, quiero registrarme e iniciar sesión de forma segura para acceder a la

tienda."

 Configurar Auth0 para la autenticación de usuarios.

 Implementar middleware en Express para validar tokens JWT.

 Crear la interfaz de login y registro en React.

 Conectar frontend con backend usando Auth0 SDK.

 Proteger rutas privadas en el backend.

Catálogo de productos

Requerimiento de Usuario:

"Como usuario, quiero ver una lista de productos con imágenes, descripciones y

precios."

Tareas Técnicas:

 Crear tabla de productos en MySQL.

 Implementar API REST en Express para gestionar productos.

 Diseñar la vista del catálogo en React.

 Crear el panel de administración para CRUD de productos.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 9 | 82
 Conectar frontend con backend para obtener productos dinámicamente.

Carrito de Compras

Requerimiento de usuario:

"Como usuario, quiero agregar productos a un carrito para comprarlos más tarde."

Tareas Técnicas:

 Crear tabla de carrito en MySQL.

 Implementar API REST en Express para gestionar el carrito.

 Diseñar la vista del carrito en React.

 Implementar actualización dinámica del precio total.

 Conectar con la base de datos para mantener los productos guardados en

sesión.

Sistema de Pedidos

Requerimiento de usuario:

"Como usuario, quiero finalizar mi compra proporcionando mis datos de envío."

Tareas Técnicas:

 Crear tabla de pedidos en MySQL.

 Implementar API REST en Express para gestionar pedidos.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 10 | 82
 Diseñar la vista de confirmación de compra en React.

 Crear una vista para que el administrador pueda ver los pedidos.

 Enviar correos de confirmación de compra al usuario.

Pagos en Línea con Stripe

Requerimiento de usuario:

"Como usuario, quiero pagar con tarjeta de crédito/débito o transferencia bancaria de

forma segura.”

Tareas Técnicas:

 Integrar Stripe SDK para pagos en línea.

 Implementar API REST en Express para procesar pagos.

 Diseñar la interfaz de pago en React.

 Asegurar la comunicación segura con SSL/TLS.

 Enviar confirmación de pago al usuario.

Servicio Técnico y Contacto

Requerimiento de usuario:

"Como usuario, quiero solicitar un servicio técnico desde la web."

Tareas Técnicas:
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 11 | 82
 Crear formulario de solicitud de servicio técnico.

 Implementar API REST en Express para recibir solicitudes.

 Diseñar la vista de contacto en React.

 Enviar correos de confirmación al usuario y al administrador.

5.3 SPRINT 1

Semana 1: Planificación y Metodología

 Crear un plan de proyecto utilizando metodologías ágiles (Scrum).

 Asignar roles y responsabilidades dentro del equipo.

 Definir la duración de los Sprint y el backlog inicial.

 Definir los objetivos, causas y consecuencias teniendo en cuenta el problema y

caso práctico.

 Definir los primeros requerimientos para el desarrollo del proyecto.

Semana 2: Revisión de avances y análisis de requisitos

 Realizar reuniones de seguimiento para alinear al equipo.

 Documentar los objetivos y métricas de éxito del proyecto.

 Realizar entrevistas con el cliente para identificar requisitos.

 Documentar los requisitos funcionales y no funcionales.

 Crear un diagrama de requisitos para visualizar las necesidades del usuario.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 12 | 82
Semana 3: Modelado y Diseño

 Diagramar casos de uso y modelos de dominio.

 Crear artefactos del diseño de la arquitectura de la aplicación.

 Diseñar diagramas de secuencia y clases.

 Definir frameworks y demás herramientas que se van a utilizar para el desarrollo

del proyecto.

5.4 SPRINT 2: Desarrollo del CRUD y modelo de dominio

Semana 1: Configuración del CRUD

 Definir las entidades principales del sistema.

 Crear el modelo de datos en MySQL con sus relaciones.

 Implementar la capa del modelo de dominio en [Link] con Express usando

principios de POO.

 Probar conexión entre el backend y la base de datos.

Semana 2: Desarrollo del CRUD con el Framework

 Implementar el CRUD inicial para las entidades principales.

 Crear controladores y servicios en Express.

 Configurar rutas en la API REST.

 Probar operaciones CRUD con herramientas como Postman o Insomnia.

Semana 3: Integración con el Frontend

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 13 | 82
 Diseñar y desarrollar la interfaz en React para el CRUD.

 Conectar el frontend con el backend mediante fetch/axios.

 Implementar manejo de errores y validaciones en la UI.

 Optimizar peticiones a la base de datos.

Semana 4: Pruebas de software iniciales

 Diseñar casos de prueba iniciales revisando los generados por el framework.

 Implementar pruebas unitarias en el backend con Jest o Mocha.

 Realizar pruebas de integración para verificar la API REST.

 Identificar y corregir errores antes del siguiente Sprint.

5.5 SPRINT 3 – Finalización y evaluación del proyecto

Objetivo: Finalizar el desarrollo con enfoque en la persistencia, controladores y

rendimiento del software.

Semana 1: Verificación de la capa de persistencia (Bases de datos)

 Crear y configurar las clases del modelo de persistencia.

 Configurar y optimizar el gestor de base de datos (MySQL).

 Realizar pruebas de conexión y consultas básicas.

Semana 2: Verificación de los Controladores básicos de la aplicación

 Implementar los controllers de la aplicación.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 14 | 82
 Integrar los controladores con el CRUD desarrollado en el Sprint 2.

 Validar respuestas de API y manejo de errores.

Semana 3: Evaluación y mejora del rendimiento del software

 Identificar cuellos de botella en las consultas a la base de datos.

 Optimizar queries y revisar el uso de índices en MySQL.

 Refactorizar código si es necesario para mejorar la eficiencia.

Semana 4: Pruebas de carga y estrés

 Implementar pruebas de carga con JMeter o Artillery.

 Medir tiempos de respuesta en endpoints críticos.

Ajustar configuraciones para mejorar rendimiento bajo alta demanda.

6. EJEMPLO DE CASO DE USO

Cliente → Compra productos y solicita servicio técnico.

Administrador → Gestiona productos, pedidos y citas de servicio técnico.

Técnico → Atiende los servicios solicitados por los clientes.

Cliente

Registrarse / Iniciar sesión

Buscar y ver productos

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 15 | 82
Agregar productos al carrito

Realizar una compra

Solicitar servicio técnico

Consultar estado del pedido o servicio técnico

Administrador

Gestionar productos (agregar, modificar, eliminar)

Gestionar pedidos

Gestionar solicitudes de servicio técnico

Configurar métodos de pago y envío

Técnico

Ver solicitudes de servicio técnico

Actualizar estado del servicio

REQUERIMIENTOS MODELO DE DOMINIO

Gestión de Usuarios

Registro de usuarios (clientes y administradores).

Inicio de sesión con email y contraseña o autenticación social (Google, Facebook, etc.).

Recuperación de contraseña mediante correo electrónico.

Gestión de perfiles de usuario (editar datos personales, direcciones, etc.).

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 16 | 82

Catálogo de Productos

Visualización de productos con imágenes, descripciones y precios.

Búsqueda y filtrado de productos por categoría, precio, marca, etc.

Visualización de productos destacados, nuevos o en oferta.

Carrito de Compras y Checkout

Agregar productos al carrito de compras.

Modificar cantidad o eliminar productos del carrito.

Cálculo automático del costo total, incluyendo impuestos y costos de envío.

Finalización de compra con selección de método de pago y dirección de envío.

Métodos de Pago y Envío

Integración con pasarelas de pago (PayPal, Stripe, MercadoPago, etc.).

Opciones de pago con tarjeta de crédito, débito, transferencia bancaria o contra

entrega.

Gestión de Pedidos

Registro automático de compras en la base de datos.

Confirmación de compra vía correo electrónico.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 17 | 82
Consultar estado del pedido (pendiente, en preparación, enviado, entregado).

Cancelación o devolución de pedidos según políticas establecidas.

Atención al Cliente

Sección de contacto con formulario para consultas.

Chat en vivo o integración con WhatsApp para atención rápida.

Preguntas frecuentes (FAQ) sobre productos, envíos y devoluciones.

Experiencia de Usuario y Diseño Responsivo

Diseño adaptable (responsive) para móviles, tablets y computadoras.

Navegación intuitiva con menús y categorías organizadas.

Carga rápida de la web para mejorar la experiencia del usuario.

ENTREVISTA AL CLIENTE SOBRE EL NEGOCIO

¿Cuál es el nombre de tu empresa o marca?

VIRTUAL PC

¿A qué se dedica tu empresa y qué productos o servicios ofrece?

se dedica a la reparación y venta de equipos cómputo, instalación de cámaras de

seguridad, alarmas, papelería, contamos con tres computadores para el servicio de

internet y también préstamos el servicio de corresponsal Bancolombia

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 18 | 82

¿Cómo consigues actualmente a tus clientes?

Los clientes se las consigue por la publicidad que se encuentra afuera del negocio y

por el boca a boca

¿Por qué quieres una página web?

La página web la necesitamos para ayudarnos a expandir nuestro negocio a través de

la red

¿Cuáles son los principales objetivos de la web?

El principal objetivo de la página web es ayudarnos a vender y a promocionar los

productos y servicios que presentamos en nuestro negocio

¿Qué funcionalidades y el contenido quieres que lleve tu página web?

La información que se debe mostrar en la página debería ser sobre los productos que

ofrecemos catálogos de la parte de papelería catálogos en la parte de cámaras por

unidad y combos también los servicios que prestamos como son la venta de cámaras

de seguridad e instalación, también los horarios que se manejan en el local y se puede

anexar la venta de productos electrónicos como mouse, teclados, memoria USB

¿Tienes un logo y colores corporativos definidos?

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 19 | 82
El local nuestro maneja el color azul oscuro y el blanco la página debería ser referente

a esos colores, el diseño no debería ser muy complejo para el fácil manejo de los

clientes

7. ARTEFACTOS DEL DISEÑO DE LA ARQUITECTURA DE LA APLICACIÓN

7.1 Objetivos del Sistema

El sistema web para Virtual PC se desarrollará con los siguientes objetivos principales:

 Mayor alcance y captación de clientes nuevos a través de visibilidad en línea.

 Venta automatizada con carrito de compras e integración de pagos en línea.

 Reducción de costos operativos, minimizando la intervención humana en

tareas repetitivas.

 Optimización del negocio, mejorando la gestión de pedidos y servicio técnico.

 Mayor credibilidad al proporcionar una plataforma confiable y estructurada.

7.2 Componentes

Este diagrama muestra los componentes principales de la aplicación y cómo

interactúan entre sí.

Sistema de Gestión de Ventas y Servicio Técnico - Virtual PC

7.2.1 Frontend (Interfaz de Usuario)

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 20 | 82
o Catálogo de productos y servicios

o Carrito de compras y checkout

o Solicitud y seguimiento de servicio técnico

o Gestión de usuario (registro, inicio de sesión, recuperación de

contraseña)

o Sección de contacto y preguntas frecuentes

7.2.2 Backend (Lógica de Negocio - API RESTFUL)

o Controlador de usuarios (autenticación, gestión de perfiles)

o Controlador de productos (gestión de catálogos, búsqueda y filtrado)

o Controlador de pedidos (compra, actualización de estado, cancelación y

devoluciones)

o Controlador de servicio técnico (solicitud, actualización y seguimiento)

o Controlador de métodos de pago y envío

o Controlador de notificaciones y comunicación con clientes

7.2.3 Base de Datos (MySQL)

o Tabla usuarios

o Tabla productos

o Tabla pedidos

o Tabla servicios técnicos

o Tabla notificaciones
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 21 | 82
7.3 Módulos

Cada módulo representa una parte funcional dentro del sistema.

7.3.1 Módulos del Sistema

 Módulo de Autenticación: Registro, inicio de sesión, autenticación social y

recuperación de contraseña.

 Módulo de Catálogo de Productos: Visualización, búsqueda y filtrado de

productos.

 Módulo de Carrito de Compras y Checkout: Agregar productos, modificar

cantidad y finalizar compra.

 Módulo de Métodos de Pago y Envío: Integración con pasarelas de pago y

configuración de opciones de envío.

 Módulo de Gestión de Pedidos: Registro, actualización de estado,

confirmación por correo y cancelaciones.

 Módulo de Atención al Cliente: Contacto, chat en vivo, preguntas frecuentes y

soporte automatizado.

 Módulo de Servicio Técnico: Solicitud, asignación a técnicos y seguimiento.

 Módulo de Notificaciones: Notificación de nuevos productos, servicios y

cambios en el estado de pedidos o soporte.

7.4. Comunicación entre Componentes

Se describe cómo interactúan los componentes del sistema:

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 22 | 82
1. El cliente interactúa con la interfaz web (navega, compra productos, solicita

servicio técnico).

2. El frontend envía peticiones al backend a través de la API RESTful.

3. El backend procesa la solicitud y se comunica con la base de datos.

4. La base de datos devuelve la información al backend.

5. El backend responde al frontend con los datos solicitados.

6. El frontend actualiza la vista y muestra la información al usuario.

7. El sistema envía notificaciones automáticas al cliente sobre su compra o

servicio técnico.

7.5 Requerimientos Técnicos

React (Frontend)

 Es una biblioteca de JavaScript para construir interfaces de usuario interactivas

y dinámicas.

 Permite crear componentes reutilizables y manejar el estado de la aplicación de

forma eficiente.

 Ideal para SPAs (Single Page Applications).

[Link] (tiempo de ejecución de JavaScript)

 Es un entorno de ejecución de JavaScript del lado del servidor.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 23 | 82
 Permite construir aplicaciones escalables y manejar múltiples conexiones

concurrentes.

 Utiliza un modelo asincrónico y basado en eventos.

Express (Backend - Framework de [Link])

 Es un framework minimalista para [Link] que facilita la creación de servidores

web y APIs REST.

 Maneja rutas, solicitudes HTTP y middleware para procesar datos.

 Simplifica la integración con bases de datos y otros servicios.

Auth0 (Autenticación y Autorización)

 Proporciona autenticación segura para los usuarios sin necesidad de manejar

contraseñas directamente.

 Soporta autenticación con redes sociales, bases de datos personalizados y

autenticación multifactor.

 Útil para gestionar roles y permisos de usuarios.

MySQL (Base de Datos Relacionales)

 Es un sistema de gestión de bases de datos SQL.

 Permite almacenar y consultar datos estructurados de manera eficiente.

 Comúnmente usado en aplicaciones web con estructuras de datos bien

definidas.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 24 | 82
Stripe SDK (Pagos y Finanzas)

 Es un servicio para procesar pagos en línea de forma segura.

 Permite aceptar tarjetas de crédito, pagos con billeteras digitales y

transferencias bancarias.

Estos artefactos ayudan a visualizar y comprender mejor la arquitectura del sistema,

facilitando su desarrollo y mantenimiento.

8. DIAGRAMAS E ILUSTRACIONES

8.1 Diagrama de caso de uso

Ilustración 1 Diagrama de caso de uso

8.2 Modelo dominio

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 25 | 82
Este diagrama representará las clases principales del sistema y cómo se relacionan.

Algunas clases clave serían:

Actores Principales:

 Administrador: Se encarga de gestionar productos y clientes.

 Cliente: Puede realizar pedidos y tiene un carrito de compras.

Entidades Principales:

 Producto: Elemento que el administrador gestiona y que pertenece a una

categoría.

 Categoría: Agrupa productos, estableciendo una relación de "pertenencia".

 Pedido: Es realizado por el cliente y contiene productos.

 Carrito: Está asociado a un cliente y contiene productos antes de confirmar la

compra.

Relaciones Clave:

 El administrador gestiona productos y clientes, lo que implica que puede

modificar, agregar o eliminar estos elementos.

 Los productos pertenecen a una categoría, estableciendo una jerarquía

dentro del inventario.

 El cliente realiza pedidos y tiene un carrito de compras, lo que indica el flujo

de compra habitual en un e-commerce.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 26 | 82
 El pedido contiene productos, lo que representa la relación entre los pedidos y

los artículos comprados.

Ilustración 2 Modelo dominio

8.3 Diagrama de Clase (Estructura del sistema)

Este diagrama muestra las clases principales del sistema y cómo se relacionan entre

sí.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 27 | 82
Clases clave y sus relaciones:

Usuario

 Tiene un id, nombre, email, contraseña y dirección.

 Puede hacer pedidos y solicitar servicio técnico.

Producto

 Tiene un id, nombre, precio, stock y categoría.

 Está asociado con los pedidos cuando un usuario compra algo.

Pedido

 Tiene un id, usuario, productos (lista), total, estado y fecha.

 Se relaciona con pagos y usuarios.

Pago

 Tiene un id, pedido, monto, método de pago y estado.

 Está vinculado a un pedido.

Servicio Técnico

 Tiene un id, usuario, descripción del problema, fecha, estado.

 Está relacionado con los usuarios que solicitan servicio técnico.

Relaciones:
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 28 | 82
 Un usuario puede hacer varios pedidos y solicitar servicio técnico.

 Un pedido puede incluir varios productos y estar vinculado a un pago.

Básicamente, este diagrama representa cómo los clientes van a interactuar con la

tienda, comprar productos, realizar pagos y solicitar servicio técnico.

Ilustración 4 Diagrama de clase

Ilustración
Ilustración 2 3 Diagrama
Diagrama de clase
de clase
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 29 | 82

8.4 Diagramas de Secuencia (Flujo de interacciones)

Aquí modelaremos flujos importantes, como:

 Proceso de compra: Cliente agrega productos al carrito, realiza un pedido y

paga.

 Solicitud de servicio técnico: Cliente solicita un servicio, se confirma la cita y

se realiza la reparación.

 Inicio de sesión: Cliente ingresa sus credenciales, el backend verifica y

responde con los datos.

Caso 1: Inicio de Sesión

1. El Cliente ingresa email y contraseña.

2. El Frontend envía los datos al Backend.

3. El Backend verifica en la Base de Datos.

4. Si es válido, devuelve un token de autenticación.

5. El Cliente accede a su cuenta.

Actores involucrados: Cliente, Frontend, Backend, Base de datos.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 30 | 82

Ilustración 4 Diagrama de secuencia: Inicio de sesión

Caso 2: Proceso de Compra

1. El Cliente selecciona productos y los agrega al carrito.

2. El Frontend envía la orden al Backend.

3. El Backend verifica el stock y calcula el total.

4. El Cliente procede al pago.

5. El Backend confirma el pago y crea el pedido.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 31 | 82
6. Se actualiza el stock y se notifica al cliente.

Actores involucrados: Cliente, Frontend, Backend, Base de datos, Proveedor de

pagos.

Ilustración 5 Diagrama de secuencia: Proceso de compra

Caso 3: Solicitud de Servicio Técnico

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 32 | 82
1. El Cliente solicita un servicio técnico en la web.

2. El Frontend envía la solicitud al Backend.

3. El Backend la registra en la Base de Datos.

4. Se asigna una fecha y un técnico.

5. Se confirma la cita al Cliente.

Actores involucrados: Cliente, Frontend, Backend, Base de datos.

Ilustración 6 Diagrama de secuencia: Solicitud de servicio técnico

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 33 | 82
Caso 4: Administrador actualiza información

1. El administrador inicia sesión en el panel

2. El administrador edita un producto (cambia el precio, stock, imagen, etc.)

3. El administrador gestiona un pedido (aprueba, cancela, cambia estado, etc.)

4. El administrador sube una oferta o cambia un banner.

Actores involucrados: Administrador, Frontend, Backend, Base de datos.

Ilustración 7 Diagrama de secuencia: Administrador edita un producto

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 34 | 82

Desarrollo de un CRUD para la Gestión de Pedidos

Funcionamiento del Backend

Tecnologías y Frameworks

El backend de la tienda online está construido utilizando las siguientes

tecnologías y frameworks:

[Link]: Es un entorno de ejecución de JavaScript que permite desarrollar

aplicaciones del lado del servidor. [Link] es conocido por su eficiencia y escalabilidad,

gracias a su modelo de E/S no bloqueante.

Express: Es un framework minimalista y flexible para [Link] que facilita la

creación de APIs RESTful. Express maneja las solicitudes HTTP (GET, POST, PUT,

DELETE) y permite definir rutas y middlewares de manera sencilla.

MySQL: Es un sistema de gestión de bases de datos relacionales que se utiliza

para almacenar y gestionar la información de la tienda, como productos, usuarios,

pedidos y pagos.

Auth0: Es un servicio de autenticación y autorización que permite gestionar

usuarios y roles de manera segura. En este proyecto, Auth0 se integra con Express

para proteger las rutas sensibles mediante JSON Web Tokens (JWT).
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 35 | 82
Postman: Es una herramienta utilizada para probar las rutas de la API. Permite

enviar solicitudes HTTP y verificar las respuestas, lo que facilita la depuración y el

desarrollo.

Estructura del Proyecto

El proyecto está organizado en carpetas y archivos siguiendo el patrón MVC,

que separa la lógica de la aplicación en tres componentes principales:

Modelos (models/): Contienen la lógica para interactuar con la base de datos.

Cada modelo representa una entidad de la base de datos (por ejemplo, productos,

usuarios, pedidos) y define métodos para realizar operaciones CRUD.

Controladores (controllers/): Manejan la lógica de negocio y las solicitudes

HTTP. Cada controlador recibe las solicitudes del cliente, interactúa con los modelos

para obtener o modificar datos, y devuelve una respuesta adecuada.

Rutas (routes/): Definen las rutas de la API y las asocian con los controladores

correspondientes. Las rutas especifican qué controlador debe manejar cada solicitud

HTTP.

[Link]: Es el punto de entrada de la aplicación. Configura el servidor, los

middlewares (como [Link]() para procesar JSON) y las rutas. También se

encarga de iniciar el servidor en el puerto especificado.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 36 | 82
Flujo de una Solicitud

El flujo de una solicitud en el backend es el siguiente:

Solicitud HTTP: El cliente (frontend o Postman) realiza una solicitud HTTP

(GET, POST, PUT, DELETE) a una ruta de la API.

Rutas: La solicitud es manejada por el archivo [Link], que la redirige a la ruta

correspondiente en el archivo de rutas.

Controladores: La ruta llama al controlador asociado, que contiene la lógica

para manejar la solicitud.

Modelos: El controlador interactúa con el modelo correspondiente para realizar

operaciones en la base de datos (por ejemplo, crear un producto, obtener un usuario,

etc.).

Respuesta: El controlador devuelve una respuesta al cliente, que puede ser un

mensaje de éxito, un error o los datos solicitados.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 37 | 82

CRUD (Create, Read, Update, Delete)

El proyecto implementa operaciones CRUD para las siguientes entidades:

Para los Productos

Create (Crear): Permite crear un nuevo producto en la base de datos. La ruta

POST /api/productos recibe los datos del producto (nombre, descripción, precio, stock)

y los almacena en la tabla productos.

Read (Leer): Permite obtener todos los productos o un producto específico por

su ID. Las rutas GET /api/productos y GET /api/productos/:id devuelven la información

de los productos.

Update (Actualizar): Permite actualizar un producto existente. La ruta PUT

/api/productos/:id recibe los nuevos datos del producto y los actualiza en la base de

datos.

Delete (Eliminar): Permite eliminar un producto de la base de datos. La ruta

DELETE /api/productos/:id elimina el producto con el ID especificado.

Para los Usuarios

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 38 | 82
Create (Crear): Permite crear un nuevo usuario. La ruta POST /api/usuarios

recibe los datos del usuario (nombre, apellidos, email, teléfono, dirección, rol) y los

almacena en la tabla usuarios.

Read (Leer): Permite obtener todos los usuarios o un usuario específico por su

ID. Las rutas GET /api/usuarios y GET /api/usuarios/:id devuelven la información de los

usuarios.

Update (Actualizar): Permite actualizar un usuario existente. La ruta PUT

/api/usuarios/:id recibe los nuevos datos del usuario y los actualiza en la base de datos.

Delete (Eliminar): Permite eliminar un usuario de la base de datos. La ruta

DELETE /api/usuarios/:id elimina el usuario con el ID especificado.

Para los Pedidos

Create (Crear): Permite crear un nuevo pedido. La ruta POST /api/pedidos

recibe el ID del usuario y crea un nuevo registro en la tabla pedidos.

Read (Leer): Permite obtener todos los pedidos o un pedido específico por su

ID. Las rutas GET /api/pedidos y GET /api/pedidos/:id devuelven la información de los

pedidos.

Update (Actualizar): Permite actualizar el estado de un pedido. La ruta PUT

/api/pedidos/:id recibe el nuevo estado (por ejemplo, "enviado", "entregado") y lo

actualiza en la base de datos.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 39 | 82
Delete (Eliminar): Permite eliminar un pedido de la base de datos. La ruta

DELETE /api/pedidos/:id elimina el pedido con el ID especificado.

PARA LOS DETALLES DE PEDIDO

Create (Crear): Permite agregar un producto a un pedido. La ruta POST

/api/detalle-pedidos recibe el ID del pedido, el ID del producto y la cantidad, y crea un

nuevo registro en la tabla detalle_pedido.

Read (Leer): Permite obtener todos los detalles de un pedido. La ruta GET

/api/detalle-pedidos/:pedido_id devuelve la información de los productos asociados a un

pedido.

Update (Actualizar): Permite actualizar la cantidad de un producto en un

pedido. La ruta PUT /api/detalle-pedidos/:id recibe la nueva cantidad y actualiza el

registro en la base de datos.

Delete (Eliminar): Permite eliminar un producto de un pedido. La ruta

DELETE /api/detalle-pedidos/:id elimina el registro con el ID especificado.

PARA LOS PAGOS

Create (Crear): Permite crear un pago para un pedido. La ruta POST /api/pagos

recibe el ID del pedido y el método de pago, y crea un nuevo registro en la tabla pagos.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 40 | 82
Read (Leer): Permite obtener todos los pagos o los pagos de un pedido

específico. Las rutas GET /api/pagos y GET /api/pagos/:pedido_id devuelven la

información de los pagos.

Update (Actualizar): Permite actualizar el estado de un pago. La ruta PUT

/api/pagos/:id recibe el nuevo estado (por ejemplo, "completado", "fallido") y lo actualiza

en la base de datos.

PARA LOS ENVÍOS

Create (Crear): Permite crear un nuevo envío para un pedido. La ruta POST

/api/envios recibe el ID del pedido, la dirección de envío, el transportista, la fecha de

envío y el estado, y crea un nuevo registro en la tabla envios.

Read (Leer): Permite obtener todos los envíos o un envío específico por su ID.

Las rutas GET /api/envios y GET /api/envios/:id devuelven la información de los envíos.

Update (Actualizar): Permite actualizar la información de un envío. La ruta

PUT /api/envios/:id recibe los nuevos datos (por ejemplo, el estado o la fecha de

entrega) y los actualiza en la base de datos.

Delete (Eliminar): Permite eliminar un envío de la base de datos. La ruta

DELETE /api/envios/:id elimina el envío con el ID especificado.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 41 | 82
PARA TRANSPORTISTAS

Create (Crear): Permite crear un nuevo transportista. La ruta POST

/api/transportistas recibe el nombre del transportista y lo almacena en la tabla

transportistas.

Read (Leer): Permite obtener todos los transportistas o un transportista

específico por su ID. Las rutas GET /api/transportistas y GET /api/transportistas/:id

devuelven la información de los transportistas.

Update (Actualizar): Permite actualizar la información de un transportista. La

ruta PUT /api/transportistas/:id recibe los nuevos datos y los actualiza en la base de

datos.

Delete (Eliminar): Permite eliminar un transportista de la base de datos. La ruta

DELETE /api/transportistas/:id elimina el transportista con el ID especificado.

Ilustración 5 Route del módulo usuarios y sus métodos CRUD

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 42 | 82
Organización con MVC

El patrón MVC (Modelo-Vista-Controlador) es una arquitectura de software que

separa la lógica de la aplicación en tres componentes principales:

Modelos (models/): Representan las entidades de la base de datos y contienen

la lógica para interactuar con ella. Por ejemplo, el modelo [Link] define

métodos para crear, leer, actualizar y eliminar productos.

Controladores (controllers/): Manejan la lógica de negocio y las solicitudes

HTTP. Por ejemplo, el controlador [Link] recibe las solicitudes

relacionadas con productos, interactúa con el modelo y devuelve una respuesta al

cliente.

Rutas (routes/): Definen las rutas de la API y las asocian con los controladores.

Por ejemplo, el archivo [Link] define las rutas para crear, leer, actualizar y

eliminar productos.

Vista (Views): Se encargan de la presentación visual y de la interacción con el

usuario. Es decir, son responsables de mostrar los datos al usuario en una interfaz

(gráfica o textual) y, en algunos casos, de capturar entradas provenientes del usuario.

[Link]: Es el punto de entrada de la aplicación. Configura el servidor, los

middlewares y las rutas. También se encarga de iniciar el servidor en el puerto

especificado.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 43 | 82

Ilustración 6 Organización MVC del proyecto

MODELO RELACIONAL DE LA BASE DE DATOS

La base de datos está compuesta por las siguientes tablas:

 usuarios: Almacena información de los usuarios y su rol en el sistema.

 roles: Define los diferentes roles que pueden tener los usuarios.

 productos: Contiene información sobre los productos disponibles para la venta.

 pedidos: Registra los pedidos realizados por los usuarios.

 detalles pedidos: Contiene los productos asociados a cada pedido.

 pagos: Administra la información de los pagos realizados por los usuarios.

 envíos: Gestiona la información de los envíos asociados a cada pedido.

 transportistas: Sirve para gestionar las compañías o servicios que se encargan

de entregar los productos a los clientes. Esto es crucial en una tienda en línea, donde

el envío es una parte clave de la experiencia del cliente.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 44 | 82
 carrito de compras: Su propósito es servir como un espacio temporal para los

artículos que el cliente desea comprar, permitiéndole añadir, modificar o eliminar

productos antes de realizar el pago.

Cada tabla está relacionada mediante claves foráneas, asegurando la integridad de los

datos.

La implementación de un CRUD para la gestión de pedidos permite administrar de

forma eficiente la información de usuarios, productos, pedidos, pagos y envíos. Este

sistema puede ser ampliado con funcionalidades adicionales como reportes y

seguridad avanzada.

En futuras versiones, se podría agregar autenticación con JWT, integración con

pasarelas de pago y optimización de consultas para mejorar el rendimiento.

Ilustración 7 Base de Datos actual

PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 45 | 82
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 46 | 82

PRUEBAS EN POSTMAN

Se han realizado pruebas exhaustivas de todas las rutas utilizando Postman, una

herramienta que permite enviar solicitudes HTTP y verificar las respuestas. A

continuación, se describen algunas de las pruebas realizadas con el módulo de

pedidos.

Ilustración 8 Método POST del módulo pedidos

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 47 | 82

Ilustración 9 Método PUT del módulo pedidos

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 48 | 82

Ilustración 10 Método GET del módulo pedidos (antes de realizar el PUT)

Ilustración 11 Método DELETE del módulo pedidos

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 49 | 82
MODELO DE DOMINIO

En el desarrollo de software, un modelo de dominio es una representación

conceptual de los elementos, procesos y reglas de un dominio específico (es decir, un

área de conocimiento o negocio). Este modelo actúa como un puente entre los

expertos en el dominio (por ejemplo, usuarios o analistas de negocios) y los

desarrolladores de software, permitiendo una comprensión compartida de cómo debe

funcionar el sistema que se va a construir. A menudo, se representan las entidades

clave, sus relaciones, atributos y las restricciones que rigen sus interacciones.

Un aspecto clave del modelo de dominio es que no está vinculado a la

implementación técnica en sí. Por el contrario, se centra en capturar la lógica del

negocio tal como es entendida por las personas involucradas. Esto facilita la

colaboración y garantiza que el software final refleje correctamente las necesidades

reales del negocio. En la práctica, estos modelos se crean comúnmente mediante

diagramas UML (Lenguaje Unificado de Modelado), como los diagramas de clases, que

ilustran visualmente las estructuras y relaciones entre entidades.

IMPORTANCIA DEL MODELO DE DOMINIO

El modelo de dominio es fundamental para el diseño de software porque:

 Define las entidades principales y sus relaciones dentro del sistema.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 50 | 82
 Facilita la comprensión del negocio, al modelar conceptos del mundo real.

 Mejora la organización del código, separando la lógica de negocio de la

infraestructura.
 Permite la escalabilidad, ya que un buen diseño facilita la extensión y

mantenimiento del sistema.

El modelo de dominio se implementa a través de clases o estructuras que representan

entidades del sistema. Estas clases definen los atributos y comportamientos de cada

entidad.

Por ejemplo, en una aplicación de gestión de usuarios, un modelo de dominio en

JavaScript podría verse así:

Ilustración 12 La clase de la entidad usuario

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 51 | 82
Este modelo define la entidad Usuario, con atributos clave como id, nombre y

correo. Las operaciones CRUD interactuarán con esta estructura para crear, leer,

actualizar y eliminar usuarios de la base de datos.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 52 | 82

BENEFICIOS DE USAR UN MODELO DE DOMINIO

Implementar un modelo de dominio bien estructurado ofrece varios beneficios:

1. Estandarización y Claridad

 Proporciona una representación clara de los datos y sus relaciones.

 Reduce ambigüedades en la manipulación de datos.

2. Reutilización del Código

 Permite reutilizar las clases del modelo en diferentes partes del

sistema.

 Evita la duplicación de lógica y promueve buenas prácticas de

programación.

3. Facilidad de Mantenimiento y Escalabilidad

 Un modelo bien definido facilita la introducción de cambios sin

afectar otras partes del sistema.

 Ayuda a la integración con nuevas tecnologías o funcionalidades.

4. Separación de Responsabilidades

 Mantiene la lógica de negocio separada de la infraestructura de

datos.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 53 | 82
 Facilita la implementación de pruebas unitarias y la depuración del

sistema.

IMPLEMENTACIÓN DEL CRUD

Un CRUD permite realizar las operaciones básicas sobre una base de datos. A

continuación, se muestra un ejemplo de implementación en JavaScript utilizando

mySQL:

Ilustración 13 Métodos de la entidad usuario para obtener, crear y actualizar

datos de la tabla en la base de datos

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 54 | 82

Ilustración 14 Métodos de la entidad usuario para obtener, crear y actualizar

datos de la tabla en la base de datos

Ilustración 15 Métodos de la entidad usuario para obtener, crear y actualizar

datos de la tabla en la base de datos

ENTIDAD RELACIÓN EN MYSQL

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 55 | 82
Es una técnica utilizada en el diseño de bases de datos para representar y

organizar los datos. Este modelo ayuda a visualizar cómo se conectan los diferentes

elementos dentro de un sistema. Se compone principalmente de entidades, relaciones

y atributos, que se explican a continuación:

Entidades: Representan los objetos principales sobre los que se almacenará

información. Pueden ser cosas concretas como "Cliente" o "Producto", o conceptos

como "Venta" o "Orden". Cada entidad se caracteriza por tener un conjunto de

atributos.

Relaciones: Describen cómo las entidades están vinculadas entre sí. Por

ejemplo, la relación entre un "Cliente" y una "Orden" podría ser "Realiza", indicando

que un cliente puede realizar una o más órdenes.

Atributos: Son las propiedades o características de cada entidad. Por ejemplo,

un "Cliente" podría tener atributos como "nombre", "dirección" y "correo electrónico".

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 56 | 82

Ilustración 16 Base de datos del proyecto terminada

Representa nuestro diagrama de entidad-relación que muestra la estructura de

la base de datos para el sistema de comercio electrónico. En este diagrama, cada

entidad, como "usuarios", "roles", "pedidos" y "productos", está acompañada de sus

atributos (campos) y sus relaciones con otras entidades. Por ejemplo:

Carrito de compras, pagos, productos, pedidos, envíos, usuarios, y demás.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 57 | 82
Este diseño integra todos los elementos necesarios para gestionar usuarios,

compras, envíos, y pagos de manera eficiente.

AUTENTICACIÓN DE USUARIOS

La autenticación de usuarios es un proceso que permite verificar la identidad de

una persona al ingresar a un sistema. En el contexto de aplicaciones web, se basa

generalmente en el uso de credenciales como un correo electrónico o nombre de

usuario, y una contraseña, teniendo en cuenta mínimos requerimientos para la

seguridad de las contraseñas de los usuarios tales como, al menos un carácter

especial, al menos un número, al menos una mayúscula y también debe tener por lo

menos 8 caracteres.

Cifrado y Hashing de Contraseñas

Es importante no almacenar las contraseñas en texto plano por motivos de

seguridad. En su lugar, las contraseñas se encriptan utilizando técnicas de hashing,

como el algoritmo BCRYPT. Este algoritmo genera un hash único para cada

contraseña y añade un "Salt" para reforzar el proceso, evitando que las contraseñas

sean fácilmente descifradas incluso si la base de datos es comprometida.

VALIDACION DE CREDENCIALES
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 58 | 82
Al momento del inicio de sesión, las credenciales ingresadas por el usuario se

verifican contra los datos almacenados en la base de datos. Esto incluye comparar la

contraseña ingresada con el hash almacenado utilizando funciones de comparación

específicas como [Link]

GESTIÓN DE ERRORES

El sistema debe manejar errores como usuarios no registrados, contraseñas

incorrectas o solicitudes mal formadas para brindar una buena experiencia de usuario y

proteger el sistema de ataques como fuerza bruta.

BIBLIOTECA BCRYPT

Es una herramienta de gran ayuda que facilita la encriptación de contraseñas en

aplicaciones de [Link]. Su principal función es garantizar que las contraseñas

almacenadas en una base de datos no sean vulnerables, incluso si los datos son

comprometidos.

Ilustración 17 Dependencia bcrypt (imagen propia)

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 59 | 82
¿Cómo funciona BCRYPT?

Para realizar el correcto hasheo de las contraseñas se usa [Link] que

convierte una contraseña de texto plano en un hash seguro que puede ser almacenado

en la base de datos.

El número saltRounds determina cuántas veces se aplica el algoritmo de

encriptación. Un valor más alto aumenta la seguridad, pero también el tiempo de

procesamiento.

Ilustración 18 Ejemplo de correcto hasheo de contraseñas en la base de datos

(imagen propia)

Beneficios de bcrypt

Resistencia contra ataques: Cada hash generado por BCRYPT incluye un

"salt" único que lo hace resistente a ataques de fuerza bruta y diccionario.

Escalabilidad: Puedes aumentar el número de saltRounds a medida que crece

el poder computacional para mejorar la seguridad.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 60 | 82

HERRAMIENTAS Y TECNOLOGÍAS UTLIZADAS

[Link]: Entorno de ejecución para JavaScript, usado para desarrollar la lógica

del backend.

MySQL: Sistema de gestión de bases de datos relacional, utilizado para

almacenar los datos de los usuarios.

bcrypt: Biblioteca de [Link] para encriptar y comparar contraseñas de manera

segura.

Thunder Client: Herramientas para probar las APIs desarrolladas.

Ilustración 19 Importación de la biblioteca bcrypt en el código (imagen propia)

CÓDIGO IMPLEMENTADO PARA EL INICIO DE SESIÓN

AuthController
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 61 | 82
Es el archivo define la lógica del inicio de sesión, validando las credenciales del

usuario en la base de datos con el método loginUser.

El flujo del método loginUser es el siguiente:

 Extrae el email y la contraseña del cuerpo de la solicitud.

 Llama al método getByEmail del modelo User para buscar al

usuario en la base de datos.

 Si el usuario no existe, devuelve un error 404 ("Usuario no

encontrado").

 Si existe, usa [Link] para comparar la contraseña

ingresada con el hash almacenado.

 Devuelve un error 401 ("Contraseña incorrecta") si no coinciden, o

una respuesta exitosa si las credenciales son válidas.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 62 | 82

Ilustración 20 Aplicación del método loginUser en el archivo authController (imagen propia)

Método getbyemail

Este método del modelo User maneja la interacción directa con la base de

datos. Su función es buscar un usuario por su correo electrónico.

El flujo del método getByEmail es el siguiente:

 Ejecuta una consulta SQL para buscar el email en la tabla

usuarios.

 Si no se encuentra ningún registro, devuelve null.

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 63 | 82
 Si se encuentra, devuelve una instancia del usuario con todos los

datos relevantes, incluyendo el hash de la contraseña.

Este método es crucial porque permite que el controlador de login tenga acceso

al hash necesario para la comparación.

Ilustración 21 Método getByEmail en el modelo User (imagen propia)

Aunque el sistema actual permite el registro de usuarios y el inicio de sesión con

medidas de seguridad robustas, existen funcionalidades importantes que se incluirán

en versiones futuras para garantizar una experiencia más completa y eficiente. Estas

son las principales características planificadas:

 Actualización de Contraseña y Correo Electrónico

 Recuperación de Contraseñas

Estas mejoras están diseñadas para integrarse perfectamente con el sistema

actual, manteniendo las buenas prácticas de desarrollo y la seguridad que hemos

establecido.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 64 | 82
CONTROLADORES

¿Qué es un Controlador?

Un controlador es un componente fundamental dentro del patrón de diseño

MVC (Modelo - Vista - Controlador) que se encarga de gestionar las solicitudes que
llegan a una aplicación. Su función principal es recibir las peticiones del usuario,
procesarlas aplicando la lógica de negocio necesaria y luego responder
adecuadamente.

Cuando un usuario realiza una acción (como hacer clic en un botón o enviar un
formulario), esa acción genera una solicitud que es enviada al servidor. El controlador
intercepta esa solicitud, decide qué debe suceder (por ejemplo, consultar datos, crear
un registro nuevo o actualizar información) y después coordina la respuesta, ya sea
mostrando información o confirmando una acción realizada.

En pocas palabras, el controlador actúa como el puente entre:

 La Vista (lo que el usuario ve e interactúa).

 El Modelo (los datos o información que maneja la aplicación).

Además, el controlador:

 Valida la información recibida.

 Llama al modelo para acceder o modificar datos en la base de datos.
 Devuelve una respuesta adecuada al usuario (una página, datos JSON,
un mensaje de éxito o error).

Su objetivo principal es mantener separadas las responsabilidades, permitiendo

que la aplicación sea más organizada, fácil de mantener y escalar.

LISTA DE CONTROLADORES
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 65 | 82

Ilustración 22 lista de controladores (imagen propia)

Controller user
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 66 | 82

Ilustración 23 controller user(imagen propia)

User id

Ilustración 24 obtener user por id (imagen propia)

¿QUÉ ES EL FRONTEND?
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 67 | 82
es la parte de una aplicación o sitio web con la que los usuarios interactúan
directamente. Se refiere a la interfaz gráfica de usuario (UI) y a la experiencia de
usuario (UX) que se ejecuta en el navegador web. Es la capa visible del software,
donde se presentan los datos y se gestionan las acciones del usuario.

COMPONENTES DEL FRONTEND

Define elementos como encabezados, párrafos, listas, formularios, botones, etc.

Estilo (CSS)

El CSS: se encarga de la presentación visual: colores, fuentes, diseño, espaciado,

animaciones, etc.
Interactividad (JavaScript)
JavaScript permite agregar lógica dinámica e interactividad al frontend.
Gestiona eventos (clics, envíos de formularios), peticiones HTTP (AJAX, Fetch, Axios)
y manipulación del DOM.
Funcionalidades Comunes del Frontend
Navegación entre vistas (routing)
Validación de formularios
Manejo del estado de la aplicación (React)
Consumo de APIs (comunicación con backend)
Responsive Design (adaptación a móviles, tabletas y PC)
Accesibilidad (A11y)
Internacionalización (i18n)
Relación con el Backend
Aunque el frontend se ejecuta en el navegador, depende en gran medida del backend
para obtener datos. Se comunica mediante:
APIs REST
Esta comunicación permite que el frontend muestre productos, usuarios, pedidos, etc.,
que provienen de una base de datos gestionada por el backend.

IMPLEMENTACIÓN DEL FRONTEND

frontend/
├── node_modules/
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 68 | 82
├── public/
├── src/
│ ├── components/
│ │ └── [Link]
│ ├── context/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ ├── pages/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ ├── styles/
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ ├── [Link]
│ │ └── [Link]
│ ├── [Link]
│ └── [Link]
├── [Link]
├── [Link]
└── redadme

 src/
Directorio principal del código fuente de la aplicación React.
 [Link]
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 69 | 82
Componente de navegación principal que aparece en todas las páginas. Incluye
enlaces, nombre del usuario, modo oscuro, etc.
 [Link]
Contexto global que maneja los productos añadidos al carrito, cantidades y totales.
 [Link]
Contexto que permite cambiar entre modo claro y modo oscuro, y recuerda la
preferencia del usuario.
 [Link]
Contexto que almacena el usuario autenticado, con sus datos y estado de sesión.
 [Link]
Vista de administración para crear, editar o eliminar categorías.
 [Link]
Vista para gestionar productos en la tienda: alta, baja, modificación.
 [Link]
Página que muestra los productos que el usuario ha añadido al carrito.
 [Link]
Panel central con accesos para administradores y estadísticas. El administrador tiene
funciones y botones adicionales para diferentes funcionalidades tales como para crear,
editar o eliminar.
 [Link]
Página para que el usuario modifique sus datos personales.
 [Link]
Pantalla final donde se ingresan dirección y método de pago para completar la compra.
 [Link]
Página principal del sitio, muestra productos destacados o categorías.
 [Link]
Formulario para que los usuarios inicien sesión.
 [Link]
Página relacionada al pago, confirmación o pasarela de pago.
 [Link]
Muestra información detallada de un producto seleccionado.
 [Link]
Formulario para registro de nuevos usuarios.
 src/styles/*.css
Archivos CSS separados por componente o vista.
 [Link]
Componente principal de React. Contiene las rutas de navegación y la integración de
los contextos.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 70 | 82

¿QUÉ SON LAS MICROINTERACCIONES?

Las microinteracciones son pequeñas animaciones o respuestas visuales que

ocurren como resultado de una acción del usuario en una interfaz. Aunque son
discretas, estas interacciones cumplen un papel fundamental en la experiencia de
usuario, ya que comunican estados, resultados, y guían la navegación de forma
intuitiva.
Dan vida a la interfaz, hacen que el sistema se sienta más humano, y refuerzan el
vínculo entre el usuario y la aplicación.

Estructura de una microinteracción

Según Dan Saffer (autor de Microinteractions), cada microinteracción consta de cuatro
elementos clave:

Trigger (Disparador):

Es el evento que inicia la microinteracción. Puede ser iniciado por el usuario (ej. clic,
toque, deslizamiento) o por el sistema (ej. finalización de una carga, cambio de estado).

Rules (Reglas):

Definen qué sucede una vez que se activa el disparador. Es el conjunto de condiciones
y comportamientos programados que determinan el flujo de la interacción.

Feedback (Retroalimentación):

Es la información que el sistema devuelve al usuario. Puede ser visual (colores, íconos,
animaciones), sonora, o incluso háptica.

Loops & Modes (Ciclos y Modos):

Se refiere a cómo la microinteracción se repite o cambia con el tiempo. Por ejemplo,

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 71 | 82
una animación de carga que se reinicia si tarda mucho, o un botón que cambia de color
si ya ha sido usado.

EJEMPLOS EN UN FRONTEND REACT

Botón de “Modo Oscuro” con icono dinámico:

Una microinteracción que responde al clic mostrando un cambio visual instantáneo

(🌙/☀️) y aplicando un nuevo esquema de colores. Aquí el feedback es inmediato, visual
y contextual.

Hover en botones con efecto de sombra o escalado:

Indica interactividad antes de hacer clic. Mejora la percepción de respuesta del sistema.

Notificaciones de éxito o error (toasts):

Retroalimentación que aparece y desaparece suavemente después de un evento
(como guardar datos).
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 72 | 82
Animación al añadir un producto al carrito:
Puede incluir un icono de carrito que “salta” o muestra un contador animado. Refuerza
la acción sin interrumpir el flujo del usuario.

Ejemplos comunes en aplicaciones web modernas

Proceso de Finalizar Compra (Checkout):

Implica seleccionar productos, revisar el carrito, elegir dirección, método de pago,
aplicar cupones y confirmar el pedido. Todo esto constituye una macrointeracción
compleja.

Registro y autenticación de usuarios:

Incluye múltiples pantallas (registro, verificación de correo, inicio de sesión),
validaciones en tiempo real, y gestión de errores. Integra seguridad (JWT, Auth0, etc.).

Gestión de productos o categorías en un panel de administrador:

El flujo de crear, editar o eliminar productos desde un formulario con validaciones, vista
previa, y conexión con el backend es una macrointeracción común en sistemas CRUD
.
Edición de perfil del usuario:
Implica cargar datos del usuario, permitir edición, guardar cambios y notificar del
resultado, a menudo con manejo de formularios reactivos.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 73 | 82

¿QUÉ SON LAS MACROINTERACCIONES?

Las macrointeracciones son procesos de interacción más amplios y complejos dentro

de una interfaz, que involucran múltiples pasos o pantallas y que tienen un impacto
funcional significativo en la experiencia del usuario. A diferencia de las
microinteracciones, que se enfocan en eventos únicos y simples, las
macrointeracciones representan tareas completas o flujos de usuario que suelen
implicar decisiones, validaciones, navegación y almacenamiento de información.
Estas interacciones pueden abarcar acciones como completar una compra, registrarse
en una plataforma, editar el perfil del usuario o administrar productos en un sistema
CRUD.

COMPONENTES CLAVE DE UNA MACROINTERACCIÓN

 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 74 | 82
 Inicio o intención del usuario (Trigger global):
Generalmente comienza con una necesidad clara del usuario (ej. “Quiero
comprar un producto” o “Quiero cambiar mi contraseña”).
 Flujo de tareas (Workflow):
Incluye múltiples pasos, como completar formularios, navegar entre vistas,
recibir retroalimentación visual o validaciones del sistema.
 Decisiones y ramificaciones:
Puede haber múltiples caminos que el usuario pueda tomar dependiendo de su
elección, estado o rol. Esto implica lógica condicional.
 Persistencia de estado:
Las acciones suelen tener efectos persistentes en la base de datos, por lo que
requieren coordinación entre el frontend, backend y almacenamiento.
 Retroalimentación continua:
A lo largo de la interacción, se proporciona feedback visual, textual o contextual
(cargas, mensajes de error/success, navegación dinámica, etc.).

Ejemplos comunes en aplicaciones web modernas

 Proceso de Finalizar Compra (Checkout):
Implica seleccionar productos, revisar el carrito, elegir dirección, método de
pago, aplicar cupones y confirmar el pedido. Todo esto constituye una
macrointeracción compleja.
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 75 | 82

 Registro y autenticación de usuarios:

Incluye múltiples pantallas (registro, verificación de correo, inicio de sesión),
validaciones en tiempo real, y gestión de errores. Integra seguridad (JWT, Auth0,
etc.).
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 76 | 82
 Gestión de productos o categorías en un panel de administrador:
El flujo de crear, editar o eliminar productos desde un formulario con
validaciones, vista previa, y conexión con el backend es una macrointeracción
común en sistemas CRUD.
PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 77 | 82
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 78 | 82

 Edición de perfil del usuario:

Implica cargar datos del usuario, permitir edición, guardar cambios y notificar del
resultado, a menudo con manejo de formularios reactivos.
PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 79 | 82
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 80 | 82

Conclusión

El desarrollo del sistema CRUD para la tienda online Virtual PC representa un

paso importante en la implementación de soluciones tecnológicas orientadas a la

gestión eficiente de productos, usuarios, pedidos, pagos y envíos. A través del uso de
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 81 | 82
tecnologías modernas como [Link], Express, MySQL y herramientas de seguridad

como bcrypt y Auth0, se logró construir una plataforma robusta, segura y escalable.

La adopción del patrón de arquitectura MVC permitió mantener una separación

clara de responsabilidades entre los modelos, vistas y controladores, facilitando el

mantenimiento del código y su futura expansión. Además, la integración de pruebas

utilizando herramientas como Postman garantizó el correcto funcionamiento de todas

las rutas y operaciones implementadas.

Este proyecto no solo resuelve las necesidades actuales de la tienda, sino que

también sienta las bases para futuras mejoras, como la integración de métodos de

pago en línea, funcionalidades avanzadas de recuperación de contraseñas y

optimización de consultas para mejorar el rendimiento.

En un entorno donde el comercio electrónico sigue creciendo a un ritmo

acelerado, contar con un sistema bien estructurado y seguro es clave para brindar una

mejor experiencia al usuario final y garantizar la competitividad del negocio.

Bibliografía

Páez Cordero, B. A. (2023). Sistema de gestión de pedidos para tiendas virtuales

utilizando tecnologías web. Escuela Politécnica Nacional. Recuperado de
[Link]
 PROGRAMA INGENIERIA DE SISTEMAS
P á g i n a 82 | 82
Bassil, Y. (2012). A simulation model for the waterfall software development life cycle.
Procedia Computer Science, 10, 383–388. Recuperado de
[Link]

[Link] Foundation. (s.f.). About [Link]. Recuperado de [Link]

[Link] Foundation. (s.f.). Express - [Link] web application framework.

Recuperado de [Link]

Oracle Corporation. (s.f.). MySQL: The world's most popular open source database.
Recuperado de [Link]

Auth0. (s.f.). Auth0 Documentation. Recuperado de [Link]

Postman, Inc. (s.f.). Postman API Platform. Recuperado de [Link]

npm, Inc. (s.f.). bcrypt documentation. Recuperado de

[Link]