NoCode 实战 | 想要开发在线选课系统?何须那样大费周章!

2021年09月15日 阅读数:4
这篇文章主要向大家介绍NoCode 实战 | 想要开发在线选课系统?何须那样大费周章!,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

做为课余生活丰富多彩的大学生,你也许参加过不少兴趣小组。若是你读到了本文,那么很大几率猜想,你八成也会参加各类计算机兴趣小组。架构

那么不妨试着和组员们一块儿,给你们开发个在线订课选课系统吧!不只能够借此机会锻炼一下软件开发技能,学习新技术,在实践中掌握新技能,还能让更多老师同窗从中受益,岂不美哉?框架

image.png

就算你已经进入职场,相似的技术也能够换个角度应用到工做中不少与预订有关的场景中。快来一块儿来看看吧!运维

01.定义数据表

数据表是低代码或零代码的根基,本质上就是经过对数据表的操做来定制化展示数据。首先讲解下本项目中会使用到的数据表。函数

本例一共涉及七张表,分别以下:学习

  1. ClassTab 表,用来展示本周的所有课程安排

image.png

  1. MyClass表,用来记录学生选择的将要参加的本周课程。表中的“value”列的数据提取自WeekDays表中的“value”列,用做工做日排序,后面会用到。

=FINDROW(WeekDays,"WeekDays[工做日]=%",[Weekday])[Value]优化

image.png

  1. ClassList表,记录着本周全部的课程目录

image.png

  1. ClassLocation表,这个表中记录着每一个课程对应的上课地点

image.png

  1. ClassMap表记录着每一个课程对应的教师名称

image.png

  1. Teachers表是教师目录表,记录着本周课程对应的全部教师的名称

image.png

  1. WeekDays表是本周工做日的记录表,表中的Value列是编号列,用作排序使用

image.png

上面七张表的对应关系为:网站

● ClassList表和WeekDays表对应ClassTab表的“工做日”列和“课程时段”列的PickList引用数据源表url

● ClassList表和Teachers表是ClassMap表的“Name”和“Teacher”列的PickList引用数据源表spa

● ClassList表也是ClassLocation表的“Class”列的PickList引用表

能够看出 ClassList 课程表是大部分其余表的引用数据源,其本质上是经过逻辑对应关系,把 ClassList 中的课程展示出来。这里须要重点理解下。

02.分析业务逻辑

接下来咱们介绍下本例的业务逻辑,业务逻辑决定着底层数据的展示方式。

  1. 首页数据展现,数据来自ClassTab表,每一个工做日的课程按照行的方式进行展示,不一样的课程时段做为列来分割。

image.png

  1. 每日课程展现,在首页的每一个数据行表明一个工做日的课程,点击后展开每日课程详细,在本页中能够经过点击“详细”按钮查看本日每一个课程的详细信息(课程名称、课程时间、对应的老师、上课地点),还能够点击“参加”按钮来决定是否参加本身感兴趣的课。

image.png

  1. 个人课程展现,在个人课程页面中列出了全部订阅过的课程,能够看到这些课程对应的工做日、时间及课程名信息。还能够对其进行取消操做。本页数据来自 MyClass 表,并将依照“工做日”和“时间”列进行排序。

image.png

03.开始构建App

在介绍了数据表设计和业务逻辑后,咱们开始着手对 APP 进行构建。

  1. 登陆 Honeycode 网站,新建一个Workbook并将其命名为ClassBooking。

image.png

  1. 建立第一部分介绍的七张数据表,并设置好引用关系。

image.png

  1. 在首页中添加Column List列表对象,数据源选择“Classtab”数据表。选中添加详细页。

image.png

  1. 列表属性页面添加条件显示,用来使用蓝绿色来间隔显示每行,同时对边缘进行钝化,增长界面美观度。

其条件表达式为:

=MOD(ROW(THISROW()),2)=0

表达式中使用ROW对当前数据行进行标号,而后使用 MOD 来对行号取模判奇偶行并设置对应的颜色。

image.png
image.png

  1. 在自动生成行内容详细页中,每行的后面分别添加两个按钮“详细”和“参加”。

image.png

  1. 在详细页底部增长一个 Block 和四个 DataCell 用来展现课程详细内容。

image.png

  1. 对第5步中的“详细”按钮设置可见性。

表达式内容为:

=NOT(ISBLANK($[0800 0950 column data]))

经过判断课程时段列的值是否为空,决定是否显示“详细”按钮。

image.png
image.png

  1. 设置“详细”按钮的ACTIONS,把数据从InputRow中取出而且写入到第6步的属性Block中。须要注意的是,DataCell变量teacher和location的值取自ClassMap和ClassLocation表,经过FINDROW函数进行匹配。

image.png

  1. 设置“参加”按钮的可见性。

表达式为:

=AND(NOT(ISBLANK($[0800 0950 column data])),ROWS(FILTER(MyClass,"MyClass[Time]=% AND MyClass[Class]=% AND MyClass[Weekday]=%",$[0800 0950 column header],$[0800 0950 column data],$[Weekday column data]))=0)

经过 AND 函数来链接两个条件语句,第一个是判断对应的课程时段值是否为空,第二个是判断这个时段的课程是否已经存在于个人课程 MyClass 表中。条件均知足的状况下才会显示“参加”按钮。

image.png
image.png

  1. 设置“参加”按钮的 ACTIONS,把要参加的课程信息写入到个人课程 MyClass 表中。

image.png
image.png

  1. 为每一个时间段列重复7-10步的设置。
  2. 值得注意的是课程详细页的工做日DataCell取值的设置。

image.png
image.png

仔细考虑下为何这么写?

前面咱们提到过 WeekDays 表是做为 ClassTab 表中“工做日”列的 PickList 外部数据源表,在详细页面中展现的数据是 ClassTab 表的每行的数据,那么工做日这个DataCell所对应的值就是指向WeekDays表中一行的RowLink,因此这么写的意思是从ClassTab的“工做日”列指向的WeekDays表的行数据中取出“工做日”列的值。

  1. 增长一个新的Screen,用来显示要参加的课程,而且在页面中添加一个Column List的对象,而且设置数据源。

image.png
image.png

数据源表达式为:

=FILTER(MyClass,"ORDER BY MyClass[value],MyClass[Time]")

注意表达式中的ORDER BY的使用,这里咱们依据MyClass的“value”列和“Time”进行排序。

  1. 在上面新建立的 Screen 中的列表行里添加一个“取消”按钮,用来将对应的课程记录从MyClass表中删除。设置其 ACTIONS 为删除当前行。

image.png
image.png

至此,本 APP 构建所有完成,全部页面的显示效果以下:

image.png
image.png
image.png

04.总结

在本例中涉及到了不少 Amazon Honeycode 的核心操做,例如对 PickList 及 RowLink 的使用以及对数据源进行过滤和基于条件的样式设置等,可是没有对课程发布的环节进行设置,你们能够尝试经过判断当前登陆用户,为其绑定角色和权限,而后对课程表进行增删改的操做。

相信经过这些动手练习,必定能够对 Honeycode 低代码平台有更深刻的了解同时积累至关的动手经验。

image.png

若是您想要更深刻地学习 Amazon Honeycode 更多内容,咱们向您推荐「Amazon Honeycode community」,在这里,您能够与其余 Honeycoders 联系,一块儿交流、学习新技能!

复制网址(https://honeycodecommunity.aws/)或扫描下方二维码便可访问哦~

image.png

本文做者介绍

image.png

李军强
亚马逊云科技专业服务团队
云架构咨询顾问

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

END