มาลองเล่น LINE Front-end Framework (LIFF) • MoreMeng.in.th

Updated: 18 January 2023

มาซะทีกับ Platform ที่จะช่วยให้นักพัฒนาสามารถ run ตัว Web App ภายใน LINE app ได้อย่างเนียน ๆ ด้วย LINE Front-end Framework (LIFF) ซึ่งภาษาบ้าน ๆ มันก็คือ WebView บน LINE Application นี่เอง แต่ของเดิมมันเป็น View แบบบ้านๆ ที่ทำอะไรต่อจากนั้นไม่ได้ แค่เปิด URL ขึ้นมา แล้วก็ปิดไป แต่เจ้านี่ มันจะช่วยให้เราใช้ LINE Platform ได้ด้วย อาทิ ดึงข้อมูลส่วนตัว, ส่งข้อความ บลาๆๆๆ ซึ่งตอนนี้ถ้ากดในช่องแชท มันก็จะมี icon ของเกมส์ Jungle Pang ขึ้นมา เห็นว่าตัวนี้ใช้ LIFF run ขึ้นมา มาดูกระบวนการทดลองแบบลวกๆ กันเลย

คู่มือฉบับเต็ม : https://developers.line.me/en/docs/liff/overview/

Jump to Contents

1 เริ่มต้นใช้งาน LIFF แบบลวก ๆ
2 สร้าง channel ใหม่ [Link]
3 UPDATE! 2018/11/01
4 เอาเว็บตัวอย่างมาทดสอบ [Link]
5 การลงทะเบียน LIFF app [Link]
6 การแก้ไข LIFF app [Link]
7 ดู LIFF app ทั้งหมด [Link]
8 ลบ LIFF app [Link]
9 วิธีการเปิดดู LIFF app
10 สรุป
11 แถม

เริ่มต้นใช้งาน LIFF แบบลวก ๆ

สิ่งสำคัญมีแค่เราต้องเพิ่มเว็บไซต์ของเรา เข้าไปใน LIFF ตาม 3 ขั้นตอนดังนี้

Create a channel for your LIFF app on the console.
Develop your LIFF app.
Add your app to LIFF. ขั้นตอนสุดท้าย เมื่อเราเตรียม WebApp รอไว้แล้ว ก็ต้องเพิ่มมันเข้าสู่ LIFF app (ลงทะเบียนนั้นแหละ เพื่อให้ได้ LIFF ID กลับมา)

สร้าง channel ใหม่ [Link]

เราจำเป็นต้องสร้าง channel ขึ้นมาเพื่อเอา access token มาใช้ในการเชื่อมต่อ ถ้าเกิดเรามี channel เดิมที่เคยสร้างไว้แล้ว ก็ข้ามไปเลย ซึ่งเท่าที่ลองสร้างดูตอนนี้ 1 channel จะสร้าง 10 app!

UPDATE! 2018/11/01

ตอนนี้ LINE มีระบบจัดการ LIFF มาให้แล้วนะแจ๊ะ อยู่ในหน้า Console เลยยย โคตรดีย์ ดังนั้น ตรงข้อความด้านล่างถัดไป ก็เลื่อนผ่านๆ ตาไปไม่ต้องไปทำตามให้เสียเวลา เอาแค่พอรู้ว่ามันจัดการระบบอย่างไงก็พอ

เอาเว็บตัวอย่างมาทดสอบ [Link]

ซึ่งในตัวอย่างจะแนะนำการนำเว็บเข้า Heroku โดย clone git ไปใช้ได้เลย https://github.com/line/line-liff-starter.git และส่วนนี้จะอธิบายการทำงาน ของ API การเรียกใช้ LIFF SDK. อ่านผ่านๆ ไปก่อนได้เลย เดี๋ยวจะใช้ starter-kit มาทดสอบกัน ซึ่งในที่นี้ผมเอามันไว้บน host ตัวเอง ซึ่ง URL ที่จะใช้นั้นต้องเป็น https เท่านั้น หน้าตาอันนี้ผมใส่ bulma เข้าไปแล้ว ให้มันดูสวยนิดนึง

Bulma is an open source CSS framework based on Flexbox and used by more than 100,000 developers.
https://bulma.io/

การลงทะเบียน LIFF app [Link]

ขั้นตอนสุดท้ายที่จะทำให้ webapp ของเราเปิดใช้งานด้วย LIFF ได้ ซึ่งในคู่มือจะแนะนำการส่ง HTTP POST ไปยัง /liff/v1/app เพื่อเพิ่มเว็บของเราเข้าไปในระบบ

curl -X POST https://api.line.me/liff/v1/apps \
-H "Authorization: Bearer YOUR_CHANNEL_ACCESS_TOKEN" \
-H "Content-Type: application/json" \
-d '{
  "view":{
    "type":"LIFF_SITE",
    "url":"YOUR_APP_URL"
  }
}'

สิ่งที่จะ return กลับมาถ้ามันสำเร็จคือ liffId

{
  "liffId":"..........-........"
}

ผมใช้ Postman ทดสอบดู ผลเป็นดังภาพ

การแก้ไข LIFF app [Link]

เพื่อเปลี่ยนการตั้งค่า ซึ่ง ณ ตอนนี้ก็มีแค่เปลี่ยน type กับ url ซึ่ง type จะมีให้เลือก 3 ขนาด คือ compact, tall, full และ cover สำหรับ URL ที่เปลี่ยนก็ต้องเป็น HTTPS เท่านั้น

curl -X PUT \
  https://api.line.me/liff/v1/apps/{LIFF_ID}/view \
  -H 'Authorization: Bearer YOUR_CHANNEL_ACCESS_TOKEN' \
  -H 'Cache-Control: no-cache' \
  -H 'Content-Type: application/json' \
  -H 'Postman-Token: 3b66eceb-0791-499f-90b2-7340f82b242e' \
  -d '{
    "type": "LIFF_SIZE",
    "url": "YOUR_APP_URL"
}'

ส่งด้วย Postman

หาก Update แล้ว WebApp ยังไม่เปลี่ยน ให้ใส่ query string แบบผมก็ได้ครับ หลอกระบบมัน ผมเข้าใจว่ามัน cache ไว้ ถ้าใช้ url เดิม มันจะไม่ยอมเปลี่ยนค่าที่เราแก้ไขใน webapp ของเราให้ เลยต้องหลอกมันด้วยวิธีนี้

ดู LIFF app ทั้งหมด [Link]

จบง่ายๆ ด้วยการ GET ค่าไปที่ https://api.line.me/liff/v1/apps

curl -X GET \
  https://api.line.me/liff/v1/apps \
  -H 'Authorization: Bearer YOUR_CHANNEL_ACCESS_TOKEN' \
  -H 'Cache-Control: no-cache' \
  -H 'Postman-Token: 3389c0b1-e5af-40de-9829-298b38b835eb'

ส่งด้วย Postman เหมือนเดิม

ลบ LIFF app [Link]

ส่ง DELETE ไปที่ https://api.line.me/liff/v1/apps/{liffId}

curl -X DELETE \
  https://api.line.me/liff/v1/apps/{liffId} \
  -H 'Authorization: Bearer YOUR_CHANNEL_ACCESS_TOKEN' \
  -H 'Cache-Control: no-cache' \
  -H 'Postman-Token: 68a9ca93-fd55-40e6-8558-188d55714ddd'

ส่งด้วย Postman

วิธีการเปิดดู LIFF app

ก็ส่ง URL แบบนี้ในแชทเลยครับ line://app/{liffId}

เมื่อกดดู ก็จะได้หน้าจอแบบนี้

หรือถ้าแบบ compact ก็จะแสดงผลแค่นี้

ลองกด Get Profile เพื่อดึงข้อมูลส่วนตัว!!

สรุป

เฮ้ยมันง่าย มัน Cool! ตัว LIFF มันเชื่อมต่อกับ API ตัวอื่นๆ ของ LINE ได้เลย แล้วเราสามารถเอา Web App ที่มีอยู่มาขึ้นเป็น LIFF ได้เลย มันจะทำให้กระบวนการทำงานรวบรื่นขึ้น ไม่ต้องเปิดหน้านั้นหน้านี้ สามารถใช้ LIFF เพื่อนำ data เข้ามาใน chat ได้เลย เดี๋ยวคงต่อยอดกับโปรเจคที่กำลังพัฒนาอยู่ เนื่องจาก ผู้สูงวัยส่วนมากจะใช้ LINE กัน เขาไม่ถนัด facebook เหอๆ

แถม

LIFF Editor สั้นๆ ง่ายๆ ทีแรกลองใช้ฝั่ง js ทำ แต่ติดปัญหา Access-Control-Allow-Origin มัน GET ได้แต่ มันไม่ยอมให้ใช้ HTTP REQUEST อย่างอื่น เลยล้มเลิกไป มาใช้ PHP แทนแล้วกัน เอาไปใช้กันได้เลยครับ #ของมันต้องมี