# 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 [TOC] ## 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 diensten**Voorwaardeknoop - **: Evalueert expressies en branches uitvoering**Knooppunt 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 - 2. - 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 4. - 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 gegevens**Logica opnieuw proberen voor mislukte uitvoeringen - **Dashboard voor het monitoren van taken**Technologie Stack - **Dit is wat we gaan gebruiken:**Backend ### ASP.NET Kern 9.0 - **: Ons webkader**Kern van het entiteitskader - **: Voor persistentie van gegevens**PostgreSQL - **: Database voor het opslaan van workflow definities en uitvoeringstoestand**Hangvuur - **: Achtergrondtaakverwerking**System.Text.Json ### : Voor workflow JSON serialisatie - **Frontend**HTMX 2.0 - **: Voor dynamische, servergestuurde UI-updates zonder het schrijven van JavaScript**Alpine.jsunit synonyms for matching user input - **: Lichtgewicht JavaScript-raamwerk voor interactieve componenten**TailwindCSS + 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 ```json { "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 - 1. - 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 - 3. - 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 - 4. - 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