[챗봇 with React] #1,2 개발 환경 설정

 

개발 환경

• 백엔드 : node.js, express.js의 프레임 워크 사용
• 프론트엔드 : react, (status : Redux)

 

 

 

github에서 소스코드 다운받기

• https://github.com/jaewonhimnae/chatbot-app

GitHub - jaewonhimnae/chatbot-app

$ git clone https://github.com/jaewonhimnae/chatbot-app.git

 

 

 

Dialogflow API 사용하기

 

💡 Dialogflow API를 사용하기 위해서는 Google developer website에서 먼저 작업을 해야한다.
- google project에서는 100개의 service Account를 만들 수 있다.
- service Account를 이용해서 dialogflow api를 포함한 구글에서 제공하는 여러 api를 사용할 수 있다.

 

 

1. google project와 service account를 생성한다.

2. 생성후 얻은 secret 값들을 앞서 git에서 다운받은 프로젝트에서 server/config/dev.js 파일을 생성하여 넣어준다.

 

 

 

google project 생성하기

https://developers.google.com/workspace/guides/create-project?hl=ko

Google Cloud 프로젝트 만들기  |  Google Workspace  |  Google for Developers

원하는 이름 설정 후 만들기 선택

 

 

생성 완료!

 

 

 

diaflow website - Agent 생성

 

 

1. Agent 생성하기 

• Agent : end-user와의 대화를 처리해주는 역할.

https://dialogflow.cloud.google.com/#/getStarted

Dialogflow

Agent 이름을 설정하고, 앞서 생성한 google project 선택해준다.

(시간대는 korea가 없어서 tokyo로 진행)

 

 

 

service account 생성 (dialogflow 사용을 위해 필요함..!)

 

1. dev.js 작성

projectID를 dev.js의 googleProjectID의 value로 넣어준다.

 

 

2. service accont 생성

projectID에 해당하는 프로젝트의 설정 창으로 이동하여 서비스 계정을 생성한다.

 

Role의 경우, dialogflow api를 컨트롤 하는 기능을 하도록

Dialogflow API Client로 설정한다

 

 

3. private key 생성

account 생성을 마친 후, key를 생성해준다.

(생성된 후 key는 자동으로 다운된다. 안전한 곳에 보관하자!)

 

다운로드된 json 파일을 열어

dev.js 파일의 googleClientEmail, googlePrivateKey를 채워준다.