五分钟教程

在公司内部,产品经理和运营通常需要一些特定的工具和功能,来加速企业运营和协作效率。

这篇教程中,我们假设你的公司经营着互联网金融业务。你的风控部门实时检测可能存在风险的用户,再交由运营进行人工审核。运营则需要将风控部门提出需要审核的用户信息找出来,然后进行详细人工审核,将其标记为“高风险用户”或“低风险用户”。被标为“高风险”的用户或将在 APP 中或网站上被提示拒绝服务。

为了完成这个工作流,你的运营需要一套工具,来提升审核的效率。如果我们细化一下运营的日常审核工作流,会发现我们需要如下几个模块

  1. 运营拿到风控部门的潜在高风险用户名单后,需要通过用户名搜索对应用户来查看其详细信息
  2. 每当找到潜在的高风险用户时,需要将这个用户对应的详细数据展示出来(比如年龄、性别、借款历史等相关信息)
  3. 如果运营决定该用户是高风险用户,需要可以容易地将其标注为“高风险”,并更新至数据库中,这样 APP 和后端可以拒绝该用户的请求

在下文中,我们用上述例子来展示在卡拉云里,如何用五分钟完成本来需要五天的审核系统搭建。

🚧
用传统方式搭建

如果请公司的工程师用传统方式搭建一个最基本的版本,也需要先搭起一个后端服务器,再请前端工程师将各种组件搭好,最后请前后端工程师将 接口联调完毕。更不用说权限管理、使用记录等复杂的子模块。下文中我们会对比如果用卡拉云搭建,怎样数十倍提升效率。

创建帐号和应用

首先我们在卡拉云中创建一个帐号,帐号创建完毕后登录并创建一个我们的第一个“应用”。

📘
卡拉云中的应用

在卡拉云中,我们推荐用每个应用对应一个工作流或一系列相关的工作流。每个应用均可以分享给同事,并设置每个同事的细粒度访问权限

我们创建一个名为“用户审核”的应用

新建应用

点击创建后,即进入应用编辑器。

搭建应用

在进入编辑器后,右侧是组件列表,这里列出了搭建内部工具所需的常用的组件。中间是编辑器画布,在这里,你可以从右侧组件列表中,用鼠标将 组件拖拽到画布中。在拖拽组件时,画布会出现对齐提示。

比如说,我们拖拽一个表格组件到画布时,对应显示如下

拖拽表格

拖拽到画布上显示的布局,即为你的运营或产品会使用的样式。你可以轻松调整类似按钮颜色、文字大小之类的设置。在这里,我们先加入一个表格来展示所有用户的信息,同时加入一个搜索框允许运营通过搜索用户名来查找用户

👍
卡拉云中的应用

在你编辑应用时,被编辑的应用会实时自动保存,不用担心工作会丢失

添加搜索和展示用户

现在我们需要允许运营输入一个用户名来查找用户,审核系统需要执行该搜索并在用户详情中展示出对应的用户。

首先我们放入一个文本框,用来提示运营。我们将文本框的内容设为“查询用户名”,且更新其样式为二级标题。

📘
Markdown

文本组件支持全功能的 Markdown 和 HTML,可随意调整样式

在文本框旁边,我们可以放入一个输入框,以供运营输入要查询的用户名。

文本框和输入框

现在,我们将一个表格放入界面上,表格中用于实时显示运营输入的用户名时,出现的搜索结果。表格的数据中,我们希望显示运营此时输入的用户名对应的用户。举个例子,如果运营此时输入“张”,那么表格中应该显示所有用户名含有“张”的用户。

我们创建一个 SQL 查询,在搜索用户的 SQL 查询中,将运营输入的用户名与连接起来。我们将这个查询命名为 searchUser。在这个 SQL 中,我们可以用一个双大括号来引用其它任何组件或查询中的数据。比如说,在这里我们希望查询数据库中“运营输入的用户名”,那么这个 SQL 查询可以是

  SELECT * FROM users WHERE user_name like {{"%" + input1.value + "%"}}

请注意这里的语法其实是基本的 SQL 语句。这句 SQL 的用意是模糊查找user_name(即用户名)为input1.value的数据。在双括号内的语句是简单的 JavaScript 代码,我们用 input1.value 来引用输入框插件的用户输入,前后的百分号是 SQL 语法的一部分。假设运营输入的用户名是“张三”的话,那么这整句 SQL 其实就被生成为

  SELECT * FROM users WHERE user_name like %张三%
👍
JavaScript 代码

双括号内的内容是任意 JavaScript 代码,卡拉云中几乎任何地方都可以使用双括号来引用其它组件中的数据,这也是卡拉云不同于多数限制较多的低代码工具,可以胜任任意复杂需求的原因

这样一来,每次运营输入一个用户名时, searchUser 这个查询会使用输入框组件 input1 中输入的内容来生成 SQL,并将查询结果存储到 searchUser.data 中。现在我们只需要在表格中,将表格需要显示的数据改为以下即可

{{searchUser.data}}

这样,表格就跟这个搜索查询 searchUser 的数据连接起来了,每当搜索结果更新时,表格会自动更新。如下图示

搜索用户动图展示

到这里,用户搜索功能就实现了。

标记高风险用户

每当运营搜索出想要查找的用户时,我们应该允许运营将其标为高风险用户。首先我们添加几个文本框,方便运营更直观地看到自己选择的用户信息。当运营点击表格中的某一行时,我们更新这几个文本框。比如,我们在展示选中用户的文本框的值中设置

## 选中用户: {{table1.selectedRow.data.name}}

这里我们将表格 table1 中被选中行属性即 selectedRow 的数据读出,并将其展示为一个二级标题。同理,我们将风险程度(risky 列)和贷款历史(debt_amount 列)分别列出,如下图

引用表格选中行

📘
自动补全

不用担心不知道组件有哪些属性,当你在输入组件名时,自动补全会帮你把所有组件上可以引用的属性名列出来,类似在 IDE 中的开发体验

同时我们拖入了两个按钮,一个用于将选中用户标为高风险,一个则用于将选中用户标为低风险。现在,当我们选择表格中的不行行时,展示的用户信息会发生变化,因为对应的文本框组件引用了表格中选择行的数据,如下图所示

最后,我们需要将运营点击按钮和更改数据库结合起来。每当运营点击“标记为高风险用户”时,我们就需要将对应选中的用户在数据库中的 risky 列改为 true

👍
卡拉云中的应用

到这里,我们已经完成了这个系统的展示用户部分,省掉了大量前端工作,后端也只需要设置一下数据库

更新数据库

待续

© 2021 卡拉云 Built with ❤️ in Beijing

京ICP备15049164号-9