Перейти к основному контенту

Применяем основные функции платформы для создания бота

Создание бота для просмотра фото на Pexels.com

Первые шаги

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

image.png

Первым делом требуется создать скрипт-приветствие и добавить в него скрипт с приветствием и меню.

Как это сделать вы можете узнать из урока "Hello World: ваше руководство по быстрому старту"

Для нашего бота в начальном скрипте понадобится только команда отправки текста. Примерное содержимое команды может быть таким: "Приветствую! Это бот для просмотра фотографий на сервисе Pexels.com".

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

Подключение каналов

В данном боте будет создано два канала: Telegram и Metabot Widget

Создание канала Telegram

Как это сделать вы можете узнать из инструкции "Интеграция канала Telegram с платформой Metabot24"

Создание канала Widget

Как это сделать вы можете узнать из инструкции "Metabot Widget"

Подключение маршрутов

Создадим маршрут, который будет ссылаться к стартовому-скрипту.

Как это сделать вы можете узнать из инструкции "Маршруты"

Запускаем первую версию бота

Находим бот в Telegram и запускаем /start.

image.png

В справочнике каналов открываем канал «Metabot Widget» и в справочнике каналов последовательно нажимаем на кнопки «Загрузить|Предварительный просмотр».

image.png

После этого возможно включить режим отладки для обоих созданных лидов бота.

Включение режима отладки

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

Для включения отладки следует зайти в меню "Лиды" и нажать на кнопку переключения отладчика.

image.png

Затем нужно выбрать уровень отладки. В данном случае выбирайте уровень "editor".

image.png

Если режим отладки включен, в мессенджер или виджет (в зависимости от канала, с которым связан лид), то в случае ошибок в JS-коде, будут выдаваться сообщения об ошибках. Если лид, под которым выполнялась отладка используется на продуктовом сервере, после завершения разработки отладчик следует отключить.

image.png

Расширяем скрипт с приветствием и меню

Добавляем пункты меню в стартовый скрипт.

Как это сделать вы можете узнать из инструкции "Создание меню"

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

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

image.png

Скриптам связанные с интеграциями, которые содержат большой объем JavaScript команд, рекомендуется присваивать англоязычные имена. Это область работы JS программистов.

image.png

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

image.png

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

Подключаемся к API Pixels.com

Для начала получим токен к API Pixels.com.

Переходим к документации API Pixels.com по ссылке: https://www.pexels.com/api/documentation/

Регистрируемся на платформе. Переходим в раздел "Авторизация" и переходим по ссылке "запросить ключ API".

image.png

Затем заполняем информацию о том для чего будет использован ключ и как результат получаем API Key:

image.png

В «Настройки бота» меню «Атрибуты» создаем системный атрибут sys_api_headers и присваиваем ему значение:

{"Accept":"application/json",  "Authorization": "Bearer <ваш скопированный токен>"}

Внимание! Между Bearer и токеном должен быть ровно один пробел!

image.png

Иcследуем endpoints API Pixels.com

На главной странице документации в правом верхнем углу находим базовый URL для работы с фото.

image.png

Аналогично предыдущему пункту, в «Настройки бота» меню «Атрибуты» заносим системный атрибут sys_api_http_client_config  и присваиваем значение: {"base_uri":"https://api.pexels.com/v1/"}

В итоге имеем в нашем боте следующие атрибуты:

image.png

Заполняем скрипт SELECT_THEME_PHOTO

Данный скрипт запрашивает тему фото, выполняет rest запрос к сервису и выводит первую выбранную фотографию.

Для реализации данного функционала создадим команду "Запросить значение". Зададим команде параметр "Имя переменной" = photo_theme. Именно в этом атрибуте будет храниться результат запроса.

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

Следующей командой будет "Выполнить JavaScript". Она будет содержать JS код для доступа к API.

// раздел 1: подготовка параметров rest запроса
var photo_theme = lead.getAttr('photo_theme');
var url = "search?query=" + photo_theme + '&per_page=1';
var jsonBody = {};
var headers = {};

// раздел 2: подготовка вспомогательной переменной и начальная установка атрибутов Лида
var total_results = 0;
lead.setAttr('url', url);
memory.setAttr('rsps.next_page', '');
lead.setAttr('rsps.total_results', 0);
memory.setAttr('rsps.photographer', '');
memory.setAttr('rsps.original', '');
memory.setAttr('rsps.medium', '');
lead.setAttr('photo_theme_index', 1);

В разделе 1 выбирается из атрибутов Лида введенная ранее тема PHOTO_THEME  и подготавливаются параметры rest запроса.

В разделе 2 присваиваем начальные значения атрибутов:

  • url - rest запрос.
  • total_results – всего фото по заданной теме
  • photo_theme_found - признак, что запрос вернул фото
  • next_page - следующая страница
  • photographer – фотограф
  • original - cсылка на оригинальное фото
  • medium – ссылка на уменьшенную копию medium
  • photo_theme_index - текущиее фото в теме

