🤖สร้าง Line Chatbot ด้วย Dialogflow, Python, และ Firebase🔥🔥🔥 ง่ายมากๆ!!!

Witchapong Daroontham
DATAWIZ
Published in
5 min readNov 27, 2018

ทำไมต้อง Line Chatbot?

ใครที่ทำงาน หรือทำ project เกี่ยวกับด้าน data science แล้วบางครั้งอยากเอา model ของตัวเองมาโชว์ หรืออยากจะสร้าง data product แต่ก็เขียน web ไม่เก่ง หรือ เขียน application ไม่เก่งบ้าง? ลองมาเกาะกับ plotform ของไลน์ แล้วสร้าง application ของเราด้วย Line Chatbot โดยใช้ line account เป็น UI ของ application ก็น่าจะเป็นทางเลือกหนึ่งที่มีข้อดี คือ อยู่บน platform ที่เป็นที่นิยมของคนไทย วันๆนึงโดยเฉลี่ยแต่ละคน ต้องเช็คไลน์มากกว่าวันละ 2–3 ครั้งอยู่แล้ว… วันนี้เรา pin chat กับเพื่อนคนที่เราสนิท คุยบ่อยๆ ไว้ด้านบน📌 ในอนาคตถ้ามี Line Chatbot ที่สามารถตอบโจทย์บางอย่างของผู้ใช้งาน เราอาจจะเลือก pin มันไว้รวมกับเพื่อนเราก็ได้!

รู้จักกับ Dialogflow

Dialogflow คือ platform สำหรับสร้าง chatbot ของ Google ที่ใช้ machine learning ด้าน Natural Language Processing (NLP) มาช่วยในทำความเข้าใจถึงความต้องการ (intent) และสิ่งที่ต้องการ (entity) ในประโยคสนทนาของผู้ใช้งาน และตอบคำถามตามความต้องการของผู้ใช้งาน ตามกฎ หรือ flow ที่ผู้พัฒนาวางเอาไว้ ซึ่ง Dialogflow จะช่วยเพิ่มความยืดหยุ่นของประโยคที่ chatbot รับมา ว่าไม่จำเป็นต้องตรงตามเงื่อนไข แบบ rule based เป๊ะๆ ก็สามารถเข้าใจถึงความต้องการของผู้ใช้งานได้

เราจะทำอะไรกัน

เราจะสร้าง Line Chatbot ที่สามารถอ่านข้อมูลจาก database และนำข้อมูลมาแสดงผล โดยที่เราจะใช้ Dialogflow มาช่วยในเรื่องการทำความเข้าใจความต้องการของผู้ใช้

ขั้นตอนการทำโดยย่อ

ภาพ 0

หลักการทำงานของ Line Chatbot ที่เราจะสร้าง จะเป็นไปตามภาพ 0 คือ เริ่มต้นจาก chat room ของ Line Chatbot รับข้อความผ่าน messaging API และส่งข้อความที่ได้รับต่อไปยัง Dialogflow ผ่าน webhook จากนั้น Dialogflow จะทำหน้าที่เข้าใจความต้องการ (intent) ที่อยู่ในข้อความที่รับมา และตัดสินใจว่า ความต้องการนั้นคืออะไร โดยใช้ machine learning (classification model) และส่งต่อให้กับ backend server ซึ่งเชื่อมต่อกับ database โดย backend จะทำหน้าที่ตัดสินใจว่าจะทำ action (เช่น ดึงข้อมูลอะไรจาก database มาแสดง) เมื่อได้รับความต้องการที่แตกต่างกันเข้ามา

ขั้นตอนการทำโดยย่อจะตามนี้…

สร้าง project Dialogflow -> สร้าง project Line Chatbot -> เชื่อมต่อ Line Chatbot กับ Dialogflow -> สร้าง Application server ด้วย Flask บน Python และทดสอบเชื่อมต่อ Flask กับ Dialogflow -> สร้าง project Firebase และ เชื่อมต่อ Flask กับ Firebase -> Deploy application ด้วย Heroku (Final)

มาเริ่มทำกันเลย!

  1. สร้างสร้าง project Line Chatbot

เริ่มต้นจาก log in ไปที่ Line Developer (ผมใช้ user เดียวกับ Line ปกติเลย) และสร้าง provider ใหม่ขึ้นมาที่หน้า console ตามภาพ 1

ภาพ 1

เสร็จแล้วก็สร้าง channel ใหม่สำหรับ Messaging API ตามภาพ 2

ภาพ 2

ผมตั้งชื่อ app ตัวเองว่า Mr.Spock… เป็นอันจบขั้นตอนแรก

ภาพ 3

2. สร้าง project DialogFlow

Log in สู่หน้า console ของ Dialogflow และสร้าง agent ใหม่ขึ้นมาตามภาพ 4 โดยที่ผมตั้งชื่อ agent ว่า Mr.Spock เหมือนกับ provider ใน Line

ภาพ 4

