2.3 製作格式化的圖卡訊息
在 2.2 的其中一個範例，使用者輸入了文字搜尋相關圖片後，得到的是一連串的圖片內容，如果我們想要好好格式化後再回覆訊息，可以借助 HeroCard 的物件來製作回傳訊息。
將資料填入 HeroCard 中
在這裡我們直接改寫 2.2 的範例，將搜尋後的圖片相關資料，照著 HeroCard 的格式填入對應的資料，所以程式碼改寫成這樣：
// 搜尋關鍵字並回傳結果
request(postOpt, (error, response, body) => {
// 建立回傳的訊息
let retMsg = new builder.Message(session);
let imgArr = [];
body.value.forEach((img) => {
// 將資料製作成 Hero Card
let imgCard = new builder.HeroCard(session)
.title(img.name)
.images([builder.CardImage.create(session, img.thumbnailUrl)]);
imgArr.push(imgCard);
});
retMsg.attachments(imgArr);
retMsg.attachmentLayout(builder.AttachmentLayout.carousel);
session.send(retMsg);
});
這裡使用 HeroCard 來格式化回覆的訊息，在 Microsoft Bot Framework 中，要回傳一個 HeroCard 格式的訊息也是一種附件，所以這裡先建立了一個 builder.Message 的物件，而搜尋結果一個個都產生 builder.HeroCard 物件並存成陣列後，便能直接設定成 message 的附件。而除了設定附件之外，也定義了要用旋轉盤 (carousel) 的格式呈現結果。
所以執行的結果就會像是這樣：
程式碼參考
這篇文章提到的範例程式，可以在這裡找到完整可執行的 bot 程式碼。