# Att bygga ett arbetsflödessystem med HTMX och ASP.NET Core | - | Part |1: | Inleiding ## Inleiding Workflow-system finns överallt i moderna tillämpningar. - från enkla godkännande till komplexa multi-processer -steg-automatiseringar M SK2 Medan det finns utmärkta kommersiella lösningar som Temporal, AirflowMska4 och nMske5nMsek6 ibland behöver du något anpassat till dina specifika behov Mska7 I denna serieMskar8 JagMkar9 kommer att leda dig genom att bygga ett komplettt arbetsruttssystem från början med hjälp av ASP~Mskar10~NET Core~Mska11~HTMX~,~ Alpine~.~js~,~ och Hangfire~MksK15~ Till slutet av denna serie kommer du att ha ett helt funktionellt arbetsflödessystem med - Ett visuellt nod-baserade redigerare för byggande av arbetsflöden - JSON-bestämda arbetsflödesnoder med ingångarM SK1 utgångar , och villkor - En anpassad arbetsflödets drivkraft - Ta hand om bakgrundsjobb med Hangfire för att rösta på fjärran API - Statens ledning och uthållighet - Ett dashboard för att övervaka utvecklingen av arbetsflödet [TOC] ## Varför bygga ditt eget arbetssystem? Innan du dyker in ska du tala till elefanten i rummet. Varför inte använda en fungerande lösning? **När man bygger sin egen** - Du behöver en djup integration med din nuvarande applikation - Du har en specifik affärslogi som inte passar in i generiska arbetsflödesverktyg. - Du vill ha full kontroll över Ausführungsmodellen och skaleringen - Du behöver minimera externa beroenden - Du vill lära dig hur arbetsflöden fungerar under kapseln **När man ska använda existerande verktyg:** - Du behöver en bevisad lösning omedelbart - Du behöver egenskaper som distribuerad exécution över många maskiner - Du har inte tid att bygga och underhålla egna infrastrukturer För den här serien, ,, väljer vi att bygga vår egen eftersom det ger oss full flexibilitet och är en utmärkt läromlärning. ## Vad vi bygger Vårt arbetsflödessystem kommer att stödja flera viktiga koncept. ### 1. Noder Noder är byggstenarna för arbetsflöden. Varje nod representerar en diskret handling eller beslutspunkt - **HTTP begäran noder**: Gör API-sändningar till externa tjänster - **Bedingande noder**: Bedömer uttryck och ramverksöverdrag - **Omvandla noder**: Bearbetar data - **Vändpunkt**: Vänter på en specifik tid - **Trigger- noder**: Startar ett arbetsflöde baserat på händelser eller planer ### 2. arbetsflöden Ett arbetsflöde är en riktad graf av anslutna noder. Data strömmar från en nod till en annan genom anslutningar, med varje nod som bearbetar och omvandlar data så som det behövs . ### 3. Ausführungsmotor Motorn som tolkar definitionen av arbetsflödet och utför noder i rätt ordning - Sekvensella ställda in - Parallell ប្រតិបត្តិing ( när noder inte är beroende av varandra - Bedingande granskning - Fehlerbehandling och repetitioner - Statens uthållighet ### 4. Visuell redigerare Ett webbaserat ”-”-gränssnitt där användare kan - Drag och droppa noder på en canvas - Koppla noder genom att riva kanten mellan dem - Konfigurera noder egenskaper - Testa arbetsflöden - Se uitvoeringshistorien ### 5. bakgrundsprocessing Med Hangfire implementerar vi - Avslutande arbetsflöde - API-röstning för extern data - Försök igen logiken för misslyckade utdrag - Dashboard för övervakning av uppgifter ## Teknologistack Här är vad vi kommer att använda ### Agterkant - **ASP.NET Core 9.0**: Vår webbplattform - **Enhetens ramskärna**: För datahållighet - **PostgreSQL**: Databas för att lagra definitioner av arbetsflödet och utförande tillstånd - **Hangfire**: Historisk arbetsprocess - **System.Text.Json**: För JSON serialisering i arbetsflödet ### Framsida - **HTMX 2.0**: För dynamiska , server -driven UI-uppdateringar utan att skriva JavaScript - **Alpine.js**: Lightweight JavaScript ram för interaktiva komponenter - **TailwindCSS + DaisyUI**: Stylisering och gränssnittkomponenter - **LeaderLine**: För att rita anslutningar mellan noder | ( | vi | ' | ska utforska alternativ ### Infrastruktur - **Docker**: För containerisering - **Seq**: För strukturerad loging - **Prometheus + Grafana**: För övervakning ## Arkitektur överblick Vårt system kommer att organiseras i flera projekt ``` 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 ``` ### Nyckel till designdecisioner **1. JSON-grundade noderdefinitioner** Noder kommer definieras i JSON, vilket gör att de är enkla att serialisera ```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" } } ``` **2. Graph** Arbetsflöden är riktade acykliska grafer (DAGs). Den utförande maskinen kommer - Gör topologisk sortering för att bestämma ordning på utförningen - Att utföra noder parallellt när möjligt - Handle villkorlig granskning baserat på noderutsläpp **3. Standhållighet** Varje arbetsflödes realisation kommer följas: - Instansstaten i arbetsflödet (Running , KlappdM SK2 Misslyckad) - Noderimplementeringsresultat - Trigger tillstånd för avsedda arbetsflöden - Ausführungshistoria och loger **4. Brejbarhet** Nodersystemet kommer att vara plugin - Inbyggda "-" -knoder för vanliga operationer - Custom node-typer kan registreras - Nodervalidation och schemaövervakning ## Vad kommer i den här serien? ### Del 2: Architecture and Core Workflow Engine - Att sätta upp projektets struktur - Att bygga kärnans arbetsflödesmodeller (Knod, arbetsflödet , anslutningM SK3 - Implementering av grafimplementeringsmotorn - Topologisk sortering och beroende lösning ### Del 3: Att bygga den visuella redaktören - Att skapa arbetsflödet med HTMX och Alpine.js - Drag-and-drop node placering - Visuella kopplingszeichnunger - Noder Konfigurationspanel - Serialisering av arbetsflödet ### Del 4: Hangfire Integration and State Management - Att sätta upp Hangfire för bakgrundsbehandling - Implementering av API-röstningspunkter - Trigger tillståndshantering - Försök om logik och handling av fel - Tavlansintegrering ### Del 5: avancerade egenskaper och utplacering - Implementering av egna noder - Versionering av arbetsflödet - Teststrategier - Performanceoptimering - Dockerimplementering ## Förberedelser För att följa med den här serien måste du ha - .NET 9.0 SDK installerad - Grundkenntnisse i ASP.NET Core MVC - Välbekant med enhetens ramverkets kärna - Understanding of HTML, CSS, and basic JavaScript - Docker (optionell, för att köra beroendenM SK2 ## Nu börjar det I nästa artikel, ,, dyker vi direkt in i att bygga kärnans arbetsflödesmotor. ., skapar modeller, implementerar drivkraften och skriver vårt första arbetsflöde som kan utföras programmerat. Det kommer att vara en kul resa. ## Slutsatsen Att bygga ett arbetsflöde från början är ett ambitiöst projekt, men det är också otroligt belönande. Du kommer få djupa insikter i hur moderna automatiserade plattformar fungerar, och du kommer få ett system som är perfekt anpassat till dina behov. I delen 2, börjar vi koda ', sätter upp projektets struktur och bygger kärnan i arbetsflödet som kan utföra våra noder, | | - | baserade arbetsflöden. Stanna tuned!