Dialogflow 앱용 프런트엔드 샌드박스 클라이언트 빌드

이 Codelab에서는 Dialogflow 앱의 대화형 환경을 만들기 위한 프런트엔드 npm 클라이언트를 빌드하는 방법을 알아봅니다. 특히 이 작업은 다음과 같습니다.

  • 샌드박스 프런트엔드 클라이언트를 다운로드, 설정, 실행합니다.
  • 샌드박스 프런트엔드 클라이언트에서 호출되도록 Dialogflow detectIntent 엔드포인트를 설정합니다.
  • App Engine에서 Google Cloud에 앱을 배포합니다.
  • Calendar 요청이 사용자 요청별로 설정되어 있는지 테스트합니다.

기본 요건

계속하기 전에 다음 Codelab을 완료해야 합니다.

  1. Dialogflow로 약속 스케줄러 빌드
  2. Dialogflow 항목 이해하기
  3. Dialogflow와 Calendar를 통합하여 처리 이해하기

학습할 내용

  • Dialogflow를 위한 샌드박스 프런트엔드 클라이언트 설정 및 실행 방법
  • Bazel 프런트엔드 클라이언트를 App Engine에서 Google Cloud에 배포하는 방법
  • 커스텀 프런트엔드에서 Dialogflow 앱을 테스트하는 방법

빌드할 항목

  • Dialogflow용 샌드박스 프런트엔드 클라이언트를 설정하고 실행합니다.
  • Bazel 프런트엔드 클라이언트를 App Engine에서 Google Cloud로 배포합니다.
  • 커스텀 프런트엔드에서 Dialogflow 앱을 테스트합니다.

필요한 항목

  • Python에 대한 기본적 이해
  • Dialogflow에 대한 기본적인 이해

이전에 Appointment Scheduler 대화 환경을 사용하여 앱의 커스텀 프런트엔드를 빌드하고 만듭니다. 프런트엔드를 사용하여 npm으로 빌드하고 로컬에서 테스트 및 테스트한 후 App Engine에 배포합니다.

사용자는 프런트엔드를 통해 예약 요청을 보내면 Dialogflow 감지 인텐트 API를 호출하여 요청된 날짜 및 시간에 약속을 설정합니다. Dialogflow 처리는 Calendar에 요청을 전송하여 각 약속을 설정하고 Dialogflow를 통해 사용자에게 확인을 반환합니다.

최종 결과는 다음과 같습니다.

  1. 컴퓨터의 로컬 터미널에 다음 명령어를 입력하여 저장소를 로컬 머신에 클론합니다.
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. 코드가 포함된 디렉터리로 변경합니다. 또는 샘플을 zip으로 다운로드하여 추출할 수 있습니다.
cd Django-Dialogflow-Appointment-Scheduler

배포된 앱은 App Engine 표준 환경에 기본 제공되는 Cloud SQL 프록시를 사용하여 Cloud SQL 인스턴스와 통신합니다. 그러나 앱을 로컬에서 테스트하려면 개발 환경에서 Cloud SQL 프록시의 로컬 사본을 설치하고 사용해야 합니다. 자세한 내용은 Cloud SQL 프록시 정보를 참조하세요.

Cloud SQL 인스턴스에서 기본 클라이언트 작업을 수행하려면 MySQL용 Cloud SQL 클라이언트를 사용하면 됩니다.

Cloud SQL 프록시 설치

Cloud SQL 프록시를 다운로드하고 설치합니다. Cloud SQL 프록시는 로컬에서 실행 중인 Cloud SQL 인스턴스에 연결하는 데 사용됩니다.

프록시를 다운로드합니다.

curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64

프록시를 실행 가능하게 만듭니다.

chmod +x cloud_sql_proxy

