第一部分 上班下班打卡系统 - 图表

GenAI LIVE! | 2025年6月4日

这篇文章是我描述的打卡/下班系统系列文章的一部分，
如果您想了解更多，可以阅读以下文章：

最初于 2018 年 11 月 25 日发布于www.carloscaballero.io 。

• 第 1 部分。打卡上下班系统：图表。
• 第 2 部分。打卡/下班系统：基本后端 - AuthModule。
• 第 3 部分。打卡/下班系统：基本后端 - UsersModule。
• 第 4 部分。打卡/下班系统：基本后端 - AppModule。
• 第五部分 打卡系统：种子数据库和迁移数据
• 第六部分。打卡/下班系统：基本前端。
• 第七部分 打卡系统：使用docker/docker-compose部署后端（nestJS）。
• 第 8 部分。打卡系统：使用环境部署前端（Angular 2+）。
• 第 9 部分 测试：后端测试 - 单元测试 - 服务
• 第 10 部分 测试：后端测试 - 单元测试 - 控制器
• 第 11 部分 测试：后端测试 - E2E 测试
• 第十二部分 测试：前端测试 - 单元测试
• 第十三部分 测试：前端测试 - 集成测试

在本系列关于打卡系统的首篇文章中，我将描述该系统的架构。描述
我们系统要解决的问题的最佳方式是使用图表。在这张图中，您可以看到
不同的组件，它们可以位于不同的服务器中，也可以位于同一服务器中。图
1 展示了用于构建打卡系统的图表。

图 1. 上下班打卡系统：示意图

因此，我们的系统组件如下：

• ID卡：所有用户都有一张使用UID识别的卡。工作方式是用户将卡靠近带有NFC读卡器的Arduino系统。
• Arduino：系统中有两个Arduino。第一个用于打卡，第二个用于打卡。因此，每个 Arduino 都使用POST动词通过HTTPS将 UID 卡发送到后端。Arduino 系统包含一个 NFC 芯片和一个 WiFi 芯片：1) 第一个用于读取卡片；2) 第二个用于连接到局域网，将 UID 发送到服务器。
• 后端：后端使用NestJS开发，它是一个基于express 的框架（尽管您可以使用其他库，例如fastify ），它可以使用SOLID原则和Angular语法开发软件。该后端将使用TypeORM作为ORM连接到关系数据库Postgres。
• 前端：前端使用Angular开发，它是一个基于 JavaScript 的框架，当您想要扩展大型 Web 应用程序（客户端）时，它是一个不错的选择。在本例中，用于说明如何使用最新版本的 Angular 和最佳实践。前端使用RxJS开发，RxJS 是一个使用Observables进行响应式编程的库，可以更轻松地编写异步或基于回调的代码。前端和后端之间的连接可以使用套接字来获取实时数据，但使用轮询可以获得套接字形式的结果（接近实时），但更简单。

未来可以开发几个组件，例如
管理面板，用于管理用户和卡片信息、
系统中签到/签退的个人信息，以及前端可以搜索
用户是否在楼内。也许未来
可以开发这些功能，但今天我们将介绍一个基本的
签到/签退系统。

GitHub 项目是https://github.com/Caballerog/clock-in-out

最初于 2018 年 11 月 25 日发布于www.carloscaballero.io 。