หลังจากสร้าง agent ขึ้นมา เราจะสร้าง intent ให้กับ agent ของเรา (กด create intent) เพื่อทำความเข้าใจความต้องการของผู้ใช้งานจากประโยคที่รับเข้ามา… ผมเริ่มจาก intent ง่ายๆ คือ “ถามหนังน่าดู” โดยเราจะให้ประโยคตัวอย่างสำหรับ intent ที่เราสร้างมาตรง Traing phrases ผมใส่ไป 3 ประโยค คือ “แนะนำหนังหน่อย”, “มีหนังอะไรน่าดู?”, “ช่วงนี้มีหนังอะไรน่าดูบ้าง?”

จริงๆ ในแต่ละ intent จะมี parameter ต่างๆ ให้เราใส่พอสมควร… ใครสนใจลองไปศึกษา และมาแบ่งปันกันได้ครับ 😆

ภาพ 5

สำหรับแต่ละ intent ก่อนจะเชื่อมต่อกับ backend server ผ่าน webhook เราต้อง enable การเชื่อมต่อก่อน ตรง Fulfillment ของแต่ละ intent ตามภาพ 6

ภาพ 6

3. เชื่อมต่อ Line Chatbot กับ Dialogflow

ไปที่ console ของ Dialogflow > Integrations > Line แล้วจะมี window ตามภาพ 7 แสดงขึ้นมาให้เราใส่ Channel ID, Channel Secret, Channel Access Token ซึ่งเราจะไปเอาค่าพวกนี้มาจาก Messaging API ใน Line ที่เราสร้างไว้

ค่า Channel ID, Channel Secret สามารถนำมาได้ตรงๆ จาก Messaging API ส่วน Channel Access Token ต้อง issue ออกมาก่อน… หลังจากวางอะไรเสร็จเรียบร้อยให้ copy Webhook URL สำหรับไปวางใน Line Messaging API และ กด START

ภาพ 7

จากนั้นให้ไป enable การใช้ Webhook ใน Line Chatbot ตามภาพ 8 และนำ Webhook URL จาก Dialogflow มาวางที่ Webhook URL ใน Line Messaging API และกด verify ถ้าสามารถเชื่อมต่อกันได้จะขึ้นว่า ✅Success… Voila! ไปต่อได้

ภาพ 8

4. สร้าง Application server ด้วย Flask บน Python และทดสอบเชื่อมต่อ Dialogflow กับ Application server

สำหรับขั้นตอนนี้ เราจะสร้าง application server สำหรับรับข้อความตาม intent “ถามหนังน่าดู” ✅ถ้าประโยคที่ได้รับตรงกับ intent นี้ ให้ตอบกลับไปด้วยประโยค “ได้เลย จัดให้!” และ ❌ถ้าไม่ใช่ ตอบกลับไปด้วยประโยค “ผมไม่เข้าใจ คุณต้องการอะไร”

ผมเลือกใช้ PyCharm สำหรับ IDE ในพาร์ทของ Python เนื่องจากความสะดวกที่ PyCharm จะสร้าง virtual environment ให้แต่ละ project อัตโนมัติ

สำหรับ code Python สิ่งที่ต้องทำความเข้าใจ คือ function processRequest ซึ่งจะทำหน้าที่รับข้อมูลในฟอร์แมต json จาก Dialogflow โดยเราจะดู intent ของข้อความที่เข้ามาด้วยการเข้าไปอ่าน nested key ใน json object ดังนี้

intent = req_dict["queryResult"]["intent"]["displayName"]

สำหรับการตอบกลับผมเขียน function makeWebhookResult ไว้สำหรับตอบกลับข้อความ โดย key ที่เราจะใส่ข้อความลงไปใน json object คือ fulfillmentText

def makeWebhookResult(speech):
return {"fulfillmentText": speech }

เอกสารเกี่ยวกับ format ของ json object ที่ของ Dialogflow สามารถดูได้จากที่นี่

Code 1

แถม!!! ทดสอบเปิด Application server บน local และ เชื่อมต่อกับ Dialogflow (ใครขี้เกียจทดสอบ ข้ามขั้นตอนนี้ไปได้)

เราสามารถทดสอบ server ของเรา ว่าสามารถรันได้โดยไม่มี bug ก่อนจะไป deploy บน Heroku ได้ด้วยการรัน server บนเครื่อง local และสร้าง localtunnel มายังเครื่อง local ด้วย command line (สำหรับ linux & Mac) ตามด้านล่าง

$npm install -g localtunnel
$lt --port 5000
https://heavy-mouse-51.localtunnel.me

จากนั้น run file .py เพื่อเปิด server

$python bot.py 

สุดท้ายนำ url ที่สร้างขึ้นมาด้วย localtunnel + “/webhook” ไปวางไว้ที่ Webhook ฝั่ง Dialogflow ตามภาพ 9 ที่ Fulfillment>Webhook>URL* แล้วกด save

ภาพ 9

