最近最熱門的話題莫過於AI了,之前我做過一片講 BOTFRAMEWORK和微信 相結合的帖子 如何將 Microsoft Bot Framework 鏈接至微信公共號 我想今天基於這個題目擴展一下,Power BI Embedded 的數據展示大致思路是利用Bot framework的卡片展示把 PowerBI embedded 的展示結果通過更加自然,更加智能的方式展示在前端甚至是微信客戶端,當然如果展示在微信端還是需要在微信的公共號后台有一些特殊處理。
首先我想先介紹一下 PowerBI embedded 這個產品是基於 windows Azure PaaS 層的一個服務所以如果您想使用這個功能您需要一個 Azure的賬戶,不過幸好 Power BI Embedded 價格不貴按照訪問次數收費並且每個月都有免費次數所以從成本上非常推薦,其次一個好消息是這個服務在我們中國版本的 Azure上也同樣提供所以今天我用 中國版的Azure (MoonCake版)來演示這個方案。下圖是我從MSND上打劫來的圖說明了一個非常明顯的問題,在PowerBI中如果您需要動態的刷新數據那么您的數據源是需要設置成 Azure SQL DB 或者是 Azure SQL Data warehouse。
對於PowerBI Embedded的數據架構見下圖 這里最重要的是 workspace collection 中可有有多個 workspace。在每一個 workspace 中可以有多個dataset 每一個detaset 對應一個 PowerBI 的 PBIX 文件
所以我就直奔主題如果您想問怎么申請 Azure 賬戶 或者什么是 Azure MoonCake 版那么請問度娘或者谷歌。
第一步您需要先創建一個Power BI Embedded 的工作區如下圖,輸入必選項目點擊創建。
隨后您就可以看到創建好的 Power BI Embedded workspace collection,但是您可以注意到工作區是空的,這里有個吐槽點創建工作區只能使用API而不能通過portal。
點擊訪問鍵我們可以看到Key值,保存下來一會兒我們在創建workspace的時候要使用。
接着下一步是創建新的workspace,正如上面說過需要通過 API創建,幸好這里在Github上提供了 中國 Mooncake版本的代碼案例,Mooncake_PowerBI_Embedded 編譯的時候建議打開VPN因為有Nuget的類庫要下載, 打開項目以后找到 ProvisionSample - App.config 文件,輸入配置文件節點數值(在這輸入可以在 console 中省去輸入的麻煩)。
subscriptionId 在概述頁面可以找到
resourceGroup 也是在概述頁面可以找到 資源組
workspaceCollectionName 就是工作區集合名稱
accessKey 就是上面的Key
隨后運行程序即可,由於我們在config文件中設置好了數值,所以只需要按下數字5就可以創建一個新的 workspace 隨着創建成功 console 會返回 workspace ID 當然這里您刷新一下portal頁面也可以在 portal 中看到這個新的workspace。
那么下一步我們需要上傳一個做好的 PowerBI 的 PBIX 文件,選擇6 隨后輸入剛剛創建的 workspace ID,隨后會讓您給您的這個數據集起一個名字,我這里輸入的是PBIE Dataset, 最后輸入 PBIX的文件路徑,最后會看到如下圖的結果說明上傳已經成功了。
下一步我們需要在一個 ASP.NET 的 MVC Web 站點中 Embedded我們的這個BI view 幸好剛才的項目中有寫好的demo code 打開 EmbedSample 項目 - Web.config文件 輸入appSettings節點中的數值
隨后運行網站查看效果如下
做到這里我們就完成了 Power BI Embedded 的工作。當然我們還需要講這個站點部署在IIS上這里您可以部署在 Azure 的 App Service上或者 其他環境中,測試通過后我們進行下一步開始集成到Bot framework中。
此外您有可能遇到這個 feature switch have not been registered yet so switch values may not be correct 的這個錯誤,解決這個問題也很簡單您只要通過Nuget更新一下您網站項目中和power BI Embedded相關的類庫即可。
接着我我們將這個 Power BI 的站點結合Bot Framework Attachments, Card的形式集成進來其實原理很簡單,我這里使用的是Hero Card,利用三方現成的API獲取網頁快照,當然您也可以自己實現這一功能github上有非常多的開源項目。然后添加一個超鏈接實現這個跳轉功能。
如果您還沒有BoT請參考 如何將 Microsoft Bot Framework 鏈接至微信公共號 這篇文章先創建一個Bot。
那么關鍵一點就是如何添加一個Bot中的Hero card 請參考這里 Attachments, Cards and Actions 這里我就直接把實現代碼放給大家,減少復雜度我沒有添加LUIS。
實現效果:
調用Hero Card 的代碼
private async Task MessageReceivedAsync(IDialogContext context, IAwaitable<object> result) { var activity = await result as Activity; if (activity.Text.ToLower().Contains("hi") || activity.Text.ToLower().Contains("hello")) { await context.PostAsync("Hi, I can show the report for you, do you want it?"); } else if (activity.Text.ToLower().Contains("yes") || activity.Text.ToLower().Contains("ok") || activity.Text.ToLower().Contains("go")) { #region HeroCard ConnectorClient connector = new ConnectorClient(new Uri(activity.ServiceUrl)); Activity replyToConversation = activity.CreateReply("Hi, report is here!"); replyToConversation.Recipient = activity.From; replyToConversation.Type = "message"; replyToConversation.Attachments = new List<Attachment>(); List<CardImage> cardImages = new List<CardImage>(); //這里是三方SDK直接URL傳參返回截圖 - 我已經去掉了KEY cardImages.Add(new CardImage(url: "http://api.page2images.com/directlink?p2i_url=http://pbie.chinacloudsites.cn/Dashboard/Report?reportId=0a46b754-f5a3-4c19-b032-c6599bdb2f4d&p2i_key=yourKey")); List<CardAction> cardButtons = new List<CardAction>(); CardAction plButton = new CardAction() { Value = "http://pbie.chinacloudsites.cn/Dashboard/Report?reportId=0a46b754-f5a3-4c19-b032-c6599bdb2f4d", Type = "openUrl", Title = "Show me details!" }; cardButtons.Add(plButton); HeroCard plCard = new HeroCard() { Title = "Report", //Subtitle = "詳細頁", Images = cardImages, Buttons = cardButtons }; Attachment plAttachment = plCard.ToAttachment(); replyToConversation.Attachments.Add(plAttachment); var reply = await connector.Conversations.SendToConversationAsync(replyToConversation); //context.Wait(MessageReceivedAsync); #endregion } else if (!string.IsNullOrWhiteSpace(activity.Text)) { //calculate something for us to return int length = (activity.Text ?? string.Empty).Length; // return our reply to the user await context.PostAsync("sorry, I'm trying to learn more, so far I can show the report for you, do you want it?"); //context.Wait(MessageReceivedAsync); } context.Wait(MessageReceivedAsync); }
BotFramework 的完成webChat版本 鏈接 http://bobot.chinacloudsites.cn/
Power BI Embedded 站點鏈接: http://pbie.chinacloudsites.cn/
Power BI Embedded 表單鏈接:http://pbie.chinacloudsites.cn/Dashboard/Report?reportId=0a46b754-f5a3-4c19-b032-c6599bdb2f4d
希望上的總結可以幫助到大家, 同時歡迎大家在這里和我溝通交流或者在新浪微博上 @王博_Nick