2019年3月12日 星期二

使用MS Bot Framework建立一隻支援LINE Bot的對談機器人

令人期待的事情總是拖得比較久。

但MS Bot Framework支援LINE Bot的這一天總算是來臨了。

先說說為何大夥們會希望Bot Framework支援LINE? 其中最基本的因素大概是Bot Framework目前已經支援多種Channel、本身又內建狀態管理機制、可以很方便的串接自然語言對談和撰寫程式碼,這讓開發人員有機會,只需要寫一次Bot核心Business Logic的code,就讓前端同時支援Web/Skype/FB Messenger/LINE/Telegram…等多種IM:

過去Bot Fx是沒有支援LINE這個Channel的,在眾多開發人員的催促下,微軟從善如流的照做了…好,我們這就來看看Bot Fx如何支援LINE?

首先,請在Azure Portal上用最基本的方式(Web App Bot)建立一支Bot:

稍微留意一下底下的輸入畫面:

現在的Azure Portal,常常在我們建立一個資源時,同時建立很多資源。這啥意思? 例如我們要建立一個支援LINE的Bot,但其實他後面有Azure Web App,Storage,甚至LUIS或QnA Maker(看你的選擇),所以這一建常常一堆資源出現,因此我們都會建議讀者把這些資源建立在同一個新開的資源群組(Resource Group),以便於日後要刪一起刪方便維護,請參考上圖2。

至於機器人範本,我們建議選擇Echo Bot,先維持簡單就好(上圖5)。

建立好之後,我們立刻到這個資源來看看:

到了該資源之後,我們可以先點選頻道,你會看到預設狀況下已經有一個頻道(Web Chat)在跑步了…(唉,跑什麼步啊…是running啦…)

你可以點選在WebChat中測試,系統會用Web UI讓您測試:

沒錯,他跑起來了,就是一個Echo Bot…

接著,我們要讓他支援LINE,請進入頻道設定,輸入下圖中1,2的資訊:

等等,上面的『頻道秘密』和『頻道存取權杖』是什麼?

如果你有建立過LINE Bot應該就知道(沒建立過可以參考這邊),它是你可以從LINE Bot後台找到的 Channel Secret和Channel access token啦(btw, 建立的LINE Bot必須支援Push):

別忘了,剛才上一張圖中的WebHook URL(標示3),你必須回填到LINE Bot的管理後台:

設定完成之後,我們立刻加入這隻LINE Bot瞧瞧:

YA,可以work囉…就這樣。

沒了…很簡單吧…至於這Echo Bot的程式碼是怎麼寫的? 該如何調整呢?

請看Azure Portal上的組建,其實有非常完整的說明:

好啦,這讓我們開發LINE Bot又有一個更方便的選擇,有興趣的朋友別錯過囉…

------------------
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
相關課程:http://www.studyhost.tw/NewCourses/LineBot
線上課程:https://www.udemy.com/line-bot/
更多內容,請參考電子書:https://www.pubu.com.tw/ebook/103305
LINE Bot實體書籍:https://www.tenlong.com.tw/products/9789865020354

2019年2月12日 星期二

[index] 使用C#開發LINE Bot系列文索引 (2019 update)


