[Day 21] LINE Rich Menu 圖文選單的切換方法與流程 (上)

2024 iThome 鐵人賽

DAY 21

Software Development

做一支專屬自己學校的課程評價 LINE Bot 吧！系列第 21 篇

16th鐵人賽

MDChain

2024-10-05 23:58:08

8 瀏覽

分享至

Rich Menu 圖文選單

當使用者剛加入一個新的官方帳號的時候，最先見到的除了主動傳送的歡迎詞，再來就是預設開啟的圖文選單 (Rich Menu)，除了 LINE Official Account Manager 提供的選單上傳、定義按鈕功能外，選單切換則是屬於程式設計範疇的進階調整選項，實務上最常用來作為使用者加入會員前後的選單變換，或是因功能較多，讓使用者點擊選單上的切換按鈕進行切換。

透過圖文選單可以快速帶領使用者了解此官方帳號的使用方式，避免加入後不知所措的情形發生。

先備知識

涉及到關於使用 API 呼叫 LINE 伺服器，建議先下載 Postman API，後續以此作為範例。

定義需求

製作能夠讓使用者切換的 A、B 圖文選單。

編寫邏輯

製作雙選單的流程

前面有提及單一選單的製作與設計基本上透過 LINE Official Account Manager 即可完成，兩個 (或以上) 的選單切換則會需要有以下步驟:

準備 A、B 選單的圖片
建立 A 選單的按鈕設計
上傳 A 選單的圖片
建立 B 選單的按鈕設計
上傳 B 選單的圖片
設定 A 選單為預設
為 A B 選單設定名稱 (richMenuAliasId)

1. 準備 A、B 選單的圖片

這邊提供兩個很漂亮的選單模板供開發者練習，此圖由小生物團隊設計師 33 所設計，先下載下來，後面會用到，此範例尺寸為 2500 x 843 px 三格、JPEG 檔:
[Day 21] A 圖文選單模板.jpg
[Day 21] B 圖文選單模板.jpg

2. 建立 A 選單的按鈕設計

按鈕設計指的是要透過 JSON 定義:

有幾格
每隔範圍多大
每一格要做什麼事情 (action)

先到 Postman 設定:

[POST] https://api.line.me/v2/bot/richmenu
Header 填入
- Key: Authorization | Value: Bearer空一格{LINE_CHANNEL_ACCESS_TOKEN}
- Key: ontent-Type | Value: application/json
原本 Postman 有預填入 Content-Type 記得取消勾選或是直接修改

Body 選擇 raw JSON 填入以下內容:

{
    "size": {
        "width": 2500,
        "height": 843
    },
    "selected": true,
    "name": "Menu A",
    "chatBarText": "操作說明",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 833,
                "height": 843
            },
            "action": {
                "type": "message",
                "label": "老師名搜尋",
                "text": "規則: 直接在對話框輸入老師名即可~"
            }
        },
        {
            "bounds": {
                "x": 834,
                "y": 0,
                "width": 833,
                "height": 843
            },
            "action": {
                "type": "message",
                "label": "課程名搜尋",
                "text": "規則: 直接在對話框輸入老師名即可~"
            }
        },
        {
            "bounds": {
                "x": 1667,
                "y": 843,
                "width": 834,
                "height": 843
            },
            "action": {
                "type": "richmenuswitch",
                "richMenuAliasId": "richmenu-alias-a",
                "data": "richmenu-changed-to-a"
            }
        }
    ]
}

按下傳送後將回傳的 richMenuId 記錄起來，這就是 A 選單的專屬編號:

{
"richMenuId": "richmenu-93c388215d9a9659b9a322ade04724d3"
}

3. 上傳 A 選單的圖片

有了骨架 (按鈕設計) 與選單的專屬編號 (richMenuId) 後，接下來要上傳圖片:
同樣在 Postman 設定 (可以在左側建立新的 API):

[POST] https://api-data.line.me/v2/bot/richmenu/{選單的專屬編號 richMenuId}/content
Header 填入
- Key: Authorization | Value: Bearer空一格{LINE_CHANNEL_ACCESS_TOKEN}
- Key: ontent-Type | Value: image/jpeg
原本 Postman 有預填入 Content-Type 記得取消勾選或是直接修改
如果上傳的是 png 記得改為 image/png，檔案不得大於 1 MB
Body 選擇 binary，並上傳 A 選單的圖片

按下傳送後將回傳 200 ，就是上傳成功:

{}

下篇待續，不然太長了~

再往前一點點

使用 Django 設計 LINE Message API 呼叫更換選單，往往會需要再設計 HTML 網頁進行點選與呼叫，也僅有開發者會使用該網頁與功能，Postman 解決需要設計網頁或是而外程式碼的痛點，很適合這一類型的 API 呼叫。
JSON 檔案中
- size 這邊可以簡單解釋為上傳的圖片尺寸。
- action > message 與 Day 19 Flex Message 設計語彙相同，點擊後會產生文字。
- action > richmenuswitch 則是設計此按鈕點擊後會切換選單，richMenuAliasId 指的是下篇會介紹的選單別名。
- "selected": true 表示該 Rich Menu 已被選中並啟用，當用戶開啟 LINE 時，這個選單會顯示。
- chatBarText 是會顯示在聊天室窗最下方的選單文字。
- bounds 中的 x y 是按鈕作用對於整個圖片的開始座標；width 與 height 則是代表以此座標延伸的長寬 px~