[Bot Framework] Card 使用教學(一) ThumbnailCard

前言:

微軟的Bot Framework除了提供一般的文字回應之外, 也支援開發者們把文字圖片以及按鈕, 一同封裝在Card的物件裡, 然後再回傳給前端的Channel, 前端的使用者就能透過Card來跟我們Bot互動

在官方的API文件裡, 可以發現IMessageActivity有一個Attachments的屬性,

所以如果想要回應一個Card, 只要把Card實體塞到IMessageActivity.Attachments的集合裡面, 就能把Card回應給使用者

	var reply = context.MakeMessage();
	// create a card ...
	reply.Attachments.add( myThumbnailCard );
	await context.PostAsync(reply);

view raw .cs hosted with ❤ by GitHub

目前微軟Bot Framework提供了許多種Card的形式, 而我比較常用的是HeroCard, ThumbnailCard,  SignInCard. 而今天要介紹的是HeroCard, ThumbnailCard

ThumbnailCard

ThumbnailCard的作用是讓你顯示一張小圖搭配文字描述
基本上建立ThumbnailCard的方法如下

定義CardImage

	var cardImages = new List<CardImage>()
	{
	new CardImage(url:"{your image url}");
	}

view raw .cs hosted with ❤ by GitHub

定義CardAction

在這個CardAction裡面,  我們定義一個按鈕, 當這個按鈕被按下去的時候, 會開啟網頁

	var cardActions = new List<CarAction>()
	{
	new CardAction( Type:"openUrl", Value:"http://www.google.com" ,Title:"Link");
	}

view raw .cs hosted with ❤ by GitHub

建立ThumbnailCard實體

	var thbCard = new ThumbnailCard()
	{
	Title = " Title ",
	Subtitle = " Subtitle",
	Images = cardImages,
	Buttons = cardActions
	};

view raw .cs hosted with ❤ by GitHub

加到IMessageActivity.Attachments裡

	var reply = context.MakeMessage();
	// create cards...
	Attachment att = thbCard.ToAttachment();
	reply.Attachments.Add(att);
	await context.PostAsync(reply);

view raw .cs hosted with ❤ by GitHub

完整程式碼範例如下

	var reply = context.MakeMessage();
	Dictionary<string, string> cardImageUrls = new Dictionary<string, string>()
	{
	{"Nitro 5","https://static.acer.com/up/Resource/Acer/Laptops/Nitro_5/Gallery/20170613/Nitro5_gallery_01.png"},
	{"Aspire Vx 15","https://static.acer.com/up/Resource/Acer/Laptops/Aspire_VX_15/Overview/20161117/Aspire-VX-15_gallery-01.png"},
	{"Swift 7", "https://static.acer.com/up/Resource/Acer/Notebooks/Swift%207/Photogallery/20160824/Swift7-gallery-01.png"}
	};
	Dictionary<string, string> cardContentList = new Dictionary<string, string>()
	{
	{"Nitro 5","Windows 10 Home Intel® Core™ i7-7700HQ processor Quad-core 2.80 GHz 39.6 cm (15.6) Full HD (1920 x 1080) 16:9 NVIDIA® GeForce® GTX 1050 with 4 GB Dedicated Memory 16 GB, DDR4 SDRAM 1 TB HDD, 128 GB SSD"},
	{"Aspire Vx 15","With its hard edged futuristic design the Aspire VX 15, looks and feels like it will help you take control."},
	{"Swift 7", "Windows 10 Home 33.8 cm (13.3) Full HD (1920 x 1080) 16:9 IPS Intel® Shared Memory 8 GB, LPDDR3 Intel® Core™ i5-7Y54 processor 1.20 GHz 256 GB SSD"}
	};
	foreach(var imgUrl in cardImageUrls)
	{
	List<CardImage> cardImgs = new List<CardImage>()
	{
	new CardImage(url:imgUrl.Value)
	};
	List<CardAction> cardAction = new List<CardAction>()
	{
	new CardAction()
	{
	Value = imgUrl.Key,
	Type = "imBack",
	Title = "Detail"
	}
	};
	var thbCard = new ThumbnailCard()
	{
	Title = $"{imgUrl.Key}",
	Subtitle = $"{cardContentList.FirstOrDefault( c=> c.Key == imgUrl.Key)}",
	Images = cardImgs,
	Buttons = cardAction
	};
	Attachment att = thbCard.ToAttachment();
	reply.Attachments.Add(att);
	}
	reply.Text = "Products";
	reply.Speak = "Products";
	await context.PostAsync(reply);

view raw MessageController.cs hosted with ❤ by GitHub