LINE Bot這一系列,從2016年五月開始,寫著寫著也快30篇了,差不多剛好一個月一篇,如果資訊雜誌還在的話,應該可以是一個專欄。
很久沒有整理索引了,2019年初,再次將這一系列相關連結整理如後:
使用C#開發LineBot (1) - 用c#建立一個LineBot
使用C#開發LineBot(2) - 新版Line@ Messaging API使用心得 (Line Bot v2)
使用C#開發LineBot(3) - 使用LineBotSDK發送Line訊息
使用C#開發LineBot(4) - 透過asp.net輕鬆建立Line機器人WebHook
使用C#開發LineBot(5) - 透過程式碼讓Linebot發送圖片、貼圖
使用C#開發LineBot(6) - 不用申請Bot也能發訊息的Line Notify
使用C#開發LineBot(7) - 使用Line Login實現oAuth SSO(單一登入)
使用C#開發LineBot(8) - 發送Template Message
使用C#開發LineBot(9) - 取得新加入的好友身分資訊
使用C#開發LineBot(10) - 取得用戶上傳給Linebot的照片
使用C#開發LineBot(11) – Chat bot如何處理連續對話
使用C#開發LineBot(12) – 在連續對話中加入ButtonsTemplate訊息
使用C#開發LineBot(13) – 使用Date Time Picker讓用戶輸入日期資訊
使用C#開發LineBot(14) – 新版建立Line Bot流程(2017年底)
使用C#開發LineBot(15) – 當Linebot與我們同在一起, 談群組(聊天室)處理
使用C#開發LineBot(16) – 讓 WebHook 開發更輕鬆
使用C#開發LineBot(17) – 使用新版Line Login v2.1使用C#開發LineBot(18) - 不寫一行code完成Line bot
使用C#開發Linebot(19) - 建立LUIS服務處裡自然語言辨識使用C#開發Linebot(20) - 不寫一行code完成Linebot的LUIS串接使用C#開發Linebot(21) - ImageCarouselTemplate的支援開發Linebot(22) - 使用LIFF在Linebot上建立WebView/小程序開發Linebot(23) - LINE LIFF App初嘗試
使用C#開發Linebot(24) - 建立LINE Liff App
使用C#開發Linebot(25) - 動態 re-issue short-lived channel access token使用C#開發Linebot(26) - 利用ngrok讓你的Line bot可以使用localhost作為WebHook
使用C#開發Linebot(27) - 在發送的訊息中加上Quick Reply
使用C#開發Linebot(28) – Rich Menu的建立和使用使用C#開發Linebot(29) – 透過API動態建立Rich Menu
在LINE Bot中使用Imgur作為圖檔保存位置
------------------
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
相關課程:http://www.studyhost.tw/NewCourses/LineBot
線上課程:https://www.udemy.com/line-bot/
更多內容,請參考電子書:https://www.pubu.com.tw/ebook/103305
LINE Bot實體書籍:https://www.tenlong.com.tw/products/9789865020354

如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

2019年2月11日 星期一

使用C#開發Linebot(29) – 透過API動態建立Rich Menu

好了,前面知道了手動透過LINE@後台設定Rich Menu的方式,接著我們就要來看,如果開發人員打算透過API來動態建立選單,該怎麼做呢?

Rich Menu的使用流程

如果要透過API來建立Rich Menu,建議您依照底下的流程:

  1. 準備好一張圖片
    2500x1686 or 2500x843 pixels,格式為 .png
  2. 透過CreateRichMenu(…)方法來建立Rich Menu
  3. 透過SetDefaultRichMenu (…)方法將Rich Menu設定為Default Rich Menu(給所有用戶)
    或是
    透過LinkRichMenuToUser(…)方法將Rich Menu設定給特定用戶

建立前的準備

好,我們接著就試試看如何透過程式碼來動態建立Rich Menu,我們先準備好一張圖片,類似底下這樣:

它看起來不像選單?對,我們故意用這個看起來比較特別的圖片,你會發現其實當我們用程式碼來建立Rich Menu時,自由度其實比透過LINE@後台要高很多。

如果需要的話,你可以從底下網址下載這張圖片:

http://arock.blob.core.windows.net/blogdata201902/test01.png

這張圖片的左右兩塊,分別是兩個按鈕區塊,整張圖片的尺寸是 2500x1686,而這兩個左右區塊的座標,分別是:

左方:(0,0)-(460,1686)

右方:(2040,0)-(2500,1686)

我們待會要建立出一個效果,讓用戶看到這個Rich Menu,可以按下左方區塊按鈕,或是右方區塊按鈕,按下去的時候,分別顯示相對應的文字。

透過程式碼建立default Ruch Menu

有了圖片之後,我們來看怎麼建立這個選單,程式碼如下:


程式碼一開始,我們建立了一個RichMenuItem()物件,然後設置了name和chatBarText這兩個屬性。這兩個屬性都不能是空值。而預設的尺寸是2500x1686,如果你不想改變它,就無需特別設定。

然後接著程式碼建立了兩個Area物件,分別是左方和右方按鈕區塊。例如建立左方區塊Area的程式碼如下:

重點在bounds物件的x,y,width,height分別定位出了該按鈕區塊的範圍,以左上(0,0)右下(2500,1686)的座標型式,而每一個Area物件同時也可以擁有一個action,這個action就是用戶按下該區域時,LINE Bot所要做出的動作,而可以用的物件,其實和Template Message的Action完全一樣,所以支援message、Uri、postback…等。

而我們在上面例子中,使用的是最簡單的message action,其他action我們在介紹Template Messag的時候也介紹過。

別忘了,建立好了area物件之後,要將其加入RichMenuItem中:

然後透過CreateRichMenu(…)方法,我們就可以動態的建立一個RichMenu。請注意上面的CreateRichMenu()這個Method有傳入三個參數,其中一個Uri(…)是圖檔的位置,我們可以直接提供一個在網際網路上的圖檔作為RichMenu的顯示圖檔。當然,它必須符合RichMenu的大小並且是.png的格式。

