近年来，关于低代码的呼声不绝于耳，众所周知，低代码是用可视化开发方法来开发应用程序，那么低代码和运维的结合又会发生怎样的火花呢。


优维 EasyMABuilder 低代码开发平台，围绕企业业务管理需求，通过提供可视化的用户编排界面、控件元素和成熟稳定的模块，聚焦前端应用开发、运维和IT系统架构，助力产品经理和运维团队快速搭建轻资产、高效能、个性化IT管理工具的PaaS平台。已入选艾瑞咨询《2021年低代码行业研究报告》。


如何体验低代码开发平台呢？


01

准备工作


第一步：新建目录

需要新建组件目录和数据目录，分别存储平台的组件和数据

mkdir /root/easy-ma-builder  ##可换成其它路径

mkdir /root/easy-ma-builder-data

第二步：设置镜像源

可以设置docker镜像源为国内镜像源，加快镜像下载速度

vi /etc/docker/daemon.json

{

  ...

  "registry-mirrors": [

    "https://docker.mirrors.ustc.edu.cn"

  ],

  ...

}


02

拉取镜像并启动


在 https://hub.docker.com/  中搜索easy-ma-builder，拉取最新版本的镜像。或者使用以下命令：

docker run --ulimit nofile=1024000:1024000 -it -v /root/easy-ma-builder:/usr/local/easyops -v /root/easy-ma-builder-data:/data/easyops -p 80:80 easyopscn/easy-ma-builder:1.1.9


镜像启动需要大约5~10分钟时间，待出现 easyops start success 时即启动完成。



03

查看密码 登陆平台


平台登录密码将自动生成并写入docker中的/home/easyops/.easyops文件

docker ps  ##查看docker id

docker exec -it ${docker id}

cat/home/easyops/.easyops  ##查看密码




访问启动镜像所在的服务器的ip http://your-server-ip ，使用easyops账户和上面的密码登录平台。



04

查看&使用DEMO


平台预置了一个待办事项（TODO）的demo应用，点击进入应用的编写界面。



User Flow流程视图是应用编辑的主战场，在这里可以查看和编辑应用的所有路由（一个路由对应一个页面）。可以看到TODO应用有2个路由：首页和待办列表，其中首页会自动跳转到待办列表。

 

首先我们需要对应用进行一次构建和推送（Build & Push），然后即可预览应用（Preview）。当我们对应用进行了修改，只需要再次点击Build & Push，即可实时预览修改后的效果。



点击预览后，浏览器将新开标签页并跳转到应用。我们可以在这里输入待办事项内容、设置优先级、点击新增，即可在下方生成一条待办事项。



点击待办后的√按钮，即可完成该待办。



05

修改DEMO应用


TODO应用非常的简单，目前只能添加和完成待办事项。下面我们尝试为应用增加“查看已完成事项”的功能，这个过程将涉及【页面创建】、【页面编排】、【构件设置】和【数据对接】。

 

第一步：页面创建


我们可以新增一个路由（页面）来展示已完成的待办事项。点击右上角的Create Route，分别填入路由Alias（方便区分和识别）和Path（访问该页面的URL，这里设置为done-list），点击保存。



保存成功后会跳转到该路由的编排画布，一开始画布上只有左上角的页面标题。下面我们会在这个画布上完成页面的编排。



第二步：页面编排

 

在编排之前，我们先来构思一下“查看已完成事项”这个页面。已完成事项是一个列表清单，我们可以通过表格来呈现，包含任务内容和优先级两列。由于已完成事项随着时间推移变得越来越多，因此表格还需要支持翻页。

 

构思完毕，下面开始动手！

 

首先我们点击左侧菜单栏的+号来添加构件（页面元素）。找到general-card（通用卡片容器），拖动到画布中的内容插槽（content）。



接着，找到brick-table（表格）并拖动到general-card的内容插槽（content）。



至此，一个简单的页面结构就完成了。下面我们对表格构件进行配置，使其符合我们的构思。

 

第三步：构件设置


点击表格，从右侧弹出的抽屉中，填入表格的列设置

- dataIndex: task

  title: 任务

- dataIndex: priority

  title: 优先级


PS. 我们还可以在Document标签页查看构件的文档和示例。



点击保存，表格的设置就完成了，非常简单。下面为表格对接数据。

 

第四步：数据对接


首先，我们了解一下TODO应用的数据是如何存放的。EasyMABuilder内置了EasyCMDB，待办事项的数据被存储在TODO模型中，包含三个属性：task、priority和done（在模型视图中可以查看这个TODO模型的定义）。添加待办事项，实际上是在CMDB增加了一条实例数据，完成待办事项，实际上是修改实例数据，使done属性由false设置为true。


所以，如果要实现已完成事项的查看，只需要改为分页查询done为true的实例数据即可。


我们可以为每个页面配置上下文数据（Context），页面中所有构件都可以使用Context来作为数据源。参考待办事项页面，它有一个来自CMDB的上下文数据todoList，查询done为false的固定前300条TODO实例数据。



参考todoList，我们给“完成事项”页面添加一个上下文数据doneList。

找到左侧菜单的数据图，点击添加数据，如下图所示：



参考todoList，我们添加一个doneList的数据，如下所示。



选择 providers-of-cmdb.instance-api-post-search 为数据提供方（即Provider，可以理解为一个后台接口，平台内置了cmdb、object store对象存储等一系列Provider）。

 

设置参数。

- TODO

- fields:

priority: true

task: true

  page: '${QUERY.page=1}'

  page_size: '${QUERY.pageSize=10}'

query:

  done:

    $eq: true

sort:

  ctime: -1

进行数据转换。

value: '@{}’

点击保存，在页面加载的时候，就会自动查询CMDB并获取数据。

 

再次回到表格构件，设置表格构件的数据源（Datasource）为刚才设置的页面上下文数据doneList。


至此，“已完成事项”的页面就完成了。

 

第五步：其它修改

 

为“待办列表”页面右上角增加一个按钮，用于跳转到“完成事项”页面。

 在左上角找到路由视图，切换至“待办列表”。



找到general-button构件，拖动到页面的右上角的toolbar插槽。



设置按钮名称、图标和跳转Url。



第六步：重新Build & Push


再次预览或者刷新应用页面即可看到修改后的效果。



点击表格翻页，观察url的变化，体会一下分页查询和展示的效果。



06

结语


通过一个简单的step by step教程，大家对EasyMABuilder进行了基础入门，不仅编排出一个全新的简单页面，并成功对接了CMDB数据，最终实现对完成事项的表格展示。


但EasyMABuilder的能力还远不止于此，用户还可以设置应用的菜单和面包屑、数据模型、图片资源、应用文档、国际化等等，可以通过事件来实现页面更复杂的交互。