PagePlug开源低代码融合工作流开发教程——保姆级实战开发

一、背景

PagePlug是Appsmith中国化项目，一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模、数据库和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用PagePlug可大幅提升研发效率，节省项目迭代维护成本。更多介绍可点击下方文章查阅：

国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发_PagePlug的博客-CSDN博客文章浏览阅读1.1k次，点赞2次，收藏5次。面向研发使用、更懂国内企业的开源低代码_低代码框架https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501随着PagePlug的发展，企业用户对工作流自动化和低代码开发的需求日益增长。本文将通过一个使用开源工作流引擎n8n的天气预报邮件推送案例，展示如何将工作流能力融入PagePlug，实现更强大的企业应用开发。

欢迎进一步浏览本文，了解工作流与PagePlug的集成应用。PagePlug低代码开发平台为企业数字化转型提供了强大支持，相信其应用场景还将持续拓展。

二、实战教程

2.1 PagePlug的配置

• 我们可以在首页新建一个工作流的应用组，并创建一个PC端应用

• 我们可以在左侧拖入文本（text）组件，输入框（input）组件、下拉单选（select）组件、开关（Switch）组件

• 调整下样式和文案

1）下拉单选组件的数据配置如下，文案也可以修改为：城市选择

[ { "label": "北京", "code": "Beijing" }, { "label": "深圳", "code": "Shenzhen" }, { "label": "杭州", "code": "Hangzhou" } ]

2）输入框组件可以修改下文案，例如：输入内容；数据类型选择多行文本

PagePlug这边就快速的先简单搭建一个查询的交互界面，也可以加一些表情包优化下布局

2.2 n8n的配置—拖入Webhook组件

可以先在自己的电脑上部署一套n8n，具体的流程可查阅论坛的教程～～

• 新建一个工作流工作区，点击中间的+号，搜索Webhook组件

• 添加了Webhook组件后，将HTTP Method选项内容调整为POST

• 在PagePlug中创建一个rest api，可以命名为n8n；且将url地址中的localhost替换成本机ip后，将该api复制到rest api中，并选择为Post请求

在请求体中的JSON数据如下：

{ "city":{{Select1.selectedOptionValue}}, "msg":{{Input1.text}}, "tools":{{ function(){ let str="" if(Switch1.isSwitchedOn==true){ str+="email" } return str }() }} }

• 点击配置左侧的Listen For Test Event，随后在PagePlug中点击api的运行

点击运行后，在Webhook组件应该会响应表单输入的信息

• 配置好api后，我们可以对按钮组件绑定执行api的事件，点击发送时即执行api的运行

2.3 获得OpenWeatherAPI

• 我们可以前往OpenWeather官网Members中获取API keys，在账号右上角中，选择My API Keys

如果没有注册的话，需要先注册一个账号哟

复制这个api，将在下一环节中使用到

2.4 添加OpenWeatherMap组件

• 我们可以点击Webhook组件旁边的+号，新增一个节点

• 搜索OpenWeatherMap，并选择Return current weather data

• 在第一列选项Credential to connect with中，选择Create New Credential

• 将我们上一步在OpenWeather注册使用的api，复制到Access Token中

• 将Language选项配置为zh_cn

• 在City选项中，选择Expression，并点击下右下角的小图标

在Expression中配置的内容如下：

{{$('Webhook').item.json["body"]["city"]}}

• 配置完毕后，点下右上角的Execute node，并在PagePlug中点一下api的运行，即可成功响应

2.5 添加IF组件

• 点击OpenWeatherMap组件旁边的+号，新增一个IF组件

• 在【Conditions】选项中点击【add condition】按钮，选择String类型

• 在Value1选项中，选择Expression，并点击下右下角的小图标

在Expression中的配置如下：

{{ $('Webhook').item.json["body"]["tools"]}}

• 在Value2选项的配置为email，并点击下右上角的Execute node，即可响应

如果没有响应的话，点击了Execute node后，在PagePlug的n8n api中，再点击一下运行即可

2.6 添加Send Email邮件组件

• 在IF组件为true后面添加Send Email组件

• 在【Credential to connect with】选项中，点击【Create New Credential】

• 配置邮箱信息

1）User：输入自己的邮箱信息；

