Dialogflow 앱용 프런트엔드 Django 클라이언트 빌드

1. 시작하기 전에

이 Codelab에서는 프런트엔드 Django 클라이언트를 빌드하여 Dialogflow 앱의 대화형 환경을 만드는 방법을 알아봅니다. 구체적으로는 다음 작업을 실행합니다.

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

기본 요건

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

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

학습할 내용

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

빌드할 항목

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

필요한 항목

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

2. 아키텍처 개요

이전에 빌드한 약속 스케줄러 대화 환경을 사용하여 앱의 커스텀 프런트엔드를 만듭니다. Django로 프런트엔드를 빌드하고, 로컬에서 실행하고 테스트한 후 App Engine에 배포합니다.

사용자는 프런트엔드를 통해 약속 요청을 보내고, 프런트엔드는 Dialogflow DetectionIntent API를 호출하여 요청된 날짜와 시간에 약속을 설정합니다. 그러면 Dialogflow fulfillment가 Calendar에 요청을 전송하여 각 약속을 설정하고 Dialogflow를 통해 사용자에게 확인을 반환합니다.

84515171be610d4.png

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

7146cd729c50f7c1.png

3. 프런트엔드 앱 다운로드 및 실행

  1. 컴퓨터의 로컬 터미널에 다음 명령어를 입력하여 저장소를 로컬 컴퓨터에 클론합니다.
git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git
  1. 코드가 있는 디렉터리로 변경합니다. 또는 zip 파일로 샘플을 다운로드하고 압축을 풉니다.
cd Django-Dialogflow-Appointment-Scheduler

4. 로컬 환경 설정

배포된 앱은 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]

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

c11e94464bf4fcf8.png

Cloud SQL 인스턴스 초기화

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

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

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

  1. polls-instance라는 Cloud SQL 인스턴스용 Google Cloud 콘솔을 사용하여 새 데이터베이스를 만듭니다. 예를 들어 'polls'를 입력할 수 있습니다. 을 이름으로 사용하겠습니다. a3707ec9bc38d412.png
  2. polls-instance라는 Cloud SQL 인스턴스용 Cloud 콘솔을 사용하여 새 사용자 계정을 만듭니다. <ph type="x-smartling-placeholder">f4d098fca49cccff.png</ph>

데이터베이스 설정 구성

  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를 닫고 저장합니다.

5. 서비스 계정 설정

  1. Dialogflow 콘솔에서 e8a0a7d752849e01.png를 클릭합니다. 프로젝트 ID 옆에 있는 일반 탭에서 Google Cloud a9c6ff6374afe489.png를 클릭합니다.
  2. 탐색 메뉴 ❯를 클릭합니다. API 및 서비스 > 사용자 인증 정보.
  3. 사용자 인증 정보 만들기를 클릭합니다. 서비스 계정. <ph type="x-smartling-placeholder">86f51af0e7886fdd.png</ph>
  4. 서비스 계정 세부정보에 'appointment-scheduler'를 입력합니다. 서비스 계정 이름으로 지정하고 만들기를 클릭합니다.

845d25f3e07ff770.png

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

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

a424cec60144d707.png

6. 앱에서 호출되도록 Dialogflow DetectionIntent 엔드포인트를 설정합니다.

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

7. 로컬에서 앱 빌드 및 실행

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

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

d40910969aa71020.png

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

8. App Engine 표준 환경에 앱 배포

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

python3 manage.py collectstatic

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

gcloud app deploy

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

9. 프런트엔드 클라이언트 테스트

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

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

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

10. 프로덕션

11. 프로덕션에 콘텐츠를 게재할 준비가 되면 mysite/settings.py에서 DEBUG 변수를 False로 변경합니다.

12. 챗봇 테스트

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

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

3b0abfec8f4ba279.png

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

eb49089765b84fc6.png

13. 삭제

다른 Dialogflow Codelab을 완료할 계획이라면 지금은 이 부분을 건너뛰고 나중에 다시 확인하세요.

Dialogflow 에이전트 삭제

  1. 기존 에이전트 옆에 있는 e8a0a7d752849e01.png를 클릭합니다.
  2. 520c1c6bb9f46ea6.png
  3. General 탭에서 하단으로 스크롤하여 Delete This Agent를 클릭합니다.
  4. 나타나는 창에 삭제를 입력하고 삭제를 클릭합니다.

14. 축하합니다

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

자세히 알아보기

자세한 내용은 다음 리소스를 확인하세요.