# Урок 3: Вывод фото в боте по REST API

<div id="bkmrk-%D0%A3%D0%B2%D0%B0%D0%B6%D0%B0%D0%B5%D0%BC%D1%8B%D0%B5-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8">Уважаемые разработчики! В этом уроке вы познакомитесь с основами разработки приложений с помощью платформы Metabot. Вместе мы создадим простой бот, который будет присылать в мессенджер по запросу изображение с сайта Unsplash.com.</div><div id="bkmrk-">  
</div><div id="bkmrk-%D0%9E%D0%B1%D1%80%D0%B0%D1%89%D0%B0%D1%8F%D1%81%D1%8C-%D0%BA-%D1%81%D1%82%D0%BE%D1%80%D0%BE%D0%BD%D0%BD%D0%B8">Обращаясь к сторонним веб-сервисам с помощью REST API, мы создадим простой диалоговый сценарий, запрашивающий ключевое слово, по которому вы хотели бы найти изображение. Затем бот обращается к сервису API и возвращает найденное изображение. Далее мы добавим кнопку "Прислать следующее изображение". Таким образом, через бота вы сможете посмотреть поочерёдно все изображения, найденные на сервисе.</div><div id="bkmrk--0"></div><p class="callout info align-left">Подробнее изучить работу бота вы можете с помощью нашего примера — бота в Telegram: **[@Metabot101Metabot](https://t.me/Metabot101Metabot)** или [**Chat Widget**](https://app.metabot24.com/chat-widget/v3_metabotWidget_17_1323_1131_aqpwJJyJUPzBMopDMOQJEDPJeIqwCJIathUtA)</p>

<div id="bkmrk-%D0%92-%D1%85%D0%BE%D0%B4%D0%B5-%D1%83%D1%80%D0%BE%D0%BA%D0%B0-%D0%B2%D1%8B-%D1%83%D0%B7%D0%BD%D0%B0">В ходе урока вы узнаете:</div><div id="bkmrk--1">  
</div>- Как разрабатывается REST API интеграция с помощью вызова точек интеграции, называемых "endpoints";
- Как использовать JavaScript для обращения к сторонним ресурсам;
- Как работать с данными, которые хранятся в лиде (lead) и во временной памяти (memory);
- Как работать с режимом отладки кода, который позволит вам получать уведомления об ошибках выполнения вашего кода.

<div id="bkmrk-%D0%9F%D1%80%D0%B8%D1%8F%D1%82%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BE%D0%B1%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D1%8F%21">Приятного обучения!</div>### Инструкция по разработке: Подготовка бота

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

<p class="callout info align-left">Как это сделать вы можете узнать из урока **["Hello Humans: ваше руководство по быстрому старту"](https://docs.metabot24.ru/books/3-ucimsya-na-primerax/page/hello-humans-vase-rukovodstvo-po-bystromu-startu "Hello World: ваше руководство по быстрому старту")**</p>

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

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

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

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

**1.** Создадим канал Telegram.

<p class="callout info align-left">Как это сделать вы можете узнать из инструкции **["Интеграция канала Telegram с платформой Metabot"](https://docs.metabot24.ru/books/3-nastroika-botov/page/telegram "Telegram")**</p>

**2.** Создадим канал Metabot Widget.

<p class="callout info align-left">Как это сделать вы можете узнать из инструкции **["Metabot Widget"](https://docs.metabot24.ru/books/2-instrukciya-polzovatelya/page/metabot-widget "Metabot Widget")**</p>

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

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

<p class="callout info align-left">Как это сделать вы можете узнать из инструкции [**"Маршруты"**](https://docs.metabot24.ru/books/2-instrukciya-polzovatelya/page/marsruty "Маршруты")</p>

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

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/SkohxlEkVGiFmkPZ-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/SkohxlEkVGiFmkPZ-image.png)

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/pRdKefzgem71Ic7r-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/pRdKefzgem71Ic7r-image.png)

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

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

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

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/32t5ReG06XjPi96d-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/32t5ReG06XjPi96d-image.png)

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/Wbm73GP9S183Hfr2-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/Wbm73GP9S183Hfr2-image.png)

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/38Fer6tCwIQJRBKh-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/38Fer6tCwIQJRBKh-image.png)

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

