创建第一个应用

在公司内部,我们常常需要开发一些特定的后台系统,来支持公司运营和提升工作效率。而这些后台系统的开发较为费时,同时会让工程师花时间到偏离核心业务的开发上。卡拉云可以帮你快速搭建后台系统,在这篇教程中我们用一个实例来说明。

假设你的公司经营电商业务,电商用户可能常常填错收货地址。所以需要在下单后,用户可能联系你的客服来修改发货地址。客服收到这些更改请求后,需要一个订单管理系统中做更改。

我们一起花 15 分钟来实现这个本来可能需要几天才能搭起来的订单管理系统。

🚧
用传统方式搭建
如果请公司的工程师用传统方式搭建一个最基本的版本,也需要先搭起一个后端服务器,再请前端工程师将各种组件搭好,最后请前后端工程师将接口联调完毕。更不用说权限管理、使用记录等复杂的子模块。

功能梳理

为了实现这个订单管理系统,我们先细化一下客服的工作流程,会发现我们需要如下几个功能

  1. 客服接到更改地址请求后,需要能通过用户名查到对应的订单信息
  2. 查到对应的订单信息后,客服需要一个面板,将对应订单的地址更新
  3. 更新后需要确认订单在数据库中更新成功

最终搭建出来的系统功能如下所示

完成图

创建帐号和应用

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

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

我们创建一个名为“订单管理”的应用

新建应用

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

调整界面布局

在进入编辑器后,左侧是组件列表和组件设置面板,这里列出了搭建内部工具所需的常用的组件。

中间是编辑器画布,在这里,你可以从左侧组件列表中,用鼠标将组件拖拽到画布中。在拖拽组件时,画布会出现对齐提示。比如说,我们拖拽一个表格组件到画布时,对应显示如下

拖拽表格

拖拽到画布上显示的布局,就是最终使用这个系统的客服会看到的界面布局。你可以轻松调整类似按钮颜色、文字大小之类的设置。

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

添加组件

在这里,我们先加入一个表格来展示所有订单的信息,同时加入一个搜索框允许运营通过搜索订单中的用户名来查找用户。最终我们希望当客服输入一个用户名时,表格中展示这个用户的所有订单。举个例子,如果运营此时输入“邓”,那么表格中应该显示所有用户名含有“邓”的用户所下的订单。

首先我们放入一个文本输入框组件,将其标签设为“查找用户名”,客服可以在这个输入框中输入用户名来进行查找。为了方便开发,我们点击左侧组件的名字,把这个输入框重命名为 usernameInput (即"用户名输入框")

同时我们在表格上方添加一个文本组件,用以说明表格中展示的数据的含义。点击文本框组件并输入 ## 订单地址管理,这时文本框组件的样式会被调整成一个二级标题

📘
Markdown
注意“## 订单地址管理” 是 Markdown 语法,文本框组件支持全功能的 Markdown 和 HTML,可随意调整样式

文本框和输入框

连接数据源

当客服在进行查询时,我们需要将数据从数据库中读出来,那么在卡拉云中,怎样实现数据读入呢?

答案是,我们需要添加一个数据源以告诉卡拉云读取数据的数据库配置,同时在应用中使用查询功能即可将数据读入。这里,我们添加一个数据源“用户订单”数据库。我们回到卡拉云应用列表页面,点击导航栏中的 数据源,再点添加数据源即可。关于添加数据源的详细教程请参考添加数据源

添加数据源

如果你手头没有现存的数据库或者希望先用一个测试数据库进行测试的话,可以用以下测试数据库进行连接和测试。这个数据库中,表 orders 含有用户的所有订单信息,包括用户地址,用户名等字段。

测试数据源

注意数据源类型为 PostgreSQL,但它的 SQL 语法与 MySQL 没有太多差别。

数据源类型请选择 PostgreSQL

Host: db.bit.io
数据库名: bitdotio
用户名: oeddyo_demo_db_connection
密码: 39bLE_tpEVkJkHdDAGFrG3xika3hS
端口: 5432

填好后点击测试连接,确保卡拉云可以连接数据库。之后点击“保存数据源”,就可以在应用中使用这个数据源了。

👍
demo 数据库
在这个测试数据库的表 "oeddyo/demo"."orders" 中含有本教程中用到的订单数据,包括以下字段
* id - 订单的 id
* address - 订单的地址
* product_image - 产品的图片

从数据源中读取数据

在创建数据源后,回到应用并在 查询编辑 页面就可以新建一个查询,将数据从数据源数据读入了。

查询编辑

点击查询编辑,同时在左侧点击 新建查询。新建出来的查询名称默认为 query1,我们点击它并将它改名为 getOrders 即获取所有订单。同时,我们点击数据源列表的下拉菜单,选中刚才创建的 用户订单 数据源。至此,我们就创建好了一个查询,可以用它来读入数据库中的数据了。

查询重命名和更改数据源

在 SQL 设置中写入

  SELECT * FROM "oeddyo/demo"."orders" ORDER BY id LIMIT 10 

尝试执行查询

这样会读入 10 条订单记录

展示查询结果

我们回到界面编辑中,点击拖入的表格,并在 表格数据 设置中,将查询出来的结果与表格绑定。输入

{{getOrders.data}}

