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

6 則留言:

匿名 提到...

老師,您好 我是您忠實的部落格粉絲,
您的Line Bot實戰書籍我也有購買,
但是最近嘗試串接Line Pay Api碰到了一個問題
想請問老師能不能發一篇有關於Line Pay Api 的介紹
或者應用在Line Bot上的實做
謝謝董老師。

isDavid 提到...

@匿名,

過一陣子我會整理一些使用心得放上來...

匿名 提到...

老師您好,我用Line Manager建立了一個RichMenu,但用程式卻取不到RichMenuID,甚至取RichMenuList也是空值,是否一定要由程式建立的才取的到呢? 謝謝老師

isDavid 提到...

對,你從後台建立的不在程式碼管理範圍內。

Harold's Blog 提到...

HiHi David
我發現 ImageMessage 如果網址有包含空白的話 會ERROR,就算把網址包URLPathEncode()也會 但是單純用json 網址空白部分改為%20 ,reply出去的話可以正常送出。
請問這個問修復嗎?
另外MessageBase 可否不要限制5個
感謝您

匿名 提到...

老師您好,
目前遇到幾個問題想請教,
第一個是想做一個取得 user gps location, 進而做些搜尋的動作,
目前的做法是用一個 QuickReplyLocationAction 讓 user 點, 然後 user 再點公開位置,
webhook 收到 location message 再處理,
是否有辦法直接做一個 menu , 然後在 user 點擊之後, 直接取得 user 的 gps location?

另一個, 有辦法透過 Messaging API 讓 user 掃描 QRCode 送 TextMessage 回來嗎?
目前沒看到有官方帳號有這功能, Line Develope 有看到有人提問然後就沒下文了,
是目前的 LineBot 做不到嗎? 還是老師您有什麼方法可以達成?

萬分感激

熱門文章