Перевод

Назад к видео

1. Обзор меню

Это видео является введением в редактор QuBot от компании QuData. Будем считать, что плугин у Вас уже загружен и активирован. В закладках Word Press кликнем на иконку с переплетенными буквами Qu и Di.

Урок посвящён созданию ботов. Поэтому сразу переходим в закладку Editor.

Стоит внимательно прочитать вводную информацию. После этого нажмём галочку в нижнем углу и кликнем на крестик или в любое место экрана. Это окно больше появляться не будет.

Впрочем, его всегда можно опять включить в меню Help. Кроме других настроек, в первом пункте Help запускается бот-помощник по работе в редакторе.

Пройдём по остальным пунктам меню.

> В первом пункте My Bots находится список ботов, которые Вы сейчас разрабатываете.

> Команды следующего пункта меню позволяют создавать новых ботов, клонировать т.е. делать копии уже существующих ботов, удалять и переименовывать ботов, а также экспортировать и импортировать ботов при помощи файлов.

> В меню Edit Step находятся операции с сообщениями бота, которые называются шагами.

> Следующие два пункта содержат коллекцию готовых ботов.

В пункте Templates есть набор законченных ботов для решения различных задач. В них Вам необходимо будет только подправить тексты и изображения.

В пункте Examples находятся маленькие боты которые иллюстрируют ту или иную возможность редактора QuBot. Они содержат многочисленные комментарии, которые легко позволят разобраться с этими примерами.

> Меню View позволяет переключаться между двумя режимами упорядочивания сообщений и логики бота.

2. Списки ботов

Рассмотрим теперь основные действия по созданию бота.

Для этого возьмём простого бота из меню Examples под названием Lists.

Его можно сразу запустить, нажав кнопку Run. При этом, кроме бота, откроется отладочное окно, которое помогает отслеживать возможные ошибки в логике его работы.

Этот бот является примером очень простого магазина, в котором есть только 4 товара. Пользователь выбирает товар, например вино, а затем количество.

Эти действия можно повторять любое число раз.

Закажем ещё три сыра.

Затем снова вино, но количество бутылок введём из клавиатуры.

Если введенная строка не является числом, бот об этом сообщит и попросит ввести количество повторно.

Теперь можно посмотреть содержимое корзины и общую сумму заказа.

При желании можно удалить какой нибудь товар.

3. Редактор списка

На этом примере посмотрим как редактировать шаги бота. Для этого сначала необходимо сделать его копию, зайдя в пункт меню Edit Bot, выбрав пункт меню Clone и присвоив ему произвольное имя.

Теперь копия этого бота появится в меню My Bots, а справа от кнопки запуска - его название.

Как мы видим, бот состоит из 8 шагов.

Существует два способа упорядочивания шагов, которые переключаются в меню View.

По умолчанию они расположены внутри регулярной сетки. В режиме Free положение карточек может быть произвольным. Взяв мышкой за заголовок карточки шага, её можно поместить в желаемое место.

Аналогично, в режиме сетки можно перетаскивать карточки из одно места в другое, а также перемещать строчки карточек

Режим Grid удобнее когда существует много связей между шагами. Второй режим Free удобнее для линейных или древовидных веток диалога.

На карточках изображён предварительный вид сообщений с кнопками, картинками и строкой ввода.

Когда мы кликаем на карточку шага, она меняет свой цвет на малиновый. Её содержимое для редактирования отображается в окне редактора слева. Синие стрелки, выходящие из выбранной карточки показывают шаги, в которые из неё можно перейти. Эти шаги помечаются голубым цветом.

Если стрелки начинаются из кнопок, то это переходы по нажатию кнопки. Если стрелки выходят из строки ввода, то это переходы при вводе текста. Наконец, стрелки могут выходить из нижней части карточки, если соответствующий переход задаётся в действиях.

Зелёные точки показывают места из которых можно перейти в выбранную карточку.

Чтобы создать карточку нового шага, необходимо нажать на плюсик справа на её рамке. В режиме Grid можно также нажать плюс на меню таскания. Тогда добавится строка и новый шаг окажется там.

Крестик в правом верхнем углу удаляет шаг.

4. Редактор шага

Попробуем немного изменить бот. Его работа начинается с шага, помеченного словом start в правом углу заголовка. Карточка этого шага также имеет более толстую рамку.

Изменим стартовый шаг, начав работу бота с некоторого приветствия.

Для этого добавим карточку нового шага, нажав на плюс.

Чтобы подсказки нам не мешали, отключим их в меню Help.

В редакторе созданного шага появился текст и одна кнопка. Сначала переименуем название шага. Делать это не обязательно, но лучше шагам присваивать осмысленные имена.

Теперь нажмём на галочку в правом верхнем углу редактора. Тем самым мы переопределим стартовый шаг.

В поле текста введём некоторое приветствие.

Аналогично, введём текст на кнопке.

Если запустить бота, то при нажатии на кнопку, он повторно покажет текущий шаг, так как мы не определили куда ему необходимо переходить.

Зададим переход на нужный шаг при нажатии кнопки.

Для этого кликнем на кнопку. Внизу появятся действия которые активируются при нажатии пользователем этой кнопки. Свойство step указывает шаг на который нужно перейти.

Кликнем на него, а затем кликнем на карточку MAIN. Появится голубая стрелка.

Запустим бота и убедимся, что всё в порядке.

5. Мультиязычный интерфейс

В редакторе можно создавать мультиязычные диалоги. Даже если Вы не планируете этого делать, эта и следующие части видео будут полезны.

По умолчанию бот общается на английском языке. Это показано в правом верхнем углу редактора.

