低代码开源框架Appsmith

Jan. 22, 2022

Appsmith 是一个用于构建应用程序的低代码、开源框架。什么是 Appsmith ？

Appsmith 是一个用于构建内部应用程序的低代码、开源框架。通过拖放组件来构建完全自定义的管理面板、CRUD 应用程序和工作流。使用 30 多个 React 组件来构建没有 HTML/CSS 的页面。构建速度提高 10 倍。

其工作原理👇并不复杂

前期准备因为需要数据来演示，所以老苏在 https://dev.mysql.com/doc/index-other.html 下载了 world database，解压出来的 SQL 脚本可以在 phpMyAdmin 中直接导入

至于 MariaDB 的版本无所谓，老苏还是用了 MariaDB 5

虽然只有 3 张表，但都是有数据的

安装在群晖上以 Docker 方式安装。

在注册表中搜索 appsmith-ce ，选择第一个 appsmith/appsmith-ce，版本选择 latest。

卷在 docker 文件夹中，创建一个新文件夹，并将其命名为 appsmith，并在 appsmith 目录下建一个子目录 stacks

文件夹装载路径说明 docker/appsmith/stacks /appsmith-stacks 存放设置

端口端口不冲突就可以

本地端口容器端口 9280 80 9243 443 9201 9001

运行稍等一会儿（应该不超过 1 分钟吧），在浏览器中输入 http://群晖IP:9280 就能看到主界面

点橘黄色的按钮 GET STARTED ，首先需要填写一些信息，主要是 Email 和 Password

默认两个都是启用的，老苏给取消了

完成后进入了主界面

第一个应用点正中间的橘黄色按钮 BUILD MY FIRST APP 开始我们的第一个应用

数据源首先要选择数据源

前面我们已经准备好了，所以选择 Mysql，如果 Test 没问题，就可以点 Save 保存了

页面点 GENERATE NEW PAGE 就可以开始创建新页面了

你要做的就是在下拉框中选表和要查询的字段

点 Generate Page 创建页面

生成的页面中有一个 Table 来显示、增加和删除数据，可以在 Form 中进行修改

点右上角的 Deploy 发布即可生成一个页面

组件但是这种页面是固定格式的，返回的是所有的数据，如果你需要个性化的应用，就需要通过拖拽 Widget ，搭建自己的应用界面

设定一个目标 –> 根据选定的国家，显示属于这个国家的城市

新建页面，选择 Build with Drag & Drop

首先需要通过顶部的菜单确定应用的类型

然后建 2 个查询

一个是 get_Country，用来查询所有的国家名称

SELECT Name FROM country

在右侧 Suggested widgets 中绑定到 SELECT 组件

SELECT 组件的属性

再建一个查询 get_City，根据选定的国家来显示这个国家的城市

SELECT * FROM city WHERE CountryCode = (SELECT Code FROM country WHERE country.Name = {{Select1.selectedOptionValue}} )

在右侧 Add New Widget 中绑定到 TABLE 组件

TABLE 组件的属性

为了实现联动，也就是当 SELECT 组件下拉框中的国家发生变化时，TABLE 组件中的城市能同步变化，需要在 SELECT 组件的 Action 中的 onOptionChage 事件中，触发 get_City.run() 查询这个国家的所有城市

最终的 UI 效果

老苏录制了一张动图，这样更容易理解和展示已实现的效果

发布和分享右上角有 Share 和 Deploy

发布（Deploy）后，可以在不同的页面进行切换

邀请（Share ）：把链接发给别人来使用你发布的应用

还可以给邀请用户设置不同的权限

小结通过上面的案例，总结出在 Appsmith 中创建应用程序的五个简单步骤：

连接任何数据源：您可以将任何数据库与 Appsmith 集成，包括 REST API、MySQL、Postgres、MongoDB、Google Sheets 等；构建 UI：使用预构建的小部件，您可以在几秒钟内创建 UI；创建和执行查询：在 SQL 或 JS 编辑器中编写查询和业务逻辑，然后绑定响应；轻松定制：随处编写 JS，甚至在您的数据库查询中，以定制您的应用程序；协作和部署：只需单击一下，即可邀请您的同事和朋友与您合作并部署您的应用程序。其他如果你打开 http://群晖IP:9201，你会看到一个 Supervisor 进程管理界面，可以用来启停服务

参考文档 appsmithorg/appsmith: Build completely custom admin panels and internal tools. Use 30+ react components to build pages without HTML/CSS. 地址：https://github.com/appsmithorg/appsmith

Appsmith 地址：https://www.appsmith.com/

appsmith-docs/docker.md at v1.3 · appsmithorg/appsmith-docs 地址：https://github.com/appsmithorg/appsmith-docs/blob/v1.3/setup/docker.md

Docker - Appsmith 地址：https://docs.appsmith.com/setup/docker