NoCode 实战 | 零代码开发:轻松打造会议计划系统!

2021年09月15日 阅读数:3
这篇文章主要向大家介绍NoCode 实战 | 零代码开发:轻松打造会议计划系统!,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

image.png
「关注」并「星标」咱们,
天天接收关于亚马逊云科技的最新资讯!架构

对于天天无比充实的职场“白领骨干精英”来讲,各类会议多是最麻烦的事。接下来的几天本身须要参加哪些会议?每场会还有其余哪些参与者?打算讨论什么主题?是否有哪位必须参会的人还没肯定?……各类杂事无比麻烦!框架

虽然市面上有不少能够提供相关功能的日程管理和协做软件,不过这哪有本身独自开发一套听上去更有格调呢?并且也就看成是学习新技术的练手了。运维

本文咱们就一块儿看看,如何用低代码技术,借助 Amazon HoneyCode 开发一个简单实用的会议管理和订阅应用。布局

哪怕你根本不会写代码,甚至不须要写什么代码,也能快速轻松地搞定“开发”任务!学习

需求分析

对于这样的一个会议订阅发布系统,咱们但愿实现以下需求:优化

image.png

而对于这个应用,咱们但愿经过以下步骤进行构建:编码

● 数据逻辑定义
● 业务逻辑定义
● 数据填充
● 视觉布局调整spa

数据逻辑定义插件

首先须要考虑与数据逻辑有关的定义。本应用拥有三张数据表,分别为:Users表、Meetings 表以及 BookedMeetings 表设计

其中 Users 表定义了使用 App 进行订阅和发布会议的用户名称及对应的角色,以下所示:

image.png

如上图所示,Name 列为该 App 的每一个用户,其取值来自系统变量$[SYS_USER],Role 列为每一个用户对应的角色,在 App 设计中依据角色来肯定其对应的用户是否拥有会议发布权限。Users 表也是三张表中惟一须要手动填写的。

Meetings 表为全部会议的记录表,记录着每条会议记录的详细内容、建立者及建立时间,以下所示:

image.png

其中 Name 列为会议名称,Agenda 列为会议主题,Location、Date And Time 及 Duration 列分别对应会议地点和会议时间及会议时长。其他的 CreateBy 和 CreateOn 为会议发布者和发布日期。须要注意的是 Mdate 这一列,它的取值来自对 Date And Time 列中日期部分的截取,在 APP 中将用做会议是否过时的逻辑判断条件,其表达式为:

=CONCATENATE(MONTH(Meetings[Date And Time]),"/",DAY(Meetings[Date And Time]),"/",YEAR(Meetings[Date And Time]))

BookedMeetings 表为会议注册记录表,表中记录着用户要参加的会议记录,以下所示:

image.png

表中 Name 列为注册会议的用户名,Meeting 列表示用户将要参加的会议名称,DateTime 列表示要参加的会议对应的时间。

业务逻辑定义

App中共有两屏显示,分别是MeetingList和BookedMeetings,另外还有一个添加会议的表单界面。

MeetingList 主屏显示以下:

image.png

在主屏中右上角的问候语及当前日期按照当前系统时间及日期动态显示。

用户可根据日期来过滤来显示指定日期的会议,若是没有使用日期过滤,那么将显示全部的会议记录,“日期查询”右边的“重置查询”按钮用来清除日期过滤器中的输入。添加会议的按钮只有当前用户的角色是 Admin 的状况下才会显示。

下面的会议列表使用不一样的颜色区分会议是否过时,经过是否显示“参加会议”的按钮区分此会议是否已注册。判断逻辑为若是列表中的会议时间为当前日期以前那么将显示为红色背景色反之则为绿色背景色,已过时的会议不显示参加会议的按钮同时显示“已过时”字样。对于已经注册的会议再也不显示参加会议按钮,而是显示“已注册”字样。

会议列表区的每条记录单击会显示其会议详细内容,再次单击则收起,以下所示:

image.png

拥有Admin角色用户能够发布会议,点击右上部添加会议按钮,会跳转到表单页面,以下:

image.png

在副屏 BookedMeetings 中显示已经注册的会议并可对其作取消处理,以下:

image.png

数据填充

随后开始进行数据填充。

步骤一

首先咱们须要建立新的 Workbook,修改主屏显示并增长一个Block,随后在其中放置三个DataCell,分别命名为:AppUser、Greeting和TodaysDate,具体设置以下:

image.png

在AppUser的DataCell的属性初始值作以下设置:

image.png

对Greeting的DataCell的属性初始值作以下设置:

image.png

TodaysDate的DataCell 的属性初始值设置以下:

image.png

步骤二

接着添加第二个 Block,将其 DISPLAY 属性设置为 FALSE,并在其中添加一个 DataCell设 置变量名为 SelectedRow,此 DataCell 的做用是保存列表当前行的值,可是在UI不须要显示该 DataCell。

image.png
image.png

步骤三

添加第三个 Block,并在其中拖入一个 USER INPUTS 中的 Date 插件和一个按钮,并修改按钮上的显示文字:

image.png
image.png

为按钮“重置查询”添加 ACTION 修改 Date INPUT 的变量值为空,此按钮的做用是清除用户在日期选择器插件中的输入。

image.png

步骤四

添加一个Column List插件,并修改其属性中的数据源过滤器,其表达式为:

=IF($[Date]="",Meetings,FILTER(Meetings,"Meetings[Mdate]=%",CONCATENATE(MONTH($[Date]),"/",DAY($[Date]),"/",YEAR($[Date]))))

