iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

2

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

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 });

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865ch7AaEs5j7.jpg


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"]}");
}

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865gOy6PhwF8v.jpg

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

程式碼:

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

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865yqDnkLYjrb.jpg


3. URI action 網址動作

在 LINE 中開啟網址連結。

  • type: 類型 uri
  • label: 顯示在按鈕上的文字。
  • uri: 網址連結,可以使用 httphttpslinetel
    詳細內容可以參考 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/"))
};

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865DiR0kCIlq6.jpg

https://ithelp.ithome.com.tw/upload/images/20200113/20106865zNKOnsQKxc.jpg


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"))
    }
};

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865BaoFdVmIVS.jpg

https://ithelp.ithome.com.tw/upload/images/20200113/20106865ZC3s9UXRxk.jpg


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"))
    }
};

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865SfGnRoWQnb.jpg

https://ithelp.ithome.com.tw/upload/images/20200113/20106865YXmGIGcike.jpg


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"))
    }
};

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865vs9NNfPUpx.jpg

https://ithelp.ithome.com.tw/upload/images/20200113/20106865tmpAQD7oxd.jpg


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

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

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

# 日期時間格式

用於 initialmaxmin 的值。

  • 日期: 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}")
         });
}

結果:

https://ithelp.ithome.com.tw/upload/images/20200113/20106865xwc0FZj5tl.jpg

https://ithelp.ithome.com.tw/upload/images/20200113/20106865GItvKwUGVk.jpg

https://ithelp.ithome.com.tw/upload/images/20200113/20106865TDclpDU6cg.jpg


結語

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

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


上一篇
[Day13] LINE Bot 的訊息格式 - Message Types
下一篇
[Day15] LINE Bot 取得用戶上傳的內容 - Message Event
系列文
Line Bot 心得分享 LineMessagingApi + LUIS + BotFramework27

尚未有邦友留言

立即登入留言