從零開始 400元DIY 一台具備 Web 管理介面的 NFC 打卡鐘

公司現有的紙卡傳統打卡鐘快要壞掉了,需要一套簡單的上下班打卡設備,但看了一下市面上現在的打卡鐘管理方式、資料格式與功能通常也不容易自行調整。Line目前推很大的打卡考勤也有想過,但會有些員工不太願意分享手機定位權限的問題,因此我決定使用 ESP32的模塊、RC522讀卡模塊 搭配 ESPHome編輯軟體,自己製作一台可以獨立運作的 NFC 打卡鐘。



最初的構想只是「刷卡後記錄時間」,後來發現我一開始想的太簡單了,實際需求還會有員工管理、上下班模式、加班打卡、Excel 匯出、請假登記、離線使用、資料備份及 Web 管理介面,最後完成了一套不依賴雲端伺服器或是 Home Assistant主機 也能獨立使用的出勤系統。

## 為什麼選擇 ESP32-C3 與 RC522?

主控制器使用 ESP32-C3,主要原因是價格低、體積小,而且已經內建 Wi-Fi。打卡資料、員工資料與管理網頁都可以直接保存在ESP32-C3中,不需要另外準備伺服器或是USB隨身碟。

讀卡器則選擇 RC522。主要因為它價格便宜、取得容易,使用 SPI 與 ESP32 連接,適合讀取常見的 13.56 MHz MIFARE 卡片或感應扣。

這套設備主要使用以下零件:(因為在大陸上班所以都在淘寶購買取得)

* ESP32-C3 開發板 `淘寶人民幣16.5含運`
* RC522 感應讀卡器 `淘寶人民幣6.95含運`
* DS3231 備用時鐘模組 `淘寶人民幣14.27含運`
* 3.3V 有源蜂鳴器 `淘寶人民幣4.4含運`
* 四顆打卡模式按鈕 `淘寶人民幣8.8含運`
* Type-C充電線一條,拿來供電 `淘寶人民幣4.6含運`
* 防水盒 `淘寶人民幣6.5含運`
* 杜邦線若干 `淘寶人民幣2.5含運`
* 5V USB 豆腐頭 `抽屜撿的`
* 空白的CUID卡*20張 `淘寶人民幣20含運`
如果家裡有社區門禁或是公司門禁可以先刷刷看,刷RC522能叫三聲的卡也能用,不一定要買很多張新的卡。

#以上總費用約人民幣85元,用4.7匯率換算大概400台幣

ESP32C3跟蜂鳴器、RC522、DS3231模塊、按鈕的連接方式如下圖

從零開始 400元DIY 一台具備 Web 管理介面的 NFC 打卡鐘


一開始我曾考慮加入 LCD 螢幕與有線網路,但考量成本還有 ESP32 的GPIO接腳數量,最後取消螢幕並改用 Wi-Fi連接。

設備狀態直接透過燈號與蜂鳴器提示,詳細資料則在手機或電腦的管理網頁查看。


依照上圖把硬體接好線後尋找合適的外殼裝入,打開電腦透過Web ESPhome刷入下方分享的bin檔案後就可以使用
放在github上分享,請自行下載

產品介紹說明:
## 四種打卡模式

一開始打卡鐘通常只有上班與下班,但是只有普通上下班是不夠的,因為還需要記錄加班,因此這台打卡鐘設計了四顆實體按鈕:

* 上班模式按鈕 (綠色)
* 下班模式按鈕 (紅色)
* 加班上班模式按鈕 (黃色)
* 加班下班模式按鈕 (藍色)

按下其中一顆模式按鈕後,設備會維持在該打卡模式,接下來所有員工刷卡都會依照目前模式保存在 Excel 中。
例如:
我要打上班簽到卡:按一下綠色上班按鈕=>刷卡簽上班卡
我要打加班下班卡:按一下藍色加班下班按鈕=>刷卡簽加班後的下班卡

為了降低員工刷錯模式,在打卡簽到的時候忘記按下正確模式,透過 ESP32C3 內建 RGB LED 來使用不同顏色顯示目前模式,同步對應到按鈕的顏色,進行顏色管理區分打卡模式:

* 綠燈:上班模式
* 紅燈:下班模式
* 黃燈:加班上班模式
* 藍燈:加班下班模式
* 七彩燈:等待登記新卡
* 橘燈閃爍:Wi-Fi 尚未連線

另外系統每天凌晨 00:00 會自動切換為上班模式,下午 14:00 自動切換為下班模式。來提高使用者打卡狀態的正確率,管理員也可以透過 Web 管理介面遠端切換,不一定要走到打卡鐘旁邊按按鈕去切換模式。

## 刷卡成功與失敗提示

員工將已登記的卡片靠近 RC522 後,如果時間與登記的卡號資料都正常,蜂鳴器會叫一聲,代表本次打卡已成功保存。

如果蜂鳴器連續叫三聲,則表示本次操作沒有成功,可能原因包括:

* 這張卡片尚未登記
* 這張卡片已綁定其他員工
* 系統時間尚未準備完成
* 打卡資料寫入失敗
* 登記新卡時發現重複卡號

這樣即使沒有螢幕,員工也能透過聲音立即判斷打卡簽到結果是否成功。

## 第一次開機使用透過設備的 AP 模式進行WIFI配網連接

打卡機設備第一次通電開機後,大概等待1分鐘,會自動出現名為 `NFC-Clock-Fallback` 的熱點 WIFI 。

使用者只要依照下列步驟設定:

