開發Linebot(23) - LINE LIFF App初嘗試

先前我們介紹過了LINE LIFF App,你大概已經知道了它是一個便於開發類似  FB WebView或是微信小程序的機制。

LINE推出了這個機制是一個很重要的更新,這一篇我們要來看看如何撰寫一個LIFF App。

在這之前你必須知道:

  1. LIFF App可以使用HTML和javascript撰寫
  2. 最好是寫成RWD網頁,這樣崁入在LINE裡面看起來比較順眼
  3. 你可以透過js API做底下這些事情,諸如:
    1. 取得用戶User id
    2. 取得用戶身分資訊
    3. 以用戶的身分發送訊息給Line bot
  4. 此外,你可以透過底下幾種方式喚起LIFF App
    1. 送出一個網址(類似 line://app/1111111111-OxoxoxoxOx ) 讓用戶點
    2. 在Rich Menu當中做一個Url Button讓用戶點

我們在上一篇介紹過如何建立與在LINE bot中整合LINE LIFF,這篇來介紹撰寫LIFF的時候可以有哪些基本功能。

從下圖中你可以看到,我們在Rich Menu中建立了兩種按鈕,一個直接開啟url的button,一個是顯示文字(該url)的Button,這兩種方式都可以讓用戶觸發開啟LIFF。

用戶可以從Ruch Menu喚出LIFF App:

此外,不管是LINE bot說出這個網址,或是用戶自己說出這個網址,只要有LIFF的url,用戶就可以點,點了就可以開啟LIFF。我們再看底下這個有趣的例子:

請特別注意一個有趣的地方,LIFF的url長像是 line://app/1111111111-OxoxoxoxOx  這樣,但你居然可以在該url後面加上 QueryString,像是:
line://app/1111111111-OxoxoxoxOx?a=123
它會自動pass給你的網站,例如你看到上面的 a=123在我們進入WebApp中,可以透過抓取QueryString的方式抓到參數,並顯示到TextBox中(執行結果在上圖):

這個機制有助於我們只需要撰寫單一一個LIFF,就可以依照不同的用戶或需求(以QueryString區分),執行不同的功能。

此外,在LIFF中抓取User Id也是基本功能。
底下的程式碼在document ready之後,透過liff.init(…)初始化LIFF,在傳回來的data.context中,就包含了UserId:


除此之外,我們也可以透過js很輕鬆的取得User Profile:

抓取profile.displayName之後顯示在textbox中,如下圖:

有趣的是居然可以用alert(…)是出乎我意料之外的。

你也可以在LIFF中,透過SendMessages以用戶身分傳送訊息給Line Bot:

執行結果如下:

你會發現透過js可以幫用戶傳送訊息(其實不只文字,貼圖、圖片、或其他訊息當然也行),到對談視窗中。

這些功能雖然基本,但已經可以完成不少行動裝置上的應用了。

整個頁面都是透過pure html和js撰寫,完整的程式碼可以參考:
https://github.com/isdaviddong/testLIFF/blob/master/WebApplication3/default.html

注意,其中用到了LIFF的sdk.js:

把該頁面佈署到支援https的站台,然後透過先前介紹過的方式,把網址註冊到你的Line bot中,就成為一個LIFF App了。

如果你懶的寫html和js想測試一下,你可以試試看直接註冊底下這個我寫好的測試LIFF App,網址如下(但隨時可能會刪除唷,僅供測試):
https://testliff.azurewebsites.net/default.html 
只需要透過先前介紹過的方式註冊到你的Line bot上即可。

have fun~

-----------
線上課程:https://www.udemy.com/line-bot/
電子書:http://studyhost.blogspot.tw/2017/12/line-bot.html
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

留言

Unknown寫道…
請問老師,可以將linebot加入ㄧ個群組,並在群組內使用liff嗎?
鄒仔寫道…
使用liff和linebot有沒有加入群組沒有直接關係,但可以配合。

line://app/1564224500-rmXq7koQ
Unknown寫道…
感謝解惑,已經沒有疑問囉!
Unknown寫道…
老師抱歉,想請教一個與本篇無關的問題,小弟最近使用老師的套件進行Line Bot的開發,因為我想讓使用者輸入關鍵字觸發機器人傳送影片,但無ReplyVideoMessage這類的功能,我嘗試以ReplyImageMessage的功能來做,雖然算是可以完成我的功能,但是我出現一個問題,點擊縮圖後會現跳出一個確認視窗,要我確認檔案內容才可以開啟,但開啟也只能透過網頁開啟連結,無法直接使用Line的播放功能直接播放,再麻煩老師解惑,謝謝老師!
isDavid寫道…
@james,

請將linebotsdk升級到 0.7.5的版本,你會看到開始支援PushMessageWithJSON以及ReplyMessageWithJSON,透過這兩個API,你可以回覆任形式的訊息,只需要透過JSON將訊息組出來即可。

請留意follow LINE的規範,訊息JSON必須是陣列格式 ,類似 [ {...} } 這樣的JSON
Unknown寫道…
謝謝老師解惑,我會嘗試看看的。
Hung-Hsiang Wu寫道…
我在test.aspx 當中的initializeApp(data) 加入了
('#UserInfo').val(data.context.displayName);
為什麼不會顯示出來呢?
謝謝~
Jacky寫道…
作者已經移除這則留言。
墨香寫道…
老師您好,我來幫您補充一些東西,還望別嫌棄,
自己使用 webform 建時一直跳出 typeError,
找了一天才發現原來在HTML中,按鈕不能用 button ,會導致刷新頁面 ! 頁面一旦刷新就不能sendmessages了 !

這個網誌中的熱門文章

使用 Airtable 在小型需求上取代傳統資料庫

使用Semantic Kernel 建立自然語言請假系統

精彩(且驚人)的Semantic Kernel入門範例

在 LINE Bot 開發中使用Semantic Kernel建立自然語言請假系統

專業的價值...