Я видел много сообщений о том, как создать чат-бота для самых разных платформ для совместной работы, таких как Slack, Facebook Messenger, HipChat… решил создать чат-бота с нуля до рабочего, используя последнюю версию Angular v5.0.0, DialogFlow и AWS.
Вот как будет выглядеть наш чат-бот в конце поста:
Примечание: это проект с открытым исходным кодом, его можно найти на моем Github.
Для начала создайте новый проект Angular с помощью Angular CLI:
ng новый smartbot - style = scss
1 - Архитектура чат-бота
Мы разделим приложение чата на разные компоненты, и каждый компонент сможет общаться с другими с помощью директив атрибутов:
2 - Сущность сообщения
Создайте пустой класс, введя следующую команду:
ng генерировать модели классов / сообщение
Сущность сообщения имеет 3 поля:
3 - Компонент списка сообщений
Создайте новый компонент:
ng сгенерировать компоненты / список сообщений
Теперь мы можем отображать сообщения, перебирая их:
Код этого компонента должен выглядеть так:
Обратите внимание на использование @ app / models вместо относительного пути, называемого псевдонимом. Чтобы иметь возможность использовать псевдонимы, мы должны добавить свойства paths в наш файл tsconfig.json следующим образом:
Примечание. Я также добавил псевдоним @env, чтобы иметь возможность доступа к переменным среды из любого места в нашем приложении.
4 - Компонент элемента сообщения
Давайте создадим компонент, который будет просто отображать сообщение в нашем списке сообщений:
ng сгенерировать компонентные компоненты / сообщение-элемент
В message-item.component.html добавьте следующее содержимое:
Код компонента должен выглядеть так:
5 - Компонент формы сообщения
Создадим форму, которая будет отвечать за отправку сообщений:
ng сгенерировать компонентные компоненты / сообщение-элемент
В message-form.component.html добавьте следующее содержимое:
И это соответствующий машинописный код в message-form.component.ts:
Метод sendMessage () будет вызываться каждый раз, когда пользователь нажимает кнопку отправки.
Вот и все! Попробуйте сами, и вы убедитесь, что он работает.
нг подавать
В этот момент вы не получите никакого ответа, и здесь вам пригодится НЛП.
6 - Серверная часть НЛП
Я выбираю DialogFlow. Зарегистрируйтесь в DialogFlow и создайте нового агента:
Затем включите функцию Светский разговор, чтобы просто поболтать:
Примечание. Вы можете легко изменить ответы на вопросы, если они вам не нравятся. Чтобы пойти дальше, вы можете создать свои собственные Намерения и Сущности, как описано в моем предыдущем руководстве.
Скопируйте токен клиентского доступа DialogFlow. Он будет использоваться для запросов.
Вставьте токен в файл environment / environment.ts:
7 - Служба DialogFlow
Создайте службу DialogFlow, которая будет вызывать DialogFlow API для получения соответствующего ответа:
ng сгенерировать сервисные сервисы / диалог
Он использует DialogFlow API для обработки естественного языка в виде текста. Каждый запрос API включает поле Авторизация в заголовок HTTP.
Обновите метод sendMessage () в MessageFormComponent следующим образом:
Наконец, в app.component.html скопируйте и вставьте следующий код, чтобы включить директивы message-list и message-form:
8 - Развертывание в AWS
Создание артефактов промышленного уровня:
ng build - env = prod
Артефакты сборки будут храниться в каталоге dist /.
Затем создайте корзину S3 с помощью AWS CLI:
aws s3 mb s3: // smartbot-mlabouardy
Загрузите артефакты сборки в корзину:
aws s3 cp dist / s3: // smartbot-mlabouardy - рекурсивный - предоставляет read = uri = http: //acs.amazonaws.com/groups/global/AllUsers
Наконец, включает хостинг веб-сайтов для вашей корзины:
Веб-сайт aws s3 s3: // smartbot-mlabouardy - index-document index.html
Если вы укажете в браузере URL корзины S3, вы должны увидеть окно чата:
