В этом посте мы узнаем, как добавлять чат-ботов в приложения Vue.js. Vue.js - это JavaScript-фреймворк с открытым исходным кодом для создания пользовательских интерфейсов и одностраничных приложений.
Предварительные условия
Для начала вам понадобится чат-бот Dialogflow или рабочие знания Dialogflow и Vue JS. Для интеграции чат-ботов с Vue.js вам понадобится учетная запись Kommunicate. Все вышеупомянутые инструменты можно попробовать бесплатно.
Если у вас нет чат-бота Dialogflow, мы поможем вам. Скачайте бесплатный образец здесь.
Шаги по добавлению чат-бота Dialogflow в приложения Vue.Js
Здесь приведены инструкции, объясняющие, как Dialogflow и Vue js интегрируются с помощью Kommunicate.
Примечание. Для простоты и ясности в этом руководстве объясняется, как разрабатывать действительно простой и простой код. Этот проект также доступен на моем Github. Чтобы получить подробное руководство о том, как интегрировать бота на веб-сайт, вы можете проверить здесь.
1.Создайте своего чат-бота Dialogflow
Вы можете легко создать чат-бота в Dialogflow или отредактировать один из их образцов шаблонов чат-ботов или загрузить наш образец бота. Чтобы пойти дальше, вы можете создать свои собственные намерения и сущности.
Если вы хотите узнать больше о разработке чат-бота Dialogflow, см. Руководство по Dialogflow для начинающих здесь.
2.Интегрируйте чат-бота Dialogflow с Kommunicate
Войдите в личный кабинет Коммуниката и откройте раздел Бот. Если у вас нет учетной записи, вы можете создать ее здесь. Найдите раздел Dialogflow и нажмите Настройки.
3. Интегрируйте чат-бота - добавьте чат-бота в приложения vue.js
Теперь перейдите в консоль Dialogflow и загрузите файл ключа учетной записи службы. Вы можете найти шаги по загрузке файла служебного ключа на изображении / модальном изображении выше.
Задайте имя и изображение профиля своего бота и выберите, разрешить ли передачу бота человеку. Нажмите Завершить настройку интеграции бота, чтобы завершить интеграцию. Ваш бот теперь интегрирован.
Вы можете создать новую рабочую область и инициализировать проект приложения Vue.js или напрямую запустить существующий проект, запустив сервер с помощью команды CLI:
npm run serve
Установка чат-бота в компонент vue.js
Чтобы установить виджет чата в компоненте Vue.js, вы можете либо создать новый файл компонента, либо добавить установочный код Kommunicate в существующий файл компонента. Простой и эффективный способ решить эту проблему - добавить внешний скрипт в раздел Vue connected () вашего компонента.
Запустите любой редактор кода и откройте папку рабочей области, чтобы перейти к файлу компонента.
Примечание. Компоненты Vue - одна из важных функций Vue.js, которые создают настраиваемые элементы, которые можно повторно использовать в HTML.
Чтобы установить чат-бота, откройте Kommunicate и перейдите в Личный кабинет → Настройки. Нажмите Установить в разделе Конфигурация. Скопируйте код и добавьте его на свой сайт или в приложение.
Вставьте код javascript в файл компонента внутри тега ‹script›. Код компонента должен выглядеть так:
<script> export default { methods: { }, mounted (){ (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 || {}); }, data: function(){ } } </script>
Примечание. Убедитесь, что вы заменили YOUR_APP_ID на свой идентификатор приложения, указанный в разделе установки.
Команда npm run serve запускает сервер, отслеживает ваши файлы и перестраивает приложение, когда вы вносите в эти файлы изменения. И приложение размещается на вашем локальном хосте.
Если вы запустите браузер, вы должны увидеть всплывающий экран виджета чата, и это означает, что ваш чат-бот готов. Вот как вы добавляете чат-бота в приложения Vue.js.
Спасибо за чтение!
Первоначально опубликовано на https://www.kommunicate.io/blog/add-chatbot-vue-js-apps/ 17 марта 2020 г.