ติดตั้ง Line LIFF ให้กับ โปรเจค VueJS กัน

วันนี้เราจะมาลองติดตั้ง Line LIFF หรือ Line Front-end Framework ให้กับ โปรเจค Vuejs และ ลองเล่น LIFF APIs ต่างๆกัน

สามารถอ่านเพิ่มเติมเกี่ยวกับ ได้ที่ Line LIFF

ตัวอย่างที่ผู้เขียนจะเอามาเป็นตัวอย่างก็คือ Line LIFF Starter เราจะทำการเปลี่ยนโปรเจคตัวนี้ให้อยู่ในรูปแบบ VueJS แบบ Step By Step

สร้างโปรเจค Vue

vue create vuejs-liff

ติดตั้ง LIFF SDK

ทำการติดตั้ง SDK โดยการก็อปปี้ลิ้งค์ SDK จาก https://developers.line.me/en/docs/liff/developing-liff-apps/

ติดตั้ง Line LIFF เข้า Vue Instant

โดยการ Inject LIFF ไปที่ Vue Prototype ไว้ที่ไฟล์ src/main.js

https://vuejs.org/v2/cookbook/adding-instance-properties.html

Initializing LIFF

ขั้นตอนนี้เราก็ทำการ Initial LIFF App ถ้าเราไม่ได้ทำการ Initial เราจะไม่สามารเรียก LIFF APIs ได้

https://developers.line.me/en/reference/liff/#initialize-liff-app

https://developers.line.me/en/reference/liff/#liffinit()

ติดตั้งเรียบร้อย Hoolay

ขั้นตอนต่อไป มาลองใช้งาน LIFF APIs กัน

Open Window

https://developers.line.me/en/reference/liff/#liffopenwindow()

Close Window

https://developers.line.me/en/reference/liff/#liffclosewindow()

Send Message

https://developers.line.me/en/reference/liff/#liffsendmessages()

Get Profile

https://developers.line.me/en/reference/liff/#liffgetprofile()

เรียบร้อยเท่านี้โปรเจค Vue ของเราก็สามารถ open window, close window, send message, get profile ได้แบบ Line LIFF Starter ล่ะครับ

หน้าตาก็จะประมาณนี้

https://vuejs-liff.herokuapp.com/

2 ขั้นตอนสุดท้าย

• อัพโค๊ดขึ้นโฮส อย่างของผมไว้ที่ Heroku
• Add LIFF App กับทาง Line รายละเอียดเพิ่มเติม

GitHub

https://github.com/saspallow/vue-line-liff

Dependencies

• CSS Bulma
• VueJS Framework

ไว้จะมาแบ่งปันอีกครับ ~~

*ผิดพลาดประการใดขออภัยมานะที่นี้ด้วยครับ