用好 DIV 和 API,在前端系统中轻松嵌入数据分析模块

简介: 用好 DIV 和 API,在前端系统中轻松嵌入数据分析模块

在数字化转型潮流席卷各大行业的今天,越来越多的企业开始重视 BI(商业智能)技术的部署和应用,期望从不断增长的数据资源中获得更多业务价值,从而提升利润、控制风险、降低成本。BI 能整合、组织和分析数据,将数据转化为有价值的信息,为企业管理和决策提供支持,成为企业迎接变革和商业创新的决胜因素。

由于 BI 技术的重要性,企业更希望在现有的业务平台和系统中按需集成BI能力,从而在各类场景中充分发挥数据分析带来的优势,满足企业日益多样化的数据分析诉求,使 BI 能力与企业业务深度融合。然而,市面上常见的 BI 工具大都是独立、打包的整体方案,很难与前端的业务系统集成在一起,在实践中常常无法满足需求。在这样的背景下,嵌入式 BI 应运而生。

所谓嵌入式 BI,就是在企业现有业务系统中按需集成各种类型的数据分析能力。这种集成工作一般需要考虑两个要点:一方面,它本质上是现有业务系统的一次升级过程,需要关注升级内容与原系统的兼容性、稳定性、安全性等指标;另一方面,业务侧一般希望深度集成专业的数据分析组件,而不是任意挂载一个简单的模块应付了事。这两个要点为开发团队提出了更高的要求和挑战,需要团队认真对待。

 

嵌入式数据分析模块架构探索

对于很多中小企业而言,软件开发团队并不具备独立开发 In-House 嵌入 BI 方案的能力,需要寻求外部第三方供应商的支持。行业中也出现了很多专业的外部供应商,他们探索出了一些经过市场验证的嵌入式 BI 最佳实践。我们以业内老牌知名企业葡萄城开发的 Wyn 商业智能嵌入式架构为例,探讨数据分析模块应该如何嵌入现有业务系统:

image.png

image.png

如上所示,对于业务人员来说,应用功能层的数据分析仪表板、图表、设计器、门户等模块,就是嵌入式 BI 方案展现出来的最终效果。其中,模块的内容和形态一般是根据业务需求决定的,例如为某个销售看板集成一些销售数据动态图表,实时反映各地区的当前销售状况。由于业务需求往往比较多样化,嵌入模块的内容和形态也非常多变,这就要求前端技术层具备更强的适应能力。

前端技术层在过去普遍采用 URL iFrame 架构来实现模块嵌入,如今更复杂的需求更多用 DIV 方式打造解决方案。此外,以 Wyn 商业智能为例,其 BI 模块还可以同泛微、用友 U8+、企业微信和钉钉等常用的企业信息系统集成,增强它们的数据分析能力。

API 层对于嵌入式 BI 方案是非常重要的。例如,API 允许根据用户类型打开和关闭工具栏,只允许根据使用规则显示指定的数据源,并支持创建具有不同过滤器和选项的仪表板。专业的嵌入式BI可以通过调用 API,在应用软件内对仪表板/报表进行权限管理、分类管理、重命名、删除等深度集成操作,而应用软件和 BI 软件之间的接口对最终用户是完全透明的。当然,对于较为简单的业务需求而言,嵌入式 BI 架构中取消 API 层,或者只有简单的 API 层也是可以接受的。

主流实现方案对比

如上所述,对于开发团队而言,嵌入式 BI 方案的技术选型关键在于 DIV 和IFrame 架构的选择,以及是否加入强大的 API 层。

IFrame 架构在早期的嵌入式 BI 市场非常流行,因其原理简单、实现方便、开发周期较短,使企业能够快速实现初期的嵌入式 BI 需求。但这种方式虽然简单,局限性也是很大的。例如,使用 IFrame 就很难在系统中深度集成数据分析模块。IFrame 更像曾经的 Flash 元素,是一种相对独立的模块。它与页面的其他元素很难融合和互动,即便可以实现也需要付出大量努力和代价。


image.png

