ลองเล่น LINE Frontend Framework (LIFF) ฉบับไม่เขียน Code !!

credit: https://developers.line.me/en/docs/liff/overview/

อะโลฮ่าาา !! วันนี้เราจะมาทำความรู้จักกับ LIFF หรือ LINE Frontend Framework ที่จะมาช่วยทำให้ประสบการณ์การใช้งาน Web Application ของเรา Integrate เข้ากับ LINE App อย่างไร้รอยต่อมากยิ่งขึ้น !!

Table of Content

  • LIFF คืออะไร ?
  • มาลองสร้าง LIFF กันเถอะ

LIFF คืออะไร ?

LINE Front-end Framework (LIFF) is a platform for web apps that run within LINE.

จากนิยามข้างต้นก็จะบอกได้ว่า LIFF เป็น platform ที่เราสามารถนำ Web App ของเราขึ้นไป เพื่อให้ประสบการณ์การใช้งาน Web ของเราบน LINE นั้นดีขึ้น

ดีขึ้นยังไง ? ปกติเราเข้าเว็บหรือกดลิงค์จากใน LINE Chat มันจะเด้ง Web View ขึ้นมาทับหน้า Chat ของเราแบบนี้…

แต่ถ้าใช้ LIFF จะสามารถทำแบบนี้ได้…

ซึ่งเราสามารถเลือกระดับความสูงได้ 3 ระดับ ได้แก่ Compact, Tall, Full ซึ่งนอกจากนี้ Web App ของเรายังสามารถใช้ LIFF SDK เพื่อเข้าถึงข้อมูลของ LINE User นั้นๆได้ด้วยเช่นพวก profile ของ user ที่กดเข้ามา เป็นต้น ซึ่งเป็นประโยชน์มาก เพราะเราสามารถเอาไปทำอะไรได้มากมาย เช่น ส่ง confirm message อะไรต่างๆกลับมาจาก web app ของเราได้เมื่อ user นั้นมีการ interact กับ Web ของเรา

มาลองสร้าง LIFF กันเถอะ

ก่อนอื่นเลยเราจะต้องสมัคร LINE Developer Account กันก่อนเพื่อที่จะเข้าใช้งาน Developer Console ยังไม่ได้สมัครคลิกโลด หลายๆคนน่าจะเคยชินกันแล้ว เหมือนพวก Facebook, Google เลยครับผม เมื่อสมัครเสร็จแล้วก็ login เข้าสู่ Developer Console จากนั้นก็…

  1. สร้าง Provider ไปตาม Step (เหมือนสร้าง Company อะไรทำนองนี้)
  2. สร้าง Channel ใน Messaging API

จากนั้นเราก็ไปที่ Chennel Setting จะเห็นว่ามี Tab LIFF อยู่ก็กดเข้าไปโลด

เราก็กด Add ที่ปุ่มฟ้าๆได้เลย เห็นว่าเมื่อก่อนเราจะสร้าง LIFF ได้ผ่านทาง LIFF API เท่านั้นแต่ปัจจุบันมี Console GUI ตามภาพให้ได้ใช้กันง่ายๆแล้วนะเอ้อ

เมื่อกดแล้วก็แค่ใส่ชื่อ LIFF และ URL ของหน้าเว็บที่เรามีอยู่เป็น static web ก็ได้นะ ซึ่งจะต้องเป็น https เท่านั้นเด้อ ซึ่งจากตัวอย่างผมใช้ Web App เก่าของผมที่เขียนด้วย React.js และ Host อยู่บน firebase มาใช้ได้เลยเพราะเป็น https อยู่แล้ว วิธีใช้ก็แค่ copy firebase url มาแปะจากนั้นเราจะได้ LIFF Url มาแทน จบปิ๊ง !!

วิธีนำมาใช้ก็ไม่ได้ยากเย็นอะไรแค่ลองเข้า LIFF Url กับ Url ปกติแล้วเทียบกันดูครับ เปิดได้เฉพาะใน LINE App เด้อ ซึ่งผลลัพธ์ก็จะประมาณนี้ครับผม

ภาพด้านซ้ายคือการเข้าผ่าน LIFF Url ซึ่งผมเซ็ตไว้เป็นขนาด Tall นั่นเอง ส่วนด้านขวาจะเป็นการเข้า Link ปกติครับผม ก็จะมี Web View ขึ้นมาทับหน้า Chat ของเราไปเลยนั่นเอง…

จริงๆแล้วอย่างที่อธิบายไปตอนต้นๆเลยครับว่า Web App ของเราที่ทำเป็น LIFF นั้นยังสามารถใช้งาน LIFF SDK ได้ด้วย ซึ่งจะทำให้เราเข้าถึง LINE API ต่างๆได้ และนั่นจะทำให้เราสามารถ… ส่งข้อความ, ส่งภาพ และเข้าถึง Profile ของ User นั้นๆที่เข้ามาได้ ซึ่งนำไปปรับใช้กับอะไรได้เยอะมว๊ากกกก


สรุป

จริงๆยังมีอะไรใน LINE Developer API ให้เล่นอีกเยอะเลยครับอย่างเช่น Flex Message ที่จะทำให้การส่งข้อความของเรา powerful ขึ้นสุดๆ

เร็วๆนี้จะมีบทความมหากาพย์ Micro-Frontend มาให้ชมกันว่าในโลกความเป็นจริงนั้นเราสามารถทำ Micro-Frontend ได้จริงหรือ ทำยังไง และ มีตัวเลือกหรือทางเลือกอะไรบ้าง หรือมันอาจจะเป็นแค่ภาพสวยหรูในจินตนาการ ที่หลายคนหยิบยกมาพูด มาลอง แต่ก็ไม่ได้นำมาใช้จริงจังกันเสียที…