一、背景
PagePlug是一款面向研发开发使用、开源的、前后端一体的低代码工具，拥有强大的可视化建模和API集成能力，目前已有将近超千家企业将PagePlug低代码开发工具融入内部研发体系，相较于传统的产研开发，使用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官网https://home.openweathermap.org/中获取API keys，在账号右上角中，选择My API Keys
如果没有注册的话，需要先注册一个账号哟
复制这个api，将在下一环节中使用到
-
我们可以点击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，并点击下右下角的小图标
今天的天气是：{{$('OpetnWeatherMap').item.json["weather"][0]["description"]}},{{ $('Webhook').item.json["body"]["msg"] }}点击下右上角的Execute
-
之后我们可以登录填写收件人的邮箱中查看信息，可以看到发送的邮件信息
2.7 开启n8n工作流持续运行状态
-
在开发区将Active按钮打开
-
在Webhook组件中，将【Production URL】复制到PagePlug的api配置中，这样就可以不断的触发工作流状态了
三、企业版的介绍
如果想了解PagePlug企业版/商业版的价格及更多功能，可放大下方图片查看