**1.** Добавляем пункты меню "Выбрать тему" и "Следующее фото" в стартовый скрипт.

<p class="callout info align-left">Как это сделать вы можете узнать из инструкции [**"Создание меню"**](https://docs.metabot24.ru/books/2-instrukciya-polzovatelya/page/sozdanie-menyu "Создание меню")</p>

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

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/QXvv0LoZhqP1g3tw-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/QXvv0LoZhqP1g3tw-image.png)

- **Название** — это имя скрипта, которое может содержать в себе любые символы. Скриптам связанные с интеграциями, которые содержат большой объем JavaScript команд, рекомендуется присваивать англоязычные имена, так как это область работы JS программистов;
- **Код** — это дополнительный уникальный идентификатор. Используется для поиска скрипта, например, в JavaScript функциях, а также для поиска и запуска скрипта через NLP. Он всегда обозначается одним словом без пробелов.

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/1icG6HQQR8n57GlB-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/1icG6HQQR8n57GlB-image.png)

**3.** Для скрипта выбора темы вводим в поля название и код значение **select\_theme\_photo**, а в скрипт переключения на следующее фото значение **show\_next\_photo**.

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/elFU5RuWl3nPFe7v-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/elFU5RuWl3nPFe7v-image.png)

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

Теперь мы готовы выполнить интеграцию с сервисом Unsplash.com.

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

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

**1.** Переходим к документации API Unsplash.com по ссылке: [https://unsplash.com/documentation](https://unsplash.com/documentation)

**2.** Регистрируемся на платформе.

**3.** Для работы с API нам нужно получить специальный ключ-токен для доступа к методам API. Переходим в раздел "Ваши приложения" и нажимаем на окошко "Новое приложение".

[![Снимок экрана 2023-07-11 122456.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/lVkgPmVJbssjxjcg-snimok-ekrana-2023-07-11-122456.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/lVkgPmVJbssjxjcg-snimok-ekrana-2023-07-11-122456.png)

**4.** Затем заполняем информацию о том для чего будет использован ключ, прокручиваем страницу ниже и как результат получаем Access Key. Он и будет использован для доступа к API.

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/dpXdpv37O0xIWg5A-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/dpXdpv37O0xIWg5A-image.png)

**5.** В документации Unsplash указано два способа применения Access Key:

- При помощи заголовка авторизации:

```
Authorization: Client-ID YOUR_ACCESS_KEY
```

- Используя client\_id параметр запроса:

```
https://api.unsplash.com/photos/?client_id=YOUR_ACCESS_KEY
```

Мы используем второй вариант и просто добавим Access Key как параметр URL. Для этого зайдем в «Настройки бота» меню «Атрибуты» создадим системный атрибут **sysApiHeaders** и присвоим ему значение:

```
client_id=4ERbUpdlr1g8asSD6c_Evz9Ap1L-cl0ZZj0RzrKJFpc. 
```

<p class="callout info align-left">Подробнее про атрибуты вы можете узнать из инструкции **[Атрибуты](https://docs.metabot24.ru/books/2-instrukciya-polzovatelya/page/atributy "Атрибуты")**</p>

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/FTVdPhFzEPj7e7v6-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/FTVdPhFzEPj7e7v6-image.png)

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

**1.** На главной странице документации в разделе [Schema](https://unsplash.com/documentation#schema) находим базовый URL для работы с фото.

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/zU6e8f0MeozOqcKy-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/zU6e8f0MeozOqcKy-image.png)

**2.** Аналогично предыдущему пункту, в «Настройки бота» меню «Атрибуты» заносим системный атрибут **sysApiHttpClientConfig** и присваиваем значение: **https://api.unsplash.com/**

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/YbNTSOZRuJg0rdqh-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/YbNTSOZRuJg0rdqh-image.png)

