มาดึงข่าวจาก Facebook ให้อยู่บน LINE Chatbot ด้วย Messaging API

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

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

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

LINE Developers Thailand

อาจจะตกใจนิดนึงครับ ถ้าอ่านไปสักพัก…นึกว่าเป็นบทความเกี่ยวกับ Facebook DEV
แต่เมื่อท่านลองอ่านจนจบ. ท่านจะร้องงอ๋ออออออ….

ทุกท่านที่ผ่านไปผ่านมาในวงการ Marketing ก็ดี หรือ Developer ก็ดี ซึ่งในแต่ละวันก็มีการนำเสนอ ข่าวสารของ หน่วยงานตัวเองหรือบริษัท องค์กร ร้านค้า ผ่าน social platform ที่อ่านได้กันฟรีๆ คงไม่พ้น Facebook และ อย่างองค์กรที่มีทุนทรัพย์พร้อม ก็จะลุยตลาดอื่นๆ อย่าง LINE

ซึ่งในมุมมองของทีมการตลาด การที่โฆษณาข่าวสารที่จะมาจาก Facebook ไป Broadcast บน LINE ต้องมีค่าใช้จ่ายกันแน่นอน และคงหนีไม่พ้นเสียเงิน Package ของ LINE

จนวันนึงทีมก็ได้อยาก เชื่อมสองโลกนี้ เข้าด้วยกันจนได้

“อยากให้ข่าวที่ หน่วยงาน หรือองค์กร Post ใน Facebook มาอยู่ใน LINE ด้วยได้มั้ย

แล้วจะเสียเงินมั้ยครับ ”

LINE DEV อย่างเราต้องตอบว่า

ได้ครับพี่!!!! ดีครับผมมมม!!! ไม่เสียเงินด้วยครับบบ!!!

สิ่งที่ต้องเตรียมตัวที่จะเกิดขึ้นหลังจากนี้เรา ใช้อะไรบ้าง ตามนี้เลย

1. สร้าง Application Facebook Developer
2. สร้าง Facebook Fanpage ของตัวเอง (ผมมีร้านขายขนมอยู่แล้ว 555+)
3. ติดตั้งโปรแกรม POSTMAN สำหรับทดสอบ
4. สร้าง LINE Provider และ Channel Messaging API
5. ติดตั้ง Cloud Functions for Firebase (บทความนี้จะมีเฉลยไม่ผูกบัตร)
6. ติดตั้ง ngrok

1.สร้าง Application Facebook Developer

ยินดีต้อนรับโลกอีกใบกับชาว Facebook Developer ซึ่งแน่นอน เขาก็มี Messaging API หรือ API ต่างๆให้เราได้ใช้งานกันแบบจุกๆ

Facebook for Developers

เมื่อเปิดเข้ามาแล้วจาก URL นี้ จะได้พบหน้าบ้านสุดน่ารักของชาว Facebook Developer

• เปิดหน้า Facebook Developer
• คลิกที่ “แอพของฉัน” มุมขวาบน

• จะพบกับหน้าให้สร้าง Channel Application
• ไม่รอช้าคลิกปุ่ม “สร้างแอพ”

• เลือก “จัดการการผสานรวมธุรกิจ”
• คลิกปุ่ม “ดำเนินการต่อ”

• ตั้งชื่อ “ LINEDEV ” การตั้งชื่อมีเงื่อนไขว่าห้ามมีคำว่า Facebook เด็ดขาด
• เลือก “ตัวคุณเองหรือธุรกิจของคุณเอง”
• ให้เลือก Facebook Fanpage ของท่าน

2. สร้าง Facebook Fanpage ของตัวเอง

• ตรวจสอบให้แน่ใจว่า เป็น Page ที่ตั้งใจจะใช้หรือไม่ ถ้าเลือกผิด สามารถกลับมาสร้าง แอพ ใหม่ได้

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

เมื่อสร้างเสร็จแล้วท่านจะเห็น Product ของเขามากมายซึ่งถ้าใคร อยากจัดหนักจัดเต็ม ไปอัดกันได้กันว่าแต่ละกันคืออะไรได้ ที่นี่

• คลิกที่เมนู “เครื่องมือ -> Graph API Explorer”
• อยากรู้จัก Graph API Explorer มากขึ้นคลิก

• มุมขวาจะเป็นส่วนสำคัญมากๆคือการสร้าง Access Token ครับ ก็ให้ท่านทำการคลิก “Generate Access Token”
• ไปที่เมนูสิทธิ์ “เพิ่มสิทธิ์การอนุญาต” ซึ่งแต่ละสิทธิ์ทำอะไรได้บ้าง สามารถอ่านได้ที่นี่

