iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0
Modern Web

宅男的浪漫 - 用 .NET Core 打造 Line 婚禮聊天機器人經驗分享系列 第 15

切換 Line 的圖文選單

第12 屆iT邦幫忙鐵人賽系列文章 (Day15)

在上一篇我們介紹如何設定圖文選單,本篇要來介紹如何切換圖文選單,此部分只能用程式來達成,在 Line Business 後台只能設定固定的圖文選單起訖日,有了這功能就可以像網站一樣有網站地圖的概念

今天實作要將 chatbot 隨機切換不同的圖文選單,給使用者不同的體驗,今天的範例圖片在這 https://i.imgur.com/pupYvXr.jpg

CreateRichMenuAsync

原本預設的 Rich Menu 是寫在 SetDefaultRichMenuAsync,我們做點重構,讓Rich Menu 的物件是從外部傳入,因為我們現在要設定多個選單

public async Task<Richmenu> CreateRichMenuAsync(CreateRichmenu richmenu)

{

using (var httpClient = new HttpClient())

{

using (var request = new HttpRequestMessage(new HttpMethod("POST"), lineMessageApiBaseUrl))

{

request.Headers.TryAddWithoutValidation("Authorization", $"Bearer {accessToken}");

var postJson = JsonConvert.SerializeObject(richmenu, new JsonSerializerSettings

{

NullValueHandling = NullValueHandling.Ignore,

ContractResolver = new DefaultContractResolver

{

NamingStrategy = new CamelCaseNamingStrategy()

}

});

request.Content = new StringContent(postJson);

request.Content.Headers.ContentType = MediaTypeHeaderValue.Parse("application/json");

var response = await httpClient.SendAsync(request);

var results = await response.Content.ReadAsStringAsync();

var richmenu_res = JsonConvert.DeserializeObject<Richmenu>(results);

return richmenu_res;

};

}

}

RichMenuUtility

我們將這些定義 Rich Menu的程式抽到這邊

public static class RichMenuUtility

{

public static CreateRichmenu GetDefault()

{

var defaultRichMenu = new CreateRichmenu();

defaultRichMenu.size = new CreateSize(1200, 810);

defaultRichMenu.selected = true;

defaultRichMenu.name = "Default RichMenu";

defaultRichMenu.chatBarText = "Kyle's Wedding";

defaultRichMenu.areas = new List<CreateArea>()

{

new CreateArea(boundx:0,boundy:0,width:800,height:810, _action: new MessageAction("婚紗輪播"))

};

return defaultRichMenu;

}

public static CreateRichmenu GetSecondOne()

{

var defaultRichMenu = new CreateRichmenu();

defaultRichMenu.size = new CreateSize(1200, 810);

defaultRichMenu.selected = true;

defaultRichMenu.name = "Second One";

defaultRichMenu.chatBarText = "Kyle's Wedding";

defaultRichMenu.areas = new List<CreateArea>()

{

new CreateArea(boundx:0,boundy:0,width:800,height:810, _action: new MessageAction("婚紗輪播"))

};

return defaultRichMenu;

}

}

程式就不像 Line Business 後台那麼方便有一些範本,未來如果要封裝 SDK 我可能會考慮將後台的那些範本封裝起來,只要設定圖片.按鈕事件即可

InitRickMenu

修改上一篇,我們 GetRichMenuListAsync 我們改回傳id即可,在設定好圖文選單時也 Add 到 ID 陣列裡,最後,我們隨機取得任一個 ID 做顯示的設定

實際畫面就不 Demo 了,RichMenu會在每次進入聊天頁面的時候隨機切換,但因為會跑出我朋友的列表不方便 Demo XD…當然這需求很奇怪,實際上應該是做成像多層選單方式,去逐步切換,且可以返回主選單的概念,這樣就讓 Line Chatbot 也像網頁一樣有上一頁 下一頁啦~

懶人包,本次學到了什麼?

本篇文章同步發佈於我的 Medium 如果這篇文章對你有幫助,就大力追蹤和拍手鼓掌下去吧 !!


上一篇
Line 的圖文選單
下一篇
來點AI感,用QnA Maker來搞Line Chatbot回覆
系列文
宅男的浪漫 - 用 .NET Core 打造 Line 婚禮聊天機器人經驗分享30

尚未有邦友留言

立即登入留言