Richmenu là một tính năng menu được hiển thị ở cuối màn hình trò chuyện của LINE Official Account. Bằng cách thiết lập các liên kết trong từng khu vực của richmenu, bạn có thể hướng người dùng đến các trang bên ngoài và các trang đặt chỗ ngoài các tính năng có trên LINE channel của bạn.
Trong bài viết này, chủ yếu chia sẻ cơ bản, cái mình đã làm được để trong quá trình phát triển nếu các bạn có gặp phải thì sẽ không bỡ ngỡ, và từ đó có thể phát triển dễ dàng hơn ứng dụng của mình.

1. Cấu hình cơ bản ban đầu

• Ngôn ngữ Nodejs
• Đã có tài khoản Line và Channel Message API trên Line.

2. Giới thiệu về richmenu

Cấu trúc cơ bản

• Hình ảnh Richmenu:
  • định dạng là: JPEG hoặc PNG
  • chiều rộng (pixels): 800 đến 2500
  • chiều cao (pixels): 250 trở lên
  • dung lượng file không vượt quá 1 MB
• Tappable area: khu vực (areas) có thể có trong richmenu tối đa là 20 areas, chia thành từng khu vực trên nền tảng hình ảnh richmenu, mỗi một areas có một tác vụ khác nhau.
• Chat bar: là thanh công cụ dùng để chỉnh mở, đóng richmenu, và có thể chỉnh sửa text theo nhu cầu sử dụng.
• Hình ảnh demo của richmenu (hình này mình lấy trên document của Line)
  

Có 2 cách tạo richmenu để hiển thị trên màn hình chat của chatbot

• Tạo trực tiếp trên trang quản lí của line (https://manager.line.biz/)
  Ở menu chat screen ->Chọn Richmenu, thì bạn sẽ vào giao diện có hình bên dưới, từ đó có thể tạo richmenu: thực hiện theo nội dung hướng dẫn trên màn hình. (này mình chỉ giới thiệu sơ qua)
• Tạo bằng Messaging API: sử dụng 3 Message API dưới đây thì sẽ tạo được richmenu trên màn hình chat.
  • Create a rich menu
  • Upload rich menu image
  • Set default rich menu Chi tiết hoạt động các API sẽ được giới thiệu ngay bên dưới.

3. Giới thiệu các message API trên Line

1.Create a rich menu

• API này được sử dụng đầu tiên để tạo 1 richmenu gồm các nội dung cơ bản, về Size hình ảnh, chia tác vụ cho từng khu vực (areas), Nội dung text của chatbar,...

• Chúng ta có thể tạo tối đa 1000 richmenu cho một LINE Official Account thông qua cách sử dụng Messaging API

• Đoạn code cơ bản mô phỏng cho 1 richmenu được chia thành 2 areas (như template bên dưới)

  const line = require('@line/bot-sdk');
  const client = new line.Client({
    channelAccessToken: '<channel access token>'
  });
  
  const richmenu = {
    size: {
      width: 800,
      height: 270
    },
   selected: true,
   name: "richmenu",
   chatBarText: "demo", 
   areas: [
          {
            bounds: {
              x: 0, //horizontal position
              y: 0, //vertical position
              width: 400,
              height: 270
            },
            action: {
              type: "message",
              label: "Document1",
              text: "Document1"
            }
          },
          {
            bounds: {
              x: 400,
              y: 0,
              width: 400,
              height: 270
            },
            action: {
              type: "uri",
              label: "Document2",
              uri: "https://demorichmenu/"
            }
          },
     ]
  };
  
  client.createRichMenu(richmenu)
    .then((richMenuId) =>
    console.log(richMenuId))
  

• Kết quả trả về là:

  {
   "richMenuId": "{richMenuId}"
  }
  

2. Upload rich menu image

• API này dùng để upload hình ảnh của richmenu lên menu vừa mới tạo ở API trên
• Về file hình phải đúng kích thước, yêu cầu (như trên cấu trúc richmenu có nêu )
• Đoạn code demo:

  const line = require('@line/bot-sdk');
  const client = new line.Client({
    channelAccessToken: '<channel access token>'
  });
  
  client.setRichMenuImage('<richMenuId>', fs.createReadStream('./example.png'))
  

• Tuy nhiên có thể sử dụng dạng Uint8Array (tương ứng có thể sử dụng base64 để đưa hình ảnh lên richmenu ).

  const line = require('@line/bot-sdk');
  const client = new line.Client({
    channelAccessToken: '<channel access token>'
  });
  
  client.setRichMenuImage('<richMenuId>', imageRichmenuBuffer, "image/png")
  

• kết quả trả về của API này là rỗng.

  {}
  

3. Set default rich menu

• API này dùng để hiển thị richmenu đã được tạo cho tất cả người dùng đã thêm tài khoản Line của bạn (sử dụng chatbot)
• Code demo:

  const line = require('@line/bot-sdk');
  const client = new line.Client({
    channelAccessToken: '<channel access token>'
  });
  
  client.setDefaultRichMenu('<richMenuId>')
  

4. Get rich menu list

• API này dùng để lấy ra tất cả các richmenu đã được tạo.
• Code demo:

  const line = require('@line/bot-sdk');
  const client = new line.Client({
    channelAccessToken: '<channel access token>'
  });
  
  client.getRichMenuList()
      .then((richmenus) => {
      richmenus.forEach((richmenu) => console.log(richmenu));
      })
  

• Kết quả trả về là 1 array chứa các Object của mỗi richmenu đã tồn tại.
• Nhờ có API này ta có thể kiểm tra, lấy ra các richmenu tạo dư, không được sử dụng, để xóa chúng.

5. Delete rich menu

• API này dùng để xóa 1 richmenu.
• Code demo:

  const line = require('@line/bot-sdk');
  const client = new line.Client({
    channelAccessToken: '<channel access token>'
  });
  
  client.deleteRichMenu('<richMenuId>')
  

Trên đây là 5 message API cơ bản nhất, cần sử dụng khi khởi tạo, thiết lập, và sử dụng cơ bản 1 richmenu trên LINE Official Account. Còn thêm nhiều API hỗ trợ nữa, chúng ta có thể tham khảo trên document trên Line developers (https://developers.line.biz/)

Tài liệu tham khảo : https://developers.line.biz/en/docs/messaging-api/using-rich-menus