[LINE bot 好好玩 30 天玩轉 LINE API] 第 13 天:LINE 的控制面板 Rich Menus – 使用 API Request 教你如何做換頁特效

2020 11th 鐵人賽 LINE

本文同步刊載於 iT 邦幫忙第11屆鐵人賽:[LINE bot 好好玩 30 天玩轉 LINE API] 第 13 天:圖文選單 Rich Menus – 使用 API Request

前言

我們昨天討論了 Rich Menus 的用法,有人就來詢問?現在講的 Rich Menus 都是靜態的,有看過有 Rich Menus 可以做翻頁的動作,這件事情是怎麼做到的呢?其實很簡單就是靠 API 來做!
今天就來揭曉這個神奇的功能吧 ~

建立新的 Rich Menus

圖片引用至 Using the LINE URL scheme

以下範例是由官方範例做了一點小修改建立的,我們把原本 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 ~
希望大家玩得愉快!