最初的構想只是「刷卡後記錄時間」,後來發現我一開始想的太簡單了,實際需求還會有員工管理、上下班模式、加班打卡、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模塊、按鈕的連接方式如下圖

一開始我曾考慮加入 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 管理介面,管理員可以使用手機、平板或電腦開啟網頁操作:





* 查看設備目前時間
* 查看 Wi-Fi 名稱、網路狀態及 IP 位址
* 遠端切換四種打卡模式
* 新增、修改及刪除員工
* 登記員工感應卡
* 搜尋刷卡紀錄
* 填寫每日請假或出勤備註
* 下載近兩個月的 Excel 彙總表
* 修改管理員密碼
* 手動校正時間
* 匯出及匯入完整備份
* 清除全部刷卡紀錄
目前最多可管理100位員工及256筆每日請假備註登記內容。管理網頁會顯示最近100筆刷卡資料,而設備內保存最近兩個日曆月的完整打卡紀錄。
## Excel 出勤彙總
打卡資料不只可以在網頁查看,也能直接下載成 Excel 檔案。
彙總表會依照以下欄位整理:
* 日期
* 員工編號
* 員工姓名
* 上班時間
* 下班時間
* 加班上班時間
* 加班下班時間
* 每日備註
除了全部員工的總表,每位員工也會建立獨立分頁,分頁名稱使用「工號_姓名」,方便管理員查詢、列印或交給會計進一步整理核算薪資。
## 完成後的心得
從最初只有 ESP32、RC522 和蜂鳴器的小構思,逐步加入 Web 管理、四種打卡模式、DS3231、Excel 匯出、備註、備份與離線使用後,感覺這台設備已經不只是簡單的讀卡器,而是一套可以實際投入日常使用的小型出勤管理系統,蠻適合小型公司員工數低於100人使用的場合,雖然陽春一點只有刷卡登記,但這樣員工的生物特徵以及定位隱私權線也可以保護的比較好,不會有採集指紋、臉部特徵,或是開放手機定位權限的問題產生。
DIY 最大的優點,不只是節省購買商用設備的費用,而是所有功能都能依照自己的需求調整。未來如果需要增加外接燈號、顯示器、MQTT、Home Assistant 自動化或更多統計功能,都可以繼續在現有架構上擴充。
下班後在宿舍一個人的快樂也許就是像這樣,翻翻身邊的電子小零件來做一些生活中用得上的小東西,然後跟大家分享。 :)




























































































