用好 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/...

相关文章
|
5月前
|
数据采集 机器学习/深度学习 搜索推荐
利用通义大模型构建个性化推荐系统——从数据预处理到实时API部署
本文详细介绍了基于通义大模型构建个性化推荐系统的全流程,涵盖数据预处理、模型微调、实时部署及效果优化。通过采用Qwen-72B结合LoRA技术,实现电商场景下CTR提升58%,GMV增长12.7%。文章分析了特征工程、多任务学习和性能调优的关键步骤,并探讨内存优化与蒸馏实践。最后总结了大模型在推荐系统中的适用场景与局限性,提出未来向MoE架构和因果推断方向演进的建议。
930 11
|
4月前
|
JSON 搜索推荐 算法
利用API提升电商用户体验:个性化推荐系统
在电商竞争激烈的当下,个性化推荐系统成为提升用户粘性与转化率的关键。本文详解如何通过API集成高效接入先进推荐算法,实现实时精准推荐,优化用户体验,提升业务增长。
205 0
|
6月前
|
前端开发 JavaScript 安全
7.6K Star Shadcn Admin:颜值与实力并存的后台管理系统,前端开发者的新宠!
"基于 Shadcn UI 和 Vite 打造的现代化管理后台,开箱即用的响应式设计 + 无障碍访问,让后台开发从未如此优雅!" —— 来自 GitHub 7.6K 星认证
1483 26
|
2月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
191 5
|
6月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
630 1
|
2月前
|
算法 API 数据库
生鲜电商技术实践:基于保质期API的自动下架系统保障食品安全
基于保质期提醒API与自动化工作流,实现生鲜商品临期智能预警与自动下架。通过设定差异化预警阈值(如蔬菜2天、冷冻品7天),每日扫描数据库并触发下架指令,确保食品安全合规,降低损耗与客诉,提升运营效率。
246 0
|
3月前
|
监控 安全 API
京东 API 接口:打造高效京东店铺订单处理系统
在电商竞争激烈的环境下,京东店铺需提升订单处理效率以优化用户体验与收益。本文介绍如何利用京东开放平台的API接口,构建高效订单处理系统,涵盖订单查询、库存同步、物流跟踪等功能,助力商家实现自动化管理,显著提升运营效率与客户满意度。
234 0
|
3月前
|
机器学习/深度学习 人工智能 供应链
淘宝API智能补货系统:库存周转率提升50%的奥秘
在电商竞争激烈的当下,库存管理效率决定企业成败。淘宝API智能补货系统融合人工智能与淘宝开放接口,实现库存自动化管理,大幅提升库存周转率,降低运营成本,助力企业实现高效、智能、精益的供应链管理。
270 0
|
5月前
|
缓存 自然语言处理 监控
基于通义大模型的智能客服系统构建实战:从模型微调到API部署
本文详细解析了基于通义大模型的智能客服系统构建全流程,涵盖数据准备、模型微调、性能优化及API部署等关键环节。通过实战案例与代码演示,展示了如何针对客服场景优化训练数据、高效微调大模型、解决部署中的延迟与并发问题,以及构建完整的API服务与监控体系。文章还探讨了性能优化进阶技术,如模型量化压缩和缓存策略,并提供了安全与合规实践建议。最终总结显示,微调后模型意图识别准确率提升14.3%,QPS从12.3提升至86.7,延迟降低74%。
1770 15
|
4月前
|
机器学习/深度学习 JSON 监控
拼多多API库存预警系统:避免缺货损失千万!
在电商运营中,缺货可能导致订单流失与经济损失,拼多多推出的API库存预警系统可实时监控库存,及时预警,降低缺货风险。系统支持多语言集成,商家可快速构建自动化监控与补货流程,提升供应链效率,保障销售连续性。
315 0
下一篇
oss云网关配置