Deep dive into LIFF & LINE Mini App from LINE Developers Day 2019

Sitthi Thiammekha
Dec 13, 2019 · 6 min read

ขอเกริ่นนำสั้นๆว่า ในฐานะ LINE API Expert ผมมีโอกาสได้ไปร่วมงาน LINE Developers Day 2019 ที่กรุงโตเกียว ประเทศญี่ปุ่น เมื่อเดือนพฤศจิกายน ที่ผ่านมา

ก็ขอถือโอกาสนี้ ขอบคุณ LINE ประเทศไทย และทีมงาน DevRel สำหรับโอกาสอันสำคัญครั้งนี้ด้วยครับ

งานนี้เป็นงานสองวัน ถือว่าเนื้อหาจัดเต็มมาก มีทั้งด้าน Technology และ Business ใครสนใจสามารถติดตามย้อนหลังได้ที่ https://linedevday.linecorp.com/jp/2019/

หัวข้อหนึ่งในงานที่น่าสนใจสำหรับผม และคิดว่าน่าจะใกล้ตัวนักพัฒนาชาวไทยมากที่สุด เรื่องหนึ่ง ก็คือ LIFF และ LINE MINI App

จึงขอสรุปมาให้เพื่อนๆได้ติดตามกันครับ

What’s New in LINE Front-end Framework

ขอเริ่มต้นจากการอัพเดท Features ใหม่ๆ ของ LIFF กันก่อนเลย

Support Modern Browsers

หลายๆท่านอาจจะพอทราบมาบ้างแล้วว่า ตอนนี้เราสามารถรัน LIFF App ได้บน Web Browser ปกติได้แล้ว จากเดิมที่ต้องรันอยู่บน LINE เท่านั้น ก่อนหน้านี้เวลาจะให้ผู้ใช้เปิด LIFF App เราต้องไปสร้าง LIFF Id ก่อน แล้วค่อยเอา LIFF Id นั้นไปใช้สร้าง LIFF url เช่น line://app/{liffId} แต่ตอนนี้ สามารถนำ url ของ web app เช่น https://xxx.com ไปใช้ได้เลยตรงๆ

อ่านบทความเกี่ยวกับ Features ใหม่ๆ ของ LIFF ได้ที่

Universal Link

และการจากที่ LIFF อนุญาตให้ใช้ได้ทั้ง LIFF Url สำหรับ Mobile และ Web Url สำหรับ Desktop ทำให้บางครั้งก็เป็นการยากที่จะระบุว่าเวลาไหนควรใช้ LIFF Url และเวลาไหนควรใช้ Web Url

LINE จึงออก Universal Link มาช่วยตัดสินใจให้เลย และพระเอกของเราก็คือ HTTPS scheme นี้ https://liff.line.me ที่ช่วยในการแยกให้เลยว่าผู้ใช้กำลังใช้งาน LIFF จาก Environment ไหน ถ้ากดมาจาก LINE ก็จะเปิด LIFF บน LINE ให้เลย แต่ถ้ากดมาจาก Web Browser ก็จะรัน LIFF บน Browser นั้นๆเลย

อ่านบทความเกี่ยวกับ Universal Link อย่างละเอียด ได้ที่

Integrated with LINE Login

การอัพเดทที่สำคัญของ LIFF v2 นี้ก็คือ การทำงานร่วมกับ LINE Login นั่นเอง เพราะเมื่อสามารถรัน LIFF บน Web Browser ปกติได้ ก็ต้องใช้ LINE Login มาช่วยในการยืนยันตัวตนผู้ใช้

โดยเราสามารถเช็คได้ว่าผู้ใช้ ใช้งานอยู่ใน LIFF หรือไม่ ถ้าใช่ก็สามารถยืนยันตัวตนได้เลย แต่ถ้าใช้งานบน Web Browser เราสามารถ force ให้ผู้ใช้ไป Login มาก่อนได้ เพื่อจะได้ทราบว่าผู้ใช้งานที่กำลังใช้งานอยู่เป็นใคร

ขั้นตอนการยืนยันตัวตนผู้ใช้ อธิบายได้คร่าวๆตามภาพโค้ด ด้านล่างนี้

Get User Email

นอกจากนี้ ยังทำให้สามารถดึง email ของผู้ใช้ได้ผ่าน LINE Login ได้ด้วย

อ่านบทความเกี่ยวกับการดึง email ของผู้ใช้อย่างละเอียด ได้ที่

Path & Query Parameter

อีกหนึ่ง Feature ที่ช่วยให้ชีวิตนักพัฒนาง่ายขึ้น ก็คือการรองรับ Path และ Query Parameters

ก่อนหน้านี้ เราอาจจะเคยใช้งาน Query Parameters กันมาบ้างแล้ว Query Parameters คือการกำหนด parameter ต่อท้าย LIFF Url เพื่อให้ App Id อันเดียว สามารถใช้งานกับ web หลายๆหน้าได้

อ่านบทความ เกี่ยวกับการใช้ Query Parameters กับ LIFF ได้ที่

แต่การมาของ Path Parameters จะทำให้เราสามารถใช้ App Id อันเดียว แทน web ทั้งเวบได้เลย เช่น ถ้าเราสร้าง LIFF App โดย point ไปที่ https://myapp.com และได้ LIFF ID เป็น “9876543210-abcdefgh” เราจะได้ Universal Link เป็น

https://liff.line.me/9876543210-abcdefgh
==> https://myapp.com และ

https://liff.line.me/9876543210-abcdefgh/folder =>https://myapp.com/folder

และสามารถใช้ทั้ง Path และ Query Parameters พร้อมกันได้เลย เช่น
https://liff.line.me/9876543210-abcdefgh/folder?id=xxx =>https://myapp.com/folder?id=xxx

Bot Link

เมื่อเราใช้ LIFF ร่วมกับ LINE Login Channel เราจะสามารถ Prompt ให้ผู้ใช้ Add Friend ตัว Bot (Linked OA : Messaging API Channel) ที่ผูกกับ LINE Login Channel นั้นๆได้เลยด้วย

JS SDK

เร็วๆนี้ จะมีการ support นักพัฒนาสาย JS มากขึ้น ไม่ว่าจะเป็นการ

  • Support Typescript
  • Type Definition files
  • NPM package แทนการ import liff-sdk ใน html ตรงๆ
  • ให้ความสำคัญกับ Developers Experience มากขึ้น

QR Code Reader

อีกหนึ่ง Feature สำคัญที่มีการประกาศไปก่อนหน้านี้แล้ว คือสามารถอ่าน QR Code ผ่าน LIFF ได้แล้ว

แต่มีข้อจำกัดคือ

  • จากเดิมที่ LIFF สามารถอ่าน QR Code เฉพาะที่เป็น URL เท่านั้น
    ตอนนี้สามารถอ่าน QR Code ที่เป็น Text ธรรมดาได้แล้ว
  • LINE for iOS v9.19.0 ขึ้นไป ว่าจะไม่สามารถใช้งาน QRCode Reader ได้ อย่างไม่มีกำหนด
    อ่านประกาศได้ที่ https://developers.line.biz/en/news/
  • ไม่สามารถใช้งาน QR Code Reader ได้บน External Browser

ShareTargetPicker

อันนี้คือ Built-in Share ที่จะสามารถแชร์ข้อความ, รูปภาพ, vdo หรือแม้ว่า Flex Message ไปให้เพื่อนหรือส่งไปในกลุ่มได้ จากเดิมที่แชร์ได้เฉพาะข้อความ Text อย่างเดียว

API นี้ยังไม่เปิดให้ใช้งาน แต่คาดว่าจะเปิดให้ใช้ช่วงต้นปีหน้านี้

New APIs

