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

[Day 13] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Template message - Buttons & Confirm

前言

Hello 各位好，接下來要介紹的是 Template Message，Template 共有 4 種類型，分別為 Buttons、Confirm、Carousel、Image Carousel，我預計會將這些內容拆成兩篇來寫，所以呢，今天就先介紹 Buttons & Confirm Template 吧。

** Template Message 都無法在電腦版上顯示，只會顯示 AltText 屬性的內容 **

Buttons Template 文件連結

Buttons Template 顧名思義就是提供按鈕的模板訊。

按鈕模板的組成由上到下分為 4 個部分，分別是 縮圖、標題、內文、按鈕，其中只有 內文與按鈕是必填項，縮圖與標題可有可無。

屬性介紹

• ThumbnailImageUrl : 帶入此屬性則模板訊息會出現縮圖。
  (備註：此處的圖片路徑不能使用 Static File 的方法，會造成訊息圖片讀取失敗，所以我將圖片傳到 imgur 上並用其絕對路徑)
• ImageAspectRatio : 縮圖區塊的比例分為 Rectangle(1.51 : 1) 與 square(1:1) 兩種。
• ImageSize : 圖片顯示的大小分為 Cover 與 Contain 兩種，Cover 模式會將縮圖區用圖片完全覆蓋，不在乎圖片是否完全顯示，而 Contain 模式會將圖片完整顯示出來，不在乎縮圖區是否完全覆蓋。
• ImageBackgroundColor : 當 ImageSize 設為 Contain 時，縮圖區沒有被圖片覆蓋的區域顏色會由此屬性決定。
• Title : 模板標題
• Text : 模板內文
• DefaultAction : 設置此屬性後，按鈕區以外的地方被點擊也會觸發此 action。
• Actions : 每添加一個 action 就會多一個按鈕出來，最多 4 個，此處 action 的 label 屬性也會是按鈕的顯示文字。

這張圖展示了不同設定時縮圖的樣子，當然如果圖片長寬比與 Line 文件說明的相同就會剛好地放進縮圖區中 (訊息截圖比例沒有調整過)

Class 宣告

首先在 ＭessageEnum.cs 中宣告新的 Enum

public static class TemplateTypeEnum
{
    public const string Buttons = "buttons";
    public const string Confirm = "confirm";
    public const string Carousel = "carousel";
    public const string ImageCarousel = "image_carousel";
}

public static class TemplateImageAspectRatioEnum
{
    public const string Rectangle = "rectangle";
    public const string Square = "square";
}

public static class TemplateImageSizeEnum
{
    public const string Cover = "cover";
    public const string Contain = "contain";
}

在 Dtos/Messages 資料夾中新增 TemplateMessageDto.cs

using LineBotMessage.Enum;
namespace LineBotMessage.Dtos
{
    // 使用泛型，方便使用不同的 Template
    public class TemplateMessageDto<T> : BaseMessageDto
    {
        public TemplateMessageDto()
        {
            Type = MessageTypeEnum.Template;
        }

        public string AltText { get; set; }
        public T Template { get; set; }
    }

    public class ButtonsTemplateDto
    {
        public string Type { get; set; } = TemplateTypeEnum.Buttons;
        public string Text { get; set; }
        public List<ActionDto>? Actions { get; set; }

        public string? ThumbnailImageUrl { get; set; }
        public string? ImageAspectRatio { get; set; }
        public string? ImageBackgroundColor  { get; set; }
        public string? Title { get; set; }
        public string? DefaultAction { get; set; }
    }
}

測試

在 LineBotService -> ReceiveMessageWebhookEvent function 添加新的關鍵字回覆內容

// 關鍵字 : "Buttons"
if (eventDto.Message.Text == "Buttons")
{
    replyMessage = new ReplyMessageRequestDto<TemplateMessageDto<ButtonsTemplateDto>>
    {
        ReplyToken = eventDto.ReplyToken,
        Messages = new List<TemplateMessageDto<ButtonsTemplateDto>>
        {
            new TemplateMessageDto<ButtonsTemplateDto>
            {
                AltText = "這是按鈕模板訊息",
                Template = new ButtonsTemplateDto
                {
                    // 此處使用的是 Imgur 上圖片的絕對路徑
                    ThumbnailImageUrl = "https://i.imgur.com/CP6ywwc.jpg",
                    ImageAspectRatio = TemplateImageAspectRatioEnum.Rectangle,
                    ImageSize = TemplateImageSizeEnum.Cover,
                    Title = "親愛的用戶您好，歡迎您使用本美食推薦系統",
                    Text = "請選擇今天想吃的主食，系統會推薦附近的餐廳給您。",
                    Actions = new List<ActionDto>
                    {
                        new ActionDto
                        {
                            Type = ActionTypeEnum.Postback,
                            Data = "foodType=sushi",
                            Label = "壽司",
                            DisplayText = "壽司"
                        },
                        new ActionDto
                        {
                            Type = ActionTypeEnum.Postback,
                            Data = "foodType=hot-pot",
                            Label = "火鍋",
                            DisplayText = "火鍋"
                        },
                        new ActionDto
                        {
                            Type = ActionTypeEnum.Postback,
                            Data = "foodType=steak",
                            Label = "牛排",
                            DisplayText = "牛排"
                        },
                        new ActionDto
                        {
                            Type = ActionTypeEnum.Postback,
                            Data = "foodType=next",
                            Label = "下一個",
                            DisplayText = "下一個"
                        }
                    }
                }
            }
        }
    };
}

傳送關鍵字 "Buttons" 後收到回覆訊息。

Confirm Template 文件連結

Confirm Template 非常單純，組成只有一個 text 內文與兩顆按扭，用途大多是給使用者回答 Yes or No 或是二選一的問題。

屬性介紹

由一個 Text 和 2 個 action 組成，action array 中第一個 action 會是左邊的按鈕，第二個 action 會是右邊的按鈕

Class 宣告

在 TemplateMessageDto.cs 中新增 class

public class ConfirmTemplateDto
{
    public string Type { get; set; } = TemplateTypeEnum.Confirm;
    public string Text { get; set; }
    public List<ActionDto>? Actions { get; set; }
}

測試

在 LineBotService -> ReceiveMessageWebhookEvent function 添加新的關鍵字回覆內容

if (eventDto.Message.Text == "Confirm")
{
    replyMessage = new ReplyMessageRequestDto<TemplateMessageDto<ConfirmTemplateDto>>
    {
        ReplyToken = eventDto.ReplyToken,
        Messages = new List<TemplateMessageDto<ConfirmTemplateDto>>
        {
            new TemplateMessageDto<ConfirmTemplateDto>
            {
                AltText = "這是確認模組訊息",
                Template = new ConfirmTemplateDto
                {
                    Text = "請問您是否喜歡本產品?\n(產品編號123)",
                    Actions = new List<ActionDto>
                    {
                        new ActionDto
                        {
                            Type = ActionTypeEnum.Postback,
                            Data = "id=123&like=yes",
                            Label = "喜歡",
                            DisplayText = "喜歡",
                        },
                        new ActionDto
                        {
                            Type = ActionTypeEnum.Postback,
                            Data = "id=123&like=no",
                            Label = "不喜歡",
                            DisplayText = "不喜歡",
                        }
                    }

                }
            }

        }
    };
}

傳送關鍵字 "Confirm" 後收到的回覆訊息。

結語

雖然當初就是覺得會有點多才把 template 的部分切成兩篇來介紹，但怎麼覺得切開來之後的篇幅跟前幾篇也沒差多少啊哈哈，又寫完一篇了還是得撒花慶祝一下，不知道各位有沒有什麼問題都歡迎留言～

下一篇要介紹的就是剩下的兩個 Carousel 和 Image Carousle，是 4 種 template 中比較重要也比較實用的存在，敬請期待!

腦筋急轉彎

• 為什麼 Buttons Template 的縮圖使用我們之前一直用的 static files 方法會導致圖片讀不出來呢？

範例程式碼

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

Day13_Buttons&Confirm Template Message