¿Cómo construir un sistema de gestión de inventario basado en JavaScript?
19/03/2024
•
5
min
Crear un sistema de gestión de inventario basado en JavaScript es una tarea compleja que implica tanto HTML para la estructura básica de las páginas como JavaScript para la lógica del backend. Aquí están las instrucciones paso a paso para construir un sistema básico de gestión de inventario usando HTML, JavaScript y localStorage para la persistencia de datos.
Paso 1: Crear la Estructura HTML
Comencemos creando una estructura simple para el sistema de inventario usando HTML.
<!DOCTYPE html>
<html>
<head>
<title>Sistema de Gestión de Inventario</title>
</head>
<body>
<h1>Sistema de Gestión de Inventario</h1>
<form id="itemform">
<input type="text" id="item_name" placeholder="Nombre del Artículo" required>
<input type="number" id="item_quantity" placeholder="Cantidad" required>
<button type="submit">Agregar Artículo</button>
</form>
<table id="inventory_table">
<thead>
<tr>
<th>Nombre del Artículo</th>
<th>Cantidad</th>
<th>Accion</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
<script src="inventario.js"></script>
</body>
</html>
Paso 2: Inicializar el Inventario con JavaScript
Crea un archivo JavaScript llamado 'inventario.js' e inicializa una variable de inventario como un array vacío. Si hay artículos almacenados en localStorage, cárgalos en el inventario.
let inventario = JSON.parse(localStorage.getItem('inventario')) || [];
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Paso 3: Crear Funciones para gestionar el inventario
Crea una función que manejará la adición de nuevos artículos en el inventario y evitará agregar artículos duplicados. Actualizará la cantidad de los artículos existentes.
function addItem(name, quantity) {
let existente = inventario.find(item => item.name === name);
if(existente) {
existente.quantity += quantity;
} else {
inventario.push({name:name, quantity:quantity});
}
localStorage.setItem('inventario', JSON.stringify(inventario));
mostrarInventario();
}
Crea una función que pueda eliminar artículos del inventario.
function removeItem(name) {
let existente = inventario.find(articulo => articulo.name === name);
if(existente) {
inventario = inventario.filter(articulo => articulo.name !== name);
}
localStorage.setItem('inventario', JSON.stringify(inventario));
mostrarInventario();
}
Crie uma função que atualize a tabela HTML sempre que uma mudança for feita no inventário.
function mostrarInventario() {
let cuerpoTabla = document.getElementById('table_body');
cuerpoTabla.innerHTML = '';
for(let articulo of inventario) {
let fila = `<tr>
<td>${articulo.name}</td>
<td>${articulo.quantity}</td>
<td><button onclick="removeItem('${articulo.name}')">Eliminar</button>
`;
cuerpoTabla.innerHTML += fila;
}
}
Paso 4: Agregar Escuchadores de Eventos al Formulario
Agrega un escuchador de eventos al formulario que evitará el envío del formulario por defecto y llamará a la función addItem.
document.getElementById('itemform').addEventListener('submit', function(e) {
e.preventDefault();
let name = document.getElementById('item_name').value;
let quantity = Number(document.getElementById('item_quantity').value);
addItem(name, quantity);
this.reset();
});
Y finalmente, llama a la función mostrarInventario cuando la página se carga:
document.body.onload = mostrarInventario;
Esto configurará un sistema básico de gestión de inventario donde puedes agregar y eliminar artículos. Puedes extender esto para incluir más características, como la edición de detalles de artículos, la búsqueda y clasificación de artículos, etc. Ten en cuenta que este inventario simple utiliza el localStorage del navegador para la persistencia de datos a través de sesiones. Para una base de datos más robusta y optimización, considera la integración con tecnologías del lado del servidor como Express.js (para Node.js) y un sistema de base de datos como MySQL o MongoDB.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.