Aufbau eines Workflow-Systems mit HTMX und ASP.NET Core - Teil 1: Einführung (Deutsch (German))

Einleitung

Workflow-Systeme sind überall in modernen Anwendungen – von einfachen Zulassungsprozessen bis hin zu komplexen mehrstufigen Automatisierungen.

Während es hervorragende kommerzielle Lösungen wie Temporal, Airflow und n8n gibt, benötigen Sie manchmal etwas, das auf Ihre spezifischen Bedürfnisse zugeschnitten ist.

In dieser Serie werde ich Sie durch den Aufbau eines kompletten Workflow-Systems von Grund auf mit ASP.NET Core, HTMX, Alpine.js und Hangfire begleiten.
Am Ende dieser Serie haben Sie ein voll funktionsfähiges Workflow-System mit:
Ein visueller Node-basierter Editor für den Aufbau von Workflows
JSON-definierte Workflow-Knoten mit Inputs, Outputs und Bedingungen
Eine benutzerdefinierte Workflow-Ausführungs-Engine
Hintergrund Job-Verarbeitung mit Hangfire für die Abfrage entfernter APIs

Staatliche Verwaltung und Persistenz

Ein Dashboard zur Überwachung der Workflow-Ausführung

Warum Ihr eigenes Workflow-System aufbauen?

Lassen Sie uns vor dem Eintauchen den Elefanten im Raum ansprechen: Warum nicht eine bestehende Lösung verwenden?
Wann Sie Ihre eigenen bauen:
Sie benötigen eine tiefe Integration in Ihre bestehende Anwendung
Sie haben spezifische Geschäftslogik, die nicht in generische Workflow-Tools passt
Sie wollen die volle Kontrolle über das Ausführungsmodell und Skalierung

Sie müssen externe Abhängigkeiten minimieren

Sie wollen erfahren, wie Workflow-Systeme unter der Haube funktionieren
Wann vorhandene Tools verwendet werden sollen:
Sie brauchen sofort eine bewährte, kampferprobte Lösung

Sie benötigen Funktionen wie verteilte Ausführung auf vielen Maschinen

Sie haben keine Zeit für den Bau und die Wartung einer benutzerdefinierten Infrastruktur

Für diese Serie entscheiden wir uns, unsere eigene zu bauen, weil sie uns volle Flexibilität bietet und eine ausgezeichnete Lernmöglichkeit ist.

Was wir bauen

Unser Workflow-System unterstützt mehrere Schlüsselkonzepte:

**1.**Knoten
**Knoten sind die Bausteine von Workflows.**Jeder Knoten stellt einen diskreten Aktions- oder Entscheidungspunkt dar.
**Beispiele:**HTTP-Anforderungsknoten
: Ermöglicht API-Aufrufe zu externen DienstenZustandsknoten
: Auswertet Ausdrücke und Zweige AusführungKnoten transformieren

: Prozessdaten (JSON-Manipulation, Filterung usw.)

Verzögerungsknoten

: Wartezeiten für eine bestimmte Dauer

Knoten des Auslösers

: Startet einen Workflow basierend auf Ereignissen oder Zeitplänen
1. Der Präsident. — Das Wort hat die Fraktion der Europäischen Volkspartei (Christlich-Demokratische Fraktion).
Workflows
Ein Workflow ist ein gerichteter Graph von verbundenen Knoten.
Die Daten fließen von einem Knoten zum anderen durch Verbindungen, wobei jeder Knoten die Daten nach Bedarf verarbeitet und transformiert.

3. Der Präsident. — Das Wort hat die Fraktion der Europäischen Volkspartei (Christlich-Demokratische Fraktion).

Ausführungsmaschine

Die Engine, die die Workflow-Definition interpretiert und Knoten in der richtigen Reihenfolge ausführt, Handhabung:
Sequentielle Ausführung
Parallele Ausführung (wenn Knoten nicht aufeinander angewiesen sind)
Bedingte Verzweigung
Fehlerbehandlung und Wiederholungen

Staatsexistenz

Der Präsident. — Das Wort hat die Fraktion der Europäischen Volkspartei (Christlich-Demokratische Fraktion).

Visueller Editor
Eine web-basierte Benutzeroberfläche, wo Benutzer können:
Ziehen und Ablegen von Knoten auf eine Leinwand
Knoten verbinden, indem Kanten zwischen ihnen zeichnen

