Line chat bot x Firebase (Part 2 : Web-hook, Messaging Api and firebase cloud functions)

สำหรับคนที่เข้ามาใหม่ใน part นี้เเล้วยังไม่รู้ว่าอะไรคือ line bot จะไปเริ่มต้นตรงไหน จะทำอะไรก่อนดี ผมแนะนำให้เข้าไปดู part 1 ตาม link ข้างล่างนี่เลยครับบ

Line chat bot x Firebase (Part 1 : Overview แบบยังไม่โค๊ด)

สำหรับคนที่ผ่าน part 1 มาเเล้วหรือพอมีพื้นฐานอยู่บ้าง เราจะมาต่อกันกับ part 2 นะครับสำหรับ part นี้เราจะมาลองกันใส่ส่วนที่ต้องเขียนโค้ด เเต่ก็ไม่ได้ยากแบบที่หลายคนคิดนะครับ ผมจะพยายามไม่ลงลึกมากเอาเเค่ Basic ให้รู้ว่าอะไรทำงานยังไงเเละให้ทุกคนลองเอาไปปรับใช้ดูครับ พูดมากไปก็เสียเวลา เรามาเริ่มกันเลยดีกว่า Let’s gooooooooo

มาเริ่มจากการ Setup project กันก่อนนะครับ โดยผมจะขอข้ามรายละเอียดปลีกย่อยไปก่อนนะครับ ผมพยายามรวบรัดขั้นตอนต่างๆให้เหลือ 5 ขั้นตอนครับจะได้ไปด้วยกันเร็วๆ วันนี้เราจะขอใช้ Node.js กับ firebase cloud functions นะครับ ซึ่งเราจะมาดูกันที่ฝั่ง firebase กันก่อน

Setup

1. สร้าง Firebase project

เข้าไปที่ https://console.firebase.google.com/ อันนี้เป็นหน้า console ของ firebase นะครับ พอเข้ามาเเล้วกดให้กดไปที่ Add project ก็จะเห็นหน้าตาประมาณนี้ ให้ใส่รายละเอียดลงไปเเล้วก็ create project ได้เลยครับ

2. Install Node & NPM

ก่อนที่เราจะสร้าง Node project ได้นั้นเราต้องมี Node และ Npm อยู่ในเครื่องซะก่อนวิธีลงก็มีอยู่ด้วยกันสองเเบบคือ โหลดจากหน้าเว็บ

หรือ จะ install ผ่าน command line ใน terminal ก็ได้ ด้วยคำสั่ง

brew install node

และลองเช็คดูด้วยคำสั่งสองคำสั่งนี้

node --version
npm --version

3. Install firebase cli & Initial Project

หลังจากเรามีทั้ง Node และ Npm ให้เราลง firebase cli ต่อเลยเพราะเราจะได้ใช้มันอีกเยอะเลยเเหละครับ วิธีลงก็ไม่ยาก ใช้คำสั่ง

npm install -g firebase-tools

และลองเช็คดูด้วยคำสั่งนี้

firebase --version

หลังจากนี้ให้เรา login firebase ด้วยคำสั่งด้านล่างเเละ login ด้วย email เเละ password ของ email ที่เข้า firebase console นั่นเเหละครับ

firebase login

ต่อมาเราจะเริ่มทำการ init project กันเลยนะครับ เริ่มจากหา workspace ของเราก่อนว่าอยากเอาไปไว้ที่ไหนก็เลือกได้เลยตามสะดวก ตัวอย่าง

cd Workspace/line-chatbot

เมื่อเข้ามาใน line-chatbot directory เเล้วก็ใช้ firebase command สร้าง functions ตามนี้เลยครับ

firebase init functions

หลังจาก พิมพ์คำสั่งนี้ลงไปก็จะเห็นหน้าตา terminal ประมาณนี้ครับ

ให้ทำการเลือก default firebase project ในที่นี้ให้เลือก firebase ที่เราพึ่งสร้างไปนะครับ (Line-chat) ส่วนต่อมาก็จะเป็นส่วนที่ให้เลือกว่าจะใช้ภาษาอะไร JavaScript/TypeScript ให้เลือก “JavaScript” เเละจะลง ESLisnt ไหม ส่วนสุดท้ายก็คือจะให้ลง dependencies เลยไหม ก็กด “yes”

3. Deploy “Hello world” function

หลังจากเรา init project เป็นที่เรียบร้อยเเล้วเราก็จะเห็นหน้าตา directory ประมาณนี้นะครับ

ให้เราเข้ามาที่ functions/index.js และเพิ่ม function helloWorld ตามนี้นะครับ เพื่อเช็คว่า firebase function ของเราใช้งานได้เเล้ว

หลังจากนั้นให้เปิด terminal ขึ้นมาเเละพิมคำสั่ง

firebase deploy --only functions

คำสั่งนี้เอาไว้ใช้เพื่อ deploy functions ทั้งหมดนะครับ หรือถ้าอยากจะ deploy เเต่ function ที่ต้องการให้ใช้คำสั่ง

firebase deploy --only functions:helloWorld

