[USECASE] มาคุยผ่านบอท สองภาษา กับ Dialogflow ด้วย เทคนิคการดึง Language จาก User Profile มาใช้งาน

สวัสดีครับทุกท่าน จากการพัฒนา LINE Chatbot ทุกท่านคงเริ่มที่จะสร้างความหลากหลายให้กับ Chatbot ของท่าน ทำให้ฉลาดขึ้นก็ดี ทำให้สามารถแยกแยะผู้ใช้งานได้ก็ดี ในบทความนี้ ก็เป็น ตัวอย่างการประยุกต์ใช้ ที่จะทำให้ Chatbot ของเพื่อนๆ มีมิติมากขึ้นนั้นก็คือ แยกภาษา การโต้ตอบ แยกสองภาษา Thai และ English ด้วยการที่จะใช้ร่วมกับ API Get User Profile ซึ่งจะมี Object ตัวหนึ่งที่ชื่อ “language” ที่จะมาคัดการโต้ตอบกับผู้ใช้งาน Chatbot ของเพื่อนๆ ออกมาเป็น ภาษาของผู้ใช้งานเอง

และในบทความนี้เราจะมีของแถมสุดแจ่มที่จะช่วยชีวิตให้ เราได้หายใจสะดวกมากขึ้นลุยกันเลย (/ ^o^)/

มาเตรียมของเราให้ครบดังนี้

1. สร้าง LINE Provider และ Channel Messaging API
2. API GET User Profile
3. Dialogflow (2 Agent)

หมายเหตุ ในบทความนี้ผมจะใช้ภาษา Java Script และ Code ภาพรวมช่วงท้ายบทความครับ

1. สร้าง LINE Provider และ Channel Messaging API

สำหรับท่านที่กำลังจะเริ่มพัฒนาทาง LINE Community ก็มีหลายบทความที่ท่านจะได้เริ่มต้น แต่สำหรับผม แนะนำ บทความที่ดีที่สุดด้านล่างนี้ครับ

ปฐมบทการสร้าง LINE Bot

หรือสามารถอ่านบทความทั้งหมดของ LINE DEV ได้ที่

LINE Developers Thailand

มาถึงตรงนี้เพื่อนๆ คงมีบอทที่ไม่ใช่บอทกันเรียบร้อยแล้วใช่มั้ยครับ ?

2. API GET User Profile

หลังจากที่มีการสร้าง LINE Chat Bot ของเราแล้วเพื่อนๆ ก็จะได้เริ่มต้นใช้ Messaging API ในโลกของ LINE Developer กันได้แล้ว แต่ในบทความนี้ผมจะพูด API ที่พิเศษสำหรับผมมากๆ คือ การดึงข้อมูล Profile ของผู้ใช้ LINE ที่ ADD Friend มาได้ครับ

ตัวอย่าง API

https://api.line.me/v2/bot/profile/{LINE ID}

ซึ่งการ Get Profile นี้เราจะได้ Property Object ต่อไปนี้

• userId: ID ของผู้ใช้(สำหรับระบบหลังบ้าน)
• displayName: ชื่อของผู้ใช้
• statusMessage: ข้อความของผู้ใช้
• pictureUrl: รูปของผู้ใช้
• language: ภาษาของผู้ใช้ <<< คือที่เราจะใช้กัน
• email: อีเมลของผู้ใช้(เฉพาะ LIFF v2 และ LINE Login)

ซึ่งถ้าเพื่อนๆ ทุกท่านอยากรู้ลึกรู้จริงแบบละเอียดกว่าเม็ดทรายแนะนำบทความนี้เลย

รู้ครบจบในที่เดียวกับการดึง User Profile ผ่าน API ต่างๆใน LINE

รับรองว่าอ่านจบเรียบร้อยจะได้ทุกท่า ตีลังกา กลับหน้ากลับหลังกันเลยครับ แต่เรามาต่อของเรากันก่อน เมื่อได้ API มาแล้วเราก็ลองทดสอบสักหน่อยด้วย POSTMAN

POSTMAN — GET User Profile

ถ้ามาถึงตรงนี้แล้ว แปลว่าท่านเริ่ม อ๋อ กันแล้ว ตรงเราจะได้ตัว “language” นั้นเอง

*เพิ่มเติม Language ตรงนี้สามารถเปลี่ยนแปลงได้ ทั้ง PC และ Mobile

เปลี่ยนภาษา ผ่าน PC

เปลี่ยนภาษา Mobile

