老司机全程带路解析,5 步玩转微软炫酷服务

你是否见过像下图这样一个具备交互功能且样子还很赞的报表!

那小编想让大家猜猜,为自己开发的应用添加一个这样的报表模块需要多少代码量?

0?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1

我们先不着急回答这个问题,看完这篇文章,你自然会得出答案。

最近,由世纪互联运营的 Microsoft Azure 发布了一个超级炫酷的服务 Power BI Embedded,该服务可以通过 REST API 和 Power BI SDK 将 Power BI 报表快速集成到 web 或移动应用程序,而无需重新设计现有应用。作为程序猿的小编在第一时间就进行了体验,所以今天就由我来抛砖引玉,只需要简单几步,教你如何让自己的应用具备交互式 Power BI 报表功能!

 

640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1

(Power BI Embedded 概念模型)

如上图所示,想实现炫酷的功能,需要以下几步:

小编提醒:Power BI Embedded 是基于 Azure 平台的的服务,前往 Azure 官网即可订阅 Azure 云服务。

1.创建 Power BI 工作区集合

在这个步骤中我们的主要目的是为工作区集合起名和获取用于同 Power BI Embedded 服务后端进行交互的 Access Key,有了这个 Key 我们便可以与 Power BI 后端进行亲密交互了。

操作步骤:

A. 打开并登录到 Azure 预览门户

B. 在侧面板上单击“+ 新建”。在搜索框中输入 Power BI 或通过 Intelligence + Analytics 类目,找到 Power BI Embedded 服务,并点击创建:

 

640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1

C. 在“创建”边栏选项卡上输入所需的信息。全部填选之后点击“创建”按钮。

 

640?tp=webp&wxfrom=5&wx_lazy=1

D. 创建完成之后,点击侧面板底部的“更多服务”,通过“智能+分析”类目找到 Power BI workspace collections 项:

 

640?tp=webp&wxfrom=5&wx_lazy=1

E. 可以看到,此时工作区集合中还没有任何 Power BI 工作区被创建,不要着急大家接着往下看:

 

640?tp=webp&wxfrom=5&wx_lazy=1

F. 调用 Power BI API 所需的最重要信息之一就是访问密钥,小编要敲黑板啦,这就是我们前面提到的用于同 Power BI Embedded 服务后端进行交互的 Access Key,这才是打开 Power BI Embedded 大门的钥匙啊。单击“GENERAL”边栏选项卡上的“访问键”获取键 1。

 

640?tp=webp&wxfrom=5&wx_lazy=1

2.创建 Power BI 工作区

有了步骤 1 中的 Power BI 工作区集合和管理 Power BI Embedded 的钥匙(访问键),下一步我们就需要在工作区集合里面创建 Power BI 工作区了,工作区是包含了报表、数据集的可视集合,我们最终看到嵌入应用中的报表就在这个 Power BI 工作区内。

操作步骤:

A. 下载并解压缩 GitHub 上的 Power BI Embedded - Integrate a report into a web app 示例。

 

640?tp=webp&wxfrom=5&wx_lazy=1

B. 非常重要:示例应用中所使用的一些 URL 只适用于 Global 环境,用于 Azure China 需要做相应的替换,需要修改的地方如下:

\ProvisionSample\App.config 中的 powerBIApiEndpoint的 value 需要替换成 https://api.powerbi.cn,azureApiEndpoint 的 value 需要替换成 https://management.chinacloudapi.cn:

 

640?tp=webp&wxfrom=5&wx_lazy=1

\ProvisionSample\Program.cs 中的 armResource 地址需要替换成https://management.core.chinacloudapi.cn:

 

640?tp=webp&wxfrom=5&wx_lazy=1

\ProvisionSample\ProgramExtensions.cs 中的 https://login.windows.net 需要替换成https://login.chinacloudapi.cn.

 

640?tp=webp&wxfrom=5&wx_lazy=1

C. 在 Visual Studio 中打开“PowerBI embedded.sln”。在 NuGET 程序包管理器控制台中执行“Update-Package”命令来更新解决方案中使用的程序包。友情提醒:可能需要执行命令和重启 Visual Studio 几次才能把解决方案中所使用的程序包更新完毕。

D. 运行“ProvisionSample”控制台应用。

 

640?tp=webp&wxfrom=5&wx_lazy=1

E. 在示例控制台应用中,输入 1 进入 Collection management 命令组,然后输入 6 选择 Provision a new Workspace。

