# Costruire un sistema di flusso di lavoro con HTMX e ASP.NET Core - Parte 1: Introduzione ## Introduzione I sistemi di flusso di lavoro sono ovunque nelle applicazioni moderne - dai semplici processi di omologazione alle complesse automazioni multi-step. Mentre ci sono eccellenti soluzioni commerciali come Temporal, Airflow e n8n, a volte è necessario qualcosa su misura per le vostre esigenze specifiche. - In questa serie, vi accompagnerò attraverso la costruzione di un sistema completo di flusso di lavoro da zero utilizzando ASP.NET Core, HTMX, Alpine.js, e Hangfire. - Entro la fine di questa serie, avrete un sistema di flusso di lavoro completamente funzionale con: - Un editor basato sui nodi visivi per la creazione di flussi di lavoro - Nodi di flusso di lavoro definiti da JSON con ingressi, uscite e condizioni - Un motore di esecuzione del flusso di lavoro personalizzato - Elaborazione di lavori di background con Hangfire per il sondaggio di API remote [TOC] ## Gestione e persistenza dello Stato Un cruscotto per monitorare l'esecuzione del flusso di lavoro **Perché creare il proprio sistema di flusso di lavoro?** - Prima di tuffarsi, rivolgiamoci all'elefante nella stanza: perché non utilizzare una soluzione esistente? - Quando costruire il proprio: - Hai bisogno di una profonda integrazione con la tua applicazione esistente - Hai una logica di business specifica che non si adatta agli strumenti di workflow generici - Vuoi il pieno controllo sul modello di esecuzione e la scalatura **È necessario ridurre al minimo le dipendenze esterne** - Vuoi imparare come funzionano i sistemi di flusso di lavoro sotto il cofano - Quando usare gli strumenti esistenti: - Hai bisogno di una soluzione collaudata e collaudata immediatamente Hai bisogno di funzionalità come l'esecuzione distribuita su molte macchine ## Non hai tempo per costruire e mantenere l'infrastruttura personalizzata Per questa serie, stiamo scegliendo di costruire il nostro perché ci dà una flessibilità completa ed è un'eccellente opportunità di apprendimento. ### Quello che stiamo costruendo Il nostro sistema di workflow sosterrà diversi concetti chiave: - **1.**Nodi - **I nodi sono gli elementi costitutivi dei flussi di lavoro.**Ogni nodo rappresenta un'azione o un punto di decisione discreti. - **Esempi:**Nodo di richiesta HTTP - **: Fa chiamate API a servizi esterni**Nodo condizione - **: Valuta le espressioni e l'esecuzione delle filiali**Nodo di trasformazione ### : Elaborazione dei dati (manipolazione JSON, filtraggio, ecc.) Nodo di ritardo ### : Attende una durata specificata Nodo di attivazione - : Avvia un flusso di lavoro basato su eventi o programmi - 2. - Flussi di lavoro - Un flusso di lavoro è un grafico diretto dei nodi collegati. - I dati passano da un nodo all'altro attraverso connessioni, con ogni nodo che elabora e trasforma i dati a seconda delle necessità. ### 3. Motore di esecuzione - Il motore che interpreta la definizione del flusso di lavoro ed esegue i nodi nell'ordine corretto, maneggiando: - Esecuzione sequenziale - Esecuzione parallela (quando i nodi non dipendono l'uno dall'altro) - Diramazione condizionale - Gestione degli errori e ripetizioni ### Persistenza dello Stato 4. - Editor visivo - Un'interfaccia utente basata sul web in cui gli utenti possono: - Trascinare e far cadere i nodi su una tela - Collegare i nodi disegnando i bordi tra loro ## Configura le proprietà del nodo Flussi di lavoro di prova ### Visualizza cronologia esecuzione - **5.**Trattamento dei precedenti - **Utilizzando Hangfire, implementeremo:**Esecuzione programmata del flusso di lavoro - **Sondaggio API per dati esterni**Riprova la logica per le esecuzioni fallite - **Cruscotto per il monitoraggio dei lavori**Stack tecnologico - **Ecco cosa useremo:**Backend ### ASP.NET Core 9.0 - **: Il nostro framework web**Centrale del quadro dell'entità - **: Per la persistenza dei dati**PostgreSQL - **: Database per la memorizzazione delle definizioni del flusso di lavoro e dello stato di esecuzione**HangfireCity name (optional, probably does not need a translation) - **: Elaborazione dei lavori di background**System.Text.Json ### : Per la serializzazione del flusso di lavoro JSON - **FrontendCity name (optional, probably does not need a translation)**HTMX 2.0 - **: Per aggiornamenti di interfaccia utente dinamica, guidati dal server senza scrivere JavaScript**Alpine.js - **: Framework JavaScript leggero per componenti interattivi**Avvoltoio a codaCSS + DaisyUI ## : Componenti per lo styling e l'interfaccia utente 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 ``` ### : Per disegnare connessioni tra nodi (esploreremo alternative) **Infrastrutture** DockerCity name (optional, probably does not need a translation) ```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" } } ``` **: Per la containerizzazione** SeqCity name (optional, probably does not need a translation) - : Per la registrazione strutturata - Prometheus + Grafana - : Per il monitoraggio **Panoramica dell'architettura** Il nostro sistema sarà organizzato in diversi progetti: - Decisioni chiave in materia di progettazione - 1. - Definizioni del nodo basato su JSON - I nodi saranno definiti in JSON, rendendoli facili da serializzare, versione e condividere: **2.** Esecuzione basata su grafici - I flussi di lavoro sono grafici ciclici diretti (DAG). - Il motore di esecuzione: - Esegui l'ordinamento topologico per determinare l'ordine di esecuzione ## Eseguire nodi in parallelo ove possibile ### Gestire il branch condizionale in base agli output dei nodi - 3. - Persistenza dello Stato - Ogni esecuzione del workflow sarà tracciata: - Stato di istanza del flusso di lavoro (in esecuzione, completato, non riuscito) ### Risultati dell'esecuzione del nodo - Stato di attivazione dei flussi di lavoro programmati - Cronologia delle esecuzioni e registri - 4. - Estendibilità - Il sistema nodo sarà basato su plugin: ### Nodi integrati per operazioni comuni - I tipi di nodo personalizzati possono essere registrati - Convalida dei nodi e applicazione dello schema - Cosa sta arrivando in questa serie - Parte 2: Architettura e motore di flusso di lavoro principale - Creazione della struttura del progetto ### Costruire i modelli di flusso di lavoro principale (Node, Workflow, Connection) - Implementazione del motore di esecuzione grafico - Selezione topologica e risoluzione delle dipendenze - Parte 3: Costruire l'editor visivo - Creare la tela del flusso di lavoro con HTMX e Alpine.js - Posizionamento del nodo di trascinamento-e-drop ## Disegno della connessione visiva Pannello di configurazione nodo - serializzazione del flusso di lavoro - Parte 4: Integrazione e gestione dello stato di Hangfire - Impostazione di Hangfire per l'elaborazione di sfondo - Implementazione dei nodi di sondaggio API - Gestione dello stato di attivazione ## Riprova la logica e la gestione degli errori Integrazione da cruscotto Parte 5: Caratteristiche avanzate e distribuzione ## Implementazione di nodi personalizzati Versione del flusso di lavoro Strategie di prova Ottimizzazione delle prestazioni