Tutorial: สร้าง Line Chat Bot ด้วย Dialogflow + Python(Heroku) + Firebase (Part II)

หลังจากที่ได้เตรียมความพร้อมของโปรแกรม Library เรียบร้อยแล้วในตอนที่แล้วตอนนี้เราก็จะมาต่อกันในส่วนที่เหลือ

ผมจะใช้ Visual Studio Code เป็น IDE สำหรับการเขียนโค้ด Python ถ้าหากอยากจะดาวน์โหลดมาใช้งานสามารถเข้าไปที่ลิ้งค์นี้ได้เลย

Visual Studio Code — Code Editing. Redefined

10. การทดสอบโค้ด Python โดยเชื่อมกับ Dialogflow

ดังนั้นก่อนที่จะไปถึงโค้ดตัวโปรเจคของเราขอขั้นด้วยเนื้อหาตรงนี้สักหน่อยเพื่อความเข้าใจมากขึ้นตรงส่วนนี้พยายามที่จะอธิบายแบบง่ายที่สุดอาจจะไม่ได้ตรงกับความหมายจริงๆ 100%

หลักการของโปรเจคนี้คือถ้ามีคำถามบางหมวดหมู่ที่เราต้องการให้ โค้ด Python ของเราตอบ เราจะให้ Dialogflow ส่งคำถามเหล่านั้นมาที่ โค้ด Python ของเราซึ่ง Dailogflow จะส่งคำถามที่ว่ามาในรูปแบบของข้อมูลชนิดหนึ่งที่เรียกว่า JSON

ซึ่งการที่จะส่งมาถึงโค้ดของเราได้ โค้ดของเราจำเป็นที่จะต้องอยู่ในโลกอินเทอร์เน็ตก่อน แล้วถ้าเราลองรันโค้ดในเครื่องของเราหละจะเป็นยังไง? จะเชื่อมกับ Dailogflow ได้ไหม?

เราลองมาดูโค้ด Flask Application ง่ายๆอันนี้หน่อยดีกว่า

from flask import Flask
app = Flask(__name__)
@app.route('/')
def MainFunction():
    return 'Hello world'
if __name__ == '__main__':
    app.run()

หากเรา Copy โคดนี้แล้วนำไปใส่ลงใน Visual Studio Code หลังจากนั้น Save ไฟล์ ชื่อว่า test.py แบบนี้

แล้วเมื่อลองรันดูก็จะได้ผลแบบนี้ แล้วก็ Copy ลิ้งในกรอบสีแดง นั้นคือ http://127.0.0.1:5000/ ไปเปิดใน Web browser

ก็จะได้ผลแบบนี้

อ้าวถ้างั้นเกิดเราลองเอาลิ้งนี้ไปเปิดในมือถือ ก็ต้องขึ้นเหมือนกันสิ ลองเลยแล้วกัน

อ้าวแล้วทำไมเป็นอย่างนี้หละ เข้าไม่ได้

ที่เข้าไม่ได้เพราะว่าโค้ดอันนี้อยู่ในเครื่องของเรา เท่านั้นถ้าเราอยากที่จะเข้าถึงจากโลกอินเตอร์เน็ตได้ สิ่งที่เราต้องทำก็คือต่ออุโมงทางเชื่อมให้มันเข้าไปถึงโลกอินเตอร์เน็ตได้นั่นเอง

แล้วเราจะสร้างอุโมงนั้นอย่างไร?

จำได้ไหม ในตอนที่แล้วเราได้ทำการ Install โปรแกรมที่ชื่อว่า “Localtunnel” กันไป ตัวนี้แหละที่จะพาโค้ด ของเราไปยังโลกอินเตอร์เน็ต

อย่างแรกเราลองเปิด Command Prompt หรือ Terminal หน้าเปล่าๆขึ้นมา เอาเป็นหน้าใหม่เลยนะ เนื่องจากเราต้องเปิดหน้านี้ทิ้งไว้ตลอด ถ้าเราปิด มันจะทำลายอุโมงของเรา

เมื่อเปิดขึ้นมาแล้วให้พิมพ์ “ lt -p 5000 ” สำหรับ Windows และ “ sudo lt -p 5000 ” สำหรับ Mac แล้ว กด enter

