NoCode 实战 | 想要开发在线选课系统?何必那样大费周章!
![NoCode 实战 | 想要开发在线选课系统?何必那样大费周章!](https://static001.geekbang.org/infoq/df/df1bfa7c80778d25919d68ad5fbf4c79.jpeg)
作为课余生活丰富多彩的大学生,你也许参加过很多兴趣小组。如果你读到了本文,那么很大概率猜测,你八成也会参加各种计算机兴趣小组。
那么不妨试着和组员们一起,给大家开发个在线订课选课系统吧!不仅可以借此机会锻炼一下软件开发技能,学习新技术,在实践中掌握新技能,还能让更多老师同学从中受益,岂不美哉?
![](https://static001.geekbang.org/infoq/96/963fad6f6b2431cf162dabeed06e89bc.jpeg?x-oss-process=image/resize,p_80/auto-orient,1)
就算你已经进入职场,类似的技术也可以换个角度应用到工作中很多与预订有关的场景中。快来一起来看看吧!
定义数据表
数据表是低代码或零代码的根基,本质上就是通过对数据表的操作来定制化展现数据。首先讲解下本项目中会使用到的数据表。
本例一共涉及七张表,分别如下:
1. ClassTab 表,用来展现本周的全部课程安排
![](https://static001.geekbang.org/infoq/df/df323cc6010ed2dffb0db03e2c2855ad.png)
2. MyClass 表,用来记录学生选择的将要参加的本周课程。表中的“value”列的数据提取自 WeekDays 表中的“value”列,用作工作日排序,后面会用到。
=FINDROW(WeekDays,"WeekDays[工作日]=%",[Weekday])[Value]
![](https://static001.geekbang.org/infoq/7c/7cfdcf021182f9e6ba6870bc06363412.png)
3.ClassList 表,记录着本周所有的课程目录
![](https://static001.geekbang.org/infoq/f6/f63c5229dc9d6748a5efa026d5748fdc.png)
4. ClassLocation 表,这个表中记录着每个课程对应的上课地点
![](https://static001.geekbang.org/infoq/9d/9d91d1ac2993d250e6043f442d8e858b.png)
5. ClassMap 表记录着每个课程对应的教师名称
![](https://static001.geekbang.org/infoq/be/be60251b0c8d7ad16af01d42820d98aa.png)
6. Teachers 表是教师目录表,记录着本周课程对应的所有教师的名称
![](https://static001.geekbang.org/infoq/14/141844a20796d43dbaadd0eb784d2c86.png)
7. WeekDays 表是本周工作日的记录表,表中的 Value 列是编号列,用做排序使用
![](https://static001.geekbang.org/infoq/99/99ba6b2e869fbc992986d2b8fe0dc6e2.png)
上面七张表的对应关系为:
● ClassList 表和 WeekDays 表对应 ClassTab 表的“工作日”列和“课程时段”列的 PickList 引用数据源表
● ClassList 表和 Teachers 表是 ClassMap 表的“Name”和“Teacher”列的 PickList 引用数据源表
● ClassList 表也是 ClassLocation 表的“Class”列的 PickList 引用表
可以看出 ClassList 课程表是大部分其他表的引用数据源,其本质上是通过逻辑对应关系,把 ClassList 中的课程展现出来。这里需要重点理解下。
分析业务逻辑
接下来我们介绍下本例的业务逻辑,业务逻辑决定着底层数据的展现方式。
1. 首页数据展示,数据来自 ClassTab 表,每个工作日的课程按照行的方式进行展现,不同的课程时段作为列来分割。
![](https://static001.geekbang.org/infoq/e0/e0023bd7f3f3a8023b535be17e218c23.png)
2. 每日课程展示,在首页的每个数据行代表一个工作日的课程,点击后展开每日课程详细,在本页中可以通过点击“详细”按钮查看本日每个课程的详细信息(课程名称、课程时间、对应的老师、上课地点),还可以点击“参加”按钮来决定是否参加自己感兴趣的课。
![](https://static001.geekbang.org/infoq/a3/a3a238a6011e35e8d57d9dae05e76887.png)
3.我的课程展示,在我的课程页面中列出了所有订阅过的课程,可以看到这些课程对应的工作日、时间及课程名信息。还可以对其进行取消操作。本页数据来自 MyClass 表,并将依照“工作日”和“时间”列进行排序。
![](https://static001.geekbang.org/infoq/e7/e7a01bb239cbe6a334e40e81275e8f3d.png)
开始构建 App
在介绍了数据表设计和业务逻辑后,我们开始着手对 APP 进行构建。
1. 登录 Honeycode 网站,新建一个 Workbook 并将其命名为 ClassBooking。
![](https://static001.geekbang.org/infoq/c9/c9aeb4e018e1af447c706858aaf50564.png)
2. 创建第一部分介绍的七张数据表,并设置好引用关系。
![](https://static001.geekbang.org/infoq/31/313a8d62e802fa9e2dcaa2b570d8b8d9.png)
3. 在首页中添加 Column List 列表对象,数据源选择“Classtab”数据表。选中添加详细页。
![](https://static001.geekbang.org/infoq/65/658922b9c305782dd932ab2bbed19434.png)
![](https://static001.geekbang.org/infoq/ad/ad8194d7524769c8a458556718c4f5a6.png)
4. 列表属性页面添加条件显示,用来使用蓝绿色来间隔显示每行,同时对边缘进行钝化,增加界面美观度。
其条件表达式为:
=MOD(ROW(THISROW()),2)=0
表达式中使用 ROW 对当前数据行进行标号,然后使用 MOD 来对行号取模判奇偶行并设置对应的颜色。
![](https://static001.geekbang.org/infoq/34/34cbfce9f3990c6b544d48141654838e.png)
![](https://static001.geekbang.org/infoq/d2/d2a32ec119698636eda7a009a5c0cc52.png)
5. 在自动生成行内容详细页中,每行的后面分别添加两个按钮“详细”和“参加”。
![](https://static001.geekbang.org/infoq/af/afbc2216d2598fad5b7bdb8d3295be71.png)
6. 在详细页底部增加一个 Block 和四个 DataCell 用来展示课程详细内容。
![](https://static001.geekbang.org/infoq/94/94703fbe0789702faed1391fc5e21e22.png)
7. 对第 5 步中的“详细”按钮设置可见性。
表达式内容为:
=NOT(ISBLANK($[0800 0950 column data]))
通过判断课程时段列的值是否为空,决定是否显示“详细”按钮。
![](https://static001.geekbang.org/infoq/03/03ba780a7c181d6d88e39a0ee1385e7e.png)
![](https://static001.geekbang.org/infoq/c5/c5b32fb038aabfe95dea46ee926881fe.png)
8. 设置“详细”按钮的 ACTIONS,把数据从 InputRow 中取出并且写入到第 6 步的属性 Block 中。需要注意的是,DataCell 变量 teacher 和 location 的值取自 ClassMap 和 ClassLocation 表,通过 FINDROW 函数进行匹配。
![](https://static001.geekbang.org/infoq/1f/1fd37246f5dfab05c93685c78265c833.png)
9. 设置“参加”按钮的可见性。
表达式为:
=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 表中。条件均满足的情况下才会显示“参加”按钮。
![](https://static001.geekbang.org/infoq/7f/7f0354bbeeb02a4f6fb69ba5d978ead1.png)
![](https://static001.geekbang.org/infoq/3d/3d56a2cb608e21e5430cabe9dadf8bba.png)
10. 设置“参加”按钮的 ACTIONS,把要参加的课程信息写入到我的课程 MyClass 表中。
![](https://static001.geekbang.org/infoq/7f/7f0354bbeeb02a4f6fb69ba5d978ead1.png)
![](https://static001.geekbang.org/infoq/6d/6d20288383c9b672fa59c1032646a393.png)
11. 为每个时间段列重复 7-10 步的设置。
12. 值得注意的是课程详细页的工作日 DataCell 取值的设置。
![](https://static001.geekbang.org/infoq/ad/ad526cd5929d951ee146cd22ad73bacf.png)
![](https://static001.geekbang.org/infoq/61/61c9a882ffc7b713fc15714cc3187e7e.png)
仔细考虑下为什么这么写?
前面我们提到过 WeekDays 表是作为 ClassTab 表中“工作日”列的 PickList 外部数据源表,在详细页面中展示的数据是 ClassTab 表的每行的数据,那么工作日这个 DataCell 所对应的值就是指向 WeekDays 表中一行的 RowLink,所以这么写的意思是从 ClassTab 的“工作日”列指向的 WeekDays 表的行数据中取出“工作日”列的值。
13. 增加一个新的 Screen,用来显示要参加的课程,并且在页面中添加一个 Column List 的对象,并且设置数据源。
![](https://static001.geekbang.org/infoq/fd/fdca19e348354071b34b5211bbfb3dce.png)
![](https://static001.geekbang.org/infoq/0c/0cfaeb93087c0001ab963695a50b05b0.png)
数据源表达式为:
=FILTER(MyClass,"ORDER BY MyClass[value],MyClass[Time]")
注意表达式中的 ORDER BY 的使用,这里我们依据 MyClass 的“value”列和“Time”进行排序。
14. 在上面新创建的 Screen 中的列表行里添加一个“取消”按钮,用来将对应的课程记录从 MyClass 表中删除。设置其 ACTIONS 为删除当前行。
![](https://static001.geekbang.org/infoq/9d/9d6af37a33b13a2e0d417357609f041b.png)
![](https://static001.geekbang.org/infoq/86/86d168eb0ef3e9b5a2f9340815038d53.png)
至此,本 APP 构建全部完成,所有页面的显示效果如下:
![](https://static001.geekbang.org/infoq/e4/e48d24015b4303e39a8d01e426d4161d.png)
![](https://static001.geekbang.org/infoq/02/02572ba7afd900a4427ee18e6da8087a.png)
![](https://static001.geekbang.org/infoq/dc/dc0649a24054d38c2fcd1dff30fe540e.png)
总结
在本例中涉及到了很多 Amazon Honeycode 的核心操作,例如对 PickList 及 RowLink 的使用以及对数据源进行过滤和基于条件的样式设置等,但是没有对课程发布的环节进行设置,大家可以尝试通过判断当前登录用户,为其绑定角色和权限,然后对课程表进行增删改的操作。
相信通过这些动手练习,一定可以对 Honeycode 低代码平台有更深入的了解同时积累相当的动手经验。
如果您想要更深入地学习 Amazon Honeycode 更多内容,我们向您推荐「Amazon Honeycode community」,在这里,您可以与其他 Honeycoders 联系,一起交流、学习新技能!
复制网址(https://honeycodecommunity.aws/)
原文链接:NoCode 实战 | 想要开发在线选课系统?何必那样大费周章!
评论