第12 屆iT邦幫忙鐵人賽系列文章 (Day11)
如果前面介紹的訊息類型都不夠怎麼辦？就用 Flex Message 做個客製化的訊息吧，看看官網這些 showcase，4不4很酷阿
設計魂發作
這些效果，主要都是用 JSON 字串組出來的，官網也很貼心的提供 Simulator 來讓你用GUI的方式來設定自己客製的 Flex Message，之前電子喜帖是用圖片的方式，我們來改成 Flex Message 吧。
我在 Simulator 拉的訊息圖片如下 (其實蠻好上手的)
加入行事曆希望引導到 Google Map
透過 UriAction 即可解決
點選右上角 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.ReplyToken = replyToken;
req.Messages.Add(new FlexMessage()
{
Contents = JsonConvert.DeserializeObject(jsonString)
});
var postJson = JsonConvert.SerializeObject(req, new JsonSerializerSettings
{
NullValueHandling = NullValueHandling.Ignore,
ContractResolver = new DefaultContractResolver
{
NamingStrategy = new CamelCaseNamingStrategy()
},
Formatting = Formatting.Indented
}).Replace("\"",@"""");
request.Content = new StringContent(postJson);
request.Content.Headers.ContentType = MediaTypeHeaderValue.Parse("application/json");
var response = await httpClient.SendAsync(request);
var result = await response.Content.ReadAsStringAsync();
}
}
}
FlexMessage 繼承 IMessage
public class FlexMessage : IMessage
{
public LineMessageType Type => LineMessageType.flex;
public string AltText => "Flex Message";
public dynamic Contents { get; set; }
}
OnMessageAsync
實作 WeddingInvitation.cs
複製的 JSON 字串記得將雙引號取代成兩個雙引號
await lineMessageUtility.ReplyMessageByJsonAsync(replyToken, jsonString);
像 FlexMessage 這種複雜的 JSON 我建議就不要用啥C# 型別來組了，只會讓程式碼更噁心而已，如果要動態修改裡面的內容，其實也只是要改字串而已，譬如：
var name = "kyle";
var jsonContent = $"hello world, {name}";
實作效果
懶人包，本次學到了什麼?
- 用 Flex Message Simulator 來拉花式訊息，取得 JSON https://developers.line.biz/en/docs/messaging-api/message-types/#template-messages
- 如何將 Flex Message 的 JSON 做發送 https://developers.line.biz/en/reference/messaging-api/#flex-message
- 加入 Google 行事曆的小技巧