# Побудова системи обробки за допомогою HTMX і ядра ASP.NET - Частина 1: Вступ ## Вступ Системи, що працюють по всьому світі в сучасних програмах - від простих процесів схвалення до складних багатопроходних автоматизацій. Хоча існують чудові комерційні рішення, такі, як Темпорал, Повітряний потік і n8n, іноді вам потрібно щось пристосоване до ваших конкретних потреб. - У цій серії, я проведу вас через створення повної робочої системи з нуля, використовуючи ядро ASP.NET, HTMX, Billian.js, і Hangfire. - До кінця цієї серії, у вас буде повноцінна робоча система за допомогою: - Візуальний редактор для збирання робочих потоків, заснований на вузлах - Вузли, визначені JSON з вхідними даними, виводами і умовами - Нетиповий рушій виконання робочого процесу - Обробка завдань тла за допомогою Hangfire для опитування віддалених програм API [TOC] ## Керування державою і наполегливість Панель приладів для спостереження за виконанням робочого процесуName **Навіщо будувати власну систему обробки?** - Перш ніж зануритись, давайте звернемося до слона в кімнаті: чому б не використати існуюче рішення? - Коли ви збираєте власних: - Вам потрібна глибока інтеграція з вашою існуючою програмою - Ви маєте специфічну логіку для бізнесу, яка не вписується в загальні робочі інструменти. - Ви хочете мати повний контроль над моделлю виконання і масштабуванням **Вам слід мінімізувати зовнішні залежності** - Ви хочете дізнатися, як робочі системи працюють під капотом - Коли використовувати існуючі інструменти: - Вам потрібно підтверджене, випробуване бойове рішення негайно Вам потрібні такі можливості, як розподілення виконання на багатьох комп' ютерах ## У вас немає часу на будівництво і підтримання нетипової інфраструктури. Для цієї серії статей ми вирішили побудувати свою власну, тому що вона дає нам цілковиту гнучкість і є чудовою можливістю навчатися. ### Що ми будуємо Наша система обробки матиме підтримку декількох ключових концепцій: - **1.**Вузли - **Вузли - це будівельні блоки процесу.**Кожен вузол представляє перервну дію або точку прийняття. - **Приклади:**Вузол HTTP- запиту - **: Робить виклики API зовнішніми службами**Вузол умови - **: Обчислює вирази і виконання гілок**Вузлом перетворення ### : Обробки даних (керування JSON, фільтрування тощо) Затримка вузла ### : Чекає на вказану тривалість Вузлом вмикання - : Починає роботу, засновану на подіях або розкладах - 2. - Потоки - Робочий потік - це керований графік з' єднаних вузлів. - Дані передаються від одного вузла до іншого через з' єднання з обробкою кожного вузла і перетворенням даних за потреби. ### 3. Рушій виконанняComment - Рушій, який інтерпретує визначення робочого потоку і виконує вузли у правильному порядку: - Послідовне виконання - Паралельна виконання (якщо вузли не залежать одне від одного) - Умова розгалуження - Обробка помилок і повторень ### Наполегливість станів 4. - Візуальний редактор - Комп' ютерний інтерфейс, заснований на мережі, де користувачі можуть: - Перетягніть і скиньте вузли на полотно - З' єднати вузли малюючи краї між ними ## Налаштувати властивості вузла Тестовий процес ### Переглянути журнал виконання - **5.**Обробка тла - **Используем Hangfire, мы воспользуемся:**Виконання запланованої роботи - **Опитування зовнішніх даних API**Повторити логіку для невдалих виконання - **Панель приладів для спостереження за завданнями**Стек технології - **Ось що ми використаємо:**Сервер ### ASP. NET Core 9. 0 - **: Наша веб- база**Ядро блокування сутності - **: Для наполегливості даних**PostgreSQL - **: База даних для зберігання визначень робочого потоку і стану виконання**Пожежа - **: Обробка фонових завдань**System.Text. Json ### : Для створення серіалізації JSON - **Графічна оболонка**HTMX 2. 0 - **: Для динамічних, заснованих на сервері оновлень інтерфейсу користувача без запису JavaScript**Альпійський.js - **: Невимоглива оболонка JavaScript для інтерактивних компонентів**TailCSS + DaisUI ## : Компоненти Styling і UI LeadLine ``` 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 ``` ### : Для малювання з' єднань між вузлами (ми дослідимо альтернативи) **Інфраструктура** Панель ```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" } } ``` **: Для контейнеризації** Seq - : Для ведення лісозаготівлі з структурою - Prometheus + Grafana - : Для спостереження **Огляд архітектури** Наша система буде організована в декілька проектів: - Ключові рішення - 1. - Визначення вузлів JSON- Based - Вузли буде визначено у JSON, що зробить їх простішими у послідовній формі, версії і спільному ресурсі: **2.** Графік- обчислене виконання - Робочі потоки спрямовані на циклічні графіки (DAGS). - Рушій виконання: - Виконати топологічне впорядкування, щоб визначити порядок виконання ## Виконати вузли паралельно, якщо можливо ### Працювати з умовними гілками на основі виводів вузлів - 3. - Наполегливість держави - За кожним виконанням буде стежено: - Стан екземпляра робіт (Погашення, Завершено, Невдача) ### Результати виконання вузлів - Задіяти стани для запланованих потоків - Запис журналу і журналу - 4. - Витонченість - Система вузлів буде базована на додатках: ### Вбудовані вузли для звичайних операцій - Нетипові типи вузлів можна зареєструвати - Перевірка і керування схемами вузлів - Що відбудеться у цій серії - Частина 2: Рушій архітектури і роботи ядраName - Налаштування структури проекту ### Побудова моделей роботи з ядром (Node, Workflow, Connection) - Впровадження рушія виконання графів - Верхнє впорядкування і роздільна здатність - Частина 3. Побудова візуального редактора - Створення полотна робочого процесу за допомогою HTMX і Billian.js - Розташування вузлів перетягування зі скиданням ## Наочний малюнок з' єднання Панель налаштування вузлів - Серіалізація робіт - Частина 4: Інтеграція та керування державою - Налаштування whangfire для фонової обробки - Впровадження протоколів опитування API - Керування станами ## Спробувати логіку і обробку помилок Інтеграція дошки приладів Частина 5: Додаткові можливості і впровадження ## Впровадження власних вузлів Версія робочого процесу Перевірка стратегій Оптимізація швидкодії