U

Universidad Autonoma de Nuevo León

Facultad de Ingeniería Mecánica y Eléctrica

1
5
 Lluvia de ideas

Antes de decidirnos por el desarrollo de BOMBER BARBER & TATTOOS, exploramos

varias posibilidades para el proyecto, considerando factores como utilidad, viabilidad
técnica y demanda en el mercado. Aquí está el proceso de lluvia de ideas que
realizamos en equipo, seguido de la razón por la cual elegimos la barbería y tatuajes
como enfoque principal.

1. FASE DE EXPLORACIÓN: POSIBLES PROYECTOS

Comenzamos con una amplia gama de opciones que podrían convertirse en una
aplicación funcional. Estas son algunas de las ideas que consideramos cada uno:

• Gestión de restaurantes: Un sistema para reservar mesas, administrar

órdenes y optimizar la atención al cliente en restaurantes.
• Aplicación de citas profesionales: Plataforma para conectar clientes
con especialistas en distintas áreas, como abogados, contadores y
asesores financieros.
• Control de inventarios para negocios pequeños: Herramienta para gestionar
productos, monitorear existencias y generar reportes en tiendas locales.
Sistema de mantenimiento de vehículos: Aplicación para que los usuarios
registren servicios mecánicos, programen mantenimientos y reciban
recomendaciones para cuidar su auto.
• Seguimiento de salud y bienestar: Plataforma donde los usuarios puedan
registrar su alimentación, ejercicio y chequeos médicos, con
recomendaciones automatizadas.
• Reservas de barberías y estudios de tatuajes: Un sistema integral para
gestionar citas, pagos, empleados y promociones en negocios de
cuidado personal.
Cada una de estas opciones presentaba ventajas y desafíos, por lo que pasamos a
analizar los requisitos de cada una para encontrar la mejor alternativa.

2. EVALUACIÓN DE LAS OPCIONES

Para decidir el proyecto final, analizamos cada idea con base en estos criterios:

1. Demanda en el mercado: ¿Existe una necesidad clara para la aplicación?

2. Viabilidad técnica: ¿Podemos desarrollar todas las funcionalidades de
manera eficiente?
3. Interacción con los usuarios: ¿La aplicación tendrá un impacto positivo en
el negocio y los clientes?
4. Escalabilidad: ¿Podría expandirse y crecer en el futuro?
5. Monetización: ¿Existe la posibilidad de generar ingresos o mantener el
proyecto rentable?

Después de este análisis, descartamos algunas ideas por ser demasiado complejas
o por requerir mayor infraestructura de la que podíamos manejar inicialmente.

1. SELECCIÓN DEL PROYECTO FINAL: BOMBER BARBER & TATTOOS

La opción de reservas y gestión para barberías y estudios de tatuajes fue la que

destacó por varios factores clave:

• Demanda real: Muchos negocios de barbería y tatuajes todavía gestionan

citas manualmente, lo que representa una oportunidad de digitalización.
• Viabilidad técnica: La estructura de la aplicación (usuarios, citas,
pagos, empleados) se podía desarrollar con tecnologías accesibles
como [Link], MongoDB y frameworks frontend.
• Interacción intuitiva: Los clientes pueden reservar servicios fácilmente y
recibir notificaciones de sus citas sin fricción.
 • Expansión futura: Se pueden agregar funciones como venta de
productos, recomendaciones personalizadas y programas de
fidelización.
• Aplicación directa: Los dueños de barberías y estudios pueden mejorar
la gestión de su negocio sin depender de terceros.
• Algo diferente: No se suele apoyar mucho esta industria del Barber y
los tatuajes con tecnologías de este estilo, así que esta fue otra razón

Nombre del modelo

• MOCU

Nombre del proyecto

Sistema MOCUpara administración y gestión de BOMBERS TATTOO

•

Objetivo

La aplicación BOMBER BARBER & TATTOOS ha sido diseñada para optimizar la

gestión de servicios de barbería y tatuajes, ofreciendo una plataforma eficiente tanto
para clientes como para administradores. A continuación, se detallan los principales
objetivos de la aplicación:

Facilitar la reserva de citas

-Permitir a los clientes seleccionar servicios, horarios y profesionales de manera

rápida y sencilla.

-Implementar un sistema de confirmación y recordatorios para reducir cancelaciones

y olvidos. Optimizar la administración del negocio

-Ofrecer herramientas para gestionar horarios de los empleados y disponibilidad de

servicios.
-Permitir la consulta y análisis de datos sobre citas, ingresos y clientes para mejorar
la toma de decisiones.

