前言

在前端和客户端(后面统一叫终端)研发过程中，环境问题一直困扰着我们，缺乏数据或数据管理不善都会导致研发整体效率低下。在面对这一问题的过程中，有很多优秀的 Mock 方案诞生，以平台和本地工具居多。

在面对这些问题的时候，我们认为核心点主要有三方面，数据源问题、场景问题、生命周期问题。拥有稳定的、有可迭代能力的数据源是项目研发的关键，数据源实际上就是一个个服务端接口，而大多接口都是有种状态的，此时我们还需要解决场景管理的问题。另外，随着研发流程进行我们通常会进入日常联调、集成测试、灰度发布等周期，所以数据的提供应该始终是一个持续过程。

数据源问题

研发期数据缺失，终端同学与服务端根据产品需求，或者已有服务，约定业务交互字段。此时终端同学会根据业务字段创建可以用来 Mock 的数据，数据源需要满足如下几个原则：

  • 标准化：由于终端几乎都基于同一层面的数据协议，各业务在数据交互上的通用性足以满足统一的要求，这里杜绝的个性化引入数据源而增加学习成本和 backup 成本

  • 非侵入：数据源注入不侵入业务代码本身，也就是说业务逻辑的代码不会感知数据来自哪里

  • 去中心：无中心服务依赖，工程本地即有数据备份，任何人可离线开发

场景问题

在面向复杂业务时，最常讲到的就是场景问题，除富交互编辑器一类的业务外，展示型业务的复杂往往意味着场景多，场景组合情况多，业务流转过程中分支多。组合场景的情况很容易遗漏关键场景，而且不好管理。一旦多人交叉协同时，前后交互字段有调整导致信息流反复，追溯成本变高。

  • 可管理：场景数据需要可维护和管理，支持场景数据的语义化和基本的增删改

  • 版本化：场景数据需要与业务逻辑一样，具备可版本化能力，场景数据以明文形式在当前工程中集成

生命周期问题

研发期的数据相对好解决，但从研发全环节覆盖的视角看待这个问题时，需要考虑后续的问题才能从整体上解决。

  • 可迭代：场景数据可以随项目通过 Git timeline 管理，并作为交付必要部分

  • 一致性：数据源应该由上一个周期延续，并在系统集成测试时对接真实数据源

  • 文档化：一致性使得接口文档维护不再散乱、滞后，接口文档自动生成并保持迭代能力是最优解

  • 可测试：无论是进行交付前的函数单元测试、UI 单元测试，还是测试期的系统集成测试都需要依赖可组合数据源，集成测试阶段稳定性要求高，需要数据源服务对外围服务做屏蔽

其它问题

  • 录入成本：数据源人工初次录入成本较高，尤其是在联调期应该支持由请求快照自动录入

  • 问题排查：生产环境应该支持切换数据源，支持代理和快照记录

根据上面的痛点问题和几项原则，蚂蚁国际无线同学设计并实现面向研发全周期的数据环境方案 - DataHub，具备可持续和去中心化等特点。

DataHub - Continuous data provider for development, testing, staging and production.

设计理念

DataHub 能为业务研发全周期提供数据服务，Hub 顾名思义。

多环节覆盖

DataHub 支持从本地开发阶段，到集成测试阶段，以及上线前验证阶段的一系列数据环境需求，研发同学与测试同学直接面向 DataHub 管理数据即可，DataHub 可支持 iOS, Android 和前端工程。
image.png

去中心化

DataHub 采用去中心化设计，本地研发阶段每项实例都拥有一份独立的数据备份，数据为明文，可随当前项目版本管理工具进行版本化归档，使得项目数据能做到随开随用，支持离线开发。

另外，每份数据都可向远端服务推送并同步，满足不同阶段中心化协同的需要。
image.png

数据流动管理

DataHub 采用单向数据流动的原则，使当前项目下的数据内容及时变更并写入。
image.png

文档一致性

DataHub 将数据与字段描述整合处理，自动生成接口文档。使得文档能够与交互字段随时保持一致。

image.png

场景管理

DataHub 采用多场景设计，能够根据场景名称进行数据分组，同时提供了场景数据的增、删、改，可以通过 DataHub 的面板界面进行操作。

DataHub 可以定义动态路径，底层使用的是 path-to-regexp 。

DataHub API 定义 匹配的 URL 路径
api1/books api1/books
api2/:foo/:bar api2/group/project
api3/:id api3/fred
api3/:id api3/baz


image.png

快照录入

DataHub 兼备代理功能，会将最近请求的实时响应保存下来，便于归档。也就是说你可以通过已归档的快照随时复现当时的场景。

image.png

无缝接入

DataHub 提供命令行客户端，可以在任何时间拥有完整服务，Web 工程接入可以直接使用 Webpack 中间件无缝集成，与 Vue, React 等页面构建框架配合完成研发、测试以及覆盖率统计。