Cloud SQL 인스턴스 만들기

  1. MySQL 2세대용 Cloud SQL 인스턴스를 만듭니다. 인스턴스 이름을 "polls-instance" 또는 이와 유사한 이름으로 지정합니다. 인스턴스가 준비되는 데 몇 분 정도 걸릴 수 있습니다. 준비되면 인스턴스 목록에 표시됩니다.
  2. gcloud 도구를 사용하여 다음 명령어를 실행합니다. 여기서 [YOUR_INSTANCE_NAME]는 인스턴스 이름을 나타냅니다. [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]. 형식으로 표시되는 다음 단계의 인스턴스 연결 이름에 표시된 값을 기록해 둡니다.
gcloud sql instances describe [YOUR_INSTANCE_NAME]

또는 인스턴스를 클릭하여 인스턴스 연결 이름을 볼 수 있습니다.

Cloud SQL 인스턴스 초기화

이전 단계의 인스턴스 연결 이름을 사용하여 Cloud SQL 프록시를 시작합니다. [YOUR_INSTANCE_CONNECTION_NAME]를 이전 단계에서 기록한 값으로 바꿉니다. 이렇게 하면 로컬 테스트 목적으로 로컬 컴퓨터에서 인스턴스에 대한 연결이 설정됩니다. 로컬에서 앱을 테스트하는 동안 Cloud SQL 프록시를 계속 실행합니다.

./cloud_sql_proxy -instances="[YOUR_INSTANCE_CONNECTION_NAME]"=tcp:3306

다음으로 새 Cloud SQL 사용자와 데이터베이스를 만듭니다.

  1. Google Cloud Console을 사용하여 polls-instance라는 Cloud SQL 인스턴스를 위한 새 데이터베이스를 만듭니다. 예를 들어 이름으로 "polls"를 입력할 수 있습니다.
  2. Cloud SQL 인스턴스를 사용하여 polls-instance라는 새 사용자 계정을 만듭니다.

데이터베이스 설정 구성

  1. 수정할 mysite/settings.py을 엽니다.
  2. 두 위치에서 [YOUR-USERNAME][YOUR-PASSWORD]를 이전 섹션에서 만든 데이터베이스 사용자 이름과 비밀번호로 바꿉니다. 이렇게 하면 App Engine 배포 및 로컬 테스트의 데이터베이스 연결을 설정할 수 있습니다.
  3. ‘HOST': ‘cloudsql/ [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]이라고 표시된 행에서' [PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]를 이전 섹션에서 기록한 값으로 바꿉니다.
  4. 다음 명령어를 실행하고 다음 단계의 출력 인스턴스 연결 이름 값을 복사합니다.
gcloud sql instances describe [YOUR_INSTANCE_NAME]
  1. [YOUR-CONNECTION-NAME]를 이전 섹션에서 기록한 값으로 바꿉니다.
  2. [YOUR-DATABASE]을 이전 섹션에서 선택한 이름으로 바꿉니다.
# [START db_setup]
if os.getenv('GAE_APPLICATION', None):
    # Running on production App Engine, so connect to Google Cloud SQL using
    # the unix socket at /cloudsql/<your-cloudsql-connection string>
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '/cloudsql/[PROJECT_NAME]:[REGION_NAME]:[INSTANCE_NAME]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]',
            'NAME': '[YOUR-DATABASE]',
        }
    }
else:
    # Running locally so connect to either a local MySQL instance or connect to
    # Cloud SQL via the proxy. To start the proxy via command line:
    #     $ cloud_sql_proxy -instances=[INSTANCE_CONNECTION_NAME]=tcp:3306
    # See https://cloud.google.com/sql/docs/mysql-connect-proxy
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'HOST': '127.0.0.1',
            'PORT': '3306',
            'NAME': '[YOUR-DATABASE]',
            'USER': '[YOUR-USERNAME]',
            'PASSWORD': '[YOUR-PASSWORD]'
        }
    }