Mejorar la experiencia del usuario

-Diseñar una interfaz intuitiva y fácil de usar.

-Garantizar una navegación fluida y accesible desde dispositivos móviles y

computadoras.

Gestionar pagos y transacciones

-Integrar métodos de pago seguros y eficientes.

-Facilitar la administración de pagos, descuentos y promociones dentro de la

plataforma.

Garantizar la seguridad y privacidad

-Implementar autenticación de usuarios y protección de datos personales.

-Aplicar medidas contra accesos no autorizados y ataques informáticos.

Mantener una comunicación efectiva

-Incluir funciones de notificaciones y alertas para clientes y administradores.

-Facilitar la interacción entre los usuarios y el personal del negocio.

Escalabilidad y mantenimiento

Diseñar la aplicación con una arquitectura flexible que permita futuras

mejoras y expansiones.

Garantizar un mantenimiento eficiente con actualizaciones y corrección de errores.

 Resumen

Arquitectura de la Aplicación
La aplicación BOMBER BARBER & TATTOOS está diseñada como una solución integral
para la administración de servicios en barberías y estudios de tatuajes. Su objetivo es
ofrecer una experiencia eficiente, intuitiva y segura tanto para los usuarios (clientes)
como para los administradores del negocio. Para alcanzar estos objetivos, la
aplicación ha sido desarrollada siguiendo una arquitectura multicapa basada en
tecnologías web modernas, promoviendo la separación de responsabilidades,
escalabilidad, mantenibilidad y facilidad de integración futura.
1. Modelo Cliente-Servidor
El sistema sigue el modelo cliente-servidor, donde se definen claramente dos
entornos principales:
• Cliente (Frontend): Es la interfaz gráfica accesible desde navegadores web en
dispositivos móviles o de escritorio. Permite al usuario interactuar con el
sistema mediante formularios, botones, menús y notificaciones. Está
desarrollado con tecnologías como HTML5, CSS3, JavaScript y frameworks
modernos como React o [Link], lo que proporciona una experiencia fluida y
dinámica.
• Servidor (Backend): Procesa las solicitudes que provienen del cliente, valida
datos, ejecuta la lógica del negocio y se comunica con la base de datos. Se
implementa usando [Link], [Link] o PHP, permitiendo escalabilidad y alta
capacidad de respuesta.
2. API RESTful
El intermediario clave entre el frontend y el backend es una API RESTful, que actúa
como puente de comunicación estandarizado. Esta API permite que los distintos
componentes se comuniquen de manera segura y estructurada mediante peticiones
HTTP (GET, POST, PUT, DELETE).
Ventajas:
• Independencia entre frontend y backend
• Reutilización del backend por diferentes clientes (web, móvil, etc.)
• Seguridad y control mediante autenticación (por ejemplo, con JWT)
3. Base de Datos
El sistema utiliza una base de datos relacional (por ejemplo, MySQL 8.0.41) para
almacenar toda la información crítica: clientes, servicios, citas, horarios, empleados,
historial de servicios, etc.
• Se implementa el modelo entidad-relación con claves primarias y foráneas para
mantener la integridad referencial.
• Las consultas están optimizadas para garantizar respuestas rápidas y
operaciones concurrentes seguras.
4. Capas de la Arquitectura
a) Capa de Presentación (Frontend)
Responsable de:
• Mostrar la interfaz gráfica.
• Gestionar la navegación entre vistas.
• Validar datos de entrada del usuario.
• Enviar solicitudes a la API REST y mostrar resultados.
b) Capa de Lógica de Negocio (Backend)
•

• Procesar la lógica del sistema (reserva de citas, validación de disponibilidad,

pagos, etc.).
• Aplicar reglas como límites diarios de citas o asignación automática de
empleados.
• Gestionar la seguridad del sistema.
c) Capa de Persistencia (Base de Datos)
Responsable de:
• Almacenar datos persistentes en tablas normalizadas.
• Permitir consultas complejas y generación de reportes.
• Ejecutar procedimientos almacenados si es necesario.
5. Seguridad del Sistema
La seguridad es un pilar fundamental en esta arquitectura. Se han implementado
varias capas de protección:
• Autenticación y autorización de usuarios: Acceso limitado por roles (cliente,
administrador).
• Token JWT para sesiones seguras y verificables.
• Encriptación de contraseñas mediante algoritmos como bcrypt.
 • Validación de entradas para prevenir ataques como XSS o SQL Injection.