<p class="callout info align-left">Подробнее про работу с API на платформе Metabot вы можете узнать из инструкции **[Конструктор API](https://docs.metabot24.ru/books/4-instrukciya-js-programmista/page/konstruktor-api "Конструктор API")**</p>

### Заполняем скрипт select\_theme\_photo

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

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

<p class="callout info align-left">Подробнее о команде [**"Запросить значение"**](https://docs.metabot24.ru/books/2-instrukciya-polzovatelya/page/zaprosit-znacenie "Запросить значение") вы можете узнать из соответствующей инструкции.</p>

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

```JavaScript
// раздел 1: подготовка параметров REST запроса

var photoTheme = lead.getAttr('photoTheme');
var url = bot.getAttr("sysApiHttpClientConfig") + "search/photos?" + bot.getAttr("sysApiHeaders") + "&query=" + photoTheme + "&per_page=1";

//--------------------------------------------------------

// раздел 2: подготовка вспомогательной переменной и начальная установка атрибутов лида

var total_results = 0;
lead.setAttr('url', url);
memory.setAttr('rsps.description', '');
lead.setAttr('rsps.totalResults', 0);
memory.setAttr('rsps.photographer', '');
memory.setAttr('rsps.full', '');
memory.setAttr('rsps.raw', '');
lead.setAttr('photoThemeIndex', 1);

//--------------------------------------------------------
```

В разделе **1** выбирается из атрибутов лида введенная ранее пользователем тема **photoTheme** и подготавливаются параметры REST запроса. Здесь же мы добавляем ранее созданные системные атрибуты в URL запроса. Так же добавляем в URL атрибуты запроса: тему фото и количество выводимых фото.

Ниже подробно расписаны все возможные атрибуты **запроса**:

<table border="1" id="bkmrk-%D0%90%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82-%D0%A2%D0%B8%D0%BF-%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5" style="border-collapse: collapse; width: 100.001%; height: 218.815px;"><tbody><tr style="height: 12.0556px; background-color: #ecf0f1;"><td style="width: 33.3033%; height: 12.0556px;">Атрибут</td><td style="width: 33.3033%; height: 12.0556px;">Тип</td><td style="width: 33.3033%; height: 12.0556px;">Описание</td></tr><tr style="height: 29.537px;"><td style="width: 33.3033%; height: 29.537px;"><div class="docs__nested-table__item__title">query</div></td><td style="width: 33.3033%; height: 29.537px;">string | required

</td><td style="width: 33.3033%; height: 29.537px;">Поисковой запрос. Например: Океан, Тигры, Груши и т.д.</td></tr><tr style="height: 29.537px;"><td style="width: 33.3033%; height: 29.537px;"><div class="docs__nested-table__item__title">orientation</div></td><td style="width: 33.3033%; height: 29.537px;">string | optional

</td><td style="width: 33.3033%; height: 29.537px;">Желаемая ориентация фотографии. Текущие поддерживаемые ориентации: landscape, portrait or squarish.</td></tr><tr style="height: 29.537px;"><td style="width: 33.3033%; height: 29.537px;"><div class="docs__nested-table__item__title">order_by</div></td><td style="width: 33.3033%; height: 29.537px;">string | optional

</td><td style="width: 33.3033%; height: 29.537px;">Как сортировать фотографии. По умолчанию: relevant. Допустимые значения latest и relevant.</td></tr><tr style="height: 29.537px;"><td style="width: 33.3033%; height: 29.537px;"><div class="docs__nested-table__item__title">color</div></td><td style="width: 33.3033%; height: 29.537px;">string | optional

</td><td style="width: 33.3033%; height: 29.537px;">Желаемый цвет фото. Поддерживаемые цвета: black\_and\_white, black, white, yellow, orange, red, purple, magenta, green, teal, и blue.</td></tr><tr style="height: 29.537px;"><td style="width: 33.3033%; height: 29.537px;"><div class="docs__nested-table__item__title"><div class="docs__nested-table__item__title">collections</div></div></td><td style="width: 33.3033%; height: 29.537px;">string | optional

</td><td style="width: 33.3033%; height: 29.537px;">Идентификаторы коллекций для сужения поиска. Если несколько, через запятую.</td></tr><tr><td style="width: 33.3033%;"><div class="docs__nested-table__item__title"><div class="docs__nested-table__item__title">content_filter</div></div></td><td style="width: 33.3033%;">string | optional

</td><td style="width: 33.3033%;">Ограничьте результаты по безопасности контента. По умолчанию: low. Допустимые значения low и high.</td></tr><tr style="height: 29.537px;"><td style="width: 33.3033%; height: 29.537px;"><div class="docs__nested-table__item__title"><div class="docs__nested-table__item__title"><div class="docs__nested-table__item__title">page</div></div></div></td><td style="width: 33.3033%; height: 29.537px;">integer | optional

</td><td style="width: 33.3033%; height: 29.537px;">Номер страницы, которую вы запрашиваете. По умолчанию: 1.</td></tr><tr style="height: 29.537px;"><td style="width: 33.3033%; height: 29.537px;"><div class="docs__nested-table__item__title"><div class="docs__nested-table__item__title"><div class="docs__nested-table__item__title"><div class="docs__nested-table__item__title">per_page</div></div></div></div></td><td style="width: 33.3033%; height: 29.537px;">integer | optional</td><td style="width: 33.3033%; height: 29.537px;">Количество результатов, которые вы запрашиваете на странице. По умолчанию: 10.</td></tr></tbody></table>

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

- **url** — REST запрос;
- **total\_results** – всего фото по заданной теме;
- **photo\_theme\_found** — признак, что запрос вернул фото;
- **next\_page** — следующая страница;
- **photographer** – фотограф;
- **original** — cсылка на оригинальное фото;
- **medium** — ссылка на уменьшенную копию medium;
- **photo\_theme\_index** — текущиее фото в теме.

При этом одни переменные сохраняются в атрибутах лида, а другие во временном хранилище в памяти (в memory).

<p class="callout info">**Примечание:** Переменные, которые необходимы для выполнения алгоритма скрипта лучше сохранять в memory, чтобы не засорять атрибуты лида ненужными данными. В тоже время необходимо помнить, что при запуске нового скрипта по кнопке, по намерению NLP или по маршруту memory очищается, а lead очистить можно только принудительно командой. Поэтому переменные, которые используются в различных скриптах, сохранять в memory не нужно. В тоже время скрипт, который запускается из некоторого скрипта командой запустить скрипт имеет доступ к переменным в memory скрипта, который его запустил и всех остальных его запустивших.</p>

<p class="callout info">**Примечание:** для отладки удобно временно сохранять переменную в lead вместо memory, так как переменные lead можно просматривать в справочнике атрибутов лидов.</p>

Используются некоторые параметры из JSON объекта, который возвращает REST запрос.

Ниже приведена полная структура ответа:

```JSON
{
  "total": 133,
  "total_pages": 7,
  "results": [
    {
      "id": "eOLpJytrbsQ",
      "created_at": "2014-11-18T14:35:36-05:00",
      "width": 4000,
      "height": 3000,
      "color": "#A7A2A1",
      "blur_hash": "LaLXMa9Fx[D%~q%MtQM|kDRjtRIU",
      "likes": 286,
      "liked_by_user": false,
      "description": "A man drinking a coffee.",
      "user": {
        "id": "Ul0QVz12Goo",
        "username": "ugmonk",
        "name": "Jeff Sheldon",
        "first_name": "Jeff",
        "last_name": "Sheldon",
        "instagram_username": "instantgrammer",
        "twitter_username": "ugmonk",
        "portfolio_url": "http://ugmonk.com/",
        "profile_image": {
          "small": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=7cfe3b93750cb0c93e2f7caec08b5a41",
          "medium": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=5a9dc749c43ce5bd60870b129a40902f",
          "large": "https://images.unsplash.com/profile-1441298803695-accd94000cac?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=32085a077889586df88bfbe406692202"
        },
        "links": {
          "self": "https://api.unsplash.com/users/ugmonk",
          "html": "http://unsplash.com/@ugmonk",
          "photos": "https://api.unsplash.com/users/ugmonk/photos",
          "likes": "https://api.unsplash.com/users/ugmonk/likes"
        }
      },
      "current_user_collections": [],
      "urls": {
        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"
      },
      "links": {
        "self": "https://api.unsplash.com/photos/eOLpJytrbsQ",
        "html": "http://unsplash.com/photos/eOLpJytrbsQ",
        "download": "http://unsplash.com/photos/eOLpJytrbsQ/download"
      }
    },
    // больше фото ...
  ]
}
```

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

```JavaScript
// раздел 3: выполнение REST запроса

memory.setAttr('photoThemeFound', 0);
let jsonResponse = api.getJson(url);
if (jsonResponse) {

//------------------------------------------------
  
// раздел 4: сохранение результата запроса в атрибутах лида
  
  var rsps = jsonResponse;
  totalResults = rsps['total'] * 1;
  if (totalResults > 0) {
    memory.setAttr('photoThemeFound', 1);
    lead.setAttr('rsps.totalResults', totalResults);
    lead.setAttr('rsps.photographer', rsps['results'][0]['user']['username']);
    lead.setAttr('rsps.description', rsps['results'][0]['description']);
    lead.setAttr('rsps.full', rsps['results'][0]['urls'][ 'full' ]);
    lead.setAttr('rsps.raw', rsps['results'][0]['urls'][ 'raw' ]);
  }
  
//------------------------------------------------

// раздел 5
  
  memory.setJsonAttr("lastHttpResponse", api.getLastResponseContent());
  memory.setAttr("lastHttpResponseCode", api.getLastResponseCode());
}

//------------------------------------------------
```

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

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

В разделе **5** для удобства отладки запоминаем в атрибуте лида полный ответ и код ответа сервиса.

<p class="callout warning">После завершения отладки запоминание полного ответа в атрибуте лучше закомментировать или удалить, так как он занимает довольно много места и будет сохранен для каждого лида обратившегося в бота.</p>

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/NfVDQTf7fm92HQER-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/NfVDQTf7fm92HQER-image.png)

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/heeqxgIqvWOzFGxd-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/heeqxgIqvWOzFGxd-image.png)

Вы можете скопировать данные команд из таблицы:

<table border="1" id="bkmrk-%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%B8%D0%B5-%D0%B2%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F-%D0%A2" style="border-collapse: collapse; width: 100.001%;"><tbody><tr style="background-color: #c2e0f4;"><td style="width: 49.9543%;">Условие выполнения</td><td style="width: 49.9557%;">Текст команды</td></tr><tr><td style="width: 49.9543%;"><span class="hljs-keyword">return</span> (memory.<span class="hljs-title function_">getAttr</span>(<span class="hljs-string">"photoThemeFound"</span>) == <span class="hljs-number">1</span>);</td><td style="width: 49.9557%;">"{{$photoTheme}}": {{$rsps.totalResults}} / {{$photoThemeIndex}}  
Фотограф: {{$rsps.photographer}}  
Название: {{$rsps.description}}  
Изображение: {{$rsps.raw}}  
Высокое разрешение: {{$rsps.full}}</td></tr><tr><td style="width: 49.9543%;"><span class="hljs-keyword">return</span> !(memory.<span class="hljs-title function_">getAttr</span>(<span class="hljs-string">"photoThemeFound"</span>) == <span class="hljs-number">1</span>);</td><td style="width: 49.9557%;">Фото по теме "{{$photoTheme}}" не найдены.</td></tr></tbody></table>

