.NET Walker

先前 我們介紹過了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： 除

我們沒事好好的幹嘛去弄Node.js呢? 還會為了誰? 當然就是LUIS。 還記得它吧，我們在很多地方介紹過LUIS，因為它是我們玩chatbot時候做自然語言語意分析(NLP)的要角，如果你忘記了，可以參考… 使用LUIS，讓你的bot理解用戶輸入文字的意義 建立LUIS服務處裡自然語言辨識 使用C#開發Linebot(20) - 不寫一行code完成Linebot的LUIS串接 OK，chat bot寫著寫著，開始有各種不同語言的需求，所以Node.js中使用LUIS也是剛好而已。(後面還有Python在等著) 前面我們介紹過 如何使用VS Code開發Node.js ，其實重點是為了這一篇如何在node.js中呼叫LUIS服務，其實也很簡單，我們可以參考 這篇 裡面的程式碼: 我稍微改了一下，主要是LUIS的app id與Key要換成你自己的(原本程式碼裡面採用.env環境變數，為了說明方便，這邊就先寫死了): 上圖中的App id和Key我換成了一個我訓練好的點餐服務LUIS App，所以我把 q 打成『我要大亨堡』，別忘了，這段程式碼要能運行，你還得用npm裝幾個套件： 完成後，試著按下F5在VS Code中執行app.js，結果如下： 成功的呼叫LUIS服務取得最可能的Intent囉…

最近由於在AI課程中有愈來愈需要支援(不是系統，是我)其他語言的趨勢，因此VS Code在毫無疑義的狀況下，成為.net環境以外的開發工具。 所以，相關的筆記，也稍微整理一下，以備不時之需。這一篇，就是。 其實要用VS Code開發Node.js超簡單，從一台空的PC開始。 從 https://code.visualstudio.com/ 下載安裝好VS Code 習慣性的順便安裝 Git 反正早晚會用到 https://git-scm.com/downloads 然後從這邊 https://nodejs.org/en/download/ 安裝 Node.js ，我選 .msi 64-bit，他會順便裝npm(it’s package manager for JavaScript)，以後會常用。 裝完之後可以參考 https://code.visualstudio.com/docs/nodejs/nodejs-tutorial 開始你的第一支Node.js，用慣VS的人可能會覺得底下這樣很妙，你要建立一個node.js專案，可以在cmd line先建立一個空的folder: 然後下『code  .   』這個指令。 啥意思，就是在目前的目錄下開啟VS Code，出現後，在資料夾底下建立一個 app.js： 然後輸入畫面上這樣的code。 var msg = 'Hello World'; console.log(msg); 如果沒問題，按下F5試試看： 出現執行結果了，其實還挺方便的。有沒有原始一點的執行方式? 當然有： 回到cmd line底下，執行node app.js，也可以得到一樣的結果。 使用express 寫node.js當然要做Web App，所以，立馬安裝一下 express 安裝完成之後，執行 express expAp: (其中的expAp是你想建立的資料夾名稱) 接著使用npm install安裝相關套件後，以npm start開啟Node.js web server: 成功執行的話，你就可以在 localhost:3000 找到你的node.js頁面囉。

身為.net developer，這年頭是什麼code都得要會寫的年代。 而雖然我的NB還沒從Windows淪陷為Mac OS，但寫Node.js和Python免不了要用VS Code，這是一種愛的表現。 但歲月不饒人，盡管微臣非常熱於配合，但VS Code預設字體的大小在我還沒錢買大尺寸螢幕的狀況下，實在讓老臣難以適應。當下的第一個反應是什麼? 當然是 Ctrl+滑鼠滾輪往上推…哇靠，沒用。看…這設計…恩，千錯萬錯一定是我的錯。 只好從選單 file –> Preferences –> Settings: 在出來的視窗中，你可以看到 editor.fontsize: 沒錯，改它就行了。改不動? 喔，不好意思，我沒仔細看說明，要copy到右邊是吧，沒問題，copy->paste->modify->Save…搞定。 好簡單啊…連ctrl+(mouse scroll up)都用不到了呢… 咦?這是一篇抱怨文嗎? 沒有，誰說的? 免費的tool我們還有什麼好抱怨的呢…要感恩啦。 啊….對了，如果你還是堅持要使用 Ctrl+滑鼠滾輪，請找關鍵字… "editor.mouseWheelZoom"

LINE 似乎覺得6/6是一個挺順的日子，終於選了這一天提供了類似FB Messenger上的WebView功能，LINE稱之為LIFF(LINE Front-end Framework)。 和Messenger一模一樣，LIFF有三種高度，分別是： 開發人員可以透過很簡單的http post呼叫，把特定的網頁(當然最好是RWD或手機版網頁)崁入/連結到某一個Line bot或是Line Login中。 如此一來，我們就可以在Line bot中，直接整合/開啟一個如同上面這樣的畫面來使用你自己開發的Web功能，當然，在網頁中你還可以透過js跟LINE或用戶有一些互動，諸如取得用戶身分之類的… 要如讓你的Line bot具有這樣的功能，很簡單，只需要呼叫下這樣的http post: curl -X POST https://api.line.me/liff/v1/apps  -H "Authorization: Bearer {你Linebot的Channel Access Token}" -H "Content-Type: application/json"   -d '{ "view":{ "type":"full或tall或campact", "url":"https://你的RWD網頁網址" } }' 其中header Authorization的bearer token的地方放你的line bot的channel access token，然後組一個JSON Body，在type的地方放你想要出現 的WebView 的大小，url的地方放一個https的網頁，最後對 https://api.line.me/liff/v1/apps  送出POST，就可以針對指定的Line bot註冊該網頁，以便於以後把該網頁以WebView的方式崁入到你的line bot中。 當你對 https://api.line.me/liff/v1/apps 送出JSON之後，會得到類似底下這樣的JSON Response： {      "liffId": "1111111111-OxoxoxoxO