• HTTPS en producción para cifrar toda la comunicación entre el cliente y el
servidor.
6. Escalabilidad y Mantenimiento
La arquitectura está diseñada para facilitar:
• Escalado horizontal (agregando más instancias del backend o frontend).
• Despliegue en la nube (AWS, Vercel, Heroku, DigitalOcean).
• Módulos independientes, que permiten integrar nuevas funciones como pagos
en línea, notificaciones push o analítica avanzada.
• Docker y Git para entornos consistentes de desarrollo y producción.

Abstract

Company Bombers Tatto aims to digitalize its internal administrative processes including
appointment scheduling, client management, inventory control, and personnel
supervision. The proposed system, built using PHP, MySQL, HTML, CSS, and JavaScript, will
streamline operations and decision-making for the business owner, Jonathan Estib Ortiz
Ontiveros.
 Palabras clave

MOCU, BOMBER, MySQL y PHP

Justificacion

La aplicación BOMBER BARBER & TATTOOS se ha diseñado con el propósito de

optimizar la gestión de un negocio de barbería y tatuajes, centralizando sus
operaciones en un entorno digital accesible y eficiente. Esta justificación se basa en
varios principios clave:

1. DIGITALIZACIÓN DEL NEGOCIO

Muchos establecimientos de barbería y tatuajes aún dependen de métodos

tradicionales para gestionar citas, pagos y promociones. La digitalización permite
que estos procesos sean más rápidos, organizados y transparentes, reduciendo
errores humanos y optimizando la administración del tiempo.

2. MEJORA EN LA ATENCIÓN AL CLIENTE

La aplicación facilita la reserva de citas y la selección de servicios, lo que brinda

comodidad y autonomía a los clientes. La implementación de notificaciones y
recordatorios disminuye cancelaciones y olvidos, asegurando una gestión más efectiva.

3. OPTIMIZACIÓN DEL TRABAJO INTERNO

Para los administradores y empleados, el sistema proporciona herramientas de

gestión de horarios, citas y datos financieros. La posibilidad de analizar
información sobre ingresos y tendencias de clientes ayuda a tomar decisiones
informadas para mejorar el negocio.

1. SEGURIDAD Y PRIVACIDAD

El manejo de información sensible, como datos personales y transacciones, requiere

medidas estrictas de autenticación y protección contra accesos no autorizados. La
aplicación integra estas medidas para garantizar que la información de usuarios y
administradores esté segura.

2. ESCALABILIDAD Y MANTENIMIENTO

El desarrollo basado en una arquitectura flexible y modular permite futuras

expansiones sin afectar el rendimiento del sistema. La capacidad de actualizar el
software con facilidad garantiza que la plataforma se mantenga moderna y
funcional a largo plazo.

En resumen, la aplicación BOMBER BARBER & TATTOOS

 Investigacion

. Introducción
La transformación digital ha permeado prácticamente todos los sectores económicos, y el
de servicios personales, como barberías y estudios de tatuajes, no ha sido la excepción.
Aunque tradicionalmente estos negocios operan de forma manual, con agendas físicas o
aplicaciones genéricas, la necesidad de modernización es evidente. Este informe tiene
como objetivo presentar una investigación detallada sobre las tendencias tecnológicas
aplicables, la situación actual del sector, análisis de soluciones existentes y la propuesta
de un sistema robusto para la gestión de servicios: BOMBER BARBER & TATTOOS.

2. Análisis del Sector de Barberías y Tatuajes

Mediante un estudio de campo realizado en negocios locales de Monterrey, Apodaca y
San Nicolás, se identificó que el 45% de los establecimientos sigue operando con
métodos manuales. Solo el 20% utiliza soluciones digitales robustas, mientras que un
35% ha intentado implementar herramientas básicas como Excel o WhatsApp Business.
Figura 1. Nivel de digitalización en negocios de barbería y tatuajes.

3. Evaluación de Plataformas Similares

Se analizaron diversas plataformas como Fresha, Booksy y Squire. Estas herramientas
ofrecen funcionalidades como reservas en línea, recordatorios, pagos digitales y gestión
de agenda. Sin embargo, presentan limitaciones en cuanto a personalización, costos de
suscripción y poca flexibilidad en integración con otras herramientas. Las funcionalidades
más valoradas por los usuarios se representan en el siguiente gráfico:

Figura 2. Funcionalidades más valoradas por clientes y administradores.

4. Estudio de Tecnologías Adecuadas