При этом одни переменные сохраняются в атрибутах Лида (в lead), а другие во временном хранилище в памяти (в memory).  Переменные, которые необходимы для выполнения алгоритма скрипта лучше сохранять в memory, чтобы не засорять атрибуты Лида ненужными данными. В тоже время необходимо помнить, что при запуске нового скрипта по кнопке, по намерению NLP или по маршруту memory очищается, а lead очистить можно только принудительно командой. Поэтому переменные, которые используются в различных скриптах, сохранять в memory не нужно. В тоже время скрипт, который запускается из некоторого скрипта командой запустить скрипт имеет доступ к переменным в memory скрипта, который его запустил и всех остальных его запустивших.

Примечание: для отладки удобно временно сохранять переменную в lead вместо memory, так как переменные lead можно просматривать в справочнике атрибутов Лидов.

Используются некоторые параметры из json объекта, который возвращает rest запрос. Подробно формат запроса и структуру ответа можно изучить по адресу: https://www.pexels.com/ru-ru/api/documentation/#photos-search

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

// раздел 3: выполнение rest запроса
memory.setAttr('photo_theme_found', 0);
jsonResponse = api.getJson(url, jsonBody, headers);
if (jsonResponse) {

// раздел 4: сохранение результата запроса в атрибутах Лида
  var rsps = jsonResponse;
  total_results = rsps['total_results'] * 1;
  if (total_results > 0) {
    memory.setAttr('photo_theme_found', 1);
    lead.setAttr('rsps.total_results', total_results);
    memory.setAttr('rsps.photographer', rsps['photos'][0]['photographer']);
    memory.setAttr('rsps.original', rsps['photos'][0]['src'][ 'original' ]);
    memory.setAttr('rsps.medium', rsps['photos'][0]['src'][ 'medium' ]);
    memory.setAttr('rsps.next_page', rsps['next_page']);
  }
// раздел 5
  memory.setJsonAttr("lastHttpResponse", api.getLastResponseContent());
  memory.setAttr("lastHttpResponseCode", api.getLastResponseCode());
}

В разделе 3 выполняется rest запрос к сервису и проверяется что запрос выполнился.

В разделе 4 проверяется что в данной теме имеются фото и переносятся необходимые параметры rest запроса в атрибуты Лида.

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

Далее выводим ответ в канал, используя данные, сохраненные в атрибутах Лида. Для этого используем две команды вывода текста с условием. Одна срабатывает когда атрибут photo_theme_found равен 1, вторая, наоборот, он не равен 1.

image.png

Так выглядят данные команды после создания:

image.png

Заполняем скрипт SHOW_NEXT_PHOTO

Входим в редактор команд скрипта и набираем скрипт, который аналогично предыдущему состоит из трех частей:  1 извлечение из Лида параметров запроса, 2 выполнение запроса и заполнение атрибутов в memory и lead, 3 сохранение переменных для отладки.  Команда запроса темы не нужна, так как она определена в скрипте выбора темы и сохранена в атрибуте photo_theme.

// раздел 1: подготовка параметров rest запроса
var photo_theme = lead.getAttr('photo_theme');
var photo_theme_index = lead.getAttr('photo_theme_index') * 1;
photo_theme_index = photo_theme_index + 1;
var url = "search?query=" + photo_theme + "&page=" + photo_theme_index + "&per_page=1"
var jsonBody = {};
var headers = {};

// раздел 2
lead.setAttr('url', url);
memory.setAttr('photo_theme_found', 0);
jsonResponse = api.getJson(url, jsonBody, headers);
if (jsonResponse) {
  var rsps = jsonResponse;
  total_results = rsps['total_results'] * 1;
  if (total_results > 0 && photo_theme_index <= total_results) {
    memory.setAttr('photo_theme_found', 1);
    lead.setAttr('rsps.total_results', total_results);
    lead.setAttr('photo_theme', photo_theme);
    lead.setAttr('photo_theme_index', photo_theme_index);
    memory.setAttr('rsps.photographer', rsps['photos'][0]['photographer']);
    memory.setAttr('rsps.original', rsps['photos'][0]['src'][ 'original' ]);
    memory.setAttr('rsps.medium', rsps['photos'][0]['src'][ 'medium' ]);
    memory.setAttr('rsps.next_page', rsps['next_page']);
  }
// раздел 3
  memory.setJsonAttr("lastHttpResponse", api.getLastResponseContent());
  memory.setAttr("lastHttpResponseCode", api.getLastResponseCode());
}

Аналогично создаем две команды вывода данных с условиями для отправки в канал необходимых атрибутов Лида. Одна срабатывает в случае успешной выборки фото, другая в противоположном случае.

image.png

Запускаем бот!

В канале Telegram

image.png

В канале виджета Metabot

image.png

Поздравляем с успешным созданием бота! Рекомендуем так же ознакомиться с остальными нашими уроками по созданию ботов.