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

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

Будьте внимательны в ходе выполнения этой инструкции!

Одна опечатка может привести к ошибке выполнения сценария. Поэтому, пожалуйста, не набирайте, а копируйте и вставляйте все нужные команды.


Построим сценарий игры

Построение сценария может занять у вас приблизительно 10 минут.

Добавьте блок Текст. Разместим на нём следующее:

Привет! Я задам тебе пару вопросов. За каждый правильный ответ ты получишь 1 балл.

Добавим на этот экран ещё один блок Текст:

Мой первый вопрос такой:


Добавьте на первый экран блок Переход.


Оформление таблицы.

Правильные ответы мы будем хранить в гугл таблице. Создайте новую таблицу, и в этой таблице создайте три колонки. Скопируйте и вставьте их названия:

question

answer

link

Будьте внимательны при копировании! Если вы допустите в названии столбца опечатку, в сценарии может возникнуть ошибка.



Добавьте вопросы и ответы в вашу таблицу.

Например, в колонку "question" добавьте следующие вопросы:

Сколько будет дважды два?

Как называется наша планета?

В колонку "answer" можете добавить ответы:

4

Земля

В колонку "link" можете добавить ссылки на статьи с подробными ответами. Например, можем добавить ссылки на википедию:

https://ru.wikipedia.org/wiki/%D0%90%D1%80%D0%B8%D1%84%D0%BC%D0%B5%D1%82%D0%B8%D0%BA%D0%B0

https://ru.wikipedia.org/wiki/%D0%97%D0%B5%D0%BC%D0%BB%D1%8F

Наша таблица будет выглядеть так:


Опубликуем таблицу.

Теперь, чтобы мы могли получить доступ к таблице, её нужно опубликовать.

Файл -> Публикация в интернете -> Опубликовать -> Ок -> Закройте всплывающее окно.

Путь из всплывающего окна копировать не нужно.





Получим url для доступа к таблице.

Откройте блокнот и скопируйте в него ссылку:
http://tools.aimylogic.com/api/googlesheet2json?sheet=1&id=



Затем найдите в пути страницы данный элемент:



Это идентификатор документа. Скопируйте его и вставьте в блокнот после той строки, которую мы вставили ранее.

У вас получится что-то типа этого:



Затем скопируйте всё, что получилось в блокноте.


Вы можете проверить, всё ли сделали правильно, если вставите получившуюся ссылку в строку браузера. Если вы всё сделали правильно, то вы должны увидеть содержание таблицы в виде JSON-массива.


Кликните на блок Переход с первого экрана и создайте блок HTTP-запрос.


метод - GET.

в поле URL вставьте ссылку из блокнота. Ссылку мы получили шагом ранее.

На вкладке RESPONSE нажмите на + и впишите:

Имя переменной:

items

Значение:

$httpResponse

Вкладки BODY и HEADERS заполнять не нужно.


Этот запрос возьмёт всё, что находится в таблице, и поместит в переменную $items. Далее мы можем уже работать с этой переменной.

Нажмите Сохранить.

От варианта "Завершен с ошибкой" добавьте связь с блоком Текст. Скопируйте и вставьте в него:

Ошибка $httpStatus



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

От варианта "Завершен успешно" создайте новый блок Условия. Скопируйте и вставьте в него:

$items.first()


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

От блока Условия сделайте связь с новым блоком Текст. Скопируйте и вставьте в него:

$items.current().question


Сохраните сценарий. Перейдите на вкладку Сущности.


Нажмите "Создать справочник". Скопируйте и вставьте название справочника:


answers



Нажмите Продолжить.

Теперь будьте внимательны.

Перейдите в вашу гугл-таблицу с ответами на вопросы. Перенесите ответы из колонки "answer" в справочник в колонку "Сущность".

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


В нашем случае у сущностей будут следующие названия:

4

Земля

Как и в гугл-таблице.

В колонку "синонимы" можно добавить другие варианты написания. Например, для сущности "4" добавим синоним "четыре" и "четвёрочка".

Вот что получится в нашем случае:



Нажмите Сохранить изменения и вернитесь на вкладку Сценарий.

Найдите в вашем сценарии экран, на котором есть блок Текст, содержащий "$items.current().question".


Добавьте на этот экран блок Интенты. Скопируйте и вставьте в этот блок следующие интенты:

$answers
также можем добавить в интенты такой шаблон:


Если будете использовать этот шаблон, не забудьте поставить пробелы между $answers и звёздочками: звёздочка, пробел, $answers, пробел, звёздочка.


Этот шаблон позволит нам принимать ответ, даже если он окружён другими словами. Например, если на вопрос "Сколько будет дважды два?" пользователь ответит "Ну, четыре, я думаю" - благодаря этому шаблону бот сможет также принять этот ответ. Подробнее о синтаксисе шаблонов читайте в этой статье.

Нажмите Сохранить.

Вот что у нас получилось:



Кликните на интент $answers и создайте блок Условия. Скопируйте и вставьте в него:

$answers == $items.current().answer


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

== это оператор сравнения языка Javascript. Можете почитать о нём подробнее здесь.

От условия $answers == $items.current().answer сделайте связь со следующим экраном и добавьте блок Текст. Скопируйте и вставьте на него:

Да, это правильный ответ!

Добавьте сюда ещё один блок Текст:

А вот подробный ответ: $items.current().link



В этом блоке мы выводим соответствующую ссылку из таблицы, используя встроенную функцию Aimylogic current().

Работает это так: название переменной из Http-запроса ($items), точка, функция current(), точка, название столбца из гугл-таблицы (link) - получается $items.current().link

Неправильный ответ

Теперь нужно предусмотреть реакцию на неправильный ответ. На блоке Интенты есть вариант "Любая другая фраза". Свяжите её с блоком Текст, на который скопируйте и вставьте:

Нет, не угадали! Это $items.current().answer


В этом блоке мы выводим правильный ответ из таблицы, используя встроенную функцию Aimylogic current(). Работает это так: название переменной из Http-запроса, точка, функция current(), точка, название столбца из гугл-таблицы.

Также на блоке Условия, который содержит $answers == $items.current().answer, есть вариант else.



Свяжите его с блоком Текст, на котором мы выводим сообщение о неправильном ответе.


Теперь у нас есть экран, на котором мы сообщаем, что ответ верный, и экран, на котором мы сообщаем, что ответ неверный.

Добавьте на оба эти экрана блок Переход.


Свяжите оба блока Переход с новым блоком Условия:

$items.next()


Встроенная функция next() выведет следующий элемент массива.

Свяжем это условие с блоком Текст. Скопируйте и вставьте на него:

Следующий вопрос...


Добавьте на этот экран блок Переход.


Свяжите этот блок Переход с экраном, на котором есть $items.current().question:




Условие $items.next() также содержит вариант else. Свяжите этот else с блоком Текст:

На этом всё!

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



Вот как будет выглядеть весь сценарий:








Проверка сценария

Итак, мы завершили построение сценария. В принципе, игра завершена и уже можно играть.

Теперь можете нажать кнопку "Тестировать" и проверить работу бота.



Если вы видите ошибки, или если бот отвечает не так, как ожидается, то проверьте, не допустили ли вы опечаток в каком-либо блоке Условия либо в блоке HTTP-запрос. Если вы всё копировали и вставляли, то никаких ошибок возникать не должно.

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


Добавляем вебхуки

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

У нас уже есть готовый шаблон вебхука для вас. Чтобы воспользоваться им, будем использовать Node JS и Heroku. Подробные инструкции содержатся на этой странице, но все нужные вам в рамках данного урока команды будут в данной статье.

Скачайте и установите систему контроля версий git и Heroku cli, если вы не делали этого раньше. Вот ссылки для скачивания:
git
Heroku cli

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

Затем, перейдите по этой ссылке.

После перехода по ссылке вам могут предложить создать аккаунт Heroku. Если у вас уже есть аккаунт, нажмите Log in. Либо создайте аккаунт, заполнив все нужные поля регистрации.

Затем вы увидите страницу создания приложения Heroku:



В поле App name придумайте название своего приложения Heroku.


Название должно содержать минимум 3 символа, содержать латинские буквы, начинаться с маленькой буквы и быть уникальным.

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


После того как вы увидите зелёную надпись ... is available, нажмите Deploy app.


У Heroku есть ограничение на 5 приложений. После создания пяти приложений вам нужно будет пройти верификацию либо удалить одно из приложений, чтобы создать следующее.

После нажатия кнопки Deploy app вы увидите процесс деплоя в окошке ниже:



Подождите, пока приложение будет готово. Когда вы увидите кнопку View, нажмите её.



Приложение откроется в новой вкладке:



Скопируйте путь из вкладки браузера:


Вернитесь в Aimylogic, перейдите на вкладку Настройки вашего сценария.

В разделе НАСТРОЙКИ ВЕБХУКА вставьте ссылку в поле URL вашего вебхука и нажмите Сохранить.


В вашем приложении сейчас пусто, поэтому нам нужно произвести некоторые изменения.

Откройте терминал.

Если вы используете Windows, нажмите Win + R, наберите cmd и нажмите "Ок", чтоб открыть терминал.



Если у вас Mac, то нажмите Command + пробел и наберите "Терминал".

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

Выполнить команду - значит набрать в терминале точно то, что описано в данной инструкции. Вам нужно будет скопировать и вставить команду, затем нажать Enter. Либо изменить команду соответственно вашему приложению, ввести её в терминал и нажать Enter.

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



Чтобы скопировать путь к папке на Mac, наведите курсор на нужную папку, нажмите клавишу Options, нажмите на папке правой кнопкой мыши и выберите "Copy... pathname" или "Скопировать путь папки".

Перейдите в терминал и наберите:

cd путь папки

где "путь папки" - это путь к папке вашего проекта.

Например,

cd C:\Heroku apps
И нажмите Enter.



Таким образом, мы переходим в нужную папку:


Далее, скопируйте и вставьте в терминал следующую команду, и нажмите Enter:

heroku login

Эта команда проверяет соответствие вашей учетной записи Heroku.


После ввода команды heroku login нажмите любую клавишу, кроме q. Откроется страница браузера.

Нажмите Login



И вернитесь в терминал


Выполните команду следующего вида:

heroku git:clone -a app

Вместо app вставьте название вашего приложения. Ранее вы копировали это название в блокнот.

Может получиться что-то вроде этого:

heroku git:clone -a august30app



Введите эту команду и нажмите Enter.

После выполнения этой команды появится сообщение "Warning: You appear to have cloned an empty repository." Это нормально.


Далее, выполните следующую команду:

cd app

Вместо app снова вставьте название вашего приложения.

Например:

cd august30app


После этого скопируйте и вставьте данную команду, нажмите Enter:

git remote add origin https://github.com/aimylogic/nodejs-webhook


Затем скопируйте и вставьте данную команду, нажмите Enter:

git pull origin master



Теперь перейдите в папку проекта. Там появилась папка с вашим приложением.


Откройте её. Кликните правой кнопкой на файл webhook.js и откройте его любым текстовым редактором.




Удалите всё после строки 'use strict' и вставьте следующее:

module.exports = (webhook) => {
webhook.on('event1', (session) => {
if (session.count == null) {
session.count = 1;
} else {
session.count = session.count + 1;
}
});
}


Файл будет выглядеть так:



Здесь мы прописали кусочек кода на языке Javascript. С помощью этого кода мы будем прибавлять 1 к переменной $count. Важно здесь название события - event1, мы пропишем его позже в сценарии.

Сохраните файл webhook.js и закройте его.

Вернитесь в терминал.

Отправляем изменения

Выполните команду:

git add .


Затем выполните эту команду:

git commit -am "some comments"


И, наконец,

git push

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


Затем перейдите в сценарий и найдите экран, на котором мы выводим сообщение о правильном ответе.


Добавьте для этого экрана заголовок:

event1



Это название должно соответствовать названию события в файле webhook.js:



Вы можете выбрать любой цвет метки экрана.

После этого кликните на значок вебхука, чтобы активировать вебхук.


Теперь добавим в блок Текст сообщение о количестве баллов.

У нас есть блок текст, содержащий следующее:

Да, это правильный ответ!


Замените его содержимое. Для этого скопируйте и вставьте следующее:

Да, это правильный ответ! Количество баллов: $count


Всё, готово! Теперь сохраните сценарий и нажмите Тестировать. Бот должен подсчитывать баллы и выдавать информацию о счёте.



Таким образом, вы можете выполнять любые вычисления, вынося код за рамки сценария.

Подробные инструкции об использовании вебхуков вы можете найти здесь и здесь.
Была ли эта статья полезна?
отменить
Спасибо!