Использование вебхуков для вычислений в сценарии

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

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

предупреждение

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

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

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

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

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

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

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

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

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

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

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

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 для доступа к таблице.

Откройте блокнот и скопируйте в него ссылку: https://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

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

предупреждение

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

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

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

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

4
Земля

Как и в Google Таблице.

В колонку «синонимы» можно добавить другие варианты написания. Например, для сущности «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(), точка, название столбца из Google Таблицы — получается $items.current().link

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

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

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

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

Также на блоке Условия, который содержит $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, мы пропишем его позже в сценарии.