2018年6月13日 星期三

開發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專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

3 則留言:

tsai wayne 提到...

請問老師,可以將linebot加入ㄧ個群組,並在群組內使用liff嗎?

鄒仔 提到...

使用liff和linebot有沒有加入群組沒有直接關係,但可以配合。

line://app/1564224500-rmXq7koQ

tsai wayne 提到...

感謝解惑,已經沒有疑問囉!