Русский
Русский
English
Статистика
Реклама

Dialogflow

Перевод Интеграция чат-бота Dialogflow с Angular-приложением

08.12.2020 20:18:28 | Автор: admin
Существует множество публикаций о разработке чат-ботов с использованием возможностей платформы Dialogflow. Но для выхода на решение, которое применимо на практике, просто создать бота недостаточно. Бота надо подключить к веб-интерфейсу. Это интересная и сложная задача. Чат-боты используются в различных веб-проектах, в том числе тех, которые созданы с использованием Angular популярного, постоянно развивающегося фреймворка для разработки веб-приложений. Сегодня мы поговорим о том, как интегрировать чат-бота Dialogflow с Angular-приложением.



Предварительные требования


Для того чтобы приступить к работе вам понадобится готовый чат-бот Dialogflow (или знания о том, как его создать) и Angular-приложение (ниже мы поговорим о создании такого приложения). Для того чтобы интегрировать бота в приложение вам будет нужна учётная запись на Kommunicate. Всё, что нам понадобится, можно, как минимум, бесплатно испытать.

Интеграция чат-бота с Angular-приложением


Сейчас я хочу рассказать о том, как подключить бота к Angular-приложению с помощью Kommunicate.

Обратите внимание на то, что для того чтобы не усложнять это учебное руководство, мы будем рассматривать очень простые примеры кода. Код проекта, которым мы будем тут заниматься, можно найти на GitHub. Здесь можно почитать хороший материал об интеграции ботов в веб-проекты, подготовленный компанией Kommunicate.

Шаг 1. Создание чат-бота Dialogflow


Для освоения этого руководства вам понадобится чат-бот Dialogflow либо готовый, либо, например, созданный на основе одного из предлагаемых платформой шаблонов. Имея бота, вы сможете создавать собственные намерения (Intents) и сущности (Entities).

Шаг 2. Интеграция чат-бота Dialogflow с Kommunicate


Войдите в вашу панель управления Kommunicate и перейдите в раздел Bot Integrations. Если у вас ещё нет учётной записи Kommunicate создать её можно здесь. Войдите в раздел Dialogflow и перейдите к настройкам интеграции бота.


Начало настройки интеграции бота и платформы Kommunicate

Теперь перейдите в консоль Dialogflow и загрузите файл с ключом сервисной учётной записи (service account key file). Для того чтобы найти этот файл выполните следующие действия:

  1. Откройте окно настроек агента Dialogflow (значок шестерёнки в левой панели).
  2. Щёлкните по ссылке на Google Cloud, которая имеется в панели проекта.
  3. В Google Cloud перейдите в раздел Credentials, щёлкнув по APIs & Services.
  4. В разделе Credentials найдите подходящую сервисную учётную запись (service account) и щёлкните по кнопке её редактирования.
  5. В нижней части страницы щёлкните по кнопке Add Key и создайте ключ, выбрав формат JSON. Файл с ключом будет загружен на ваш компьютер.

Для того чтобы интегрировать бота Dialogflow CX с Kommunicate выполните те же шаги для загрузки JSON-ключа и укажите в панели Kommunicate Agent ID. Для того чтобы узнать Agent ID, войдите в консоль Dialogflow CX, выберите проект, а в разделе, соответствующем вашему агенту, скопируйте в буфер обмена имя агента, выглядящее примерно так, как показано ниже.

projects/billing-d041f/locations/global/agents/54b0c663-2c01-4a09-a482-277ff39c0b05

То, что нам нужно, Agent ID, выглядит примерно так: 54b0c663-2c01-4a09-a482-277ff39c0b05.


Копирование Agent ID

Далее, продолжая настройку интеграции бота с Kommunicate, дайте боту имя и назначьте изображение для его профиля. На итоговом этапе настройке укажите, нужна ли боту возможность автоматического перевода диалога на оператора-человека в том случае, если он не смог распознать запрос пользователя (bot to human handoff). После этого нажмите на кнопку завершения интеграции.


Финальный этап настройки интеграции бота с Kommunicate