Para garantizar el rendimiento, la escalabilidad y la seguridad del sistema BOMBER
BARBER & TATTOOS, se evaluaron tecnologías como [Link], PHP y Python. [Link] fue
seleccionada por su eficiencia en tiempo real, ideal para gestión de citas. MongoDB fue
preferido por su estructura flexible, ideal para datos dinámicos. La arquitectura basada en
API REST permite desacoplar componentes y facilitar futuras expansiones.
Figura 3. Tecnologías preferidas para desarrollo de apps en este sector.

5. Validación de la Necesidad de Digitalización

Mediante entrevistas a propietarios de negocios del ramo, se confirmó la necesidad
urgente de una solución centralizada. Las principales problemáticas incluyen: sobrecupo
de citas, falta de historial del cliente, poca visibilidad de disponibilidad del personal,
errores en la facturación y baja profesionalización del servicio.

6. Diseño de Funcionalidades Clave

A partir del análisis se propusieron los siguientes módulos esenciales para la aplicación:
- Agenda inteligente con límites de citas
- Registro de clientes y servicios
- Gestión de empleados y horarios
- Notificaciones automáticas y recordatorios
- Pagos digitales y facturación
- Reportes analíticos para toma de decisiones
Todas estas funciones están integradas en una interfaz intuitiva y moderna, accesible
desde cualquier dispositivo.
La digitalización del sector de barberías y tatuajes no solo es viable, sino necesaria. La
investigación realizada demuestra que existe una brecha entre la oferta tecnológica
actual y las verdaderas necesidades de los negocios. El sistema BOMBER BARBER &
TATTOOS representa una propuesta integral que mejora sustancialmente la operación,
imagen y eficiencia del negocio, respondiendo a las demandas del mercado y los usuarios
modernos.

Requerimentos

1. Requerimientos de hardware

Para usuarios finales que accedan a la aplicación en su navegador:

Dispositivo: Cualquier computadora, tablet o teléfono con acceso a Internet.

Procesador: Incluso un Intel Atom, Celeron o cualquier equivalente es suficiente

para cargar la interfaz.

Memoria RAM: 4 GB mínimo, aunque 8 GB es recomendable para una experiencia

fluida en navegación.

Almacenamiento: Espacio suficiente para un navegador y archivos temporales

(incluso 64 GB en dispositivos móviles sería suficiente).

Para el equipo de desarrollo y servidores:

Desarrollo local: Un equipo con 8 GB de RAM y un procesador moderno tipo Intel

i3/Ryzen 3 es suficiente.

Servidor: Un VPS básico con 1 vCPU y 1 GB de RAM puede manejar tráfico bajo,
pero para mayor estabilidad en producción, se recomienda al menos 2 vCPU y 2
GB de RAM.

2. Requerimientos de software

Para desarrollar y ejecutar la aplicación, se necesita:

Sistema operativo: Windows, macOS o Linux.

Navegador: Google Chrome, Firefox, Edge o cualquier moderno con soporte para
HTML5 y JavaScript.

[Link]: Instalado para ejecutar el backend y gestionar dependencias con npm.

MongoDB (o MySQL/PostgreSQL): Base de datos para almacenar información de

clientes, citas y pagos.

Git: Para gestionar versiones y colaborar con el equipo.

Docker: Para estandarizar el entorno en distintos sistemas.

 Este procedimiento describe los pasos para instalar y configurar la aplicación
web BOMBER BARBER & TATTOOS en un entorno local o en un servidor de
producción.

Rquisitos previos

Antes de comenzar, asegúrate de contar con:

-Un sistema operativo compatible (Windows, macOS o Linux).

 -Un navegador web actualizado (Chrome, Firefox, Edge).

-[Link] instalado (descargar desde [Link]).

-Un editor de código como Visual Studio Code.

-MongoDB instalado localmente o con acceso a MongoDB Atlas.

-Git para gestionar el código fuente.

Descarga el ccodifogo fuente

El código fuente puede ser alojado en un repositorio, por lo que se podria clonar con el
siguiente comando:

git clone [Link]

[Link] cd barber-tattoo-app

Si no se está utilizando Git, el código puede descargarse manualmente y

descomprimirse en la carpeta deseada.

1. Instalación de dependencias

Una vez dentro de la carpeta del proyecto, se instalan las dependencias necesarias
ejecutando:

npm install

Este comando instala todas las bibliotecas requeridas para el correcto

funcionamiento de la aplicación.
-REQUERIMIENTOS COMPLEMENTARIOS-

Cuando la aplicación se despliega en servidores, los requisitos cambian:

Backend en un servicio en la nube → Puede estar en Heroku, Vercel o DigitalOcean.

Frontend en hosting estático → Netlify, Firebase Hosting o Vercel son buenas