จากตรงนี้ไปเพื่อนๆ ก็จะได้ Chatbot และ API Get User Profile ที่จะเอาไป Dev กันต่อแล้วใช่มั้ยครับ คราวนี้ผมจะเอาไปประยุกต์กับ Chatbot ซึ่งเงื่อนไขของผมดังนี้

หมายเหตุ ขั้นตอนนี้เป็นตัวอย่างการใช้ เพื่อต่อยอด

*อย่าลืมแก้ xxxx- > Access Token

จะได้ดังภาพนี้ครับ

ซึ่งวิธีการนี้เพื่อเป็นการพิสูจน์ว่าในการพิมพ์หรือแชทใดๆ ต่อไปนี้เราก็สามารถ GET Profile เพื่อมาตรวจสอบหรือมาแสดงผลอื่นๆได้แล้วนั้นเองครับ

ในขั้นตอนต่อไปนี้ขอให้เพื่อนๆ พัก Chatbot ของเราก่อนเรามาสร้าง Dialogflow กันสักหน่อย

3.สร้าง Dialogflow 2 Agent

เชื่อว่า เพื่อนๆ หลายๆ ท่านที่พัฒนา LINE Chatbot มาสักระยะแล้วจะรู้จักเครื่องมือ AI Chatbot ที่จะมาช่วยเรื่องของ NLP (Natural Language Processing) อย่าง Dialogflow แน่นอนเลยหรือถ้าใครที่กำลังจะเริ่มที่บทความนี้แหละ ขอให้เพื่อนได้เริ่มเรียนจากด้านล่างนี้ได้เลย ที่สำคัญ ฟรี โดย Jirawatee ซึ่ง Course นี้ skooldio จัดมาให้เราแล้ว และยังมี ทักษะอื่นๆในเว็ปนี้อีกโคตรเยอะครับ แนะนำเลย

Building LINE Chatbot Using Dialogflow

เนื่องจาก โจทย์ต่อไปนี้เราจะให้ Bot ของเราโต้ตอบได้สองภาษา เราต้องสร้าง Agent ของเราสองอันให้โต้ตอบกันคนละภาษา

หมายเหตุ ส่วนตัวการแยก Agent เป็นวิธีหนึ่งที่ผมคิดเห็นว่า จัดการได้ดีกว่าครับเผื่อ ทีมเรา ทำฝั่ง EN หรือ อีกทีมฝั่ง TH แต่ล้วนแล้วแต่ความสะดวก

หมายเหตุสอง ผมทำรวมกันไม่เป็นด้วยนั้นเองครับ 5555+ ใครมีวิธี เขียนส่งมาได้เลยนะครับ

Agent ที่หนึ่งจะประกอบด้วยดังนี้

• NAME : LINE_DEMO_LANG_TH
• DEFAULT LANGUAGE : Thai — th

Agent ที่สองจะประกอบด้วยดังนี้

• NAME : LINE_DEMO_LANG_EN
• DEFAULT LANGUAGE : English — en

เมื่อท่านสร้างมาแล้วก็สามารถตรวจสอบที่เมนูด้านซ้ายจะพบกับ Agent ที่ท่านสร้างขึ้น

ขั้นตอนต่อมาก็เป็นการ “Integrations” เพื่อเชื่อมต่อกับ LINE นั้นเองครับ

Integrations

เมื่อเปิดขึ้นมาท่านต้องเตรียม 3 สิ่งต่อไปนี้ครับ

1. Channel ID
2. Channel Secret
3. Channel Access Token

ซึ่งทั้งสามสิ่งนี้สามารถหาได้จาก LINE Developer Console -> Messaging API ของเราได้นั้นเอง

เมื่อกรอกครบแล้วให้กด “Start” และให้ทำวิธีเดียวกันทั้งสอง Agent เลยนะครับ

เมื่อกรอกครบเรียบร้อยแล้วให้เพื่อน เก็บ Webhook URL ไว้ใน Note หรือไว้ไหนก็ได้ที่สะดวกเก็บนะครับ ก็จะจบขั้นตอนไปยุ่งเกี่ยวกับ Dialogflow แล้วครับ

โจทย์

1. ให้นำภาษาที่ได้จาก GET User Profile ขณะแชท มาแยกว่าภาษาของผู้ใช้งานเป็น ภาษาของผู้ใช้งาน
2. เชื่อมต่อ Dialogflow และ Forward ไปตาม Agent ที่แยกสองภาษา
3. ของแถมสุดพิเศษ มาทำให้การ GET API User Profile เร็วขึ้นด้วย Redis

จากข้อแรก และ ข้อสองนี้ ผมจะทำแบบเร็วๆ ได้ Code นี้ครับ

*อย่าลืมแก้ xxxx- > Access Token