Для того чтобы увидеть список ботов, интегрированных с Kommunicate, перейдите в панели управления системы в раздел Bot Integration. Тут имеется список интегрированных ботов. В частности, в разделе Dialogflow можно будет увидеть зелёный значок, на котором указано количество интегрированных ботов.


Управление ботами, интегрированными в Kommunicate

Теперь мы готовы к тому, чтобы интегрировать чат-бота в Angular-приложение.

Шаг 3. Глобальная установка Angular CLI


Для того чтобы установить Angular CLI с помощью npm, нужно воспользоваться терминалом (командной строкой) и выполнить следующую команду:

npm install -g @angular/cli

Создадим новый проект Angular-приложения. Для этого используется команда ng new, которой передают имя приложения (my-app в нашем случае):

ng new my-app

Это простое приложение, которое, тем не менее, можно запустить и испытать. В Angular имеется локальный сервер, поэтому собирать и запускать приложение можно прямо на вашем компьютере.

Перейдём в папку приложения (my-app).

cd my-app

Запустим сервер, воспользовавшись командой ng-serve с опцией --open:

ng serve --open

Шаг 4. Оформление бота в виде Angular-компонента


Интегрируем бота с Angular-приложением, оформив соответствующий код в виде компонента. При создании нового Angular-проекта с помощью Angular CLI уже был создан первый компонент. Это корневой компонент с именем app-root.

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

Откроем файл компонента в каком-нибудь текстовом редакторе. Вот код компонента:

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {title = 'My First Angular App!';}

Для того чтобы встроить код чат-бота в компонент, перейдём в раздел Settings панели управления Kommunicate. Там, в разделе Configuration, нужно щёлкнуть по ссылке Install.


Поиск кода, используемого для встраивания бота в Angular-приложение

Здесь, в разделе Website, имеется JavaScript-код, который нужно скопировать и добавить в приложение. А именно, в нашем случае речь идёт о включении кода в состав файла app.component.ts. Готовый код должен выглядеть так, как показано ниже:

@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.scss']})export class AppComponent {title = 'my first app';ngOnInit() {(function(d, m){var kommunicateSettings = {"appId":"<YOUR_APP_ID>","popupWidget":true,"automaticChatOpenOnNavigation":true};var s = document.createElement("script"); s.type = "text/javascript"; s.async = true;s.src = "https://widget.kommunicate.io/v2/kommunicate.app";var h = document.getElementsByTagName("head")[0]; h.appendChild(s);window.kommunicate = m; m._globals = kommunicateSettings;})(document, window.kommunicate || {});}}

Сервер, используемый в Angular, наблюдает за состоянием файлов, пересобирая приложение в том случае, если файлы меняются. А благодаря использованию при запуске сервера опции --open (или просто -o) в браузере будет открыта ссылка http://localhost:4200/, ведущая к домашней странице Angular-проекта.


Окно чата в Angular-приложении

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

Итоги


Как видите, интегрировать чат-бота Dialogflow в Angular-приложение совсем несложно. Надеемся, вам пригодится то, о чём вы сегодня узнали.

P.S. Для хостинга проектов, подобных описанному в этом материале, можно использовать наши виртуальные серверы.

Пользуетесь ли вы чат-ботами в своих веб-проектах?



Подробнее..

Погода-бот DialogFlow OpenWeather Python

18.07.2020 00:05:02 | Автор: admin

Постановка задачи


Задача ставилась следующим образом: написать телеграм-бота, который распознавал бы вопросы о том, какая сегодня погода в том или ином городе и выдавал информацию о погоде.

DialogFlow


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

Переходим по ссылке https://dialogflow.cloud.google.com/, авторизуемся в своем аккаунте гугл и переходим на страницу создания бота. Нажимаем на Create new agent и вводим имя агенту: weather-bot. Выбираем дефолтный язык русский.

image

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

Итак, переходим во вкладку Intents. При создании бота автоматически создаются два интента: Default Fallback Intent и Default Welcome Intent. Welcome Intent вызывается тогда, когда происходит запуск бота либо вы пишете ему приветственное сообщение. Fallback вызывается во всех случаях, когда бот не понимает, что вы ему пишете, т.е. во всех случаях, когда ни один другой интент не срабатывает. Оставляем дефолтные интенты без изменений и жмем на Create intent, называя его get-weather. Именно с этим намерением мы и продолжим работать в данной статье.