ทดสอบโดย add friend กับ Line Chatbot ลองพิมพ์ข้อความแรกไป คือ “อยากดูหนังจัดให้หน่อย” -> chatbot ตอบกลับว่า “ได้เลย จัดให้!” ตามที่เขียนไว้ใน condition ของ intent “ถามหนังน่าดู” ใน code 1… ลองพิมพ์ข้อความสองไป คือ “ทดสอบ” -> chatbot ตอบกลับว่า “ผมไม่เข้าใจ คุณต้องการอะไร” เนื่องจากไม่เข้า condition ของ intent “ถามหนังน่าดู”

ใน terminal ของ Pycharm จะเห็น object json ถูก print ออกมา ในกรณีที่เราต้องการดูว่าเราต้องใช้ key อะไรในการเข้าถึงข้อมูลที่ส่งมาโดย Dialogflow

ทดสอบ application server ผ่าน local tunnel

5. สร้าง project Firebase และเชื่อมต่อกับ Application server

มาสร้าง project Firebase ที่ Firebase console

ภาพ 10

เสร็จแล้วก็มาสร้าง database โดยจะมี Cloud Firestore กับ Realtime Database ให้เลือก ผมเลือกใช้ Cloud Firestore (เป็นตัวใหม่กว่า และยังเป็น version Beta อยู่)… หลังจากสร้าง Cloud Firestore ขึ้นมาให้เพิ่มข้อมูลเข้าไปใน database ผ่าน UI ของเว็บ โดย +Add collection > +Add document > +Add field

การเก็บข้อมูลใน Cloud Firestore จะเป็นลักษณะ unstructure ในรูปแบบของ json object

ภาพ 12

ถัดมาให้ไปสร้าง private key สำหรับทำ authentication มายัง Firebase จาก Application server โดยให้ไปดาวน์โหลด private key ที่เป็นไฟล์ .json ที่ Setting > Service accounts และนำมาวางใน directory เดียวกับ application server

โดยให้เพิ่ม code สำหรับเชื่อมต่อกับ Firestore ดังนี้

import firebase_admin
from firebase_admin import credentials
cred = credentials.Certificate("ใส่ directory ของ private key ตรงนี้")
firebase_admin.initialize_app(cred)

สำหรับการอ่านข้อมูลหนังที่เราสร้างไว้ใน database ในกรณี Dialogflow ได้รับ intent “ถามหนังน่าดู” ให้ตอบ user ด้วยข้อมูล ชื่อหนัง และ วันเข้าฉาย โดยเราจะเพิ่ม code เข้าไปใน condition ที่ intent ตรงกับ “ถามหนังน่าดู” ดังนี้ (ภายใน if intent== “ถามหนังน่าดู”)

doc_ref = db.collection(u'movies').document(u'zuzqMHTmffFOLl0vUhZc')
doc = doc_ref.get().to_dict()

movie_name = doc['movie_name']
rel_date = doc['release_date']
speech = f'ตอนนี้มีเรื่อง {movie_name} เข้าโรงวันที่ {rel_date}'

ตรงนี้อย่าลืมไปแก้ document ID ที่จะถูกกำหนดมาให้ auto โดย Firestore ตอนเรากรอกข้อมูลเข้าไปผ่าน UI หน้าเว็บด้วยนะครับ

เท่านี้เป็นอันเสร็จสิ้นขั้นตอนการเขียน chatbot โดยมี application server เป็น backend เชื่อมต่อกับ database แบบง่ายๆ… สุดท้ายไปต่อกันที่ขั้นตอนการ deploy กันเลย!!!

6. Deploy Application ด้วย Heroku(Final)

มาถึงขั้นตอนสุดท้าย ไม่ยากแล้ว คือ deploy application ขึ้น Heroku… ใครไม่เคยทำ แนะนำทำตามวิธีในบทความ “Line bot กับงูเขียวน้อย (python)~” เลยครับ

หลังจาก deploy application ขึ้น Heroku อย่าลืมมาเปลี่ยน URL ใน Webhook ของ Dialogflow ด้วย

ภาพ 13

เสร็จเรียบร้อยแล้ว Line Chatbot แบบง่ายๆ🤖 ในอนาคต เราสามารถต่อยอดให้ Line Chatbot สามารถตอบคำถามที่ซับซ้อน และมีประโยชน์กับ user เช่น เราอาจจะสร้าง chatbot ที่สามารถพยากรณ์ราคาหุ้น (ถ้ามีคนเชื่อนะ😂😂😂) โดยเอาข้อมูลหุ้นมาวางไว้ใน database และ train model สำหรับพยากรณ์ราคาหุ้น แล้ววางไว้ใน application server เป็นต้น

Full code on Github:

https://github.com/witchapong/lineChatBot

🤙ขอบคุณที่อ่านจนจบครับ ใครมีคำถาม หรือข้อติชมทักมาได้ในเพจ FB Datawiz เลยครับผม

Happy coding!

--

--

Witchapong Daroontham
DATAWIZ

Data scientist at Central Technology Organization — CTO, Bangkok & life long learner