Bouwen van een workflow systeem met HTMX en ASP.NET Core - Deel 1: Inleiding (Nederlands (Dutch))

Bouwen van een workflow systeem met HTMX en ASP.NET Core - Deel 1: Inleiding

Wednesday, 15 January 2025

//

6 minute read

Inleiding

Werkstroomsystemen zijn overal in moderne toepassingen - van eenvoudige goedkeuringsprocessen tot complexe multi-stap automatiseringen.

Hoewel er uitstekende commerciële oplossingen zijn zoals Temporal, Airflow en n8n, heb je soms iets nodig dat op jouw specifieke behoeften is afgestemd.

  • In deze serie, zal ik u begeleiden door het bouwen van een complete workflow systeem vanaf nul met behulp van ASP.NET Core, HTMX, Alpine.js, en Hangfire.
  • Aan het einde van deze serie heb je een volledig functioneel workflow systeem met:
  • Een visuele node-gebaseerde editor voor het bouwen van workflows
  • JSON-gedefinieerde workflowknooppunten met ingangen, outputs en voorwaarden
  • Een aangepaste workflow uitvoering engine
  • Achtergrondtaak verwerken met Hangfire voor het peilen van externe API's

Beheer en persistentie van de staat

Een dashboard voor het monitoren van de uitvoering van de workflow

Waarom uw eigen workflow systeem bouwen?

  • Voordat we naar binnen duiken, laten we ons richten op de olifant in de kamer: waarom geen bestaande oplossing gebruiken?
  • Wanneer moet u uw eigen bouwen:
  • Je hebt diepe integratie nodig met je bestaande toepassing
  • Je hebt specifieke bedrijfslogica die niet past in generieke workflow tools
  • U wilt volledige controle over het uitvoeringsmodel en schaalvergroting

U moet externe afhankelijkheden minimaliseren

  • U wilt leren hoe workflow systemen werken onder de motorkap
  • Wanneer bestaande hulpmiddelen moeten worden gebruikt:
  • Je hebt onmiddellijk een bewezen, door de strijd geteste oplossing nodig.

U hebt functies zoals gedistribueerde uitvoering over vele machines nodig

U heeft geen tijd om aangepaste infrastructuur te bouwen en te onderhouden

Voor deze serie kiezen we ervoor om zelf te bouwen omdat het ons volledige flexibiliteit geeft en een uitstekende leermogelijkheid is.

Wat we aan het bouwen zijn

Ons workflowsysteem ondersteunt verschillende belangrijke concepten:

  • **1.**Knooppunten
  • **Knooppunten zijn de bouwstenen van workflows.**Elke knooppunt vertegenwoordigt een discrete actie of beslissingspunt.
  • **Bijvoorbeeld:**HTTP-verzoekknooppunt
  • : Maakt API oproepen naar externe dienstenVoorwaardeknoop
  • : Evalueert expressies en branches uitvoeringKnooppunt transformeren

: Processen gegevens (JSON manipulatie, filteren, enz.)

Knooppunt vertragen

: Wachten op een bepaalde duur

Trigger-knooppunt

  • : Start een workflow op basis van evenementen of schema's
  • Werkstromen
  • Een workflow is een gerichte grafiek van verbonden knooppunten.
  • Gegevens stromen van de ene knooppunt naar de andere door verbindingen, met elke knooppuntverwerking en het transformeren van de gegevens naar behoefte.

3.

Uitvoeringsmotor

  • De motor die de workflow definitie interpreteert en knooppunten in de juiste volgorde uitvoert:
  • Sequentiële uitvoering
  • Parallelle uitvoering (wanneer knooppunten niet van elkaar afhankelijk zijn)
  • Voorwaardelijke vertakken
  • Fout bij het hanteren en opnieuw uitvoeren

Persistentie van de staat

  • Visuele editor
  • Een web-based UI waar gebruikers kunnen:
  • Knooppunten op een canvas slepen en neerzetten
  • Knooppunten verbinden door tussen de randen te tekenen

