React JS는 사용자 인터페이스를 만드는 데 사용되는 유행하는 웹 프레임워크입니다.페이스북이 가지고 있는 프레임워크가 개발자들 사이에서 유행하고 있다.이유는 - 우수한 문서, 개발자에 대한 친절, 그리고 대부분의 유사한 프레임워크 (예: Angular) 보다 빠르기 때문이다.
본고에서 우리는 React JS 사이트에서 Dialogflow 로봇을 통합하는 과정을 점차적으로 소개할 것이다.

선결 조건

우선 Dialogflow 로봇이나 Dialogflow와 React JS의 업무 지식이 필요합니다.채팅 로봇과 React JS를 통합하려면 Kommunicate 계정이 필요합니다.상술한 모든 공구는 무료로 시험적으로 사용할 수 있다.이 밖에 노드는 시스템에 설치해야 합니다.

React JS 웹 사이트에 Dialogflow 로봇을 추가하려면

Kommunicate의 도움으로 Dialogflow와 React JS를 연결하는 방법을 설명하겠습니다.

주의: 간단명료함을 유지하기 위해 본 강좌는 진정한 기본 코드와 일반 코드 개발을 소개했다.이 항목은 Github에서 찾을 수 있습니다.

1단계: Dialogflow 로봇 만들기

우선 Dialogflow에서 채팅 로봇을 쉽게 만들 수 있습니다.이것은 매우 직관적이지만 기능이 강한 채팅 로봇 구축 도구다.여기에는 Dialogflow 로봇을 사용하기 시작하는 데 도움을 줄 수 있는 예가 있습니다.더 나아가 자신의 의도와 실체를 만들 수 있습니다.

2단계: Dialogflow 채팅 로봇과 Kommunicate 통합

Kommunicate에 Dialogflow 로봇을 통합하려면 Kommunicate 계기판에 로그인하여 로봇 부분으로 내비게이션을 하세요.만약 당신이 계좌가 없다면, 당신은 여기에 하나를 만들 수 있습니다.Dialogflow 섹션을 찾아 Integrate Bot 을 클릭합니다.

이제 Dialogflow 콘솔로 이동하여 서비스 계정 키 파일을 다운로드합니다.파일을 찾으려면 다음과 같이 하십시오.

왼쪽 패널의 드롭다운 목록에서 프록시를 선택합니다.

설정 버튼을 클릭합니다.프록시 설정 페이지가 열립니다.

일반 탭에서 구글 프로젝트를 검색하고 서비스 계정을 누르십시오.

서비스 계정으로 방향을 바꾸면 Actions 부분에서 프로젝트에 JSON 형식의 키를 만듭니다. 자동으로 다운로드됩니다.

키 파일을 업로드합니다.

로봇 프로필 부분에서 로봇의 이름을 지정할 수 있습니다.사용자가 언제든bot와 상호작용을 할 때 이 이름을 볼 수 있습니다.상세한 정보를 한층 더 처리하고 기입하다.
마지막 단계에서 채팅 로봇을 인공으로 전환하거나 사용하지 않기를 요구할 것입니다.활성화되면 채팅 로봇이 질문에 대답할 수 없도록 대화가 한 사람에게 전달됩니다.
설치가 완료되면 두 곳에서 새로 만든 로봇을 검사하고 테스트할 수 있습니다.
계기판→Bot 통합→ 관리 로봇: 당신은 이곳에서 모든 집적 로봇을 검사할 수 있습니다
계기판→ 로봇 통합: 당신의 Dialogflow 아이콘은 녹색이어야 합니다. 당신이 성공적으로 통합한 로봇 수량을 표시합니다.새로 만든 로봇을 테스트할 수도 있습니다.(다음 그림 참조)

3단계: React 응용 프로그램 만들기

다음 명령을 사용하여 새 React 응용 프로그램을 만듭니다.
npxreact 응용 프로그램 만들기 내 응용 프로그램

4단계: 이제 내 응용 프로그램 폴더로 이동

cd my-app

5단계: 새로운 파일 채팅을 만듭니다.src 폴더 내 js

채팅을 만든 후.js, componentDidMount에 다음 코드를 추가합니다.다음 코드는 통합된 Dialogflow 로봇을 사용하여 웹 사이트에서 채팅 위젯을 시작합니다.Kommunicate 응용 프로그램 ID로 교체해야 합니다.
이 코드는 Kommunicate의 install section 에서도 사용할 수 있습니다.

(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 || {});

다음은 내 코드 편집기의 화면 캡처입니다.

6단계: 응용 프로그램에서 KommunicateChat 구성 요소를 가져옵니다.회사 명

응용 프로그램에서 KommunicateChat 구성 요소를 가져옵니다.js 파일.다음은 내 코드 편집기의 화면 캡처입니다.

7단계: 로컬에서 응용 프로그램 시작

다음 명령을 사용하여 설치된 Dialogflow bot을 사용하여 새로 만든 웹 사이트를 시작합니다.

npm start

봐라!이게 얼마나 쉬워요?이 몇 가지 간단한 절차에서 Dialogflow 로봇을 React JS 사이트에 통합할 수 있습니다.이것은 채팅 위젯이 사이트에 있는 외관입니다.

끝내다

당신의 React JS 사이트에 Dialogflow 로봇이 있는 풍부한 텍스트 채팅 위젯이 있는 것은 상당히 간단합니다.웹 사이트의 색과 주제에 맞게 채팅 위젯을 더 사용자 정의할 수 있습니다.
Kommunicate에서 우리는 고객 지원의 새로운 시대를 실현하기 위해 세계 일류의 고객 지원 솔루션을 구상하고 있습니다.우리는 당신이 배에서 직접 Kommunicate를 체험할 수 있기를 바랍니다.등록할 수 있습니다here. 즉시 고객을 기쁘게 합니다.
최초 출시 https://www.kommunicate.io/blog/integrate-dialogflow-bot-react-js/