零代码在数据分析场景的应用

1. 零代码在数据分析场景的应用分享人 - 李梦茹部门：信息安全日期：2022年12月06日 www.58.com

2. 自我介绍信息安全，前端技术组李梦茹最近两年主要担任数据方向和合规安全方向前端负责人工作内容除了业务支撑之外，负责团队中规范制定及落地，基础建设等相关工作，提升团队的开发质量及效率等。

3. 背景需求分析技术设计效果

4. PART 1 第一部分背景

5. 背景数据分析平台介绍数据分析平台里都有什么？提供数据的查询、报表、监控、预警、分析和挖掘等基础数据服务，给决策者、管理者和基层业务人员等层面的数据分析系统。数据分析在平台上的体现？对现有的、历史的、分散的业务数据进行分析和整合，最终形成主题的数据存储和统一的数据视图。

6. 背景现状物料单一配置流程分散无法支持大屏类产品和实时看板

7. 背景分析业务痛点及目标现有系统 01 历史悠久，无人维护，物料单一，配置流程长，数据源不充分，无法满足需求 02 数据源充足，物料丰富，配置流程简单的可视化平台开发周期长定制化开发周期长，联调成本高，且复用性低目标：释放人力、降低开发沟通成本

8. 背景我们要做什么？平台化、成体系的，一站式解决方案为数据分析平台的生产和维护过程降低成本提效在当前业务场景下具备高通用性，增加团队产能用零代码助力数据分析平台开发

9. PART 2 第二部分需求分析

10. 产品设计产品定位及目标人群定位：边界、场景目标人群：数分、运营、审核、产品等有数据分析需求核心：产品的易用性和灵活性

11. 产品设计需求收集 01 功能 1. 支持大盘的自由布局，栅格布局等方式，适配多种分析场景（可视化大屏、多维报表、bi分析等） 2. 样式及交互部分，支持组件样式、大盘样式的修改及相互之间的数据交互联动 3. 扩充数据源，支持简单配置及sql输入的复杂场景，并保证数据的准确性 4. 支持大盘的复用，增加权限、发布、通知等机制 5. 丰富物料 02 体验 1. 简化配置流程，将分散的配置进行整合，实现一体化操作 2. 采用所见即所得的方案，每一步的数据或样式修改都可以看到页面的响应

12. 产品设计常规数据分析平台 1. 使用流程：分步配置 2. 适用场景：一款产品覆盖一种场景

13. 产品设计我们的数据分析平台 1. 使用流程：流程式一体化配置 2. 适用场景：通过后续丰富物料库可以覆盖了所有的分析场景

14. 产品效果展示典型页面展示：

15. 产品效果展示 1.看板类型选择 2.组件选择 3.数据源、维度、指标配置 4.页面搭建、样式交互配置 5、发布

16. 产品效果展示 1.看板类型选择 2.组件选择 3.数据源、维度、指标配置 4.页面搭建、样式交互配置 5、发布

17. 产品效果展示 1.看板类型选择 2.组件选择 3.数据源、维度、指标配置 4.页面搭建、样式交互配置 5、发布自动刷新数据源、衍生字段、维度、指标配置复杂场景SQL语句配置

18. 产品效果展示组件基础配置 1.看板类型选择 2.组件选择 3.数据源、维度、指标配置 4.页面搭建、样式交互配置 5、发布看板大盘配置组件交互配置

19. 产品效果展示 1.看板类型选择 2.组件选择 3.数据源、维度、指标配置 4.页面搭建、样式交互配置 5、发布

20. 我们的优势实现数据闭环联动效率提升场景覆盖度高 1. 可视化搭建 1. 当前场景已全部覆盖 2. 配套设施完善 3. 前后端NO CODE，零成本接入 4. 联动数据洞察、监控预警等 2. 支持多种拖拽、布局方式

21. PART 3 第三部分技术设计

22. 1 服务端 NoCode 前端 No Code

23. 服务端架构接口层配置数据读取统一管理三方服务服务层 oa工单系统 safe权限系统数据源数据获取物料管理配置管理应用管理应用配置管理应用基础配置入库缓存处理应用状态管理自定义数据源配置自定义基础配置物料默认配置物料库管理 sso登录系统 DB Mongodb 应用权限管理 Redis 交互配置数仓默认模版配置云窗 WOS

24. 服务端架构-思考 1. 数据库选型-配置数据特点：支持多样化的配置高度的可扩展性选型： MongoDB 核心配置部分设计

25. 服务端架构-思考 1. 数据库选型-多级菜单特点：逻辑、规则性强可预设结构选型： Mysql id(主键) top_id(上级id) menu_type(菜单类型) 0 0 根目录 1 0 一级 2 0 一级 3 1 二级 4 1 二级 5 4 三级 6 4 三级

26. 服务端架构-思考 2. 性能：多次频繁修改数据库如何保证性能常规模式优化后操作聚合

27. 服务端架构-思考 3. 代理转发解决跨域的问题，便于数据源数据的协议url的形式配置接入

28. 1 2 服务端 No Code 前端 NoCode

29. 前端设计用户选择应用类型搭建页面 schema 页面渲染器辅助配置页面配置（基础样式、数据源、交互配置）物料库丰富访客

30. 流程物料生产物料组件物料中心物料描述自定义物料手动配置 assets.json 编辑器编辑器画布物料包页面数据schema 配置器输出渲染渲染渲染组件实例页面数据schema 生成页面url 编排

31. 前端核心功能物料管理注册配置面板画布拖拽器物料渲染器数据源配置 schema定义布局渲染器标尺、辅助线事件交互加载画布控件渲染 UI配置快捷键联动渲染

32. 物料管理 1. 组成部分：可视化图表 = 可视化组件 + 基础组件 + 容器组件可视化看板 = 可视化图表 * N 2. 作用：为视图的搭建、配置面板的生成提供基础的组件支撑物料组件 3. 设计 JSON Schema 渲染信息数据信息事件扩展渲染层级可视化组件组件类型配置项事件行为数据绑定渲染条件数据协议用来描述编辑器中可配置的内容基础组件容器组件自定义组件

33. 画布 1. 组成部分：可视化图表 = 可视化组件 + 基础组件 + 容器组件可视化看板 = 可视化图表 * N 2. 能力：图表编排的容器，集成自由布局、磁贴布局、拖拽、缩放、标尺、辅助线、画布屏幕适配等功能 3. 布局方案选型：自由布局传统栅格布局流式布局（百分比布局）磁贴布局特点自由的进行拖拽、移动、根据容器的宽高，摆放等操作，类似PS中进行自动填充的画布操作非固定像素的布局，根据文档流的方式布局元素支持空位插入、自动跟随、自动挤占应用场景对页面排版有特定要求、固定排版存在层级关系适用于移动端场景 BI场景

34. 画布 4.物料渲染器：动态懒加载，通过接口返回的组件类型加载对应组件 5.组件在画布拖拽的流畅度：物料监听鼠标事件生成当前组件的缩略图卸载组件对图片进行拖拽、缩放操作挂载组件物料

35. 配置-数据源设计传统模式为适配渲染做数据的多种形式的组装处理，降低代码的复用性、扩展性后端前端开发初后期强依赖接口格式

36. 配置-数据源设计加工配置数据来源信安数仓云窗接口响应结果格式

37. 配置-数据源设计接口响应结果格式前端通过对数据和数据源配置的数据的转换，将数据格式进行formatter，实现多种组件的适配渲染，便于后续更多的组件接入数据格式formatter为组件可读格式

38. 配置-基础配置特点：配置复杂、配置项重复

39. 配置-事件交互场景过滤实现下钻

40. 产物预览如何对不同屏幕进行适配？方案选型： vh，vw，rem，百分比， @media，scale等方案比例计算： (window.inner / window.screen).toFixed (2)*100

41. 辅助能力除了拖拽生成页面输出url之外，我们还做了什么？为提升用户使用便捷，增加了权限的分配，支持多人协作、复用等功能。安全性：接入审批系统，将需要发布到门户的页面进行流程化的审批；加入页面的暗水印，防止核心数据泄露

42. PART 4 第四部分效果和总结

43. 效果数据开发效率单个大盘的开发成本从30人日降低到0.5人日业务效果支撑100+个线上大盘的搭建完成1400+个大盘的一键化迁移基础建设产出产出基础图表组件库，包含20+分析图表封装拖拽缩放组件包+基础服务包

44. 总结前期：明确产品的边界、定位和目标人群，聚焦解决某一类的场景下的问题，着重考虑产品的易用性后期：收集用户的使用反馈，明确后续的迭代方向

45. 谢谢