b.vi-creatorразработан с помощью библиотеки для создания веб-среды с визуальным языком программированияBlocklyот Google. Предназначен для составления скрипта чат-бота с помощью блоков.
Визуальные языки часто используются для начального обучения пользователя программированию, так как они позволяют лучше понять логику и последовательность написания программы, не отвлекаясь на правильность написания синтаксиса языка.
Интерфейс данного сервиса состоит из нескольких зон:
В панели инструментов есть три категории блоков «Логика», «VK», «Слова и вес», в каждой из которых расположены блоки, необходимые для написания чат-бота.
Блоки могут:
· 
иметь входящие переменные, которые выглядят
· 
быть входящей переменной
· 
иметь соединение сверхуи/или снизу
· 
быть функцией
· 
текстовое поле внутри
· иметь кнопку мутации
Блоки с мутацией могут изменять свой внешний вид. При нажатии на шестерёнку появляется окно конфигурации блока, в котором можно изменить его структуру. Например, добавить условия в структуру «если…иначе если…иначе»
Изменения производятся с помощью перетаскивания подблоков в окне конфигурации: для добавления подблока нужно его переместить из серой(левой) зоны в белую(правую), для удаления, наоборот, из белой в серую. Если все сделано верно, то подблоки отображаются цветом и блок сразу меняет вид. Если подблок становится полупрозрачным – это означает, что он отсоединен, от основного блока и никак не влияет на его вид.
Рабочая область используется для перемещения на нее блоков и работы с ними. Возможно управление масштабом и перемещением по рабочей области как с помощью мышки, так и с помощью инструментов, находящихся справа, и полос прокрутки.
|
|
Инструменты рабочей области позволяют управлять ей:
1) 
найти созданную цепочку блоков
2) увеличить/уменьшить масштаб
3) 
удалить блоки с рабочей области
Управляющие кнопки служат для сохранения, восстановления прогресса и выгрузки результата работы.
При выставлении блоков на рабочую область в нижней части окна прописывается соответствующий блоку программный код. Данная область неактивна для редактирования и служит для обучения и отслеживания хода выполнения работы.
Нажатием правой клавиши мыши по блоку, расположенном на рабочей области можно:
· дублировать блок
· добавить комментарий к нему
· видоизменить блок, если он имеет входящие переменные
· свернуть блок для увеличения рабочей области
· сделать неактивным, при этом код данного блока не отображается
· удалить блок и связанные с ним другие блоки
· получить дополнительную информацию по блоку, если она есть
Так же поддерживается работа клавиши DELETE для удаления, сочетание клавиш CTRL+Cдля копирования выбранного блока и СTRL+Vвставка скопированного блока.
Рассмотрим пример составления бота
Шаг 1. Подключение к VK
Так как наш бот будет работать в социальной сети ВКонтакте, то нам необходимо соединится с ней. Для этого есть специальный блок в категории «VK», который подписансоответствующеи расположен первым.
Выбираем его и перетаскиваем на рабочую область (зажатие левой клавиши мыши).
Этот блок имеет одну принимаемую переменную токен. Токен в ВК является строкой, и чтобы его присоединить, нужно найти блок строкового типа. Он расположен в категории «Слова и вес» первым.
|
|
Блок имеет поле для ввода данных между кавычек. При перемещении на рабочую область можно вписывать данные, которые необходимо передать в бота. Данный блок в дальнейшем мы будем использовать для фраз.
Шаг 2. Отслеживание приходящих сообщений в чат-бота
После подключения к ВК нам необходимо отслеживать приходящие в бота сообщения, чтобы как-то реагировать на действия пользователя. Для этого нам понадобится блок-функция, которая называется «При отправлении человеком в вк сообщения делает». Она расположена в категории «VK» второй.
При добавленииблока в области отображения скрипта появляется соответствующий функции код с входящей переменной message, сообщением от пользователя. Эта переменная нам понадобится для сравнения фраз, она расположена в категории «VK».
Шаг 3. Добавление логического блока условия
Для дальнейшей работы нам понадобится граф диалога. Для примера возьмем следующий:
Как мы видим, у нас есть 11 вариантов фраз, которые может произнести человек. Чтобы учесть все эти варианты, нам понадобится логический блок условия «если…выполнить». При этом, данный блок нужно будет изменить так, чтобы было 11условий.
Для видоизменения блока нажимаем на шестерёнку, расположенную в верхнем левом крае блока. И в появившемся окне конфигурации перетаскиваем необходимое количество подблоков «иначе если» в его белую область. Подблок «иначе» идет без условия и его можно добавить 1 раз в самом конце для того, чтобы бот отвечал какой-либо универсальной фразой, если ни одно из 11 условий не было отработало, т.е. человек ввел фразу, которой нет в графе.
|
|
Шаг 4. Добавление сравнения введенных пользователем фраз.
Чтобы наш бот отвечал по описанному сценарию, нужно добавить блок сравнения фразы введенной пользователем и заданной графом. Для этого будем использовать:
· логический блок сравнения «==», находящийся в категории «Логика»
· переменную «Текст сообщения из бота», категория «VK»
· текстовый блок, категория «Слова и вес»
В ранее созданную структуру «если…иначе если» в условие (входящее соединение если) необходимо присоединить блок «==».
И теперь сравнить две фразы. Одна из них приходит из вк и всегда будет «Текст сообщения из бота», вторая будет прописываться в блок со строковым значением, эти значения берутся из графа (предполагаемая фраза пользователя, синие блоки в графе).
Теперь нужно создать 11 таких условий, так как у нас в графе именно столько вариантов фраз пользователя. Для этого можно скопировать созданный блок и поменять значение блока со строкой.
Шаг 5. Добавление ответов бота
Для отправки ответа пользователю есть блок «Отправит в ответ». По умолчанию он принимает два ответа, если ответ один или более, то необходимо видоизменить блок.
Для этого нажимаем на шестерёнку и перетаскиваем подблок «ответ» в серую или белую зоны конфигурационного окна для удаления или добавление варианта ответа соответственно.
В первой части нашего графа, ответы однозначные, поэтому необходимо оставить только один подблок «ответ».
Данный блок нужно разместить после условия сравнения в место соединения «выполнить».
Присоединять к данному блоку можно:
· «Создать список из» если необходимо отправить несколько сообщений
· блок со строковым значением
· сообщение с весом, при этом сообщение может быть любым из блоков выше
В нашем примере в первом случае нужно отправить несколько сообщений, поэтому присоединяем к блоку «Отправит в ответ» блок «Создать список из». Работа с данным блоком подобна блоку «Отправит в ответ». Изменение количества сообщений происходит с помощью конфигурационного окна, вызываемого нажатием на шестерёнку.
Дальше в графе идет однозначный ответ. Используем блок со строкой.
Затем появляется вариация двух ответов. Используем так же обычные строковые блоки. При этом блок «Отправит в ответ» содержит два равновероятных ответа.
Для ответов с разной вероятностью используем специальный блок. Для обозначения веса используем числовой блок. Разделительным знаком между целой и дробной частями в нем является «.»
Эмоции в сообщения можно добавлять есть несколько способов.
1. Для отображения смайлами используем Коды смайлов ВК. Каждому смайлу соответствует свой код. Например, код 😨 обозначает удивление и в ВК будет отображаться 
2. Отправитьотдельным сообщением или добавить в начало строкового блока с ответом смайлик в символьном варианте или строкой. Например, «:)» обозначающее улыбку или «*улыбка*»
Необходимо учесть все блоки графа и описать их. После этого нажать кнопку «Бот готов», данная кнопка выгружает файл answer.py, который содержит весь скрип, описанный блоками в рабочей области и отображенный ниже нее.