如果建立成功,會回傳一個menu物件,menu物件的richMenuId屬性,就是剛建立好的RichMenu的id,一般來說,這個id會長得像底下這樣:

richmenu-0abe5a58d7d44d787b2a3cdb39fd7ea9

注意我們程式碼的最後,還透過SetDefaultRichMenu(…)這個方法,把該RichMenu設定為『所有用戶的』預設選單:

成功後,用戶開啟該LINE Bot,就會看到我們透過API設定的Rich Menu了:

而且,因為我們程式碼中設定的MessageAction,當用戶按下上圖中的左鍵時,會出現『/左』,按下右鍵時則是『/右』,有點像是控制電玩的按鈕一般。

好啦,如果連這樣的Rich Menu都可以建立,那一般標準的三格或六格區塊的Rich Menu應該也難不倒大家吧?

如果想試試看,請更新到最新版本的LINE Bot SDK:
https://www.nuget.org/packages/LineBotSDK/0.9.3

-----------

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

使用C#開發Linebot(28) – Rich Menu的建立和使用

Rich Menu是LINE Bot開發當中一個非常重要的機制,甚至可以說是LINE Bot的特色,它是一個讓我們有機會可以開始把LINE Bot當作資訊系統來操作的重要功能,接下來幾篇文章,我們要來談談這個部分。

什麼是Rich Menu?

一般來說,Rich Menu是一塊像是下圖這樣的選單,可以有不同的區塊分隔設計,每一個區塊可以設計成按鈕或選單的形式,類似像下圖下方框線標示出的區塊這樣:

不一定只能像是上面這樣,將圖示按鈕切割成上面這樣的六塊,也可以是底下這樣三塊的配置:

具體配置方式其實有很多種,我們後面會陸續跟大家介紹。

在這些按鈕上,我們可以賦予不同的功能,像是點選後開啟特定URL,或是幫用戶說一句話,甚至是觸發postback event、開啟DateTime Picker,幫助用戶輸入GPS地址…等。

另外,透過API,我們可以動態的決定特定(或是所有)用戶呈現出的Rich Menu,不僅如此,我們可以非常自由的定義Ruch Menu的外觀,以及按鈕上面的功能與形式。

我們甚至可以實作出類似選單切換的效果,讓一個用戶享有不只一組Rich Menu,如此一來,我們幾乎可以把LINE Bot當作小型的應用系統來玩,特別是搭配了LIFF(LINE Front-end Framework) App之後。

Rich Menu的功能與手動設定方式

好,我們看過了選單的外觀之後,接著來看看,一般來說,要如何設計這個選單呢?

目前有幾種不同的選擇,可以透過LINE@後台『建立圖文選單』的方式來設計,也可以透過API來動態設計。

從LINE@後台設計的方式其實很簡單,可以從LINE@後台 https://admin-official.line.me 這個網址登入,然後找到你的Bot,點選後,可以看到該Bot的左方選單中有一個建立圖文影音內容的選項,你可以在其中找到『圖文選單』:

點選後即可設計,它分為兩種設計方式,一種是以圖片的方式製作,另一種是以『文字和圖標(其實就是圖示)』的方式製作。

如果你選擇後者,畫面上會出現上面兩種版型,你可以選擇其中一種分隔方式。

選好之後,下方會出現相對應的『選單內容設定』:

你可以在上圖A的部分選擇你要設定的是哪一個區塊,B的部分則是讓你選擇按鈕的圖示,C的部分則是要呈現的功能,有三個選項可以選擇,如果你選擇網址,則用戶點選該按鈕時,就會開啟該網址。

建立好後的選單大致長底下這樣:

雖然相較之下單調了些,但在沒有美編設計圖示的狀況下,也不失為一個方便的選擇。

至於用圖片的方式製作,就必須先準備好了一張1200x810尺寸的.png圖檔,例如像是底下這樣:

同樣的,其實用圖片的方式設計,也可以有多種版型,上面這個六等份格子區塊的設計,其實只是LINE 圖文選單的其中一種配置方式,你可以在LINE的設計規範中看到:

我們只是選擇左上角的版型1而已。

好,不是把圖做好就行,我們還得配置每一個區塊(用戶點下去時)的指令。但這部分不難,如果你使用過具有Rich Menu的LINE Bot就肯定知道,當你點選了某一個按鈕之後,該按鈕可能只是幫用戶說一段話。例如,當你點選了上面『翻成日文』這個鈕,我們就幫用戶說了『/日文』這幾個字,然後伺服器端的WebHook看到『/日文』這幾個字,並作出特定的回應(具體的執行結果可以參考我們的『翻譯王LINE Bot』範例,用LINE Bot搜尋 @ejn1954w 可以找到)。

