Создание чат-бота Facebook с помощью ASP.NET CORE 2.0 и Api.ai

Кенан БегичЗаблокированоUnblockFollowFollowing

19 марта

В этом руководстве объясняется, как использовать ASP.NET Core 2.0 с пониманием естественного языка, например API.AI, и его использование для создания Facebook. Чат-бот. Также это руководство может быть выполнено с использованием других технологий, таких как Node.js (замена ASP.NET Core 2.0) или использование Microsoft Luis API (замена Api.ai), но цель здесь — объяснить, как подключить все эти службы для создания нашего чата. бот. Кроме того, это может быть только верхушка айсберга возможностей, доступных при сочетании этих технологий. Мы также могли бы интегрировать нашу базу данных с бизнес-логикой и данными, чтобы представлять результаты нашим клиентам, такие как цены на товары в нашем магазине ПК или ежедневное меню в нашем ресторане.

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

1. Создание стартового проекта ASP.NET Core 2.0

Прежде всего, мы собираемся настроить базовый проект ASP.NET Core 2.0 с шаблоном MVC. Итак, давайте приступим к созданию базового приложения. Во-первых, вам понадобится Visual Studio 2017. Запустите его и перейдите к Файл -> Новый проект.

4 лучших учебника по ботам:

1. Создайте простой чат-бот на Python с помощью RASA — часть 1

2. Создайте простой чат-бот на Python с помощью RASA — часть 2

3. Как я разработал собственного «обучающегося» чат-бота на Python

4. Конференция чат-ботов 2019 в Нью-Йорке

После этого выберите Visual C# ASP.NET Core Web Application и назовите свой проект по своему усмотрению.

Следующим шагом является выбор нашего фреймворка и шаблона проекта. В качестве фреймворка выберите ASP.NET Core 2.0, а в качестве шаблона выберите веб-приложение (модель-представление-контроллер), и мы готовы к работе.

Этот базовый проект состоит из одного контроллера (Home) и нескольких действий, таких как Index, About, Contact и Error. Все эти действия являются действиями GET, которые возвращают соответствующие представления.

2. Установка АпиАиСДК

Наш проект предназначен для использования API Api.ai с поддержкой C#. Мы можем добавить эту библиотеку в наш веб-проект, щелкнув правой кнопкой мыши наше решение и добавив его через диспетчер пакетов NuGet.

И на вкладке «Обзор» найдите apiai. После появления результатов выберите АпиАиСКД и устанавливаем его в наш веб-проект.

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

Установить-Пакет ApiAiSDK-Версия 1.6.5

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

3. Создание действия GET и POST веб-перехватчика в домашнем контроллере

На этом шаге мы создадим наши действия GET и POST веб-перехватчика. Действие GET будет использоваться для проверки нашего приложения веб-сервера с помощью веб-хука Facebook, а действие POST будет использоваться для получения пользовательских сообщений и ответа на них из приложения веб-сервера. Давайте создадим наш метод GET. Это будет выглядеть так.

[HttpGet]public string Webhook([FromQuery(Name = "hub.mode")] string mode, [FromQuery(Name = "hub.challenge")] string challenge, [FromQuery(Name = "hub.verify_token")] string verify_token){ if (verify_token.Equals("my_token_is_great")) { return challenge; } else { return ""; }}

Если мы посмотрим на наше действие, оно состоит из 3 входных строк, которые передаются из приложения Facebook в наш метод контроллера. Эти строки: режим, вызов, verify_token. Самая важная входная строка — verify_token.

verify_token представляет собой строку, которая отправляется с Facebook на веб-хук нашего веб-сервера (в нашем случае это действие контроллера), и если она верна, мы возвращаем строку вызова в качестве ответа на этот запрос. Чтобы уточнить значения, которые передаются нашему методу, взгляните на следующую точку останова:

Json, который мы получаем, состоит из упомянутых трех полей. Затем мы сравниваем verify_tokenvalue на наш токен проверки, а затем верните значение запроса в качестве ответа на наш метод GET Webhook. Затем это значение принимается приложением Facebook и проверяется. Следующее, что мы сделаем, это создадим наш метод POST Webhook, который будет получать наши пользовательские сообщения. Наш метод POST выглядит так:

[HttpPost]
public void Webhook() {
 var json = (dynamic) null;
 try {
   using(StreamReader sr = new StreamReader(this.Request.Body)) {
   json = sr.ReadToEnd();
 }

dynamic data = JsonConvert.DeserializeObject(json);

postToFB((string) data.entry[0].messaging[0].sender.id, (string) data.entry[0].messaging[0].message.text);
 } catch (Exception ex) {
  return;
 }
}

