[Day 8] 讓 C# 也可以很 Social — .NET 6 C# 與 Line Services API 開發 — Text、Sticker、Image Message

Hihi 各位好，今天開始會對 Line Bot 可推送訊息進行詳細的介紹，那今天這篇的內容就是針對以下這三種訊息介紹與實作:

• Text message — 文字訊息
• Sticker message — 貼圖訊息
• Image message — 圖片訊息

<<回顧上一篇<<

[Day 7] 讓 C# 也可以很 Social — .NET 6 C# 與 Line Services API 開發 — 回覆與廣播訊息

一、Text Message 介紹 & 實作 文件連結

Line Bot 可推送的Text Message 是由 text(文字)、emoji 組成。

• text 想必不用多說，而 Emoji 的部分根據文件描述，emoji 可以使用 Line 提供的 emojis，也可以使用 Unicode emojis(也就是手機鍵盤可以直接按出來的emoji)。

• Line 提供的 emojis : 請參考這個清單「List of available LINE emojis」內的 emojis，只有這些 emojis 可以提供給 Line Bot 傳送。

• Unicode emojis : 直接將對應的 emoji 放入 Text 內即可。

實作 Text Message

在上一篇建立傳訊機制時已經宣告了 TextMessageDto，現在只要添加 Emoji Property 到這個 Class 中即可。

• Emoji 文件內容，注意 Line Emoji 使用方式需在 Text 中使用 “$” 符號作為 emoji 位置的標記，並且在下方添加 emoji object 將 Index 設為該 “$” 符號的位置，則訊息傳送到 Line 後有被對應到的 “$” 符號就會被對應的 Line emoji 替換。

• 在 TextMessageDto.cs 下新增 Class

public class TextMessageEmojiDto
{
    public int Index { get; set; }
    public string ProductId { get; set; }
    public string EmojiId { get; set; }
}

• 添加新的 Property 至 TextMessageDto

public List<TextMessageEmojiDto>? Emojis { get; set; }

測試

• 使用廣播功能測試 Text Message 有沒有正確宣告。

• 測試用 RequestBody

{
  "Messages" : [
    {
      "Type":"text", 
      "Text" : "$ 表情符號文字測試訊息 $ ?", 
      "Emojis" : [
        {
          "Index" : 0,
          "ProductID" :"5ac1bfd5040ab15980c9b435",
          "EmojiId":"003"
        },
        {
          "Index" : 13,
          "ProductID" :"5ac1bfd5040ab15980c9b435",
          "EmojiId":"004"
        }
      ]
    }
  ]
}

• 結果

二、Sticker Message 介紹 & 實作 文件連結

Line Bot 能傳送的貼圖訊息也請參考這個「List of available stickers」，只有在裡面的貼圖能夠傳送。

實作 Sticker Message

• 貼圖訊息非常單純，照著文件的格式就好

• 在 Dtos/Messages 資料夾下新增 StickerMessageDto.cs

using LineBotMessage.Enum;

namespace LineBotMessage.Dtos
{
    public class StickerMessageDto : BaseMessageDto
    {
        public StickerMessageDto()
        {
            Type = MessageTypeEnum.Sticker;
        }
        public string PackageId { get; set; }
        public string StickerId { get; set; }
    }
}

• 因為多加了一種訊息類別，所以修改 LineBotService 中的 BroadcastMessageHandler Function

/// <summary>
/// 接收到廣播請求時，在將請求傳至 Line 前多一層處理，依據收到的 messageType 將 messages 轉換成正確的型別，這樣 Json 轉換時才能正確轉換。
/// </summary>
/// <param name="messageType"></param>
/// <param name="requestBody"></param>
public void BroadcastMessageHandler(string messageType, object requestBody)
{
    string strBody = requestBody.ToString();
    dynamic messageRequest = new BroadcastMessageRequestDto<BaseMessageDto>();
    switch (messageType)
    {
        case MessageTypeEnum.Text:
            messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<TextMessageDto>>(strBody);
            break;

        case MessageTypeEnum.Sticker:
            messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<StickerMessageDto>>(strBody);
            break;
    }
    BroadcastMessage(messageRequest);

}

測試

• 使用廣播功能測試 Sticker Message 有沒有正確宣告。

• 測試用 RequestBody

{
  "Messages" : [
    {
      "Type":"sticker", 
      "PackageId":"789",
      "StickerId":"10855"
    }
  ]
}

• 結果

三、Image Message 介紹 & 實作 文件連結

圖片訊息也可說是非常重要的訊息內容了，除了圖片給人的印象遠比文字還深刻以外，圖片能表達出的訊息也能比文字豐富許多，所以在考慮廣告行銷時，將宣傳圖片傳給使用者是比文字更好的選擇。

實作 Image Message

• Line Bot 傳送圖片訊息時有幾項需要注意的:

1. 不是將圖片檔直接丟給 Line 去傳送，而是傳送圖片在網路上的絕對路徑
2. 圖片網址必須是 Https 協定(網址長度小於2000)
3. 圖片檔案必須是 JPEG or PNG
4. 圖片長寬大小沒有限制，但是檔案大小分別有限制 10MB & 1MB

• 先在 Dtos/Messages 資料夾下新增 ImageMessageDto.cs

using LineBotMessage.Enum;

namespace LineBotMessage.Dto
{
    public class ImageMessageDto : BaseMessageDto
    {
        public ImageMessageDto()
        {
            Type = MessageTypeEnum.Image;
        }

        public string OriginalContentUrl { get; set; }
        public string PreviewImageUrl { get;set; }
    }
}

• 在 LineBotService 中的 BroadcastMessageHandler Function 添加對應的 case

case MessageTypeEnum.Image:
    messageRequest = _jsonProvider.Deserialize<BroadcastMessageRequestDto<ImageMessageDto>>(strBody);
    break;

圖片絕對路徑取得方法

圖片訊息需要使用圖片在網路上的絕對路徑，意思就是圖片需要自己來管理，Line 並不處理圖片存放的問題，那這邊針對這個問題提供兩種方法，這兩種方法在後面都會使用到～那目前就先選擇一種使用即可。

1. 將圖片放到可提供公開的絕對路徑的網站 例如: imgur

2. 使用 Static Files (推薦一起實作)

• 在專案中新增一個資料夾 “UploadFiles”，並將圖檔放入資料夾中。

• 在 Program.cs 內新增

// -------- 新增內容 --------
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, "UploadFiles")),
    RequestPath = "/UploadFiles",
});
// -------- 新增內容 --------

app.MapControllers();
app.Run();

• 此時就透過 Host (ngrok 網址) + “/UploadFiles/” + FileName 去存取圖片

測試

• 準備兩張圖片，放到 UploadFiles 資料夾中

• 使用 swagger 測試圖片訊息能否正確傳送

• 測試用 RequestBody

{
  "Messages" : [
     {
       "Type":"image", 
       "OriginalContentUrl" : "your original content url", 
       "PreviewImageUrl" : "your preview image url"
     }
  ]
}

• 在電腦版 Line 的畫面中，Preview Image 會一直顯示在聊天室畫面中，但把圖片點開後就是 Original Content 的圖片。

各位可以去看看手機版的 Line 對於 Image Message 是怎麼顯示的～

結語

今天的介紹就到這邊了，下一篇要介紹的訊息會是 Video、Audio、Location 的訊息，各位就敬請期待吧。

腦筋急轉彎

• 如果發現某張圖片的使用量(reuqests)很高，有沒有什麼方式能夠加速的方式呢?

範例程式碼

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

Day8_Text、Sticker、Image Message

>>下一篇>>

[Day 9] 讓 C# 也可以很 Social — .NET 6 C# 與 Line Services API 開發 — Video、Audio、Location Message

appxtech

『APPX時賦科技』後端工程師實習心得