สร้างไคลเอ็นต์ Django ฟรอนท์เอนด์สําหรับแอป Dialogflow

ใน Codelab นี้ คุณจะได้เรียนรู้วิธีสร้างไคลเอ็นต์ Django ฟรอนท์เอนด์เพื่อสร้างประสบการณ์การสนทนาสําหรับแอป Dialogflow โดยเฉพาะอย่างยิ่ง คุณจะต้องดําเนินการต่อไปนี้

• ดาวน์โหลด ตั้งค่า และเรียกใช้ไคลเอ็นต์ Django ฟรอนท์เอนด์
• ตั้งค่าปลายทาง DialogflowDetectIntent ให้เรียกใช้จากไคลเอ็นต์ฟรอนท์เอนด์ Django
• ทําให้แอปใช้งานได้ใน Google Cloud บน App Engine
• ทดสอบว่าจะตั้งค่าคําเชิญในปฏิทินตามคําขอของผู้ใช้หรือไม่

สิ่งที่ต้องมีก่อน

คุณต้องเพิ่มโค้ด Codelab ต่อไปนี้ก่อนที่จะดําเนินการต่อ

1. สร้างกําหนดเวลาการนัดหมายด้วย Dialogflow
2. ทําความเข้าใจเอนทิตีใน Dialogflow
3. ทําความเข้าใจการดําเนินการตามคําสั่งซื้อโดยการผสานรวม Dialogflow กับปฏิทิน

สิ่งที่คุณจะได้เรียนรู้

• วิธีตั้งค่าและเรียกใช้ไคลเอ็นต์ Django ฟรอนท์เอนด์ของ Dialogflow
• วิธีทําให้ไคลเอ็นต์ฟรอนท์เอนด์ Django ใช้งานได้ใน Google Cloud บน App Engine
• วิธีทดสอบแอป Dialogflow จากฟรอนท์เอนด์ที่กําหนดเอง

สิ่งที่คุณจะสร้าง

• คุณสามารถตั้งค่าและเรียกใช้ไคลเอ็นต์ Django ฟรอนท์เอนด์ของ Dialogflow ได้
• คุณจะทําให้ไคลเอ็นต์ฟรอนท์เอนด์ Django ใช้งานได้กับ Google Cloud ใน App Engine
• คุณจะทดสอบแอป Dialogflow จากฟรอนท์เอนด์ที่กําหนดเอง

สิ่งที่ต้องมี

• ความเข้าใจเบื้องต้นเกี่ยวกับ Python
• ความเข้าใจพื้นฐานของ Dialogflow

คุณจะใช้ประสบการณ์การสนทนาของกําหนดเวลาการนัดหมายที่สร้างไว้ก่อนหน้านี้ และสร้างส่วนหน้าที่กําหนดเองสําหรับแอปได้ และคุณจะสร้างฟรอนท์เอนด์ด้วย Django ให้เรียกใช้และทดสอบในเครื่อง และทําให้ใช้งานได้ใน App Engine

ผู้ใช้จะส่งคําขอนัดหมายผ่านฟรอนท์เอนด์ซึ่งจะเรียกใช้ DialogflowdetectIntent API เพื่อนัดหมายกับวันที่และเวลาที่ขอ จากนั้น Dialogflow จะส่งคําขอไปยังปฏิทินเพื่อกําหนดการนัดหมายที่เกี่ยวข้องและส่งคืนการยืนยันให้กับผู้ใช้ผ่าน Dialogflow

ผลลัพธ์สุดท้ายจะมีลักษณะดังนี้

1. โคลนที่เก็บในเครื่องคอมพิวเตอร์โดยพิมพ์คําสั่งนี้ในเครื่องชําระเงินของคอมพิวเตอร์

git clone https://github.com/priyankavergadia/Django-Dialogflow-Appointment-Scheduler.git

2. เปลี่ยนไปยังไดเรกทอรีที่มีโค้ดดังกล่าว หรือคุณจะดาวน์โหลดตัวอย่างเป็น ZIP แล้วแตกข้อมูลก็ได้

cd Django-Dialogflow-Appointment-Scheduler

เมื่อติดตั้งใช้งานแล้ว แอปจะใช้พร็อกซี Cloud SQL ที่อยู่ในสภาพแวดล้อมมาตรฐานของ App Engine เพื่อสื่อสารกับอินสแตนซ์ Cloud SQL แต่ในการทดสอบแอปในเครื่อง คุณต้องติดตั้งและใช้สําเนา Cloud SQL Proxy ในเครื่องในสภาพแวดล้อมการพัฒนา โปรดดูข้อมูลเพิ่มเติมที่หัวข้อเกี่ยวกับพร็อกซี Cloud SQL

หากต้องการทํางานพื้นฐานของผู้ดูแลระบบในอินสแตนซ์ Cloud SQL คุณสามารถใช้ไคลเอ็นต์ Cloud SQL สําหรับ MySQL ได้

หมายเหตุ: คุณต้องตรวจสอบสิทธิ์เครื่องมือบรรทัดคําสั่ง gcloud เพื่อใช้พร็อกซีในการเชื่อมต่อจากเครื่องภายใน