相比之下,基于 JavaScript 的 DIV 层级的无缝嵌入方案,可以利用原生的JavaScript 将整个仪表板等以 DIV 的方式集成到项目中。嵌入的图表元素具有高度开放的接口,能够与其他元素进行数据交互。甚至 BI 软件整体都可以通过DIV 架构直接嵌入到现有系统中,确保了无缝和直观的用户体验。即便当前的业务需求仅仅停留在简单的图表展示层面,考虑到未来的升级和扩展潜力,开发团队还是最好选择 DIV 架构来设计 BI 嵌入方案。

另一方面,API 层能够大大简化业务人员对嵌入式 BI 模块的操作,往往是开发团队需要重点实现的功能目标。Wyn 商业智能的嵌入式 BI 方案就提供了GraphQL API,几乎所有界面操作均可通过 API 调用简单完成。下图就是一个简单的 API 调用示例:

网络异常,图片无法展示
|

GraphQL API 不需要为不同的对象操作提供不同的 URL。不同对象的不同操作均通过一个统一的 URL(http://localhost:51980/api/gr...)调用,只是各类操作提交的数据不同。可以看到,GraphQL API 的操作非常易于上手,可以大大方便开发团队和业务团队,满足各类复杂的业务需求。下面来看 Wyn 商业智能提供的一个数据查询 API 的操作示例,从中可以体会 API 的低门槛与便利性:

image.png

当我们需要调用某个数据集,可以通过该 API 以 POST 或 GET 两种方式完成操作。(示例 URL 为http://10.32.5.7:51980/api/v1... *from Categories&token=27487CA0BE14CF599444E8553E5E07F78D5D1AB8646302A2715E4802FCB95F08&format=json;调用数据集的 URL 格式为 POST/GET api/v1/dataset/{document id}/query。)

image.png

POST 方式,有效负载格式:

{

 "QueryType": "NONE|WAX",

 "Query": "some text like a WAX statement or empty"

 "DatasetParameters":{

   "Parameter1": "ParameterValue1"(单值),

   "Parameter2": "ParameterValue1,ParameterValue2" (多值使用逗号分隔)

 },

 "Format":Arrow | Json,

 "Options":{

 "Parameter1":"Value1"

 }

}

GET 方式,查询参数

?format=Arrow | Json

&$parameter1=value1

&$parameter2=value2_1

&$parameter2=value2_2

&option1=value1

&option2=value2

option1, option2 ...为选项参数,前缀$表示数据集参数,多个值通过多次重复一个参数来表示。Option 选项参数具体信息如下:

image.png

image.png

只需几行简单的代码即可完成数据集的调用操作,这对嵌入式 BI 场景而言无疑是非常有价值的。API 层与 DIV 嵌入结合,可以为嵌入式 BI 场景需求提供令人满意的解决方案。

总体而言,虽然 iFrame 架构在入门门槛、开发成本和周期方面具有一定优势,但随着企业数据分析需求愈加复杂,DIV 架构很快就能表现出更强的扩展能力和适应性。团队可以在初期选择 iFrame 实现,并在需求提升后迁移到 DIV 方案。与此同时,开发团队往往在一开始就要考虑 API 层的实现,为业务团队带来更多便利,并为后期的开发工作打好基础。

嵌入式 BI 选型:如何挑选最适合自己的方案?

企业开发团队在选择嵌入式 BI 方案时,除了关注方案的开发周期、开发难度外,一般还要考虑定价模型、云端支持、业务系统集成支持等要素:

  • 成本。不仅要考虑初期的开发成本,还要考虑长期的总体拥有成本,将未来的功能扩展、安全性增强等需求纳入成本计算。
  • 定价模型。第三方提供的嵌入式 BI 方案常常有多种定价模型可选,例如按用户/服务器/CPU 定价,或者按照真实使用量、使用时间定价等。一般来说,相对固定的定价模型更有利于企业用户一方。
  • 云端支持和业务系统集成支持。嵌入式 BI 能否支持公有云、私有云、本地部署、混合部署等多种模式,在云计算时代也是很重要的考虑因素。此外,与其他流行第三方企业系统(ERP、CRM、OA 等)集成的能力可以大大扩展嵌入式 BI 方案的应用范围。
  • 授权管理/安全性。嵌入式 BI 模块经常会与企业机密数据互动,这就要求嵌入式 BI 方案具备良好的授权管理能力和安全性,避免模块本身成为企业安全性防线的薄弱环节,造成敏感数据的意外泄露事件。

考虑到以上要素,实践中中小企业和开发团队更适合选择成熟的第三方嵌入式 BI 方案来满足自身需求。以 Wyn 商业智能提供的嵌入 BI 方案为例,其不仅提供了完善的功能、基于 GraphQL 的便捷 API 集成,还支持强大的授权管理、增强安全特性,兼容多种云端部署模式,且能够方便地集成到用友、企业微信等系统中。该方案既可以嵌入部署也可以独立使用,具备良好的伸缩能力,帮助企业持续深度挖掘数据价值。想要进一步了解关于嵌入式 BI 方案的相关内容,可以点击以下链接获取更多信息。

参考链接:

Wyn 嵌入式商业智能:https://www.grapecity.com.cn/...

数据可视化大屏示例集合:https://www.grapecity.com.cn/...

嵌入式BI:https://www.grapecity.com.cn/...

如何与SaaS应用集成方案:https://www.grapecity.com.cn/...

相关文章
|
21天前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
43 3
|
1月前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
|
1月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
数据采集 机器学习/深度学习 数据可视化
【优秀python web系统毕设】基于python的全国招聘数据分析可视化系统,包括随机森林算法
本文介绍了一个基于Python的全国招聘数据分析可视化系统,该系统利用数据挖掘技术、随机森林算法和数据可视化技术,从招聘网站抓取数据,进行处理、分析和预测,帮助用户洞察招聘市场,为求职者和企业提供决策支持。
|
22天前
|
JSON 前端开发 API
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
构建前端防腐策略问题之更新getMemoryUsagePercent函数以适应新的API返回格式的问题如何解决
|
16天前
|
前端开发 开发者
在前端开发中,webpack 作为一个强大的模块打包工具,为我们提供了丰富的功能和扩展性
【9月更文挑战第1天】在前端开发中,Webpack 作为强大的模块打包工具,提供了丰富的功能和扩展性。本文重点介绍 DefinePlugin 插件,详细探讨其原理、功能及实际应用。DefinePlugin 可在编译过程中动态定义全局变量,适用于环境变量配置、动态加载资源、接口地址配置等场景,有助于提升代码质量和开发效率。通过具体配置示例和注意事项,帮助开发者更好地利用此插件优化项目。
44 13
|
19天前
|
前端开发 安全 测试技术
[译]一种基于模块联邦的插件前端
[译]一种基于模块联邦的插件前端
|
24天前
|
监控 Cloud Native 容灾
核心系统转型问题之API网关在云原生分布式核心系统中的功能如何解决
核心系统转型问题之API网关在云原生分布式核心系统中的功能如何解决
|
1月前
|
数据采集 数据可视化 关系型数据库
【优秀python web设计】基于Python flask的猫眼电影可视化系统,可视化用echart,前端Layui,数据库用MySQL,包括爬虫
本文介绍了一个基于Python Flask框架、MySQL数据库和Layui前端框架的猫眼电影数据采集分析与可视化系统,该系统通过爬虫技术采集电影数据,利用数据分析库进行处理,并使用Echart进行数据的可视化展示,以提供全面、准确的电影市场分析结果。
|
1月前
|
前端开发 数据挖掘 关系型数据库
基于Python的哔哩哔哩数据分析系统设计实现过程,技术使用flask、MySQL、echarts,前端使用Layui
本文介绍了一个基于Python的哔哩哔哩数据分析系统,该系统使用Flask框架、MySQL数据库、echarts数据可视化技术和Layui前端框架,旨在提取和分析哔哩哔哩用户行为数据,为平台运营和内容生产提供科学依据。