Этот метод создает динамический объект с именем json и считывает Request.Body из нашего запроса, который мы получаем от мессенджера Facebook после того, как пользователь отправляет нам сообщение. Получив это сообщение, мы читаем входной поток и десериализуем данные в динамический объект. Для десериализации мы использовали пакет Newtonsoft.Json, который устанавливается вместе с пакетом Api.ai SDK. После этого используем метод postToFB который отправит сообщение с ответом пользователю после того, как мы получим сообщение с вопросом от пользователя в мессенджере.

Json, полученный в качестве тела запроса от приложения Facebook Messenger, выглядит следующим образом:

{  
   {  
      "object":"page",
      "entry":[  
         {  
            "id":"xxxxxxxxxxxxxxx",
            "time":xxxxxxxxxxxxxxxxxx,
            "messaging":[  
               {  
                  "sender":{  
                     "id":" xxxxxxxxxxxxxxxxxx "
                  },
                  "recipient":{  
                     "id":" xxxxxxxxxxxxxxxxxx "
                  },
                  "timestamp":xxxxxxxxxxxxxxxxxx,
                  "message":{  
                     "mid":" xxxxxxxxxxxxxxxxxx ",
                     "seq":6148,
                     "text":"Hi!"
                  }
               }
            ]
         }
      ]
   }
}

Значение, которое мы отправим обратно, — это sender.id вместе с нашим ответом от Api.ai. Вот как postToFB метод выглядит так.

public void postToFB(string recipientId, string messageText) {
 //Post to ApiAi
 string messageTextAnswer = postApiAi(messageText);
 string postParameters = string.Format("access_token={0}&recipient={1}&message={2}", fbToken, "{ id:" + recipientId + "}", "{ text:\"" + messageTextAnswer + "\"}");

//Response from ApiAI or answer to FB question from user post it to FB back.
var client = new HttpClient();
client.PostAsync(postUrl, new StringContent(postParameters, Encoding.UTF8, "application/json"));
}

В postToFB Метод мы создаем наш ответ из ApiAi и форматируем наши параметры, которые будут отправлены обратно в наше приложение для обмена сообщениями Facebook через GraphApi. Для этого мы используем HttpClient и отправляем ответ нашему пользователю. Для авторизации GraphApi мы используем токены и для этого имеем следующие переменные:

private string fbToken = "xxxxxxxxxxxxxxxxxx";
private string postUrl = "[

Во-первых, это наш токен facebook, который будет использоваться для аутентификации в графическом API и отправки ответного сообщения нашему пользователю. Второй postUrl — это URL API графа facebook.

Третья строка — это наш токен ApiAi, который будет использоваться для аутентификации нас для передачи пользовательского сообщения из мессенджера facebook и получения нашего ответа от ApiAi и передачи этого сообщения пользователю. Нет, давайте углубимся в метод postApiAI.

private string apiAiToken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";

public String postApiAi(string messageText){ var config = new AIConfiguration(apiAiToken, SupportedLanguage.English); apiAi = new ApiAi(config); var response = apiAi.TextRequest(messageText); return response.Result.Fulfillment.Speech;}

postApiAi метод используется для ответа на вопрос, который пользователь отправляет из мессенджера Facebook на наш веб-сервер. Допустим, пользователь отправляет нам «Привет» в наше приложение для обмена сообщениями в Facebook. Это сообщение передается нашему веб-перехватчику и десериализуется из Request.Body. После десериализации сообщения мы отправляем это сообщение в ApiAi и ищем ответ у нашего интеллектуального агента на ApiAi. Наш агент отвечает на сообщение, и этот ответ отправляется нашему пользователю с помощью HttpClient.PostAsync.

Здесь мы почти закончили наше руководство, но нам нужно добавить еще несколько шагов, и следующим шагом будет использование ngrok для защиты нашего подключения к Facebook. Это необходимо, потому что Facebook нужен HTTPS для подключения к нашему вебхуку.

4. Использование NGROK для защиты и туннелирования нашего локального хоста

Скачать ngrok с После завершения загрузки откройте ZIP-архив и разархивируйте его на рабочий стол. После того, как вы разархивируете его, ЗАпустите приложение Visual Studio и проверьте, какой порт используется для доступа к нашему приложению localhost. Затем откройте ngrok.exe который вы извлекли, и введите следующее:

