개발에 대한 많은 게시물이 있습니다. 채팅 봇 Dialogflow를 사용하여. 하지만 챗봇을 만드는 것만으로는 충분하지 않습니다. Dialogflow를 웹 인터페이스에 연결하는 것은 훨씬 더 흥미롭고 어렵습니다. Angular가 인기 있고 떠오르는 플랫폼인 만큼 Angular JS와 Dialogflow 챗봇을 통합하기 위한 가이드가 있습니다.
다양한 플랫폼과의 챗봇 통합을 단순화하기 위해 이전에 통합 가이드를 작성했습니다. 잡담 웹사이트와 앱으로.
사전 요구 사항
시작하려면 대화 흐름 챗봇 또는 Dialogflow 및 Angular JS에 대한 실무 지식. 통합하려면 잡담 Angular를 사용하려면 의사소통 계정. 앞서 언급한 모든 도구는 무료로 사용해 볼 수 있습니다.
이 튜토리얼에서는 Kommunicate의 도움으로 Dialogflow 챗봇과 Angular JS를 연결하는 방법을 살펴보겠습니다.
참고: 매우 간단하고 직관적으로 유지하기 위해 이 튜토리얼에서는 정말 기본적이고 평범한 코드 개발에 대해 설명합니다. 또한 언급할 이 프로젝트는 다음에서 찾을 수 있습니다. 여기에 GitHub 저장소. 봇을 웹 사이트에 통합하는 방법에 대한 자세한 자습서를 보려면 확인할 수 있습니다. 여기에서 지금 확인해 보세요..
시작하려면 Dialogflow에서 챗봇을 쉽게 생성하거나 제공된 샘플 챗봇 템플릿 중 하나를 편집할 수 있습니다. 더 나아가기 위해 고유한 의도 및 엔터티를 만들 수 있습니다.
Kommunicate 대시보드에 로그인하고 봇 섹션. 계정이없는 경우 만들 수 있습니다. 여기에서 지금 확인해 보세요.. Dialogflow 섹션을 찾아 설정을 클릭합니다.
이제 Dialogflow 콘솔로 이동하여 서비스 계정 키 파일을 다운로드합니다. 파일을 찾는 단계는 다음과 같습니다.
- 왼쪽 패널의 드롭 다운에서 에이전트를 선택합니다.
- 설정 버튼을 클릭합니다. 에이전트에 대한 설정 페이지가 열립니다.
- 일반 탭 검색 내에서 Google 프로젝트 서비스 계정을 클릭하십시오.
- 리디렉션 된 후 서비스 계정에서 프로젝트에 대한 JSON 형식의 키를 만듭니다. 행위 섹션이 자동으로 다운로드됩니다.
- 이제 업로드 키 파일.
V1 API를 사용하는 경우 Dialogflow 콘솔에서 클라이언트 및 개발자 토큰을 복사하고 제공된 필드에 붙여넣기만 하면 됩니다. 저장 및 진행을 클릭합니다.
봇의 이름과 프로필 사진을 설정하고 허용 여부를 선택합니다. 봇에서 인간으로의 핸드 오프 새로 생성 된 봇을 위해. 딸깍 하는 소리 봇 통합 설정 완료 이제 봇이 통합되었습니다.
아래 경로를 사용하여 통합 봇을 확인/편집할 수 있습니다.
대시보드 →봇 통합 → 봇 관리: 여기에서 통합된 모든 봇을 확인할 수 있습니다.
대시보드 → 봇 통합. 완료되면 성공적으로 통합된 봇의 수와 함께 Dialogflow 섹션에 녹색 아이콘이 표시됩니다.
npm을 사용하여 CLI를 설치하려면 터미널/명령 프롬프트를 열고 다음 명령을 입력하십시오.
npm 설치 -g @angular/cli
이제 새 작업 공간과 초기 앱 프로젝트를 만듭니다. 다음과 같이 CLI 명령 ng new를 실행하고 이름 my-app을 제공합니다.
ng 새 내 앱
초기 앱 프로젝트에는 실행할 준비가 된 간단한 시작 앱이 포함되어 있습니다. Angular에는 서버가 포함되어 있어 앱을 로컬에서 쉽게 빌드하고 제공할 수 있습니다.
이제 작업 공간 폴더(my-app)로 이동합니다.
-open 옵션과 함께 CLI 명령 ng serve를 사용하여 서버를 시작합니다.
Angular 컴포넌트에 챗봇을 설치합니다. CLI는 첫 번째 Angular 구성 요소를 생성합니다. 루트 구성 요소이며 이름은 app-root입니다.
코드 편집기를 실행하고 작업 공간 폴더(my-app)를 엽니다.
참고: 구성 요소는 Angular 애플리케이션의 기본 빌딩 블록입니다. 그들은 화면에 데이터를 표시하고, 사용자 입력을 듣고, 해당 입력에 따라 조치를 취합니다.
@요소({
선택기: '앱 루트',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
내보내기 클래스 AppComponent {
title = '나의 첫 Angular 앱!';
}
챗봇을 설치하려면 Kommunicate를 열고 대시보드 → 설정으로 이동합니다. 클릭 설치 구성 섹션에서. 웹 사이트 또는 애플리케이션에 추가할 JavaScript 코드를 복사합니다.
javascript 코드를 app.component.ts 파일에 붙여넣습니다. 구성 요소의 코드는 다음과 같아야 합니다.
@요소({
선택기: '앱 루트',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
내보내기 클래스 AppComponent {
제목 = '내 첫 번째 앱';
ngOnInit() {
(함수 (d, m) {
var kommunicateSettings = {"앱 ID": ,"대화 제목": };
var s = document.createElement ( "script"); s.type = "텍스트 / javascript"; s.async = true;
s.src = "https://api.kommunicate.io/v2/kommunicate.app";
var h = document.getElementsByTagName ( "head") [0]; h.appendChild (s);
(어떤 창이든).communicate = m; m._globals = 통신 설정;
})(문서, (창).kommunicate || {});
}
}
ng serve 명령은 서버를 시작하고 파일을 감시하며 해당 파일을 변경할 때 앱을 다시 빌드합니다.
-open(또는 그냥 -o) 옵션은 자동으로 브라우저를 열어 http://localhost:4200/.
브라우저를 실행하면 채팅 위젯 화면이 팝업되어 챗봇이 준비되었음을 의미합니다. Kommunicate를 사용하여 몇 가지 간단한 단계로 Dialogflow 챗봇을 Angular와 통합하는 방법입니다.
다음은 플랫폼에서 챗봇을 만들고 통합하기 위한 추가 가이드입니다.
