LIFF v2 มาแล้ว! เพิ่มหลาย Feature เพื่อให้นักพัฒนาสร้างสรรค์ Web Apps เจ๋งๆบน LINE ได้มากขึ้น!

Warit Wanwithu
Oct 17, 2019 · 3 min read
Image for post
Image for post

สวัสดีชาว LINE Developers ทุกคน! ตั้งแต่ LIFF (LINE Front-end Framework) ออกมากลางปี 2018 หลายๆคนน่าจะมีประสบการณ์ในการสร้าง LIFF มาบ้างแล้วใช่ไหมครับ มาวันนี้ LIFF version 2 ซึ่งเป็น version ใหม่ล่าสุดออกมาให้เราใช้กันได้แล้ว (หลังจากรอกันมานาน ตั้งแต่พี่ตี๋ Jirawatee แนะนำในงาน LINE Thailand Developer Conference ไปตอนกลางปี 🤣)

LIFF คืออะไรนะ ขออีกที?

LIFF ย่อมาจาก LINE Front-End Framework ครับ เป็น Web View ที่อยู่ภายในแอปพลิเคชั่น LINE เลย พูดง่ายๆคือ เราสามารถฝังเว็บลงไปในห้องแชทได้ ตัวอย่างเช่น เอา Web e-Commerce มาทำเป็น LIFF ก็จะช่วยผู้ใช้ไม่ต้องออกจากห้องแชตเลย สามารถเลือกซื้อสินค้า และจบการขายในห้องแชตได้นั่นเอง

Feature ใหม่หลักๆมีอะไรบ้าง?

Support ใน Desktop ได้แล้ว

ใน version 1 ถ้าเราต้องการเปิด LIFF App เราจะต้องไปสร้าง LIFF URL line://app/{liffId} ก่อนแล้วไปเรียกใช้ในแอป LINE เท่านั้น ไม่สามารถที่จะใช้ Endpoint URL ที่เป็น https://....com ตรงๆได้

แต่ใน LIFF v2 เราสามารถที่จะเอา Endpoint URL ไปใช้บน Web browser ได้เลย (หลังทำการ Register LIFF App แล้ว) นั่นหมายความว่าเราสามารถใช้ LIFF ใน Desktop ได้ด้วย 😍

Image for post
Image for post
เปรียบเทียบ Feature ในการใช้ LIFF บน LINE กับ Web browser

ดึง Profile และ email ของผู้ใช้ได้ผ่าน LINE Login

ก่อนหน้านี้บางคนอาจจะปวดหัวกับการที่ต้อง Integrate LINE Login เข้าไปกับเว็บแอปของตัวเอง แต่ตัว LIFF v2 มาพร้อมกับ SDK ของ LINE Login เลย เรียกใช้แค่ liff.login() เท่านั้น (แต่ email ต้องขอ permission ก่องนะ)

QR Code Scanner

ให้เรียกใช้ฟังก์ชั่น liff.scanCode()เพื่อเปิดกล้องแล้วทำการสแกน QR code หลังจากสแกนเสร็จ เราจะได้รับ Callback ส่งกลับมาที่ LIFF เพื่อเอาไปใช้ต่อได้เลย (ดีงาม!)

*ประกาศ: เนื่องจากปัญหาทางเทคนิค LINE บน iOS ตั้งแต่ version 9.19.0 เป็นต้นไปจะไม่สามารถเรียกใช้ฟังก์ชั่นได้ ถ้ามีการเปลี่ยนแปลงผมจะรีบมาแจ้งให้ทราบทันทีครับ (สำหรับ Android ยังใช้ได้อยู่เหมือนเดิมครับ)

Image for post
Image for post

วิธีเรียกใช้ liff.scanCode() ก็ง่ายมากๆหลังจากเราเรียกใช้ฟังก์ชั่นนี้ เราจะได้รับ Callback เป็น Object JSON กลับมา โดยมี {“value”: “xxxx”} ลองดูตัวอย่างโค้ดด้านล่างนะครับ

Note: อย่าลืมไปเปิด Permission ให้ LIFF สแกน QR ใน Developer Console ด้วยนะครับ

Image for post
Image for post

ดูข้อมูล Environment ต่างๆของ LIFF App

LIFF v2 มาพร้อมกับฟังก์ชั่นใหม่ๆเยอะมากกกก เราสามารถดูข้อมูลของ Environment ต่างๆได้ เช่น

  • liff.getOS() ผู้ใช้ที่เปิด LIFF ของเราขึ้นมาเค้าใช้ OS อะไร?
  • liff.getLanguage() ดูค่า Setting ของผู้ใช้ว่าเค้าใช้ภาษาอะไร? (ในแอป LINE)
  • liff.isInClient() ผู้ใช้เปิด LIFF จากในแอป LINE หรือไม่?
  • liff.isLoggedIn() ผู้ใช้ทำการ Login แล้วหรือยัง?

สำหรับมือเก๋า — ย้ายไปใช้ LIFF v2 เลยไหม?

ตอบตรงๆว่า ‘ย้ายได้เลยครับ’ เพราะตัว LIFF v2 มี Feature ใหม่ๆเข้ามามากมาย แล้วก็ยังสามารถทำงาน Compatible ได้กับตัว v1 ด้วยครับ เลยคิดว่าย้ายเลยก็ได้แค่แก้โค้ดติ๊ดเดียวตามนี้ครับ

  1. แก้ตัว Import SDK จาก https://d.line-scdn.net/liff/1.0/sdk.js ไปเป็น https://static.line-scdn.net/liff/edge/2.1/sdk.js
  2. แก้โค้ดตอนที่เราเรียกใช้ฟังก์ชั่น liff.init() เนื่องจากว่าใน LIFF v2 ตอนที่เราจะเรียกใช้ฟังก์ชั่นนี้ เราจะต้องส่งค่า LIFF ID เข้าไปด้วย แบบนี้ครับ liff.init({liffId: "1234567890-abcedfgh"})

สำหรับมือใหม่ — เริ่มยังไงดี? มาลองเล่นตัวนี้เลย liff-v2-starter

สำหรับมือใหม่หัด LIFF! ผมขอแนะนำวิธีการคร่าวๆตามนี้นะครับ

  1. เนื่องจากว่าตอนที่เราจะเรียกใช้ฟังก์ชั่น liff.init() จะต้องส่งค่า LIFF ID เข้าไปด้วย เพราะฉะนั้นเราจึงต้องทำการ Register LIFF App ก่อนเพื่อที่จะได้ LIFF ID มา (ตอนสร้าง LIFF App ใน Developer Consoleใส่ Endpoint URL อะไรไปก่อนก็ได้ แล้วค่อยกลับมาแก้ครับ)
Image for post
Image for post

2. เขียน HTML, JavaScript และ CSS

3. Import LIFF v2 SDK เข้าไป https://static.line-scdn.net/liff/edge/2.1/sdk.js

4. เรียกใช้งาน LIFF API ต่างๆ เช่น liff.init(), liff.getProfile(), liff.sendMessages() เป็นต้น

5. Deploy เว็บแอปของเรา

แถม: Repo ด้านล่างนี้เป็นตัวอย่างการสร้างเว็บแอปง่ายๆที่เอาไว้ดูว่า LIFF v2 ทำอะไรได้บ้าง ต้องเรียกใช้งานยังไง ลองไปเล่นกันดูนะครับ แล้วใครทำของเจ๋งๆเอามาแชร์กันได้ที่กลุ่ม LINE Developers Thailand ด้วยนะครับ :)

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium