LIFF app 初體驗

LIFF APP 初體驗

LIFF 是一個可以在 LINE 中打開 web 的平台。透過這種方式打開的 web，可以直接拿到使用者允許提供的個人資料。這可以幫助整個流程，不因為外連網頁而中斷。例如說可以在 Chat Bot 中，已經跟使用者進行了一些互動，而接下來的行為較為複雜，可能是抽獎或是其他活動，需要在 web 裡操作更方便。此時透過 LIFF apps，便能更順暢的繼續完成整個流程。

註：應用在 LIFF 的 web，被稱為 LIFF app

所以好處看起來是

  1. 可以無縫串接整個流程，不會因為要外連網頁而中斷使用者體驗。

那要如何開始呢？

首先使用 line 帳號創一個 business 帳號

要創一個 provider，

並在底下建一個 channel，

目前 line 規定必須要增加的是 line login

接著可以照著 line 官方提供的流程

https://github.com/line/line-liff-v2-starter/blob/master/README.md#what-youll-need

我是照 Customize the app and deploy it on Heroku via the terminal 這個流程走的，
透過 heroku 作為伺服器。

首先確定你已準備好幾樣東西

  1. 確定電腦有安裝 git、node.js 和 heroku
  2. 並以建立好 line 的 channel

確定好後，先把 line 官方的 demo code 抓下來

1
git clone https://github.com/line/line-liff-v2-starter

然後在 npm i 安裝其套件

另外也先準備好 heroku 的環境

1
2
3
heroku login
heroku create {Heroku app name}
heroku git:remote -a {Heroku app name}  // 把 heroku 跟 git 專案連起來

接著在回到 line 的官方介面，在你剛剛建好的 channel 新增一個 LIFF

這時候會有一些可以設定的參數

  1. LIFF app name
  2. Size(可以決定 app 打開時有多高)
  3. Endpoint URL(在這邊就是{Heroku app name}.herokuapp.com)

    …等

更詳細的說明在這裏，

https://developers.line.biz/en/docs/liff/registering-liff-apps/

新增完畢之後，記得把 ID 記下來，

然後把 ID 放在 heroku 的環境裡，

你可以透過 

1
heroku config:set MY_LIFF_ID={liffId}

也可以直接透過 heroku 的後台介面新增。

最後再把專案推上去。

1
2
3
git add .
git commit -m "My first commit"
git push heroku master

之後在 line 中點擊網址（https://{Heroku app name}.herokuapp.com），你就可以開啟你的 LIFF APP。




ref


https://github.com/line/line-liff-v2-starter/blob/master/README.md#Customize-the-app-and-deploy-it-on-Heroku-via-the-terminal


https://medium.com/aiii-ai/line-liff-%E5%8F%AF%E4%BB%A5%E5%81%9A%E4%BB%80%E9%BA%BC-eb2ca40147ac