这里的 getOrders 是我们刚才创建的查询,而 data 则是查询中预设的一个属性。因此这里的绑定就是声明将表格中展示的数据,与将查询出来的数据绑定。可以看到,表格中出现了我们所有的订单。

绑定数据

👍
预设属性
关于每种组件的预设属性,请参考左侧导航栏中各个组件的详细参考文档。最常见的几个预设属性包括在输入框上的 value,表格上的 data 和查询上的 data。你不用记住这些预设属性的名字,因为卡拉云的 IDE 会在你键入时自动补全

至此,我们已经搭建出来了一个查询功能,可以从数据库中读出订单。我们还可以将表格中的列显示为图片、链接等,以方便客服一目了解地看到操作的订单信息。

添加组件间逻辑

接下来,我们想要让客服在输入框中输入一个用户名,查找出这个用户下的所有订单。这个功能如何实现呢?

很简单,我们只需要对查询的订单进行过滤就可以了。回到刚才的查询中,我们看到这里的查询只是简单地从表中找出 10 个用户订单而已。但我们希望的逻辑是“查找客服输入的用户名下的订单”,所以我们需要调整一下这个 SQL

  SELECT * FROM "oeddyo/demo"."orders" 
	WHERE username ILIKE {{"%" + usernameInput.value + "%"}}
	ORDER BY id

这里的双括号内的语句其实是简单的 JavaScript 代码,我们用 usernameInput.value 来引用输入框插件的用户输入,前后的百分号是 SQL 语法的一部分。假设运营输入的用户名是“张三”的话,那么这整句 SQL 其实就会被生成为

  SELECT * FROM "oeddyo/demo"."orders" 
	WHERE username ILIKE %张三%
	ORDER BY id

重新保存并运行一下查询,这样一来客服在输入用户名的时候,就可以进行模糊查找,过滤出特定用户的订单了。

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

每次客服输入一个用户名时, getOrders 这个查询会使用输入框组件 usernameInput 中输入的内容来生成 SQL,并将查询结果存储到 getOrders.data 中。表格中绑定了查询结果,所以每当客服输入变化时,表格就会自动更新。如下图示

搜索用户动图展示

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

更新数据源中的数据

接下来,我们需要允许客服来修改订单的地址

客服需要的操作流程是:

  1. 输入用户名,查找出用户下的订单
  2. 点击这行订单的记录,按用户要求修改地址
  3. 确认修改,并触发一次数据库更新

为了完成上面的操作流程,我们需要在刚才的订单管理系统界面中添加另一个输入框,用于更改地址,并重命名为 addressInput 组件。这个组件的作用是用来显示表格中选中的订单目前的地址,同时允许运营更改这个地址,因此我们需要把 addressInput 的默认值改为

{{table1.selectedRow.data.address}}

addressInput

这里 selectedRow 是表格中自带的一个属性,即选中行,当客服点击表格中的不同行时,这个属性的值会随之变化。我们试着点击表格中的不同行,会发现 addressInput 中显示的地址也在切换。

那么怎么样将客服输入的新的地址,更新到数据库中去呢?

我们先回到查询编辑页面,添加一个新的查询,命名为 updateAddress。我们把它的 SQL 语句设置为


UPDATE "oeddyo/demo".orders
  SET address = {{addressInput.value}} 
	WHERE id = {{table1.selectedRow.data.id}}

这个 SQL 的含义即,我们只更新客服选中的订单这一行的地址值,新的地址更新为 addressInput 中输入的值。

注意 WHERE 条件中的限制是指,我们只更新客服选中的那一行数据,请不要遗漏,否则可能更新全部数据。

因为这个查询是一个写入查询,我们把 触发方式 改为“手动执行”。保存这个查询后,我们就可以通过触发这个查询来更新数据了。

update-sql

触发查询执行

到这里,我们已经可以更新数据,但怎么样才能让客服可以触发查询 updateAddress 进行数据库更新呢?

我们可以通过一个按钮来实现。向界面中添加一个按钮,在按钮设置界面中,添加一个事件处理,并将其设置为“点击时 - 执行查询",执行的查询名选择 updateAddress。那么当客服点击这个按钮时,查询 updateAddress 就会被执行。

button-event

到此,客服就可以用用户名查找出一个用户的订单,点击订单后,在地址框中进行修改。修改结束后,点击你刚刚添加的确认修改按钮,就可以将数据库上的地址更新了。

注意,到这里每当客服点击按钮时,虽然执行了 updateAddress 查询更新好了数据库,但是因为表格中的数据没有刷新,所以客服并不能直观地感觉到数据更新变化了。因此,我们可以在 updateAddress 的事件处理器中,让它在成功时触发 getOrders。这样,每次 updateAddress 执行结束时,它会让 getOrders 来更新数据,而 getOrders 与表格是绑定的,因此表格中的数据也会对应被刷新。

触发 getOrders

分享和使用应用

到这里,整个订单地址管理系统就完成了,你可以点击右上角的“分享”按钮,把应用分享给客服开始使用。当然,你也可以添加更丰富的组件和功能,比如当客服点击某个订单时,把订单的图片展示出来,甚至在表格中直接将图片展示出来以方便使用。同时你也可以调整应用的权限组,确保只有有权限的同事可以更改订单的信息。

publish

至此你已经可以用卡拉云搭建出比较复杂的后台管理系统,下一步自然是接入你的数据源,针对你的需求构建后台应用来提升效率、节省时间。