Структура Веб-фреймворків та Приклад ITSM
Цей розділ містить базові відомості та технічну документацію архітектури системи N2O/NITRO/BPE/FORM, яка була використана для розробки ITSM та ITSM.
Мапа Сторінок Системи (Sitemap)
Нижче наведено ієрархію всіх інтерфейсних сторінок інтегрованої системи:
📁 ITSM Enterprise Suite (http://localhost:8004/app/index.htm)
│
├── 🔑 Вхід до системи (login.htm)
│
├── 👤 Кабінет споживача (consumer/)
│ ├── 🏠 Головна кабінету (portal.htm)
│ ├── 📈 Споживання та послуги (consume.htm)
│ ├── 👤 Профіль клієнта (profile.htm)
│ └── 🛠️ Налаштування послуг (service.htm)
│
├── 🏢 Бекофіс / Панель оператора (backoffice/)
│ ├── 🖥️ Консоль опрацювання звернень (console.htm)
│ ├── 📁 Каталог ІТ-сервісів (itsm_services.htm)
│ ├── 🚨 Журнал інцидентів (itsm_incidents.htm)
│ ├── 🔄 Запити на зміни (itsm_changes.htm)
│ ├── 👥 Ролі та користувачі (domains.htm)
│ ├── ⚡ Тарифи білінгу (tariffs.htm)
│ └── 📊 Звітність та аналітика (reports.htm)
│
└── ⚙️ Панель адміністратора BPE (admin/)
├── 📁 Управління процесами (bpe.htm)
├── 📄 Форми та метадані (form.htm)
├── 📦 База даних KVS (kvs.htm)
├── 🕸️ Протокол N2O (n2o.htm)
└── 🗄️ Сховище Mnesia (mnesia.htm)
ITSM: Сторінка створення клієнтів
Дана стаття описує загальну структуру веб-фреймворків та на прикладі N2O показує як створювати активні сторінки та сайти на Erlang/OTP платформі та мові програмування Elixir.
Репозиторій ITSM реалізує ідіоматичний приклад — білінгову систему для телеком- та електрооператорів. Користувачі у цій системі діляться на два типи: 1) адміністратори, які визначають тарифні моделі та створюють рахунки користувачів, та 2) споживачі, які замовляють послуги.
Загальна Структура Веб-фреймворків
Веб-фреймворки можна умовно поділити на два великі класи:
1) клієнтські фреймворки, що будують сторінку повністю на клієнті, передаючи лише дані та
бізнес-об'єкти;
2) серверні фреймворки, що будують сторінку на сервері та передають рендерені елементи. Веб-фреймворк
NITRO належить до другого класу.
Незалежно від класу фреймворку, всі вони мають спільні рівні архітектури відповідно до ISO 42010:
Рівень дизайну (front-end):
— Загальні стилі сторінки (BLANK.CSS)
— Стилі полів та форм (FORM.CSS)
— Стилі меню та адмін-панелі (ADMIN.CSS)
Веб-стек (front-end):
— Статичний та динамічний роутер (N2O)
— Парсер параметрів URL (N2O)
— Сесійний шар (контексти сервера та клієнта) N2O
— Рівень контролерів (логіка сторінки NITRO)
— Рівень представлення (мова HTML5 елементів NITRO)
— Рівень бізнес-об'єктів (мова X-FORMS)
Зберігання та Бізнес-логіка (back-end):
— Рівень моделей даних (KVS, MNESIA, Erlang HRL файли)
— Рівень бізнес-процесів (BPE)
— Рівень контролю доступу (ABAC)
Для кожного архітектурного рівня модель N2O.DEV пропонує свою бібліотеку. Для даних — KVS, яка абстрагує Mnesia чи SQL. Для інтерфейсу — NITRO. Для валідації полів — FORM. Мережеві з'єднання та повідомлення контролюються N2O. Для бізнес-процесів використовується BPE, яка реалізує стандарт BPMN ISO 19510.
Створення Сторінки Користувачів в прикладі ITSM
1. Створення Статичного HTML Контейнера
Кожна сторінка NITRO/N2O містить стандартний набір скриптів. Вони виконують функцію підключення WebSocket каналу та обробки оновлень сторінки безпосередньо з сервера.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/blank.css" />
<link rel="stylesheet" href="css/forms.css" />
<link rel="stylesheet" href="css/admin.css" />
</head>
<body>
<div id="ctrl"></div>
<div id="frms"></div>
<script src='https://ws.n2o.dev/priv/n2o.js'></script>
</body>
</html>
2. Підключення Контролера до Роутера
Контролер сторінки опрацьовує WebSocket події від DOM-елементів. Він підключається у файлі
lib/routes.ex:
defroute(<<"app/backoffice/domains", _::binary>>), do: ITSM.Domains
3. Створення Бізнес-моделі
Дані описуються в Erlang .hrl файлах, наприклад include/client.hrl:
-record(client, {
id = kvs:seq([],[]),
phone = <<>>,
names = <<>>,
surnames = <<>>,
type = consumer
}).
4. Створення форми вводу
Форма описується за допомогою FORM DSL в Elixir:
FORM.document(
name: :client_form,
buttons: [
FORM.but(id: :proceed, title: "Create", postback: {:CreateClient, :client_form})
],
fields: [
FORM.field(id: :names, type: :string, title: "Name:")
]
)