Xây dựng ứng dụng chấm công Xây dựng ứng dụng chấm công Xây dựng ứng dụng chấm công Xây dựng ứng dụng chấm công Xây dựng ứng dụng chấm công Xây dựng ứng dụng chấm công Xây dựng ứng dụng chấm công Xây dựng ứng dụng chấm công
TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Trong thời đại công nghệ hiện nay, việc nhân viên phải đến trực tiếp bộ phận nhân sự để chấm công hoặc sử dụng máy chấm công truyền thống gây ra sự lãng phí thời gian, đặc biệt là đối với các công ty có số lượng lớn nhân viên hoặc nhân viên làm việc tại nhiều địa điểm khác nhau Điều này không chỉ làm cho quy trình chấm công trở nên khó khăn mà còn ảnh hưởng đến độ chính xác Do đó, việc triển khai một hệ thống chấm công trên thiết bị di động với tính năng nhận diện khuôn mặt và cho phép quản lý theo dõi qua web là một giải pháp cần thiết và quan trọng trong quản lý nhân sự hiện đại.
Các công ty có thể cài đặt ứng dụng chấm công trên máy tính bảng hoặc điện thoại cá nhân của nhân viên, đặc biệt là những người làm việc ở các địa điểm khác nhau Điều này giúp quản lý theo dõi chính xác sự hiện diện của nhân viên thông qua nhận diện khuôn mặt và định vị tọa độ so với văn phòng.
Nhân viên chỉ cần cài đặt ứng dụng trên thiết bị của mình và có thể sử dụng ở bất kỳ đâu, giúp theo dõi lịch sử chấm công một cách dễ dàng Điều này không chỉ nâng cao độ chính xác trong quản lý thời gian làm việc mà còn tăng cường sự tin tưởng giữa người quản lý và nhân viên.
Đề tài này được thực hiện nhằm giúp các công ty giảm thiểu thời gian chấm công, đồng thời tăng cường độ chính xác và sự thuận tiện trong việc chấm công tại những địa điểm xa.
MỤC TIÊU CỦA ĐỀ TÀI
Xây dựng service nhận diện khuôn mặt
Xây dựng chức năng định vị tọa độ và tính toán khoảng cách
Cho phép quản lý có thể theo dõi tình hình chấm công
Triển khai ứng dụng theo mô hình Microservice với nền tảng Docker và Kong API Gateway
Cân bằng tải với Nginx, PM2, Kong API Gateway
Triển khai ứng dụng mobile lên Google Play.
PHƯƠNG PHÁP NGHIÊN CỨU
Phương pháp tổng hợp lý thuyết: Nghiên cứu và tìm hiểu các tài liệu, ứng dụng liên quan đến các công nghệ đang tìm hiểu
Phương pháp chuyên gia là việc tham khảo ý kiến từ Thầy hướng dẫn và những người có kinh nghiệm, như anh, chị, và bạn bè, để đảm bảo tính chính xác và khoa học cho đề tài tiểu luận.
Phương pháp mô hình hóa: Mô phỏng ứng dụng từ bước thiết kế cài đặt cho đến kết quả thành phẩm của ứng dụng.
PHÂN TÍCH CÁC CÔNG TRÌNH CÓ LIÊN QUAN
Hầu hết các ứng dụng chấm công hiện nay chủ yếu tập trung vào thiết bị điện tử cố định, nơi mà nhân viên phải đến lần lượt để thực hiện việc chấm công.
Các thiết bị chấm công hiện nay cung cấp các gói SDK và API để người dùng có thể tương tác và lấy dữ liệu, tuy nhiên, tính năng này vẫn còn thô sơ và khó sử dụng.
Việc nhân viên thường xuyên làm việc ở nhiều vị trí khác nhau gây khó khăn trong quá trình chấm công, dẫn đến việc xác thực địa điểm và thời gian trở nên phức tạp và không đáng tin cậy.
KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC
Xây dựng được Web quản lý và theo dõi nhật ký chấm công
Xây dựng được ứng dụng Mobile để nhân viên thực hiện chấm công ở bất cứ đâu, bất cứ thời điểm nào
Xây dựng giao diện đơn giản, dễ sử dụng
Triển khai thành công ứng dụng theo hướng Microservice, tích hợp Docker lên server Ubuntu
Triển khai ứng dụng Mobile trên CH Play
KHẢO SÁT HIỆN TRẠNG
Khảo sát hiện trạng
1 Tanca (https://tanca.io/) a Chức năng
- Phân chia ca làm việc rõ ràng về thời gian, vị trí
- Phân chia quyền quản lý và nhân viên hợp lý
- Có các tính năng như xin nghỉ, xem ai đang trong ca giúp người dùng quản lý rõ kỹ hơn
- Ràng buộc chấm công thông qua wifi
- Ràng buộc chấm công khoanh vùng bán kính quanh 1 khu vực
- Xử dụng API google map giúp tìm kiếm thuận tiện, chi tiết hơn
- Danh sách vị trí các chi nhánh, trụ sở, giúp việc chấm công rõ ràng hơn
- Các điều kiện kiểm tra còn hạn chế b Giao diện
- Giao diện chính vẫn còn đơn giản
2 XwokerBee (https://xworkerbee.vn/) a Chức năng
- Đơn giản dễ sử dụng
- Chuyên biệt chỉ dùng để chấm công cho nhân viên
- Sử dụng định vị GPS để kiểm tra vị trí
- Sử dụng hình ảnh khuôn mặt để kiểm tra
- Chỉ dùng hình ảnh chứ không nhận diện khuôn mặt
- Không khoanh vùng bán kính quanh khu vực hợp lệ
- Chỉ có trên Android b Giao diện
- Đơn giản dễ sử dụng
3 Mobiwork DMS (https://mobiwork.vn/) a Chức năng
- Điều kiện kiêm tra dựa trên GPS
- Hỗ trợ xem báo cáo hàng tháng
- Rõ ràng thời gian bắt đầu, kết thúc
- Điều kiện kiểm tra đơn giản
- Thời gian tan ca chưa rõ ràng
- Chưa có khoanh cùng check-in b Giao diện
4 PtrackerERP (https://www.youtube.com/watch?vN06UbvwA) a Chức năng
- Có danh sách các ca làm việc của nhân viên
- Có danh sách hệ thống đại lý, chi nhánh
- Kiểm tra dựa trên hình ảnh ở nơi làm việc
- Kiểm tra vị trí thông qua GPS
- Chưa có chức năng nhận diện khuôn mặt
- Không có khoanh vùng hợp lệ
- Chỉ có trên android b Giao diện
5 Time Punch Hanbiro (https://appadvice.com/app/hanbiro-time-punch/687208432) a Chức năng
- Phân quyền giữa quản lý và nhân viên
- Có danh sách vị trí hợp lý
- Tích hợp API Google Map, giúp tìm kiếm vị trí dễ dàng
- Ca làm việc được phân chia tự động
- Điều kiện kiểm tra đơn giản
- Chỉ có trên IOS b Giao diện
Đánh giá chung
- Hầu hết các ứng dụng có giao diện khá đơn giản
- Phần lớn các ứng dụng chưa ứng dụng công nghệ nhận diện khuôn mặt
- Các điều kiện đi kèm khi check-in còn khá đơn giản
- Tích hợp định vị GPS để xác nhận vị trí rất hợp lý
Rút ra chức năng chính cho nhóm
- Nhận diện khuôn mặt khi check in bằng camera
- Xác định tọa độ dựa trên GPS
- Có thể kết hợp IP wifi của nơi làm để kiểm tra
- Theo dõi tình hình chấm công đối với người quản lý
- Định vị lại tọa độ văn phòng bằng điện thoại
TIẾP NHẬN YÊU CẦU
Use case diagram
Chi tiết các actor
Quy định Biểu mẫu Ghi chú
2 Quản lý thông tin cá nhân
BM_ThongTi nCaNhan_Vie w BM_ThongTi nCaNhan_Up date BM_ThongTi nCaNhan_Co nfirm
3 Xem nhật ký chấm công cá nhân
BM_ChamCo ng_Send BM_ChamCo ng_Wait
BM_ChamCo ng_View Bảng 2 1
STT Mã QĐ Tên QĐ Mô tả Ghi chú
Để đăng nhập vào hệ thống, nhân viên cần nhập thông tin tài khoản được cung cấp Tên đăng nhập chỉ chấp nhận ký tự thường và số, trong khi mật khẩu cũng chỉ cho phép ký tự thường và số Lưu ý rằng các trường thông tin không được để trống.
Xem nhật kí Không có
4 QD_ChamCong Chấm công Phải kết nối internet và bật định vị
STT Tên nghiệp vụ Loại nghiệp vụ
2 Quản lí thông tin cá nhân
3 Xem lịch sử chấm công
5 Định vị tọa độ Truy xuất, lưu trữ
6 Đăng xuất Không phân loại
7 Thêm nhân vien Lưu trữ QD_ThemNh anVien
8 Sữa nhân viên Truy xuất
9 Xóa nhân viên Tra cứu,
BM_Da nhSach NhanVi en
11 Xem toàn bộ lịch sử chấm công
Truy xuất Không có qui định
BM_Xe mLichS uCham Cong
Lưu trữ QD_ThemNg uoiDung
13 Sửa người dùng Truy xuất
14 Xóa người dùng Tra cứu,
Lưu trữ QD_ThemYe uCauNghi
18 Chấp thuận/ từ chối yêu cầu
19 Sửa ngày nghĩ Truy xuất
STT Mã QĐ Tên QĐ Mô tả Ghi chú
5 QD_DinhViTo aDo Định vị tọa độ
Phải kết nối internet và bật định vị
Không được bỏ trống Full name: chỉ nhập kí tự thường Phone: đúng Regex số điện thoại Email: đúng Regex email Address: chỉ nhập kí tự thường
Không được bỏ trống Full name: chỉ nhập kí tự thường Phone: đúng Regex số điện thoại
Email: đúng Regex email Address: chỉ nhập kí tự thường
Phải thay đổi trạng thái kích hoạt của nhân viên trước khi xóa
Nhân viên phải có đầy đủ thông tin
Vui lòng không để trống các trường thông tin Họ và tên chỉ được nhập bằng ký tự thường Số điện thoại phải tuân thủ đúng định dạng Regex Địa chỉ cũng chỉ được nhập bằng ký tự thường Email cần phải đúng theo định dạng Regex Mật khẩu và xác nhận mật khẩu phải giống nhau.
Vui lòng không để trống các trường thông tin Họ và tên chỉ được nhập bằng ký tự thường Số điện thoại cần tuân thủ định dạng Regex chính xác Địa chỉ cũng chỉ được nhập bằng ký tự thường Mật khẩu và xác nhận mật khẩu phải trùng khớp với nhau.
Số ngày nghĩ tích lũy lớn hơn hoặc bằng số ngày nghỉ yêu cầu Bảng 2 4
1 QD_DangNhap Danh sách biểu mẫu nhân viên
2 QD_QuanLiThongTin Danh sách biểu mẫu nhân viên
3 QD_XemNhatKi Danh sách biểu mẫu nhân viên
4 QD_ChamCong Danh sách biểu mẫu nhân viên
Quy định Biểu mẫu Ghi
STT Mã QĐ Tên QĐ Mô tả Ghi chú
1 QD_DangNha p Đăng nhập Tương tự
Người dùng nhập mã kích hoạt được cung cấp Bảng 2 7
1 QD_DangNhap Danh sách biểu mẫu nhân viên
MÔ HÌNH HÓA YÊU CẦU
Xét nghiệp vụ: Kích hoạt ứng dụng
1.1 Sơ đồ luồng dữ liệu
D3: Danh sách nhân viên từ bảng employee
D6: Kết quả kích hoạt → Màn hình chính
B4: Kiểm tra mã kích hoạt đã được kích hoạt chưa:
- Không: Thực hiện tạo thiết bị mới trong bảng device
B5: Thông báo kích hoạt tài khoản thành công qua D6 B6: Đóng kết nối CSDL
Xét nghiệp vụ: Thêm nhân viên
2.1 Sơ đồ luồng dữ liệu
D1: Thông tin cá nhân của nhân viên (tên, địa chỉ, email, số điện thoại, bộ phận làm việc)
D3: Danh sách người dùng từ bảng employee, danh sách bộ phận từ bảng department
D6: Kết quả tạo nhân viên → Màn hình quản lý nhân viên
B4: Kiểm tra xem email trùng Đúng: Thông báo nhân viên đã tồn tại
Sai: Tiến hành thêm nhân viên vào bảng employee, thêm dataset cho nhân viên vào bảng dataset
B6: Chuyển sang giao diện chính
Xét nghiệp vụ: Kích hoạt nhân viên
3.1 Sơ đồ luồng dữ liệu
D3: Danh sách người dùng từ bảng employee
D6: Kết quả kích hoạt nhân viên → Màn hình quản lý nhân viên
B4: Kiểm tra nhân viên theo id nhận từ D1 đã cập nhật hình đại diện chưa ?
Có : Mã hóa hình đại diện và tạo mới datatraining để lưu chuỗi mã hóa nhận được
Không: Thông báo nhân kích hoạt lỗi, sang B7
B5: Thêm datatraining vào dataset của nhân viên, thay đổi trạng thái kích hoạt của nhân viên thành true
B6: Thông báo kích hoạt nhân viên thành công → Màn hình quản lý nhân viên
Xét nghiệp vụ : Đăng xuất
4.1 Sơ đồ luồng dữ liệu
D1: Tài khoản đã đăng nhập
D6: Thông báo đăng xuất thành công
B2: Thông báo đăng xuất thành công
Xét nghiệp vụ : Đăng nhập
5.1 Sơ đồ luồng dữ liệu
D1: Thông tin : Tài khoản, mật khẩu D2: Không có
D3: Lấy thông tin từ bảng user
D6: Hiển thị màn hình chính
B2: Mở kết nối cơ sở dữ liệu
B3: Nhận D3 từ cơ sở dữ liệu
B4: Kiểm tra tài khoản hợp lệ:
+ Có: thông báo thành công, qua B5 + Không: thống báo thất bại, quay lại B1 B5: Hiển thị màn hình chính
6 Xét nghiệp vụ : Định vị tọa độ
6.1 Sơ đồ luồng dữ liệu
D1: Bán kính từ người dùng
D2: Kinh độ, vĩ độ từ điện thoại
D6: Thông báo thành công, chuyển về giao diện định vị tọa độ
B1: Nhận D1 từ người dùng, D2 từ hệ thống định vị của điện thoại B2: Tạo kết nối CSDL
B3: Cập nhật kinh độ, vĩ độ và bán kính nhận được từ D1 và D2 và bảng location
B5: Chuyển về giao diện định vị tọa độ
Xét nghiệp vụ: Xem toàn bộ nhật ký chấm công
7.1 Sơ đồ luồng dữ liệu
D3: Thông tin về toàn bộ nhật ký chấm công được hợp lại từ bảng employee, timetracking, device, location
D6: Hiển thị danh sách nhật ký chấm công ra màn hình xem nhật ký chấm công
B1: Mở kết nối cơ sở dữ liệu
B2: Lấy toàn bộ dữ liệu từ D3
B3: Hiển thị D3 lên màn hình
8 Xét nghiệp vụ: Xem nhật ký chấm công cá nhân
8.1 Sơ đồ luồng dữ liệu
D2: Lấy employeeId từ điện thoại nhân viên
D3: Thông tin về toàn bộ nhật ký chấm công được hợp lại từ bảng employee, timetracking, device, location theo employee có từ D2
D6: Hiển thị danh sách nhật ký chấm công ra màn hình xem nhật ký chấm công
B1: Mở kết nối cơ sở dữ liệu
B2: Lấy toàn bộ dữ liệu từ D3
B3: Hiển thị D3 lên màn hình
Xét nghiệp vụ : Chấm công
9.1 Sơ đồ luồng dữ liệu
D1: Mã nhân viên được nhập để chấm công, hình ảnh chụp
D2: Mã thiết bị chấm công lưu trong điện thoại, tọa độ từ điện thoại
D3: Thông tin tương ứng với mã nhân viên ở D1
D6: Thông báo -> Quay lại giao diện chấm công
B1: Nhận thông tin từ D1, hình từ D2
B4: Thực hiện nhận diện khuôn mặt từ hình nhận từ D2
B5: Thực hiện tính khoảng từ tọa độ nhận được ở D2 và tọa độ trong bảng location
B6: So sánh tỉ lệ chính xác nhận diện khuôn mặt và khoảng cách từ tọa độ đo được với giá trị trong bảng config
B8: Thông báo kết quả chấm công ra màn hình kết quả chấm công
Xét nghiệp vụ : Thêm người dùng
10.1 Sơ đồ luồng dữ liệu
D1: Thông tin cá nhân của người dùng (tên, địa chỉ, email, số điện thoại, role, tên tài khoản, password, )
D3: Danh sách người dùng từ bảng user, D4: D1
D6: kết quả tạo người dùng→ Màn hình quản lý người dùng
B5: Kiểm tra xem username trùng Đúng: Thông báo nhân viên đã tồn tại
Sai: Tiến hành thêm nhân viên vào bảng user, B5:Thông báo thành công B6: Chuyển sang giao diện chính
Xét nghiệp vụ : Thêm yêu cầu nghỉ
11.1 Sơ đồ luồng dữ liệu
D1: Thông tin chi tiết của yêu cầu (Tên nhân viên, mã code, thời gian bắt đầu, thời gian kết thúc, kiểu, note )
D3: Danh sách yêu cầu từ bảng request,
D6: kết quả tạo yêu cầu nghỉ→ Màn hình quản lý yêu cầu
Để đảm bảo yêu cầu nghỉ được chấp nhận, cần kiểm tra số ngày nghỉ tích lũy có lớn hơn hoặc bằng số ngày nghỉ yêu cầu hay không Nếu số ngày nghỉ không đủ, hệ thống sẽ thông báo rằng không đủ số ngày nghỉ Ngược lại, nếu đủ, yêu cầu sẽ được thêm vào bảng request và thông báo thành công.
B6: Chuyển sang giao diện chính
THIẾT KẾ CƠ SỞ DỮ LIỆU
Sơ đồ logic
THIẾT KẾ GIAO DIỆN
Giao diện kích hoạt tài khoản
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
1 txtCode Textbox Thư viện Flutter
2 btnActive Button Thư viện Flutter
Bảng 5 1 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Cung cấp mã kích hoạt Nhân viên nhập mã kích hoạt
2 Kích hoạt tài khoản Nhân viên click btnActive Bảng 5 2
Giao diện chức năng của nhân viên
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
1 btnDashboard Button Thư viện Flutter
2 btnChecking Button Thư viện Flutter
3 btnRequest Button Thư viện Flutter
4 btnProfile Button Thư viện Flutter
5 btnLogout Button Thư viện Flutter
Bảng 5 3 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện
1 Truy cập vào chức năng
Nhân viện chọn chức năng Dashboard
2 Truy cập vào chức năng
Nhân viện chọn chức năng Checking
3 Truy cập vào chức năng
Nhân viện chọn chức năng Checking Log
4 Truy cập vào chức năng
Nhân viện chọn chức năng Request
5 Truy cập vào chức năng
Nhân viện chọn chức năng Profile
6 Đăng xuất Nhân viện chọn chức năng Logout
Giao diện chấm công
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
1 btnNavbar Button Thư viện Flutter
2 btnCapture Button Thư viện Flutter
3 txtCode Textbox Thư viện Flutter
4 btnAccept Button Thư viện Flutter
Bảng 5 5 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Mở thanh công cụ Nhân viên chọn mở thanh công cụ
2 Chụp hình Nhân viên chọn chụp hình
3 Cung cấp mã nhân viên Nhân viên nhập mã nhân viên
4 Chấp nhận gửi ảnh Nhân viên chấp nhận ảnh làm ảnh chấm công Bảng 5 6
Giao diện nhật ký chấm công cá nhân
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
1 btnNavbar Button Thư viện Flutter
2 btnChecking Button Thư viện Flutter
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Mở thanh công cụ Nhân viên chọn mở thanh công cụ
2 Mở chúc năng Checking Nhân viên chọn mở chức năng Checking Bảng 5 8
Giao diện đăng nhập (Quản lí)
STT Tên đối tượng Kiểu Ghi chú
1 txtUsername Textbox Thư viện Flutter
2 txtPassword Textbox Thư viện Flutter
3 txtShowPassword Textbox Thư viện Flutter
4 btnLogin Button Thư viện Flutter
5 btnBack Button Thư viện Flutter
Bảng 5 9 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Cung cấp username Nhân viên chung cấp username
2 Cung cấp password Nhân viên cung cấp password
3 Hiển thị mật khẩu Nhân viên chọn button hiển thị mât khẩu
4 Đăng nhập Nhân viên chọn button đăng nhập
5 Trở lại trang chủ Nhân viên chọn button quay lại trang chủ
Giao diện định vị tọa độ
STT Tên đối tượng Kiểu Ghi chú
1 sliderRatio Slider Thư viện Flutter
2 sliderRadius Slider Thư viện Flutter
3 lbLongitude Textbox Thư viện Flutter
4 lbLatitude Button Thư viện Flutter
5 lbAddress Button Thư viện Flutter
6 lbLocation Label Thư viện Flutter
7 btnCancel Label Thư viện Flutter
8 btnGetLocation Button Thư viện Flutter
9 btnUpdate Button Thư viện Flutter
Bảng 5 11 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Thay đổi độ chính xác Nhân viên thay đổi độ chính xác
2 Thay đổi bán kính Nhân viên thay đổi bán kính
6 Hiển thị tên văn phòng Nhân viên chọn button đăng nhập
7 Hủy cập nhật cài đặt Nhân viên chọn button hủy
8 Lấy tọa độ hiện tại Nhân viên chọn button lấy tọa độ
9 Cập nhật cài đặt Nhân viên chọn button cập nhật Bảng 5 12
Giao diện quản lý Request
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
1 lbRequestInfo Button Thư viện Flutter
2 btnView Button Thư viện Flutter
3 btnDelete Button Thư viện Flutter
4 btnUpdate Button Thư viện Flutter
Bảng 5 13 c Danh sách sử lý
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Hiển thị thông tin Request
2 Xem dayoff của request Nhân viên chọn button view
3 Xóa request Nhân viên chọn button xóa
4 Cập nhật request Nhân viên chọn button update Bảng 5 14
Giao diện Login (Web App)
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
1 txtUserName Text Field Material-UI
2 txtPassWord Text Field Material-UI
Bảng 5 15 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện Ghi chú
1 Đăng nhập Người dùng chọn click btnLogin
Chuyển sang giao diện chính
Giao diện Quản lý nhân viên (Web App)
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
Bảng 5 17 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện
1 Hiển thị giao diện quản lí nhân viên
Chuyển sang giao diện quản lí nhân viên
2 Thêm nhân viên Người dùng chọn btnAdd
Chuyển sang giao diện thêm nhân viên
3 Tùy chỉnh thông tin nhân viên
Chuyển sang giao diện quản lí thông tin nhân viên
4 Xóa thông tin nhân viên
Cập nhật lại danh sách nhân viên
6 Xem kịch sử công của nhân viên
Hiển thị modal cho người dùng lọc
Giao diện Theo dõi chấm công
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
STT Tên xử lý Điều kiện gọi thực hiện
1 Hiển thị giao diện quản lí lịch sử
Chuyển sang giao diện quản lịch sử
2 Xem kết quả chấm công
Người dùng nhấn vào btnViewDetail
Hiển thị modal kết quả chấm công tương ứng
Người dùng chọn next, previous, nhập
Dữ liệu trong tbTimeTrack sẽ
5 btnSave Button Material-UI btnCancel button Material-UI
65 số trang phù hợp ở combonavigate thay đổi tương ứng với trang
4 Cập nhật kết quả chấm công
Người dùng click đôi vào status result
Cập nhật kết quả chấm công mong muốn
Giao diện quản lý người dùng Web App
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
STT Tên xử lý Điều kiện gọi thực hiện
1 Quản lý User Người dùng chọn btnTimeTrack
Chuyển sang giao diện quản lịch sử
3 Chỉnh sửa User Người dùng chọn next, previous, nhập số trang phù hợp ở combonavigate
Dữ liệu trong tbTimeTrack sẽ thay đổi tương ứng với trang
4 Xóa User Người dùng click đôi vào status result
Cập nhật kết quả chấm công mong muốn
5 Điều khiển trang Người dùng click vào các button page action Bảng 5 22
Giao diện xem thông tin nhân viên và kích hoạt cho nhân viên
a Giao diện b Mô tả giao diện
STT Tên đối tượng Kiểu Ghi chú
3 txtFirstName Text field Material-UI
4 txtEmail Text field Material-UI
7 txtLastName Text field Material-UI
8 txtPhone Text field Material-UI
9 txtAddress Text field Material-UI
Bảng 5 23 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện
1 Active code cho nhân viên
Thực hiện cập nhật database, hiển thị lazy loading
2 Lazy loading khi kích hoạt code
Hiển thị khi cập nhật dữ liệu
Khóa thao tác khi đang cập nhật, cập nhật xong hiển thị lbResult
Sau khi cập nhật dữ liệu
Thông báo cho người dùng kết quả ở dưới góc phải màn hình, có 2 kết quả là thành công hoặc thất bại
Giao diện quản lý request
STT Tên đối tượng Kiểu Ghi chú
Bảng 5 25 c Danh sách xử lý
STT Tên xử lý Điều kiện gọi thực hiện
1 Hiển thị giao diện request
Hiển thị giao diện request
2 Hiển thị giao diện tab request
Chuyển sang giao diện tab request
3 Hiển thị giao diện tab Day- Off
Nhấn vào tabDayOff Chuyển sang giao diện tab day-off
4 Xem chi tiết day-off của request
Nhấn vào btnView Chuyển sang tab day-off
5 Chập thuận yêu cầu nghĩ phép
Nhấn vào btnAccept Thực thi chấp thuận yêu cầu nghĩ phép
6 Từ chối yêu cầu nghĩ phép
Nhận vào btnReject Thực thi từ chối nghĩ phép
7 Chỉnh sửa yêu cầu nghĩ phép
Nhấn vào btnEdit Hiển thị giao diện chỉnh sửa
8 Xóa yêu cầu nghĩ phép
Nhấn vào btnDelete Thực thi xóa yêu cầu nghĩ phép Bảng 5 26
LẬP TRÌNH
Ngôn ngữ lập trình
Flutter là nền tảng phát triển ứng dụng đa nền tảng cho iOS và Android do Google phát triển, sử dụng ngôn ngữ lập trình DART cũng do Google phát triển Nền tảng này đã được ứng dụng để tạo ra các ứng dụng native cho Google.
(https://github.com/flutter/flutter)
ReactJS là một thư viện mã nguồn mở do Facebook phát triển, nhằm tạo ra các ứng dụng web hấp dẫn với tốc độ nhanh và hiệu quả cao Mục tiêu chính của ReactJS là đảm bảo rằng các website sử dụng thư viện này hoạt động mượt mà, nhanh chóng và có khả năng mở rộng cao, đồng thời dễ dàng trong việc triển khai.
NodeJS (NestJS) là một framework mạnh mẽ cho việc phát triển các ứng dụng server-side, giúp tối ưu hóa hiệu suất và khả năng mở rộng Framework này sử dụng TypeScript, một ngôn ngữ lập trình cao cấp dựa trên JavaScript, đồng thời cho phép lập trình viên sử dụng JavaScript thuần túy NestJS kết hợp các nguyên tắc của lập trình hướng đối tượng (OOP), lập trình chức năng (FP) và lập trình phản ứng chức năng (FRP), mang lại sự linh hoạt và hiệu quả trong việc xây dựng ứng dụng.
Redis (REmote DIctionary Server) is an open-source tool used for storing structured data, functioning as a database, cache, or message broker It is a powerful and widely-used key-value data storage system that supports various data structures, including hash, list, set, sorted set, and string All data is stored in RAM, resulting in exceptionally fast read and write speeds.
Face Recognition là một thư viện mạnh mẽ trong Python, hỗ trợ xác định và nhận diện khuôn mặt một cách dễ dàng Thư viện này cho phép mã hóa sinh trắc học và tính toán độ chênh lệch giữa các khuôn mặt, giúp so sánh và phân tích hình ảnh hiệu quả Sử dụng Face Recognition, người dùng có thể thực hiện các tác vụ nhận diện khuôn mặt một cách nhanh chóng và chính xác.
Hệ quản trị cơ sở dữ liệu (https://www.postgresql.org/)
PostgreSQL is an advanced open-source object-relational database management system designed for general-purpose use.
PostgreSQL được phát triển dựa trên POSTGRES 4.2 tại phòng khoa học máy tính Berkeley, Đại học California
PostgreSQL được phát triển để hoạt động trên các hệ điều hành tương tự UNIX, nhưng cũng đã được điều chỉnh để tương thích với nhiều nền tảng khác như Mac OS X, Solaris và Windows.
PostgreSQL là phần mềm mã nguồn mở miễn phí, cho phép người dùng tự do sử dụng, sửa đổi và phân phối theo giấy phép PostgreSQL Với giấy phép này, người dùng có quyền truy cập vào mã nguồn và tận dụng các tính năng của PostgreSQL một cách linh hoạt.
PostgreSQL nổi bật với tính ổn định cao, giúp giảm thiểu công tác bảo trì Nhờ vậy, khi phát triển ứng dụng dựa trên PostgreSQL, chi phí sở hữu sẽ thấp hơn so với các hệ thống quản trị dữ liệu khác.
PostgreSQL là hệ thống quản lý cơ sở dữ liệu tiên phong trong việc triển khai tính năng kiểm soát đồng thời nhiều phiên bản (MVCC), trước cả Oracle Tính năng MVCC của PostgreSQL tương tự như các snapshot riêng biệt trong Oracle, cho phép quản lý giao dịch hiệu quả và đồng thời.
PostgreSQL là một hệ thống quản lý cơ sở dữ liệu quan hệ đối tượng, cho phép người dùng mở rộng các tính năng tùy chỉnh thông qua việc phát triển bằng nhiều ngôn ngữ lập trình khác nhau như C/C++ và Java.
Sơ đồ lớp
V Những điểm nổi bật của ứng dụng
1 Nhận diện khuôn mặt a Phát hiện khuôn mặt (Face Detection) Để phát hiện khuôn mặt, thư viện dùng một tập data traning có sẵn của 3 triệu tấm ảnh về khuôn mặt người được tạo ở dạng 128 vector đặc trưng
Khi tiếp nhận ảnh, chúng ta sẽ tạo ra một tập hợp 128 vector đặc trưng cho bức ảnh đó, nhằm so sánh với dữ liệu huấn luyện về khuôn mặt đã có sẵn.
Chúng quán trình phân loại nhãn, thư viện sử dụng mô hình k-NN để thực hiện tạo ra vector đặc trưng cuối cùng cho hình ảnh
Dựa trên các đăng trưng này thư viện thực hiện việc so sánh để cho ra danh sách các khuôn mặt có trong ảnh
Sau khi xác định danh sách các khuôn mặt trong ảnh, chúng ta tiến hành tính diện tích cho từng khuôn mặt nhằm xác định khuôn mặt chính, tức là khuôn mặt có diện tích lớn nhất Việc nhận diện khuôn mặt (Face Recognition) sẽ được thực hiện dựa trên kết quả này.
Khi đã có mảng vector đặc trưng của khuôn mặt cần nhận diện, chúng ta tiến hành so sánh với các mảng vector đặc trưng của khuôn mặt mẫu trong danh sách đã lưu trữ trước đó của nhân viên.
Việc nhận diện khuôn mặt dựa trên việc so sánh khoảng cách giữa các vector đặc trưng của hai mảng dữ liệu Chúng ta có thể áp dụng công thức xác suất có điều kiện, trong đó mỗi vector cần so sánh được coi là một biến cố, để tính toán khả năng hai khuôn mặt giống nhau.
Ngoài ra còn một công thức do cộng đồng xây dựng chúng ta có thể tham khảo thêm
2 Triển khai ứng dụng di động lên Google Play Để tiếp cận với các ứng dụng thực tế, nhóm đã thực hiện submit ứng dụng di động lên Google Play để các điện thoại sử dụng hệ điều hành Android có thể tải về ở bất cứ đâu và trải nghiệm như một khách hàng thực tế
Trong quá trình kiểm thử, nhóm đã thực hiện trên các thiết bị Android phiên bản 5,6,7,8,9 đều hoạt động tốt
3 Operation a Sử dụng PM2 quản lý tiến trình NodeJS và cân bằng tải trên 1 server
PM2 là một công cụ quản lý tiến trình mạnh mẽ cho NodeJS, giúp đơn giản hóa việc chạy ứng dụng NodeJS Ngoài ra, PM2 tự động khởi động lại ứng dụng khi gặp sự cố hệ thống, đảm bảo rằng ứng dụng NodeJS luôn hoạt động liên tục.
Nhóm đã sử dụng chế độ Cluster trong PM2 để tối ưu hóa hiệu suất CPU của server với 3 core Bằng cách này, ứng dụng NodeJS được chia thành 3 thể hiện, giúp phân tán các request và ngăn chặn tình trạng quá tải vào một ứng dụng NodeJS duy nhất, cụ thể là Web API.
Việc chia ứng dụng giúp các yêu cầu gửi đến Web API được phân phối đồng đều giữa các thể hiện khác nhau, từ đó giảm tải cho Web API, một quá trình được gọi là cân bằng tải (Load balancing).
Hình 6 30 b Sử dụng NGINX là reverse proxy
Nhóm đã sử dụng NGINX làm web server và tận dụng chức năng reverse proxy để điều hướng các yêu cầu từ bên ngoài vào máy chủ, đảm bảo truy cập đúng ứng dụng web đang chạy, cụ thể là ứng dụng quản lý viết bằng Angular 7 Nhờ đó, máy chủ chỉ cần công khai một cổng duy nhất, là cổng 80, và tất cả các truy vấn đến cổng này sẽ được NGINX xử lý và chuyển tiếp đến ứng dụng cần truy cập.
Nhóm đã nghiên cứu về cân bằng tải với NGINX, sử dụng phương pháp phân phối yêu cầu đến các máy chủ theo cách tuần tự hoặc theo cấu hình số lượng yêu cầu nhận ở mỗi máy chủ thông qua phương thức round-robin Tuy nhiên, do hạn chế về chi phí và thời gian, nhóm chưa thể triển khai giải pháp này trong thời gian hiện tại.
Kết hợp cân bằng tải với PM2 và NGINX giúp tối ưu hóa quá trình xử lý yêu cầu của ứng dụng, mang lại hiệu suất mượt mà và nhanh chóng, đồng thời giảm thiểu tình trạng quá tải cho server và khai thác tối đa sức mạnh của hệ thống.
Hình 6 31 c Triển khai Kong API Gateway
Kong là một API Gateway mã nguồn mở, được phát triển bằng ngôn ngữ Lua và xây dựng trên nền tảng NGINX Với khả năng hỗ trợ nhiều plugin, Kong giúp việc triển khai microservices trở nên dễ dàng hơn thông qua các tính năng như xác thực, giới hạn tần suất, biến đổi dữ liệu và ghi log Người dùng cũng có thể tự viết plugin cho Kong bằng Lua để đáp ứng nhu cầu sử dụng riêng.
Kết hợp Kong giúp khởi tạo và quản lý các node trong mô hình Microservice một cách dễ dàng và trực quan Phần giao diện người dùng (UI) được quản lý bởi Konga, mang lại trải nghiệm tốt hơn cho người dùng trong việc quản lý hệ thống.
Việc sử dụng Konga giúp chúng ta dễ dàng tập hợp tất cả các API từ các dịch vụ khác nhau về một điểm cuối miền chung Nhờ đó, khi chuyển đổi server hoặc thay đổi cấu hình, chúng ta không cần lo lắng về việc cập nhật cấu hình kết nối ở các client.
- Đồng thời việc phân cụm, quản lý chia tải cũng dễ dàng hơn
- Client: Có thể là Web Browser, Mobile App hoặc các service trong cùng hệ thống gọi chéo lẫn nhau
- KONG – API GATEWAY: Điều hướng các request được gọi đến cluster được chỉ định trong Kong
- Face Recognition Cluster: Là cluster được thiết lập trong Kong, nhằm mục đích chia ra các cụm máy chủ cùng thực hiện chung chức năng nhận diện khuôn mặt
- Time Tracking Cluster: Là cluster được thiết lập trong Kong, nhằm mục đích chia ra các cụm máy chủ cùng thực hiện chức năng chấm công
- NGINX: Làm web server, đồng thời là reverse proxy đến các instance của phần web frontend
KIỂM THỬ PHẦN MỀM
Quy trình kiểm thử
Quy trình kiếm thực phần mềm sẽ được thực hiện theo trình tự
Phân tích yêu cầu là bước quan trọng trong quá trình phát triển phần mềm, đòi hỏi người kiểm thử đọc kỹ và hiểu rõ các yêu cầu để lập kế hoạch kiểm thử hiệu quả Việc này giúp đảm bảo rằng các testcase được xây dựng sẽ bao quát tất cả các trường hợp lỗi có thể xảy ra, từ đó nâng cao chất lượng sản phẩm.
● Lập kế hoạch kiểm thử - Test Planning
Xác định rõ phạm vi và chiến lược kiểm thử là bước quan trọng, bao gồm việc lựa chọn loại kiểm thử phù hợp và xác định các vấn đề cần kiểm tra Cần làm rõ tiêu chí để đánh giá thành công và lỗi trong quá trình kiểm thử Thời gian bắt đầu kiểm thử cũng cần được xác định rõ ràng Đồng thời, việc nhận dạng và đánh giá các rủi ro trong quá trình kiểm thử, cùng với kế hoạch đối phó, là cần thiết để đảm bảo quá trình diễn ra suôn sẻ.
● Phát triển kiểm thử - Testcase Development
Thiết kế danh sách testcase dựa trên các yêu cầu chức năng và phi chức năng theo kế hoạch kiểm thử đã được lập trước đó, đảm bảo rằng mọi yêu cầu đều được bao phủ Danh sách testcase sẽ được kiểm định và đánh giá bởi nhà phân tích nghiệp vụ (Business Analyst), và các phản hồi sẽ được gửi lại cho nhóm tester để thực hiện điều chỉnh hoặc bổ sung nếu cần thiết Nhóm tester sẽ tiến hành điều chỉnh các testcase theo những đánh giá nhận được.
● Thực thi kiểm thử - Test Execution
Khi các testcase đã được phê duyệt và phần mềm đáp ứng đầy đủ yêu cầu, tiến hành thực hiện kiểm thử theo các testcase đã chuẩn bị Đồng thời, cần lưu lại kết quả trong suốt quá trình kiểm thử để đảm bảo tính chính xác và phục vụ cho các bước đánh giá sau này.
● Báo cáo kiểm thử - Test Report
Các tester thực hiện từng testcase và ghi chú lại khi gặp testcase không pass Đối với mỗi trường hợp test thất bại, ngoài việc ghi chép dữ liệu, tester cần chụp ảnh màn hình để làm bằng chứng cho lỗi gặp phải.
Báo cáo các lỗi phát hiện được cần được soạn thảo kỹ lưỡng, bao gồm bảng tổng kết đánh giá hoạt động kiểm lỗi Mỗi testcase phải được xác định rõ ràng về tiêu chí thành công và tình trạng hoàn thành Ngoài ra, tester cần duy trì tài liệu lưu vết một cách liên tục trong suốt quá trình kiểm thử.
● Phân tích kết quả kiểm thử - Test Result Analysis
Phân tích kết quả của báo cáo kiểm thử Nếu có testcase nào lỗi thì tiến hành sửa lỗi Có thể tiến hành chỉnh sửa hoặc bổ sung testcase
● Kiểm thử lại lỗi – Repeat Testing
Tiến hành kiểm thử lại các lỗi đã phát hiện trước đó hoặc các testcase mới phát sinh Quá trình này sẽ tiếp tục cho đến khi không còn lỗi nào được tìm thấy.
● Kết thúc kiểm thử - Finish Testing
Khi tất cả testcase đều đã pass, không còn testcase nào phát sinh, thỏa mãn được yêu cầu của phần mềm Thì quá trình kiểm thử kết thúc.
Kế hoạch kiểm thử
Trưởng nhóm test sẽ thực hiện viết test plan cho toàn bộ hệ thống gồm các phần sau:
● Định nghĩa phạm vi kiểm thử
● Định nghĩa các chiến lược kiểm thử
● Nhận dạng các rủi ro và yếu tố bất ngờ
● Nhận dạng các hoạt động kiểm thử và xây dựng lịch kiểm thử
● Nhận dạng môi trường kiểm thử
● Hiểu chỉnh trong suốt chu kỳ kiểm thử để phản ánh các thay đổi nếu cần thiết
Test case
Nhóm sẽ phân tích báo cáo để xác định nguyên nhân của lỗi và đánh giá mức độ nghiêm trọng Công việc sửa lỗi sẽ được phân chia cho từng thành viên, ưu tiên xử lý các lỗi nghiêm trọng trước Quá trình này sẽ tiếp tục lặp lại cho đến khi chương trình được hoàn thiện.
KẾT QUẢ ĐẠT ĐƯỢC
Sau một thời gian nghiên cứu, tìm hiểu nhóm đã đạt được các kết quả sau đây:
- Xây dựng thành công service nhận diện khuôn mặt
- Xây dựng thành công chức năng định vị tọa độ và tính toán khoảng cách
- Cho phép quản lý có thể theo dõi tình hình chấm công
- Triển khai thành công ứng dụng theo mô hình Microservice với nền tảng Docker và Kong API Gateway
- Cân bằng tải được server với Nginx, PM2, Kong API Gateway
- Triển khai thành công ứng dụng mobile lên Google Play.
ƯU ĐIỂM CỦA ĐỀ TÀI
- Giao diện đơn giản dễ sử dụng
- Sử dụng nhiều thư viện và các công nghệ mới nhằm hỗ trợ tốt nhất cho các nghiêp vụ của hệ thống
- Việc chấm công trở nên dễ dàng hơn đối với nhân viên
- Việc theo dõi cũng như quản lý và thống kê chấm công dễ dàng hơn đối với người quản lý
- Tính chính xác được nâng cao với việc nhận diện khuôn mặt và định vị tọa độ
- Có sử dụng các kỹ thuật câng bằng tải cho máy chủ.
HẠN CHẾ CỦA ĐỀ TÀI
- Vì phần hình ảnh chưa lưu trên cloud nên việc chia thêm server gặp khó gặp trong việc sài chung tài nguyên
- Vẫn không tránh khỏi các trường hợp dùng hình ảnh để gian lận khi chấm công
- Chưa triển khai được ứng dụng điện thoại trên App Store
- Chưa thực hiện việc cập nhật real-time cho người quản lý khi nhân viên chấm công
- Nghiệp vụ chấm công chưa đầy đủ vì còn thiếu tính thực tế.
HƯỚNG PHÁT TRIỂN
- Chính vì sự tồn tại của những hạn chế được nêu trên, nhóm có những biện pháp sau để khắc phục, cụ thể như sau:
- Cải thiện việc nhân rộng ra nhiều server bằng cách đưa tài nguyên sài chung lên cloud
- Cải thiện thuật toán nhận diện khuôn mặt và một số kỹ thuật đi kèm nhằm giảm thiểu việc giả mạo
- Triển khai được ứng dụng điện thoại trên App Store
- Tích hợp real-time trong việc thông báo dữ liệu thay đổi và giao tiếp giữa nhân viên với quản lý