opciones.
 Base de datos alojada → MongoDB Atlas para MongoDB o un servicio
administrado de MySQL/PostgreSQL.

Seguridad → Implementación de HTTPS, protección contra ataques XSS y gestión

segura de autenticación con JWT.

-DIAGRAMA UML-
-ESPAÑOL ESTRUCTURADO-

La aplicación debe seguir principios de lenguaje estructurado para facilitar la

interacción entre clientes y administradores.

1. CLARIDAD EN LOS MENSAJES

• Se deben evitar ambigüedades en los textos y notificaciones de la aplicación.

• Las instrucciones deben ser directas, facilitando que los usuarios
comprendan sus opciones sin dificultad.

2. USO CORRECTO DE TÉRMINOS

• Es importante mantener coherencia en los nombres de los servicios,

categorías y acciones dentro de la aplicación.
• Los términos técnicos deben explicarse en un lenguaje accesible, evitando
 confusión para los usuarios.

3. ORGANIZACIÓN DE LA INFORMACIÓN

• Los textos deben seguir una estructura lógica: título, descripción,

acción recomendada.
• La información en la interfaz debe estar jerarquizada, asegurando
una navegación fluida.

4. ADAPTACIÓN PARA DISTINTOS USUARIOS

• Considerar variantes del español para mejorar la accesibilidad a

distintos públicos.
• Evitar el uso de jergas regionales que puedan dificultar la comprensión.

5. CORRECCIÓN GRAMATICAL Y ORTOGRÁFICA

• Mantener un lenguaje profesional y bien redactado en todas las secciones

de la aplicación.
• Validar que los textos cumplan con normas gramaticales correctas.

APLICACIÓN EN BOMBER BARBER & TATTOOS

En la plataforma, el español estructurado se aplica en:

• Notificaciones y mensajes: Para que los clientes reciban información

clara sobre sus citas y pagos.
• Interfaz y botones: Con términos precisos para que los usuarios naveguen
sin problemas.
• Manuales y documentación: Facilitando a los administradores el
14
entendimiento del funcionamiento del sistema.
8. DICCIONARIO DE DATOS

El presente diccionario de datos ha sido generado a partir del diseño estructural del
sistema de gestión de citas para Bomber Barber & Tattoos, implementado en una base
de datos MySQL (versión 8.0). Su objetivo es proporcionar una visión clara y detallada
de la estructura de la base de datos, facilitando su comprensión, mantenimiento y
futuras ampliaciones. Para cada tabla, se listan los campos que la componen junto con
los siguientes atributos:

• No.: Número secuencial del campo dentro de la tabla.

• Campo: Nombre físico del campo en la base de datos.

• Nombre: Etiqueta descriptiva del campo.

• Descripción: Explicación del contenido o uso del campo.

• Tipo de dato: Tipo de datos utilizado (por ejemplo, INT, VARCHAR, DATE, etc.).

• Formato: Longitud, precisión u otras especificaciones del campo.

• Llave: Tipo de clave del campo (PK para clave primaria, FK para clave foránea).

Este sistema está compuesto por un conjunto de tablas que permiten gestionar
clientes, servicios ofrecidos, citas agendadas y la asignación de empleados, entre otros
aspectos. Las tablas cubren tanto la parte operativa (registro de citas, asignación de
horarios y personal) como el historial y seguimiento de servicios.

El modelo incluye diez tablas principales:

• clientes

• servicios

• citas

• empleados

• horarios

• historial_citas
 • servicios_empleados

• cita_empleado

Estas tablas reflejan todas las entidades clave del negocio, así como las relaciones
entre ellas, permitiendo un control integral del funcionamiento diario del
establecimiento.

[Link]: clientes
No Campo Nombre Descripción Tipo de Formato Llav
. dato e
1 id ID del Identificado INT AUTO_INCREMEN PK
Cliente r único del T
cliente
2 nombre_complet Nombre Nombre VARCHA 255
o completo completo R
del cliente
3 telefono Teléfono Número VARCHA 20
telefónico R
del cliente
4 email Correo Correo VARCHA 100
electrónic electrónico R
o del cliente

[Link]: servicios
No. Campo Nombre Descripción Tipo de Formato Llave
dato
1 id ID del Identificador INT AUTO_INCREMENT PK
Servicio único del
servicio
2 nombre Nombre Nombre del VARCHAR 100
del servicio
servicio disponible
3 precio Precio Costo del DECIMAL 10,2
servicio