image

Переходим в наш интент get-weather, затем во вкладку Training phrases и создаем несколько тренировочных фраз, например, таких:

image

Заметим, что DialogFlow автоматически определяет города как параметры location. Это очень удобно, поскольку мы будем передавать эти самые параметры в бэкенд нашего приложения.

В самом DialogFlow осталось сделать совсем немного разрешить ему вебхуки для взаимодействия с бэкендом нашего бота. Для этого листаем в самый низ, разворачиваем вкладку Fulfillment и ставим галочку на Enable webhook call for this intent.

Бэк


Приступим к написанию серверной части нашего бота. Писать будем на Python в связке с Flask. Для получения информации о погоде был выбран OpenWeather API. Зарегистрируйтесь на этом сайте, затем вам на почту придет API KEY он и понадобится в нашем приложении. Кроме того, поскольку информация о погоде в этом API выдается по параметрам latitude и longitude ширина и долгота нам необходимо как-то преобразовывать город в его ширину и долготу. В этом нам поможет Python-библиотека geopy.

Импортируем все необходимое:

from flask import Flask, request, make_response, jsonifyimport requestsimport jsonfrom geopy.geocoders import Nominatim

Создаем Flask application:

app = Flask(__name__)

и вставляем в переменную API_KEY свой API KEY:

API_KEY = '<your_API_KEY_here>'

Пишем роут для пути "/":

@app.route('/')def index():    return 'Hello World!'

и далее функцию results(), в которой и будет осуществлена вся логика программы:

def results():    req = request.get_json(force=True)    action = req.get('queryResult').get('action')    result = req.get("queryResult")    parameters = result.get("parameters")    if parameters.get('location').get('city'):        geolocator = Nominatim(user_agent='weather-bot')        location = geolocator.geocode(parameters.get('location').get('city'))        lat = location.latitude        long = location.longitude        weather_req = requests.get('https://api.openweathermap.org/data/2.5/onecall?lat={}&lon={}&appid={}'.format(lat, long, API_KEY))        current_weather = json.loads(weather_req.text)['current']        temp = round(current_weather['temp'] - 273.15)        feels_like = round(current_weather['feels_like'] - 273.15)        clouds = current_weather['clouds']        wind_speed = current_weather['wind_speed']    return {'fulfillmentText': 'Сейчас температура воздуха - {} градусов, ощущается как {} градусов, облачность - {}%, скорость ветра - {}м/с'.format(str(temp), str(feels_like), str(clouds), str(wind_speed))}

Осталось дописать роут, по которому будет переход в наше приложение, назовем его webhook:

@app.route('/webhook', methods=['GET', 'POST'])def webhook():    return make_response(jsonify(results()))

и запустить приложение:

if __name__ == '__main__':   app.run(debug=True)

Мы справились!

И это все?


Не совсем. Программа лежит на нашей локальной машине, но DialogFlow о ней ничего не знает. Чтобы превратить нашу машину в сервер, который станет доступен в интернете, нужна особая утилита. Этим требованиям соответствует ngrok. Скачиваем ее, запускаем и вводим в консоли следующее: ngrok http 5000. Появится https-ссылка, которую необходимо скопировать и поместить в DialogFlow. Копируем, переходим в Fulfillment в DialogFlow, ставим Webhook в состояние enabled и вставляем в получившееся поле ссылку. Дописываем роут, т.е. "/webhook". Должно получиться что-то похожее на следующее:

image

Теперь запускаем наше Python-приложение. Осталось совсем немного подключить интеграцию с Telegram. Переходим на вкладку Integrations, выбираем телеграм, далее следуем инструкции по получению токена, вставляем токен, и вуаля приложение готово! Остается его протестировать:

image

Надеюсь, данная статья была вам полезна и сподвигнет на собственные эксперименты в этой области. Код проекта доступен по ссылке.
Подробнее..
Категории: Python , Dialogflow , Weather api , Flask

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru