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

[Day 18] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Rich Menu 製作(三) rich menu alias

前言

Hello 大家好，今天這篇要介紹的是 rich menu 換頁的功能，要實現這個功能就必須提到 rich menu alias 有關的多支 api 和 rich menu switch action。

Class 宣告

Rich Menu Alias

Rich menu alias 是專門為了 rich menu 換頁功能提供的 class，其目的是為了幫已上傳的 rich menu 設定一個別名 richMenuAliasId，並將其用於 rich menu switch action 中，決定要切換的 rich menu 是哪一張，另外，可以將宣告過的 richMenuAliasId 透過更新 api 配給另一個 rich menu，換句話說就是同一個 richMenuAliasId 可以重複使用。

• 屬性介紹
  

  • richMenuAliasId : 可使用 (A-Z, a-z, 0-9)、底線( _ )、連字號( - ) 等符號自己幫 rich menu alias 取名。
  • richMenuId : 目前使用此名稱的 rich menu 的 id。

• 在 Dtos/RichMenu 資料夾中新增 RichMenuAliasDto.cs

namespace LineBotMessage.Dtos
{
    public class RichMenuAliasListDto
    {
        public RichMenuAliasDto[] Aliases { get; set; }
    }
    public class RichMenuAliasDto
    {
        public string RichMenuAliasId { get; set; }
        public string RichMenuId { get; set; }
    }
}

Rich Menu Switch Action

還記得在介紹 actions 時少介紹了一個 action，就是這個 rich menu switch action，這個 action 是幫 rich menu 換頁並且只能在 rich menu 中使用。

• 屬性介紹
  

  • richMenuAliasId : 欲切換的 rich menu alias。
  • data : 頁面切換後會透過 postback event 將 data 傳送到伺服器。

• 在 Dtos/Actions/ActionDto.cs ActionDto class 中添加新的屬性。

// rich menu switch action
public string? RichMenuAliasId { get; set; }

Rich Menu APIs 功能實作

Rich menu alias 是專門為了 rich menu 換頁功能所存在的，Line 有一系列的 API 可以對 rich menu alias 操作，馬上來實作。

1. Create Rich Menu Alias
2. Delete Rich Menu Alias
3. Upadte Rich Menu Alias
4. Get Rich Menu Alias Info By Id
5. Get Rich Menu Alias Info List

更新 RichMenuService.cs

• 新增 Request Uri

private readonly string createRichMenuAliasUri = "https://api.line.me/v2/bot/richmenu/alias";
private readonly string commonRichMenuAliasUri = "https://api.line.me/v2/bot/richmenu/alias/{0}";
private readonly string getRichMenuAliasListUri = "https://api.line.me/v2/bot/richmenu/alias/list";

• 新增 CreateRichMenuAlias function

public async Task<string> CreateRichMenuAlias(RichMenuAliasDto richMenuAlias)
{

    var jsonBody = new StringContent(_jsonProvider.Serialize(richMenuAlias), Encoding.UTF8, "application/json");
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", channelAccessToken);
    var request = new HttpRequestMessage(HttpMethod.Post, createRichMenuAliasUri)
    {
        Content = jsonBody
    };

    var response = await client.SendAsync(request);

    return await response.Content.ReadAsStringAsync();
}

• 新增 DeleteRichMenuAlias function

public async Task<string> DeleteRichMenuAlias(string richMenuAliasId)
{
    var request = new HttpRequestMessage(HttpMethod.Delete, string.Format(commonRichMenuAliasUri, richMenuAliasId));
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", channelAccessToken);

    var response = await client.SendAsync(request);
    return await response.Content.ReadAsStringAsync();
}

• 新增 UpdateRichMenuAlias function

public async Task<string> UpdateRichMenuAlias(string richMenuAliasId, string richMenuId)
{
    var body = new { richMenuId = richMenuId };
    var jsonBody = new StringContent(_jsonProvider.Serialize(body), Encoding.UTF8, "application/json");
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", channelAccessToken);
    var request = new HttpRequestMessage(HttpMethod.Post, string.Format(commonRichMenuAliasUri, richMenuAliasId))
    {
        Content = jsonBody
    };

    var response = await client.SendAsync(request);
    return await response.Content.ReadAsStringAsync();
}

• 新增 GetRichMenuAliasInfo function

public async Task<RichMenuAliasDto> GetRichMenuAliasInfo(string richMenuAliasId)
{
    var request = new HttpRequestMessage(HttpMethod.Get, string.Format(commonRichMenuAliasUri, richMenuAliasId));
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", channelAccessToken);

    var response = await client.SendAsync(request);

    if (response.StatusCode == System.Net.HttpStatusCode.OK)
        return _jsonProvider.Deserialize<RichMenuAliasDto>(await response.Content.ReadAsStringAsync());
    else
        return new RichMenuAliasDto();
}

• 新增 GetRichMenuAliasListInfo function

public async Task<RichMenuAliasListDto> GetRichMenuAliasListInfo()
{
    var request = new HttpRequestMessage(HttpMethod.Get, getRichMenuAliasListUri);
    client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", channelAccessToken);

    var response = await client.SendAsync(request);

    if (response.StatusCode == System.Net.HttpStatusCode.OK)
        return _jsonProvider.Deserialize<RichMenuAliasListDto>(await response.Content.ReadAsStringAsync());
    else
        return new RichMenuAliasListDto();
}

LineBotController

在 LineBotController 中新增以下幾支 API。

//Rich menu alias
[HttpPost("RichMenu/Alias/Create")]
public async Task<IActionResult> CreateRichMenuAlias(RichMenuAliasDto richMenuAlias)
{
    return Ok(await _richMenuService.CreateRichMenuAlias(richMenuAlias));
}

[HttpDelete("RichMenu/Alias/Delete/{richMenuAliasId}")]
public async Task<IActionResult> DeleteRichMenuAlias(string richMenuAliasId)
{
    return Ok(await _richMenuService.DeleteRichMenuAlias(richMenuAliasId));
}

[HttpPost("RichMenu/Alias/Upadte/{richMenuAliasId}")]
public async Task<IActionResult> UpdateRichMenuAlias(string richMenuAliasId, string richMenuId)
{
    return Ok(await _richMenuService.UpdateRichMenuAlias(richMenuAliasId, richMenuId));
}

[HttpGet("RichMenu/Alias/GetInfo/{richMenuAliasId}")]
public async Task<IActionResult> GetRichMenuAliasInfomation(string richMenuAliasId)
{
    return Ok(await _richMenuService.GetRichMenuAliasInfo(richMenuAliasId));
}

[HttpGet("RichMenu/Alias/GetInfo/List")]
public async Task<IActionResult> GetRichMenuAliasList()
{
    return Ok(await _richMenuService.GetRichMenuAliasListInfo());
}

測試

建立切換頁面 rich menu 之流程 : 文件連結

因為已經上傳的 rich menu 不能更改，所以這邊就重新建立 rich menu，我一樣使用大張的圖片來實作，且只放一個 rich menu switch action。

1. 使用 line bot designer 製作 rich menu，不過 line bot designer 中沒有 rich menu switch action，所以把點擊區域範圍拉好後再手動更改 action 內容。

   • richmenu 1

   {
     "size": {
       "width": 2500,
       "height": 1686
     },
     "selected": true,
     "name": "richmenu_big_1",
     "chatBarText": "查看更多資訊",
     "areas": [
       {
         "bounds": {
           "x": 1262,
           "y": 25,
           "width": 1226,
           "height": 231
         },
         "action": {
           "type": "richmenuswitch",
           "richMenuAliasId": "alias2",
           "data" : "switch to alias2"
         }
       }
     ]
   }
   

   • richmenu 2

   {
     "size": {
       "width": 2500,
       "height": 1686
     },
     "selected": true,
     "name": "richmenu_big_2",
     "chatBarText": "查看更多資訊",
     "areas": [
       {
         "bounds": {
           "x": 12,
           "y": 29,
           "width": 1226,
           "height": 231
         },
         "action": {
           "type": "richmenuswitch",
           "richMenuAliasId": "alias1",
           "data" : "switch to alias1"
         }
       }
     ]
   }
   

2. 使用 CreateRichMenu api 上傳 richmenu 1 & richmenu 2
   
   

3. 使用 UploadRichMenu api 上傳 rich menu 圖片
   
   

4. 使用 SetDefaultRichMenu api 設定其中一張 rich menu 為預設。(我設 richmenu 1)
   

5. 使用 CreateRichMenuAlias api 建立兩個對應的 rich menu alias
   
   

• Rich menu 換頁實作功能結果
  

結語

有了這個切換的功能後，可以將非常多張的 rich menu 串連起來，並不侷限於兩張選單切換，當然如果選單太多的話也會令使用者困擾的吧，所以需要適當的對選單功能做設計與取捨呢！

rich menu 相關的功能差不多介紹完了，加上 前一篇介紹的 rich menu api也不少 ~~
想要完全了解的朋友們，應該需要點時間來消化
所以下一篇讓我們來把跟 rich menu 有關的所有 api 實作一遍 ～ 好好的釐清，打通大家的任督二脈
咱們下一篇見囉

腦筋急轉彎

• 今天的急轉彎就是 整理 RichMenu 的過程 以及相關的結構 (噗~~)

範例程式碼

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

Day18_Rich Menu Alias