Если кликнуть на область языка, появится меню с наиболее популярными языками в Word Press. Если Вашего языка тут нет, это не страшно. Можно выбрать любой из приведенных здесь, это не играет роли.

Выберем в качестве второго языка русский. При переключении на новый язык, все тексты станут серыми, и поверх них можно ввести тест на новом языке.

Поменяем текст приветствия

А также текст на кнопке

Обратим внимание, что тексты на остальных шагах пропали.

Связано это с тем, что данный пример сделан только на английском языке и русских переводов в остальных шагах в нём нет.

Переключения языка изменяет, как тексты в редакторе шага, так и тексты на карточках шагов.

Если стартовый язык не задан явно, то бот запустится в первом, т.е. английском языке.

Изменить начальный язык можно несколькими способами.

Сначала поменяем этот пункт в меню Help.

Теперь при старте бота активным будет тот язык, который установлен в окне редактора шага. Эта опция будет действовать до перегрузки страницы.

Поставим русский язык и запустим бот.

Теперь вернём английский язык и снова нажмём кнопку Run.

Похожим образом меняет работу бота ещё один пункт меню Help.

Если он изменён, то запуск бота произойдёт не со стартового шага, а с того шага, который сейчас редактируется.

Например, кликнем на карточку шага MAIN и кнопку Run. Хотя этот шаг не стартовый, работа бота начнётся с него.

Подобные изменения языка и стартового состояния используются только в целях отладки. Язык работающего на сайте бота нужно задавать другим способом.

6. Действия и слоты

Вернёмся к стартовому шагу. В меню слева от текста нажмём на плюсик и выберем пункт меню actions.

Затем, схватив за 6 точек, перетащим его вверх, сделав первым объектом редактора.

Кликнем на действия (помеченные ракетой) и перейдём вниз окна редактора. Существует множество действий, которые решают самые различные задачи.

Нам необходимо выбрать установку слота.

Слот - это переменная, которая имеет имя и значение. Имя - это любая последовательность букв, цифр и символа подчёркивания. Начинаться имя должно с буквы.

Значениями слота могут быть строки, числа, списки и объекты.

Существует несколько предопределённых слотов. В простейших случаях Вы будете использовать слот LANGUAGE - текущий язык и INPUT - введенный пользователем текст.

По умолчанию язык бота английский. Пусть мы хотим изменить его на русский.

Для этого выберем в списке имён слот LANGUAGE, а в качестве значение напишем "ru" в кавычках, так как это строка.

Вернём настройки отладки меню Help в первоначальное состояние.

Язык в редакторе поставим английский и запустим бот.

Он выдал приветствие на русском языке.

Работа бота в каждом шаге начинается сверху вниз. Поэтому сначала выполнится переустановка языка, а только затем будет выведен текст на текущем языке.

7. Смена языка

Поменяем теперь язык в процессе работы бота. Для этого создадим соответствующий шаг смены языка.

Для ускорения, воспользуемся меню Edit Step, выбрав последний пункт.

Обратим внимание, что кнопок в строке может быть несколько.

Они добавляются при помощи плюсика, а удаляются крестиком. Стрелки меняют кнопки местами.

Чтобы удалить всю строку, нужно воспользоваться корзиной в меню слева.

Уберём лишние языки, оставив английский и русский.

Кликнем теперь на кнопки языков. В их свойствах устанавливается значение языка.

Сделаем так, чтобы при нажатии на любую из кнопок, бот возвращался на стартовый шаг.

Это, как и раньше, можно прописать в действиях кнопок.

Однако, так как шаг перехода одинаковый для обоих кнопок, в этой карточке шаг задаётся один раз в действии в самом начале.

Таким образом, если в кнопке не указан шаг перехода, то бот будет использовать последний заданный шаг. В данном случае, это шаг, установленный в действиях.

Поменяем этот переход на шаг WELCOME.

Теперь в нём добавим кнопку смены языка.

Не забываем добавить переход на шаг LANGUAGE

Посмотрим, что получилось.

Как видим, желаемого результата мы не достигли и бот по-прежнему находится в режиме русского языка.

Разберёмся, почему так произошло, проанализировав логику бота.

Для этого внимательнее посмотрим на отладочное окно.

В его левой части приведены значения слотов, а в правой - тех действий, которые выполняет бот.

При нажатии на кнопку, происходит смена языка, т.е. значения слота LANGUAGE. Однако, при заходе в шаг WELCOME запускается выполнение действий, в которых этот слот снова устанавливается в значение "ru".

8. Переход goto

Поправим эту ситуацию, создав ещё один шаг INIT, который сделаем стартовым.

Скопируем из шага WELCOME действия и удалим их оттуда.

Вставим эти действия в шаг INIT.

Затем удалим все его визуальные объекты.

Теперь добавим действие goto, установив в нём переход на шаг WELCOME.

В отличии, от перехода step, переход goto является "мгновенным". Т.е. если при выполнении шага бот встречает goto, то он сразу переходит в указанный шаг, не дожидаясь событий от кнопок или строки ввода.

Таким образом, шаг INIT является логическим и инициализирует нужные нам слоты. После этого он сразу переходит к следующему шагу WELCOME.

Проверим это.

Теперь всё работает правильно.

Надеемся, что это небольшое введение в редактор QuBot станет отправной точкой для создания сложных и полезных ботов для Вашего сайта.

Если у Вас будут возникать вопросы, Вы можете задавать их на форуме страницы плугина, или обратившись на прямую к специалистам компании QuData.

Желаем удачи в Вашем творчестве.

Назад к видео