Node-eigenschappen configureren

Testworkflows

Uitvoergeschiedenis tonen

  • **5.**Achtergrondverwerking
  • **Met behulp van Hangfire, zullen we implementeren:**Geplande workflow-uitvoering
  • API-peilingen voor externe gegevensLogica opnieuw proberen voor mislukte uitvoeringen
  • Dashboard voor het monitoren van takenTechnologie Stack
  • **Dit is wat we gaan gebruiken:**Backend

ASP.NET Kern 9.0

  • : Ons webkaderKern van het entiteitskader
  • : Voor persistentie van gegevensPostgreSQL
  • : Database voor het opslaan van workflow definities en uitvoeringstoestandHangvuur
  • : AchtergrondtaakverwerkingSystem.Text.Json

: Voor workflow JSON serialisatie

  • FrontendHTMX 2.0
  • : Voor dynamische, servergestuurde UI-updates zonder het schrijven van JavaScriptAlpine.jsunit synonyms for matching user input
  • : Lichtgewicht JavaScript-raamwerk voor interactieve componentenTailwindCSS + DaisyUI

: Styling en UI componenten

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

: Voor het tekenen van verbindingen tussen knooppunten (we zullen alternatieven verkennen)

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

: Voor containerisatie Seq

  • : Voor gestructureerde logging
  • Prometheus + Grafana
  • : Voor monitoring

Overzicht architectuur Ons systeem zal worden georganiseerd in verschillende projecten:

  • Belangrijkste ontwerpbesluiten
  • Definities van op JSON gebaseerde knooppunten
  • Nodes zal worden gedefinieerd in JSON, waardoor ze gemakkelijk te serialiseren, versie, en delen:

2. Grafische uitvoering

  • De workflows zijn acyclische grafieken (DAG's).
  • De uitvoeringsmotor zal:
  • Topologisch sorteren om de uitvoeringsvolgorde te bepalen

Waar mogelijk parallel nodes uitvoeren

Conditionele vertakking hanteren op basis van node-uitgangen

  • State Persistence
  • Elke workflow uitvoering zal worden gevolgd:
  • Werkstroom-instance-status (lopend, voltooid, mislukt)

Knooppuntuitvoeringsresultaten

  • Triggertoestanden voor geplande workflows
  • Geschiedenis en logboeken van de uitvoering
  • Extensibiliteit
  • Het knooppunt systeem zal worden plugin-based:

Ingebouwde knooppunten voor gemeenschappelijke operaties

  • Aangepaste knooppunttypes kunnen worden geregistreerd
  • Knoopvalidatie en handhaving van schema's
  • Wat komt er in deze serie?
  • Deel 2: Architectuur en kernworkflow-engine
  • Het opzetten van de projectstructuur

Bouwen van de kern workflow modellen (Node, Workflow, Connection)

  • Uitvoering van de grafiek uitvoering motor
  • Topologische sorteer- en afhankelijkheidsresolutie
  • Deel 3: Bouwen van de visuele editor
  • Het maken van het workflow canvas met HTMX en Alpine.js
  • Plaatsing van knooppunt slepen en neerzetten

Visuele verbindingstekening

Knooppuntconfiguratiepaneel

  • Werkstroomserialisatie
  • Deel 4: Hangvuurintegratie en staatsbeheer
  • Hangfire instellen voor achtergrondverwerking
  • Implementatie van API-peilingen
  • Beheer van de triggerstaat

Logica en foutafhandeling opnieuw proberen

Integratie van dashboards

Deel 5: Geavanceerde kenmerken en implementatie

Aangepaste knooppunten implementeren

Workflow-versie

Teststrategieën

Optimalisatie van de prestaties

Finding related posts...
logo

© 2026 Scott Galloway — Unlicense — All content and source code on this site is free to use, copy, modify, and sell.