2）Passwor：输入三方登陆的密码；

3）Host：输入发信息的服务器配置；

4）port：填写服务器的端口号

本次案例使用阿里云邮箱进行演示：在【设置】中，选择【账户与安全】——【账户安全】，即可生成Password

在【邮箱】—【POP和MAP】，即可看到Host和Port的配置信息

• 配置完后如下，点击右上角的Save保存

• 在Send Email组件中，配置相应的信息

1）From Email：发送人邮箱

2）To Email：收件人邮箱

3）Email Format中选择Text

• 在Text输入框中，选择Expression，并点击下右下角的小图标

在Expression中配置如下：

今天的天气是：{{$('OpetnWeatherMap').item.json["weather"][0]["description"]}},{{ $('Webhook').item.json["body"]["msg"] }}

点击下右上角的Execute

之后我们可以登陆填写收件人的邮箱中查看信息，可以看到发送的邮件信息

2.7 开启n8n工作流持续运行状态

• 在开发区将Active按钮打开

• 在Webhook组件中，将【Production URL】复制到PagePlug的api配置中，这样就可以不断的触发工作流状态了

PagePlug在企业中的应用场景还在不断拓展，即可以构建全新的业务系统，也可用于对既有系统的进行扩展和优化，欢迎向社区投稿想要了解的开发案例，PagePlug社区将不断完善更多的案例及功能～～

• Gitee：开发灵活、迭代简单——面向研发使用的低代码

• Github：开发灵活、迭代简单——面向研发使用的低代码

三、其他相关案例

• 工程管理系统：优化数据源信息内容及审批流程

‍ 线上体验地址：工程管理系统

• 跨境电商仓库管理系统案例：该系统允许用户管理多个仓库的产品和库存、以及跟踪供应商产品和管理供应商

‍ 线上体验地址：跨境电商仓库系统

四、企业版的介绍

如果想了解PagePlug企业版/商业版的价格及更多功能，可放大下方图片查看

---

对PagePlug上一些功能使用讲解及介绍，可以点击下方文章查看

1、Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合

Formily开发实战——3分钟完成一个登录页的开发，Formily表单与PagePlug低代码的完美融合_PagePlug的博客-CSDN博客Formily——更高效的表单解决方案与开源低代码Pageplug的融合https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/130765565?spm=1001.2014.3001.5501

2、国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发

国内优秀的开源低代码框架：PagePlug，面向研发使用，拒绝重复、低价值的工单循环开发_低代码开发框架 开源_PagePlug的博客-CSDN博客面向研发使用、更懂国内企业的开源低代码_低代码开发框架 开源https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/131380008?spm=1001.2014.3001.5501

3、保姆级低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单

保姆级低代码实战教程——玩转PagePlug表格开发，增删改查分页如此简单_帆软对数据增删改查_PagePlug的博客-CSDN博客面向研发使用的低代码，比低代码区别很大的，相较于轻流、简道云、轻宜搭、微搭、帆软、活字格等等的低代码灵活性及维护更好_帆软对数据增删改查https://blog.csdn.net/AppsmithCN/article/details/131210730https://blog.csdn.net/AppsmithCN/article/details/131210730https://blog.csdn.net/AppsmithCN/article/details/1312107304、PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统

PagePlug：低代码平台入门教程—10分钟搭建一个用户改查系统_PagePlug的博客-CSDN博客PagePlug，面向研发使用的低代码平台，10分钟搭建一个用户改查系统https://blog.csdn.net/AppsmithCN/article/details/131790256https://blog.csdn.net/AppsmithCN/article/details/131790256https://blog.csdn.net/AppsmithCN/article/details/131790256

5、PagePlug低代码入门教程——与Websocket的集成

PagePlug低代码入门教程——与Websocket的集成_PagePlug的博客-CSDN博客通过PagePlug低代码与Websocket集成，实现前端页面的数据实时通信https://blog.csdn.net/AppsmithCN/article/details/132511483?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/132511483?spm=1001.2014.3001.5501https://blog.csdn.net/AppsmithCN/article/details/132511483?spm=1001.2014.3001.5501

6、B站上也有一些案例教程，欢迎查看研究～～

​欢迎点赞、收藏、喜欢三连鼓励下哟 ，避免找不到文章啦