Перейти к содержанию

M4: Blazor UI и подготовка к защите

Заключительная веха Фазы 1. На M4 поверх API из M3 строится пользовательский интерфейс на Blazor Server, а проект доводится до состояния, готового к гейту защиты: документация, демо-сценарий, проработка вопросов для code review.

⚠️ Уровень детализации. Постановка задачи и целевые навыки зафиксированы. Конкретные шаги реализации (состав страниц, выбор компонентов Radzen, структура демо) — самостоятельное решение стажёра на основе материалов. Снять пометку и уточнить детали можно после сверки с intern-development-strategy-design.md.

Срок

Месяцы 5–6 Фазы 1 (~50–80 часов, включая подготовку к защите).

Цель

  • Построить Blazor Server UI для работы с проектом защиты.
  • Подготовить проект к гейту: README, docs/defense.md, демо-сценарий.
  • Подготовиться к code review: знать свой код, уметь обосновывать решения.

Целевые навыки

Группа Что осваивается
Blazor Server Компоненты .razor, маршрутизация, @page, @code, @inject
Razor-синтаксис @if, @foreach, @bind, @onclick, интерполяция строк
Жизненный цикл компонента OnInitializedAsync, загрузка данных
Формы и валидация EditForm, InputText, DataAnnotationsValidator или FluentValidation
Radzen.Blazor Базовые компоненты Radzen как альтернатива голым HTML-элементам
HTTP-клиент из Blazor HttpClient, GetFromJsonAsync, PostAsJsonAsync
Demo-навык Подготовка и проведение демо своего кода
Code review-готовность Умение объяснить направление зависимостей, обосновать выбор конвенций

Технологии на M4

  • Radzen.Blazor — UI-компоненты
  • System.Net.Http.Json — helpers для HTTP из Blazor

Задание

Постановка

Поверх API из M3 построить Blazor Server UI, через который пользователь может:

  • просматривать данные проекта защиты (проекты → выработки → образцы → параметры);
  • загружать новые данные через парсер;
  • при желании — редактировать и удалять записи.

Параллельно подготовить проект к гейту защиты.

Требования к результату

UI — навигация по данным

Минимальный набор страниц, обеспечивающий навигацию по иерархии данных:

  • список проектов;
  • детали проекта (выработки в нём);
  • детали выработки (образцы);
  • детали образца (лабораторные данные и значения параметров).

Структура страниц, состав колонок, навигация между ними — самостоятельное решение. Руководствоваться соображениями удобства: пользователь должен иметь возможность за разумное число кликов дойти от проекта до значения параметра и обратно.

UI — загрузка данных

Минимум одна страница с формой загрузки файла (CSV/JSON). Форма вызывает эндпоинт парсера из M3, показывает результат: сколько объектов создано, какие warnings возникли.

Использование Radzen

Хотя бы на одной странице использовать компоненты Radzen.Blazor вместо голых HTML-элементов. Например, таблицу (RadzenDataGrid), кнопку (RadzenButton), форму ввода. Решение, где именно Radzen уместен — самостоятельное.

Связь с API

UI работает с API из M3 по HTTP, не с БД напрямую. Использовать HttpClient (встроенный), регистрация через DI.

Документация к защите

Создать docs/defense.md — документ, представляемый на гейте. Должен содержать:

  • Архитектуру решения. Слои, направление зависимостей. Как соотносится с Clean Architecture.
  • Доменную модель. Почему такая структура, где сверялась с домен-экспертом.
  • Карту технологий. Что из стека DeepGeo применено и где.
  • Что сделано, что не сделано. Честная оценка: где вышло хорошо, где не успел.
  • Демо-сценарий. Пошаговый сценарий проведения демо.
  • Ключевые решения. Несколько примеров нетривиальных решений с обоснованием.

README

Обновить README.md так, чтобы новый разработчик (или тимлид на гейте) мог запустить проект по инструкции: какие инструменты нужны, какие команды выполнить, на каком URL откроется UI.

Подготовка к code review

На гейте будет code review — обсуждение кода с тимлидом. Заранее продумать ответы на вопросы вида:

  • направление зависимостей в решении и почему оно такое;
  • почему там, где есть LINQ-проекция, она сделана до материализации (а не через Include + маппинг в памяти);
  • где и почему применена спецификация, а не голый .Where();
  • как валидируется конкретный DTO и почему FluentValidation, а не data-annotations;
  • как в схеме БД соблюдается конвенция «только FK»;
  • что произойдёт, если в парсер подать битый файл, и где это обрабатывается.

Список не исчерпывающий — это ориентир. Цель: не «вызубрить ответы», а разобраться в собственном коде так, чтобы рассуждать о нём.

Контрольная точка

Перед гейтом — встреча с наставником:

  • продемонстрировать UI локально;
  • пройти демо-сценарий от начала до конца;
  • показать docs/defense.md;
  • обсудить 3–5 потенциальных вопросов code review.

Чек-лист завершения M4 и готовности к гейту

  • Blazor UI запускается локально
  • Минимум 4 страницы навигации по данным реализованы
  • Страница загрузки файла в парсер работает end-to-end
  • Radzen использован хотя бы на одной странице
  • UI обращается к API по HTTP, не к БД напрямую
  • README с инструкцией запуска обновлён
  • docs/defense.md написан
  • Демо-сценарий отрепетирован
  • Code review-вопросы проработаны
  • QA-трек: стабильный поток баг-репортов и еженедельных отчётов
  • Все тесты проходят

После этого — гейт защиты перед тимлидом. Формат и критерии оценки — в чек-листе гейта.

Материалы по темам

Blazor — основы

Razor-синтаксис

Формы и валидация

HTTP-клиент из Blazor

Radzen.Blazor

Подготовка к code review

Прогресс

[■■■■■] M4 из 5 вех — финал Фазы 1. Все вехи позади, дальше — гейт защиты.

📚 Полный список ресурсов — в разделе Ресурсы.