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

ใน 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

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

ผู้ใช้จะส่งคำขอการนัดหมายผ่านส่วนหน้า ซึ่งจะเรียกใช้ Dialogflow detectIntent API เพื่อตั้งค่าการนัดหมายสำหรับวันที่และเวลาที่ขอ จากนั้น Fulfillment ของ 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 ในเครื่องในสภาพแวดล้อมการพัฒนา ดูข้อมูลเพิ่มเติมได้ที่เกี่ยวกับพร็อกซี 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 เช่น คุณอาจป้อน "โพล" เป็นชื่อ
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 ให้คลิก ในแท็บทั่วไปข้างรหัสโปรเจ็กต์ ให้คลิก Google Cloud
2. คลิกเมนูการนำทาง ☰ > API และบริการ > ข้อมูลเข้าสู่ระบบ
3. คลิกสร้างข้อมูลเข้าสู่ระบบ > บัญชีบริการ
4. ในรายละเอียดบัญชีบริการ ให้ป้อน "appointment-scheduler" เป็นชื่อบัญชีบริการ แล้วคลิกสร้าง

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

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

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

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

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

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. ปฏิทินจะบันทึกคำตอบ

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

ลบเอเจนต์ Dialogflow

1. คลิก ข้างเอเจนต์ที่มีอยู่

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

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

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

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

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