Creación de un sistema de flujo de trabajo con HTMX y ASP.NET Core - Parte 1: Introducción (Español (Spanish))

Introducción

Los sistemas de flujo de trabajo están en todas partes en aplicaciones modernas, desde simples procesos de aprobación hasta complejas automatizaciones de varios pasos.

Aunque hay excelentes soluciones comerciales como Temporal, Airflow y n8n, a veces necesitas algo adaptado a tus necesidades específicas.

En esta serie, te guiaré a través de la construcción de un sistema de flujo de trabajo completo desde cero utilizando ASP.NET Core, HTMX, Alpine.js y Hangfire.
Al final de esta serie, tendrá un sistema de flujo de trabajo completamente funcional con:
Un editor visual basado en nodos para crear flujos de trabajo
Nodos de flujo de trabajo definidos por JSON con entradas, salidas y condiciones
Un motor de ejecución de flujo de trabajo personalizado
Procesamiento de trabajo de fondo con Hangfire para APIs remotas de votación

Gestión y persistencia del Estado

Un panel de control para monitorizar la ejecución del flujo de trabajo

¿Por qué construir su propio sistema de flujo de trabajo?

Antes de bucear, vamos a dirigirnos al elefante en la habitación: ¿por qué no utilizar una solución existente?
Cuándo construir el suyo propio:
Usted necesita una integración profunda con su aplicación existente
Usted tiene una lógica de negocio específica que no encaja en las herramientas genéricas de flujo de trabajo
Quiere control total sobre el modelo de ejecución y escalado

Es necesario minimizar las dependencias externas

Usted quiere aprender cómo funcionan los sistemas de flujo de trabajo bajo el capó
Cuándo utilizar herramientas existentes:
Necesitas una solución probada y probada inmediatamente.

Usted requiere características como la ejecución distribuida en muchas máquinas

No tienes tiempo para construir y mantener una infraestructura personalizada

Para esta serie, elegimos construir la nuestra porque nos da una flexibilidad completa y es una excelente oportunidad de aprendizaje.

Lo que estamos construyendo

Nuestro sistema de flujo de trabajo soportará varios conceptos clave:

**1.**Nodos
**Los nodos son los componentes básicos de los flujos de trabajo.**Cada nodo representa una acción discreta o un punto de decisión.
**Ejemplos:**Nodo de solicitud HTTP
: Hace llamadas API a servicios externosNodo de condición
: Evalúa expresiones y ejecución de sucursalesTransformar nodo

: Procesa datos (manipulación JSON, filtrado, etc.)

Nodo de demora

: Espera por una duración especificada

Nodo de activación

: Inicia un flujo de trabajo basado en eventos o horarios
Flujos de trabajo
Un flujo de trabajo es un gráfico dirigido de nodos conectados.
Los datos fluyen de un nodo a otro a través de conexiones, con cada nodo procesando y transformando los datos según sea necesario.

3.

Motor de ejecución

El motor que interpreta la definición del flujo de trabajo y ejecuta los nodos en el orden correcto, manejando:
Ejecución secuencial
Ejecución paralela (cuando los nodos no dependen el uno del otro)
Ramamiento condicional
Manejo de errores y reintentos

Persistencia del Estado

Editor visual
Una interfaz de usuario basada en la web donde los usuarios pueden:
Arrastre y suelte nodos en un lienzo
Conectar nodos dibujando bordes entre ellos

Configurar las propiedades del nodo

Ensayo de los flujos de trabajo

Ver el historial de ejecución

**5.**Tramitación de antecedentes
**Usando Hangfire, implementaremos:**Ejecución programada del flujo de trabajo
Encuestas API para datos externosLógica de reintentar las ejecuciones fallidas
Tablero de control de puestos de trabajoApilador de tecnología
**Esto es lo que vamos a usar:**Motor

ASP.NET Core 9,0

