Структура Frontend C3

Order C3 показала внутреннее устройство подсистемы управления заказами. Теперь создадим отдельную C3 для контейнера Frontend. Сначала зададим границу детализации и добавим тринадцать существующих объектов внешнего контекста. Семь внутренних компонентов и их связи появятся в следующих уроках.

Создание Frontend C3 и подготовка её внешнего контекста..

Домен интерфейса

Диаграмма относится к домену UI/UX. В этом домене пока нет диаграмм, поэтому начинаем с команды создания первой модели представления.

Загрузка изображения...

Новая диаграмма создаётся в домене, отвечающем за пользовательский интерфейс

Новая диаграмма

Укажите наименование Детализация «Frontend» и краткое описание назначения. Выберите тип C3: этот уровень раскрывает внутренние компоненты одного контейнера и их взаимодействия.

Загрузка изображения...

В форме задаются наименование, описание и уровень детализации

Загрузка изображения...

C3 связывается с системой E-Commerce и контейнером Frontend

Граница детализации

Сначала выберите систему E-Commerce, затем контейнер Frontend. Такая привязка определяет границу диаграммы: внутри неё будут только компоненты Frontend, а остальные объекты модели образуют контекст.

Загрузка изображения...

Новая диаграмма сохраняет выбранные систему и контейнер

После открытия диаграмма пуста. Это ожидаемый результат: создание представления не добавляет на него все элементы модели автоматически.

Загрузка изображения...

Состав представления формируется явно через каталог модели

Внешний контекст

Откройте каталог существующих элементов. Из импортированной модели выберите границы RabbitMQ и PostgreSQL, их дочерние элементы, соседние подсистемы, пользователя и сам контейнер Frontend.

Загрузка изображения...

Контекст берётся из единой модели без создания дубликатов

Загрузка изображения...

Каталог позволяет собрать полный контекст одним добавлением

На диаграмме появляются все тринадцать объектов. Системы и контейнеры находятся за границей Frontend, а вложенные компоненты сохраняют принадлежность своим родителям.

Загрузка изображения...

ArchiVision сохраняет структуру импортированной модели при добавлении элементов

Результат

Основа Frontend C3 готова: на диаграмме ровно тринадцать объектов внешнего контекста, а семь внутренних компонентов и двадцать две связи пока отсутствуют. Такое разделение позволяет последовательно проверить состав, а затем отдельно объяснить архитектурные зависимости.

Загрузка изображения...

Тринадцать контекстных объектов подготовлены для добавления внутренних компонентов

Таймкоды

• 00:00 - Новая Frontend "Си три";
• 00:11 - Создание диаграммы;
• 00:20 - Наименование;
• 00:28 - Выбор "Си три";
• 00:34 - Система;
• 00:39 - Контейнер;
• 00:51 - Сохранение;
• 01:00 - Пустой уровень "Си три";
• 01:07 - Каталог модели;
• 01:17 - Граница и пользователь;
• 01:36 - Добавление контекста;
• 01:40 - Проверка состава;
• 01:42 - Основа готова.

Предыдущий урок: Девять связей на C3.

Следующий урок: Компоненты Frontend C3.