今天要介紹的是動作類型，這裡的動作是指點擊 「按鈕」 或 「圖文選單」 時觸發的動作，總共有 7 種，之前的文章使用過 Postback、Message、URI 三種，這篇就帶大家來看還有哪些動作類型可以使用。

Action objects:

• Message action 訊息動作
• Postback action 回呼動作
• URI action 網址動作
• Camera action 相機動作
• Camera roll action 相片片卷動作
• Location action 定位動作
• Datetime picker action 日期時間選擇器動作

1. Message action 訊息動作

發送訊息到聊天視窗上。

• type: 類型 message
• label: 顯示在按鈕上的文字。
• text: 發送到聊天視窗上的文字，最多 300字。

來源官方文件: #message-action

程式碼:

var buttonComponent = new ButtonComponent
{
    Style = ButtonStyle.Primary,
    Action = new MessageTemplateAction(
        "Message Button", "Hello!!")
};

//主結構
var flexMessage = new FlexMessage("Action objects")
{
    Contents = new BubbleContainer
    {
        Body = new BoxComponent
        {
            Layout = BoxLayout.Vertical,
            Contents = new List<IFlexComponent>
            {
                buttonComponent
            }
        }
    }
};
//回覆訊息
await _messagingClient.ReplyMessageAsync(ev.ReplyToken, 
    new List<ISendMessage> { flexMessage });

結果:

2. Postback action 回呼動作

Postback 可以透過 webhook 呼叫後端程式，並且不會在聊天視窗留下訊息，可以使用 data 屬性附帶資料。

• type: 類型 postback
• label: 顯示在按鈕上的文字。
• data: 要傳到後端的資料，最多 300字。
• displayText: 發送到聊天視窗上的文字，最多 300字。

來源官方文件: #postback-action

程式碼:

var buttonComponent = new ButtonComponent
{
    Style = ButtonStyle.Primary,
    Action = new PostbackTemplateAction(
        "Postback Button", "xxx=123")
};

protected override async Task OnPostbackAsync(PostbackEvent ev)
{
    //將 data 資料轉成 QueryString
    var query = HttpUtility.ParseQueryString(ev.Postback.Data);
    //回覆訊息
    await _messagingClient.ReplyMessageAsync(ev.ReplyToken, 
        $"收到的 xxx 是: {query["xxx"]}");
}

結果:

如果想要發送訊息到聊天視窗可以使用 displayText 屬性。

程式碼:

var buttonComponent = new ButtonComponent
{
    Style = ButtonStyle.Primary,
    Action = new PostbackTemplateAction(
        "Postback Button", "xxx=123", "text", true)
};

結果:

3. URI action 網址動作

在 LINE 中開啟網址連結。

• type: 類型 uri
• label: 顯示在按鈕上的文字。
• uri: 網址連結，可以使用 http、https、line、tel。
  詳細內容可以參考 LINE URL scheme。
• altUri.desktop: 指定電腦版的開啟方式，使用方式同 uri。

來源官方文件: #uri-action

程式碼:

var buttonComponent = new ButtonComponent
{
    Style = ButtonStyle.Primary,
    Action = new UriTemplateAction(
        "Uri Button",
        "https://ithelp.ithome.com.tw/users/20106865/articles",
        new AltUri("https://www.google.com/"))
};

結果:

4. Camera action 相機動作

在 LINE 中開啟照相機，只能用在 Quick Reply 上。

• type: 類型 camera
• label: 顯示在按鈕上的文字。

來源官方文件: #camera-action

程式碼:

var message = new TextMessage("請選擇");
message.QuickReply = new QuickReply
{
    Items = new List<QuickReplyButtonObject>
    {
        new QuickReplyButtonObject(
            new CameraTemplateAction("Camera"))
    }
};

結果:

5. Camera roll action 相片片卷動作

在 LINE 中開啟相片片卷，只能用在 Quick Reply 上。

• type: 類型 cameraRoll
• label: 顯示在按鈕上的文字。

來源官方文件: #camera-roll-action

程式碼:

var message = new TextMessage("請選擇");
message.QuickReply = new QuickReply
{
    Items = new List<QuickReplyButtonObject>
    {
        new QuickReplyButtonObject(
            new CameraRollTemplateAction("Camera Roll"))
    }
};

結果:

6. Location action 定位動作

在 LINE 中開啟定位功能，只能用在 Quick Reply 上。

• type: 類型 location
• label: 顯示在按鈕上的文字。

來源官方文件: #location-action

程式碼:

var message = new TextMessage("請選擇");
message.QuickReply = new QuickReply
{
    Items = new List<QuickReplyButtonObject>
    {
        new QuickReplyButtonObject(
            new LocationTemplateAction("Location"))
    }
};

結果:

7. Datetime picker action 日期時間選擇器動作

開啟日期時間選擇器，選完日期或時間後會透過 Postback 事件，將資料傳到後端。

• type: 類型 datetimepicker
• label: 顯示在按鈕上的文字。
• data: 要傳到後端的資料，最多 300字。
• mode: 選擇器類型，date、time、datetime。
• initial: 初始時間。
• max: 起始時間範圍。
• min: 結束時間範圍。

# 日期時間格式

用於 initial、max、min 的值。

• 日期: full-date，範例: 2020-01-01。
• 時間: time-hour:time-minute，範例: 23:50。
• 日期時間:
  full-dateTtime-hour:time-minute，範例: 2020-01-01T23:50
  full-datettime-hour:time-minute，範例: 2020-01-01t23:50

來源官方文件: #datetime-picker-action

程式碼:

var buttonComponent = new ButtonComponent
{
    Style = ButtonStyle.Primary,
    Action = new DateTimePickerTemplateAction(
        "DateTimePicker Button", 
        "xxx=123", 
        DateTimePickerMode.Datetime,
        "2020-01-13T10:10",
        "2019-12-13T10:10",
        "2020-02-13T10:10")
};

protected override async Task OnPostbackAsync(PostbackEvent ev)
{
    //回覆訊息
    await _messagingClient.ReplyMessageAsync(ev.ReplyToken,
         new List<ISendMessage>
         {
             new TextMessage($"收到的 data 是: {ev.Postback.Data}"),
             new TextMessage($"收到的日期是: {ev.Postback.Params.Date}"),
             new TextMessage($"收到的時間是: {ev.Postback.Params.Time}"),
             new TextMessage($"收到的日期時間是: {ev.Postback.Params.DateTime}")
         });
}

結果:

結語

下一篇要介紹如何取得用戶上傳的內容，例如: 圖片、影片、等等...。

今天就到這裡，感謝大家觀看。 (´・ω・｀)