### Заполняем скрипт show\_next\_photo

**1.** Входим в редактор команд скрипта и набираем скрипт, который аналогично предыдущему состоит из трех частей:

- **1** извлечение из лида параметров запроса;
- **2** выполнение запроса и заполнение атрибутов в memory и lead;
- **3** сохранение переменных для отладки.

Команда запроса темы не нужна, так как она определена в скрипте выбора темы и сохранена в атрибуте **photoTheme**. При этом ранее сохраненный индекс фото увеличиваем на единицу, чтобы при запросе не выводилось одно и то же фото.

```JavaScript
// раздел 1: подготовка параметров REST запроса

var photoTheme = lead.getAttr('photoTheme');
var photoThemeIndex = lead.getAttr('photoThemeIndex') * 1;
photoThemeIndex++;
var url = bot.getAttr("sysApiHttpClientConfig") + "search/photos?" + bot.getAttr("sysApiHeaders") 
+ "&query=" + photoTheme + "&page=" + photoThemeIndex + "&per_page=1";

//----------------------------------------------------------

// раздел 2

lead.setAttr('url', url);
memory.setAttr('photoThemeFound', 0);
jsonResponse = api.getJson(url);
if (jsonResponse) {
  var rsps = jsonResponse;
  totalResults = rsps['total'] * 1;
  if (totalResults > 0 && photoThemeIndex <= totalResults) {
    memory.setAttr('photoThemeFound', 1);
    lead.setAttr('photoTheme', photoTheme);
    lead.setAttr('photoThemeIndex', photoThemeIndex);
    lead.setAttr('rsps.totalResults', totalResults);
    lead.setAttr('rsps.photographer', rsps['results'][0]['user']['username']);
    lead.setAttr('rsps.description', rsps['results'][0]['description']);
    lead.setAttr('rsps.full', rsps['results'][0]['urls'][ 'full' ]);
    lead.setAttr('rsps.raw', rsps['results'][0]['urls'][ 'raw' ]);
  }
  
//----------------------------------------------------------
  
// раздел 3
  
  memory.setJsonAttr("lastHttpResponse", api.getLastResponseContent());
  memory.setAttr("lastHttpResponseCode", api.getLastResponseCode());
}

//----------------------------------------------------------
```

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

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/rTtctA9Iqr2YcanM-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/rTtctA9Iqr2YcanM-image.png)

