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

2018年6月11日 星期一

在Node.js中使用LUIS

我們沒事好好的幹嘛去弄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囉…

2018年6月10日 星期日

使用VS Code開發Node.js

最近由於在AI課程中有愈來愈需要支援(不是系統,是我)其他語言的趨勢,因此VS Code在毫無疑義的狀況下,成為.net環境以外的開發工具。

所以,相關的筆記,也稍微整理一下,以備不時之需。這一篇,就是。

其實要用VS Code開發Node.js超簡單,從一台空的PC開始。

  1. https://code.visualstudio.com/下載安裝好VS Code
  2. 習慣性的順便安裝 Git 反正早晚會用到 https://git-scm.com/downloads
  3. 然後從這邊 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頁面囉。

VS Code的字體大小

身為.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" Smile

2018年6月6日 星期三

開發Linebot(22) - 使用LIFF在Linebot上建立WebView/小程序

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-OxoxoxoxOx"
}

例如底下我用這樣的post把購物網站崁入我先前做的Line bot:
(注意,這只是個測試,實務上我們不建議你把別人的網站崁入你自己的Line bot,因為網址列後面可能會加上用戶參數或資訊,如果網站不是你自己開發的,可能會有個資外洩風險,而且亂嵌別人家的網頁也是沒有格調的事,對不起我錯了…)

然後把你取得的LIFF ID,組合成底下這樣的網址:
line://app/1111111111-OxoxoxoxOx

未來你就可以透過上面這樣的網址在Line bot中開啟WebView了:

上面這個就是我們剛才設定的大小為 tall 的WebView,它是怎麼被叫出來的呢? 其實只要當用戶在該Line bot中,點選剛才組出的 line://app/1111111111-OxoxoxoxOx 這樣的網址,就會自動叫出WebView,不過最簡單恰當的方式我自己覺得是Rich Menu,我們只需要把剛才組出的網址,填入Rich Menu作為url button即可:

這樣就可以在用戶點選該Button後,開啟WebView了:

其實還蠻簡單的,如此一來,你就可以不離開LINE App,在Line bot當中擴充/加入你所需要的功能了,當然,你在WebView開啟的RWD網頁中,可以透過js API取得用戶相關的資訊,或與用戶做一些互動,這些進階的功能,我們稍晚一些找時間再跟大家介紹囉。

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

Related Posts Plugin for WordPress, Blogger...

熱門文章