: Nuestro marco webMarco básico de las entidades
: Para la persistencia de los datosPostgreSQL
: Base de datos para almacenar definiciones de flujo de trabajo y estado de ejecuciónHangfire
: Procesamiento del trabajo de fondoSistema.Texto.Json

: Para la serialización del flujo de trabajo JSON

InterfazHTMX 2.0
: Para actualizaciones de interfaz de usuario dinámicas impulsadas por el servidor sin escribir JavaScriptAlpine.js
: Marco JavaScript ligero para componentes interactivosCoilwindCSS + DaisyUI

: Estilo y componentes de interfaz de usuario

LeaderLine

Mostlylucid.Workflow/
├── Mostlylucid.Workflow.Engine/      # Core workflow execution engine
│   ├── Models/                        # Node, Workflow, Connection models
│   ├── Execution/                     # Workflow executor and runtime
│   └── Nodes/                         # Built-in node implementations
├── Mostlylucid.Workflow.Shared/       # Shared models and DTOs
├── Mostlylucid.Workflow.DbContext/    # Entity Framework context
└── Mostlylucid/                       # Main web app (existing)
    ├── Controllers/WorkflowController.cs
    ├── Services/WorkflowService.cs
    └── Views/Workflow/                # Workflow UI views

: Para dibujar conexiones entre nodos (vamos a explorar alternativas)

Infraestructura Docker

{
  "id": "node-1",
  "type": "HttpRequest",
  "name": "Fetch User Data",
  "inputs": {
    "url": "https://api.example.com/users/{{userId}}",
    "method": "GET",
    "headers": {
      "Authorization": "Bearer {{apiToken}}"
    }
  },
  "outputs": {
    "response": "{{result.body}}",
    "statusCode": "{{result.statusCode}}"
  },
  "conditions": {
    "onSuccess": "next-node-id",
    "onError": "error-handler-node-id"
  }
}

: Para la containerización Seq

: Para el registro estructurado
Prometeo + Grafana
: Para el seguimiento

Descripción general de la arquitectura Nuestro sistema se organizará en varios proyectos:

Decisiones clave sobre el diseño
Definiciones de nodo basadas en JSON
Los nodos se definirán en JSON, haciéndolos fáciles de serializar, versión y compartir:

2. Ejecución basada en gráficos

Los flujos de trabajo son gráficos acíclicos dirigidos (GAD).
El motor de ejecución:
Realizar la clasificación topológica para determinar el orden de ejecución

Ejecutar nodos en paralelo siempre que sea posible

Manejar ramificación condicional basada en salidas de nodos

Persistencia del Estado
Cada ejecución de flujo de trabajo será rastreada:
Estado de instancia de flujo de trabajo (correr, completar, fallar)

Resultados de la ejecución del nodo

Estados desencadenantes para flujos de trabajo programados
Historial y registros de ejecución
Extensibilidad
El sistema de nodos estará basado en plugins:

Nodos incorporados para operaciones comunes

Los tipos de nodos personalizados se pueden registrar
Validación del nodo y ejecución del esquema
Lo que viene en esta serie
Parte 2: Motor de arquitectura y flujo de trabajo básico
Establecimiento de la estructura del proyecto

Construyendo los modelos de flujo de trabajo central (Nodo, Flujo de trabajo, Conexión)

Implementación del motor de ejecución de gráficos
Clasificación topológica y resolución de dependencias
Parte 3: Construyendo el Editor Visual
Crear el lienzo de flujo de trabajo con HTMX y Alpine.js
Colocación de nodos de arrastrar y soltar

Dibujo de conexión visual

Panel de configuración del nodo

Serialización del flujo de trabajo
Parte 4: Integración del Hangfire y Gestión del Estado
Configuración de Hangfire para el procesamiento de fondo
Implementación de nodos de votación API
Administración del estado de activación

Reintentar la lógica y el manejo de errores

Integración del tablero de mando

Parte 5: Características avanzadas y despliegue

Implementación de nodos personalizados

Versión de flujo de trabajo

Estrategias de ensayo

Optimización del rendimiento