นอกจากนี้ ยังมี API อื่นๆที่น่าสนใจ เช่น

  • getOS
    อ่านค่า User Environment มีค่าเป็น [ios / android / web]
  • getLanguage
    อ่านค่าการตั้งค่าภาษาจาก App Settings
  • getVersion
    อ่านค่า version ของ LIFF SDK
  • isInClient
    ตรวจสอบว่าใช้งานบน In-app browser หรือไม่
  • isLoggedIn
    ตรวจสอบว่าผู้ใช้ Login แล้วหรือยัง
  • login / logout
  • getDecodedIDToken
    อ่านข้อมูลผู้ใช้จาก ID Token
  • getFriendship
    อ่านค่าสถานะของผู้ใช้ว่าเป็นเพื่อนกับ Bot ที่ Linked กับ Login Channel หรือไม่

LIFF Playground

LINE ได้เตรียม web สำหรับให้เข้าไปทดลองใช้งาน LIFF API ได้ โดยไม่ต้องเขียนโค้ดด้วย ลองเข้าไปใช้งานได้ที่ https://playground-for-liff.linecorp.com/

New View Type

แอบเห็น slide อันนึง มีการระบุว่าจะมี View Type แบบใหม่ ที่เป็น Action Menu
และจะมีการเพิ่ม Built-in Share Button ลงใน LIFF ด้วย อยู่บริเวณมุมบนขวา ข้างๆปุ่มปิด ซึ่งเมื่อกดปุ่มนี้จะมี 2 action คือ share กับ refresh

ถ้ากด share ก็จะเป็น popup ให้เราเลือกได้ว่าจะแชร์ให้เพื่อนหรือส่งเข้ากลุ่ม โดย content ที่แชร์ ก็คือ Universal Link ของ LIFF หน้านั้นๆ นั่นเอง ซึ่งแอบเห็นมาแล้ว ว่า Feature นี้ไปอยู่ใน LINE MINI App ทุกๆตัว

นั่นหมายถึง LINE MINI App น่าจะพัฒนามาจาก LIFF version ที่สูงกว่า 2.1 ที่เปิดให้พวกเราใช้งานกันอยู่ตอนนี้

LINE MINI App

หลายคนคงเคยได้ยินเกี่ยวกับ LINE MINI App มาบ้างแล้ว ว่าเป็นแพลตฟอร์มที่ช่วยให้ธุรกิจสามารถเชื่อมโยงกับลูกค้าของตัวเองได้ง่ายขึ้น โดยที่ลูกค้าไม่ต้องดาวน์โหลดแอพของธุรกิจนั้นๆ แต่สามารถใช้งานได้เลยบนแอพ LINE เช่น ระบบบัตรสมาชิก, ระบบคูปอง, ระบบการจอง, การชำระเงิน รวมไปถึงการแจ้งเตือนต่างๆผ่าน LINE

ในงานครั้งนี้ มีการพูดถึง LINE MINI App อีกครั้ง ในฐานะของ Application Publishing Platform นั่นหมายถึง แอพ LINE จะทำหน้าที่คล้าย App Store ให้นักพัฒนา สามารถสร้างสรรค์ Application เพื่อให้ลูกค้าสามารถเข้ามาใช้งานได้ โดยไม่ต้องติดตั้งโปรแกรมใดๆ เนื่องจากเทคโนโลยีที่อยู่เบื้องหลังของ LINE MINI App ก็คือ LIFF นั่นเอง

จุดที่ LINE MINI App ต่างจาก LIFF ปกติก็คือผู้ใช้สามารถเข้าใช้งานแอพนั้นได้โดยตรง จากหน้า Home ของ LINE เลย โดยที่ไม่ต้องเข้าไปในหน้า Chat ของ Offical Account ของธุรกิจ

นอกจากนี้ ยังสามารถแชร์แอพไปให้เพื่อนใช้งานได้เลย และสามารถเปิดหน้าต่างแอพ ย่อไว้ที่มุมขวาล่างของหน้าแชทได้ โดยคาดว่าจะเปิดบริการอย่างเป็นทางการในช่วงต้นปี 2020 ที่จะถึงนี้

