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

相关文章
|
2月前
|
前端开发 API UED
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
Python后端与前端交互新纪元:AJAX、Fetch API联手,打造极致用户体验!
92 2
|
1月前
|
数据采集 机器学习/深度学习 数据可视化
构建高效数据分析系统的关键技术
【10月更文挑战第5天】构建高效数据分析系统的关键技术
40 0
|
9天前
|
存储 前端开发 搜索推荐
淘宝 1688 API 接口助力构建高效淘宝代购集运系统
在全球化商业背景下,淘宝代购集运业务蓬勃发展,满足了海外消费者对中国商品的需求。掌握淘宝1688 API接口是构建成功代购系统的關鍵。本文详细介绍如何利用API接口进行系统架构设计、商品数据同步、订单处理与物流集成,以及用户管理和客户服务,帮助你打造一个高效便捷的代购集运系统,实现商业价值与用户满意度的双赢。
|
23天前
|
监控 安全 测试技术
我们为什么要API管理系统呢?
API 管理系统通过接口标准化与复用、简化开发流程、版本管理、监控与预警、访问控制、数据加密、安全审计、集中管理与共享、协作开发、快速对接外部系统和数据驱动的决策等多方面优势,显著提高开发效率、增强系统可维护性、提升系统安全性、促进团队协作与沟通,并支持业务创新与扩展。
|
26天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
1月前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
198 1
|
26天前
|
前端开发 安全 API
前端全栈之路Deno篇(三):一次性搞懂和学会用Deno 2.0 的权限系统详解和多种权限配置权限声明方式
本文深入解析了 Deno 2.0 的权限系统,涵盖主包和第三方包的权限控制机制,探讨了通过命令行参数、权限 API 和配置文件等多种权限授予方式,并提供了代码示例和运行指导,帮助开发者有效管理权限,提升应用安全性。
|
1月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
2月前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
1月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP