tags: .NET6 C#, LineBot, Line Messaging API, C#, dotnet core

[Day 16] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Rich Menu 製作(一)

前言

Hello 大家好，今天要介紹的是 rich menu，rich menu 的 class 宣告並不複雜，但是 Line 為其提供了分類非常詳細的 api，從上傳格式、上傳圖片、設定預設rich menu、刪除 rich menu......等等，與 rich menu 有關的 api 就多達 20 支，不過本次不打算全部都實作一遍，只會挑幾個常用到的去實作，馬上開始吧。

Rich Menu 介紹

Rich menu 是一個顯示在 Line Bot 聊天室下方的選單，可以像 imagemap 訊息一樣對一張圖片做區塊的分割並且設定該區塊點選後要執行的動作。

Rich menu 可以在第一時間使剛加入 Line Bot 好友的使用者對服務內容有一個快速的認識，另外也可以透過 api 設定讓不同的使用者之間看到不同的 rich menu 內容，做出更精準的行銷。

Rich Menu 實作

Rich Menu 製作流程

上傳一個 rich menu 大致上可分為以下步驟

1. 驗證預上傳的 rich menu 格式。
2. 上傳 rich menu 格式 -> Line 回傳 rich menu id。
3. 根據 rich menu id 上傳圖片。
4. 將剛上傳的 rich menu 設為預設的 rich menu (或是設定可看見的使用者)。

圖片準備

Rich menu 使用的圖片有以下限制

• 圖片類型 : JPEG or PNG
• 圖片寬度 : 800px ~ 2500px
• 圖片高度 : 250px 以上
• 圖片寬高比 : 1.45 以上
• 圖片檔案大小 : 最大 1MB

若有需要可以下載我準備好的圖片 圖片連結，共有兩種大小，每種有兩張不同的樣式！

當然還是可以花點時間發揮創意，製作專屬於你 Line Bot 的圖片。

屬性介紹

• Size : 宣告此 rich menu 圖片的寬高。
• Selected : 設定使用者進入 line bot 聊天室時是否預設開啟。
• Name : 幫這個 rich menu 設定一個名字，方便管理。
• ChatBarText : 聊天室最下方顯示的文字。
  
• Areas : 宣告可點擊區塊的座標、大小、與 action

Class 宣告

新增 Dtos/Richmenu 資料夾並新增 RichmenuDto.cs

namespace LineBotMessage.Dtos
{
    public class RichMenuDto
    {
        public string? RichMenuId { get; set; }
        public Size Size { get; set; }
        public bool Selected { get; set; }
        public string Name { get; set; }
        public string ChatBarText { get; set; }
        public Area[] Areas { get; set; }
    }

    public class Size
    {
        public int Width { get; set; }
        public int Height { get; set; }
    }

    public class Area
    {
        public Bounds Bounds { get; set; }
        public ActionDto Action { get; set; }
    }

    public class Bounds
    {
        public int X { get; set; }
        public int Y { get; set; }
        public int Width { get; set; }
        public int Height { get; set; }
    }
}

建立 API 通道

根據上傳的步驟準備好新的 api 通道

• 在 Domain 資料夾中新增 RichMenuService.cs

using System.Net.Http.Headers;
using LineBotMessage.Dtos;
using LineBotMessage.Enum;
using LineBotMessage.Providers;
using System.Text;

namespace LineBotMessage.Domain
{
    public class RichMenuService
    {
        // 貼上 messaging api channel 中的 accessToken & secret
        private readonly string channelAccessToken = "YourAccessToken";
        private readonly string channelSecret = "YourChannelSecret";

        private static HttpClient client = new HttpClient();
        private readonly JsonProvider _jsonProvider = new JsonProvider();

        public RichmenuService()
        {
        }

        public async void ValidateRichMenu()
        {
           
        }

        public async void CreateRichMenu()
        {

        }

        public async void GetRichMenuList()
        {

        }
        
        public async void UploadRichMenuImage()
        {

        }

        public async void SetDefaultRichMenu()
        {

        }
    }
}

• 在 LineBotController 中新增新 API (記得要宣告 RichMenuService)

// ------ 宣告 services ------
private readonly RichMenuService _richMenuService;
//在 constructor 中實例化 service class
public LineBotController()
{
    _lineBotService = new LineBotService();
    _richMenuService = new RichMenuService();
    _jsonProvider = new JsonProvider();
}
// ------ 宣告 services ------

// ------ 新增 api ------
//rich menu api
[HttpPost("RichMenu/Validate")]
public IActionResult ValidateRichMenu(RichMenuDto richMenu)
{
    _richMenuService.ValidateRichMenu(richMenu);
    return Ok();
}

[HttpPost("RichMenu/Create")]
public IActionResult CreateRichMenu(RichMenuDto richMenu)
{
    _richMenuService.CreateRichMenu(richMenu);
    return Ok();
}

[HttpPost("RichMenu/UploadImage/{richMenuId}")]
public async Task<IActionResult> UploadRichMenuImage(IFormFile imageFile, string richMenuId)
{
    _richMenuService.UploadRichMenuImage(richMenuId, imageFile);
    return Ok();
}

[HttpGet("RichMenu/SetDefault/{richMenuId}")]
public IActionResult SetDefaultRichMenu(string richMenuId)
{
    _richMenuService.SetDefaultRichMenu(richMenuId);
    return Ok();
}

結語

今天 rich menu 的介紹與準備就先到這邊，下一篇再把 services 內容補上並實際製作 rich menu。

腦筋急轉彎

• Richmenu裏，如果想做到 選單個人化 有沒有機會達成
• Richmenu裏，如果想做到 項目能夠像動態輪播切探，有沒有機會達成

範例程式碼

如果想要參考今天範例程式碼的部份，下面是 Git Repo 連結，方便大家參考。

Day16_Rich Menu Intro