อธิบาย Code นิดหนึ่งครับ

1. Function Chatbot รับ Text Event ใดๆ ก็ได้เพื่อส่งไป function : reply
2. Function Reply เอามาตรวจสอบก่อนว่าเป็น ภาษาของผู้ใช้งานเป็นอะไรและค่อยส่งต่อไป function : dialogFlow
3. function : dialogFlow ตรวจสอบว่าเป็นภาษาอะไรก็ Foward ไปตาม Agent นั้นๆ โดยทำการเชื่อมต่อกับ Dialogflow ID ซึ่งจะมาจาก Webhook URL ตอนเรา เชื่อมต่อนั้นเองครับ

มาถึงตรงนี้แล้ว ทุกคนก็ใช้ได้แล้วใช่มั้ยครับ

แต่เดี๋ยวก่อน…..ถ้ามันเล่นเชคทุกครั้งมันจะช้าใช่มั้ย

เรื่องนี้ผมก็ได้รับคำปรึกษาจากอาจารย์หนึ่ง Sitthi Thiammekha ว่าจัดใส่ redis เลยครับจะได้เก็บข้อมูลใน cache แทนไม่ต้องเชคใหม่ทุกรอบเร็วแน่นวล ก็จัดไปครับ

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

Devahoy | มาลองทำ Caching ด้วย Node.js และ Redis กันดีกว่า

สรุปตรงนี้สั้นๆว่า เจ้า redis นี้มันก็คือ Database ประเภทหนึ่งนั้นเองแต่มันเป็นการเก็บข้อมูลเข้า Memory RAM ครับ ซึ่งจะเก็บแบบ Key Value (NoSQL) ซึ่งตามชื่อการเก็บแบบ In memory แน่นอนว่ามันไม่อยู่ถาวร มันเก็บเหมือน RAM ปิดเปิดใหม่ก็หายครับ ซึ่ง มันก็แปลกๆใช่มะ เกิดหายไปทำไงดี

แต่อย่างกรณีนี้มันก็ตอบโจทย์เลยนะ เก็บสั้นๆ เอามาทำเป็น Caching นั้นแหละครับจบมาต่อกันครับ

ประกอบร่าง

เมื่อท่านทำตามขั้นตอนใน ลิ้งค์ด้านบนแล้ว ก็จะได้ Code หน้าตาประมาณนี้

อธิบาย Code กันสักนิดครับ

จาก Code นี้จุดที่เราเพิ่มเข้ามาคือเอา Lib redis มาใช้โดยการเพิ่มส่วน import เข้าไป

const redis = require('redis')
const redisClient = redis.createClient()

ซึ่งส่วน redisClient เพื่อนๆก็จะใช้คำสั่ง SET GET SETEX ได้แล้วครับ

redisClient.set('key', 'value')
redisClient.get('key')
// set แบบ expire time
// 360 วิ
redisClient.setex('key', 360, 'value')

โดยผมจะยกตัวอย่างมาที่ function : reply

1. ผมจะเริ่มจากตรวจสอบก่อนว่า มี key นี้เก็บไว้ใน redis หรือยังโดยผมจะใช้ req.body.events[0].source.userId // กำหนดเป็น key
2. จะเห็นว่า redisClient.get() ที่ผมใช้เป็น callback function นะครับ

3. ถ้ามีก็เอาข้อมูลจาก Key นั้นส่งค่าไปเลยไม่ต้องไป GET API แล้ว (เร็วแน่นวล)

4. ถ้าไม่มีก็ไป GET มาก่อนเลยครับ โดยกำหนด key value ยัดใส่ redisClient.setex(key,expire time,value) แบบนี้ครับ

5.ยัด Object language ที่ได้จาก GET User Profile เข้าไปโลดและให้ส่งไปที่ function : dialogFlow

เราก็ได้จะได้แบบนี้ครับ

เรียบร้อยแล้ว….. ( -3-) ที่นี้เพื่อนๆก็จะได้บอทสองสัญชาติเท่ๆไปใช้งาน

บทความนี้ท่านก็จะได้สร้างมิติการคุยแชทบอทแบบสองภาษา แถมยังได้เทคนิคการจัดการ Performance แบบเท่ๆอย่าง redis ไปใช้ด้วยครับ

หวังเป็นอย่างยิ่งว่าจะทำให้เพื่อนๆได้นำไปต่อยอด ประยุกต์และพัฒนา LINE Chatbot ให้ดีมากยิ่งขึ้นครับขอให้สนุกกับการพัฒนาระบบและค่อยพบกันใหม่บทความหน้าครับ

ขอบคุณครับ