Bouwen van een workflow systeem met HTMX en ASP.NET Core - Deel 1: Inleiding
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