那…要在點選按鈕之後,幫用戶輸入『/日文』這幾個字該怎麼做呢?

其實只需要在後台的『選單內容設定』處,依照底下這樣的順序,配置成當用戶點選下方中央的按鈕後,就自動輸入『/日文』即可:


設定完成之後,就大功告成囉。

當用戶點選Ruch Menu上該按鈕,系統就會幫用戶輸入特定的文字。同樣的,在按鈕的功能上,你也可以採用『網址』的設定,設定好之後,當用戶點選該區塊,就會開啟該網址所指向的網頁。

接下來,我們要來看更重要的部分,下一篇我們接著來看看如何透過程式碼建立Rich Menu。

----------

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

2019年2月3日 星期日

Index of 專案管理 與 敏捷思維

沒想到,隨手寫著寫著,居然整理起來已經這麼多篇了? 真不知道是累積了多少時間之後的結果。

但就如同我常說的,我從沒想過要立定什麼太遠大的目標,就是這樣寫著寫著,看起來也應該夠出本書了(但大概不會有人買),改天,我再來整個整理一下…

敏捷思維、敏捷人生

你只要堅持一天就好…
Reactive
就說了,敏捷不要推動!
神聖不可侵犯的規格書
談需求,不要談功能
保持模糊的共識?
真正的需求訪談,是談價值、而非只談功能。
MVP(最小可行性產品)的重點不是雛形、不是迭代、不是探索需求、而是實現價值!!!
這些問題都不在Scrum
飛機上的27A - 談敏捷開發的成案問題

團隊開發

讓團隊溝通? 比你想像的容易…
重要的事情先做
如何培養你的『溝通力』
再談薛西弗斯的石頭

PM,你必須真的在乎團隊才行

偏執狂系列

唯有偏執狂得以倖存
專業主義的秘密 - 練習
preparation is the key...
誰管你準備好了沒?
別再只問我要答案,這次沒有!
提升你在企業內的價值什麼是專業?
命苦是自找的...

如果,不愛了呢?

假日撰寫吾code,不亦說乎 ; 寫code不問時程,不亦樂乎 ; code而不求天下知, 不亦君子乎~
把程式寫好容易,把程式寫到能賣出去,很難…
[周末留點時間給自己]起初的心情...
特權
天下本無事
如果人人都能寫程式???
你為了什麼寫Code呢???
專案中一個幾乎遙不可及的夢 - 專人專用
其實你才是台灣之光...
台灣的軟體人才在哪裡?
在努力背後...
技術並非唯一的解決方案
2011 出發吧...
走進廚房,才知道食材的好壞...
持續地改變是必然的趨勢...

白日夢系列

我的咖啡館
我的咖啡館 之 精緻輕食套餐

2019年1月25日 星期五

Microsoft Cognitive Services 系列文章總索引

Microsoft Cognitive Services (0) - 讓你的App走進人工智慧的大門
Microsoft Cognitive Services (1) - 使用Computer Vision API辨識人臉
Microsoft Cognitive Services (2) - 使用Vision API進行OCR
Microsoft Cognitive Services (3) - 在你的app中直接加入語音辨識
Microsoft Cognitive Services (4) - 使用Speech API讓你的電腦說話
Microsoft Cognitive Services (5) - 使用Translator Text API翻譯文字

QnA Maker

微軟認知服務(Cognitive Services)中的QnA Maker 系列文 x 6
微軟認知服務中的QnA Maker– (1) 什麼是QnA Maker?
微軟認知服務中的QnA Maker– (2) 建立QnA Maker服務
微軟認知服務中的QnA Maker– (3) 測試與訓練
微軟認知服務中的QnA Maker– (4) 與LINE Bot整合
QnA Service的Knowledge Base加上共同管理者
建立QnA Maker時的小陷阱

Bot Framework相關:

關於bot framework (1) - 緣起
關於bot framework (2) - 建立一個最基本的bot(v1舊版) - 已過時
關於bot framework (3) - 建立一個最基本的bot (v3新版)
關於bot framework (4) - 使用LUIS,讓你的bot理解用戶輸入文字的意義
關於bot framework (5) - 透過.net SDK使用LUIS
關於bot framework (6) - 如何分辨WebChat用戶並保護Secret key

其他

關於Skype Bot (1) - 建立

Microsoft Cognitive Services (5) - 使用Translator Text API翻譯文字

最近我們有很多案子大量地使用到Cognitive Services當中另一個很好用的服務,那就是 Translator Taxt API。這一組服務可以幫你識別文字的語系,當然也可以翻譯文字,用法相當簡單,只需要透過REST API呼叫即可。

使用前同樣需要在Azure站台上申請Translator Text服務(有免費方案),你會得到一組Key,可以從底下位置取得:

好了,有了需要的Key之後,我們就可以透過這組雲端服務來實際來撰寫翻譯程式了。

辨識輸入文字的語系

我們先看文字語系識別的部分,我們一樣透過Windows應用程式來示範,執行結果如下:

上方的文字方塊是我們輸入要辨識的文字,按下『判斷語系』鈕之後你會發現系統告訴我們,最有可能的語系是zh-Hant也就是繁體中文。

這算是相當正確的了,因為句子中有些中英夾雜,這樣的效果算是挺讓人滿意了。

我們來看程式碼,主程式只有兩行:

上面這段程式碼沒什麼內容,純粹就只是呼叫一個Detect方法,該方法是我們撰寫來透過http post呼叫遠端的辨識服務的,程式碼如下:

上面這段程式碼其實也非常簡單,透過HttpClient進行一個http post呼叫,呼叫的endpoint是:

https://api.cognitive.microsofttranslator.com/detect?api-version=3.0

然後把要辨識的文字text轉成JSON以body傳給該endpoint。比較需要注意的是,必須把剛才申請的key以Ocp-Apim-Subscription-Key這個header name一併傳遞過去。

取回結果後,我們再反序列化為物件,就完成了唷。由於辨識可能會有多種結果,所以回傳的物件result,我們取第一組辨識結果result.FirstOrDefault(),透過language屬性取得語系,透過score取得分數:

這個分數是辨識的可靠度,倘若用戶輸入的文字可能符合多個語系,可以透過這個score取得最符合的語系。

即時翻譯輸入的文字

接著我們來看文字翻譯的功能,使用的方式也非常簡單,我們先看執行的結果:

當我們按下翻譯鈕,底下出現的是翻譯後的結果,由於我們的目標語系是en(英文),Translator Text API很順利的把上面的文字翻成英文囉。

主要的程式碼如下:


我們建立了一個Translate方法,輸入的參數有要翻譯的文字text以及目標語系languageCode,微軟翻譯的功能透過http post呼叫,endpoint為:

https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=LanguageCode

你會發現翻譯的目標語系這個參數是放在endpoint URL中的,而要被翻譯的文字則是透過http body以JSON的形式傳遞給endpoint,同樣的,不要忘記把剛才申請的key以Ocp-Apim-Subscription-Key這個header name一併傳遞過去。

透過httpClient的SendAsync()方法呼叫之後,再把取得的結果反序列化為JSON,就可以很輕鬆的得到翻譯的結果了。因此我們Button中的主程式碼如下:


---

我們把透過Translator()方法翻譯的結果result,取得其中的translations物件,然後抓取第一組翻譯結果(to),就可以得到翻譯的答案了。

沒了,就這樣。是不是很簡單呢?

對了,為何是『第一組』翻譯結果?難道可能會有很多組答案?

其實我們是可以在endpoint放入多組目標語系的,例如:

https://api.cognitive.microsofttranslator.com/translate?api-version=3.0&to=de&to=it

上面這樣的設定,會讓Translator Text API同時翻出兩種目標語系,德文和義大利文,所以translations物件中是可能有多組結果的,只是上面的範例我們只指定了一組,因此以FirstOrDefault().to抓第一組的翻譯結果就可以了,很簡單吧。

前面提到過,這個ranslator Text API相當好用,翻譯出的結果準度很高,最近我們大量地使用在相當多專案和LINE Bot的設計上,看到這邊你會不會有點躍躍欲試?

建議讀者可以先自行嘗試看看,我們後面會實際介紹如何開發一個LINE Bot翻譯機器人。

如果對MS這個服務有興趣,可以參考:
https://azure.microsoft.com/zh-tw/services/cognitive-services/translator-text-api/ 

它同樣有免費的方案唷。

btw, 既然有了好用的 Cognitive Services,就順手做一個翻譯的LINE Bot吧..

要玩玩看? 搜尋id @ejn1954w 加入即可。
或用手機點選底下連結:
https://line.me/R/ti/p/%40ejn1954w

enjoy~

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

Related Posts Plugin for WordPress, Blogger...

熱門文章