593 lines
7.1 KiB
Markdown
593 lines
7.1 KiB
Markdown
## Aplicaciones Operacionales para SAP Business One
|
|
|
|
> Objetivo: construir aplicaciones web empresariales simples, rápidas, mantenibles y desacopladas para procesos específicos conectados a SAP Business One mediante Service Layer.
|
|
|
|
---
|
|
|
|
# Filosofía tecnológica
|
|
|
|
El objetivo NO es crear:
|
|
- una plataforma compleja
|
|
- microservicios innecesarios
|
|
- interfaces visualmente exageradas
|
|
|
|
El objetivo es construir:
|
|
- formularios operacionales rápidos
|
|
- tablas empresariales eficientes
|
|
- validaciones sólidas
|
|
- integración estable con SAP Business One
|
|
|
|
---
|
|
|
|
# Arquitectura general recomendada
|
|
|
|
```text
|
|
Frontend (Next.js)
|
|
↓
|
|
Backend Integración (FastAPI)
|
|
↓
|
|
SAP Business One Service Layer
|
|
```
|
|
|
|
---
|
|
|
|
# Lenguajes recomendados
|
|
|
|
# 1. TypeScript
|
|
|
|
## Uso principal
|
|
Frontend empresarial.
|
|
|
|
---
|
|
|
|
## Se utilizará en:
|
|
- Next.js
|
|
- React
|
|
- Formularios
|
|
- Tablas
|
|
- Validaciones
|
|
- Componentes reutilizables
|
|
|
|
---
|
|
|
|
## ¿Por qué usar TypeScript?
|
|
|
|
Porque los sistemas ERP manejan:
|
|
- muchos datos
|
|
- documentos complejos
|
|
- estructuras anidadas
|
|
- validaciones empresariales
|
|
|
|
TypeScript ayuda a:
|
|
- reducir errores
|
|
- mantener consistencia
|
|
- mejorar mantenimiento
|
|
- detectar problemas temprano
|
|
|
|
---
|
|
|
|
## Ejemplo típico ERP
|
|
|
|
```ts
|
|
interface PurchaseOrderLine {
|
|
itemCode: string
|
|
description: string
|
|
quantity: number
|
|
warehouseCode: string
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
# 2. Python
|
|
|
|
## Uso principal
|
|
Backend de integración.
|
|
|
|
---
|
|
|
|
## Se utilizará en:
|
|
- FastAPI
|
|
- integración SAP
|
|
- validaciones empresariales
|
|
- integración SUNAT
|
|
- logs
|
|
- auditoría
|
|
- automatizaciones
|
|
- procesos auxiliares
|
|
|
|
---
|
|
|
|
## ¿Por qué Python?
|
|
|
|
Porque:
|
|
- es rápido de desarrollar
|
|
- excelente para APIs
|
|
- ideal para integración empresarial
|
|
- muy compatible con automatización
|
|
- excelente ecosistema
|
|
|
|
---
|
|
|
|
# IDE recomendado
|
|
|
|
# Antigravity
|
|
|
|
## IDE principal
|
|
|
|
Antigravity puede ser muy útil para este proyecto debido a:
|
|
- generación acelerada de código
|
|
- asistencia IA
|
|
- productividad
|
|
- soporte moderno TypeScript y React
|
|
|
|
---
|
|
|
|
# Uso recomendado de Antigravity
|
|
|
|
## Excelente para generar:
|
|
- formularios
|
|
- CRUDs
|
|
- tablas
|
|
- hooks
|
|
- componentes
|
|
- validaciones
|
|
- clientes API
|
|
- schemas Zod
|
|
|
|
---
|
|
|
|
## NO depender completamente de IA para:
|
|
- arquitectura
|
|
- seguridad
|
|
- lógica SAP
|
|
- reglas contables
|
|
- autorizaciones
|
|
- estructura del sistema
|
|
|
|
---
|
|
|
|
# Filosofía correcta con IA
|
|
|
|
```text
|
|
Arquitectura y lógica:
|
|
Manual
|
|
|
|
Implementación repetitiva:
|
|
Asistida por IA
|
|
```
|
|
|
|
---
|
|
|
|
# Recomendación importante
|
|
|
|
La IA debe:
|
|
- acelerar desarrollo
|
|
- reducir boilerplate
|
|
- mejorar productividad
|
|
|
|
La IA NO debe:
|
|
- tomar decisiones arquitectónicas
|
|
- definir reglas empresariales
|
|
- controlar diseño de integración SAP
|
|
|
|
---
|
|
|
|
# VS Code como respaldo
|
|
|
|
## Recomendado instalar también:
|
|
Visual Studio Code.
|
|
|
|
---
|
|
|
|
## Motivos
|
|
- estabilidad
|
|
- debugging excelente
|
|
- ecosistema enorme
|
|
- respaldo confiable
|
|
- herramientas empresariales
|
|
|
|
---
|
|
|
|
# Extensiones recomendadas
|
|
|
|
## Frontend
|
|
|
|
- ES7+ React snippets
|
|
- Tailwind CSS IntelliSense
|
|
- ESLint
|
|
- Prettier
|
|
- Error Lens
|
|
|
|
---
|
|
|
|
## Python
|
|
|
|
- Python
|
|
- Pylance
|
|
- Ruff
|
|
- Black Formatter
|
|
|
|
---
|
|
|
|
# Librerías Frontend
|
|
|
|
# Next.js
|
|
|
|
## Framework principal
|
|
|
|
Se utilizará para:
|
|
- páginas
|
|
- layouts
|
|
- formularios
|
|
- módulos operacionales
|
|
- autenticación
|
|
- API routes
|
|
|
|
---
|
|
|
|
## ¿Por qué Next.js?
|
|
|
|
Porque:
|
|
- estructura moderna
|
|
- excelente soporte TypeScript
|
|
- arquitectura ordenada
|
|
- ideal para aplicaciones empresariales
|
|
|
|
---
|
|
|
|
# React
|
|
|
|
## Base UI
|
|
|
|
React será utilizado para:
|
|
- componentes
|
|
- formularios
|
|
- tablas
|
|
- modales
|
|
- interacción usuario
|
|
|
|
---
|
|
|
|
# Tailwind CSS
|
|
|
|
## Framework CSS recomendado
|
|
|
|
Ideal para:
|
|
- sistemas empresariales
|
|
- diseño minimalista
|
|
- formularios densos
|
|
- layouts rápidos
|
|
|
|
---
|
|
|
|
## Ventajas
|
|
|
|
- rápido
|
|
- consistente
|
|
- fácil mantenimiento
|
|
- poco CSS manual
|
|
|
|
---
|
|
|
|
# shadcn/ui
|
|
|
|
## Librería UI recomendada
|
|
|
|
Ideal para:
|
|
- modales
|
|
- dialogs
|
|
- tablas
|
|
- formularios
|
|
- selects
|
|
- popovers
|
|
|
|
---
|
|
|
|
## Ventaja principal
|
|
|
|
Los componentes:
|
|
- son modificables
|
|
- quedan dentro del proyecto
|
|
- no dependen de librerías cerradas
|
|
|
|
---
|
|
|
|
# Formularios
|
|
|
|
# React Hook Form
|
|
|
|
## Librería MÁS importante del frontend
|
|
|
|
Se utilizará para:
|
|
- formularios complejos
|
|
- validaciones
|
|
- líneas dinámicas
|
|
- formularios ERP
|
|
|
|
---
|
|
|
|
## Casos reales
|
|
|
|
- facturas
|
|
- entradas mercancía
|
|
- transferencias
|
|
- gastos
|
|
- validaciones tributarias
|
|
|
|
---
|
|
|
|
# Zod
|
|
|
|
## Validaciones empresariales
|
|
|
|
Se utilizará para:
|
|
- validar formularios
|
|
- validar payloads
|
|
- centralizar reglas
|
|
|
|
---
|
|
|
|
## Ejemplos
|
|
|
|
- RUC válido
|
|
- cantidad > 0
|
|
- centro costo obligatorio
|
|
- lote requerido
|
|
|
|
---
|
|
|
|
# Manejo de datos
|
|
|
|
# TanStack Query
|
|
|
|
## Manejo de estado servidor
|
|
|
|
Se utilizará para:
|
|
- consultas SAP
|
|
- cache
|
|
- refresh
|
|
- sincronización datos
|
|
|
|
---
|
|
|
|
## Ventajas
|
|
|
|
- evita consultas repetidas
|
|
- mejora performance
|
|
- simplifica fetching
|
|
|
|
---
|
|
|
|
# Tablas ERP
|
|
|
|
# TanStack Table
|
|
|
|
## Librería crítica ERP
|
|
|
|
Se utilizará para:
|
|
- líneas documento
|
|
- listados
|
|
- filtros
|
|
- selección
|
|
- edición
|
|
|
|
---
|
|
|
|
## Funcionalidades importantes
|
|
|
|
- filtros
|
|
- sorting
|
|
- búsqueda
|
|
- navegación teclado
|
|
- paginación
|
|
|
|
---
|
|
|
|
# Backend recomendado
|
|
|
|
# FastAPI
|
|
|
|
## Backend principal
|
|
|
|
FastAPI será utilizado para:
|
|
- integración SAP
|
|
- autenticación
|
|
- validaciones
|
|
- logs
|
|
- auditoría
|
|
- APIs internas
|
|
|
|
---
|
|
|
|
# Arquitectura recomendada
|
|
|
|
```text
|
|
Next.js
|
|
↓
|
|
FastAPI
|
|
↓
|
|
SAP Service Layer
|
|
```
|
|
|
|
---
|
|
|
|
# ¿Por qué usar FastAPI?
|
|
|
|
Porque:
|
|
- rápido
|
|
- limpio
|
|
- tipado
|
|
- excelente documentación
|
|
- ideal para APIs empresariales
|
|
|
|
---
|
|
|
|
# SAP Business One
|
|
|
|
## SAP seguirá siendo:
|
|
|
|
```text
|
|
Sistema maestro ERP
|
|
```
|
|
|
|
La aplicación web:
|
|
- NO reemplaza SAP
|
|
- NO replica SAP completo
|
|
|
|
La aplicación:
|
|
- simplifica procesos específicos
|
|
- mejora experiencia operacional
|
|
- agrega validaciones
|
|
- acelera tareas
|
|
|
|
---
|
|
|
|
# Herramientas adicionales
|
|
|
|
# Postman o Insomnia
|
|
|
|
## Para pruebas API
|
|
|
|
Utilizados para probar:
|
|
- SAP Service Layer
|
|
- FastAPI
|
|
- APIs SUNAT
|
|
|
|
---
|
|
|
|
# Obsidian
|
|
|
|
## Documentación técnica
|
|
|
|
Ideal para:
|
|
- arquitectura
|
|
- flujos
|
|
- snippets
|
|
- documentación SAP
|
|
|
|
---
|
|
|
|
# Git
|
|
|
|
## Control versiones
|
|
|
|
Recomendado:
|
|
- Git
|
|
- GitHub
|
|
- Gitea
|
|
|
|
---
|
|
|
|
# Docker
|
|
|
|
## Deploy empresarial
|
|
|
|
Aprender:
|
|
- Docker
|
|
- Docker Compose
|
|
- Nginx
|
|
|
|
---
|
|
|
|
# Organización recomendada
|
|
|
|
```text
|
|
/apps
|
|
/recepcion-oc
|
|
/factura-gastos
|
|
/factura-productos
|
|
/transferencias
|
|
|
|
/shared-ui
|
|
/shared-api
|
|
/shared-types
|
|
/shared-validations
|
|
```
|
|
|
|
---
|
|
|
|
# Filosofía modular
|
|
|
|
Cada módulo debe ser:
|
|
- independiente
|
|
- simple
|
|
- mantenible
|
|
- desacoplado
|
|
|
|
---
|
|
|
|
# Componentes reutilizables críticos
|
|
|
|
## SearchModal
|
|
|
|
Modal reutilizable para:
|
|
- artículos
|
|
- proveedores
|
|
- clientes
|
|
- órdenes compra
|
|
|
|
---
|
|
|
|
# ERPDataTable
|
|
|
|
Tabla reutilizable:
|
|
- filtros
|
|
- búsqueda
|
|
- selección
|
|
- teclado
|
|
|
|
---
|
|
|
|
# Inputs inteligentes
|
|
|
|
Crear:
|
|
- InputRUC
|
|
- InputCurrency
|
|
- InputDate
|
|
- InputQuantity
|
|
- InputWarehouse
|
|
|
|
---
|
|
|
|
# Prioridades reales de aprendizaje
|
|
|
|
# Prioridad máxima
|
|
|
|
1. TypeScript
|
|
2. React Hook Form
|
|
3. TanStack Table
|
|
4. FastAPI
|
|
5. SAP Service Layer
|
|
|
|
---
|
|
|
|
# Prioridad media
|
|
|
|
6. Next.js
|
|
7. TanStack Query
|
|
8. Zod
|
|
9. Docker
|
|
|
|
---
|
|
|
|
# Prioridad baja
|
|
|
|
- Redux
|
|
- animaciones
|
|
- dashboards complejos
|
|
- SEO
|
|
- diseño visual avanzado
|
|
|
|
---
|
|
|
|
# Objetivo final
|
|
|
|
Construir aplicaciones empresariales:
|
|
- rápidas
|
|
- operacionales
|
|
- mantenibles
|
|
- desacopladas
|
|
- integradas con SAP Business One
|
|
|
|
Sin intentar reinventar un ERP completo. La industria ya tiene suficientes cicatrices por eso. |