คู่มือ LINE ขั้นสูง | วิธีสร้าง LIFF App จาก LINE Developers

เมื่อตั้งค่า LINE Login ให้ LINE Official Account เรียบร้อยแล้ว ครั้งนี้เราจะมาแนะนำฟีเจอร์สำคัญของ LINE Login นั่นคือ LIFF App ทั้งวิธีเพิ่ม LIFF App และสถานการณ์ที่เหมาะกับการใช้งาน แต่ก่อนเข้าสู่ขั้นตอนตั้งค่า ดูเหมือนยังมีหลายคนที่ไม่รู้ว่า LIFF App คืออะไร งั้นเรามาทำความรู้จักกันก่อนดีกว่า

‍

LIFF App คืออะไร?

มาดูคำจำกัดความของ LIFF App จาก LINE Developers กันก่อน: LINE Front-end Framework (LIFF) is a platform for web apps provided by LINE. The web apps running on this platform are called LIFF apps.

‍

สรุปเป็นภาษาไทยได้ว่า

‍

LIFF App คือเว็บแอปที่ทำงานบนแพลตฟอร์มที่ชื่อว่า LINE Front-end Framework (LIFF)

‍

ถ้าจะให้เข้าใจง่ายขึ้นอีก ให้นึกภาพว่า LIFF App คือเบราว์เซอร์ที่ฝังอยู่ในแอป LINE เมื่อเพื่อนใช้งานผ่านเบราว์เซอร์นี้ LIFF App จะช่วยให้แบรนด์ได้ข้อมูล LINE ของผู้ใช้ เช่น user ID ของเพื่อน (แน่นอนว่าต้องได้รับความยินยอมจากเพื่อนก่อน)

‍

วิธีสร้าง LIFF App

เมื่อรู้แล้วว่า LIFF App คืออะไร มาดูวิธีเพิ่ม LIFF App กัน คุณสามารถสร้าง LIFF App ได้ที่ LINE Developers ไม่ใช่ที่ LINE Official Account Manager หลายคนมักสับสนระหว่างสองแพลตฟอร์มนี้ หลักจำง่ายที่สุดคือ การตั้งค่าทางเทคนิคทั้งหมดไปที่ LINE Developers ส่วนการสื่อสารกับเพื่อนและการบริหารบัญชีไปที่ LINE Official Account Manager

เนื่องจาก LIFF App อยู่ภายใต้ LINE Login คุณจึงต้องมี LINE Login ก่อน หากยังไม่มี แนะนำให้อ่านบทความนี้ก่อน

‍

วิธีสร้าง LINE Login จาก LINE DevelopersLINE Official Account ของคุณถึงเวลาต้องใช้ LINE Login แล้วหรือยัง? ก่อนเริ่มสอนตั้งค่า เรามาทำความรู้จักกันก่อนว่า LINE Login คืออะไร และเหมาะกับการใช้งานแบบไหนhttps://oakmega.com/blog/create-line-login-from-line-developers

‍

เอาล่ะ มาเริ่มเพิ่ม LIFF App กันเลย!

ขั้นตอนที่ 1: เข้าสู่ LINE Login Channel

1. ไปที่หน้า LINE Developers คลิก “Log in” ที่มุมขวาบน แล้วเข้าสู่ระบบ LINE Developers ด้วย LINE Business ID

‍

2. เมื่อเข้าสู่ LINE Developers แล้ว ให้เปิด Provider ที่เกี่ยวข้อง จากนั้นคลิก LINE Login Channel ที่ต้องการเพิ่ม LIFF App

‍

3. เมื่อเข้าสู่ LINE Login Channel แล้ว คลิกแท็บ “LIFF” ที่แถบด้านบน

‍

4. ในแท็บ LIFF ให้เลื่อนลงมาแล้วคลิก “Add” เพื่อเริ่มสร้าง LIFF App

‍

ขั้นตอนที่ 2: กรอกข้อมูล

4. การเพิ่ม LIFF App ต้องกรอกข้อมูลพื้นฐาน (Basic information) ตามที่หน้าจอแนะนำ ดังนี้

5. LIFF app name: แสดงเฉพาะในหลังบ้าน LINE Developers เพื่อนจะไม่เห็นชื่อนี้ตอนเปิด LIFF App ให้กรอกชื่อแบรนด์

6. Size: ขนาดการแสดงผลเมื่อเปิด LIFF App ใน LINE เลือก “Full” เพื่อแสดงผลเต็มหน้าจอ (Tall แสดงผล 70% และ Compact แสดงผล 50%)

‍

5. กรอกข้อมูลพื้นฐาน (Basic information) ต่อ

6. Endpoint URL: ลิงก์ที่เพื่อนจะถูกพาไปเมื่อเปิด LIFF App ใส่เว็บไซต์ทางการของแบรนด์หรือ URL ใดก็ได้ที่ต้องการ

7. Scopes: ข้อมูลที่ต้องการเก็บผ่าน LIFF App ให้ติ๊กทั้ง “profile” และ “openid”

8. Bot link feature: กำหนดว่าจะผูกข้อมูลเพื่อนกับ LINE Official Account เมื่อเพื่อนเปิด LIFF App หรือไม่ ให้เลือก “On (Normal)”

‍

6. กรอกส่วน Options ต่อ

7. Scan QR: ไม่ต้องติ๊ก

8. Module Mode: เปิดใช้งาน (ตัวเลือกนี้จะแสดงเฉพาะเมื่อเลือก Size เป็น “Tall” หรือ “Compact”)

‍

7. กรอกครบแล้ว คลิก “Add” ก็จะได้ LIFF App ตัวแรกเรียบร้อย!

‍

8. คัดลอก LIFF URL ไปวางในช่องแชต LINE แล้วเปิดลิงก์บนมือถือเพื่อดูผลการตั้งค่า LIFF App ได้เลย!

‍

คำถามที่พบบ่อยเกี่ยวกับ LIFF App

เรารวบรวมคำถามที่มักเจอหลังสร้าง LIFF App ครั้งแรกไว้ดังนี้

คำถามที่ 1: ตั้งค่า LIFF App เสร็จแล้ว เก็บข้อมูลผู้ใช้ในเบราว์เซอร์ได้จริงหรือยัง?

เรื่องนี้เหมือนกับ LINE Login คือต้องให้วิศวกรช่วยปรับแก้หน้าเว็บก่อน ข้อมูลที่เก็บผ่าน LIFF App จึงจะถูกส่งเข้าเซิร์ฟเวอร์ของแบรนด์ได้ เราจะมีบทความสอนแบบละเอียดสำหรับวิศวกรในอนาคต ติดตามได้ที่ “OakMega คู่มือบริหาร LINE”!

คำถามที่ 2: ทำไม LIFF App ของ LINE Official Account อื่นถึงเก็บอีเมลได้?

เพราะบัญชีเหล่านั้นตั้งค่าเพิ่มเติมให้ LINE Login ไว้ จึงติ๊ก email ในตัวเลือก Scopes ของ LIFF App ได้ และเก็บอีเมลของเพื่อนไปพร้อมกัน

คำถามที่ 3: ยังไม่ค่อยเข้าใจว่า Bot link feature มีไว้ทำอะไร?

เราจะมีบทความอธิบาย Bot link feature แบบละเอียดในอนาคต ติดตามได้ที่ “OakMega คู่มือบริหาร LINE”!

‍

อยากรู้เคล็ดลับการบริหาร LINE เพิ่มเติม หรืออยากรู้ว่าจะทำให้ LIFF App แสดงผลขนาดเล็กลงได้อย่างไร? แวะไปที่ LINE Official Account ของ OakMega เพื่อดูเนื้อหาเพิ่มเติม หรือติดตาม “OakMega คู่มือบริหาร LINE” ที่รวบรวมวิธีสร้าง LINE Official Account ของแบรนด์ตั้งแต่เริ่มต้นจนครบทุกขั้นตอน