# [END db_setup]
  1. settings.py를 닫고 저장합니다.
  1. Dialogflow 콘솔에서 를 클릭합니다. Project ID 옆의 General 탭에서 Google Cloud 를 클릭합니다.
  2. 탐색 메뉴 ☰ 및 g; API 및 AMP 서비스를 클릭하고 사용자 인증 정보를 클릭합니다.
  3. 사용자 인증 정보 만들기서비스 계정을 클릭합니다.
  4. 서비스 계정 세부정보에서 서비스 계정 이름에 "appointment-scheduler"를 입력한 다음 만들기를 클릭합니다.

  1. 이 서비스 계정에 프로젝트에 대한 액세스 권한 부여가 표시되면 계속을 클릭하여 건너뜁니다.
  2. 사용자에게 이 서비스 계정에 대한 액세스 권한 부여 (선택사항)라고 표시되면 키 만들기 & tt, JSON & gt, 만들기를 클릭합니다.

JSON 파일이 컴퓨터에 다운로드되며 다음 설정 섹션에 필요합니다.

  1. 채팅 폴더에서 AppointmentScheduler.json를 사용자 인증 정보 JSON 파일로 바꿉니다.
  2. 채팅 폴더의 views.py에서 GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>"를 프로젝트 ID로 변경합니다.

ADB 앱을 로컬 컴퓨터에서 실행하려면 Python, pip, androidx를 포함한 Python 개발 환경을 설정해야 합니다. 자세한 내용은 Python 개발 환경 설정을 참조하세요.

  1. 격리된 Python 환경을 만들고 종속 항목을 설치합니다.
virtualenv env
source env/bin/activate
pip install -r requirements.txt
  1. Bazel 이전을 실행하여 모델을 설정합니다.
python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate
  1. 로컬 웹 서버를 시작합니다.
python3 manage.py runserver
  1. 웹브라우저에서 http://localhost:8000/을 입력합니다. 다음 스크린샷과 같이 간단한 웹페이지가 표시됩니다.

샘플 앱 페이지는 컴퓨터에서 실행되는 장갑 웹 서버에서 제공됩니다. 계속할 준비가 되면 Control+S (Macintosh의 경우 Command+S)를 눌러 로컬 웹 서버를 중지하세요.

다음 명령어를 실행하여 앱의 모든 정적 파일을 settings.pySTATIC_ROOT에 지정된 폴더로 이동합니다.

python3 manage.py collectstatic

app.yaml 파일이 있는 앱 디렉터리에서 다음 명령어를 실행하여 앱을 업로드합니다.

gcloud app deploy

업데이트가 완료되었음을 알리는 메시지가 표시될 때까지 기다립니다.

웹브라우저에서 https://<your_project_id>.appspot.com을 입력합니다.

이번에는 App Engine 표준 환경에서 실행되는 웹 서버에서 요청을 처리합니다.

app deploy 명령어는 app.yaml에 설명된 대로 앱을 배포하고 새로 배포된 버전을 기본 버전으로 설정하여 모든 새 트래픽을 제공합니다.

https://<your_project_id>.appspot.com으로 이동하여 다음을 입력합니다.

  1. 사용자: "내일 오후 3시에 차량 등록 일정을 정합니다."
  2. 챗봇은 다음과 같이 응답합니다.

  1. Calendar에서 응답을 예약합니다.

다른 Dialogflow Codelab을 완료하려면 지금은 이 부분을 건너뛰고 나중에 다시 진행하세요.

Dialogflow 에이전트 삭제

  1. 기존 에이전트 옆에 있는 를 클릭합니다.
  1. General(일반) 탭에서 하단으로 스크롤하여 Delete Agent(이 에이전트 삭제)를 클릭합니다.
  2. 표시되는 창에 삭제를 입력하고 삭제를 클릭합니다.

Dialogflow에서 챗봇을 만들어 Calendar와 통합했습니다. 이제 챗봇 개발자가 되셨습니다!

자세히 알아보기

자세히 알아보려면 다음 자료를 참고하세요.