1
Productos de aseo
Biomundial Calico SAS
Pablo Collazos, Steven Arana, Jhan Cueva
Talento TECH
Desarrollo Web Full Stack
Noviembre 19, 2024
2
Tabla de Contenido
I. Introducción. ......................................................................................................................................... 3
II. Objetivo general.................................................................................................................................... 4
2.2. Objetivos específicos .................................................................................................................... 4
III. Requisitos del proyecto .................................................................................................................... 5
3.2. Requisitos Funcionales. ................................................................................................................. 5
3.3. Requisitos No Funcionales. ........................................................................................................... 6
IV. Herramientas y tecnologías .............................................................................................................. 8
V. Diagrama de flujo .................................................................................................................................. 9
VI. MOCKUPS ........................................................................................................................................ 10
3
I. Introducción.
Biomundial calico SAS es una empresa dedicada a la venta de productos de aseo, la
necesidad de las empresas por llevar un control más exacto de los gastos en productos de
mantenimiento y aseo nos han hechos merecedores de su confianza a la hora de adquirir productos
de primera calidad y justificando con su respectiva facturación a los productos adquiridos;
oportuno a esto, queremos lograr que nuestros productos se extiendan más allá, del área comercial
regular en que nos ubicamos, ya que hemos demostrado ser una marca sólida y fuerte digna de la
confianza de nuestros clientes con capacidad de llegar a varias ciudades de nuestro país. Es por
eso que hemos implementado la aplicación web Biomundial calico SAS, la cual les brindara
seguridad, confianza y una entrega cumplida de los productos que desean adquirir. Además, esto
nos permitirá llegar a mas lugares y mejorar nuestro portafolio de ventas de una manera
exponencial.
La aplicación web de Biomundial calico SAS usara tecnología de software segura, hasta
el momento las tecnologías implementadas son las siguientes: HTML, CSS, JavaScript, [Link],
Express, MySQL y demás tecnologías que se vayan implementando con base se vayan requiriendo
con forme a la necesidad.
4
II. Objetivo general
Desarrollar una aplicación web funcional y segura para Biomundial calico SAS, que
permita la gestión de usuarios a través de registro y autenticación, brindando una interfaz
interactiva y responsiva que se conecta con un backend basado en [Link] y Express, y una base
de datos MySQL para garantizar la persistencia de los datos.
[Link] específicos
Crear una experiencia de usuario eficiente:
o Diseñar una interfaz intuitiva para registro e inicio de sesión.
o Garantizar que los formularios sean interactivos y amigables.
Implementar seguridad en el manejo de datos:
o Encriptar las contraseñas de los usuarios para proteger sus datos.
o Validar las credenciales de los usuarios de manera segura durante el inicio
de sesión.
Gestionar los usuarios en una base de datos relacional:
o Almacenar la información de los usuarios en una base de datos MySQL.
o Verificar la existencia de usuarios únicos para evitar duplicados.
5
Conectar el frontend y el backend:
o Integrar el frontend de la aplicación con el backend a través de API REST.
o Manejar solicitudes y respuestas para registro e inicio de sesión de manera
eficiente.
Establecer una base escalable para futuras funcionalidades:
o Permitir la extensión de la funcionalidad, como la gestión de productos,
carrito de compras, y más, sobre la infraestructura existente.
III. Requisitos del proyecto
3.2. Requisitos Funcionales.
Gestión de Usuarios:
El sistema debe permitir el registro de usuarios con los siguientes datos obligatorios:
Nombre
Apellido
Correo electrónico único
Contraseña
El sistema debe validar que los campos requeridos estén completos antes de registrar al
usuario.
Las contraseñas deben ser encriptadas antes de almacenarse en la base de datos.
Autenticación de Usuarios:
6
El sistema debe permitir a los usuarios iniciar sesión utilizando:
Correo electrónico
Contraseña
El sistema debe validar las credenciales ingresadas contra los datos almacenados en la base
de datos.
En caso de credenciales incorrectas, el sistema debe mostrar un mensaje de error.
Frontend Interactivo:
La página debe incluir un formulario para:
Registro de nuevos usuarios.
Inicio de sesión de usuarios existentes.
Recuperación de contraseña
Los formularios deben mostrarse dentro de un modal interactivo.
El modal debe permitir alternar entre los formularios de registro e inicio de sesión.
API Backend:
El backend debe proporcionar las siguientes rutas:
o /api/register (POST): Registrar usuarios.
o /api/login (POST): Autenticar usuarios.
El backend debe manejar errores y responder con mensajes adecuados para el cliente.
[Link] No Funcionales.
Seguridad:
7
o Las contraseñas deben almacenarse encriptadas mediante bcrypt para
garantizar su seguridad.
o El sistema debe evitar ataques de inyección SQL mediante el uso de
consultas parametrizadas.
Eficiencia:
o El tiempo de respuesta del backend debe ser menor a 2 segundos para las
operaciones de registro e inicio de sesión.
Escalabilidad:
o La arquitectura del sistema debe ser modular para permitir la adición de
nuevas funcionalidades.
Compatibilidad:
o La página debe ser accesible desde navegadores modernos como Chrome,
Firefox, Edge y Safari.
o El diseño debe ser responsivo para adaptarse a dispositivos móviles,
tabletas y computadoras de escritorio.
Mantenibilidad:
o El código debe estar organizado en módulos:
Frontend: Scripts separados para manejar autenticación y
productos.
Backend: Uso de Express para rutas y MySQL para la base de
datos.
o El sistema debe incluir comentarios claros en el código para facilitar su
mantenimiento.
Base de Datos:
o La base de datos debe estar configurada para garantizar:
Integridad de los datos (correo único).
Capacidad de expansión para manejar nuevos requisitos.
8
IV. Herramientas y tecnologías
Frontend:
o HTML5
o CSS3
o JavaScript
Backend:
o [Link]
o Express
Base de Datos:
o MySQL
Librerías:
o Bcryptjs: para encriptación de contraseñas.
o mysql2: para la conexión con MySQL.
Herramientas de Desarrollo:
o Postman para pruebas de API.
o Visual Studio Code para desarrollo de código.
o MySQL Workbench para gestionar la base de datos.
9
V. Diagrama de flujo
Biomundial
CALI-CO S.A.S
Productos Quienes somos Contáctenos
Inicia sesión: Carrito compras:
- Regístrate -Ver pedido
-Rec. Contraseña -Pagar pedido
-Ver productos -Historia empresarial -Líneas de atención
-Aumentar productos -Misión -Ubicación
-Disminuir productos -Visión -Redes sociales
-Agregar al carrito
Pie de página:
-Líneas de atención
-Redes sociales
-Escríbenos una PQRS
-Enlace a Quienes somos
10
VI. MOCKUPS
IMAGEN 1
11
IMAGEN 2
12
IMAGEN 3
13
IMAGEN 4
14
IMAGEN 5
15
IMAGEN 6
16
IMAGEN 7
