Step by step(2) .Net Web API 2 撰寫 LineBot(Webhook) (使用套件)

續上篇Step by step(1) .Net Web API 2 撰寫 LineBot(Webhook) (使用套件)

看過後應該會對LineBot應用技巧會有點感覺,這篇會著重實作開發技巧以及新增幾個Action等介紹。

另外,Line似乎要把商業用途與開發分更明確,目前已經沒有Line Business Center,Messaging API申請方式有所異動,但其實申請方法差不多,請到LineDevelopers申請。

文章概要

1. 事件類別
   1.1 Common Fields
   1.2 Event Type
   1.3 Message Event
   1.4 程式範例
2. 實作功能
   2.1 上傳圖片
   2.2 DatetimePickerAction
3. 結論
4. 參考網址

1. 事件類別

當一個事件類型(Type)的判斷,例如:使用者(User)發了一個對話(Message),這個對話可能是文字(Text)、可能是圖片(Image)。

從上面例子來看我們知道類型有User、Message、(Text or Image),有這些型態可以定義要做什麼事情。

簡而言之,就是分析使用者的Event,然後在從Event內的Type讓程式去做某些事情。

建議:可把這些Type變成列舉(Enum)來做判斷,程式碼更好閱讀。

1.1 Common Fields

user:使用者
group:群組
room:房間

1.2 Event Type

message:訊息事件 (此事件還有一層如1.3介紹)
follow:使用者加入機器人為好友事件
unfollow:使用者封鎖機器人為好友事件
join:機器人加入群組事件
leave:機器人離開群組事件
postback:使用者透過Template Message回應的事件
beacon:透過 LINE Beacon 所觸發的事件

補充:什麼是LINE Beacon?

1.3 Message Event

text:文字
image:圖片
video:影片
audio:聲音
location:位置資訊
sticker:貼圖

1.4 程式範例

如何知道Common Fields、Event Type、Message Event?

// 接收Json資料
string postData = Request.Content.ReadAsStringAsync().Result;
var ReceivedMessage = Utility.Parsing(postData);

// CommonFields
string CommonFieldsType = ReceivedMessage.events.FirstOrDefault().source.type;

// EventType
string EventType = ReceivedMessage.events.FirstOrDefault().type;

// MessageEvent
string MessageEventType = ReceivedMessage.events.FirstOrDefault().message.type;

假設使用者發出"test"文字訊息,接收Type程式範例如下:

string postData = Request.Content.ReadAsStringAsync().Result;
var ReceivedMessage = Utility.Parsing(postData);
Bot bot = new Bot(ChannelAccessToken);
string Lineid = ReceivedMessage.events.FirstOrDefault().source.userId;

string CommonFieldsType = ReceivedMessage.events.FirstOrDefault().source.type;
string EventType = ReceivedMessage.events.FirstOrDefault().type;
string MessageEventType = ReceivedMessage.events.FirstOrDefault().message.type;

bot.PushMessage(Lineid, $"CommonFields:{CommonFieldsType}");
bot.PushMessage(Lineid, $"EventType:{EventType}");
bot.PushMessage(Lineid, $"MessageEvent:{MessageEventType}");

2. 實作功能

上篇沒說到的一些實作,未來有新的實作或技巧都會更新上來。

2.1 上傳圖片

當使用者與Bot對話會有一個ContentID,再利用此ContentID反查使用者所發送的資訊。

在程式範例當中先抓取ContentID,接著接收圖片並上傳至空間,在發送圖片網址給使用者。

if(ReceivedMessage.events.FirstOrDefault().message.type =="image")
{
    string ContentID = ReceivedMessage.events.FirstOrDefault().message.id.ToString();
    // 取得使用者bytedata
    byte[] filebody = Utility.GetUserUploadedContent(ContentID, ChannelAccessToken);
    string filename = $"/image/{Guid.NewGuid()}.png";
    var path = HttpContext.Current.Request.MapPath(filename);
    File.WriteAllBytes(path, filebody);

    bot.PushMessage(Lineid, "您上傳圖片為下方:");
    bot.PushMessage(Lineid, new Uri($"https://{HttpContext.Current.Request.Url.Host}{filename}"));
}

2.2 DatetimePickerAction

讓使用者選擇時間。當使用者選擇日期後再從postback.Params去解析使用者選擇的時間,為Postback Event。

詳細格式一定要看Line Developers

節錄自Line Developers的Datetime picker action。

var Template = new List<TemplateActionBase>();

Template.Add(new DateTimePickerAction()
{
    label = "test", // 標籤文字
    mode = "date", // 有三個mode:date、time、datetime
    data = "Postbackdata", // Postback資料
    initial = "2017-09-28", // 時間初始值
    max = "2017-12-31", // 時間最大值
    min = "2017-01-01" // 時間最小值
});

var ButtonsTemplate = new ButtonsTemplate()
{
    thumbnailImageUrl = new Uri("https://pics.iclope.com/news/test-cigarette-electronique.jpg"),
    title = "標題",
    text = "內容文字",
    altText = "當不支援裝置的文字",
    actions = Template
};

// 接收Postback資料
if (ReceivedMessage.events.FirstOrDefault().type == "postback")
{
    //判斷data為"Postbackdata"
    if (ReceivedMessage.events.FirstOrDefault().postback.data == "Postbackdata")
    {
        // 使用者選擇時間
        string Date = ReceivedMessage.events.FirstOrDefault().postback.Params.date;
        bot.PushMessage(Lineid, $"您選擇日期為{Date}");
        return Ok();
    }
}

bot.PushMessage(Lineid, ButtonsTemplate);

3. 結論

LineBot功能越來越多,面對商業行為受到更大的挑戰,往後有新功能或技巧會上來更新 : )

GitHub

4. 參考網址

Line developers