当前位置: 首页 > Web前端 > HTML5

NoCode实践-零代码开发:轻松搭建会议策划系统!

时间:2023-04-05 21:30:12 HTML5

“关注”和“Star”我们,每天接收亚马逊云技术的最新资讯!对于每天在职场中无比充实的“白领骨干精英”来说,各种会议可能是最头疼的事情。接下来几天你需要参加哪些会议?每个会话的其他参与者是谁?你打算讨论什么话题?是否有人需要参加但尚未确定?……各种鸡毛蒜皮的小事,麻烦极了!虽然市面上有很多可以提供相关功能的日程管理和协作软件,但怎么比自己开发一个更时髦呢?并且也被视为学习新技术的练习手。在这篇文章中,我们就来看看如何借助AmazonHoneyCode,使用低代码技术开发一个简单实用的会议管理和订阅应用。即使你完全不会编码,甚至不需要编写任何代码,你也可以快速轻松地完成“开发”任务!需求分析对于这样一个会议订阅发布系统,我们希望实现如下需求:对于这个应用,我们希望通过以下步骤来构建:●数据逻辑定义●业务逻辑定义●数据填充●视觉布局调整数据逻辑定义首先需要考虑与数据逻辑相关的定义。这个应用程序有三个数据表,分别是:Users表、Meetings表和BookedMeetings表。Users表定义了使用App订阅和发布会议的用户的名称和对应的角色,如下图:如上图,Name列为App的每个用户,其值来自于系统变量$[SYS_USER],Role列为每个用户对应的角色。App设计中,根据角色判断对应用户是否有会议发布权限。Users表也是三个表中唯一需要手动填写的表。Meetings表是所有会议的记录表,记录了每条会议记录的详细内容、创建者和创建时间,如下:Name栏为会议名称,Agenda为会议主题,Location、DateAndTime和时长栏分别对应会议地点、会议时间和会议时长。CreateBy和CreateOn的其余部分是会议发布者和发布日期。需要注意的是,Mdate列,其值来自截取DateAndTime列中的日期部分,在APP中会作为会议是否到期的逻辑判断条件,其表达式为:=CONCATENATE(MONTH(Meetings[DateAndTime]),"/",DAY(Meetings[DateAndTime]),"/",YEAR(Meetings[DateAndTime]))BookedMeetings表是会议注册记录表,记录会议记录如下:表中Name栏为注册会议的用户名,Meeting栏表示用户将参加的会议名称,DateTime栏表示会议对应的时间出席。业务逻辑定义App中有两个界面,分别是MeetingList和BookedMeetings,还有一个添加会议的表单界面。MeetingList主界面显示如下:主界面右上角的问候语和当前日期是根据当前系统时间和日期动态显示的。用户可以根据日期进行过滤,显示指定日期的会议。如果不使用日期过滤器,将显示所有会议记录。“日期查询”右侧的“重置查询”按钮用于清除日期过滤器中的输入。只有当当前用户的角色是管理员时,才会显示添加会议的按钮。下面的会议列表用不同的颜色区分会议是否过期,会议是否注册通过是否显示“加入会议”按钮来区分。判断逻辑是,如果列表中的会议时间早于当前日期,则以红色底色显示,否则以绿色底色显示。已过期的会议将不会显示加入会议的按钮并显示“已过期”字样。对于已经注册的会议,不再显示加入会议按钮,而是显示“已注册”字样。在会议列表区点击每条记录显示其会议详情,再次点击关闭,如下图:Admin角色的用户可以发布会议,点击右上角的添加会议按钮,会跳转到表单页面,如下:在副屏BookedMeetings中显示已注册的会议,并取消,如下:数据填写,然后开始数据填写。Step1首先,我们需要新建一个Workbook,修改主屏显示并添加一个Block,然后在其中放置三个DataCells,分别命名为:AppUser、Greeting和TodaysDate,具体设置如下:初始值为AppUser的DataCell属性如下设置:设置Greeting的DataCell属性初值如下:设置TodaysDate的DataCell属性初值如下:Step2然后添加第二个Block,设置其DISPLAY属性为FALSE,并为其添加一个DataCell,为SelectedRow设置变量名,这个DataCell的作用是保存列表当前行的值,但是这个DataCell不需要在UI上显示。Step3添加第三个Block,将USERINPUTS中的Date插件和一个按钮拖入其中,修改按钮上的显示文字:为“ResetQuery”按钮添加ACTION,修改DateINPUT的变量值为为空,此按钮的作用是清除用户在日期选择器插件中的输入。Step4添加ColumnList插件,修改其属性中的数据源过滤器,表达式为:=IF($[Date]="",Meetings,FILTER(Meetings,"Meetings[Mdate]=%",CONCATENATE(MONTH($[Date]),"/",DAY($[Date]),"/",YEAR($[Date]))))这个表达式的作用是:如果DateINPUT值为空,然后使用整个Meetings表作为它的列表数据源;否则,将DataINPUT的值与Meetings表中Mdate的值进行比较,将匹配的数据行作为列表数据源。Step5调整页面布局,删除不需要显示的字段内容,在第一个Segment中添加两个DataCells,分别设置它们的初始值为“registered”和“unregistered”以及一个button,并修改它们的显示文字到“在会议上。“已注册”DataCell属性中的可见性表达式设置为:=FILTER(BookedMeetings,"BookedMeetings[Name]=%ANDBookedMeetings[Meeting]=%",$[AppUser],$[Namecolumndata])>0Its功能是判断BookedMeetings表中是否已有当前用户对本次会议的注册记录。如果存在,则显示:“已过期”DataCell属性中可见性的表达式设置为:=DAYS(NOW(),$[DateAndTime列数据])>0其作用是判断当前Meetings表中的time和DateAndTime列数据字段所代表的日期之间相隔的天数,如果结果大于0,说明当前会议记录已经过期,那么会显示这个DataCell的内容:修改“加入会议”按钮属性中ACTION的自动化为AddAddRow操作,其表现是将要参加的会议信息写入BookedMeetings表。步骤6在列表中的“ConferenceDuration”上方插入一个新的Segment,并在其中插入一个DataCell,用于显示参会人数。设置DataCell初值的表达式为:=IFERROR(FILTER(BookedMeetings,"BookedMeetings[Meeting]=%",$[Namecolumndata]),0)用于确定BookedMeetings表中注册会议的个数.步骤7添加一个表单,为具有Admin角色的用户提供发布会议的条目。页面上将生成一个按钮和一个表单屏幕。将按钮的文字修改为“添加会议”,放在主界面“重置查询”按钮的后面,在按钮属性中设置可见性表达式为:=FINDROW(Users,"Users[Name]=%",$[SYS_USER])[Role]="Admin"其作用是将当前系统用户与Users表用户名进行匹配,获取其角色来判断是否为Admin。将添加会议按钮属性中的可见性表达式设置为:=FINDROW(Users,"Users[Name]=%",$[SYS_USER])[Role]="Admin"Step8创建副屏BookedMeetings并创建一个新建Screen,并添加一个Columnlist插件,设置其数据源表达式为:=FILTER(BookedMeetings,"BookedMeetings[Name]=%",$[SYS_USER])其作用是获取当前会议列表用户已在BookedMeetings表中注册并显示。调整列表中的显示项并添加一个按钮,修改其显示文本为“取消”:修改“取消”按钮属性中的ACTIONS,添加一个自动化点击事件,用于删除BookedMeetings中的当前行记录桌子。至此,页面的数据填充部分就设计好了,接下来我们开始调整视觉布局。VisualLayoutAdjustmentStep1在业务逻辑定义章节中,提到了根据背景色区分每条会议记录是否过期。下面是具体实现。在主界面,选择会议列表中会议条目所在的Segment,在其属性中的DISPLAY中设置条件样式,根据满足不同表达的条件显示不同的颜色。该表达式计算当前日期与Meetings表中日期和时间列数据列中的日期之间的天数差异。如果<=0,则表示会议是在当天或将来的某个日期。如果result>0,则表示会议已经结束。已到期。如果结果为TRUE,这两个表达式分别将背景颜色设置为绿色和红色。最终显示效果如下:Step2会议详情会响应会议条目的点击事件显示和折叠,并在主界面会议条目属性的ACTION中设置自动化表达式填充hidden章节中提到的SelectedRow为DataCell的上述数据赋值,它的作用是让它保存当前行的变量值(THISROW()),而会议条目下面的详细内容会根据判断是否显示变量值是否等于THISROW()。步骤3接下来,在会议条目下的详细内容列表中的每个ContentBox上设置可见性表达式。注意:可见性表达式会判断DataCellSelectedRow的值是否等于THISROW()。如果满足条件,就会显示出来。这样当会议条目被点击时,会根据其值是否等于THISROW()来显示会议条目的详细内容。决定是否显示效果。至此,App设计步骤全部完成。用户在使用时,只需要创建三个数据表,在Users表中填入用户及其对应的角色即可。每个团队成员都可以注册他们想参加的会议和取消他们已经注册的会议。相关页面如下:本文内容概要根据上面会议订阅发布系统的创建过程可以看出,借助AmazonHoneycode,用户无需任何编码即可创建自己的客户端程序。用户端只需要考虑业务逻辑和数据源。高度可定制的UI页面和丰富的拖放式插件支持事件响应处理,让用户可以按照自己的方式编排和创建自己的客户端程序。您还可以通过与亚马逊云技术服务集成,创建自己的业务终端。本文作者介绍了李俊强,亚马逊云技术专业服务团队的云架构顾问,负责企业级客户的云架构咨询、基础设施现代化和优化。在基础设施和容器领域拥有多年运维管理经验,对DevOps、持续交付、云原生服务框架、运维自动化有深刻理解。结尾