MỤC LỤC
Giai đoạn 3: Phát triển giao diện FrontEnd song song với xử lý BackEnd Giai đoạn 4: Kiểm thử.
Việc phát triển đồ án bược bắt đầu từ việc phân tích yêu cầu của hệ thống, bao gồm các chức năng và mô hình dữ liệu. Đồ án sau sau khi đã được lên danh sách các chức năng sẽ được thiết kế mẫu giao diện trên môi trường Figma. Về mã nguồn, sau khi thành viên trong nhóm viết xong một chức năng (hoặc một giao diện) sẽ được push lên Github và merge mã nguồn.
- Công cụ làm việc trên dự án của các thành viên trong nhóm: máy tính cá nhân của từng thành viên.
- Bước 2: Ban đầu, tài khoản yêu cầu nhập một username mới và nhập lại mật khẩu mới 2 lần. Bảng 4 Các trường thông tin đầu vào trên form đăng ký trở thành người hiến máu. Áp dụng cho việc đăng ký mới một tài khoản chung cho 01 bệnh viện trên hệ thống, tài khoản này có thể được nhiều cán bộ bệnh viện truy cập.
- Bước 1: Người thực hiện chọn “Đăng ký” rồi chọn “Đăng ký với tư cách bệnh viện” trong bảng pop-up hiện ra. - Bước 2: Ban đầu, tài khoản yêu cầu nhập một username mới và nhập lại mật khẩu mới 2 lần. - Bước 3: Hệ thống yêu cầu nhập các thông tin còn lại đề cập ở bảng dưới - Bước 4: Hệ thống tiến hành lưu tài khoản mới dưới dạng bệnh viện nhưng.
Bảng 5 Các trường thông tin đầu vào trên form đăng ký tài khoản bệnh viện mới. Dành cho bệnh viện (nói chung) muốn trở có một tài khoản với tư cách bênh viện trên hệ thống.
Hệ thống có 02 dạng đăng ký: đăng ký tài khoản dưới tư cách người hiến máu hoặc người cần máu và đăng ký tài khoản dưới tư cách bệnh viện. ❖ Biểu đồ hoạt động cho “Đăng ký với tư cách người hiến máu/ người cần máu”. Hình 8 Biểu đồ hoạt động cho use-case “Đăng ký với tư cách người hiến máu/ người cần máu”.
Hình 9 Biểu đồ hoạt động cho use-case “Đăng ký với tư cách bệnh viện”. Hình 10 Biểu đồ hoạt động cho use-case “Tham gia vào đợt hiến máu”. Biểu đồ hoạt động cho use-case phân rã “Quản lý thông tin cá nhân”.
Hình 11 Biểu đồ hoạt động cho use-case phân rã “Quản lý thông tin cá nhân”. Hình 14 Biểu đồ hoạt động cho use-case phân rã “Tìm kiếm nguồn hiến”. Tổ chức đợt hiến máu gồm có 02 extend: thiết đặt chỉ tiêu đợt hiến (Hình ) và xem thống kê hiến máu (Hình ) được thể hiện như bên dưới.
Hình 16 Biểu đồ hoạt động cho use-case phân rã “Tổ chức đợt hiến máu” kèm “Thiết đặt chỉ tiêu cho đợt hiến”.
Hình 21 Biểu đồ tuần tự cho use-case “Tham gia vào đợt hiến máu”. Hình 23 Biểu đồ tuần tự cho chức năng “Xem thông tin cá nhân” cho use-case phân rã “Quản lý thông tin cá nhân”. ❖ Biểu đồ tuần tự cho chức năng “Cập nhật thông tin” và “Đổi mật khẩu”.
Hình 24 Biểu đồ tuần tự cho chức năng “Cập nhật thông tin cá nhân” cho use-case phân rã. Hình 25 Biểu đồ tuần tự cho chức năng “Đổi mật khẩu” cho use-case phân rã “Quản lý thông tin cá nhân”. Hình 26 Biểu đồ tuần tự cho chức năng “Xem lịch sử hiến máu” cho use-case phân rã “Quản lý thông tin cá nhân”.
Hình 28 Biểu đồ tuần tự cho use-case phân rã “Tìm kiếm nguồn hiến”. Hình 30 Biểu đồ tuần tự cho use-case phân rã “Tổ chức đợt hiến máu”.
Mô hình thực thể - quan hệ với 3 thực thể chính được mô tả từ trước có thể được biểu diễn như mô hình bên dưới.
Màn hình đăng kí trở thành người hiến máu gồm 02 phân được mô tả liên tiếp bên dưới. Mật khẩu Input type: password password Nhập mật khẩu đăng kí tài khoản Xác nhận mật khẩu Input type: password confirmPassword Xác nhận lại mật. Bảng 24 Mô tả chi tiết cho giao diện Tạo tài khoản tư cách người hiến máu.
Hình 37 Mẫu thiết kế giao diện Đăng ký thông tin cá nhân tư cách người hiến máu. Mô tả Kê khai thông tin cá nhân sau nhập các thông tin username và mật khẩu cho tài khoản. Số điện thoại Input type: text phoneNumber Nhập số điện thoại của người đăng kí.
Số nhà/ Tên đường Input type: text address Nhập địa chỉ chính xác của người đăng kí. Chọn bệnh án Select medicalHistory Người đăng kí kê khai lịch sử bệnh án của mình. Nếu người dùng kê khai thiếu thông tin, hệ thống sẽ yêu cầu đăng kí đầy đủ, nếu thông tin sai thì hệ thống yêu cầu nhập lại thông tin.
Bảng 25 Mô tả chi tiết cho giao diện Đăng ký thông tin cá nhân tư cách người hiến máu. Màn hình đăng kí với tư cách tài khoản bệnh viện gồm 02 phân được mô tả liên tiếp bên dưới. Mật khẩu Input type: password password Nhập mật khẩu đăng kí tài khoản Xác nhận mật khẩu Input type: password password Xác nhận lại mật.
Mô tả Kê khai thông tin cá nhân sau nhập các thông tin username và mật khẩu cho tài khoản. Số điện thoại Input type: text phoneNumber Nhập số điện thoại của người đăng kí. Số nhà/ Tên đường Input type: text address Nhập địa chỉ chính xác của người đăng kí.
Tên hành động Mô tả Thành công Thất bại Tìm kiếm Cho phép người hiến.
Họ và tên Input type: text Donor.name Xem và sửa họ tên tại đây. Tiền sử bệnh án Label Donor.medHistory Xem và chỉnh sửa tiền sử bệnh án tại đây. Đổi mật khẩu Button Chỉnh sửa thông tin Button Lịch sử hiến máu Button Tìm kiếm nơi hiến Button.
Thông tin cá nhân sẽ được chỉnh sửa và hiển thị trên trang hiện hành. Mật khẩu mới Input type: password newPassword Nhập mật khẩu mong muốn sau khi thay đổi. Input type: password confirmPassword Xác nhận lại mật khẩu mong muốn sau khi thay đổi.
Lưu Cho phép người dùng thay đổi từ mật khẩu cũ sang mật khẩu mới. ❖ Giao diện cho chức năng Xem lịch sử hiến máu được mô tả như bên dưới. Mô tả Cho phép người dùng xem được lịch sử hiến máu của mình và các thông kê đơn giản.
Tên hành động Mô tả Thành công Thất bại Tìm kiếm Cho phép người cần. Hiển thị một bảng pop-up về thông tin người hiến được mô tả ở hình dưới. Sau khi chọn vào nút Liên hệ, pop-up hiện ra với các thông tin cần thiết của người hiến được chọn như bên dưới.
Hủy yêu cầu Quản trị viên hủy yêu cầu xác minh của tài khoản bệnh viện nếu thấy nghi ngờ. Xác nhận Quản trị viên xác nhận yêu cầu xác minh của bệnh viện nếu dữ liệu là đúng với thực tế và đã liên lạc thành công với phía bệnh viện. Bảng 35 Mô tả chi tiết cho giao diện Xét duyệt bệnh viện với thông tin liên lạc.
Số người tiếp cận Label reachedPeople Tổng số chiến dịch Label campaigns Số lượng người. Xem chiến dịch Nhân viên bệnh viện xem thông tin về các đợt hiến máu đã triển khai. Truy cập vào màn hình xem lịch sử các đợt hiến máu đã triển khai.
Chỉnh sửa thông tin cụ thể về đợt hiến máu vừa mới triển khai trước thời gian bắt đầu hiến máu.
Hiển thị ra thông tin người hiến và các tùy chọn ghi nhận người hiến. Bảng 39 Mô tả chi tiết cho giao diện chính cho Ghi nhận đợt hiến máu. Sau khi Chọn một người hiến, một pop-up hiện ra với các tùy chọn ghi nhận người hiến cũng như lượng máu và thời gian người đó hiến.
Hình 53 Mẫu thiết kế giao diện cho các tùy chọn Ghi nhận đợt hiến máu. Mô tả Cho phép bệnh viện thực hiện các thay đổi và ghi nhận người hiến. Bảng 40 Mô tả chi tiết cho tùy chọn trong Ghi nhận người hiến máu.