低代码快速定制你的云产品管控台

方案概览

阿里云通过 OpenAPI 提供了强大的云产品集成能力，帮助用户灵活应对多样化需求。对于同时使用多个云产品的用户，或是有定制化运维流程和独特信息展示需求的场景，默认的云产品控制台可能无法完全满足要求。而借助魔笔低代码平台上的低代码应用开发界面及内置的阿里云 OpenAPI 连接器，用户可以快速构建和定制符合自身需求的专属云产品控制台，从而更高效地实现个性化的运维管理和信息展示。

访问方式

您可以通过浏览器访问魔笔控制台以开始您的应用搭建。

什么是魔笔

魔笔是为阿里云专业开发者量身打造的 AI 原生化的低代码应用开发平台，集成了阿里云 OpenAPI 连接器、通义千问大模型连接器等多种连接器，让开发更智能、应用更智能。魔笔提供一站式的应用全生命周期管理，包括可视化开发、发布、运维；基于云原生架构的弹性扩展和低成本运维服务，帮助开发者高效地解决应用研发、迭代、运维的问题。

最终效果

服务器实例列表页

服务器实例详情页

安全组详情页

添加安全组规则表单

页面搭建

创建阿里云 OpenAPI 连接器

首先，你需要在“资源 -> 集成”菜单中，新建一个“阿里云 OpenAPI”类型的连接器：

随后在配置界面中，填写你的阿里云访问密钥（ AccessKeyID 和 AccessKeySecret ）：

然后你就可以在 Mobi 2.0 的编辑器中，轻松的调用阿里云 OpenAPI 了。本教程中会涉及到以下 OpenAPI 的调用：

• 查询地域列表；

• 查询实例详情；

• 查询安全组列表；

• 查询安全组详情；

因为安全原因，本教程中不涉及对 ECS 的高危操作（删除、变更），用户可以自行参考本教程加入高危功能。

布局搭建

布局搭建中，主要涉及到如下阿里云 OpenAPI 操作：

• 查询地域列表

首先，在 Mobi 2.0 中创建一个新的空项目：

首先，我们为页面添加一个布局组件：

我们先删除所有预置的页头元素，在页头处添加一个“单选下拉框”，用于地域的选择。随后，在左侧导航栏中，添加一个“实例”的菜单项。

为了获取我们的 ECS 地域列表，我们可以通过前文创建的阿里云 OpenAPI 连接器，创建一个集成操作，将其与下拉框绑定：

同时，我们添加一个全局变量currentRegion，用以存储下拉框选中的值：

随后，在下拉框的“数据源”中，将集成操作的返回值作为其数据源：

同时，在“事件”中，为其绑定一个“设置变量”操作，将currentRegion的值设置为下拉框当前选中的值。

此时，下拉框即可展示所有ECS的地域选项了。

实例列表页面搭建

随后，我们进行“实例”页面的设计。首先，我们复用同一个阿里云 OpenAPI 连接器，创建一个“获取实例列表”的集成操作：

可以看到，上图中，我在RegionId字段中填写了一个表达式，在自动运行的触发模式下，它可以在变量变更时自动执行集成操作，为页面的逻辑设计提供便利。

我们继续开始页面设计，首先拖拽一个表格组件到页面中，随后设置其数据源和第一列的展示逻辑：

在“标签”栏的设计中，我们自定义逻辑，将容器服务托管的ECS用一个标签展示：

随后，我们根据 OpenAPI 中提供的字段，继续完成剩余列的构建：

在表格的设计面板中，开启服务端分页，并将集成操作的值填入对应的输入框中，即可实现分页功能：

其他页面的搭建

因为篇幅原因，本文不再详细介绍其他页面的详细搭建流程。用户可以自行使用ECS控制台模板进行探索。