ngrok http -host-header = «локальный: 54799» 54799

54799 есть порт через наше приложение. После того, как вы нажмете Enter, вы получите следующий ответ от ngrok:

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

5. Создание приложения Facebook

Наш первый шаг состоит в создании приложения Facebook, которое является основой для всего. Это может быть не только фейсбук, но и вайбер, скайп, телеграм и другие общедоступные аккаунты, которые позволяют нам взаимодействовать с нашим пользователем через чат-бот заявление. Пока мы будем придерживаться только Facebook. Если вы еще не создали учетную запись разработчика Facebook, вы можете выполнить следующие действия, чтобы создать ее:

После создания учетной записи разработчика перейдите по этому URL-адресу для создания нового приложения:

Нажмите кнопку «Добавить новое приложение» и заполните следующий экран:

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

6. Создание страницы в фейсбуке

Перейдите в «Настройки» -> «Дополнительно» и на странице приложения нажмите кнопку «Создать новую страницу», или вы можете перейти по этому URL-адресу, чтобы создать страницу:

Если у вас уже есть страница, вы можете пропустить этот шаг и перейти к шагу 7.

7. Добавьте платформу Messenger в свое приложение

После того, как вы успешно создали свою страницу, пришло время добавить платформу Messenger в ваше приложение. Перейдите в настройки приложения и в разделе «Настройки продукта» добавьте продукт. Выберите «Мессенджер».

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

Вставьте сгенерированный токен в нашу визуальную студию fbToken переменная.

После того, как вы добавили Messenger в свое приложение facebook, теперь вы можете добавить веб-хук, который представляет собой URL-адрес вашего веб-сервера, который будет обрабатывать входящие сообщения пользователей. Эти сообщения могут быть чем угодно: от текста до речи и изображений до местоположения или видео.

8. Настройка вебхука Facebook

Перейдите к своему продукту Messenger и прокрутите до раздела Webhooks.

Затем нажмите «Настроить веб-хуки», и появится следующий экран:

Этот экран имеет 3 поля. Первое поле — это URL-адрес обратного вызова, который в нашем случае представляет действие контроллера GET для проверки нашего веб-перехватчика и действие POST, которое будет вызываться всякий раз, когда мы получаем сообщение от нашего пользователя. Итак, здесь мы просто поместим URL-адрес HTTPS, который мы создали с помощью нашего инструмента NGROK на шаге 4, и он будет таким:

Второе поле — это токен проверки, который используется для проверки метода GET веб-перехватчика нашего контроллера. Этот токен мы указали в шаге 3 метода Webhook GET, и это my_token_is_great.

if (verify_token.Equals("my_token_is_great")){ return challenge;}

Третье поле — флажок сообщений полей подписки. После этого просто нажмите кнопку «Проверить и сохранить». В случае успеха диалоговое окно закроется, поскольку наша проверка будет завершена, и приложение Facebook messenger сможет получить доступ к нашим методам веб-перехватчика GET и POST. Чтобы отредактировать наш вебхук, просто нажмите в левом меню Вебхуки и Редактировать подписку.

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

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

9. Создание нашего агента Api.ai

Этот шаг объясняет, как создать наш агент в службе ApiAi. Зарегистрируйтесь бесплатно и создайте свою учетную запись. Затем перейдите на api.ai и войдите в консоль.

После этого создайте своего агента.

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

Сохраните свое намерение и перейдите к созданному вами агенту и проверьте свой токен доступа разработчика.

Скопируйте этот токен доступа разработчика и вставьте его в наше решение Visual Studio в переменную apiAiToken.

private string apiAiToken = " xxxxxxxxxxxxxxxxxx";

10. Тестирование нашего агента

Наш агент должен быть обучен отвечать на приветственные сообщения от нашего пользователя. Когда пользователь говорит «Привет», наш агент отвечает сообщениями, которые мы предоставили в приветственном намерении.

11. Отправка сообщений из мессенджера Facebook и ответы обученным агентом api.ai

Теперь, когда все будет готово, давайте попробуем поговорить с нашим агентом. Запустите приложение Visual stuio и сгенерируйте URL-адрес HTTPS ngrok, если вы еще этого не сделали. Это объясняется в шаге 4. Отредактируйте URL-адрес веб-перехватчика Facebook, чтобы отправлять сообщения на новый созданный URL-адрес HTTPS из ngrok. Это объясняется в шаге 8. Откройте приложение для Android/iOS/веб-мессенджера, найдите свою страницу в Facebook и введите