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
使用C#開發Linebot(30) – 使用LINE Login時取得用戶email
其他相關主題:
使用MS Bot Framework建立一隻支援LINE Bot的對談機器人
在LINE Bot中使用Imgur作為圖檔保存位置
------------------
LineBotSDK:https://www.nuget.org/packages/LineBotSDK
實體課程:http://www.studyhost.tw/NewCourses/LineBot
線上課程:https://www.udemy.com/line-bot/
LINE Bot 開發實體書籍:https://www.tenlong.com.tw/products/9789865020354
電子書:https://www.pubu.com.tw/ebook/103305

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

Related Posts Plugin for WordPress, Blogger...

熱門文章