AstroZero脚本概述
针对业务逻辑比较复杂的场景,AstroZero低代码平台提供了脚本(Script)能力,支持用户在线开发TypeScript脚本,完成灵活复杂的业务逻辑。
与服务编排对比
- 脚本是代码化的,使用TypeScript开发的。脚本是内聚的,相当于生产积木的,并且脚本可以对这个积木实现批量化处理的复杂场景。
- 服务编排是图形化的,组合编排业务,相当于使用积木编排业务的流程(建议不超过20个图元)。
脚本用什么编辑器
低代码平台提供了一个方便简洁的在线开发IDE,即脚本编辑界面,脚本编辑界面开发体验接近离线的开发工具,具有如下优势:
- 现代化的编辑界面,语法高亮显示。
- 智能提示、智能补全。
- 精确查看定义、代码预览、查找引用。
- 快速在线编译。
- 友好的语法错误提示。
- 可以使用console.log,写日志分析复杂的问题。
脚本编辑界面如图1所示,您可以在线编辑、测试和发布脚本。
- 按钮区域
脚本编辑页面常用的图标按钮区,具体功能说明如表1所示。
表1 图标说明 图标
说明
/
- ,单击即可启用脚本,该图标高亮时,表示当前脚本已被启用。
- ,单击即可禁用脚本,该图标非高亮时,表示当前脚本未启用。
说明:脚本开发完成后,需要启用脚本。只有启用状态的脚本,才能在被其他资源(如服务编排、标准页面)调用时,搜索到。
保存脚本。
另存为脚本。
设置脚本属性,如可见性、是否开启允许覆盖等。
执行脚本。
/
操作回退、撤销回退。
对已开发好的脚本代码进行性能检查、兼容性检查和静态配置检查。
说明:代码检查的具体操作,请参见脚本性能检查规则。
刷新当前引入的脚本到最新状态。
单击该图标,脚本编辑器可分屏显示。
脚本启用后,单击右上角的,可查看该组件的调用关系图。
说明:脚本启用后,才会显示该图标。
跳转TS脚本说明书。
版本对比。
切换版本。
- 代码编辑器
在该区域开发代码,实现功能。代码编辑器提供智能提示、代码补全、显示光标的所在行和列信息等能力,更多介绍请参见AI代码补全功能。
脚本编辑页面同样支持离线编辑器中的常规快捷键操作,例如“Ctrl+S”可以保存当前修改,“Ctrl+H”可以调出查找替换对话框,您也可以根据自己的开发习惯,尝试各种快捷键操作。
- 测试区
运行代码后的显示区域。在“输入参数”页签输入参数后,单击测试区右侧的运行按钮,运行脚本。即可在“输出参数”页签,查看输出结果是否正确。在“问题”和“日志”页签,查看问题和日志。除此之外,还支持清除日志输出、运行脚本并动态检查和保存输入参数。
脚本主要用什么语言和库
低代码平台的脚本引擎采用TypeScript语言。脚本执行时,TypeScript语言会被翻译成JavaScript语言,由JavaScript引擎执行。TypeScript模块import语法,请参考TypeScrip官方网站。
在JavaScript es5的官方标准库外,低代码平台还扩展了10+预置标准库(即预置API),帮助您更高效地开发脚本,有关系统预置的标准库说明请参见脚本中预置的API。
库的使用方法举例:
import * as http from 'http';
低代码平台中有些模块会被编译成二进制,预先加载到内存中。例如,decimal、context都是系统预置的标准库模块。在低代码平台中,会优先加载标准库模块, 例如:
import * as http from 'http';
始终返回内置的HTTP模块,即使有同名自定义模块。如果需要返回自定义的模块,请使用相对路径语法:
import * as http from './http';
代码编辑器
在代码编辑区域,在符号上单击鼠标右键,会出现如图2所示代码导航功能。除此之外,脚本编辑器还提供了智能提示、代码补全、显示光标的所在行和列信息等能力。
- Go to Definition
- Go to References
- Go to Symbol
- Run
- Peek Definition
- Peek References
- Rename Symbol
- Change All Occurrences
在代码编辑区域,选中一个字符串,单击鼠标右键,选择Change All Occurrences,可以批量修改代码中所有包含该字符串的内容。
- Format Document/Format Selection
在代码编辑区域,选择一块代码,单击鼠标右键,选择Format Selection;或者直接在任意位置单击鼠标右键,选择Format Document,可以对代码进行格式化排版。
- Fix lint issue
在代码编辑区域,选择一块代码,单击鼠标右键,选择Fix lint issue;或者直接在任意位置单击鼠标右键,选择Fix lint issue,可以对代码进行静态规范错误修复。
- Cut/Copy
- Command Palette
在代码编辑区域,在符号上单击鼠标右键,选择Command Palette或者按F1,进入命令面板,可以执行很多编辑功能。
图3 命令面板
- Hover
把鼠标停留在符号上,可以查看符号的定义概要。再按住Ctrl键,单击符号,可以查看符号更加详细的定义。
例如,鼠标停留在“useObject”上,显示图4所示,可查看其定义概要。按Ctrl键,单击“useObject”,可查看更详细的定义,如图5。
- Bracket matching
图6 Bracket mathching
- Errors & Warnings
编辑代码时,如果有语法错误,会在这个语法下面显示红色波浪线,鼠标移动上去,会显示具体错误。
图7 Errors&Warnings
- Go to Line
- Search and Replace
按“Ctrl + f”,输入关键字,可以搜索当前代码的内容。表示搜索的内容分别支持大小写匹配、全文匹配、正则表达式。
按“Ctrl + h”,输入关键字,可以查找并替换代码中的内容。
- Code Complete
- 全局符号补全
图8 complete_symbol
- 对象成员补全
图9 complete_member
- 参数补全
图10 complete_parameter
- 全局符号补全
- Comment Code
- Save File
AI代码补全功能
代码补全引擎会从开发者历史创建脚本中,学习其编码习惯,从当前代码脚本中获得代码上下文语法知识。开发者在编写脚本代码过程中,系统根据代码上下文和历史代码,对将要编写的代码进行提示,从而自动构建智能代码补全服务,增强IDE代码补全能力。
AI代码补全功能具体使用方法:开发者在代码编辑器中,编写脚本代码过程中,敲击字符时自动触发代码推荐,选中后按Enter补全。开发者将鼠标移动到待查看详细信息的字段,将字段悬浮窗中的文字选中复制粘贴到代码中。
- 常规补全:开发者编码过程中,输入任意字符均会触发的补全提示。
例如:开发者键入“@u”,如下图所示,系统根据意图在代码编辑器中给出最可能使用的方法。
图11 常规补全
- 定制补全:低代码平台脚本开发中,提供了内部预置系统级依赖库,供开发者调用。用户也可以在前台页面配置对象数据、系统参数、错误码、事件和工作流后,在脚本中引用这些内容。定制补全是指在脚本开发中引用依赖库和各配置项时,IDE触发的对潜在内容名称的补全提示。
- 依赖库补全:脚本代码中引入依赖的代码行时,对依赖库的名称进行推荐提示。如下图所示,开发者输入“import * as xxx from”后,提示“z”开头的依赖库名称。
图12 依赖库补全
- 表名(即对象名)补全:脚本代码引入对象数据的代码行中,推荐提示对象名称。如下图所示,开发者键入“@useObject”后提示m开头的对象名。
图13 表名补全
- 表字段提示:脚本代码中引用表字段时,鼠标移动到表名上,悬浮窗会对表名进行提示。如下图所示,开发者鼠标放在表名上,展示所有字段。
图14 表字段提示
- 错误码补全:脚本中引入数据表的代码行中,对表名称进行推荐提示。如下图所示,开发者键入“setI18nError”后,提示相关错误码名。
图15 错误码补全
- 错误码内容提示:脚本代码中引入数据表的代码行中,对表名称进行推荐提示。如下图所示,鼠标放在错误码名称上,展示相关描述。
图16 错误码内容提示
- 系统参数补全:脚本代码中引入系统参数的代码行中,对参数名称进行推荐提示。如下图所示,开发者键入“sys.getParameter”后,提示相关系统参数。
图17 系统参数补全
- 依赖库补全:脚本代码中引入依赖的代码行时,对依赖库的名称进行推荐提示。如下图所示,开发者输入“import * as xxx from”后,提示“z”开头的依赖库名称。
样例代码解读
通过以下详细的脚本代码内容解读,对脚本有一个更具体的认识。一般情况下,编写脚本的大致流程为:
- 按需引入平台标准库。
图18 引入平台标准库
- 定义出参、入参结构。
图19 定义入参
图20 定义出参
- 定义方法以及使用的对象。
图21 定义方法及使用对象
- 进行数据库操作。
图22 数据库相关操作
以下将通过解读一个脚本样例,带您了解脚本的总体结构框架及编写要求。
import * as decimal from 'decimal'; @action.object({type: "param"}) export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject; } @action.object({type: "param"}) export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal; } @action.object({type: "param"}) export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[]; } @action.object({type: "method"}) export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; } }
上述示例脚本主要分为如下三部分:
- 导入标准库或其他模块。
除了平台预置的标准库,还可以声明对其他自定义模块的引用。例如,已提前开发了一个脚本cirle,可以用如下方式加载它。
import * as circle from './circle';
- 定义输入、输出变量。
脚本可以有多个输入、输出参数,也可以没有。所有的输入或输出参数,必须封装在一个class中,作为实例成员。
本例中,脚本有6个输入参数,被封装为ActionInput。每个参数都必须定义其参数类型,同时还可以定义是否必填、标签、最大值、最小值等可选属性。
@action.object({type: "param"}) export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject; }
因为第6个输入参数“obj”的参数类型为自定义对象,所以还需要给出“ MyObject”的定义。
@action.object({type: "param"}) export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal; }
脚本中有1个输出参数,被封装为ActionOutput。
@action.object({type: "param"}) export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[]; }
- 定义方法
样例中,ActionDemo是外部调用的class,使用export导出。ActionDemo定义了一个action method,使用action.method装饰,表明调用脚本时从此方法入口。greet是class的实例方法,其输入、输出参数就是前面定义的ActionInput和ActionOutput。在一个脚本文件中,action.method只能使用一次。
@action.object({type: "method"}) export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; } }
脚本编辑页面不支持单步调试,样例里的console.log可实现在日志里打印过程输出,方便代码调试。