Posts

第12 屆iT邦幫忙鐵人賽系列文章 (Day11) 如果前面介紹的訊息類型都不夠怎麼辦？就用 Flex Message 做個客製化的訊息吧，看看官網這些 showcase，4不4很酷阿 設計魂發作 這些效果，主要都是用 JSON 字串組出來的，官網也很貼心的提供 Simulator 來讓你用GUI的方式來設定自己客製的 Flex Message，之前電子喜帖是用圖片的方式，我們來改成 Flex Message 吧。 我在 Simulator 拉的訊息圖片如下 (其實蠻好上手的) 加入行事曆希望引導到 Google Map 透過 UriAction 即可解決 https://calendar.google.com/calendar/u/0/r/eventedit?text=Kyle%27s%20Wedding&dates=20201208T100000Z/20201208T140000Z&details&location=%E5%8F%B0%E5%8C%97%E6%9D%B1%E6%96%B9%E6%96%87%E8%8F%AF 點選右上角 View as JSON 就能取得完整的 JSON 字串 回到 .NET 發送吧，在 LineReplyMessageUtility.cs 實作 ReplyMessageByJsonAsync public async Task ReplyMessageByJsonAsync(string replyToken, string jsonString) { using (var httpClient = new HttpClient()) { using (var request = new HttpRequestMessage(new HttpMethod("POST"), $"{lineMessageApiBaseUrl}")) { request.Headers.TryAddWithoutValidation("Authorization", $"Bearer {accessToken}"); LineMessageReq req = new LineMessageReq(); req....

第12 屆iT邦幫忙鐵人賽系列文章 (Day10) 在上一篇我們用 Template Message 中的 ImageCarousel 實作輪播後，我們再來練習一篇 Template Message，實作到達婚禮現場的各種交通方式資訊，也是先來看看今天的成果 上一篇有介紹 Action 的 7 種類型，前面幾個操作都是用 MessageAction 來引島使用者，而當點選如何前往時，會直接跳出之前實作的"地址導覽" 的 intent，這就是我們今天會帶到的 postback event CarouselTemplate.cs — 實作ITemplate來完成第二種 Template Message 上一篇輪播圖片，這一篇我們來輪播自訂的樣板，CarouselTemplate，一樣繼承 ITemplate 實作 public class CarouselTemplate : ITemplate { public CarouselTemplate() { } public CarouselTemplate(List<ColumnMultipleAction> columns) { Columns = columns; } public string Type => "carousel"; public List<ColumnMultipleAction> Columns { get; set; } } ColumnMultipleAction — 每個樣本的內容 可以設定圖片/標題/副標題…等資訊， ThumbnailImageUrl: 縮圖URL ImageAspectRatio: 圖片的比例 rectangle(1.51:1) square(1:1) ImageSize: cover(不適應地方會裁切掉) contain(包含全部圖片) ImageBackgroundColor: 圖片區塊的背景色 (loading時候會看到) Title: 標題 Text: 副標題 ImageUrl: 圖片網址 DefaultAction: 預設的Action (這樣就不用一個一個塞進 Actions 裡面) Actions: 如我們前一篇文章所說的，7種Action public class ColumnMultipleAction { /// <summary> /// Max width: 1024px /// Max file size: 1 MB /// JPEG or PNG /// </summary> public string ThumbnailImageUrl { get; set; } public ImageAspectRatioType ImageAspectRatio { get; set; } = ImageAspectRatioType....

第12 屆iT邦幫忙鐵人賽系列文章 (Day9) 這篇會開始進入一些較複雜的訊息格式，我們要來做一個婚紗輪播，讓各種參加喜宴的朋友瀏覽，今天先來看成果 Template message 在 Line 的 Template 有分為四種，可以用來引導使用者做下一步的動作 Buttons Confirm Carousel Image carousel Template Message 發送的結構如下 本次要用 ImageCarousel 來實作 擴充 LineReplyMessageUtility.cs 我們在發送的 class 的擴充 public async Task ReplyTemplateMessageAsync(string replyToken, ImageCarouselTemplate template) { using (var httpClient = new HttpClient()) { using (var request = new HttpRequestMessage(new HttpMethod("POST"), $"{lineMessageApiBaseUrl}")) { request.Headers.TryAddWithoutValidation("Authorization", $"Bearer {accessToken}"); LineMessageReq req = new LineMessageReq(); req.ReplyToken = replyToken; req.Messages.Add(new TemplateMessageBase() { Template = template }); var postJson = JsonConvert....

第12 屆iT邦幫忙鐵人賽系列文章 (Day8) 籌備婚禮期間甚至婚禮當天(暈)，常常被問的就是問地點在哪了，Line 本身能直接傳送地圖資訊，可以直接引導到 Google Map 進行導航，在 Line 可以透過 LocationMessage 發送 定義 LocationMessage.cs public class LocationMessage : IMessage { public LineMessageType Type => LineMessageType.location; public string Title { get; set; } public string Address { get; set; } public decimal Latitude { get; set; } public decimal Longitude { get; set; } } 假設我們今天辦在東方文華 (當然沒那麼有錢) 地址為 台灣台北市敦化北路 158 號 經緯度可以在 google map 看到為 @25.0557416,121.5481485 實作 WeddingLocation.cs public async Task ReplyAsync(string replyToken) { var locationName = "臺北文華東方酒店"; var msg = new TextMessage() { Text = $"我們在 {locationName} 舉辦唷!...

上一篇我們用 ImageMessage 來傳送圖片，這一篇我們要來實作傳送婚禮的前導預告片 (回想起來那時候我怎麼那麼閒XD )，我當時自己是從淘寶買一些婚禮的影片範本，買回來用 Adobe Effect 來改，或者是網路上可能會有一些免費的 template 也是可以拿來應用 上傳 Video Line VideoMessage 一樣要透過URL來發送，我們一樣傳到 Imgur，就能產生一個網址，這是我當時所購買的影片範本 https://i.imgur.com/n8QsXTk.mp4 定義 VideoMessage.cs public class VideoMessage : IMessage { public LineMessageType Type => LineMessageType.video; public string OriginalContentUrl { get; set; } public string PreviewImageUrl { get; set; } } 一樣在 OnMessageAsync 增加一個 前導影片 的實作 實作內容 public class WeddingTrailer : IReplyIntent { private readonly LineReplyMessageUtility lineMessageUtility; private readonly LineProfileUtility lineProfileUtility; public WeddingTrailer(LineReplyMessageUtility _lineMessageUtility, LineProfileUtility _lineProfileUtility) { lineMessageUtility = _lineMessageUtility; lineProfileUtility = _lineProfileUtility; } public async Task ReplyAsync(string replyToken) { var imageMessage = new VideoMessage() { OriginalContentUrl = "https://i....