2.
Introducción
Este proyecto consiste en el desarrollo de un Sistema de Gestión de
Inventarios básico, que permite a los usuarios agregar, editar y eliminar
productos, así como visualizar los productos disponibles en una lista
dinámica. Además, el sistema guarda los datos en el almacenamiento local
del navegador (localStorage), lo que permite conservar la información
incluso después de cerrar la página.
El propósito principal de este proyecto es ofrecer una solución sencilla para
el control y organización de inventarios, permitiendo al usuario llevar un
registro claro y actualizado de los productos disponibles. Los objetivos
específicos incluyen: implementar funcionalidades de CRUD (crear, leer,
actualizar y eliminar), desarrollar una interfaz intuitiva y aprovechar el
almacenamiento local para la persistencia de datos.
Este proyecto se relaciona directamente con los temas de la carrera de
Ingeniería en Administración de Sistemas (IAS) o Ingeniería en
Tecnologías de la Información (ITS), ya que aplica conceptos
fundamentales del desarrollo web, la gestión de datos, y la interacción con el
usuario. Además, promueve el desarrollo de habilidades en programación
orientada a eventos y manejo del DOM, esenciales en ambas disciplinas.
Las tecnologías utilizadas para el desarrollo del sistema son HTML, CSS y
JavaScript, herramientas esenciales en el desarrollo web. HTML se encarga
de la estructura del sistema, CSS del diseño visual, y JavaScript de la lógica
funcional, incluyendo la manipulación dinámica de la lista de productos y el
uso de localStorage.
3. Requisitos y Funcionalidades
El proyecto tenía como objetivo principal desarrollar una página web
funcional que permitiera gestionar un inventario de productos de forma
sencilla e intuitiva. Para ello, se definieron una serie de requisitos
funcionales que debía cumplir el sistema:
Permitir al usuario agregar nuevos productos al inventario,
especificando información como el nombre del producto, cantidad, y
precio.
Habilitar la opción de editar los datos de productos existentes,
para corregir errores o actualizar información.
Ofrecer la posibilidad de eliminar productos del inventario cuando ya
no estén disponibles o se deseen descartar.
Mostrar todos los productos almacenados en una lista dinámica, que
se actualice automáticamente conforme se realicen cambios.
Guardar los datos en el almacenamiento local del navegador
(localStorage), de modo que el inventario se conserve incluso
después de cerrar o recargar la página.
En cuanto a las funcionalidades implementadas, el sistema cumple con los
siguientes puntos clave:
Formulario de ingreso de productos: con campos para capturar la
información necesaria.
Botones de acción para editar y eliminar cada producto listado.
Actualización automática de la interfaz: al agregar, modificar o
eliminar un producto, la lista se actualiza en tiempo real.
Persistencia de datos: todos los productos se guardan en
localStorage, lo que permite mantener el inventario incluso tras cerrar
el navegador.
Validación básica de entradas: se impide agregar productos sin
información obligatoria.
Estas funcionalidades garantizan una experiencia de usuario fluida y
cumplen con los objetivos planteados en la etapa inicial del proyecto.
4. Estructura del Proyecto
El proyecto está organizado de forma sencilla y clara, utilizando tres archivos
principales: uno para la estructura del contenido (HTML), otro para los estilos
visuales (CSS) y otro para la lógica de funcionamiento (JavaScript). Esta
separación permite mantener el código ordenado y facilita su mantenimiento
o futura ampliación.
La estructura general del proyecto es la siguiente:
/SistemaInventario/
├── [Link] → Contenido y estructura de la página web.
├── [Link] → Estilos y diseño visual de la interfaz.
└── [Link] → Lógica, funcionalidades y manejo del inventario.
Descripción de los archivos:
[Link]: Este archivo contiene la estructura principal del sitio web.
Incluye elementos como el formulario para agregar productos, la lista
donde se muestran los productos existentes, y botones para ejecutar
acciones. También enlaza con los archivos de estilo y de script.
[Link]: Aquí se definen los estilos visuales del sistema, incluyendo
colores, fuentes, márgenes, espaciados y diseño responsivo. Su
objetivo es mejorar la presentación de la interfaz y hacerla más
amigable para el usuario.
[Link]: Este archivo contiene toda la lógica funcional del sistema.
Gestiona la adición, edición y eliminación de productos, así como la
actualización dinámica de la lista de inventario. También se encarga de
guardar y recuperar los datos desde el localStorage.
Esta organización modular facilita la comprensión del código y permite
trabajar de manera más eficiente en cada parte del proyecto.
5. Tecnologías Utilizadas
Para el desarrollo del Sistema de Gestión de Inventarios se utilizaron
tecnologías web fundamentales que permitieron construir una aplicación
funcional, interactiva y accesible desde cualquier navegador moderno. A
continuación se detallan las tecnologías empleadas:
HTML (HyperText Markup Language):
Se utilizó para definir la estructura y el contenido de la página web. A
través de etiquetas semánticas, se organizaron los elementos como
formularios, listas, botones y secciones de manera clara y
comprensible.
CSS (Cascading Style Sheets):
Encargado de la presentación visual del proyecto. Se aplicaron estilos
para mejorar la apariencia del sistema, como colores, fuentes,
espaciados, disposición de elementos y diseño responsivo, lo que
contribuyó a una mejor experiencia de usuario.
JavaScript:
Esta tecnología fue la base de toda la lógica del proyecto. Se utilizó
para implementar las funcionalidades principales como agregar, editar
y eliminar productos, actualizar dinámicamente la interfaz, y gestionar
la interacción del usuario con los datos del inventario.
localStorage:
Se usó como método de almacenamiento de datos en el navegador.
Permitió guardar la información del inventario sin necesidad de una
base de datos externa, logrando que los datos se mantuvieran incluso
al cerrar o recargar la página.
¿Por qué se eligieron estas tecnologías?
Estas tecnologías fueron seleccionadas por su simplicidad, amplio soporte y
porque forman parte del núcleo del desarrollo web. HTML, CSS y JavaScript
son herramientas esenciales que permiten crear aplicaciones funcionales sin
requerir herramientas externas o servidores complejos. Además, el uso de
localStorage facilitó la persistencia de datos sin necesidad de configurar
bases de datos o backends, lo que era ideal para un proyecto de nivel
introductorio o académico.
En conjunto, estas tecnologías hicieron posible desarrollar un sistema liviano,
accesible, funcional y fácil de entender.
6. Demostración del Proyecto (Video o Capturas de Pantalla)
A continuación, se presenta una breve demostración del funcionamiento del
Sistema de Gestión de Inventarios, mostrando las principales
funcionalidades implementadas:
1. Interfaz Principal
Al ingresar a la página, el usuario encuentra un formulario para agregar
nuevos productos, y una lista que muestra los productos actualmente
registrados en el inventario.
(Inserta captura de pantalla del inicio de la página)
2. Agregar un Producto
El usuario completa los campos del formulario (nombre, cantidad y precio), y
al hacer clic en el botón “Agregar”, el producto se añade a la lista.
(Inserta captura o video del formulario completado y el producto añadido a
la lista)
3. Editar un Producto
Cada producto en la lista tiene un botón “Editar” que permite modificar los
datos. Al hacer clic, los campos se rellenan automáticamente con los valores
actuales y se pueden actualizar.
(Inserta captura mostrando el proceso de edición)
4. Eliminar un Producto
También se incluye un botón “Eliminar” para quitar cualquier producto del
inventario de forma inmediata.
(Inserta captura donde se elimina un producto y se actualiza la lista)
5. Persistencia de Datos con localStorage
Todos los productos se almacenan en el localStorage del navegador. Esto
significa que, aunque se cierre o recargue la página, los datos del inventario
permanecen intactos.
(Inserta captura del navegador recargado y la lista conservada)
[Link]íos y Soluciones
Durante el desarrollo, los principales desafíos fueron:
Persistencia de Datos: Inicialmente, los productos agregados al inventario no se
mantenían al recargar la página. Para solucionar esto, se investigó el uso de
localStorage, lo que permitió almacenar los productos de forma persistente en el
navegador.
Modo Edición de Productos: Al implementar la funcionalidad de editar productos, surgió
la dificultad de diferenciar entre agregar un nuevo producto y actualizar uno existente.
Esto se resolvió introduciendo variables de control (modoEdicion y productoEditando)
que indicaran cuándo el formulario estaba en modo edición.
Validación de Entradas: Hubo problemas para garantizar que todos los campos del
formulario (nombre, cantidad y precio) fueran llenados correctamente antes de agregar
o editar un producto. Se resolvió agregando validaciones en JavaScript para comprobar
que los campos no estuvieran vacíos ni fueran valores no numéricos donde no
correspondía.
Actualización Dinámica de la Tabla: Otro desafío fue lograr que la tabla de inventario se
actualizara inmediatamente después de cada acción (agregar, editar o eliminar). Esto se
resolvió llamando a la función renderizarTabla() después de cada operación que
modificara el inventario.
8. Mejoras Futuras
Algunas mejoras futuras que se podrían implementar en el proyecto son:
Validación de Datos más Robusta: Mejorar las validaciones para evitar la entrada de
caracteres no válidos, cantidades negativas o precios inválidos.
Interfaz de Usuario Mejorada: Rediseñar la interfaz utilizando frameworks de diseño
como Bootstrap o TailwindCSS para ofrecer una experiencia más atractiva y profesional.
Sistema de Búsqueda y Filtros: Añadir un campo de búsqueda y filtros que permitan al
usuario encontrar productos por nombre, cantidad o precio.
Paginación o Scroll Dinámico: Implementar paginación o carga dinámica en tablas con
muchos productos para mejorar el rendimiento.
Confirmaciones Visuales: Mostrar mensajes de confirmación o notificaciones visuales al
agregar, editar o eliminar productos.
Conexión con Backend: Desarrollar una versión conectada a un servidor (por ejemplo,
con [Link] y una base de datos como MongoDB o MySQL) para que el inventario sea
accesible desde distintos dispositivos y no dependa exclusivamente del localStorage.
Exportación de Datos: Permitir la exportación del inventario en formatos como CSV o
PDF para respaldos o reportes.
Control de Stock: Agregar alertas cuando el stock de un producto esté por debajo de un
límite definido por el usuario.
9. Conclusión
En este proyecto, he desarrollado una aplicación de Gestión de Inventarios utilizando
tecnologías frontend como HTML, CSS y JavaScript. Se logró implementar con éxito la
funcionalidad para agregar, editar y eliminar productos, así como visualizar la información en
una tabla dinámica. Además, se utilizó localStorage para asegurar que los datos del inventario
se mantuvieran guardados entre sesiones del navegador.
Este proyecto me permitió reforzar habilidades clave en desarrollo web, especialmente en la
manipulación del DOM, validación de formularios y almacenamiento de datos local. Asimismo,
fue una excelente oportunidad para comprender mejor la estructura y lógica necesarias para
construir aplicaciones interactivas con enfoque práctico.
HTML: Para estructurar la página web.
CSS: Para diseñar y dar estilo a la interfaz de usuario.
JavaScript: Para agregar funcionalidad interactiva como el manejo de tareas, validación
y persistencia de datos.
localStorage: Para almacenar los datos de las tareas de manera persistente en el
navegador, incluso después de recargar la página.