关于html:NoCode-实战-零代码开发轻松打造会议计划系统

31次阅读

共计 4454 个字符,预计需要花费 12 分钟才能阅读完成。


「关注」并「星标」咱们,
每天接管对于亚马逊云科技的最新资讯!

对于每天无比空虚的职场 “白领骨干精英” 来说,各种会议可能是最麻烦的事。接下来的几天本人须要加入哪些会议?每场会还有其余哪些参与者?打算探讨什么主题?是否有哪位必须参会的人还没确定?……各种琐事无比麻烦!

尽管市面上有很多能够提供相干性能的 日程治理和合作 软件,不过这哪有本人单独开发一套听下来更有格调呢?而且也就当作是学习新技术的练手了。

本文咱们就一起看看,如何用低代码技术,借助 Amazon HoneyCode 开发一个简略实用的会议治理和订阅利用。

哪怕你基本不会写代码,甚至不须要写什么代码,也能疾速轻松地搞定“开发”工作!

需要剖析

对于这样的一个会议订阅公布零碎,咱们心愿实现如下需要:

而对于这个利用,咱们心愿通过如下步骤进行构建:

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

数据逻辑定义

首先须要思考与数据逻辑无关的定义。本利用领有三张数据表,别离为:Users 表、Meetings 表以及 BookedMeetings 表

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

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

Meetings 表 为所有会议的记录表,记录着每条会议记录的具体内容、创建者及创立工夫,如下所示:

其中 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 表为会议注册记录表,表中记录着用户要加入的会议记录,如下所示:

表中 Name 列为注册会议的用户名,Meeting 列示意用户将要加入的会议名称,DateTime 列示意要加入的会议对应的工夫。

业务逻辑定义

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

MeetingList 主屏显示如下:

在主屏中右上角的问候语及以后日期依照以后零碎工夫及日期动态显示。

用户可依据日期来过滤来显示指定日期的会议,如果没有应用日期过滤,那么将显示所有的会议记录,“日期查问”左边的“重置查问”按钮用来革除日期过滤器中的输出。增加会议的按钮只有以后用户的角色是 Admin 的状况下才会显示。

上面的会议列表应用不同的色彩辨别会议是否过期,通过是否显示“加入会议”的按钮辨别此会议是否已注册。判断逻辑为如果列表中的会议工夫为以后日期之前那么将显示为红色背景色反之则为绿色背景色,已过期的会议不显示加入会议的按钮同时显示“已过期”字样。对于曾经注册的会议不再显示加入会议按钮,而是显示“已注册”字样。

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

领有 Admin 角色用户能够公布会议,点击右上部增加会议按钮,会跳转到表单页面,如下:

在副屏 BookedMeetings 中显示曾经注册的会议并可对其做勾销解决,如下:

数据填充

随后开始进行数据填充。

步骤一

首先咱们须要创立新的 Workbook,批改主屏显示并减少一个 Block,随后在其中搁置三个 DataCell,别离命名为:AppUser、Greeting 和 TodaysDate,具体设置如下:

在 AppUser 的 DataCell 的属性初始值做如下设置:

对 Greeting 的 DataCell 的属性初始值做如下设置:

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

步骤二

接着增加第二个 Block,将其 DISPLAY 属性设置为 FALSE,并在其中增加一个 DataCell 设 置变量名为 SelectedRow,此 DataCell 的作用是保留列表以后行的值,然而在 UI 不须要显示该 DataCell。


步骤三

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


为按钮“重置查问”增加 ACTION 批改 Date INPUT 的变量值为空,此按钮的作用是革除用户在日期选择器插件中的输出。

步骤四

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

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

该表达式的作用为:如果 Date INPUT 值为空,则把整个 Meetings 表作为其列表数据源;否则将比对 Data INPUT 的值和 Meetings 表中的 Mdate 的值,将匹配的数据行作为列表数据源。

步骤五

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

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

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

其作用是判断在 BookedMeetings 表中是否曾经有了以后用户对这个会议的注册记录。如果存在则显示:

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

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

其作用是判断以后工夫和 Meetings 表中的 Date And Time column data 字段所代表的日期之间距离的天数,如果后果大于 0 则示意以后的会议记录曾经过期,那么这个 DataCell 的内容将显示:

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

步骤六

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

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

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

作用是用来判断以后会议在 BookedMeetings 表中被注册的数量。

步骤七

增加表单,为领有 Admin 角色的用户提供公布会议的入口,页面会生成一个按钮及一个表单屏,批改按钮显示文字为“增加会议”并将其搁置到主屏“重置查问”按钮的前面,并且设置按钮属性中的可见性表达式为:

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

其作用是匹配以后零碎用户与 Users 表中的用户名并获取其角色,判断是否为 Admin。


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

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

步骤八

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

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

其作用是在 BookedMeetings 表中检索以后用户曾经注册的会议列表并显示。

调整列表中的显示项并增加一个按钮,批改其显示文字为“勾销”:

批改“勾销”按钮属性中的 ACTIONS 增加 automation 点击事件,作用是删除 BookedMeetings 表中以后行记录。

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

视觉布局调整

步骤一

在业务逻辑定义章节中提到了要依据背景色彩来辨别每条会议记录是否曾经过期,上面是具体实现。

在主屏中抉择会议列表中的会议条目所在的 Segment,设置其属性中的 DISPLAY 中的条件款式,依据满足不同表达式的条件显示不同的色彩。



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

步骤二

会议具体内容会响应会议条目标点击事件来显示和收起,在主屏中的会议条目属性的 ACTION 中设置 automation 表达式来为下面数据填充章节中提到的 SelectedRow 这个暗藏的 DataCell 赋值,其作用是让其保留以后行 (THISROW()) 的变量值,会议条目下的具体内容会依据这个变量值是否等于 THISROW()来判断是否显示。


步骤三

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

留神:可见性表达式中会判断 SelectedRow 这个 DataCell 的值判断是否等于 THISROW(),如果满足条件就显示,这样就达到了当点击会议条目时,会议条目具体内容依据其值是否等于 THISROW() 来决定是否显示的成果。

至此,App 设计步骤全副实现,用户应用时只需创立三张数据表并在 Users 表中填充用户及其对应的角色即可。每个团队成员都能够注册本人想要加入的会议以及勾销曾经注册的会议。相干页面展现如下:


本篇内容总结

据下面会议订阅公布零碎的创立流程能够看出,借助于 Amazon Honeycode,用户不须要进行任何编码即可创立本人的客户端程序。

用户侧仅须要思考业务逻辑和数据源即可,高度可定制化的 UI 页面以及丰盛的拖拽插件反对配合事件响应解决,使得用户能够依照本人想要的形式编排和创立本人的客户端程序,更可通过与亚马逊云科技的服务集成打造本人的业务终端。

本文作者介绍

李军强
亚马逊云科技业余服务团队云架构征询参谋
负责企业级客户的云上架构征询,基础架构现代化革新及优化。在基础架构和容器畛域有多年运维治理教训,对 DevOps、继续交付及云原生服务框架、运维自动化等有深刻的了解。

END

正文完
 0