Существует множество публикаций о разработке чат-ботов с использованием возможностей платформы Dialogflow. Но для выхода на решение, которое применимо на практике, просто создать бота недостаточно. Бота надо подключить к веб-интерфейсу. Это — интересная и сложная задача. Чат-боты используются в различных веб-проектах, в том числе тех, которые созданы с использованием Angular — популярного, постоянно развивающегося фреймворка для разработки веб-приложений. Сегодня мы поговорим о том, как интегрировать чат-бота Dialogflow с Angular-приложением.
![](https://habrastorage.org/r/w780q1/webt/-6/uq/h3/-6uqh3ggbocmp3mri6nk__1b7ru.jpeg)
Для того чтобы приступить к работе вам понадобится готовый чат-бот Dialogflow (или знания о том, как его создать) и Angular-приложение (ниже мы поговорим о создании такого приложения). Для того чтобы интегрировать бота в приложение вам будет нужна учётная запись на Kommunicate. Всё, что нам понадобится, можно, как минимум, бесплатно испытать.
Сейчас я хочу рассказать о том, как подключить бота к Angular-приложению с помощью Kommunicate.
Обратите внимание на то, что для того чтобы не усложнять это учебное руководство, мы будем рассматривать очень простые примеры кода. Код проекта, которым мы будем тут заниматься, можно найти на GitHub. Здесь можно почитать хороший материал об интеграции ботов в веб-проекты, подготовленный компанией Kommunicate.
Для освоения этого руководства вам понадобится чат-бот Dialogflow — либо готовый, либо, например, созданный на основе одного из предлагаемых платформой шаблонов. Имея бота, вы сможете создавать собственные намерения (Intents) и сущности (Entities).
Войдите в вашу панель управления Kommunicate и перейдите в раздел Bot Integrations. Если у вас ещё нет учётной записи Kommunicate — создать её можно здесь. Войдите в раздел Dialogflow и перейдите к настройкам интеграции бота.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/877/78d/332/87778d332363219079dffb569f612f13.png)
Начало настройки интеграции бота и платформы Kommunicate
Теперь перейдите в консоль Dialogflow и загрузите файл с ключом сервисной учётной записи (service account key file). Для того чтобы найти этот файл — выполните следующие действия:
Для того чтобы интегрировать бота Dialogflow CX с Kommunicate — выполните те же шаги для загрузки JSON-ключа и укажите в панели Kommunicate
То, что нам нужно,
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/0b3/dd8/4b5/0b3dd84b5cd07bb1d48f833780e0a52d.png)
Копирование Agent ID
Далее, продолжая настройку интеграции бота с Kommunicate, дайте боту имя и назначьте изображение для его профиля. На итоговом этапе настройке укажите, нужна ли боту возможность автоматического перевода диалога на оператора-человека в том случае, если он не смог распознать запрос пользователя (bot to human handoff). После этого нажмите на кнопку завершения интеграции.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/a28/710/798/a287107982b46e758a4e0e243effa816.png)
Финальный этап настройки интеграции бота с Kommunicate
Для того чтобы увидеть список ботов, интегрированных с Kommunicate, перейдите в панели управления системы в раздел
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/6e4/a95/217/6e4a952173ad44d7103accb209872e9a.png)
Управление ботами, интегрированными в Kommunicate
Теперь мы готовы к тому, чтобы интегрировать чат-бота в Angular-приложение.
Для того чтобы установить Angular CLI с помощью npm, нужно воспользоваться терминалом (командной строкой) и выполнить следующую команду:
Создадим новый проект Angular-приложения. Для этого используется команда
Это простое приложение, которое, тем не менее, можно запустить и испытать. В Angular имеется локальный сервер, поэтому собирать и запускать приложение можно прямо на вашем компьютере.
Перейдём в папку приложения (
Запустим сервер, воспользовавшись командой
Интегрируем бота с Angular-приложением, оформив соответствующий код в виде компонента. При создании нового Angular-проекта с помощью Angular CLI уже был создан первый компонент. Это — корневой компонент с именем
Компоненты — это фундаментальные строительные блоки Angular-приложений. Они отвечают за вывод данных на экран, за обработку пользовательского ввода и за выполнение неких операций в ответ на воздействия пользователя.
Откроем файл компонента в каком-нибудь текстовом редакторе. Вот код компонента:
Для того чтобы встроить код чат-бота в компонент, перейдём в раздел
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/81a/d08/969/81ad08969b60dea85e9e466fa5609aa7.png)
Поиск кода, используемого для встраивания бота в Angular-приложение
Здесь, в разделе
Сервер, используемый в Angular, наблюдает за состоянием файлов, пересобирая приложение в том случае, если файлы меняются. А благодаря использованию при запуске сервера опции
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/8f6/eea/338/8f6eea338aa986d06b281b25e350ef56.png)
Окно чата в Angular-приложении
Если вы увидели окно чата на странице приложения — это значит, что теперь вы можете пообщаться с ботом.
Как видите, интегрировать чат-бота Dialogflow в Angular-приложение совсем несложно. Надеемся, вам пригодится то, о чём вы сегодня узнали.
P.S. Для хостинга проектов, подобных описанному в этом материале, можно использовать наши виртуальные серверы.
Пользуетесь ли вы чат-ботами в своих веб-проектах?
![](https://habrastorage.org/r/w1560/webt/8x/zq/bh/8xzqbhb0at3_pjylb5c4366w_t8.png)
![](https://habrastorage.org/r/w1560/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)
![](https://habrastorage.org/webt/-6/uq/h3/-6uqh3ggbocmp3mri6nk__1b7ru.jpeg)
Предварительные требования
Для того чтобы приступить к работе вам понадобится готовый чат-бот Dialogflow (или знания о том, как его создать) и Angular-приложение (ниже мы поговорим о создании такого приложения). Для того чтобы интегрировать бота в приложение вам будет нужна учётная запись на Kommunicate. Всё, что нам понадобится, можно, как минимум, бесплатно испытать.
Интеграция чат-бота с Angular-приложением
Сейчас я хочу рассказать о том, как подключить бота к Angular-приложению с помощью Kommunicate.
Обратите внимание на то, что для того чтобы не усложнять это учебное руководство, мы будем рассматривать очень простые примеры кода. Код проекта, которым мы будем тут заниматься, можно найти на GitHub. Здесь можно почитать хороший материал об интеграции ботов в веб-проекты, подготовленный компанией Kommunicate.
▍Шаг 1. Создание чат-бота Dialogflow
Для освоения этого руководства вам понадобится чат-бот Dialogflow — либо готовый, либо, например, созданный на основе одного из предлагаемых платформой шаблонов. Имея бота, вы сможете создавать собственные намерения (Intents) и сущности (Entities).
▍Шаг 2. Интеграция чат-бота Dialogflow с Kommunicate
Войдите в вашу панель управления Kommunicate и перейдите в раздел Bot Integrations. Если у вас ещё нет учётной записи Kommunicate — создать её можно здесь. Войдите в раздел Dialogflow и перейдите к настройкам интеграции бота.
![](https://habrastorage.org/getpro/habr/post_images/877/78d/332/87778d332363219079dffb569f612f13.png)
Начало настройки интеграции бота и платформы Kommunicate
Теперь перейдите в консоль Dialogflow и загрузите файл с ключом сервисной учётной записи (service account key file). Для того чтобы найти этот файл — выполните следующие действия:
- Откройте окно настроек агента Dialogflow (значок шестерёнки в левой панели).
- Щёлкните по ссылке на Google Cloud, которая имеется в панели проекта.
- В Google Cloud перейдите в раздел
Credentials
, щёлкнув поAPIs & Services
. - В разделе
Credentials
найдите подходящую сервисную учётную запись (service account) и щёлкните по кнопке её редактирования. - В нижней части страницы щёлкните по кнопке
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
.![](https://habrastorage.org/getpro/habr/post_images/0b3/dd8/4b5/0b3dd84b5cd07bb1d48f833780e0a52d.png)
Копирование Agent ID
Далее, продолжая настройку интеграции бота с Kommunicate, дайте боту имя и назначьте изображение для его профиля. На итоговом этапе настройке укажите, нужна ли боту возможность автоматического перевода диалога на оператора-человека в том случае, если он не смог распознать запрос пользователя (bot to human handoff). После этого нажмите на кнопку завершения интеграции.
![](https://habrastorage.org/getpro/habr/post_images/a28/710/798/a287107982b46e758a4e0e243effa816.png)
Финальный этап настройки интеграции бота с Kommunicate
Для того чтобы увидеть список ботов, интегрированных с Kommunicate, перейдите в панели управления системы в раздел
Bot Integration
. Тут имеется список интегрированных ботов. В частности, в разделе Dialogflow
можно будет увидеть зелёный значок, на котором указано количество интегрированных ботов.![](https://habrastorage.org/getpro/habr/post_images/6e4/a95/217/6e4a952173ad44d7103accb209872e9a.png)
Управление ботами, интегрированными в 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.![](https://habrastorage.org/getpro/habr/post_images/81a/d08/969/81ad08969b60dea85e9e466fa5609aa7.png)
Поиск кода, используемого для встраивания бота в 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-проекта.![](https://habrastorage.org/getpro/habr/post_images/8f6/eea/338/8f6eea338aa986d06b281b25e350ef56.png)
Окно чата в Angular-приложении
Если вы увидели окно чата на странице приложения — это значит, что теперь вы можете пообщаться с ботом.
Итоги
Как видите, интегрировать чат-бота Dialogflow в Angular-приложение совсем несложно. Надеемся, вам пригодится то, о чём вы сегодня узнали.
P.S. Для хостинга проектов, подобных описанному в этом материале, можно использовать наши виртуальные серверы.
Пользуетесь ли вы чат-ботами в своих веб-проектах?
![](https://habrastorage.org/webt/8x/zq/bh/8xzqbhb0at3_pjylb5c4366w_t8.png)
![](https://habrastorage.org/webt/ou/g5/kh/oug5kh6sjydt9llengsiebnp40w.png)