多语言栈

为满足自动化测试随时对场景组合的要求，DataHub 提供了多语言客户端，开放的 API 可以完成更多定制化的操作和集成方式。目前支持 Node.js, Java 和 Python 三个技术栈。

开箱即用

接下来我们来体验 DataHub，十分简单。

安装

通过 NPM 全局安装

  1. $ npm i macaca-datahub -g

一键启动

启动 DataHub 服务

  1. $ datahub server

可以看到如下的提示，可以看到 DataHub 面板启动在 9200 端口，socket 启动在 9300 端口。

  1. DataHub server start at: http://127.0.0.1:9200
  2. websocket server start at: 9300

DataHub 启动后会定期备份数据库到数据库文件所在的目录下，备份文件的前缀为 macaca-datahub.data-backup-

使用 Docker 启动

如果你习惯使用 Docker，那部署就更方便了，一个命令就可以搞定。DataHub 可以随时一键部署到你的研发系统中。

  1. $ docker run -it -p 9200:9200 -p 9300:9300 macacajs/macaca-datahub

使用 Docker 镜像

见文档

显示效果

通过访问面板地址可以看到如下界面
image.png
接下来就可以通过官方文档来创建 Hub 和 API 接口，上手文档。

实验特性 - 导入导出

打开导入导出功能


image.png

导入导出项目数据

支持导入以下三种数据：

  • 从 DataHub 中直接导出的数据

  • 从 Swagger 中导出的 JSON 数据

  • 从 Swagger 中导出的 YAML 数据


image.png

导入导出接口数据


image.png

配置选项

字段名 类型 描述 默认
port Number DataHub 服务启动端口 9200
mode String DataHub 服务启动模式 ‘prod’
protocol String DataHub 服务交互协议 ‘http’
database String DataHub 数据库地址 $HOME
store String 数据流归档文件路径 undefined
view Object 界面静态文件访问地址配置 {}

配置示例: macaca-datahub.config.js

  1. module.exports = {
  2.   mode: 'local',
  4.   port: 7001,
  6.   store: path.resolve(__dirname, 'data'),
  8.   view: {
  9.     // set assets base url
  10.     assetsUrl: 'https://npmcdn.com/datahub-view@latest',
  11.   },
  12. };

你也可以自己定制界面操作台，或者使用其他第三方用户开发的界面，比如 datahub-platform 只需要指定 assetsUrl 即可。

  1. module.exports = {
  2.   view: {
  3.     assetsUrl: 'https://unpkg.com/datahub-platform@latest',
  4.   },
  5. };

可以通过指定 [.js|.json] 后缀格式的配置文件。

  1. $ datahub server -c path/to/config.js --verbose

Schema 语法

DataHub 采用 标准的 JSON schema 语法 来描述接口，用以校验数据和自动生成文档，schema 需要以下格式：

  1. {
  2.   "type": "object",
  3.   "required": [
  4.     "success"
  5.   ],
  6.   "properties": {
  7.     "success": {
  8.       "type": "boolean",
  9.       "description": "server side success"
  10.     },
  11.     "data": {
  12.       "type": "array",
  13.       "description": "data field",
  14.       "required": [
  15.         "age",
  16.         "key",
  17.         "name",
  18.         "address"
  19.       ],
  20.       "items": [
  21.         {
  22.           "type": "object",
  23.           "required": [
  24.             "name"
  25.           ],
  26.           "properties": {
  27.             "key": {
  28.               "type": "string",
  29.               "description": "key description"
  30.             },
  31.             "name": {
  32.               "type": "string",
  33.               "description": "name description"
  34.             },
  35.             "age": {
  36.               "type": "number",
  37.               "description": "age description"
  38.             },
  39.             "address": {
  40.               "type": "string",
  41.               "description": "address description"
  42.             }
  43.           }
  44.         }
  45.       ]
  46.     },
  47.     "errorMessage": {
  48.       "type": "string",
  49.       "description": "error message description"
  50.     }
  51.   }
  52. }

项目集成

Web 工程集成指引

Macaca DataHub 也可与所有类型的iOS, Android 和 Web 工程集成，以下有些参考示例：

中间件集成

Macaca DataHub 可通过中间件形式集成到 Webpack 项目中，请见中间件文档：datahub-proxy-middleware

Egg.js 集成

更多查看 hackernews-datahub

UmiJS 集成

UmiJS 极快的类 Next.js 的 React 应用框架。

SDK 接入

DataHub 提供多个语言平台的 SDK，方便与你的主工程或测试工程集成，也方便通过 API 形式操作 DataHub。

源码

DataHub 采用前后端分离的方案进行开发：
视图层：https://github.com/macacajs/datahub-view
服务层：https://github.com/macacajs/macaca-datahub

分享

第五届杭州 NodeParty：《DataHub2 - 你的最后一个 mock 方案 》