Конструктор
Конструктор відкривається пунктом «Конструктор» у меню застосунку. Це карта, на якій розміщено блоки та зв'язки між ними — схема застосунку. Зі схеми видно, який екран відкриється першим і куди людина потрапить після кожного натискання.
Схема: блоки, виходи та зв'язки
Блок — один крок застосунку. Блоки бувають трьох видів:
- екрани та все, що показується поверх екрана: вікна, меню, діалоги, повідомлення;
- блоки без екрана — вони щось роблять між екранами: перевіряють умову, пишуть запис у список, надсилають повідомлення від бота;
- службові — «Старт» і «Нотатка».
Повний перелік — на сторінці Блоки й дії.
Вихід — рядок у нижній частині блоку. В екрана виходами стають його кнопки, пункти списків та інші елементи, на які можна натиснути; у блоку без екрана — результати його роботи, наприклад «Так» і «Ні» в умови. Виходи «вдалося» пофарбовано зеленим, «не вдалося» — червоним.
Зв'язок — лінія від виходу до блоку, який відкриється або виконається наступним.
- Щоб провести зв'язок, потягніть від кружечка біля виходу до потрібного блоку.
- Якщо відпустити зв'язок на порожньому місці карти, відкриється список блоків: вибраний блок буде створено й одразу підключено. Угорі списку — «Нещодавні», пункт «Ще» відкриває вікно «Додати блок».
- Щоб видалити зв'язок, наведіть курсор на лінію й натисніть значок, який на ній з'явиться.
- Вихід зі зв'язком має стрілку «Перейти до блоку, куди веде вихід».
Вихід «Продовжити» спрацьовує сам, щойно застосунок дійшов до блоку. Так за один крок можна, наприклад, відкрити екран і одразу показати поверх нього вікно.
Стартовий блок позначено плашкою «Старт» — із нього застосунок починається. У новому застосунку це блок «Старт», з'єднаний із першим екраном. Зробити стартовим інший блок — меню блоку → «Зробити стартовим».
Панель над картою
| Кнопка | Що робить |
|---|---|
| Стрілки «скасувати» та «повторити» | Скасовують і повертають дії на схемі: додавання, видалення, переміщення, правку блоку, зв'язок. Комбінації — 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.
- «Помилка валідації. Деталі у формі редагування елемента». Одне з полів заповнено неправильно — його підсвічено в налаштуваннях елемента.