ข้ามไปยังเนื้อหา
โปรเจกต์ทั้งหมด

เผยแพร่แล้ว

คอนโซลจัดการระบบลงเวลาด้วยใบหน้า

ฝั่งผู้ดูแลของระบบลงเวลาทำงาน ทั้งทะเบียนพนักงาน การลงทะเบียนใบหน้า การส่งข้อมูลไปยังเครื่องสแกน และการออกรายงาน ส่งมอบเป็นตัวติดตั้ง Windows ที่รันทุกอย่างบนเครื่องของลูกค้าเอง

  • Next.js
  • React
  • TypeScript
  • Ant Design
  • TanStack Query
  • Zustand
  • Electron
  • Express
  • Tailwind CSS

ภาพรวม

ระบบลงเวลาอยู่ในอาคาร เครื่องสแกนติดอยู่บนผนัง ข้อมูลออกนอกองค์กรไม่ได้ และคนที่ดูแลคือเจ้าหน้าที่ฝ่ายบุคคล ไม่ใช่วิศวกร ระบบนี้จึงส่งมอบเป็นซอฟต์แวร์ที่ติดตั้งได้ ไฟล์เดียวที่ตั้งตัวเองเป็น Windows service แล้วเปิดคอนโซลที่แอดเดรสในเครื่อง ทำงานต่อเนื่องโดยไม่ต้องมีใครคอยดู

ตัวคอนโซลดูแลผังแผนกและทะเบียนพนักงาน ลงทะเบียนใบหน้าเป็นชุด กำหนดว่าพนักงานและแผนกใดผูกกับเครื่องไหน เฝ้าดูสถานะเครื่อง กำหนดช่วงเวลาเข้าออกประตูและกะทำงาน และส่งออกรายงานเป็น Excel และ PDF

ส่วนที่ท้าทายในการสร้าง

การส่งมอบ static build ที่ยังตั้งค่าได้ การ export แบบ static จะฝังค่า environment ไว้ตั้งแต่ตอน build ซึ่งผิดทางสำหรับซอฟต์แวร์ที่ติดตั้งในองค์กร เพราะลูกค้าแต่ละรายใช้ API คนละ host และไม่มีใครจะมา build ใหม่ ทางแก้อยู่ทั้งสองฝั่ง ฝั่งแอปอ่านค่าจากตัวแปรกลางที่หน้าเว็บเตรียมไว้ให้ ถ้าไม่มีจึงย้อนไปใช้ค่าตอน build และหาค่า API base ใหม่ทุกครั้งที่ยิงคำขอ แทนที่จะตรึงไว้ตอนสร้างตัวเชื่อมต่อ ส่วนเซิร์ฟเวอร์ที่แถมมากับตัวติดตั้งจะอ่านไฟล์ตั้งค่าจากโฟลเดอร์ข้อมูลผู้ใช้ คัดเฉพาะคีย์ที่เปิดเผยได้ แล้วฉีดสคริปต์เล็ก ๆ เข้าไปในทุก HTML ที่เสิร์ฟ พร้อมปิดแคชสำหรับ HTML เพื่อไม่ให้ค่าที่ฉีดไปค้างของเก่า ผู้ดูแลเปลี่ยน host ได้จากหน้าตั้งค่า โดยไม่ต้อง build ใหม่

แอปเดสก์ท็อปที่มีหน้าที่ติดตั้ง service ตัวติดตั้งคือเปลือกเดสก์ท็อปที่งานจริงคือจัดการวงจรชีวิตของ Windows service ทั้งติดตั้ง เริ่ม หยุด ถอน จำพอร์ตที่เลือกไว้ และรายงานสถานะด้วยการถามตัวจัดการเซอร์วิสโดยตรง นอกจากนี้ยังรันเซิร์ฟเวอร์ตัวเดียวกันในโหมดทดสอบภายในโปรเซสได้ ผู้ดูแลจึงตรวจได้ว่าพอร์ตใช้งานได้ก่อนตัดสินใจติดตั้งจริง

การถามซ้ำที่ปรับตามชนิดข้อมูล ระบบไม่ได้ใช้ socket หน้าจอเฝ้าระวังตั้งรอบรีเฟรชตามความถี่ที่ข้อมูลแต่ละอย่างเปลี่ยนจริง ฟีดการลงเวลาเร็วที่สุด รายการเครื่องและการแจ้งเตือนช้าลงมา ส่วนค่าสถานะระบบช้าสุด แต่ละชั้นจับคู่กับช่วงเวลาที่ถือว่าข้อมูลยังสดสั้นพอที่การกลับมาที่แท็บจะไม่ทำให้ดึงซ้ำ ส่วนการลงทะเบียนใบหน้าตั้งใจให้หนักฝั่งเบราว์เซอร์ รูปจะถูกตรวจ ย่อ และบีบอัดก่อนอัปโหลด เพราะรูปจากมือถือทั้งชุดมีขนาดหลายสิบเมกะไบต์

ขนาด

  • ใช้ API 127 endpoint ผ่าน 21 โมดูลและ 84 hook
  • 17 หน้าจอ · 34 กล่องโต้ตอบ · คำแปลราว 955 รายการต่อภาษา ทั้งไทยและอังกฤษ
  • ส่งมอบเป็นตัวติดตั้ง Windows และแบบพกพา
สถานะ
เผยแพร่แล้ว
เผยแพร่เมื่อ
12 ก.ย. 2026
เทคโนโลยี
Next.js · React · TypeScript · Ant Design · TanStack Query · Zustand · Electron · Express · Tailwind CSS

ดูต่อ

โปรเจกต์อื่น ๆ

โปรเจกต์ทั้งหมด