京东作为CCTV2022年春晚独家互动合作伙伴，为全国观众派发了大量的福利。在热闹的晚会背后，京东研发通过水滴低代码能力，仅用2天便搭建完成了一个健壮、稳定，可支撑运营随直播实时调整策略的CMS。
困难与挑战
当春晚红包项目确定需要系统化的CMS承接配置时，留给研发的开发时间已经仅一周不到，因此对团队来说可谓是个巨大的难题，在具体梳理后，有以下难点及挑战：
- 时间紧张：开发到提测最多5天时间。
- 表单量大：运营需要配置的表单数量庞大，合计11个页面、9个表格、53个表单以及226个表单控件，并且需要处理表单联动、校验等逻辑。
- 健壮、稳定性要求高：由于春晚是直播，运营也需要实时配置，因此CMS不仅自身需要健壮稳定、更要避免运营配置时人为的疏忽。
- “弱”研发资源：考虑到降本提效，除个别券校验接口外， 整个CMS由一位开发者负责搭建及开发。
- 配置需便捷易懂不出错：由于直播的特殊性，运营接受指令到完成配置的时间非常短暂，因此在用户体验上要简单易用、直观好理解，避免运营配置出错。
开发量大、时间紧迫、质量要求高，把春晚红包项目CMS的挑战难度一下拉高了数个水平。
好在这一挑战与iPaaS水滴所专注解决的问题不谋而合，也因此，研发团队仅花费2天就通过低代码搭建完成了春晚红包项目CMS。
水滴—CMS快速解决方案
本篇将着重介绍水滴，即京东 iPaaS 团队在 CMS 域长期耕耘中沉淀出的技术解决方案，是如何帮助春晚红包项目CMS快速完成搭建上线的。
水滴包含面向编程、低代码两个方向的能力，相辅相成，向开发者提供涵盖中后台管理系统各角度的解决方案，包括：
面向编程开发：在iPaaS标准上，封装了DripForm 表单、 DripTable 表格 、 DripDesign UI库等组件，并结合 Leo 脚手架提供了全流程的 CMS 工程化开发能力。
面向低代码搭建：聚合了水滴编码维度的各个模块，集开发、可视化搭建、部署一体，可通过FaaS能力串联数据源与CMS界面的低代码平台，即本次搭建CMS所使用的DripWorks水滴工作台。
01
使用FaaS连接数据源
与常见的低代码平台不同， DripWorks 不仅提供前端维度的搭建，还通过 iPaaS 内 FaaS 平台提供串联数据源的能力。接口开发者通过 FaaS 不仅可以免除运维部署细节困扰，还能通过预设好的模板，简单配置就生成想要的函数并连接例如DUCC等数据源。非常快速就能创建包含 NodeJS 、JAVA等在内的各种增删改查接口。
在春晚红包项目CMS的中，开发者通过预设NodeJS模板简简单单完成了18个对京东配置中心 DUCC 下数据进行查询、修改的函数接口的开发与部署。
02
可视化搭建表单表格
表单、表格生成器是水滴体系下最为成熟核心的模块，具备语义化配置、校验一体化、可视化及可扩展等特点，并支持配置联动、嵌套、校验等复杂功能，在不久前也在社区开源了这两个模块的核心以及生成器。
但仅可视化搭建，对200多个表单项来说，依然要做非常多的工作。因此 DripWorks 的表单表格在关联 FaaS 函数模板后，还能动态生成默认界面。通过自动初始化能力，减少了前期大量人工操作，开发者只要在默认生成的界面上二次调整即可。
03
自动生成初始表格
以下图为例，关联相应的查询数据函数后，水滴工作台会初始化生成一份界面及对应的 Schema 协议，开发者可在此基础上调整。
04
自动生成初始表单
表单联动、异步拉取数据等复杂逻辑方面，支持开发者灵活切换到 Schema 界面进行各种逻辑的配置编写。
表单校验方面，内置了url 、 https 、图片大小尺寸、 数组上下限等几十种常用校验，不满足时既可以填写自定义正则表达式，也可以通过 Schema 配置其他复杂校验。
除了在界面配置，还可以直接编辑或导入导出Schema协议
**
05
灵活扩展业务控件
DripWorks 内置了17种表单控件，有基础的文本框、单选多选，也有复杂的数组容器、对象容器、图片上传等，涵盖了大部分常见场景。但每个 CMS 中多多少少会有几个特殊的业务控件，本次春晚红包项目CMS也不例外，存在录入并按业务规则校验红包、券信息的控件。因此 DripWorks 也支持扩展自定义控件，以满足多样化的业务场景。底层使用 DripForm 的主题 theme能力，开发者可定义自己的控件。
06
严格的权限管控及操作日志
在权限管控方面，水滴提供完善的角色权限管控能力，开发者可以设置不同的角色并为其分配相应菜单、功能权限。本次CMS在此基础上，配置并分离了每个具体表单的修改与发布权限，加上不同环境的差异合计提供了70+角色，做到了精细且严格的更新发布权限管控。
同时水滴也会记录通过 FaaS 进行的操作，可作为操作日志在活动结束后进行复盘。
07
免运维云构建部署与版本管理
与一般低代码平台 不同，DripWorks 会在用户完成搭建后，自动拉取脚手架模板并进行云构建部署，并把构建产物推送到京东前端发布平台 Pubfree 进行部署。这样的优势便是构建完成的产物会固化下来，不再受到平台变更的影响，对 CMS 这类低变更频率但业务复杂度高的类型，稳定性更好。
并且得益于 Pubfree 完善的版本管理能力，水滴提供了3种环境用于测试、灰度以及生产应用，开发者可根据情况选择不同的历史版本，在3种环境下进行秒级切换。
记录每一次构建版本，并可灵活切换不同环境使用的版本
**
运营体验与最终效果
在用户体验上，考虑到直播期间的每次配置时间都非常短暂，需要更加突出 CMS 在配置时的直观性，并从校验等技术角度避免错配的情况。
因此团队通过水滴表单本身强大灵活性，结合各方用户的反馈，配置了以下的预览、提醒及约束：
- 增加针对到配置项的可视化预览图，强化运营对所配置内容的认知。
- 每轮场次开始时间不得早于上轮。
- 金额型控件除数值上下边界限制，额外设定了大金额提醒气泡。
- 数值、金额型控件增加格式化文案，把万、百万等加粗标识。
- 录入的图片增加预览效果图等。
- 在配置可以完成的体验提升之外，研发团队还利用自定义代码，扩展并增加了高亮、横幅展示当前场次、时间及环境信息等细节优化。
最终经过2天搭建后，春晚红包项目CMS提前完成，赶上了京东内进行的大大小小演练，为产研和业务团队争取到了更多的时间进行精细化打磨。
春晚CMS的最终效果如下（测试数据，仅作为示意）：
总结
在支持春晚红包项目的过程中，也暴露了不少可以改进提升的部分，水滴团队也会持续加强易用性、扩展性等，包括扩展 npm 等方式引入不同业务域模块、皮肤等等。
除低代码工作台建设外，在开源方面，水滴会陆续开源更多核心、优秀能力，已开源的表单、表格等也欢迎大家体验并提出宝贵建议~！
相关资源
- iPaaS前台标准咚咚群：1020851512
- 京东零售前端开源能力：https://github.com/JDFED
- 水滴表单：https://github.com/JDFED/drip-form
- DripDesign：http://dripdesign.jd.com
- 水滴表格：http://drip-table.jd.com
若有收获，就点个赞吧
0 人点赞
