# Construction d'un système de flux de travail avec HTMX et ASP.NET Core - Partie 1: Introduction ## Présentation Les systèmes de flux de travail sont partout dans les applications modernes - de simples processus d'approbation à des automatismes multi-étapes complexes. Bien qu'il existe d'excellentes solutions commerciales comme Temporal, Airflow et n8n, parfois vous avez besoin de quelque chose adapté à vos besoins spécifiques. - Dans cette série, je vais vous guider dans la construction d'un système de workflow complet à partir de zéro en utilisant ASP.NET Core, HTMX, Alpine.js et Hangfire. - À la fin de cette série, vous disposerez d'un système de workflow entièrement fonctionnel avec : - Un éditeur visuel basé sur des nœuds pour construire des flux de travail - Nœuds de flux de travail définis par JSON avec entrées, sorties et conditions - Un moteur d'exécution de workflow personnalisé - Traitement de travail de fond avec Hangfire pour les API à distance de sondage [TOC] ## Gestion et persistance de l ' État Un tableau de bord pour le suivi de l'exécution du flux de travail **Pourquoi construire votre propre système de flux de travail?** - Avant de plonger, abordons l'éléphant dans la pièce : pourquoi ne pas utiliser une solution existante ? - Quand construire votre propre : - Vous avez besoin d'une intégration profonde avec votre application existante - Vous avez une logique d'affaires spécifique qui ne s'intègre pas dans les outils de workflow génériques - Vous voulez un contrôle total sur le modèle d'exécution et l'échelle **Vous devez minimiser les dépendances externes** - Vous voulez apprendre comment les systèmes de workflow fonctionnent sous le capot - Quand utiliser les outils existants : - Vous avez besoin d'une solution éprouvée et éprouvée immédiatement Vous avez besoin de fonctionnalités comme l'exécution distribuée sur de nombreuses machines ## Vous n'avez pas le temps de construire et de maintenir une infrastructure personnalisée Pour cette série, nous choisissons de construire la nôtre parce qu'elle nous donne une totale flexibilité et est une excellente opportunité d'apprentissage. ### Ce que nous construisons Notre système de flux de travail prendra en charge plusieurs concepts clés: - **1. Le Conseil de l'Europe a adopté une résolution du Conseil de l'Europe sur la situation des droits de l'homme dans le monde.**Noeuds - **Les nœuds sont les éléments constitutifs des flux de travail.**Chaque noeud représente un point d'action ou de décision distinct. - **Exemples:**Noeud de requête HTTP - **: Effectue des appels API vers des services externes**Numéro d'état - **: Évaluer les expressions et l'exécution des branches**Transformer le nœud ### : Données sur les processus (manipulation JSON, filtrage, etc.) Noeud de retard ### : Attend une durée déterminée Déclencheur Noeud - : Démarre un workflow basé sur des événements ou des horaires - 2. Le Président. — L'ordre du jour appelle le rapport (doc. - Flux de travail - Un workflow est un graphique dirigé de nœuds connectés. - Les données circulent d'un noeud à l'autre par le biais de connexions, chaque nœud étant traité et transformant les données au besoin. ### 3. Les droits de l'homme sont garantis par le Pacte international relatif aux droits économiques, sociaux et culturels. Moteur d'exécution - Le moteur qui interprète la définition du flux de travail et exécute les nœuds dans l'ordre correct, la manipulation: - Exécution séquentielle - Exécution parallèle (lorsque les nœuds ne dépendent pas l'un de l'autre) - Branchement conditionnel - Gestion des erreurs et récupérations ### Résistance de l ' État 4. Le Président. — L'ordre du jour appelle le rapport (doc. - Éditeur visuel - Une interface utilisateur Web où les utilisateurs peuvent : - Faites glisser et déposez des nœuds sur une toile - Connecter les nœuds en dessinant les bords entre eux ## Configurer les propriétés des nœuds Tester les flux de travail ### Afficher l'historique de l'exécution - **5.**Traitement des données de base - **En utilisant Hangfire, nous allons implémenter :**Exécution programmée du flux de travail - **Sondage API pour les données externes**Réessayez la logique pour les exécutions ratées - **Tableau de bord pour le suivi des emplois**Stack technologique - **Voici ce que nous allons utiliser:**Moteur ### ASP.NET Core 9.0 - **: Notre cadre web**Cadre de base pour les entités - **: Pour la persistance des données**PostgreSQLTM - **: Base de données pour stocker les définitions de flux de travail et l'état d'exécution**Feu-croisement - **: Traitement de l'emploi de base**Système.Texte.Json ### : Pour la sérialisation JSON de workflow - **Frontière**HTMX 2.0 - **: Pour les mises à jour de l'interface utilisateur dynamique et pilotée par le serveur sans écrire JavaScript**Alpine.js - **: Cadre JavaScript léger pour composants interactifs**TailwindCSS + DaisyUI ## : Composants de styling et d'assurance-chômage 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 ``` ### : Pour dessiner des connexions entre les nœuds (nous explorerons des alternatives) **Infrastructures** Poivrons ```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" } } ``` **: Pour la conteneurisation** Séq. - : Pour l'exploitation structurée - Prométhée + Grafana - : Pour le suivi **Vue d'ensemble de l'architecture** Notre système sera organisé en plusieurs projets : - Principales décisions de conception - 1. Le Conseil de l'Europe a adopté une résolution du Conseil de l'Europe sur la situation des droits de l'homme dans le monde. - Définitions fondées sur les nœuds JSON - Les nœuds seront définis dans JSON, ce qui facilitera leur sérialisation, leur version et leur partage : **2. Le Président. — L'ordre du jour appelle le rapport (doc.** Exécution basée sur les graphiques - Les flux de travail sont des graphiques acycliques dirigés (DAG). - Le moteur d'exécution: - Effectuer le tri topologique pour déterminer l'ordre d'exécution ## Exécuter les nœuds en parallèle si possible ### Gérer l'embranchement conditionnel en fonction des sorties des nœuds - 3. Les droits de l'homme sont garantis par le Pacte international relatif aux droits économiques, sociaux et culturels. - Persistance de l'État - Chaque exécution du workflow sera suivie : - État de l'instance de flux de travail (Running, Complété, Échec) ### Résultats de l'exécution des nœuds - États déclencheurs pour les flux de travail programmés - Historique de l'exécution et registres - 4. Le Président. — L'ordre du jour appelle le rapport (doc. - Extensibilité - Le système de nœuds sera basé sur le plugin: ### Nœuds intégrés pour des opérations communes - Les types de nœuds personnalisés peuvent être enregistrés - Validation des nœuds et application des schémas - Ce qui vient dans cette série - Partie 2: Architecture et moteur de flux de travail de base - Mise en place de la structure du projet ### Construire les modèles de flux de travail de base (Node, Workflow, Connection) - Mise en œuvre du moteur d'exécution du graphique - Tri topologique et résolution de dépendance - Partie 3: Construire l'éditeur visuel - Création de la toile de flux de travail avec HTMX et Alpine.js - Déplacement des nœuds de glisser-déposer ## Dessin de la connexion visuelle Panneau de configuration du nœud - Sérialisation des flux de travail - Partie 4: Intégration des feux de hang et gestion de l'État - Configuration de Hangfire pour le traitement de l'arrière-plan - Mise en œuvre des nœuds de vote API - Déclenchement de la gestion de l'État ## Réessayer la logique et le traitement des erreurs Intégration des tableaux de bord Partie 5: Caractéristiques avancées et déploiement ## Mise en œuvre de nœuds personnalisés Version de flux de travail Stratégies d'essai Optimisation des performances