ตรง endpoint ให้ท่านนำชื่อของ Fanpage ท่านมาใส่ และใส่ parameter ตัวอย่างนี้

 pandpancake/feed?fields=picture,message

package คือ ใส่ชื่อ Page หรือ ID ของเรา

/feed. คือ แสดงหน้า Feed ของ Page ซึ่งยังมี Param เช่น Posts , albums เป็นต้น

?fields= คือ ต้องการให้แสดง Property Object อะไรบ้าง

• กรอกข้อมูลครบแล้วให้กด “ส่ง” เพื่อดูผลลัพธ์ ก็จะได้แบบด้านล่างนี้
• ซึ่งท่านสามารถเลือกเพิ่มเติมได้ที่มุมซ้าย.

แนะนำถ้าต้องการรายละเอียดไปถึงระดับ Insight สามารถเลือกเพิ่มเติมได้ อาทิเช่น Like, Click อื่นๆ เป็นต้น

ให้ท่านทำการเลื่อนลงมาด้านล่างเพื่อมาเอา endpoint api ที่ next

• Data : นี่คืออ็อบเจ็กต์ที่แสดงตามกำหนดที่ limit ไว้
• before : นี่คือเคอร์เซอร์ที่ชี้ไปยังจุดเริ่มต้นของเพจของข้อมูลที่ถูกส่งกลับ
• after : นี่คือเคอร์เซอร์ที่ชี้ไปยังจุดสุดท้ายของเพจของข้อมูลที่ถูกส่งกลับ
• limit : จำนวนอ็อบเจ็กต์สูงสุดที่อาจถูกส่งกลับ การสืบค้นอาจส่งกลับค่าที่น้อยกว่า limit เนื่องจากการกรอง อย่าหวังให้จำนวนผลลัพธ์ที่น้อยกว่าค่า limit เป็นตัวระบุว่าการสืบค้นของคุณถึงปลายรายการข้อมูลแล้ว ให้ใช้การไม่มีของ next แทน ตามที่ระบุไว้ด้านล่าง ตัวอย่างเช่น หากตั้งค่า limit ไว้ที่ 10 และคุณได้ผลลัพธ์ 9 รายการ อาจมีข้อมูลมากกว่าที่แสดงแต่ระบบได้ลบรายการหนึ่งรายการออกเนื่องจากการกรองความเป็นส่วนตัว จุดเชื่อมโยงบางจุดเชื่อมโยงยังอาจมีค่าสูงสุดของ limit ด้วยเหตุผลด้านประสิทธิภาพการทำงาน API จะส่งกลับลิงก์การแบ่งหน้าที่ถูกต้องในทุกกรณี
• next : ตำแหน่งข้อมูลของ API กราฟที่จะส่งกลับหน้าถัดไปของข้อมูล หากไม่ระบุ นี่จะเป็นหน้าสุดท้ายของข้อมูล เนื่องจากวิธีการแบ่งหน้าทำงานร่วมกับการมองเห็นและความเป็นส่วนตัว จึงเป็นไปได้ว่าเพจอาจว่างเปล่าแต่มีลิงก์การแบ่งหน้า next หยุดการแบ่งหน้าเมื่อลิงก์ next ไม่ปรากฏขึ้นอีก
• previous : ตำแหน่งข้อมูลของ API กราฟที่จะส่งกลับหน้าก่อนหน้านี้ของข้อมูล หากไม่ระบุ นี่จะเป็นหน้าแรกของข้อมูล
• อ่านเพิ่มเติมได้ ที่นี่

• ลองเปิดโปรแกรม POSTMAN แล้ว Copy endpoint
• Method GET

ส่วนของ Parameter ให้กำหนดตามนี้

1. limit : 1 (แสดงรายการเดียว หรือท่านอย่างแสดงเพิ่มก็ได้ครับ)
2. params : after เปลี่ยนเป็น before
3. Copy Token Before. มาวางไว้ที่ Value
4. คลิกปุ่ม “Send” จะแสดงดังรูปด้านล่าง นั้นนเองงงงง ข้อความอยู่ที่ Prop data array[0] โดยมีที่เราเลือก property picture,message,id

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

สำหรับใครที่ยังไม่เคยสร้าง Provider และ Channel มาก่อน แนะนำให้อ่านบทความปฐมบทด้านล่างนี้ แต่ถ้าใครเคยละ ให้ข้ามไปข้อ 5 ได้เลย

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

