tags: IT邦 2022鐵人賽 .NET 6 C# ＆ Line Services 串接

[Day 12] 讓 C# 也可以很 Social - .NET 6 C# 與 Line Services API 開發 - Message Common Property - Quick Reply & Sender

前言

Hello 各位好，本篇要將之前略過的 message common property 補充回來～主要就是 quick reply 與 sender 這兩個屬性要介紹，事不宜遲立馬開始。

Common Property 文件連結

Quick Reply 介紹

當有訊息帶著 quick reply 屬性傳送出去時，使用者會在聊天室下方看到對應每個 quick reply button 物件的按鈕，使用者能夠直接點擊按鈕執行各種 action。

屬性介紹

quick reply 分了三層，從上到下分別為 quick reply -> Items object -> quick reply button object，每一個訊息最多只能帶 13 個 quick reply button，而每一個 quick reply button 都能使用上一篇介紹過的 actions。

• Quick reply button
  • ImageUrl : 設定每個按鈕前方的 icon，但 camera、camera roll、location 這三個動作的按鈕只會顯示預設圖案。
  • Action : 就是上一篇介紹過的所有Action，在 quick reply 中時，action 的 label 屬性就會變成按鈕的顯示文字！

Class 宣告

• 修改 BaseMessageDto.cs

namespace LineBotMessage.Dtos
{
    public class BaseMessageDto
    {
        public string Type { get; set; }

        // Quick reply
        public QuickReplyItemDto QuickReply { get; set; }
    }

    public class QuickReplyItemDto
    {
        public List<QuickReplyButtonDto> Items { get; set; }
    }

    public class QuickReplyButtonDto
    {
        public string Type { get; set; } = "action";
        public string? ImageUrl { get; set; }
        public ActionDto Action { get; set; }
    }
}

測試

前幾篇的測試都是使用 swagger 打廣播 api 的方式測試，但是免費的 Line Bot 每個月推播訊息用量可是只有 500 則的，所以這篇開始我們就使用 Line Bot 的回覆訊息功能來測試功能吧，畢竟回覆訊息可是不用錢的呢！

建立回覆訊息測試方法

回覆訊息需要透過 webhook 接收到使用者與 Line Bot 的互動內容才能使用一起送來的 reply token 回覆使用者，而使用這種方式最基本的就是透過使用者傳送 關鍵字 來當作判斷要做什麼回覆的依據。

所以先將接收到 message event 時的處理獨立出一個 function 吧。

• LineBotService 新增 function

private void ReceiveMessageWebhookEvent(WebhookEventDto eventDto)
        {
            dynamic replyMessage = new ReplyMessageRequestDto<BaseMessageDto>();

            switch (eventDto.Message.Type)
            {
                // 收到文字訊息
                case MessageTypeEnum.Text:
                    // 訊息內容等於 "測試" 時
                    if (eventDto.Message.Text == "測試")
                    {
                        //這裡給各位自由發揮，建立一個 ReplyMessageRequestDto 吧。
                        //不過下方也提供了一個我回覆的訊息範例，需要的請參考～
                        replyMessage = 
                    }
                    break;
            }
            ReplyMessageHandler(replyMessage);
        }

• 修正原本的 ReceiveWebhook function

