Перейти к содержанию

Подключение n8n

Подключение n8n

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

В этой инструкции мы разберём, как создать рабочий процесс в n8n и настроить его интеграцию с WiseBot.

Интеграция чат-бота WiseBot с n8n превращает бота в мощный инструмент автоматизации, расширяя его функционал без необходимости писать сложный backend-код.

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

В качестве примера рассмотрим интеграцию с сервисом OpenWeatherMap для получения сведений о погоде в разных городах.

Этапы интеграции:

Шаг 1. Создание узла Webhook для получения запроса из Wisebot

Создайте узел Webhook для приема данных из WiseBot.

  1. Откройте n8n.

  2. Нажмите на кнопку Create Workflow (Создать рабочий процесс).

    Image

  3. Откроется редактор рабочего процесса.

  4. Нажмите кнопку Tab или кнопку Add First step.

  5. В появившемся окне выберите On webhook call.

    Image

  6. Откроется форма настройки узла Webhook.

  7. В поле HTTP Method выберите метод POST.

  8. В поле Respond выберите вариант Using ‘Respond to Webhook’ Node: Узел отвечает, как определено в узле "Ответить на вебхук".

    Image

  9. Скопируйте Production URL. Он понадобится нам в дальнейшем.

    Image

  10. Нажмите кнопку Back to canvas в верхнем левом углу.

    В окне редактора отобразится настроенный узел Webhook.

    Image

Шаг 2. Добавление узла Switch

Создайте узел Switch для создания условий. Он позволит определить, какое действие необходимо выполнить в зависимости от команды WiseBot.

  1. Нажмите на кнопку Добавить Image, размещенную справа от узла Webhook.

  2. В появившемся окне выберите Flow → Switch. Чтобы быстро найти узел, воспользуйтесь поисковой строкой.

    Image

  3. Откроется форма настройки узла Switch.

  4. В поле Mode выберите режим Rules.
  5. В поле value1 укажите {{$json.body.next_action}} с режимом Expression.

  6. В поле value2 добавьте названия action-скрипта, созданного в WiseBot.

    Image

    В качестве примера добавим два скрипта:

    • action_weather для определения погоды в различных городах,
    • action_message для текстовых сообщений.

    Для добавления второго условия нажмите кнопку Add Routing Rule.

  7. Нажмите кнопку Back to canvas в верхнем левом углу.

    В окне редактора отобразится настроенный узел Switch.

    Image

Шаг 3. Добавление узла OpenWeatherMap

Создайте узел OpenWeatherMap для отправки запроса в сервис OpenWeatherMap через API для получения актуальных данных о погоде.

  1. Нажмите на кнопку Добавить Image, размещенную у выхода «0» справа от узла Switch.

  2. В появившемся окне выберите OpenWeatherMap. Чтобы быстро найти узел, воспользуйтесь поисковой строкой.

    Image

  3. Откроется форма настройки узла Switch.

  4. В поле Operation выберите Current Weather.
  5. В поле Format выберите Metric.
  6. В поле Location Selection выберите City Name.
  7. В поле City введите {{$json.body.tracker.slots.city_weather}} с режимом Expression.

  8. В поле Language введите ru.

    Image

  9. Нажмите кнопку Back to canvas в верхнем левом углу.

    В окне редактора отобразится настроенный узел OpenWeatherMap.

    Image

Шаг 4. Добавление узла Code

После того как данные от OpenWeatherMap получены, необходимо их обработать и подготовить для отправки в WiseBot. Для этого создайте узел Code и добавьте в него кастомную логику на JavaScript.

1. Создание узла для преобразования данных

  1. Нажмите на кнопку Добавить Image, размещенную справа от узла OpenWeatherMap.
  2. В появившемся окне выберите Code. Чтобы быстро найти узел, воспользуйтесь поисковой строкой.
  3. Откроется форма настройки узла.

  4. Вставьте следующий код:

    // Получаем первый (единственный) входящий элемент
const item = $input.first();
const data = item.json;

// Функция для создания стандартного ответа
const createResponse = (text) => ({
  responses: [
    {
      text
   }
  ],
  events: [
    {
      event: "slot",
      name: "city_weather",
      value: null
    }
  ]
});

// Если пришла ошибка, возвращаем сообщение об ошибке
if (data.error) {
  item.json = createResponse("Город не найден");
   return item;
}

// Извлекаем данные о погоде с помощью деструктуризации
const {
  name: cityName,
  main: { temp, humidity },
  weather,
  wind: { speed: windSpeed }
} = data;
const description = weather[0].description;
const roundedTemp = Math.round(temp);

// Формируем красиво оформленный текст ответа
const formattedText = `Погода в городе *${cityName}*:\n
🌡 Температура: *${roundedTemp}°C*\n
☁️ *${description}*\n
💧 Влажность: *${humidity}%*\n
💨 Скорость ветра: *${windSpeed} м/с*`;

// Возвращаем сформированный объект для WiseBot
item.json = createResponse(formattedText);
return item;

  5. Нажмите кнопку Back to canvas в верхнем левом углу.

2. Создание узла для получения текстового сообщения

Этот узел отвечает на текстовые запросы без обращения к API.

  1. Нажмите на кнопку Добавить Image, размещенную у выхода «1» справа от узла Switch.
  2. В появившемся окне выберите Code. Чтобы быстро найти узел, воспользуйтесь поисковой строкой.
  3. Откроется форма настройки узла.

  4. Вставьте следующий код:

    const createResponse = () => ({
  responses: [
    {
      text: "Тестовое сообщение"
    }
  ]
});

// Формируем объект ответа
const item = {};
item.json = createResponse();

return item;

  5. Нажмите кнопку Back to canvas в верхнем левом углу.

В окне редактора отобразятся добавленные узлы.

Image

Шаг 5. Создание узла Webhook для отправки данных в WiseBot

  1. Нажмите на кнопку Добавить Image, размещенную справа от первого или второго узла Code.
  2. В появившемся окне выберите Respond to Webhook. Чтобы быстро найти узел, воспользуйтесь поисковой строкой.
  3. Откроется форма настройки узла.

  4. В поле Respond With выберите First Incoming Item.

    Image

  5. Нажмите кнопку Back to canvas в верхнем левом углу.

  6. Подключите узел Respond to Webhook к оставшемуся узлу Respond to Webhook.

    Image

  7. Сохраните проект по кнопке Save и включите переключатель активности.

    Image

Шаг 6. Настройка в Wisebot

  1. Создайте истории с action-скриптами.

    Image Image

    Для погоды необходима форма для получения названия города. Слот city_weather должен иметь тип text.

    Image

  2. Убедитесь, что названия action-скриптов action_weather, action_message и слот city_weather добавлены в Домен по умолчанию.

    Image

  3. В разделе Конечные точки поменяйте адрес у action_endpoint на адрес Production URL, скопированный на первом шаге. Нажмите Сохранить и подтвердите перезапуск инстанса для выбранного окружения.

Протестируйте работу action-скриптов в виджете бота.

Скрипт action_weather:

Image

Скрипт action_message:

Image

Теперь рабочий процесс получает запросы, обрабатывает их и отправляет ответы обратно в чат-бот!