ติดตั้งพร็อกซี 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. สร้างอินสแตนซ์ Cloud SQL สําหรับ MySQL รุ่นที่ 2 ตั้งชื่ออินสแตนซ์ "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 สําหรับอินสแตนซ์ Cloud SQL ที่ชื่อ polls-instance เช่น ป้อน "polls" เป็นชื่อ
2. สร้างบัญชีผู้ใช้ใหม่โดยใช้ Cloud Console สําหรับอินสแตนซ์ Cloud SQL ที่ชื่อ polls-instance

กําหนดการตั้งค่าฐานข้อมูล

1. เปิด mysite/settings.py เพื่อแก้ไข
2. ใน 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]

5. แทนที่ [YOUR-CONNECTION-NAME] ด้วยค่าที่คุณบันทึกไว้ในส่วนก่อนหน้า
6. แทนที่ [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]

7. ปิดและบันทึก settings.py

1. ในคอนโซล Dialogflow&#39 ให้คลิก ในแท็บทั่วไป ถัดจากรหัสโปรเจ็กต์ ให้คลิก Google Cloud
2. คลิกเมนูการนําทาง ☰ > API & &; บริการ > ข้อมูลเข้าสู่ระบบ
3. คลิก Create Credentials > Service account
4. ในรายละเอียดบัญชีบริการ ให้ป้อน "appointment-Scheduler" เป็นชื่อบัญชีบริการ จากนั้นคลิกสร้าง

5. หากมีข้อความระบุว่า Grant this service account access to project ให้คลิก Continue เพื่อข้าม
6. ในส่วนที่ระบุว่าให้สิทธิ์ผู้ใช้เข้าถึงบัญชีบริการนี้ (ไม่บังคับ) ให้คลิกสร้างคีย์ > JSON > สร้าง

ระบบจะดาวน์โหลดไฟล์ JSON ไปยังคอมพิวเตอร์ของคุณ ซึ่งจะต้องใช้ในส่วนการตั้งค่าต่อไปนี้

1. ในโฟลเดอร์แชท ให้แทนที่ AppointmentScheduler.json ด้วยไฟล์ JSON สําหรับข้อมูลรับรอง
2. ใน views.py ในโฟลเดอร์แชท ให้เปลี่ยน GOOGLE_PROJECT_ID = "<YOUR_PROJECT_ID>" เป็นรหัสโปรเจ็กต์

ในการเรียกใช้แอป Django บนคอมพิวเตอร์ของคุณ คุณจะต้องตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ Python รวมถึง Python, Pip และ Virtualenv ดูวิธีการได้ที่การตั้งค่าสภาพแวดล้อมการพัฒนา Python

1. สร้างสภาพแวดล้อม Python แบบแยกต่างหากและติดตั้งทรัพยากร Dependency เพื่อติดตั้งดังนี้

virtualenv env
source env/bin/activate
pip install -r requirements.txt

2. เรียกใช้การย้ายข้อมูล Django เพื่อตั้งค่าโมเดล

python3 manage.py makemigrations
python3 manage.py makemigrations polls
python3 manage.py migrate

3. เริ่มต้นเว็บเซิร์ฟเวอร์ในเครื่อง

python3 manage.py runserver

4. ป้อน http://localhost:8000/ ในเว็บเบราว์เซอร์ คุณควรเห็นหน้าเว็บที่เรียบง่ายดังที่แสดงในภาพหน้าจอต่อไปนี้

ตัวอย่างหน้าแอปจะแสดงโดยเว็บเซิร์ฟเวอร์ Django ที่ทํางานในคอมพิวเตอร์ของคุณ เมื่อคุณพร้อมดําเนินการต่อ ให้กด Control+S (Command+S ใน Macintosh) เพื่อหยุดเว็บเซิร์ฟเวอร์ในเครื่อง

เรียกใช้คําสั่งต่อไปนี้เพื่อย้ายไฟล์แบบคงที่ของแอปทั้งหมดไปยังโฟลเดอร์ที่ระบุโดย STATIC_ROOT ใน settings.py

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. ผู้ใช้: "กําหนดเวลาการนัดหมายรถพรุ่งนี้เวลา 15.00 น."
2. แชทบ็อตตอบกลับดังนี้

3. ปฏิทินจะจองการตอบกลับนี้

หากคุณวางแผนที่จะทํา Dialogflow Codelab ให้เสร็จสิ้น ให้ข้ามส่วนนี้ไปก่อนแล้วค่อยกลับมาในภายหลัง

ลบ Agent ของ Dialogflow

1. คลิก ข้าง Agent ที่มีอยู่

1. 
2. ในแท็บทั่วไป ให้เลื่อนไปที่ด้านล่างแล้วคลิกลบ Agent นี้
3. พิมพ์ Delete ลงในหน้าต่างที่ปรากฏขึ้นแล้วคลิกลบ

คุณได้สร้างแชทบ็อตใน Dialogflow และผสานรวมเข้ากับปฏิทิน ตอนนี้คุณเป็นนักพัฒนาซอฟต์แวร์แชทบ็อตแล้ว

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมได้จากแหล่งข้อมูลต่อไปนี้

• ผสานรวม Vision API กับ Dialogflow
• ตัวอย่างโค้ดในหน้า Dialogflow Github