F. 按照提示输入通过步骤 2 获取的工作区集合名称和访问密钥。

3.部署和发布

工作区中的每个报表都会对应一个 Power BI Desktop 文件,其中包含数据集(包括数据源设置)。我们需要将我们通过 Power BI Desktop 创建的报表导入 Power BI 工作区。

对于这个文件,大家就不用担心了,使用 Power BI Desktop 工具通过简单的拖拽动作就能制作出示例效果的报表,完全零代码(什么,非要写代码?那您可以出门右转了)。

操作步骤:

A. 再次运行“ProvisionSample”控制台应用。

 

640?tp=webp&wxfrom=5&wx_lazy=1

B. 在示例控制台应用中,输入 2 进入 Report Management 命令组,然后输入 3 选择 Import PBIX Desktop file into a workspace 选项,由于 ProvisionSample 控制台应用返回给我的都是我刚刚创建的 Collection Name 和 Workspace ID,所以我都是直接点击的回车。

C. 提示为数据集输入名称,为需要上传的 pbix 文件输入文件路径,如下图,执行成功后会返回 Import ID:

 

640?tp=webp&wxfrom=5&wx_lazy=1

4.报表嵌入自己应用

通过前面的步骤,Power BI Embedded 云端报表的准备工作已经完毕。下面就是重头戏喽:将报表嵌入我们自己的应用

A. 在 Power BI Embedded Visual Studio 解决方案中,右键单击 EmbedSample Web 应用,然后选择“设为启动项目”。

B. 在 Web.config 的 EmbedSample Web 应用程序中,编辑 appSettings 中的 AccessKey ,ApiUrl 和 WorkspaceCollection 名称,以及 WorkspaceId:

 

640?tp=webp&wxfrom=5&wx_lazy=1

C. 运行 EmbedSample Web 应用程序后,左侧的导航面板会包含“报表”菜单。展开“Reports”,可以看到前面步骤上传的 Retail Analysis 报表名称:

 

640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1

见证奇迹的时刻到啦:单击 Retail Analysis 报表后,EmbedSample Web 应用程序会展示出我们在本地通过 Power BI Desktop 进行拖拽创建并上传到 Power BI Embedded 后的报表。

 

640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1

有的朋友要问了,是只能查看的报表吗,或者说看到的只是一张或多张照片?NO!NO!NO!能通过 Power BI 网站(偷偷告诉你,由世纪互联运营的 Power BI 中国版服务已经上线了)执行的报表交互操作在这里也能够进行,比如默认显示的是全线产品在不同店铺的销售情况(比如下图密密麻麻的柱形图就是今年不同店铺全线产品的整体销售额):

 

640?tp=webp&wxfrom=5&wx_lazy=1

(全线产品 Monthly 销售情况)

如果我们想查看 010-Womens 单品类的销售情况,我们只需要点击 010-Womens 大圆点即可,所有数据都变换成了 010-Womens 单品类的销售数据,以及可以清晰的看到在整体销售额中的占比:

 

640?tp=webp&wxfrom=5&wx_lazy=1

(仅 010-Womens 单品类 Monthly 的销售情况)

什么?报表界面内部的交互操作还不过瘾?“嵌入感“略强?那一定要体验一下 Power BI 的报表参数传递功能:通过 JavaScript API 应用程序就能够以编程方式与各种报表元素(例如页面和筛选器)进行交互啦,就像下图中 Page Navigation 功能区,内部的交互功能都是通过 JavaScript API 实现的。

 

640?tp=webp&wxfrom=5&wx_lazy=1

通过上面简单的 5 步,几乎零代码,便能够快速在自己应用中嵌入报表分析的功能,你也来试一下?

彩蛋 1 个:

聪明的你肯定要问:把 Power BI 图表嵌入到我们自己应用中的原理是什么呢?以本示例为例,这是一个 Web 页面,我们的 Web 代码逻辑主要生成了如下关键内容:

 

640?tp=webp&wxfrom=5&wx_lazy=1

Power BI Access Token,Power BI Embed URL,有了这两项信息,原先只能通过订阅并登录 Power BI 网站才能进行的可视化报表分析功能,现在就可以在我们自己的应用页面中进行嵌入和展现啦(构造一个 Post 请求,把 Access Token 值发送给 Power BI Embed URL 请求 Load Report 即可)。

 

内容转载自公众号

Microsoft云科技

Microsoft云科技

转载于:https://my.oschina.net/u/3100313/blog/868232

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值