LIFF 與 Angular 共舞實作 - 01

上上週去LINE Developers Meetup參加了LINE新的技術分享會,除了超級好吃的食物跟超棒的場地外,不外乎就是一堆神人分享技術,跟超正主持人(?),根本是視覺味覺饗宴。

Image for post
Image for post

LIFF 全名是 LINE Front-end Framework,是用來打造一些在LINE聊天室內打開的Web App平台。由於剛推出沒有很久,似乎還沒有很多人意識到這個平台的價值性,現在還可以結合LINE Things控制IOT物聯網,結合SPA網頁做官方帳號額外LINE功能擴充等等。

實作:

這邊我們從建立一個 Angular APP 開始:

Image for post
Image for post

首先打開VS Code,然後假設大家都會基本的Angular,新增一個ng專案

ng new liff-app

進入資料夾之後,下載保哥打造的擴充套件LIFF Snippets,也可以直接到擴充套件輸入保哥搜尋,通常是前幾個。

Image for post
Image for post

打開之後可以看到保哥的說明:

Image for post
Image for post

進到專案裡面要先先到index.html加入一行liffsdk,這樣才可以執行LIFF相關套件,只要輸入liff

Image for post
Image for post

就會出現Code Snippet,就會自動填入下面這個套件

<script src="https://d.line-scdn.net/liff/1.0/sdk.js"></script>
Image for post
Image for post

在app資料夾底下加入app.d.ts檔案(根據使用狀況而定),在裡面打liff之後會看到擴充套件帶來的方便之處,建議清單

Image for post
Image for post

這時候點liff-tsd

Image for post
Image for post

Magic!!保哥已經幫大家打好型別定義了。覺得神奇可以去點五顆星給保哥支持一下嚕。

接下來進入component的TS檔我們先來定義一個profile,型別是LIFFUserProfile

Image for post
Image for post

要開始使用LIFF就要先把liff加到初始化裡,這時在OnInit一樣打入liff

Image for post
Image for post

由於我們是要拿使用者資料,所以點選profile,事實上沒有要取得使用者資料的話點上面那個 liff-init 就可以了。

Image for post
Image for post

註解裡都有API詳解網址跟可以取得的各Data屬性,還可以獲知當前View的大小(通常是你自己在LIFF Channel設定的除非這個網頁有不同的Liff APP進入點,就可以根據View等等屬性切換功能)

Image for post
Image for post

接下來我們實作一下,如果我叫CK Sun,就會跟我說Hello,如果我不是CK Sun,就會跟我說HI。

Image for post
Image for post

由於型別定義的關係,我們在Template輸入變數的時候就會很方便讓我們選擇。

這樣基本的程式碼已經完成,但在LIFF裡有個限制就是Endpoint必須是Https開頭的加密網址(如果你都會設定就直接跳到LIFF環境設定),這時候我們方便開發就會推薦大家裝一個東西:Ngrok,按照指示註冊安裝完之後,把下載的ngrok加入環境變數,事實上Mac使用者可以用

brew cask install ngrok

直接安裝(記得在官網複製Token值設定),然後推薦大家直接裝live-server來啟動伺服器,如果直接用ng-serve,請記得用— disable-host-check來避免用不同host進入Angular App阻擋的問題。

ng serve --disable-host-check

live-server安裝方式很簡單:

npm install -g live-server

啟動伺服器之前要先Build專案,輸入以下指令來執行

ng build --prod

接下來Angular CLI會在dist資料夾底下建立好專案的production版,直接打下面這行(記得替換{app-name}成你的app名字)在liveserver上執行

live-server dist/{app-name}/

會出現網址代表成功

Image for post
Image for post

接下來就是用ngrok導向本地端伺服器,8080是根據開起來的port

ngrok http 8080

成功會出現:

Image for post
Image for post

可以先打開https開頭網址測試是否有連線成功。並記好這段連結。

接下來進入LIFF環境設定階段:

Image for post
Image for post
LINE Developers

登入之後,可以看到後台頁面,由於我已經創建一個LINE channel,所以頁面中會有,沒有的人請按Create New Provider,接下來會出現

Image for post
Image for post
點選Messaging API

請先點選Messaging API頻道來創建頻道。接下來跟著說明把資訊填入之後,創建完之後進入剛創建完的Channel頁面

Image for post
Image for post

並往下滑到底會有QR Code可以自己加入機器人。

Image for post
Image for post

掃完之後可以加入自己的機器人,可以說個 Hello,然後在QR Code下面有個Basic ID,可以透過下面連結到管理頁面。可以點選聊天TAB(聊天模式請從機器人改成聊天訊息)可以跟自己對話。

https://manager.line.biz/account/@你的機器人ID

,回到剛剛的Channel頁面然後點選LIFF TAB

Image for post
Image for post
Image for post
Image for post

可以看到新增的頁面,然後點Create a new LIFF App創建新的Web App

Image for post
Image for post

可以看到有三個Size,分別是Full,Tall,Compact,如下圖

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
由左至右Full,Tall,Compact

輸入Endpoint,就是上面我們Ngrok提供的網址或是你自己的網站也可以 。BLE的部分等有實做的時候再來講解,先丟概念圖:

Image for post
Image for post

就是一個支援外連裝置的應用,可以做一些Web APP驗證完使用者的UserID然後就透過BLE方式啟動藍牙裝置等等。

接下來點選確認之後,複製LIFF URL後面的line://app/xxxx。到聊天機器人的頁面點選聊天,把URL貼給自己,打開它

Image for post
Image for post

會先驗證是否讓Web App取得資料按下許可就會進入APP如下圖所示:

Image for post
Image for post
Image for post
Image for post

由於我們剛剛程式有設定好:

Image for post
Image for post

如果是CK Sun就說Hello,如果不是完全符合的就說Hi,

接下來試著取看看其他資料如UserID

Image for post
Image for post

再來開啟測試:

Image for post
Image for post

這樣就可以試著做其他應用用途,實際上API還有很多種,有興趣的人可以到LIFF API referencet查詢。

Angular 與 LIFF 共舞 (LINE Developer Meetup)保哥上課Keynote

Stackblitz範例連結

結語

Written by