Vue.js 앱에서 Dialogflow Chatbot을 추가하는 방법

3721 단어 vuechatbotdiscussdialogflow
이번 포스팅에서는 Vue.js 앱에 Dialogflow 챗봇을 추가하는 방법에 대해 알아보겠습니다. Vue.js는 사용자 인터페이스 및 단일 페이지 애플리케이션을 구축하기 위한 오픈 소스 JavaScript 프레임워크입니다.

전제 조건



시작하려면 Dialogflow 챗봇이나 Dialogflow 및 Vue JS에 대한 실무 지식이 필요합니다. 챗봇을 Vue.js와 통합하려면 Kommunicate 계정이 필요합니다. 앞서 언급한 모든 도구에는 사용해 볼 수 있는 무료 버전이 있습니다.

Dialogflow 챗봇이 없다면 저희가 도와드리겠습니다. here에서 무료 샘플을 다운로드하십시오.

Vue.Js Apps에 Dialogflow 챗봇을 추가하는 단계



여기에서는 Dialogflow와 Vue js가 Kommunicate의 도움으로 통합되는 방법을 설명하기 위한 지침이 제공됩니다. 다음은 Dialogflow 챗봇을 vue.js에 통합하는 3단계입니다.

참고: 매우 간단하고 직관적으로 유지하기 위해 이 튜토리얼에서는 정말 기본적이고 평범한 코드 개발에 대해 설명합니다. 이 프로젝트는 내 Github에서도 사용할 수 있습니다. 봇을 웹 사이트에 통합하는 방법에 대한 자세한 자습서를 보려면 여기에서 확인할 수 있습니다.

1. Dialogflow 챗봇 만들기



Dialogflow에서 챗봇을 쉽게 만들거나 샘플 챗봇 템플릿 중 하나를 편집하거나 샘플 봇을 다운로드할 수 있습니다. 더 나아가기 위해 고유한 의도 및 엔터티를 만들 수 있습니다.

Dialogflow 챗봇 개발에 대해 자세히 알아보려면 여기에서 Dialogflow 초보자 가이드를 참조하세요.

2. Kommunicate와 Dialogflow 챗봇 통합



Kommunicate 대시보드에 로그인하고 Bot section을 엽니다. 계정이 없는 경우 여기에서 만들 수 있습니다. Dialogflow 섹션을 찾아 설정을 클릭합니다.



3. 챗봇 통합 - vue.js 앱에 챗봇 추가



이제 Dialogflow 콘솔로 이동하여 서비스 계정 키 파일을 다운로드합니다. 위의 이미지/모달에서 서비스 키 파일을 다운로드하는 단계를 찾을 수 있습니다.

봇의 이름과 프로필 사진을 설정하고 봇이 사람에게 전달되도록 허용할지 여부를 선택합니다. 봇 통합 설정 완료를 클릭하여 통합을 완료합니다. 이제 봇이 통합되었습니다.

새 작업 공간을 만들고 Vue.js 앱 프로젝트를 초기화하거나 CLI 명령을 사용하여 서버를 시작하여 기존 프로젝트를 직접 실행할 수 있습니다.

npm run serve


vue.js 컴포넌트에 챗봇 설치하기



Vue.js 구성 요소에 채팅 위젯을 설치하려면 새 구성 요소 파일을 생성하거나 기존 구성 요소 파일에 Kommunicateinstall code를 추가할 수 있습니다. 이를 해결하는 간단하고 효과적인 방법은 구성 요소의 'Vue mounted()' 섹션에 외부 스크립트를 추가하는 것입니다.

코드 편집기를 실행하고 작업 공간 폴더를 열어 구성 요소 파일을 추가로 탐색합니다.

참고: Vue 구성 요소는 HTML에서 재사용할 수 있는 사용자 정의 요소를 생성하는 Vue.js의 중요한 기능 중 하나입니다.

챗봇을 설치하려면 Kommunicate를 열고 대시보드 → 설정으로 이동합니다. 구성 섹션에서 설치를 클릭합니다. 코드를 복사하여 웹 사이트 또는 애플리케이션에 추가하십시오.

자바스크립트 코드를 스크립트 태그 내부의 구성 요소 파일에 붙여넣습니다. 구성 요소의 코드는 다음과 같아야 합니다.

<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"를 설치 섹션에서 제공된 앱 ID로 바꾸십시오.

npm run serve 명령은 서버를 시작하고 파일을 감시하며 해당 파일을 변경할 때 앱을 다시 빌드합니다. 그리고 앱은 localhost에서 호스팅됩니다.

브라우저를 실행하면 채팅 위젯 화면이 팝업되어 챗봇이 준비되었음을 의미합니다. Vue.js 앱에 챗봇을 추가하는 방법입니다.

이 문서는 원래 Kommunicate Blog에 게시되었습니다.
Angular에서 Ace 편집기는 어떻게 설정합니까?
LeetCode 제목 - 체인 테이블 반전(python 구현)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage