Режим обучения
Режим обучения — пошаговый гид по экрану: проводник печатает короткие пояснения, а интерфейс постепенно «открывает» элементы (вкладки, фильтры, карточки), чтобы новичок не увидел всё сразу.
Полноценный пошаговый режим есть на странице «Сценарии ботов» и в редакторе (холст). Рядом по духу — короткий диалог на экране «нет проектов» (не шаги, а приветствие перед кнопками).
Зачем он нужен
- Объяснить раздел словами, а не отдельной длинной справкой.
- Показать, куда смотреть: элемент появляется вместе с текстом про него.
- Не мешать опытным: обучение можно пропустить и пройти снова с кнопки.
Как это выглядит на «Сценариях»
- Если у вас нет проектов, при входе на страницу обучение может стартовать само.
- Сверху — панель «Режим обучения»: шаг N из M, прогресс-полоска, текст проводника.
- Кнопки: Назад, Далее (активна, когда текст допечатался), Пропустить.
- На последнем шаге — «Я понял» (закрывает обучение).
- В шапке всегда есть кнопка «Обучение» — запустить заново с первого шага.
Пока идёт обучение, вкладки, поиск/фильтры и сетка карточек появляются по сценарию шагов (сначала пусто → вкладки по одной → фильтры → выбор шаблона).
Что рассказывают шаги (кратко)
| Шаг | О чём |
|---|---|
| Старт | Зачем страница «Сценарии» и что такое шаблон |
| Все | Полный каталог шаблонов |
| Рекомендуемые | Подборка для первого запуска |
| Популярные | То, что чаще берут другие |
| Мои | Личная полка сохранённых шаблонов |
| Поиск | Строка поиска, категория, сортировка |
| Выбор | Нажать «Использовать» на карточке |
Точные тексты живут в коде: client/components/editor/scenariy/learn/scenariy-learn-steps.ts.
Как это выглядит в редакторе
- Если холст пустой и обучение ещё не пропускали, сам стартует раздел «Основы».
- Кнопка «Обучение» в шапке, рядом с вкладками, открывает меню разделов. Пройденный до конца раздел отмечен галочкой.
- Карточка шага лежит на поле и не растягивается на весь экран. Ноды не прячутся.
- Шаг подсвечивает зону: палитра слева, поле, панель свойств справа. Если панель была скрыта, шаг её открывает.
- На заданиях «Далее» включается только после действия. Считаются блоки, добавленные на этом шаге, а не те, что уже лежали на поле.
- Пропустить и Я понял запоминаются в браузере отдельно от обучения сценариев.
Раздел «Основы»
| Шаг | О чём |
|---|---|
| Старт | Соберём цепочку сами |
| Палитра | Откуда перетаскивать блоки |
| Команда | Подсвечена карточка «Триггер команды», её нужно перетащить |
| Сообщение | Подсвечена карточка «Текстовое сообщение», её нужно перетащить |
| Связь | Стрелка от команды к сообщению |
| Текст | Подсвечена панель свойств, в ней пишут текст сообщения |
| Настройки | Подсвечена панель свойств, в ней меняют команду |
| Цепочка | Готовая связка подсвечена |
| Дальше | Блоки можно оставить |
Раздел «Панель инструментов»
Шаги идут по тулбару над полем слева направо; каждый подсвечивает свою группу кнопок. На трёх шагах нужно нажать кнопку. Если кнопка неактивна (например, «Уместить в экран» на пустом поле), шаг засчитывается сам.
| Шаг | О чём |
|---|---|
| Тулбар | Что это за полоса |
| Масштаб | Нажать «Уместить в экран» (Ctrl + 1) |
| Отмена | Отмена, повтор и история действий |
| Сохранение | Сохранить, сохранить с заметкой, история версий |
| Расстановка | Нажать «Авто-расстановка» (Shift + A) |
| Буфер | Копировать и вставить блоки |
| Поиск | Нажать лупу «Поиск узлов» (Ctrl + F) |
| JSON | Переключатель «Холст / JSON» и справка по клавишам |
| Готово | Три главные клавиши |
Тексты: editor-learn-steps.ts и editor-learn-toolbar-steps.ts, список разделов — editor-learn-sections.ts (всё в client/components/editor/canvas/learn/). Панель та же, что у сценариев.
Пропуск и повтор
- Пропустить / Я понял — обучение скрывается; автозапуск больше не мешает.
- Пометка хранится в браузере (
localStorage), не на сервере. - Обучение в шапке снимает пометку и снова ведёт с шага 1.
- В редакторе Я понял на последнем шаге ставит разделу отметку «пройдено» (
botcraft:editor-learn-done).
Экран «нет проектов»
Это не тот же пошаговый режим, а короткий печатный диалог («проектов ещё нет → с нуля / шаблон / JSON»), после которого появляются кнопки действий. Повторный визит в тот же браузер показывает текст сразу, без анимации набора.
Связанные страницы
- Обзор интерфейса
- Панель проектов
- Для разработчиков и агентов: development/adding-learn-mode — как добавить обучение в другой раздел