该表达式的做用为:若是 Date INPUT 值为空,则把整个 Meetings 表做为其列表数据源;不然将比对 Data INPUT 的值和 Meetings 表中的Mdate的值,将匹配的数据行做为列表数据源。

image.png

步骤五

调整页面布局并删除不需显示的字段内容,在第一个 Segment 中添加两个 DataCell,分别设置其初始值为“已注册”和“未注册”及一个按钮并将其显示文字修改成“参加会议。

image.png

“已注册”DataCell属性中的可见性表达式设置为:

=FILTER(BookedMeetings,"BookedMeetings[Name]=% AND BookedMeetings[Meeting]=%",$[AppUser],$[Name column data])>0

其做用是判断在 BookedMeetings 表中是否已经有了当前用户对这个会议的注册记录。若是存在则显示:

image.png

“已过时”DataCell 属性中可见性的表达式设置为:

=DAYS(NOW(),$[Date And Time column data])>0

其做用是判断当前时间和Meetings表中的Date And Time column data字段所表明的日期之间间隔的天数,若是结果大于0则表示当前的会议记录已通过期,那么这个DataCell的内容将显示:

image.png

修改“参加会议”按钮属性中的ACTION的automation为其添加Add Row操做,其表达式的做用是将要参加会议的信息写入到BookedMeetings表中。

image.png

步骤六

在列表中的“会议时长”上面插入一个新的Segment,并在其中插入一个DataCell用做显示参会人员数量。

image.png

设置 DataCell 的初始值表达式为:

=IFERROR(FILTER(BookedMeetings,"BookedMeetings[Meeting]=%",$[Name column data]),0)

做用是用来判断当前会议在 BookedMeetings 表中被注册的数量。

image.png

步骤七

添加表单,为拥有 Admin 角色的用户提供发布会议的入口,页面会生成一个按钮及一个表单屏,修改按钮显示文字为“添加会议”并将其放置到主屏“重置查询”按钮的后面,而且设置按钮属性中的可见性表达式为:

=FINDROW(Users,"Users[Name]=%",$[SYS_USER])[Role]="Admin"

其做用是匹配当前系统用户与 Users 表中的用户名并获取其角色,判断是否为 Admin。

image.png
image.png

在添加会议按钮的属性中设置可见性表达式为:

=FINDROW(Users,"Users[Name]=%",$[SYS_USER])[Role]="Admin"

步骤八

建立副屏 BookedMeetings,新建一个Screen,并添加一个Column list插件设置其数据源表达式为:

=FILTER(BookedMeetings,"BookedMeetings[Name]=%",$[SYS_USER])

其做用是在 BookedMeetings 表中检索当前用户已经注册的会议列表并显示。

image.png

调整列表中的显示项并添加一个按钮,修改其显示文字为“取消”:

image.png

修改“取消”按钮属性中的ACTIONS添加automation点击事件,做用是删除BookedMeetings表中当前行记录。

image.png

至此,页面数据填充部分设计完毕,咱们随后开始进行视觉布局调整。

视觉布局调整

步骤一

在业务逻辑定义章节中提到了要根据背景颜色来区分每条会议记录是否已通过期,下面是具体实现。

在主屏中选择会议列表中的会议条目所在的 Segment,设置其属性中的 DISPLAY 中的条件样式,根据知足不一样表达式的条件显示不一样的颜色。

image.png
image.png
image.png

表达式中计算当前日期和 Meetings 表中的 Date And Time column data 列中的日期之间的天数差值,若是 <=0 表示会议是在当天或者未来的某个日期,若是结果 >0 表示会议已通过期。这两个表达式在结果为 TRUE 的状况下分别设置背景色为绿色和红色。最终显示效果以下:

image.png

步骤二

会议详细内容会响应会议条目的点击事件来显示和收起,在主屏中的会议条目属性的 ACTION 中设置 automation 表达式来为上面数据填充章节中提到的 SelectedRow 这个隐藏的 DataCell 赋值,其做用是让其保存当前行(THISROW())的变量值,会议条目下的详细内容会根据这个变量值是否等于THISROW()来判断是否显示。

image.png
image.png

步骤三

接下来在会议条目下的详细内容列表中的每一个 ContentBox 上设置可见性表达式。

image.png

注意:可见性表达式中会判断 SelectedRow 这个 DataCell 的值判断是否等于 THISROW(),若是知足条件就显示,这样就达到了当点击会议条目时,会议条目详细内容根据其值是否等于 THISROW() 来决定是否显示的效果。

image.png

至此,App 设计步骤所有完成,用户使用时只需建立三张数据表并在Users表中填充用户及其对应的角色便可。每一个团队成员均可以注册本身想要参加的会议以及取消已经注册的会议。相关页面展现以下:

image.pngimage.png
image.pngimage.png

本篇内容总结

据上面会议订阅发布系统的建立流程能够看出,借助于 Amazon Honeycode,用户不须要进行任何编码便可建立本身的客户端程序。

用户侧仅须要考虑业务逻辑和数据源便可,高度可定制化的 UI 页面以及丰富的拖拽插件支持配合事件响应处理,使得用户能够按照本身想要的方式编排和建立本身的客户端程序,更可经过与亚马逊云科技的服务集成打造本身的业务终端。

本文做者介绍

image.png

李军强
亚马逊云科技专业服务团队云架构咨询顾问
负责企业级客户的云上架构咨询,基础架构现代化改造及优化。在基础架构和容器领域有多年运维管理经验,对 DevOps、持续交付及云原生服务框架、运维自动化等有深刻的理解。

END