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

1. ก่อนเริ่มต้น

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

• ดาวน์โหลด ตั้งค่า และเรียกใช้ไคลเอ็นต์ฟรอนท์เอนด์ของ Django
• ตั้งค่าปลายทาง Dialogflow DetectionIntent ที่จะเรียกใช้จากไคลเอ็นต์ฟรอนท์เอนด์ของ 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

2. ภาพรวมทางสถาปัตยกรรม

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

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

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

3. ดาวน์โหลดและเรียกใช้แอปฟรอนท์เอนด์

1. โคลนที่เก็บไปยังเครื่องภายในของคุณโดยพิมพ์คำสั่งนี้ในเทอร์มินัลภายในเครื่องคอมพิวเตอร์ของคุณ

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

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

cd Django-Dialogflow-Appointment-Scheduler

4. ตั้งค่าสภาพแวดล้อมในเครื่อง

เมื่อทำให้ใช้งานได้แล้ว แอปของคุณจะใช้พร็อกซี Cloud SQL ที่ติดตั้งมาในสภาพแวดล้อมมาตรฐานของ App Engine เพื่อสื่อสารกับอินสแตนซ์ Cloud SQL ของคุณ อย่างไรก็ตาม หากต้องการทดสอบแอปภายในเครื่อง คุณต้องติดตั้งและใช้สำเนาของพร็อกซี Cloud SQL ในเครื่องในสภาพแวดล้อมการพัฒนา โปรดดูข้อมูลเพิ่มเติมในเกี่ยวกับพร็อกซี 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-3 นาทีเพื่อให้อินสแตนซ์พร้อมใช้งาน หลังจากพร้อมใช้งานแล้ว อินสแตนซ์ควรจะปรากฏในรายการอินสแตนซ์
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 เช่น คุณสามารถป้อน "แบบสำรวจ" เป็นชื่อ
2. สร้างบัญชีผู้ใช้ใหม่โดยใช้ Cloud Console สำหรับอินสแตนซ์ Cloud SQL โดยใช้ชื่ออินสแตนซ์แบบสำรวจ

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

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

5. การตั้งค่าบัญชีบริการ

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

5. ตรงข้อความให้สิทธิ์บัญชีบริการนี้ในการเข้าถึงโปรเจ็กต์ ให้คลิกต่อไปเพื่อข้าม
6. ในตำแหน่งให้สิทธิ์ผู้ใช้เข้าถึงบัญชีบริการนี้ (ไม่บังคับ) ให้คลิกสร้างคีย์ > JSON > สร้าง

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

6. ตั้งค่าปลายทาง Dialogflow DetectionIntent ที่จะเรียกใช้จากแอป

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

7. สร้างและเรียกใช้แอปในเครื่อง

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

1. สร้างสภาพแวดล้อม Python แบบแยกต่างหากและติดตั้ง Dependencies ต่อไปนี้

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) เพื่อหยุดเว็บเซิร์ฟเวอร์ภายใน

8. ทำให้แอปใช้งานได้กับสภาพแวดล้อมมาตรฐานของ App Engine

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

python3 manage.py collectstatic

อัปโหลดแอปโดยเรียกใช้คำสั่งต่อไปนี้ในไดเรกทอรีของแอปที่มีไฟล์ app.yaml อยู่

gcloud app deploy

รอข้อความที่แจ้งว่าการอัปเดตเสร็จสมบูรณ์แล้ว

9. ทดสอบไคลเอ็นต์ฟรอนท์เอนด์

ในเว็บเบราว์เซอร์ ให้ป้อน https://<your_project_id>.appspot.com

ในครั้งนี้ คำขอของคุณจะได้รับบริการโดยเว็บเซิร์ฟเวอร์ที่ทำงานในสภาพแวดล้อมมาตรฐานของ App Engine

คำสั่ง app deploy จะทำให้แอปใช้งานได้ตามที่อธิบายไว้ใน app.yaml และกำหนดให้เวอร์ชันที่ใช้งานใหม่เป็นเวอร์ชันเริ่มต้น ซึ่งทำให้แอปแสดงการรับส่งข้อมูลใหม่ทั้งหมด

10. การผลิต

11. เมื่อคุณพร้อมที่จะแสดงเนื้อหาของคุณในเวอร์ชันที่ใช้งานจริง ให้เปลี่ยนตัวแปร DEBUG เป็น "เท็จ" ใน mysite/settings.py

12. ทดสอบแชทบ็อต

ไปที่ https://<your_project_id>.appspot.com แล้วป้อนข้อมูลต่อไปนี้

1. ผู้ใช้: "กำหนดนัดจดทะเบียนรถเวลา 15.00 น. ของพรุ่งนี้"
2. แชทบ็อตจะตอบกลับดังนี้

3. ปฏิทินจะจองคำตอบ

13. ล้างข้อมูล

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

ลบ Agent ของ Dialogflow

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

14. ขอแสดงความยินดี

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

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

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

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