/// <summary>
/// 接收 webhook event 處理
/// </summary>
/// <param name="requestBody"></param>
public void ReceiveWebhook(WebhookRequestBodyDto requestBody)
{
    dynamic replyMessage;
    foreach (var eventObject in requestBody.Events)
    {
        switch (eventObject.Type)
        {
            case WebhookEventTypeEnum.Message:
                //-------- 修改處 --------
                if (eventObject.Message.Type == MessageTypeEnum.Text)
                    ReceiveMessageWebhookEvent(eventObject);
                //-------- 修改處 --------
                break;
                .
                .
                .

• 我回覆的訊息範例

// 回覆文字訊息並挾帶 quick reply button
replyMessage = new ReplyMessageRequestDto<TextMessageDto>
{
    ReplyToken = eventDto.ReplyToken,
    Messages = new List<TextMessageDto>
    {
        new TextMessageDto
        {
            Text = "QuickReply 測試訊息",
            QuickReply = new QuickReplyItemDto
            {
                Items = new List<QuickReplyButtonDto>
                {
                    // message action
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                            Type = ActionTypeEnum.Message,
                            Label = "message 測試" ,
                            Text = "測試"
                        }
                    },
                    // uri action
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                            Type = ActionTypeEnum.Uri,
                            Label = "uri 測試" ,
                            Uri = "https://www.appx.com.tw"
                        }
                    },
                     // 使用 uri schema 分享 Line Bot 資訊
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                            Type = ActionTypeEnum.Uri,
                            Label = "分享 Line Bot 資訊" ,
                            Uri = "https://line.me/R/nv/recommendOA/@089yvykp"
                        }
                    },
                    // postback action
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                            Type = ActionTypeEnum.Postback,
                            Label = "postback 測試" ,
                            Data = "quick reply postback action" ,
                            DisplayText = "使用者傳送 displayTex，但不會有 Webhook event 產生。",
                            InputOption = PostbackInputOptionEnum.OpenKeyboard,
                            FillInText = "第一行\n第二行"
                        }
                    },
                    // datetime picker action
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                        Type = ActionTypeEnum.DatetimePicker,
                        Label = "日期時間選擇",
                            Data = "quick reply datetime picker action",
                            Mode = DatetimePickerModeEnum.Datetime,
                            Initial = "2022-09-30T19:00",
                            Max = "2022-12-31T23:59",
                            Min = "2021-01-01T00:00"
                        }
                    },
                    // camera action
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                            Type = ActionTypeEnum.Camera,
                            Label = "開啟相機"
                        }
                    },
                    // camera roll action
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                            Type = ActionTypeEnum.CameraRoll,
                            Label = "開啟相簿"
                        }
                    },
                    // location action
                    new QuickReplyButtonDto {
                        Action = new ActionDto {
                            Type = ActionTypeEnum.Location,
                            Label = "開啟位置"
                        }
                    }
                }
            }
        }
    }
};

結果

傳送預先設定好的關鍵字 “測試” 給 Line Bot 後就會收到回覆訊息。

我的範例訊息就包含了上一篇實作的所有 Action 類別，各位發揮想像力盡情地改造這些按鈕進行測試吧，免費的訊息可以用到天荒地老！

以 分享 Line Bot 資訊 為例

這個功能是使用 uri aciton 搭配 Line 提供的 url schema 實現的，能夠將 Line Bot 的資訊直接分享給他人

按下後會彈出分享的視窗

送出後會傳送出這個訊息，點選後能開啟 Line Bot 的資訊畫面～

Sender 介紹

Sender 屬性的設置能夠改變 Line Bot 傳送這個訊息給使用者時顯示的名稱與頭像，這個屬性的用處就是利用 Line bot 建立客服系統時可以根據每個客服人員的資訊讓使用者知道目前是在跟誰溝通或是之類的方向。

屬性介紹

Class 宣告

在 BaseMessageDto.cs 中添加 class

public class SenderDto
{
    public string Name { get; set; }
    public string IconUrl { get; set; }
}

在 BaseMessageDto 中添加屬性

// Sender
public SenderDto Sender { get; set; }

測試

(偷偷推薦一個可以免費取得圖片的網站 flaticon，這次測試使用到的頭像就是這裡來的！)

把準備好的 icon 放到 UploadFiles 資料夾後，在同樣的 ReceiveMessageWebhookEvent function 添加新的關鍵字回覆內容

if (eventDto.Message.Text == "Sender")
{
    replyMessage = new ReplyMessageRequestDto<TextMessageDto>
    {
        ReplyToken = eventDto.ReplyToken,
        Messages = new List<TextMessageDto>
        {
            new TextMessageDto
            {
                Text = "你好，我是客服人員 1號",
                Sender = new SenderDto
                {
                    Name = "客服人員 1號",
                    IconUrl = "{ngrok 位置}/UploadFiles/man.png"
                }
            },
            new TextMessageDto
            {
                Text = "你好，我是客服人員 2號",
                Sender = new SenderDto
                {
                    Name = "客服人員 2號",
                    IconUrl = "{ngrok 位置}/UploadFiles/gamer.png"
                }
            }
        }
    };
}

結果如下～

結語

這篇看起來很長很複雜，但其實是把上一篇沒有測試的 Actions 放到這邊一起測試才會讓程式碼變這麼多呢...不過也算是順利結束啦，下一篇就正式回到了訊息介紹的正軌上，要介紹的是 Template message 呢！ 敬請期待!

腦筋急轉彎

今天這篇文章較長…就先讓大家腦袋好好消化好了 ~ 下一篇我們再繼續 。

範例程式碼

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

Day12_Message Common Property-Quick Reply & Sender