ถ้าเป็น Mac จะขึ้น ให้ใส่ Password ของ User เราก็ใส่ลงไป หลังจากนั้นมันจะปรากฏ your url ขึ้นมา (เป็นการสุ่มชื่อ url ใหม่ทุกครั้งที่ขอ ดังนั้นได้ไม่ตรงกันคือเรื่องปกติ)

ทีนี้พักไว้ก่อน โดยเปิดหน้าต่างนี้ค้างไว้เลย แล้วไปรันโค้ดอีกครัง

คราวนี้ผลการรันก็ออกมาแบบเดิม แต่เราไม่จำเป็นต้องใช้ลิ้งนี้แล้ว เราจะใช้ url ที่ได้จากการ “Localtunnel” แทน

แล้วถ้าลองเปิดในมือถือหละ คราวนี้เปิดได้แปลว่าตอนนี้ โค้ดของเราออกสู่โลกอินเตอร์เน็ตแล้ว

ข้อควรระวัง
url ที่ได้ จาก “Localtunnel” ทิ้งไว้สักพักจะหมดอายุ หากหมดอายุแล้วเราจะต้องทำการใช้คำสั่งเดิมเหมือนอย่างที่กล่าวไว้ด้านบน นั่นคือ

“ lt -p 5000 ” สำหรับ Windows และ
“ sudo lt -p 5000 ” สำหรับ Mac
แล้ว กด enter เพื่อขอลิ้งใหม่ และเราก็จะสามารถใช้ลิ้งนี้แทนลิ้งเก่าได้เลย

ดังนั้นให้หมั่นตรวจสอบในหน้า Command Prompt หรือ Terminal ว่า url ได้ หมดอายุลงรึยัง

ทีนี้เราลองเชื่อมต่อโค้ดเข้ากับ Dialogflow กันดีกว่า สามารถ Download โค้ดได้ที่ลิ้งค์ด้านล่างเลย

Without Firebase - Google Drive

ส่วนการอธิบายโค้ดจะยกไปในหัวข้อถัดไป

โค้ดที่จะใช้นี้เป็นโค้ดที่สามารถคำนวนค่า BMI เพื่อบอกว่ามีความอ้วนระดับไหนได้แล้ว และสามารถตอบเมนูอาหาร หากถามว่า “ทานอะไรดี” ได้ แต่จะตอบแค่เมนูเดียวคือ “สุกี้แห้ง” ส่วนเมนูอื่นๆยังตอบไม่ได้เพราะยังไม่ได้เชื่อมกับ Firebase ที่จะพูดต่อไปในตอนหน้า

อย่างแรกเราแค่เปิดโค้ดขึ้นมาแล้วรันเลย

ไปที่ Dailogflow เข้าเมนู Intents เลือก แล้วเข้าไปที่ Intent “กินอะไรดี” และ “BMI — Confirmed W and H” เพื่อกด “Enable webhook call for this intent” แล้ว กด SAVE

การ “Enable webhook call for this intent” เป็นการทำเพื่อให้ Dialogflow ทำการ By pass คำถามในหัวข้อนั้นๆไปยังโค้ดของเรา

จากนั้น
1. เข้าเมนู Fulfillment
2. กด ENABLED
3. เอา url จาก “Localtunnel” ไปแปะไว้เลย
เลื่อนลงมาด้านล่าง กด SAVE

ข้อควรจำ
url ที่ได้ จาก “Localtunnel” เป็น url ชั่วคราว เมื่อทิ้งไว้สักระยะ หรือ ปิดหน้าต่าง Command Prompt/Terminal จะทำให้ url หมดอายุลง หากเราต้องการทดสอบโค้ดเราจะต้องทำการใช้คำสั่ง เดิมเหมือนด้านบนเพื่อขอลิ้งใหม่ แล้วนำมาอัพเดตใน Dialogflow ด้วยกระบวนการนี้ทุกครั้ง มิฉะนัน้จะไม่สามารถเชื่อมต่อ Dialogflow กับโค้ดของเราได้

เราจะสามารถโต้ตอบกับไลน์ ได้ผลลัพท์ดังรูปด้านล่าง

ตอนนี้เราก็สามารถที่จะทำการทดสอบตัว โค้ดของเราร่วมกับ Dialogflow ได้แล้ว

11. อธิบายโค้ดสักหน่อย

