背景

客服业务是链接用户与公司各事业部的桥梁,为了快速响应事业部业务迭代、持续改进给到用户的服务体验,技术团队需要把客服业务中的多个系统建设成运营人员可配置,才能保障整个客服团队有很高的效率。

那么,要达成运营人员可配,零代码平台的拖拉拽式交互非常适用。运营所见即所得,客服业务中也有非常多的可落地场景,现在有多个系统已经做到可以让运营团队通过发布配置即可改变线上逻辑,给用户提供更便捷的智能客服,或者让人工客服按照运营人员制定的流程来解决、记录用户问题。

目前,滴滴客服内的多个系统在 4 年内已经配置超过 12900 个 PC 端页面和 7900 个 H5 页面,在整个服务链路中,通过多种方式,来解决用户的问题。

困境:零代码的不足

虽然滴滴客服内部的平台目前已经利用零代码配置了很多的页面,但随着业务的发展,我们感受到零代码的不足。假设有个表格修改操作需求,需要在点击表格某一列的修改时,先请求接口判断用户的权限,然后根据返回的权限,显示不同的编辑弹窗。如下表格修改示意图:

面对这种情况,如果使用以前的零代码方案,需要在表格组件的属性面板中增加请求和弹框相关的逻辑。这种在组件属性面板增加功能的迭代方式只会导致配置内容膨胀、配置难度增加、开发成本提高,最后反而不如写代码方便。

由于零代码配置页面在客服内部广泛应用,客服技术团队也期望找到一种更好的方式来解决零代码中无法灵活控制页面逻辑和复杂交互的问题,让不会编程的同学也能做出复杂交互的页面。

思路:页面逻辑编排

对于前面提到的表格编辑需求,如果通过写 JS 代码的方式实现,一般都是监听事件 -> 收集数据 -> 发起请求 -> 判断返回结果 -> 修改页面组件内容。那么我们是否可以将写代码的过程抽象为一个个简单的逻辑,然后利用流程串联起来,达到同样的效果?

利用这个思路,将前面的需求拆分为 “表格触发编辑事件”、“请求获取权限”、“显示普通管理员编辑弹框”、“显示高级管理员弹框” 这 4 个简单逻辑,然后在流程图上画出来,如下示意图:

上图为我们内部的零代码配置页面的系统配置一个基础表格的截图。其中左侧和大多数零代码平台一样,通过拖拽配置的页面。而右侧就是通过流程配置的方式,实现页面内复杂逻辑的串联。

采用流程编排页面逻辑这种方式,我们可以通过自由组合节点实现页面逻辑的灵活配置。例如当请求接口返回比较慢时,在请求节点之前增加表格 loading 节点。

也可以通过组合来实现组件显隐,例如当单选框 A 选择 a1 时,显示组件 B,隐藏组件 C;当单选框 A 选择 a2 时,显示组件 C,隐藏组件 B。就可以拆分为 “单选框值改变事件”、“显示组件 B”、“显示组件 C”、“隐藏组件 B”、“隐藏组件 C” 5 个节点,然后都在连线上分别增加条件 “选框 A 选择 a1” 和 “单选框 A 选择 a2”。

通过上面的介绍可以看到,将复杂交互中每个组件的变化都抽象为一个单元逻辑,然后在流程图中用节点的编排体现,可以更好的解决零代码中难扩展的问题。接下来我们将给大家介绍页面逻辑编排的核心能力,并演示如何进行页面逻辑编排的开发、运行和调试。

方案:页面逻辑编排的三大核心能力