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