การใช้งาน LINE Front-end Framework (LIFF) ให้กับ Line chat bot ของเรา

 

LIFF อีกหนึ่งบริกการของ Line ที่ทำให้เราสามารถใช้งาน Web app โดยไม่ต้องออกจากห้องแชทเลย เป็นการเพิ่มความสามารถให้ Line chat bot ดูน่าสนใจขึ้น

LIFF คืออะไร?

LINE Front-end Framework (LIFF) เป็นแพลตฟอร์มสำหรับเว็บแอปที่ให้บริการโดย LINE เว็บแอปที่ทำงานบนแพลตฟอร์มนี้เรียกว่าแอป LIFF

แอป LIFF สามารถรับข้อมูลจากแพลตฟอร์ม LINE เช่น ID ผู้ใช้ LINE แอป LIFF สามารถใช้ข้อมูลดังกล่าวเพื่อให้คุณสมบัติที่ใช้ข้อมูลผู้ใช้และส่งข้อความในนามของผู้ใช้ developers.line.biz

มาสร้าง LIFF ใช้งานกัน

ถ้ายังไม่เคยสร้าง Line chat bot ดูบทความ

• สร้าง Line Chat Bot ด้วย Line Messaging API (การสมัคร)
• สร้าง Line Chat Bot ตอบข้อความอัตโนมัติ ด้วย Dialogflow
• วิธีการสร้าง Rich Menu สำหรับ LINE Official Account แบบ Step by step
  

1. สร้าง LINE Login channel ก่อนเพราะ LIFF จะสร้างได้เฉพาะใน LINE Login channel 

2. เติมข้อมูลให้ครับ แล้วกด [Create]

3. เมื่อได้ Channel แล้วไปที่แถบเมนู LIFF กด [Add]

4. จากนั้น ตั้งชื่อ app เลือกขนาด ผมเลือกแบบ Tall (เกือบเต็มจอ) เติม Endpoint URL อาจเป็น Web app หรือ หน้าเว็บธรรมดาก็ได้

5. เลื่อนมาด้านล่าง ช่อง Scopes เลือกว่าต้องการอะไรจากผู้ใช้บ้าง, ช่อง Bot link feature จะใช้กับ bot ไหม, ช่อง Scan QR เลือกว่าจะเรียกใช้ Scan QR Code ไหม กรอกเสร็จแล้วกด [Add]

6. จะได้ LIFF URL ที่จะเอาไปใช้งาน

การนำ LIFF ไปใช้งานบน Line oa ผ่าน Rich menu

1. ไปที่ Message API channel ของ Line chat bot ที่ต้องการ จากนั้นกด LINE Official Account Manager

2. ในหน้า LINE Official Account Manager ไปที่ หน้าหลัก > ริชเมนู

3. ไปที่ rich menu ที่ต้องการใช้ จากนั้นกด [แก้ไข]

4. ไปที่แถบเมนู แอ็กชั่น แก้ไขช่องที่ต้องการให้เป็นชนิด ลิงก์ วาง LIFF URL จากนั้นกด [บันทึก]

5. มาทดสอบการใช้งานบนมือถือกัน กดปุ่มที่ตั้งค่าไว้ กดยอมรับ จะเห็น LIFF เปิดหน้าเว็บที่เรากำหนดให้

ครั้งนี้จะเป็นการใช้ LIFF ในการเปิดหน้าเว็บธรรมดา โอกาสหน้าจะนำเสนอการใช้งานร่วมกับ Web App นะครับ

ฝากกดติดตาม blog นี้ด้วยนะครับ

สามารถพูดคุยเพิ่มเติมได้ที่ facebook: Bulantech