Knoteneigenschaften einrichten

Test-Workflows

Ausführungsverlauf anzeigen

**5. Verordnung (EWG) Nr. 1408/71 des Rates vom 14. Juni 1971 zur Anwendung der Systeme der sozialen Sicherheit auf Arbeitnehmer und Selbständige (ABl.**Hintergrundverarbeitung
**Mit Hangfire implementieren wir:**Geplante Ausführung des Workflows
API-Abfrage für externe DatenLogik für fehlgeschlagene Hinrichtungen wiederholen
Dashboard für die Überwachung von ArbeitsplätzenTechnologie Stack
**Hier ist, was wir benutzen werden:**Hintergrund

ASP.NET Kern 9.0

: Unser Web-FrameworkKern des Rahmens der Einrichtung
: Für Daten PersistenzPostgreSQL
: Datenbank zum Speichern von Workflow-Definitionen und AusführungszustandHangfeuer
: Hintergrund der AuftragsverarbeitungSystem.Text.Json

: Für Workflow JSON Serialisierung

FrontendHTMX 2.0
: Für dynamische, servergesteuerte UI-Updates ohne JavaScriptAlpine.js
: Leichtes JavaScript-Framework für interaktive KomponentenEndwindCSS + DaisyUI

: Styling- und UI-Komponenten

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

: Zum Zeichnen von Verbindungen zwischen Knoten (wir werden Alternativen erkunden)

Infrastruktur Schwanzlutscher

{
  "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"
  }
}

: Für die Containerisierung Abschnürung

: Für strukturierte Protokollierung
Prometheus + Grafana
: Zur Überwachung

Überblick über die Architektur Unser System wird in mehreren Projekten organisiert werden:

Schlüsselentscheidungen für die Gestaltung
Begriffsbestimmungen auf der Grundlage von JSON-Knoten
Knoten werden in JSON definiert, so dass sie einfach zu Serialisierung, Version und Freigabe:

2. Der Präsident. — Das Wort hat die Fraktion der Europäischen Volkspartei (Christlich-Demokratische Fraktion). Graphenbasierte Ausführung

Workflows sind gerichtete azyklische Graphen (DAGs).
Die Ausführungsmaschine wird:
Topologische Sortierung zur Bestimmung der Ausführungsreihenfolge durchführen

Knoten nach Möglichkeit parallel ausführen

Behandeln Sie bedingte Verzweigung basierend auf Node-Ausgängen

1. Der Präsident. — Das Wort hat die Fraktion der Europäischen Volkspartei (Christlich-Demokratische Fraktion).
Beharrlichkeit des Staates
Jede Workflow-Ausführung wird verfolgt:
Status der Workflow-Instanz (Running, Completed, Failed)

Ergebnisse der Knotenausführung

Trigger-Zustände für geplante Workflows
Ausführungshistorie und Protokolle
1. Der Präsident. — Das Wort hat die Fraktion der Europäischen Volkspartei (Christlich-Demokratische Fraktion).
Erweiterbarkeit
Das Node-System wird Plugin-basiert sein:

Eingebaute Knoten für gemeinsame Operationen

Benutzerdefinierte Node-Typen können registriert werden
Node-Validierung und Schema-Durchsetzung
Was kommt in dieser Serie
Teil 2: Architektur und Kern-Workflow-Engine
Aufbau der Projektstruktur

Aufbau der Kern-Workflow-Modelle (Knoten, Workflow, Connection)

Implementierung der Graphen-Ausführungs-Engine
Topologische Sortierung und Abhängigkeitsauflösung
Teil 3: Aufbau des visuellen Editors
Erstellen der Workflow-Leinwand mit HTMX und Alpine.js
Drag-and-Drop-Knotenplatzierung

Zeichnung der visuellen Verbindung

Node-Konfigurationsfeld

Serialisierung des Workflows
Teil 4: Hangfire-Integration und staatliches Management
Einrichten von Hangfire für die Hintergrundbearbeitung
Implementierung von API-Abfrageknoten
Auslösung des Zustandsmanagements

Logik und Fehlerbehandlung wiederholen

Integration des Dashboards

Teil 5: Fortgeschrittene Funktionen und Einsatz

Implementierung benutzerdefinierter Knoten

Workflow-Versionierung

Prüfstrategien

Leistungsoptimierung