และในวันนี้ (3 ธ.ค. 2562) มีการเปิดตัว MINI App ของไทย 2 ตัว จากโครงการ LINE Scaleup นั่นคือ Seekster และ Finnomena สามารถไปลองเล่นกันได้ที่เมนู Service ในหน้า Home ของแอพ LINE ครับ

Next LIFF

ย้อนกลับมาที่เรื่อง LIFF ผู้บรรยายได้พูดถึงอนาคตของ LIFF ว่าจะพัฒนาไปในทิศทางใดบ้าง ซึ่งหนึ่งใน feature ที่น่าสนใจก็คือ

LUI (LIFF UI)

LUI พัฒนาอยู่บนพื้นฐานของ Web Component ชื่อว่า “koromo-element” ซึ่งเป็นส่วนหนึ่งของ CSS Toolkit ของ LINE เอง ที่ชื่อว่า “koromo”

ในอนาคต อาจมีการเปิดให้นักพัฒนาสามารถใช้งาน LUI เพื่อให้การออกแบบส่วนติดต่อผู้ใช้งาน เป็นไปในทิศทางเดียวกัน

LINE เรียกการออกแบบลักษณะนี้ว่า Atomic Design คือออกแบบจากส่วนย่อยๆแล้วนำมาประกอบกันเป็น UI โดยจะมีการเตรียม Element Library ให้ ในระดับ Organisms และ Templates เพื่อให้นำไปใช้ต่อได้เลย

ข้อดีของการใช้ Components แบบนี้ก็คือสามารถ reuse ได้, ปรับแต่ง Theme ได้ และที่สำคัญคือรองรับ Multi Device ตาม roadmap ของ LIFF ที่สามารถรันได้ในทุกๆที่ ไม่ว่าจะเป็น Mobile หรือ Desktop Browser

The Next Big Things

สุดท้าย ได้ประกาศ Roadmap ของ LIFF ว่าจะเน้นเรื่องการทำ User Experience และ Developers Experience ให้ดีขึ้น รวมไปถึง โฟกัสไปที่ FinTech และ AI คงต้องรอติดตามกันดูว่า LIFF version ถัดไป จะทำอะไรว้าวๆได้อีกบ้าง

จบละครับ แต่ก่อนจาก ขออีกหน่อย

Developers Note:

สำหรับเพื่อนๆนักพัฒนา ผมอยากถือโอกาสนี้ ย้ำข้อมูลสำคัญเกี่ยวกับ LIFF ดังนี้

  • LIFF v1 will be deprecated.
    ใครยังไม่ได้ย้ายไปใช้ v2 ให้รีบดำเนินการนะครับ คาดว่า ต้นปี 2020 จะมี big impact จาก LIFF อีก ดังนั้น รีบดำเนินการกันแต่เนิ่นๆนะครับ
  • Transition to the LINE Login channel
    จากที่ก่อนหน้านี้ เวลาเราจะสร้าง LIFF เราจะสร้างจาก Messaging API Channel
    ต่อจากนี้ไป ขอให้ไปสร้าง LIFF ที่ LINE Login Channel แทนนะครับ
    รวมไปถึง ให้ย้าย LIFF App จาก Messaging API Channel ไปที่ LINE Login Channel ด้วย ที่สำคัญย้ายแล้ว อย่าลืมว่า App Id จะเปลี่ยนนะครับ
  • To avoid confusion, delete the LIFF app added to the Messaging API channel after adding to the LINE Login channel.
    และเพื่อป้องกันการสับสน หลังจากย้ายแล้ว LINE แนะนำให้ลบ LIFF ออกจาก Messaging API Channel ด้วย
  • Users can no longer add LIFF apps to Messaging API channels (Early February 2020)
    ช่วงต้นเดือนกุมภาพันธ์ปีหน้า จะไม่สามารถสร้าง LIFF App ใน Messaging API Channel ได้อีกต่อไป

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Sitthi Thiammekha

Written by

LINE API Expert

LINE Developers Thailand

Closing the distance. Our mission is to bring people, information and services closer together

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade