En este tutorial aprenderás a crear una aplicación completa para la gestión inteligente de órdenes logísticas. Esta solución incluye un backend desarrollado con FastAPI y un frontend moderno con React, Vite y TailwindCSS. Al final, tendrás un sistema que simula decisiones automatizadas para productos según su stock.
🧠 ¿Qué es un agente logístico?
Un agente logístico es un componente de software capaz de analizar datos sobre inventario y emitir decisiones automáticas como:
- ✅ Continuar operación normal
- ⚠️ Advertencia por nivel bajo de inventario
- 🔄 Reordenar automáticamente
Este tipo de inteligencia es útil en sistemas ERP, almacenes automatizados, logística de última milla y más.
🛠️ Tecnologías que usaremos
| Área | Tecnología |
|---|---|
| Backend | Python 3.11 + FastAPI + Uvicorn |
| Frontend | React + Vite + TailwindCSS |
| Exportación | SheetJS (para Excel), jsPDF (para PDF) |
📁 Estructura del proyecto
agente-logistico-app/
├── backend/ # FastAPI app
├── frontend/ # React app
Cada lado puede ejecutarse por separado y se comunican mediante API HTTP.
🚀 Paso a paso
1. Clona el repositorio
git clone https://github.com/tuusuario/agente-logistico-app.git
cd agente-logistico-app
2. Ejecuta el Backend (FastAPI)
cd backend
python -m venv env
source env/bin/activate # o .\env\Scripts\activate en Windows
pip install -r requirements.txt
uvicorn main:app --reload
Esto levanta un servidor en http://localhost:8000
3. Ejecuta el Frontend (React)
cd ../frontend
npm install
npm run dev
Tu frontend estará disponible en http://localhost:5173
4. Explora la app
- Accede a
http://localhost:5173 - Visualiza la tabla con órdenes
- Aplica filtros
- Exporta en Excel o PDF
- Haz clic en 🔄 “Actualizar datos”
📤 Exportar a Excel y PDF
- El botón Exportar Excel usa la biblioteca SheetJS
- El botón Exportar PDF usa jsPDF con
autoTable - El botón 🔄 hace un nuevo fetch desde la API (sin recargar página)
👩💻 Código clave del agente
class LogisticsAgent:
def decide(self, order):
if order.cantidad < 5:
return "Reordenar"
elif 5 <= order.cantidad <= 10:
return "Advertencia"
return "OK"
Este fragmento toma decisiones básicas. Puedes reemplazarlo por lógica basada en IA o LLMs.
📦 Extensiones posibles
- Conexión con base de datos (PostgreSQL, SQLite)
- Autenticación de usuarios
- Dashboard con gráficos (usando Recharts o Chart.js)
- Agente con reglas personalizadas o aprendizaje automático
🌐 Recursos recomendados
🧾 Conclusión
Este proyecto demuestra cómo crear una app moderna con frontend y backend desacoplados, ideal para construir prototipos de agentes inteligentes. Puedes adaptar esta arquitectura para otros tipos de agentes (ventas, soporte, mantenimiento, etc).
コメント