# Line Bot 圖文選單(Rich Menu)
## 相關說明
要建立圖文選單有兩種方式，第一種是進入 Line@ 後台有功能可以使用，第二種則是透過 Postman 等軟體或寫程式呼叫 API。
後台功能可參考此連結，[圖文選單｜LINE Biz-Solutions - LINE for Business](https://tw.linebiz.com/manual/line-official-account/oa-manager-richmenu)
### 建立圖文選單(API方式)
建立圖文選單有三個步驟:
1. 建立圖文選單
2. 上傳圖文選單的圖片
3. 設定預設的圖文選單

### 1.建立圖文選單
**Request url**
API 的網址，需要使用 <font color="#f00">**POST**</font>方法呼叫

POST https://api.line.me/v2/bot/richmenu

**Request headers**
header 的參數，<font color="#f00">**{channel access token}**要替換成自己申請 Line Bot 時的那個**token**</font>，application/json 表示下方 Request body 的格式為 json

Authorization: Bearer {channel access token}
Content-Type: application/json

http 的主體，用來定義圖文選單相關的設定
* size: 圖文選單圖片的長寬，必需為以下尺寸:
<font color="#f00">2500x1686、2500x843、1200x810、1200x405、800x540、800x270</font>
* selected: 選單是否預設開啟，這裡我設定為 false，預設不開啟。
* name: 選單名稱，用於識別和管理選單，不會顯示給使用者。
* chatBarText: 顯示在聊天視窗下方的選單文字。
* areas: 用於定義按鈕的可點墼區域。
+ bounds 用於定義座標和大小
- x、y: 起始座標
- width: 寬度
- height: 高度
+ action 用於定義觸發的動作
- type: 動作類型，詳細說明可以參考 [官方文件](https://developers.line.biz/en/reference/messaging-api/#postback-action)
- label: 動作標籤，用於客戶端輔助功能
- text: 發送到聊天視窗的文字
- data: 透過 webhook 回傳到後端的字串

**Request body**

{
    "size": {
      "width": 2500,
      "height": 1686
    },
    "selected": true,
    "name": "richmenu-1",
    "chatBarText": "快捷選單",
    "areas": [
      {
        "bounds": {
          "x": 0,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "歲末驚喜",
          "text": "歲末驚喜"
        }
      },
      {
        "bounds": {
          "x": 0,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "粉絲獨享",
          "text": "粉絲獨享"
        }
      },
      {
        "bounds": {
          "x": 833,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "最新消息",
          "text": "最新消息"
        }
      },
      {
        "bounds": {
          "x": 833,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "常見問題",
          "text": "常見問題"
        }
      },
      {
        "bounds": {
          "x": 1666,
          "y": 0,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "熱銷必敗",
          "text": "熱銷必敗"
        }
      },
      {
        "bounds": {
          "x": 1666,
          "y": 843,
          "width": 833,
          "height": 843
        },
        "action": {
          "type": "message",
          "label": "推薦好友",
          "text": "推薦好友"
        }
      }
   ]
}

**Response**
為回傳訊息，選單建立成功後會回傳 {rich menu id} 後面 API 會使用到。

{
    "richMenuId": "{rich menu id}"
}

(此圖為Line官方網站下載)

**Postman 結果**

* Header 部分
* Body 部分

### 2.上傳圖文選單的圖片
**Request url**
這邊要使用到剛剛建立圖文選單最後所回傳的<font color="#f00">**rice menu id**</font>

POST https://api.line.me/v2/bot/richmenu/{rich menu id}/content

**Request headers**
使用上面建立圖文選單一樣的{channel access token}，Content-Type則選擇你上傳圖片的格式(jpg或png)，Content-Length則可以省略不用。

Authorization: Bearer {channel access token}
Content-Type: image/jpeg or image/png
Content-Length: request body 大小 (byte)

**Request body**

圖片主體
格式: JPEG 或 PNG
長寬: 2500x1686, 2500x843, 1200x810, 1200x405, 800x540, 800x270
大小限制: 1 MB

**Response**

{}

* Header 部分
* Body 部分

### 3.設定預設的圖文選單
**Request url**
<font color="#f00">**{rich menu id}**</font>一樣使用建立圖文選單回傳的id

POST https://api.line.me/v2/bot/user/all/richmenu/{rich menu id}

**Request headers**
使用上面建立圖文選單一樣的<font color="#f00">**{channel access token}**</font>

Authorization: Bearer {channel access token}

**Request body**

無

**Response**

{}

這步驟會設定所有用戶預設看到的圖文選單

## 其他相關 API

* **查詢所有圖文選單**

GET https://api.line.me/v2/bot/richmenu/list

**Request headers**

Authorization: Bearer {channel access token}

**Response**

JSON 格式的列表清單

* **刪除圖文選單**

DELETE https://api.line.me/v2/bot/richmenu/{rich menu id}

**Request headers**

Authorization: Bearer {channel access token}

**Response**

{}

* **取得預設的圖文選單**

GET https://api.line.me/v2/bot/user/all/richmenu

**Request headers**

Authorization: Bearer {channel access token}

**Response**

{
    "richMenuId": "{rich menu id}"
}

* **取消預設的圖文選單**

DELETE https://api.line.me/v2/bot/user/all/richmenu

**Request headers**

Authorization: Bearer {channel access token}

**Response**

{}

## PHP Line Message API SDK套件
※需要版本PHP 5.6以上
1. 安裝套件

$ composer require linecorp/line-bot-sdk

2. PHP Code Example

class BotController extends Controller{
    function chat(Request $request){
        //宣告linebot物件
        $httpClient = new CurlHTTPClient(env('LINEBOT_TOKEN'));
        $bot        = new LINEBot($httpClient, ['channelSecret' => env('LINEBOT_SECRET')]);

        //取得使用者id和訊息內容
        $text    = $request->events[0]['message']['text'];
        $user_id = $request->events[0]['source']['userId'];
    }
}
    

###### tags: `Line Bot`

## 相關連結
[資料下載-LINE官方帳號｜LINE Biz-Solutions](https://tw.linebiz.com/download/line-official-account)
[[Day06] 如何建立 LINE Bot 的圖文選單 - Rich Menu](https://ithelp.ithome.com.tw/articles/10229397)
[line-bot-sdk-php - GitHub](https://github.com/line/line-bot-sdk-php)