本文同步刊載於 iT 邦幫忙第11屆鐵人賽:[LINE bot 好好玩 30 天玩轉 LINE API] 第 13 天:圖文選單 Rich Menus – 使用 API Request
前言
我們昨天討論了 Rich Menus 的用法,有人就來詢問?現在講的 Rich Menus 都是靜態的,有看過有 Rich Menus 可以做翻頁的動作,這件事情是怎麼做到的呢?其實很簡單就是靠 API 來做!
今天就來揭曉這個神奇的功能吧 ~
建立新的 Rich Menus
以下範例是由官方範例做了一點小修改建立的,我們把原本 b 按鈕的 message 修改了一下,等等用它處理翻頁的功能
圖片部分一樣使用官方範例的
{ "size": { "width": 2500, "height": 1686 }, "selected": false, "name": "Controller", "chatBarText": "Controller", "areas": [ { "bounds": { "x": 551, "y": 325, "width": 321, "height": 321 }, "action": { "type": "message", "text": "up" } }, { "bounds": { "x": 876, "y": 651, "width": 321, "height": 321 }, "action": { "type": "message", "text": "right" } }, { "bounds": { "x": 551, "y": 972, "width": 321, "height": 321 }, "action": { "type": "message", "text": "down" } }, { "bounds": { "x": 225, "y": 651, "width": 321, "height": 321 }, "action": { "type": "message", "text": "left" } }, { "bounds": { "x": 1433, "y": 657, "width": 367, "height": 367 }, "action": { "type": "message", "text": "btn b" } }, { "bounds": { "x": 1907, "y": 657, "width": 367, "height": 367 }, "action": { "type": "postback", "data": "action=btn&message=a" } } ] }
Event postback
處理翻頁功能,我們這次用 postback 來做範例,為什麼會選擇 postback 呢?
那是因為 postback 使用者不會看到訊息,如果使用 message 也是可以處理,不過覺得用 postback 會顯得更好,以下範例為 postback 處理翻頁功能的方法
case 'postback': let data = querystring.parse(event.postback.data); if (data.action === 'buy' && data.itemid === '123') { request.post({ url: `https://api.line.me/v2/bot/user/${event.source.userId}/richmenu/${process.env['RICHMENUID_CONTROLLER']}`, auth: { bearer: process.env['CHANNEL_ACCESS_TOKEN'] } }, function (err, httpResponse, body) { console.log(body); }); } if (data.action === 'btn' && data.message === 'a') { request.post({ url: 'https://api.line.me/v2/bot/richmenu/bulk/link', auth: { bearer: process.env['CHANNEL_ACCESS_TOKEN'] }, body: { richMenuId: process.env['RICHMENUID_DEFAULT'], userIds: [event.source.userId] }, json: true }, function (err, httpResponse, body) { console.log(body); }); }
這邊要注意幾件事情,我們需要保留剛剛建立的 Rich Menus Id 與昨天的 Rich Menus Id,之後使用他們來做翻頁功能。
在這個範例把昨天的 Rich Menus Id 定義成 RICHMENUID_DEFAULT
richMenuId: process.env['RICHMENUID_DEFAULT']
把今天的遊戲控制面板定義成 RICHMENUID_CONTROLLER
url: `https://api.line.me/v2/bot/user/${event.source.userId}/richmenu/${process.env['RICHMENUID_CONTROLLER']}`
如上介紹了兩種方法,兩種方法都可以控制 Rich Menus 第一個方法是單一使用者指定的方法,其實比較推薦目前這個情境使用此 API 來操作,第二個範例是多使用者指定的方法,比較不推薦大家在這個情境使用,因為他是多使用者的情境,不過這邊是屬於示範拉 ~
移除 Rich Menus
昨天介紹了 list Rich Menus 的方法,那可想而知有建立、取得那一定有刪除,刪除的方法如下
curl -v -X DELETE https://api.line.me/v2/bot/richmenu/{richMenuId} \ -H 'Authorization: Bearer {channel access token}'
取消預設 Rich Menus
如果今天不想要給使用者使用 Rich Menus 就可以使用這個 API
curl -v -X DELETE https://api.line.me/v2/bot/user/all/richmenu \ -H 'Authorization: Bearer {channel access token}'
結語
其實 Rich Menus 的玩法很多,就看大家想要怎麼玩啦 XD ~
希望大家玩得愉快!
《AWS CDK 完全學習手冊:打造雲端基礎架構程式碼 IaC》
第 12 屆 iT 邦幫忙鐵人賽 DevOps 組冠的《用 CDK 定 義 AWS 架構》
第 11 屆 iT 邦幫忙鐵人賽《LINE bot 好好玩 30 天玩轉 LINE API》
一個熱愛分享的雲端工程師!