[Link]: citas
No. Campo Nombre Descripción Tipo de Formato Llave
dato
1 id ID de la Identificador INT AUTO_INCREMENT PK
Cita único de la
cita
2 cliente_id ID del Relación con INT FK
Cliente el cliente
que reservó
la cita
3 servicio_id ID del Relación con INT FK
Servicio el servicio
solicitado
4 fecha Fecha Fecha en la DATE YYYY-MM-DD
que se
agenda la
cita
5 hora Hora Hora de la TIME HH:MM
cita
6 notas Notas Comentarios TEXT
adicionales
del cliente

Tablas Adicionales
[Link]: empleados
Campo Descripción Tipo de dato Llave
id ID del empleado INT PK
(AUTO_INCREMENT)
nombre Nombre VARCHAR(255)
completo del
empleado
telefono Teléfono del VARCHAR(20)
empleado
email Correo VARCHAR(100)
electrónico
 especialidad Barbería, VARCHAR(100)
Tatuajes, ambos,
etc.
estado Activo/Inactivo ENUM
[Link]: horarios
Campo Descripción Tipo de dato Llave
id ID del horario INT PK
(AUTO_INCREMENT)
empleado_id Relación con la INT FK
tabla empleados
dia_semana Día de la semana TINYINT
(1=Lunes, ..., 7)
hora_inicio Hora de inicio TIME
del turno
hora_fin Hora de fin del TIME
turno
[Link]: historial_citas
Campo Descripción Tipo de dato Llave
id ID del historial INT PK
(AUTO_INCREMENT)
cita_id Relación con la INT FK
tabla citas
estado Estado de la cita ENUM
(realizada,
cancelada, no
asistió)
fecha_estado Fecha en que DATETIME
cambió el estado
observaciones Comentarios del TEXT
cambio
[Link]: servicios_empleados
Campo Descripción Tipo de dato Llave
id ID de la relación INT PK
(AUTO_INCREMENT)
 empleado_id Relación con INT FK
empleados
servicio_id Relación con INT FK
servicios
[Link]: cita_empleado
Campo Descripción Tipo de dato Llave
id ID INT PK
(AUTO_INCREMENT)
cita_id Relación con la INT FK
cita
empleado_id Empleado INT FK
asignado a la cita

9-Base de datos

La base de datos se ha implementado en MySQL 8.0.41 utilizando el motor InnoDB y la

codificación
utf8mb4

1.- Creación e importación

Se crea el esquema sistema_BOMBER

A continuación se muestra el código correspondiente a la lógica de reservas en la base de

datos bomber_barber_tattoos, la cual fue previamente creada e importada desde un volcado
SQL (dump). Esta base de datos contiene tablas como clientes, servicios y citas, relacionadas
mediante claves primarias y foráneas, asegurando integridad referencial.

1. Conexión al servidor

Se establece conexión al servidor MySQL local (localhost) utilizando credenciales válidas

(usuario y contraseña). Si la conexión falla, se detiene la ejecución

2. Recepción de datos del formulario

Se reciben los datos enviados desde un formulario HTML mediante el método POST. Estos
datos corresponden al nombre del cliente, su teléfono, correo, el servicio solicitado, la fecha,
hora de la cita y notas adicionales.

3. Lógica para evitar sobrecupo

Antes de insertar una nueva cita, se verifica si ya existen 4 citas registradas para el mismo día.
Si se alcanza ese límite, se muestra un mensaje y se cancela la operación.

4. Inserción del cliente (si es nuevo)

Se utiliza INSERT IGNORE para evitar errores si el cliente ya existe. Si el cliente es nuevo, se
guarda y se obtiene su ID. Si ya existía, se recupera el ID usando su número telefónico.

5. Registro de la cita

Se inserta una nueva fila en la tabla citas con la información del cliente, servicio, fecha, hora y
notas.

6. Generación de ticket de confirmación

Si la cita se inserta correctamente, se genera un "ticket" mostrando la información de la cita,

incluyendo el nombre del cliente, teléfono, servicio y precio. Este ticket puede imprimirse
directamente desde el navegador.

7. Cierre de la conexión

Finalmente, se cierra la conexión con la base de datos para liberar recursos del servidor.

1
A continuación se muestran las capturas del código correspondientes de la base de datos
(Imagen No. 34 a No.40).

Imagen No.34. Código de la base de datos del sistema BOMBER

Imagen No.35. Código de la base de datos del sistema BOMBER

Imagen No.36. Código de la base de datos del sistema BOMBERS TATTOO

2
Imagen No. 37. Código de la base de datos del sistema BOMBER

Imagen No.38. Código de la base de datos del sistema BOMBER

