笔者之前的文章，介绍(吐槽)了曾经使用过的低代码开发平台和工具。
本文介绍使用低代码开发平台创建一个翻译应用的具体步骤。
笔者选择扣子平台来进行低代码开发：
https://www./
创建一个空白应用：
扣子平台的低代码应用开发分为业务逻辑开发和用户界面开发两部分组成。
翻译的业务逻辑可以封装在一个工作流里实现，笔者之前的文章曾经介绍过翻译工作流的详细开发步骤。
玩过 SAP 的工作流，再学习其他厂商的工作流开发的体验：降维打击
工作流开发完毕后，点击上图图例 2 的用户界面，开始给这个翻译应用绘制 UI.
如果大家曾经使用过 SAP 的低代码开发工具，对于拖拖拽拽绘制 UI 的方式一定不会陌生。
此外，在 SAPGUI 环境经典的 ABAP Webdynpro 开发工作台里，Webdynpro Component Layout 开发也是所见即所得方式，从左侧工具箱里拖拽常用的控件到画布里即可。
扣子左侧的工具箱一览如下图所示。同上图 ABAP Webdynpro 的 favorites 一样，扣子的「推荐组件」也能添加开发者经常使用的组件进去。
布局组件本身不显示任何肉眼可见的 UI 控件，而是负责定义页面的整体结构与包含于内的展示组件的排列方式，比如水平自动排列或是垂直自动排列。SAP UI5 中的 HorizontalLayout 和 VerticalLayout 也属于布局组件的一种具体实现。
展示组件就是只读显示内容的 TextArea，Image，Icon 等等。
输入组件即允许用户完成输入操作的控件，比如 Text Field，下拉菜单，Form 表单，文件和图片上传框等等。
AI 组件是扣子开发平台的特色，提供了开箱即用的与大模型对话的界面。
从下图能够看到扣子平台也允许开发者自定义组件，这体现了笔者之前的一篇文章《程序员学习低代码开发，到底是不是多此一举?》中提到的优秀低代码开发平台提供的 Extensibility 和 Flexibility 特性。
这里我从「布局组件」里拖拽了两个容器组件到画布里，分别用来显示应用的标题(Div1)和应用的主体区域(Div2).
左侧的「结构」列表以树形结构显示应用的组件节点，可惜每个节点没办法重命名。
Div2 里包含 Div3 和 Div4 这两个子容器，分别各占据 Div2 50% 的屏幕宽度。Div4 负责显示翻译后的文本。
Div3 则包含一个表单控件，里面包含一个 Textarea 让用户维护待翻译的源文本，一个下拉列表控件让用户输入目标语言，一个按钮让用户触发大模型的翻译操作。
选中表单控件里的「开始翻译」按钮，给它创建一个点击响应事件，执行动作为「调用工作流」，从工作流下拉列表里选择我们前一篇文章创建好的名叫 translation 的工作流。
玩过 SAP 的工作流，再学习其他厂商的工作流开发的体验：降维打击
选定之后会自动带出工作流的输入参数 content 和 lang.
然后使用双大括号语法进行工作流输入参数的数据绑定，{{Textarea1.value}} 的含义是将 Textarea 控件的值，绑定给工作流输入参数 content，{{Select1.value}} 意思是将目标语言下拉列表的值，绑定给输入参数 lang.
选择用来显示翻译结果的控件，将其内容字段，绑定到工作流的输出参数 {{translation.data}}.
这个应用的低代码开发就结束了。
应用能够正常工作，美中不足的是，从点击了「开始翻译」，到应用以流式响应输出大模型返回的第一行文本之歌时间窗口之间，UI 没有任何动画提示给用户，给人的感觉是点击了按钮却没有任何回应。
按照 SAP Fiori Design Guideline，这个窗口推荐显示类似 Busy Indicator 的动画效果。
大家感兴趣的话可以尝试通过自定义组件的方式，来优化按钮点击后的用户体验。