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

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

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

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

ผู้ใช้จะส่งคำขอการนัดหมายผ่านส่วนหน้า ซึ่งจะเรียกใช้ Dialogflow detectIntent API เพื่อตั้งค่าการนัดหมายสำหรับวันที่และเวลาที่ขอ จากนั้น Fulfillment ของ Dialogflow จะส่งคำขอไปยังปฏิทินเพื่อตั้งเวลานัดหมายที่เกี่ยวข้อง และส่งการยืนยันกลับไปยังผู้ใช้ผ่าน 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. ตั้งค่าสภาพแวดล้อมภายใน

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

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

ติดตั้งพร็อกซี 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 รุ่นที่สอง ตั้งชื่ออินสแตนซ์ว่า "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. สร้างฐานข้อมูลใหม่โดยใช้ Google Cloud Console สำหรับอินสแตนซ์ Cloud SQL ที่ชื่อ polls-instance เช่น คุณอาจป้อน "โพล" เป็นชื่อ a3707ec9bc38d412.png
  2. สร้างบัญชีผู้ใช้ใหม่โดยใช้ Cloud Console สำหรับอินสแตนซ์ Cloud SQL ที่ชื่อ polls-instance f4d098fca49cccff.png

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

  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]
  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 ในแท็บทั่วไปข้างรหัสโปรเจ็กต์ ให้คลิก Google Cloud a9c6ff6374afe489.png
  2. คลิกเมนูการนำทาง ☰ > API และบริการ > ข้อมูลเข้าสู่ระบบ
  3. คลิกสร้างข้อมูลเข้าสู่ระบบ > บัญชีบริการ 86f51af0e7886fdd.png
  4. ในรายละเอียดบัญชีบริการ ให้ป้อน "appointment-scheduler" เป็นชื่อบัญชีบริการ แล้วคลิกสร้าง

845d25f3e07ff770.png

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

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

a424cec60144d707.png

6. ตั้งค่าปลายทาง detectIntent ของ Dialogflow เพื่อเรียกใช้จากแอป

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

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

หากต้องการเรียกใช้แอป Django ในคอมพิวเตอร์ของคุณ คุณจะต้องตั้งค่าสภาพแวดล้อมการพัฒนา Python ซึ่งรวมถึง Python, pip และ virtualenv โปรดดูวิธีการที่หัวข้อการตั้งค่าสภาพแวดล้อมการพัฒนา 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 (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 เป็น False ใน mysite/settings.py

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

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

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

3b0abfec8f4ba279.png

  1. ปฏิทินจะบันทึกคำตอบ

eb49089765b84fc6.png

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

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

ลบเอเจนต์ Dialogflow

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

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

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

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

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