[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
>>下一篇>>