Вы можете скопировать данные команд из таблицы:

<table border="1" id="bkmrk-%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%B8%D0%B5-%D0%B2%D1%8B%D0%BF%D0%BE%D0%BB%D0%BD%D0%B5%D0%BD%D0%B8%D1%8F-%D0%A2-0" style="border-collapse: collapse; width: 100.001%;"><tbody><tr style="background-color: #c2e0f4;"><td style="width: 49.9543%;">Условие выполнения</td><td style="width: 49.9557%;">Текст команды</td></tr><tr><td style="width: 49.9543%;"><span class="hljs-keyword">return</span> (memory.<span class="hljs-title function_">getAttr</span>(<span class="hljs-string">"photoThemeFound"</span>) == <span class="hljs-number">1</span>);</td><td style="width: 49.9557%;">"{{$photoTheme}}": {{$rsps.totalResults}} / {{$photoThemeIndex}}  
Фотограф: {{$rsps.photographer}}  
Название: {{$rsps.description}}  
Изображение: {{$rsps.raw}}  
Высокое разрешение: {{$rsps.full}}</td></tr><tr><td style="width: 49.9543%;"><span class="hljs-keyword">return</span> !(memory.<span class="hljs-title function_">getAttr</span>(<span class="hljs-string">"photoThemeFound"</span>) == <span class="hljs-number">1</span>);</td><td style="width: 49.9557%;">Фото не найдено.</td></tr></tbody></table>

Бот готов! Теперь можно переходить к его тестированию.

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

**1.** Запускаем бот в канале Telegram.

Запрашиваем у бота тему фото, которое мы хотим получить. Если фото по теме найдены, то бот выводит количество найденных фото по теме и индекс выведенного фото. Ниже указывается username фотографа, название фото и ссылки на него в обычном и HD формате.

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/F9LUSFcE8ZfF8i9R-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/F9LUSFcE8ZfF8i9R-image.png)

**2.** Запускаем бот в канале виджета Metabot.

Бот в виджете работает по тому же принципу: запрос темы и вывод ссылок на фото.

[![image.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/RUzjKl7w1GmyaMoz-image.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/RUzjKl7w1GmyaMoz-image.png)

Поздравляем с успешным созданием бота!

<p class="callout info align-left">Рекомендуем так же ознакомиться с остальными нашими уроками по созданию ботов, например **[Автоматизируем службу поддержки](https://docs.metabot24.ru/books/metabot-platform/page/avtomatiziruem-sluzbu-podderzki "Автоматизируем службу поддержки")**</p>