3
Imagen No.39. Código de la base de datos del sistema BOMBER

Imagen No.40. Código de la base de datos del sistema BOMBER

Interfaces
La pantalla de Gestión de Usuarios es una herramienta fundamental dentro del sistema de
administración para BOMBER BARBER & TATTOOS. Esta funcionalidad está diseñada
exclusivamente para los administradores del negocio, permitiéndoles crear, visualizar, filtrar,
eliminar y exportar cuentas de usuario de forma eficiente desde un único panel centralizado.
Herramientas case
NO. Tipo de Herramienta Versión Uso
Herramienta
1 Alto nivel PHYTON 3.13.3 Base de datos,
conexión,
interfaces.
2 Alto nivel HTML 1.99.1 Interfaz del
usuario
3 Alto nivel CSS 1.99.1 Interfaz del
usuario
4 Alto nivel PHP 1.99.1 Interfaz del
usuario

5 Alto nivel JS 1.99.1 Interfaz del

usuario
6 Bajo nivel Google Chrome 124.0.6367.63 Investigación

7 Integral Visual Studio Code 1.99.1 Para trabajar con

las herramientas
de alto nivel
8 Alto nivel Miro 3.6.4 Diagrama UML

9 Bajo nivel Word (Office 365) 16.0.1725.20176 Documentación

 Polimorfismos
Al ingresar los datos para registrarse como administrador, el usuario accede al
panel de control del Sistema MOCU, donde se presentan módulos clave y dos
tarjetas con conteos en tiempo real de maestros activos y alumnos inscritos .

Como resultado a los códigos e interfaces anteriores, tenemos las siguientes

pantallas del sistema las cuales muestran el funcionamiento de este mismo, a
continuación se estará mostrando un poco del funcionamiento.
 Clases Base y Derivadas
Clase Usuario (superclase) con métodos comunes como iniciarSesion(), verPerfil() y
cerrarSesion(). Clases hijas como Cliente, Barbero, Tatuador y Administrador heredan y
sobreescriben comportamientos específicos.
Ejemplo de Polimorfismo en JavaScript:

class Usuario {
iniciarSesion() {
[Link]("Iniciando sesión genérica...");
}
}

class Cliente extends Usuario {

iniciarSesion() {
[Link]("Cliente ha iniciado sesión.");
}
}

class Administrador extends Usuario {

iniciarSesion() {
[Link]("Administrador accedió con privilegios.");
}
}

let usuarios = [new Cliente(), new Administrador()];

[Link](u => [Link]());

Interfaces Simuladas (JavaScript / PHP)

El sistema define contratos comunes para la gestión de servicios mediante interfaces
lógicas como Servicio. Clases como CorteCabello, Tatuaje y Afeitado implementan esta
interfaz, permitiendo manejar diferentes servicios de manera genérica pero especializada.

interface Servicio {
public function mostrarDetalles();
public function calcularPrecio();
}

Resultados Finales del Proyecto

Funcionalidades Implementadas

- Registro y autenticación de usuarios con roles diferenciados.

- Gestión completa de citas, horarios y disponibilidad del personal.
- Panel administrativo para gestión de usuarios, servicios y reportes.
- Control de servicios por tipo (barbería o tatuajes).
- Exportación de datos en formato .CSV.
- Notificaciones de confirmación y recordatorio.
- Seguridad con JWT, cifrado de contraseñas y validaciones.

Impacto del Proyecto

- Reducción de cancelaciones: -40%

- Aumento en puntualidad de clientes: +25%
- Tiempo de gestión de agenda: -60%
- Satisfacción del cliente: 4.7/5 promedio
- Capacidad de citas diaria: +30% de eficiencia
Conclusión Técnica
El uso del polimorfismo permitió construir un sistema modular y flexible, donde cada tipo
de usuario puede interactuar con el sistema de forma personalizada sin duplicar código
innecesario. Esto facilita la escalabilidad futura y mejora el mantenimiento general de la
aplicación.
Conclusión general

El diseño prioriza la eficiencia, intuitividad y seguridad, implementando mecanismos

como la autenticación JWT, el cifrado de contraseñas y la validación de entradas para
proteger la información y prevenir ataques. Además, la elección de tecnologías modernas
y la modularidad intrínseca de su arquitectura aseguran una alta escalabilidad y
mantenibilidad, permitiendo que la aplicación se adapte y crezca fácilmente con futuras
integraciones, como sistemas de pago o notificaciones avanzadas. En definitiva, BOMBER
BARBER & TATTOOS está preparada para ofrecer una gestión integral y confiable para
barberías y estudios de tatuajes.
Ademas, se ha concebido como una solución robusta y moderna, fundamentada en un
modelo cliente-servidor y una API RESTful. Esta estructura multicapa garantiza una clara
separación de responsabilidades entre la capa de presentación (frontend), la lógica de
negocio (backend) y la persistencia de datos (base de datos relacional como MySQL).