หลังจาก deploy function ไปเเล้วนะครับให้เราเข้าไปที่ firebase console ว่า function ที่เรา deploy ไปเนี่ย ได้เรื่องไหมนะครับ ถ้าเข้ามาเเล้วนะครับ ให้ดูที่เเถบ Develop เเล้วเข้ามาที่ Functions เราก็จะเห็น helloWorld Functions อยู่ก็ลองเอา ลิงก์ที่อยู่ไป Call ดูสิ๊ว่าจะเป็นยังไง

https://us-central1-line-chat-918b1.cloudfunctions.net/helloWorld

จากคำสั่งก็ได้ออกมาก็จะหน้าตาแบบนี้นะครับ

เรียบร้อยเเล้วครับสำหรับ การ setup เเละ init project ของเรา ต่อมาเราจะทำการต่อ firebase cloud functions กับ line webhook เเล้วนะครับเเต่ก่อนที่จะเริ่มอะไรให้เราเปลี่ยน response ใน function ให้เป็น response.sendStatus(200) ก่อนนะครับเอาไว้สำหรับ verify กับ line web-hook

ตั้งค่า Web-hook

การตั้งค่า line ให้รับ web-hook เป็น message api ให้เราเข้าไปที่ line developer console ก่อนนะครับ พอเข้ามาเเล้วให้ลงมาที่ Messaging settings นะครับ เเล้วใช้กด Issue ตรงช่อง Channel access token เเละ enabled ตรงช่อง use web-hook หลังจากนั้น ให้เราเอา url ของ firebase มาใส่เเละกด verify ครับผมเท่านี้เราก็จะได้ webhook ของ bot เราเเล้วหละครับ

หลังจากตั้งค่า line web-hook เสร็จเเล้ว เราจะมาเริ่มการรับ text หรือข้อความที่มาจาก line ที่ user ส่งมาใน chat bot นะครับซึ่ง message ที่ส่งมานั้นมี reply-token, message, event-messsage และอื่นๆอีกมากมาย ถ้าใครอยากรู้ว่ามีอะไรบ้างก็ให้ตามไปดูที่ document ของ line ได้เลยนะครับ ส่วนเรื่องเราจะรับ message ยังไงนั้นผมก็ได้เขียนตัวอย่างไว้ให้ตามนี้เลยครับ

เเละสามารถไปดู message ได้จาก console.log ออกมาเเละเข้าไปที่ firebase console view log

พอกดเข้าไปดูเเล้วก็จะเห็น message ที่เรา console.log เอาไว้

เเละบรรทัดที่สองที่เห็นก็ไม่ต้องเเปลกใจนะครับ เพราะว่า firebase cloud functions นั้นถ้าอยากให้ส่ง request ออกไปยัง endpoint อื่นนั้นต้องเสียเงินให้ firebase นั้นเองครับ สำหรับ priceing plan ของ firebase ก็จะประมาณนี้ครับ

ต่อมาจะเป็นส่วนของการ reply message กลับไปหา user นะครับ

ที่เห็นจากด้านบนจะรับ reply token มานะครับ เเล้วส่งต่อไปยัง sendMessage function โดยส่งคำว่า “Hello World” ไปด้วย

function นี้หลักๆก็จะเป็นเรื่องการยิง request ไปหา line โดยใช้ url: https://api.line.me/v2/bot/message/reply ยิง post ส่วน header ก็จะได้มาจาก Channel access token ที่เราไปกด Issue ไว้ตอนเเรกนั้นเองครับก็จะหน้าตาประมาณนี้

เรามาลองส่งคำไปหา line bot ดูนะครับ

นี่เป็นการ reply message ไปยัง line bot ของเรานะครับ เเต่สำหรับ logic ว่าจะให้ line รับ message type text จะให้ reply ไปว่ายังไง ถ้าเป็น Sticker จะให้ reply ว่ายังไง ส่วน reply meessage ที่ line มีมาให้ก็มีหลากหลายแบบไปเช่นกัน เช่น reply message, Image, Sticker, Template, Flex เเละอีกมากมายตาม link ด้านล่างนี้เลยนะครับ

https://developers.line.me/en/reference/messaging-api/#message-objects

ก็จบไปเเล้วนะครับ สำหรับ Part2 ของการสร้าง Messageing api กับ webhook พร้อม deploy ไปยัง firebase สำหรับ บริษัท I GEAR GEEK ก็ได้เอา line chat bot ที่เขียนใน blog นี้ไปใช้กับ product จริงๆ ด้วยนะครับ ซึ่งก็ได้ใช้ reply message หลากหลายรูปแบบที่ line ให้มา ซึ่งก็เจอปัญหาบ้างเเต่ก็ผ่านมันมาได้ด้วยดีซึ่งผมก็ได้ tips ดีๆมาด้วยซึ่งผมจะเอามาเเชร์ให้กับทุกๆคนใน blog ต่อไปนะครับ เเละสำหรับ blog นี้ผมคงต้องขอตัวลาไปก่อน สำหรับวันนี้…. สวัสดีครับบบบ