5. ติดตั้ง Cloud Functions for Firebase

สร้าง Project ขึ้นมาดังรูปและหลังจากนี้เราจะเริ่มเฉลย เรื่องไม่ผูกบัตร แต่ก็ใช้ได้ทำอย่างไร

เพิ่มเติม สำหรับใครที่ยังไม่เคยสร้าง LINE Chatbot Cloud Functions For Firebase สามารถอ่านได้ที่บทความนี้ครับ

สร้าง LINE Bot ด้วย Messaging API และ Cloud Functions for Firebase

จากนั้นสร้าง directory ว่างๆมาสักอัน(ตัวอย่าง directory ผมชื่อ facebook_line_chatbot_demo) แล้วให้ shell เข้าไปในนั้นซะ

mkdir facebook_line_chatbot_demo
cd facebook_line_chatbot_demo

จากนั้นให้ท่านเริ่มตามนี้

firebase init
-> Functions: Configure and deploy Cloud Functions, 
-> Emulators: Set up local emulators for Firebase features

ส่วนของภาษานั้นผมเลือกเป็น Javascript และหลังจากนั้นก็ Enter ไปเรื่อยๆจนถึงส่วนของ Emulator

ส่วนของ Firebase Emulator จะเป็นดังภาพด้านล่างนี้

port : 5001

เมื่อติดตั้งเสร็จแล้วให้ทำการ shell ไปที่ directory ชื่อ functions และให้ทำการ การอัพเดททั้ง Firebase CLI และ firebase-functions SDK

npm install firebase-functions@latest firebase-admin@latest --save
npm install -g firebase-tools

ให้พักไว้ก่อนส่วนี้และท่านติดตั้งโปรแกรมในข้อที่ 6

6. ติดตั้ง ngrok

หลังจากนี้ให้ทำตามขั้นตอนดังนี้

• เปิด Terminal 2 อัน (Window CMD)
• 1. RUN Firebase Emulator
• 2. RUN Ngrok

RUN Firebase Emulator

cd functions
firebase emulators:start

จะแสดงดังนี้

• http://localhost:5001/facebook-line-chatbot-demo/us-central1/helloWorld. (Function helloWorld)
• http://localhost:4004/functions (สำหรับดู Log ผ่าน GUI ของ Firebase Emulator Suite)

RUN Ngrok

./ngrok http 5001 

หมายเหตุ port ต้องตรงกับ Firebase Emulator

ท่านจะได้รับ (https) -> https://c7d71d004d61.ngrok.io ที่ได้ทำการ Forwarding มาที่ Localhost:5001

ให้ทำขั้นตอนต่อไปนี้

1. ให้ทำการเอา https://c7d71d004d61.ngrok.io ที่ได้จาก ngrok มาแทน localhost:5001 จะได้ในแบบข้อ 2
2. https://c7d71d004d61.ngrok.io/facebook-line-chatbot-demo/us-central1/helloWorld

• Copy Code Chat bot ด้านล่างนี้ แล้วให้ทำการเปลี่ยน สองจุด
• 1. xxxx -> Access Token ของ LINE Messaging API
• 2.yyyy -> endpoint ที่ได้จาก Facebook Developer หรือให้เอาจาก POSTMAN ที่เราทำเมื่อสักครู่
• ส่วนของ Code จะเป็น Reply เมื่อพิมพ์คำว่า “ข่าว”

หมายเหตุ
- ถ้าท่านพบ error axios ให้ทำการ

npm install axios

เมื่อส่วนผสมลงตัวแล้ว ท่านจะได้

• https://c7d71d004d61.ngrok.io/facebook-line-chatbot-demo/us-central1/Chatbot
• นำ endpoint นี้ไปแก้ใน Webhook แล้วลองดูได้เลยยยท่านจะได้ Object เต็มๆ มาเพื่อให้ชาว LINE DEV ไปต่อยอดกันได้เลยครับ

Raw Object

ตัวอย่างตกแต่งเพิ่มความคูล ให้ข้อความของเราโดยการใช้ Flex Message

• แก้ function push ได้ตามนี้

จะได้ผลลัพธ์สวยๆตามนี้เลยครับ

Flex Message

บทความนี้ท่านจะได้คำตอบว่าถ้ามีโลกสองใบอย่าง Facebook และ LINE เราจะมาพบรักกันได้หรือไม่นะครับ

หวังเป็นอย่างยิ่งที่จะให้ Developer ได้สนุกและต่อยอดสร้างสรรค์ผลงานกันนะครับ

ขอบคุณครับ