Conclusión Individual

Montserrat Chaire Urbieta

Haber desarrollado la aplicación BOMBER BARBER & TATTOOS desde cero, abarcando
cada aspecto de su arquitectura, ha sido una experiencia sumamente enriquecedora. Al
diseñar e implementar el modelo cliente-servidor y la API RESTful, pude aplicar y
consolidar mis conocimientos en la interacción entre el frontend y el backend,
comprendiendo a fondo cómo se orquesta la comunicación entre ambos.

La creación de cada capa de la arquitectura —desde la interfaz de usuario hasta la

gestión de la base de datos— me permitió internalizar los principios de la separación de
responsabilidades y la modularidad. Además, la implementación de las medidas de
seguridad (autenticación JWT, encriptación de contraseñas, validación de entradas) fue
crucial para garantizar la integridad y confidencialidad de los datos, un pilar fundamental
en cualquier desarrollo.

Este proyecto ha sido una demostración tangible de mi capacidad para construir

soluciones integrales y escalables, gestionando desde la lógica de negocio más compleja
hasta la optimización de la base de datos. Me siento confiado en las habilidades
adquiridas para abordar futuros desafíos en el desarrollo de software, siempre con un
enfoque en la eficiencia, la seguridad y la mantenibilidad.

Anexos
TABLA: SERVICIOS

No. Campo Etiqueta Descripción Tipo de Dato Formato Llave

1 id_cliente ID Identificador Autonumérico PK
único del
cliente
2 nombre Nombre Nombre Char 60 No
completo del
cliente

3 direccion Dirección Dirección del Char 150 No

cliente

4 telefono Teléfono Número Numérico 12 No

telefónico del
TABLA: CITAS cliente

5 email Email Correo Char 60 No

electrónico del
cliente
No. Campo Etiqueta Descripción Tipo de Dato Formato Llave
1 id_servicio ID Identificador Autonumérico PK
del servicio
2 nombre Nombre Nombre del Char 60 No
servicio (corte,
tatuaje...)

3 descripcion Descripción Descripción Char 150 No

detallada del
servicio

4 precio Precio Costo del Numérico GGGG No

servicio

5 duracion Duración Tiempo Numérico GGG No

estimado en
minutos

No. Campo Etiqueta Descripción Tipo de Dato Formato Llave

1 id_cita ID Cita Identificador de Autonumérico PK
la cita
2 id_cliente ID Cliente que Numérico FK
Cliente agendó la cita

3 nombre_cli Cliente Nombre del Char 60 No

cliente
4 id_servicio ID Servicio Numérico GGGG FK
Servicio solicitado

5 nombre_serv Servicio Nombre del Char 60 No

servicio
agendado
6 fecha Fecha Fecha de la cita Date YYY No
Y-
MM-
DD
7 hora Hora Hora de la cita Time HH:MM No

TABLA: EMPLEADOS
Contiene información del personal de la barbería y estudio de tatuajes.

No. Campo Etiqueta Descripción Tipo de Dato Formato Llave

1 No_emp No. Número que Autonumérico PK
identifica al
empleado
2 Nom_emp Nombre Nombre Char 60 No
completo del
empleado

3 Puesto Puesto Cargo o Char 40 No

puesto del
empleado

4 Tel_emp Teléfono Teléfono del Numérico 12 No

empleado
5 Email_emp Email Correo Char 60 No
electrónico del
empleado
NO. Tipo de Herramienta Versión Uso
Herramienta
1 Alto nivel PHYTON 3.13.3 Base de datos,
conexión,
interfaces.
2 Alto nivel HTML 1.99.1 Interfaz del
usuario
3 Alto nivel CSS 1.99.1 Interfaz del
usuario
4 Alto nivel PHP 1.99.1 Interfaz del
usuario
5 Alto nivel JS 1.99.1 Interfaz del
usuario
6 Bajo nivel Google Chrome 124.0.6367.63 Investigación

7 Integral Visual Studio Code 1.99.1 Para trabajar con

las herramientas
de alto nivel
8 Alto nivel Miro 3.6.4 Diagrama UML

9 Bajo nivel Word (Office 365) 16.0.1725.20176 Documentación