1. 將打卡鐘接上 5V USB 電源。
2. 等待約一分鐘,直到橘燈持續閃爍。
3. 使用手機或是帶有無線網卡的電腦、平板等設備,搜尋WIFI連接 `SSID:NFC-Clock-Fallback 密碼:12345678`。
4. 如果手機提示「這個 Wi-Fi 沒有網際網路」,選擇仍要連線或保持連線。
5. 等待配網頁自動彈出。
6. 如果沒有自動出現,使用瀏覽器開啟 `http://192.168.4.1/`。
7. 配網頁面成功打開後選擇公司的 2.4 GHz Wi-Fi,然後往下拉找到密碼輸入欄位,輸入這個WIFI的連線密碼並儲存。
8. 讓手機、電腦或平板重新連回公司 Wi-Fi,再開啟打卡鐘管理網頁。

同一個區域網路內,可以使用固定名稱的網址,不用特地去找IP,用下方的mDNS網址開啟即可:

`http://nfc-attendance-clock.local/attendance/`

預設登入 `帳號admin``密碼為12345678`,密碼可以更改。
如果部分路由器或電腦不支援 mDNS,也可以進公司的路由器管理介面找尋刷卡機取得的 IP 位址登入。
`http://192.168.X.X/attendance/`

如果想要在非公司環境的網路外使用,也就是人不在公司也想要遠端開啟管理頁面,再請自行斟酌聯網後的風險 VS 便利,去路由器中做port轉發或是反向代理 or VPN等等的方式,達到在外網也可以連入去操作。

## 不依賴 Home Assistant 的 Web 管理介面

雖然設備使用 ESPHome 開發寫的程式代碼,網路環境中有 Home Assistant 主機是會主動發現刷卡機設備並接入的,後續如果管理人員要做一些擴充自動化,例如異常時間段打卡就發Line通知,或是如果門禁也有接入 Home Assistant 系統,也可以做到直接當作門禁機開門,但就算使用環境沒有 Home Assistant 主機,日常使用打卡與管理功能並不依賴 Home Assistant 主機,打卡機可以獨立正常使用。

ESP32C3 刷好bin後本身提供完整的 Web 管理介面,管理員可以使用手機、平板或電腦開啟網頁操作:

從零開始 400元DIY 一台具備 Web 管理介面的 NFC 打卡鐘

從零開始 400元DIY 一台具備 Web 管理介面的 NFC 打卡鐘

從零開始 400元DIY 一台具備 Web 管理介面的 NFC 打卡鐘

從零開始 400元DIY 一台具備 Web 管理介面的 NFC 打卡鐘

從零開始 400元DIY 一台具備 Web 管理介面的 NFC 打卡鐘

* 查看設備目前時間
* 查看 Wi-Fi 名稱、網路狀態及 IP 位址
* 遠端切換四種打卡模式
* 新增、修改及刪除員工
* 登記員工感應卡
* 搜尋刷卡紀錄
* 填寫每日請假或出勤備註
* 下載近兩個月的 Excel 彙總表
* 修改管理員密碼
* 手動校正時間
* 匯出及匯入完整備份
* 清除全部刷卡紀錄

目前最多可管理100位員工及256筆每日請假備註登記內容。管理網頁會顯示最近100筆刷卡資料,而設備內保存最近兩個日曆月的完整打卡紀錄。

## Excel 出勤彙總

打卡資料不只可以在網頁查看,也能直接下載成 Excel 檔案。

彙總表會依照以下欄位整理:

* 日期
* 員工編號
* 員工姓名
* 上班時間
* 下班時間
* 加班上班時間
* 加班下班時間
* 每日備註

除了全部員工的總表,每位員工也會建立獨立分頁,分頁名稱使用「工號_姓名」,方便管理員查詢、列印或交給會計進一步整理核算薪資。



## 完成後的心得

從最初只有 ESP32、RC522 和蜂鳴器的小構思,逐步加入 Web 管理、四種打卡模式、DS3231、Excel 匯出、備註、備份與離線使用後,感覺這台設備已經不只是簡單的讀卡器,而是一套可以實際投入日常使用的小型出勤管理系統,蠻適合小型公司員工數低於100人使用的場合,雖然陽春一點只有刷卡登記,但這樣員工的生物特徵以及定位隱私權線也可以保護的比較好,不會有採集指紋、臉部特徵,或是開放手機定位權限的問題產生。

DIY 最大的優點,不只是節省購買商用設備的費用,而是所有功能都能依照自己的需求調整。未來如果需要增加外接燈號、顯示器、MQTT、Home Assistant 自動化或更多統計功能,都可以繼續在現有架構上擴充。

下班後在宿舍一個人的快樂也許就是像這樣,翻翻身邊的電子小零件來做一些生活中用得上的小東西,然後跟大家分享。 :)
2026-08-22 21:31 發佈
打卡支持一下
我的疑問是好奇這樣DIY花多少時間製作? 結果你們公司同意了這樣做法了嗎?
我自身工作員工們是經過公司大門口,就類似像機場那種倒U型狀的金屬安檢門除了辨識身上有無不可帶進出外的東西外同時會經人臉辨識自動刷上下班卡辨識身份(當然有保全在旁邊)就這樣.......
不方便講是哪間公司
stevense
stevense 樓主

1.硬體組裝大概1個半小時吧!軟體的部分則是一直在想辦法擴充新功能,所以陸續加總花了快一整天的時間。2.先有想法後提建議,然後老闆同意。然後文章一開頭就說了!我們目前是還在用傳統機械插紙卡的小公司。

2026-08-23 10:21
內文搜尋
X
評分
評分
複製連結
Mobile01提醒您
您目前瀏覽的是行動版網頁
是否切換到電腦版網頁呢?