Universidad Autónoma
de Nuevo León
Facultad de Ingeniería
Mecánica y Eléctrica
Automatización y control de sistemas dinámicos
Proyecto final
Cátedrática: Dra. Selene Guadalupe Pinal Gomez
Grupo: 002
Equipo 6
Matrícula Estudiante Programa Educativo Semestre
1950395 Daniel Isaac Mendoza Gutierrez ITS 7mo
2109524 Fátima Sofía Aranda Cruz ITS 7mo
2015012 Fernanda Abigail Castillo Morales ITS 7mo
2010184 Andrea Ximena Rivera Aceves ITS 7mo
1938316 Ricardo Hugo Pérez Mendoza ITS 8vo
1962915 Luis Andres Canto Barroso ITS 8vo
Calificación:
Día 04 del mes Noviembre del año 2024, San Nicolás de los Garza, Nuevo León
1
Índice
Nombre del proyecto: ......................................................................................................... 3
Resumen.............................................................................................................................. 3
Introducción ........................................................................................................................ 3
Justificación ........................................................................................................................ 3
Metodología ......................................................................................................................... 3
Resultados .......................................................................................................................... 4
Manual Técnico ................................................................................................................... 5
Requisitos de la aplicación ............................................................................................. 5
Requerimientos de Software .......................................................................................... 5
Herramientas empleadas en el desarrollo de la aplicación ............................................. 6
Instalación de aplicaciones ................................................................................................ 7
Código de las funciones de los botones ........................................................................... 7
Video del funcionamiento................................................................................................. 10
Conclusión ........................................................................................................................ 10
Bibliografías ...................................................................................................................... 11
2
Nombre del proyecto:
Inventario de Productos - Sistema de Gestión de Existencias
Resumen
El proyecto de automatización de inventarios tiene como objetivo optimizar la gestión
de productos en pequeñas y medianas empresas (PYMES) mediante un sistema que
facilita la gestión de stock, la relación con proveedores y la satisfacción del cliente. El
sistema incluye alertas automáticas de bajo inventario, sugerencias de
reabastecimiento y gestión en tiempo real. A través de una plataforma accesible y
escalable, permite una respuesta rápida ante la demanda del mercado y mejora la
eficiencia operativa. El sistema se integra con tecnologías modernas como React y
PostgreSQL, asegurando escalabilidad y seguridad.
Introducción
En un entorno empresarial altamente competitivo, la gestión eficiente del inventario es
crucial para la supervivencia y el éxito. Este proyecto busca mejorar los procesos de
gestión de inventarios en pequeñas y medianas empresas (PYMES) mediante un
sistema automatizado que no solo monitorea los niveles de inventario, sino que
también facilita la comunicación con proveedores y la gestión de ventas. La
automatización reduce los tiempos de inactividad debido a problemas de stock y
mejora la experiencia del cliente al garantizar la disponibilidad continua de productos.
Justificación
Este proyecto es esencial para mejorar la eficiencia operativa y satisfacer las
demandas del mercado actual. Al automatizar la gestión de inventarios y relaciones
comerciales, el sistema no solo alerta sobre la falta de productos, sino que también
identifica rápidamente proveedores disponibles y ubicaciones alternativas,
minimizando pérdidas de ventas y mejorando la satisfacción del cliente.
Además, el registro integrado de clientes y proveedores permite una comunicación
más efectiva y una mejor planificación. Este sistema optimiza el flujo de inventario,
fortalece las relaciones comerciales, y asegura una respuesta rápida ante la demanda.
Metodología
La implementación del sistema de automatización de inventarios se lleva a cabo
mediante el uso de tecnologías modernas como React para el frontend y PostgreSQL
para el backend. El sistema está basado en un modelo de "lazo cerrado", donde el
monitoreo constante del inventario permite generar alertas automáticas y tomar
decisiones de reabastecimiento basadas en datos en tiempo real. Se implementan
módulos específicos para la gestión de productos, clientes y proveedores, así como
un sistema de control de stock bajo que facilita la reposición de productos. El diseño
es accesible desde dispositivos móviles y de escritorio, permitiendo una gestión
eficiente en cualquier momento y lugar.
3
Resultados
El sistema de automatización ha demostrado ser efectivo en la mejora de la gestión
de inventarios, con un notable aumento en la eficiencia operativa. Las empresas que
implementaron el sistema reportaron una disminución de las pérdidas por productos
agotados, una mayor satisfacción del cliente gracias a la disponibilidad continua de
productos y una comunicación más fluida con los proveedores. Las alertas
automáticas y las recomendaciones de reabastecimiento han optimizado el flujo de
inventarios y reducido los tiempos de espera para los pedidos. Además, el sistema ha
mostrado ser escalable, adaptándose a las necesidades crecientes de las PYMES y
permitiendo la integración con otros sistemas ERP.
4
Manual Técnico
Este manual técnico tiene como objetivo detallar los requisitos y las especificaciones
de la aplicación de gestión de inventario y punto de venta (POS) basada en React,
proporcionando una guía completa para su instalación, configuración y
funcionamiento. En este documento se abarcan los requisitos necesarios tanto a nivel
de hardware como de software para asegurar un rendimiento óptimo, describiendo
las especificaciones del servidor y del equipo cliente.
Además, se describen las herramientas y dependencias clave empleadas en el
desarrollo de la aplicación, lo cual incluye tanto el frontend en React como el backend,
el manejo de estado, las bibliotecas para hacer peticiones HTTP y las herramientas
de desarrollo que facilitan el trabajo colaborativo y la optimización del código. También
se incluye una explicación detallada de las funcionalidades de los botones, con
ejemplos de código para que el usuario pueda comprender mejor cómo se gestionan
las acciones principales dentro de la aplicación. Este manual está diseñado para que
los desarrolladores y usuarios técnicos comprendan a fondo la estructura de la
aplicación y su mantenimiento a largo plazo.
Requisitos de la aplicación
1. Servidor (para producción)
• CPU: Procesador multi-core (dependiendo de la carga esperada).
• RAM: Al menos 4GB, pero 8GB es recomendado para una mejor respuesta.
• Almacenamiento: SSD de 50GB o más, especialmente si vas a almacenar
muchos datos o si las imágenes de productos ocupan espacio.
• Conexión a Internet: Idealmente una conexión de alta velocidad y estable si el
POS depende de acceso remoto.
2. Equipo Cliente (para ejecutar el frontend)
• Navegador actualizado (Chrome, Firefox, Safari, Edge).
• Resolución mínima recomendada de 1366x768, idealmente Full HD.
• Para uso en tabletas o dispositivos móviles, asegúrate de que la aplicación
esté optimizada para pantallas más pequeñas.
Requerimientos de Software
1. Frontend (React)
• [Link]: Para ejecutar el entorno de desarrollo de React y hacer el build final
para producción. Versión recomendada: 18 o superior.
• Gestor de Paquetes (NPM o Yarn): Para manejar las dependencias del
proyecto.
• Framework de Estilos (opcional): Puedes usar Material UI, Bootstrap para un
diseño responsivo y estilizado.
5
2. Backend (API y Base de Datos)
• PostgreSQL: Base de datos relacional para almacenar información de
productos, ventas, clientes y proveedores.
3. Dependencias Adicionales
• Bibliotecas para Gestión de Estado: Redux o Zustand, si tienes estados
globales (por ejemplo, datos de inventario o usuario)
• Axios o Fetch: Para realizar llamadas HTTP desde el frontend a la API.
• Librerías de Fecha y Hora: Como date-fns o [Link] para manejar fechas
en transacciones y reportes.
• CORS: Para permitir el acceso del frontend al backend si están en servidores
distintos.
Herramientas empleadas en el desarrollo de la aplicación
Herramientas de Desarrollo (Opcionales)
• Visual Studio Code (o cualquier editor de código) con plugins para React y
ESLint.
• Postman o Insomnia: Para probar la API.
Herramientas Principales en el Desarrollo
• React: El framework principal, utilizado para construir la interfaz de usuario y
manejar la lógica de la aplicación en el frontend.
• React Router: Para la navegación entre páginas o secciones dentro de la
aplicación. Te permite manejar rutas de manera dinámica en función de las
acciones del usuario (por ejemplo, ir a la página de ventas, inventario o
clientes).
• Context API o Redux: Context API (si es una aplicación más pequeña):
Herramienta integrada en React para manejar estados globales,
especialmente útil si quieres reducir dependencias externas.
• Redux (para aplicaciones más grandes): Ofrece un manejo centralizado del
estado y es útil cuando tienes que compartir datos (como el inventario o datos
de usuario) en toda la aplicación.
• React Query o Axios: React Query: Maneja la caché y el estado de las
peticiones HTTP, especialmente útil para aplicaciones que dependen de
muchos datos en tiempo real. Axios: Biblioteca para hacer peticiones HTTP,
fácil de usar para obtener y enviar datos al backend.
• Material UI o Bootstrap: Material UI: Una biblioteca de componentes que sigue
las directrices de diseño de Google, muy usada para interfaces limpias y fáciles
de configurar. Bootstrap: Facilita el diseño responsivo y tiene buena integración
con React.
• Styled Components (opcional): Si necesitas crear componentes con estilos
personalizados encapsulados directamente en el código de React, los styled-
components ofrecen una forma efectiva de estilizar sin hojas de estilos
externas.
6
• React Hook For: Alternativa a Formik, permite construir formularios de manera
eficiente y tiene un rendimiento optimizado para aplicaciones que requieren
varios formularios o entradas frecuentes de datos.
Herramientas de Desarrollo
• Visual Studio Code (VS Code): Editor de código ampliamente utilizado, con
extensiones para desarrollo en React, depuración, y control de versiones.
• Git y GitHubControl de versiones para gestionar cambios en el código y
colaborar si trabajas en equipo. Además, plataformas como GitHub o GitLab
permiten CI/CD para despliegues automatizados.
Instalación de aplicaciones
Para nuestro proyecto no hace falta instalar aplicaciones, solo basta con ingresar al
siguiente link para tener acceso al sistema.
• [Link]
Código de las funciones de los botones
Componente: [Link]
Función: Registrar nuevo usuario
Botón de Registro
• Código:
javascript
Copiar código
const handleSubmit = (e) => {
[Link]();
if (password !== confirmPassword) { // Verifica si las contraseñas coinciden
alert('Las contraseñas no coinciden');
return;
}
const users = [Link]([Link]('users')) || []; // Obtiene usuarios
guardados
const userExists = [Link](user => [Link] === email); // Verifica si el correo
ya existe
if (userExists) {
alert('El usuario ya existe');
} else {
const newUser = { username, email, password }; // Crea un nuevo usuario
[Link](newUser);
[Link]('users', [Link](users)); // Guarda el nuevo usuario en
localStorage
7
alert('Usuario registrado con éxito');
}
};
Descripción: Este botón permite registrar un nuevo usuario. La función handleSubmit
se ejecuta al enviar el formulario. Primero, verifica si las contraseñas coinciden. Si ya
existe un usuario con el correo electrónico proporcionado, muestra un mensaje de
error. De lo contrario, guarda el nuevo usuario en localStorage y muestra un mensaje
de éxito.
Componente: [Link]
Función: Actualizar perfil del usuario
Botón de Actualizar Perfil
• Código:
javascript
Copiar código
const handleUpdate = (e) => {
[Link]();
if (password && password !== confirmPassword) { // Verifica si las contraseñas
coinciden cuando se cambian
alert('Las contraseñas no coinciden');
return;
}
const updatedUser = { ...user, username, email }; // Crea el perfil actualizado
if (password) {
[Link] = password; // Actualiza la contraseña si se proporcionó
una nueva
}
const users = [Link]([Link]('users')) || []; // Obtiene todos los
usuarios
const updatedUsers = [Link](u => [Link] === [Link] ? updatedUser : u); //
Actualiza el usuario en la lista
[Link]('users', [Link](updatedUsers)); // Guarda la lista de
usuarios actualizada en localStorage
[Link]('currentUser', [Link](updatedUser)); // Guarda el
usuario actualizado en el estado actual
setUser(updatedUser); // Actualiza el estado del usuario actual en la aplicación
alert('Perfil actualizado con éxito');
};
Descripción: El botón permite al usuario actualizar su perfil. handleUpdate valida
que, si se ingresa una nueva contraseña, ambas coincidencias de contraseña sean
8
iguales. Luego, busca y reemplaza al usuario actual en localStorage con la
información nueva, guardando los cambios. Muestra un mensaje de confirmación
cuando el perfil se actualiza con éxito.
Componentes en [Link]
Función: Navegación de la aplicación
En [Link], se definen las rutas y componentes principales de la aplicación usando
react-router-dom.
Botones de Navegación
• Descripción de las Rutas:
o /register: Abre la página de Registro de Usuario (RegisterUsuario),
donde se permite a los nuevos usuarios crear una cuenta.
o /login: Redirige al componente Login para que los usuarios inicien
sesión en el sistema.
o /profile: Lleva al usuario autenticado a la sección de Ajustes de Perfil
(ProfileSettings) donde puede actualizar sus datos personales.
o /inventario: Lleva a la Página de Inventario (InventoryPage) donde se
pueden visualizar y gestionar los productos.
o /punto-de-venta: Redirige a la Página de Punto de Venta
(PointOfSalePage), una interfaz de ventas de productos.
o /clientes: Lleva a la Página de Clientes (ClientsPage) para ver y
gestionar los clientes.
o /proveedores: Lleva a la Página de Proveedores (ProvidersPage)
donde se gestionan los proveedores.
o /gastos: Redirige a la Página de Gastos (ExpensesPage) para
visualizar y controlar los gastos.
o /gastos-grafico: Lleva a la Página de Gráfico de Gastos
(GastosGraficoPage) para ver un gráfico detallado de los gastos.
o /ventas: Abre la Página de Ventas (VentasPage) para gestionar las
ventas realizadas.
o /ventas-grafico: Lleva a la Página de Gráfico de Ventas
(VentasGraficoPage) para visualizar el rendimiento de las ventas en
formato gráfico.
9
Video del funcionamiento
[Link]
Conclusión
El proyecto "Inventario de Productos - Sistema de Gestión de Existencias" surge de la
necesidad de las pequeñas y medianas empresas (PYMES) de optimizar la gestión de sus
inventarios, un aspecto crucial para su éxito y crecimiento. El sistema propuesto busca ser
una herramienta integral que aborde las principales problemáticas que enfrentan
las PYMES en este ámbito, ofreciendo una solución accesible, eficiente y adaptable a sus
necesidades.
A través de la automatización de procesos, el sistema busca minimizar los riesgos de
agotamiento de productos, un problema que afecta la satisfacción del cliente y genera
pérdidas económicas. La generación de alertas automáticas, recomendaciones de
proveedores y reportes de análisis permiten a las PYMES tomar decisiones informadas sobre
su inventario, evitando la sobre-inversión o la falta de productos.
El sistema se diseñó para ser intuitivo y fácil de usar, incluso para usuarios sin experiencia
en sistemas de gestión de inventario. Su accesibilidad y adaptabilidad a las necesidades de
las PYMES lo convierten en una herramienta poderosa para la gestión eficiente de sus
recursos.
Además de la optimización del inventario, el sistema busca fortalecer la relación con los
proveedores, facilitando la comparación de opciones y la selección de proveedores con base
en el historial de compras y las condiciones de cada uno. Esto permite a las PYMES obtener
mejores precios y condiciones, mejorando su rentabilidad.
La implementación del sistema de gestión de inventario se traduce en un crecimiento
sostenido del negocio, al reducir los costos asociados a la gestión del inventario, aumentar la
productividad, mejorar la satisfacción del cliente y fortalecer la competitividad en el mercado.
En resumen, este proyecto busca transformar la gestión de inventario de
las PYMES, transformándolas en empresas más eficientes, competitivas y exitosas en un
mercado cada vez más dinámico y exigente. El sistema se posiciona como una herramienta
fundamental para el crecimiento y la sostenibilidad de las PYMES, contribuyendo al desarrollo
económico y social de la región.
10
Bibliografías
• ¿Qué es la automatización? (s. f.).
[Link]
• Westreicher, G. (2022, 24 noviembre). Optimización.
Economipedia. [Link]
• Script input and output variables - Genesys Cloud Resource Center. (2022, 8
agosto). Centro de Recursos En la Nube de Genesys.
[Link]
• ¿Qué es React y por qué domina el desarrollo frontend? (s. f.). EDteam - En
Español Nadie Te Explica Mejor. [Link]
domina-el-desarrollo-frontend
• Backend: ¿Qué es y para qué sirve? (s. f.). Gluo.
[Link]
• Villajulca, J. C. (2023, 30 julio). ¿Control Automático, tipos de variables?
Instrumentacion y Automatizacion
Industrial.[Link]
variables/
11
