開發Linebot(23) - LINE LIFF App初嘗試
先前我們介紹過了LINE LIFF App，你大概已經知道了它是一個便於開發類似 FB WebView或是微信小程序的機制。
LINE推出了這個機制是一個很重要的更新，這一篇我們要來看看如何撰寫一個LIFF App。
在這之前你必須知道:
- LIFF App可以使用HTML和javascript撰寫
- 最好是寫成RWD網頁，這樣崁入在LINE裡面看起來比較順眼
- 你可以透過js API做底下這些事情，諸如:
- 取得用戶User id
- 取得用戶身分資訊
- 以用戶的身分發送訊息給Line bot
- …
- 此外，你可以透過底下幾種方式喚起LIFF App
- 送出一個網址(類似 line://app/1111111111-OxoxoxoxOx ) 讓用戶點
- 在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專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。
留言
line://app/1564224500-rmXq7koQ
請將linebotsdk升級到 0.7.5的版本，你會看到開始支援PushMessageWithJSON以及ReplyMessageWithJSON，透過這兩個API，你可以回覆任形式的訊息，只需要透過JSON將訊息組出來即可。
請留意follow LINE的規範，訊息JSON必須是陣列格式 ，類似 [ {...} } 這樣的JSON
('#UserInfo').val(data.context.displayName);
為什麼不會顯示出來呢?
謝謝~
自己使用 webform 建時一直跳出 typeError，
找了一天才發現原來在HTML中，按鈕不能用 button ，會導致刷新頁面 ! 頁面一旦刷新就不能sendmessages了 !