Конструктор
Конструктор открывается пунктом «Конструктор» в меню приложения. Это карта, на которой лежат блоки и связи между ними — схема приложения. По схеме видно, какой экран откроется первым и куда человек попадёт после каждого нажатия.
Схема: блоки, выходы и связи
Блок — один шаг приложения. Блоки бывают трёх видов:
- экраны и всё, что показывается поверх экрана: окна, меню, диалоги, сообщения;
- блоки без экрана — они что-то делают между экранами: проверяют условие, пишут запись в список, отправляют сообщение от бота;
- служебные — «Старт» и «Заметка».
Полный перечень — на странице Блоки и действия.
Выход — строка в нижней части блока. У экрана выходами становятся его кнопки, пункты списков и другие нажимаемые элементы; у блока без экрана — исходы его работы, например «Да» и «Нет» у условия. Выходы «получилось» окрашены зелёным, «не получилось» — красным.
Связь — линия от выхода к блоку, который откроется или выполнится следующим.
- Чтобы провести связь, потяните от кружка у выхода к нужному блоку.
- Если отпустить связь на пустом месте карты, откроется список блоков: выбранный блок создастся и сразу подключится. Вверху списка — «Недавние», пункт «Еще» открывает окно «Добавить блок».
- Чтобы удалить связь, наведите на линию и нажмите значок, который появится на ней.
- У выхода со связью есть стрелка «Перейти к блоку, куда ведёт выход».
Выход «Продолжить» срабатывает сам, как только приложение дошло до блока. Так за один шаг можно, например, открыть экран и сразу показать поверх него окно.
Стартовый блок отмечен плашкой «Старт» — с него приложение начинается. В новом приложении это блок «Старт», соединённый с первым экраном. Сделать стартовым другой блок — меню блока → «Сделать стартовым».
Панель над картой
| Кнопка | Что делает |
|---|---|
| Стрелки «отменить» и «повторить» | Отменяют и возвращают действия на схеме: добавление, удаление, перемещение, правку блока, связь. Сочетания — Ctrl+Z и Ctrl+Y, на Mac — ⌘Z и ⇧⌘Z |
| «Цвет и сетка карты» | Цветовая схема карты, вид сетки и способ управления — мышь или тачпад |
| «Скрыть пустые связи» | Прячет выходы, которые никуда не ведут. Пока они скрыты, новую связь от них не протянуть |
| «Код приложения» (значок «</>») | Свой JavaScript на всё приложение — см. Код в приложении |
| «Помощь ИИ» | Открывает ИИ-чат по этому приложению и открытой версии — см. Сборка приложения в ИИ-чате |
| «Предпросмотр» | Открывает приложение рядом со схемой |
| «Добавить блок» | Открывает окно выбора блока |
| «Версия N» или «Опубликовать» | Версии приложения и публикация — см. Версии и публикация |
Правый клик по пустому месту карты открывает меню: «Добавить блок…», «Добавить заметку», «Вставить».
Добавить блок
Окно «Добавить блок» — это поиск по названию и описанию и категории слева: «Все», «Экраны», «Оверлеи», «Данные и логика», «Чат-бот», «Списки», «Служебные».
Блоки для продажи товаров собраны в категории «Магазин».
Блоки записи клиентов — в категории «Запись на приём».
Клик по карточке ставит блок на карту. Клавиша Enter в поиске добавляет первый блок из найденных.
Действия с блоком
Короткий клик по блоку открывает его настройки. Блок перетаскивается за любое место.
В шапке блока два значка:
- «▶» — «Предпросмотр с этого блока»: приложение запустится не со стартового блока, а с выбранного.
- «⋯» — меню блока.
| Пункт меню | Что делает |
|---|---|
| «Переименовать» | Меняет название блока на схеме. Оно же видно в аналитике и в отладке |
| «Сделать стартовым» | Приложение будет начинаться с этого блока. Пункта нет у блоков, которые стартовыми быть не могут, — у окон, диалогов и блоков, работающих с данными |
| «Сделать модальным окном» / «Сделать экраном» | Превращает экран в модальное окно и обратно — см. ниже |
| «Создать копию» | Ставит рядом копию блока |
| «Скопировать» | Кладёт блок в буфер, чтобы вставить в другом месте или в другой версии |
| «Скопировать ссылку» | Ссылка открывает конструктор сразу у этого блока |
| «Удалить» | Удаляет блок и его связи |
Чтобы выбрать несколько блоков, отметьте их галочкой на месте значка блока, кликайте по блокам с зажатым Shift или включите инструмент «Выделение рамкой». Над картой появится панель «Выбрано N блоков»: выбранное можно скопировать и удалить. Сочетания Ctrl+C и Ctrl+V (на Mac — ⌘C и ⌘V) копируют выделенное и вставляют под курсором.
Заметки
Заметка — цветной листок на карте с пояснением для тех, кто собирает приложение. В сценарий она не входит.
- Добавить: правый клик по карте → «Добавить заметку» или блок «Заметка» в окне «Добавить блок».
- Клик по листку открывает правку текста. Ctrl+Enter (на Mac — ⌘Enter) сохраняет, Esc отменяет.
- Цвет — в меню листка: «Жёлтая», «Зелёная», «Голубая», «Розовая», «Сиреневая», «Серая». Размер меняется за уголок.
Редактор экрана
Клик по блоку «Экран» открывает окно «Редактировать экран». Слева — телефон с экраном, справа — настройки. Переключатель «iOS» / «Android» в заголовке показывает, как экран выглядит на каждой системе. Изменения применяются кнопкой «Сохранить».
Вид экрана
У пустого экрана на телефоне стоит вопрос «Какой будет экран?»:
| Вид | Что это |
|---|---|
| «Стандартное окно» | Шапка и области с элементами |
| «Вкладки снизу» | Разделы с панелью вкладок внизу. У каждой вкладки своё содержимое |
| «HTML-код» | Весь экран — ваш HTML-код. Описан на странице Код в приложении |
Области
Стандартное окно собирается из областей — «Из чего собрать экран?»:
| Область | Что в ней | Главные настройки |
|---|---|---|
| «Шапка» | Заголовок и кнопки сверху | «Заголовок», «Цвет шапки», «Цвет заголовка», «Прозрачный в iOS», «Не показывать границу», кнопки |
| «Контент» | Текст, кнопки, поля, списки и другие элементы | «Цвет фона области», «Отступы по краям», «Элементы» |
| «Сетка» | Элементы в колонках и строках | «Строки», «Ширина колонки» — «Автоматически» или доля от 12, «Выравнивание по вертикали», «Ограничить ширину» |
Шапка у экрана одна. Областей контента и сеток может быть несколько; следующую добавляет кнопка «+» под последней областью на телефоне.
Клик по области или элементу на телефоне открывает его настройки справа. Ссылка «К экрану» над настройками возвращает назад.
Кнопки шапки делятся на четыре группы: «Кнопки в начале», «Кнопки в конце», «Первичные кнопки», «Вторичные кнопки» — до четырёх в каждой. У кнопки задаются «Имя кнопки», «Иконка», «Цвет», «Заливка», «Форма» и «Размер». Каждая кнопка шапки — выход блока.
Вкладки. На экране «Вкладки снизу» — до девяти вкладок. У вкладки задаются «Имя вкладки», иконка и «Счетчик» — значок с числом или текстом. Общие настройки: «Цвет панели вкладок», «Цвет вкладки», «Цвет выбранной вкладки».
Условие показа. Шапку, область контента, сетку и каждую кнопку шапки можно показывать не всем: включите «Условие показа» в их настройках. Как задаются условия — на странице Данные приложения.
В сетке — до 50 строк и до 12 колонок в строке. В одной области — до 100 элементов.
Экран на схеме
Экран виден прямо в блоке на схеме. Высокий экран обрезан по высоте телефона — полоса «Показать целиком» внизу блока разворачивает его, «Свернуть» возвращает обратно.
Экран и окно
Экран открывается на месте предыдущего. Модальное окно показывается поверх текущего экрана и закрывается, не уводя человека с него.
У блока «Модальное окно» два вида:
- «Окно поверх экрана»;
- «Шторка снизу» — с настройками «Высота шторки» (25, 50, 75 или 100 %) и «Показывать полоску захвата».
Настройки «Закрывать по нажатию вне окна» и «Затемнять экран» есть у обоих видов.
Готовый экран превращается в окно, а окно — в экран: меню блока → «Сделать модальным окном» или «Сделать экраном». Элементы и связи сохраняются. Стартовый экран и экран из HTML-кода окном сделать нельзя.
Остальные блоки, которые показываются поверх экрана, — меню, диалог, панель действий, сообщение — описаны на странице Экраны и оверлеи.
Цвета и тёмная тема
Цвет элемента выбирается из палитры версии: «Первичный», «Вторичный», «Третичный», «Успех», «Предупреждение», «Опасность», «Светлый», «Средний», «Темный». Пункт «По умолчанию» оставляет цвет, заданный системой.
У каждого цвета палитры два значения — «Цвет для светлой темы» и «Цвет для темной темы». Приложение само выбирает нужное.
- Значение цвета меняется прямо в списке выбора: кнопка «Редактировать», затем карандаш у цвета. Цвет изменится везде, где он использован.
- Кнопка «Добавить цвет» заводит свой цвет: «Название цвета» и два значения. В палитре — до 50 цветов.
- Свой цвет можно удалить. Перед удалением убедитесь, что он нигде не используется.
Палитра хранится в версии: у новой версии — копия палитры той, из которой её создали.
Какой будет тема — светлой или тёмной, — решает место, где открыто приложение: в Telegram приложение повторяет тему мессенджера, в браузере — тему системы, в предпросмотре — тему кабинета.
Предпросмотр
Кнопка «Предпросмотр» открывает справа от схемы панель «Предпросмотр · версия N» с телефоном. В телефоне работает настоящее приложение с той версией, которая открыта в конструкторе, — в том числе неопубликованной.
| Элемент панели | Что делает |
|---|---|
| «iOS» / «Android» | Оформление, как на выбранной системе |
| «Откуда открыто» | Как будто приложение открыли из выбранного места: «Браузер», «С экрана (PWA)», «Telegram», «MAX», «Веб-чат». Так проверяют ветки блока «Источник запуска» |
| «Начать заново» | Сбрасывает переменные предпросмотра и открывает приложение со стартового блока |
| «Следить за текущим блоком» | Схема сама прокручивается к блоку, который сейчас открыт в приложении, и подсвечивает его |
| «Отладка» | Открывает панель отладки слева от телефона |
Под телефоном — строка «Сейчас: …» с названием открытого блока. Клик по ней показывает блок на схеме.
Внимание
Предпросмотр работает с настоящими данными: переменные и записи списков сохраняются. Запись, добавленная в предпросмотре, появится в списке проекта.
У каждого, кто открыл конструктор, свой пользователь предпросмотра: двое сотрудников не мешают друг другу переменными. В разделе «Пользователи» и в аналитике предпросмотр не учитывается.
Отладка
В панели отладки две вкладки.
- «Путь» — по каким блокам прошёл сценарий после каждого нажатия: какой выход сработал, какой экран показан, где сценарий остановился. Клик по шагу показывает блок на схеме. Значок корзины — «Очистить путь».
- «Переменные» — значения переменных после последнего шага. Изменившиеся отмечены «изменена», появившиеся — «новая». Есть поиск по имени.
Ошибки запросов и кода, случившиеся в предпросмотре, попадают в журнал ошибок с отметкой «Предпросмотр».
Если что-то не работает
- «Эта версия в данный момент редактируется другим запросом». Версию одновременно сохраняет другой человек или другая вкладка. Повторите действие.
- «Достигнут лимит количества страниц/блоков…». В версии больше 10 000 блоков или она больше 50 МБ. Удалите лишние блоки.
- «Приложение открывается стартовым экраном — его нельзя сделать модальным окном». Сначала назначьте стартовым другой экран.
- «Файлы такого типа (…) нельзя использовать в приложении». В экран попал файл запрещённого типа, например SVG. Замените его картинкой JPEG, PNG, GIF, WebP или AVIF.
- «Ошибка валидации. Детали в форме редактирования элемента». Одно из полей заполнено неверно — оно подсвечено в настройках элемента.