Tạo RichMenu cho LINE Messaging API channel

2021.04.08

I. Tiền đề:

Điều kiện

  • Chúng ta có 1 LINE Messaging API channel

Mục tiêu:

  • Tạo và thiết lập cài đặt Rich menu cho channel

Kết quả khi hoàn thành sẽ như sau:

Công cụ:

  • draw.io: Để vẽ 1 Rich menu với kích thước như yêu cầu bên dưới
    • Điều kiện đối với Rich menu image được mô tả như sau:
      • Định dạng hình ảnh: JPEG hoặc PNG
      • Kích thước chiều rộng hình ảnh (pixel): 800 đến 2500
      • Kích thước chiều cao hình ảnh (pixel): 250 trở lên
      • Tỷ lệ cỡ ảnh (chiều rộng / chiều cao): 1,45 trở lên
      • Kích thước tệp tối đa: 1 MB

  • Postman: Để thức hiện các lệnh gọi API tạo và thiết lập cài đặt Rich menu

Tại Collection, chúng ta sẽ tạo ra 1 Folder chứa các lời gọi API. Giao diện Postman sẽ tương tự như sau

II. Thực hiện

Bước 1: Tạo Rich menu

  • Để tạo được 1 Rich menu, chúng ta cần Token của LINE Messaging API channel. Token có thể lấy được bằng cách truy cập Console của LINE developer

Token sẽ có dạng 1 chuỗi kí tự bất kì như sau:

Tiếp theo, mở Postman, tạo 1 Request mới như sau:

  • Loại Request: POST
  • Link API: https://api.line.me/v2/bot/richmenu
  • Header: Authorization | Bearer {channel access token}

Sau khi ấn Send, Response trả về sẽ là richMenuId của Rich menu vừa tạo.

Bước 2: Upload ảnh Rich menu

Mở Postman, tạo 1 Request mới như sau:

  • Loại Request: POST
  • Link API: https://api-data.line.me/v2/bot/richmenu/{richMenuId}/content
  • Header:
    • Authorization | Bearer {channel access token}
    • Content-Type: image/jpeg hoặc image/png tuỳ vào loại ảnh của bạn
  • Body: Upload ảnh đã tạo trên draw.io

Sau khi ấn Send, Response trả về sẽ là 1 object rỗng nếu request thành công

Bước 3: Cài đặt Rich menu mặc định cho LINE Messaging API channel

Mở Postman, tạo 1 Request mới như sau:

  • Loại Request: POST
  • Link API: https://api.line.me/v2/bot/user/all/richmenu/{richMenuId}
  • Header:
    • Authorization | Bearer {channel access token}

Sau khi ấn Send, Response trả về sẽ là 1 object rỗng nếu request thành công

Kết quả là khi vào Channel trong LINE, Rich menu sẽ được hiển thị như sau:

Khi ấn bào nút BUTTON1, Date-time picker sẽ hiện lên như sau:

Như vậy chúng ta đã hoàn thành việc tạo 1 Rich menu cơ bản.

III. Tham khảo

Chúc bạn thành công!