ตอนนี้เราก็จะมาเป็นการอธิบายโค้ดเบื้องต้นคร่าวๆกันโดยคงจะไม่ได้ลงลึกไปในรายละเอียดแบบที่ละบรรทัด เริ่มด้วยมาดูภาพรวมของโค้ดทั้งหมดกันก่อน

ทีนี่เรามาแยกส่วนเพื่ออธิบายกัน

ส่วนแรกนี้จะเป็นการ เรียก Library ที่จำเป็นใช้เข้ามาไว้ในโค้ดของเรากันก่อน ซึ่งก็จะมี json, os และ flask

เนื่องจากโปรแกรมของเราใช้ Flask ซึ่งเป็น Web frame work เราก็ต้องตั้งค่าให้มันกันก่อนหากต้องการรายละเอียดเพิ่มเติมอ่านต่อที่ลิ้งค์ด้านล่างได้เลย

@ พัฒนา Web App ด้วย Flask: Part 1 </tutorial>

ต่อมาจะเป็นส่วนของ Function ต่างๆซึ่งมีทั้งหมด 4 function

1.MainFunction()

เป็นFunction ที่จะทำงาน Function แรก และเรียกฟังชั้นอื่นๆมาทำหน้าที่ต่อ โดยที่ตัวมันเองจะทำหน้าที่รับข้อมูลจาก Dialogflow เข้ามาแล้วส่งคำถามไปยัง generating_answer() เพื่อแยกแยะ Intent name หลังจากนั้น รับคำตอบกลับมาและส่งไปยัง Dialogflow

2.generating_answer()

ทำหน้าที่ในการแยกแยะ Intent name ไปยัง Function เฉพาะที่จะประมวลผล Intent Name นั้นๆ ถ้าเป็น Intent name ชื่อว่า 'กินอะไรดี’ ก็จะส่งให้ menu_recormentation() ต่อไป ถ้าเป็น Intent name ชื่อว่า 'BMI - Confirmed W and H' ก็จะส่งให้ BMI_calculation() ต่อไปนั้นเอง

หลังจากนั้นเมื่อรับค่าคำตอบที่ได้จาก Function เหล่านั้นแล้วก็จะแปลงให้อยู่ในรูปแบบที่เหมาะสมและ Return ค่ากลับไปยัง MainFunction()

3.menu_recormentation()

ส่วน Function นี้ก็เป็นตามชื่อ เลยคือเสนอเมนูอาหาร แต่ตอนนี้จะสามารถทำได้แค่เมนูเดียว แต่ในขั้นถัดๆไปเราจะทำให้มันสามารถมีเมนูอาหารหลายๆอย่างได้โดยเรียกเมนูจากฐานข้อมูล Firebase กัน

4.BMI_calculation()

Function นี้ที่นำมาเป็น Tutorial เนื่องจากเป็นตัวอย่างในการดึงข้อมูลที่เป็น Action and parameters ใน Dailogflow เพื่อมาทำการคำนวณต่อ ซึงก็เหมือนชื่อของมันเองคือเราจะทำการคำนวนหาค่า BMI แล้วนำไปเทียบว่า เรามีความอ้วน-ผอมอยู่ ในช่วงใดนั่นเอง

12. สร้างฐานข้อมูล Firebase กัน

ก่อนอื่นเข้าไปที่ลิ้งนี้ Login ให้เรียบร้อย

Firebase

คลิก GO TO CONSOLE

จะปรากฏหน้านี้ขึ้นมา ให้คลิก เพิ่มโครงการ

ใส่ชื่อโครงการได้เลย แล้วกด สร้างโครงการ

คลิกตรงเมนู Database

คลิก สร้างฐานข้อมูล (ให้สร้างเป็น ฐานข้อมูลแบบ Firestore เท่านั้น)

คลิก เปิดใช้

คลิก เพิ่มคอลเล็กชั้น

รหัสคอลเล็กชั่น ให้ใส่เป็น Food กด ถัดไป

ใส่รหัสเอกสารเป็น “Menu_List” ส่วนเมนูอาหารให้ใส่ตามด้านล่างแล้ว กด บันทึก

จะได้หน้าตาแบบนี้ คือ

ตอนนี้เราก็มีฐานข้อมูลที่พร้อม เดียวเราจะมาเชื่อมฐานข้อมูลนี้กับ โค้ดของเรากันละในตอนหน้า