KHẢO SÁT HIỆN TRẠNG
PHÂN TÍCH THIẾT KẾ HỆ THỐNG
KIẾN TRÚC HỆ THỐNG VÀ CÁC CÔNG NGHỆ SỬ DỤNG
Angular
CHƯƠNG 5: THIẾT KẾ GIAO DIỆN
CHƯƠNG 6: KIỂM THỬ PHẦN MỀM
CHƯƠNG 7: KẾT QUẢ ĐẠT ĐƯỢC & HƯỚNG PHÁT TRIỂN
STT Thời gian Công việc Ghi chú
+ Thiết kế cơ sở dữ liệu
Bắt đầu tiểu luận chuyên ngành
+ Tìm hiểu về Spring Boot,
+ Tìm hiểu về Angular, Typescript, HTML, SCSS
+ Chỉnh sửa cơ sở dữ liệu
+ Tìm hiểu về JSON WEB TOKEN
+ Tìm hiểu các xây dựng RESTful API
+ Tiến hành code base của dự án bao gồm frontend và backend
+ Tìm hiểu các design pattern
+ Xây dựng API cho backend
+ Thiết kế bản mẫu giao diện
+ Tiến hành phát triển back end
+ Tiến hành phát triển frontend
7 21/12/2022 – 24/12/2022 Lắp ráp và kiểm thử hệ thống, tiến hành sửa lỗi
8 24/12/2022 – 28/12/2022 Viết và hoàn thiện báo cáo
Kết thúc tiểu luận chuyên ngành
9 17/03/2023 – 25/03/2023 Đọc lại code, xác định phần cần thêm, bảo dưỡng trong dự án
Bắt đầu khóa luận tốt nghiệp
+ Maintain, tối ưu hóa lại các API, các hàm, thêm các sử lý ngoại lệ
+ Thiết kế lại giao diện
+ Xây dựng và phát triển frontend
+ Xây dựng và phát triển backend
12 11/06/2023 – 20/06/2023 Lắp ráp, kiểm thử hệ thống, tiến hành sửa lỗi
13 21/06/2023 – 28/06/2023 Tìm hiểu và thực hành deploy
14 29/06/2023 – 08/07/2023 Viết và hoàn thành báo cáo Ý kiến của giảng viên hướng dẫn
(Kỹ và ghi rõ họ tên)
Lương Quốc Trung Đỗ Quốc Việt
DANH MỤC CÁC TỪ VIẾT TẮT 21
1.1 Lý do chọn đề tài 23
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 24
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 32
3.1.2.Yêu cầu phi chức năng 32
3.2 Mô hình hóa yêu cầu 33
3.2.2.Đặc tả Use Case và lược đồ tuần tự 34
3.2.4.Lược đồ lớp (Class diagram) 93
CHƯƠNG 4: KIẾN TRÚC HỆ THỐNG VÀ CÁC CÔNG NGHỆ SỬ DỤNG 95
4.1.3.Những đặc điểm cơ bản của Java 97
4.1.4.Kiến trúc và môi trường của Java 97
4.2.2.Các module và kiến trúc của Spring Framework 98
4.2.3.Thành phần cốt lõi của Spring Framework 98
4.4.3.Các tính năng của Spring Security 113
4.7.3.Mối liên hệ giữa HTML, CSS và JavaScript 118
4.7.4.HTML và SCSS trong MOCKER 119
4.8.3.So sánh Typescript với JavaScript 122
4.9.1.Giới thiệu chung về Angular 124
4.9.2.Tại sao nên sử dụng Angular 125
4.9.3.Những tính năng nổi bật của Angular 125
4.9.4.Angular hoạt động như thế nào? 126
4.10.Thiết kế hệ thống dữ liệu 138
4.10.2 Generate 1 lược đồ gồm nhiều bảng và các mối quan hệ 139
CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 141
5.1 Giao diện trang đăng nhập 141
5.2 Giao diện thông báo đăng nhập không thành công 142
5.3 Giao diện quên mật khẩu 142
5.5 Giao diện khi nhập OTP sai 144
5.6 Giao diện xác nhận OTP và lấy mật khẩu thành công 144
5.7 Giao diện trang đăng kí 145
5.9 Giao diện trang thông tin cá nhân 147
5.10.Giao diện trang đổi mật khẩu 148
5.11.Giao diện danh sách nhóm đã tham gia 149
5.12.Giao diện tìm kiếm nhóm đã tham gia 150
5.13.Giao diện thêm một nhóm mới 151
5.14.Giao diện project của một nhóm 152
5.15.Giao diện thành viên của một nhóm 153
5.16.Giao diện thêm thành viên vào một nhóm 154
5.17.Giao diện xóa một thành viên trong nhóm 155
5.18.Giao diện thông tin của một nhóm 156
5.19.Giao diện xóa một nhóm 157
5.20.Giao diện xem thông tin của một dự án 158
5.21.Giao diện xóa một dự án 159
5.22.Giao diện tạo một dự án 160
5.23.Giao diện các lược đồ của một dự án 161
5.24.Giao diện tạo một lược đồ 162
5.25.Giao diện xóa lược đồ 163
5.26.Giao diện xem các bảng của lược đồ 164
5.27.Giao diện thêm một bảng vào lược đồ 164
5.28.Giao diện của một bảng 165
5.29.Giao diện chọn các kiểu dữ liệu SQL cho trường của bảng 166
5.30.Giao diện chọn các kiểu dữ liệu sinh ra cho trường của bảng 167
5.31.Giao diện lựa chọn thông tin để xuất dữ liệu 168
5.32.Giao diện xem trước dữ liệu 169
CHƯƠNG 6: KIỂM THỬ PHẦN MỀM 170
CHƯƠNG 7: KẾT QUẢ ĐẠT ĐƯỢC & HƯỚNG PHÁT TRIỂN 183
Hình 2.1.Giao diện trang chủ của Mockaroo 24
Hình 2.2.Giao diện trang đăng nhập của Mockaroo 25
Hình 2.3.Giao diện Project của Mockaroo 25
Hình 2.4.Giao diện Schema của Mockaroo 26
Hình 2.5.Giao diện generate dữ liệu của Mockaroo 26
Hình 2.6.Giao diện preview của Mockaroo 27
Hình 2.7.Giao diện chính của generatedata.com 28
Hình 2.8.Giao diện đăng nhập của generatedata.com 29
Hình 2.9.Giao diện thay đổi ngôn ngữ của generatedata.com 29
Hình 2.10.Giao diện generate của generatedata.com 30
Hình 2.11.Giao diện thông báo, tin tức của generatedata.com 30
Hình 3.1.Lược đồ Use Case 33
Hình 3.2.Lược đồ tuần tự đăng ký tài khoản 35
Hình 3.3.Lược đồ tuần tự đăng nhập bằng tài khoản mật khẩu 37
Hình 3.4.Lược đồ tuần tự đăng xuất 38
Hình 3.5.Lược đồ tuần tự lấy lại mật khẩu 40
Hình 3.6.Lược đồ tuần tự thay đổi thông tin cá nhân 42
Hình 3.7.Lược đồ tuần tự đổi mật khẩu 43
Hình 3.8.Lược đồ tuần tự tìm kiếm người dùng 45
Hình 3.9.Lược đồ tuần tự xem danh sách các nhóm đã tham gia 46
Hình 3.10.Lược đồ tuần tự tìm kiếm nhóm đã tham gia 47
Hình 3.11.Lược đồ tuần tự xem thành viên của một nhóm 48
Hình 3.12.Lược đồ tuần tự thêm thành viên của một nhóm 49
Hình 3.13.Lược đồ tuần tự xóa thành viên của một nhóm 51
Hình 3.14.Lược đồ tuần tự tạo nhóm mới 52
Hình 3.15.Lược đồ tuần tự xem thông tin của nhóm 53
Hình 3.16.Lược đồ tuần tự sửa thông tin nhóm 55
Hình 3.17.Lược đồ tuần tự xóa nhóm 56
Hình 3.18.Lược đồ tuần tự đổi quyền của các thành viên trong nhóm 58
Hình 3.19.Lược đồ tuần tự sửa thông tin dự án 59
Hình 3.20.Lược đồ tuần tự xóa dự án 61
Hình 3.21.Lược đồ tuần tự tạo mới dự án 62
Hình 3.22.Lược đồ tuần tự xem thông tin chung của dự án 63
Hình 3.23.Lược đồ tuần tự tìm kiếm dự án của một nhóm 65
Hình 3.24.Lược đồ tuần tự xem danh sách các dự án của một nhóm 66
Hình 3.25.Lược đồ tuần tự sửa thông tin lược đồ 67
Hình 3.26.Lược đồ tuần tự xóa lược đồ 69
Hình 3.27.Lược đồ tuần tự tạo lược đồ mới 70
Hình 3.28.Lược đồ tuần tự xem thông tin chung của lược đồ 72
Hình 3.29.Lược đồ tuần tự tìm kiếm lược đồ của một dự án 73
Hình 3.30.Lược đồ tuần tự xem danh sách các lược đồ của một dự án 74
Hình 3.31.Lược đồ tuần tự xóa bảng 75
Hình 3.32.Lược đồ tuần tự tạo bảng mới 77
Hình 3.33.Lược đồ tuần tự xem thông tin chung của bảng 78
Hình 3.34.Lược đồ tuần tự sửa thông tin cơ bản của bảng 79
Hình 3.35.Lược đồ tuần tự thêm trường mới của một bảng 81
Hình 3.36.Lược đồ tuần tự sửa thông tin trường của một bảng 82
Hình 3.37.Lược đồ tuần tự xóa trường của một bảng 83
Hình 3.38.Lược đồ tuần tự tìm kiếm bảng của một lược đồ 84
Hình 3.39.Lược đồ tuần tự xem danh sách các bảng của một lược đồ 85
Hình 3.40.Lược đồ tuần tự thêm quan hệ giữa các bảng 86
Hình 3.41.Lược đồ tuần tự sửa quan hệ giữa các bảng 88
Hình 3.42.Lược đồ tuần tự xóa quan hệ giữa các bảng 89
Hình 3.43.Lược đồ tuần tự xem trước dữ liệu xuất 90
Hình 3.44.Lược đồ tuần tự xuất dữ liệu 92
Hình 3.45.Lược đồ thực thể 93
Hình 4.1.Sơ đồ kiến trúc hệ thống 95
Hình 4.2.Ứng dụng spring trong MOCKER 99
Hình 4.3.Tầng Data Access Layer trong MOCKER 100
Hình 4.9.Cấu hình application.yaml 104
Hình 4.10.Lược đồ Spring Data JPA trong MOCKER 105
Hình 4.11.Tầng Business Logic Layer trong MOCKER 106
Hình 4.12.Interface của Business Logic Layer trong MOCKER 106
Hình 4.13.Ví dụ về một Class Service 107
Hình 4.16.Cấu trúc file mocker.yaml 109
Hình 4.17.Cấu trúc của phần paths 109
Hình 4.19.Cấu hình một phương thức 110
Hình 4.20.Truyền param trong phương thức get 111
Hình 4.21.Cấu trúc phần components 111
Hình 4.23.Cấu hình phần responses 112
Hình 4.24.Địa chỉ các file sinh ra 112
Hình 4.26.Sping security trong MOCKER 114
Hình 4.27.Hình minh họa Spring Security giữa Front-end và Back-end 114
Hình 4.28.Cấu hình đường dẫn trong Spring Security 115
Hình 4.29.Cấu hình JWT Token 115
Hình 4.33.Thư mục HTML và SCSS trong MOCKER 119
Hình 4.34.HTML và SCSS trong MOCKER 120
Hình 4.36.Kiến trúc Angular trong MOCKER 127
Hình 4.38.Hàm intercept của HTTP Client 129
Hình 4.45.Thuộc tính trong một Model 135
Hình 4.47.Khai báo Pipe trong HTML 136
Hình 4.50.Class service và các API 138
Hình 5.1.Giao diện trang đăng nhập 141
Hình 5.2.Giao diện thông báo đăng nhập không thành công 142
Hình 5.3.Giao diện quên mật khẩu 142
Hình 5.4.Giao diện nhập OTP 143
Hình 5.5.Giao diện khi nhập OTP sai 144
Hình 5.6.Giao diện xác nhận OTP và lấy mật khẩu thành công 144
Hình 5.7.Giao diện trang đăng ký 145
Hình 5.8.Giao diện trang chủ 146
Hình 5.9.Giao diện trang thông tin cá nhân 147
Hình 5.10.Giao diện trang đổi mật khẩu 148
Hình 5.11.Giao diện danh sách nhóm đã tham gia 149
Hình 5.12.Giao diện tìm kiếm nhóm đã tham gia 150
Hình 5.13.Giao diện thêm một nhóm mới 151
Hình 5.14.Giao diện project của một nhóm 152
Hình 5.15.Giao diện thành viên của một nhóm 153
Hình 5.16.Giao diện thêm thành viên vào một nhóm 154
Hình 5.17.Giao diện xóa một thành viên trong nhóm 155
Hình 5.18.Giao diện thông tin của một nhóm 156
Hình 5.19.Giao diện xóa một nhóm 157
Hình 5.20.Giao diện xem thông tin của một dự án 158
Hình 5.21.Giao diện xóa một dự án 159
Hình 5.22.Giao diện tạo một dự án 160
Hình 5.23.Giao diện các lược đồ của một dự án 161
Hình 5.24.Giao diện tạo một lược đồ 162
Hình 5.25.Giao diện xóa lược đồ 163
Hình 5.26.Giao diện xem các bảng của lược đồ 164
Hình 5.27.Giao diện thêm một bảng vào lược đồ 164
Hình 5.28.Giao diện của một bảng 165
Hình 5.29.Giao diện chọn các kiểu dữ liệu SQL cho trường của bảng 166
Hình 5.30.Giao diện chọn các kiểu dữ liệu sinh ra cho trường của bảng 167
Hình 5.31.Giao diện lựa chọ thông tin để xuất dữ liệu 168
Hình 5.32.Giao diện để xem trước dữ liệu 169
Bảng 3.1 Use Case đăng ký tài khoản 35
Bảng 3.2 Use Case đăng nhập bằng tài khoản mật khẩu 36
Bảng 3.3 Use Case đăng xuất 38
Bảng 3.4 Use Case lấy lại mật khẩu 39
Bảng 3.5 Use Case thay đổi thông tin cá nhân 41
Bảng 3.6 Use Case đổi mật khẩu 43
Bảng 3.7 Use Case tìm kiếm người dùng 44
Bảng 3.8 Use Case xem danh sách các nhóm đã tham gia 46
Bảng 3.9 Use Case tìm kiếm nhóm đã tham gia 47
Bảng 3.10.Use Case xem thành viên của một nhóm 48
Bảng 3.11.Use Case thêm thành viên của một nhóm 49
Bảng 3.12.Use Case xóa thành viên của một nhóm 50
Bảng 3.13.Use Case tạo nhóm mới 52
Bảng 3.14.Use Case xem thông tin của nhóm 53
Bảng 3.15.Use Case sửa thông tin nhóm 54
Bảng 3.16.Use Case xóa nhóm 56
Bảng 3.17.Use Case đổi quyền của các thành viên trong nhóm 57
Bảng 3.18.Use Case sửa thông tin dự án 59
Bảng 3.19.Use Case xóa dự án 60
Bảng 3.20.Use Case tạo dự án mới 62
Bảng 3.21.Use Case xem thông tin chung của dự án 63
Bảng 3.22.Use Case tìm kiếm dự án của một nhóm 64
Bảng 3.23.Use Case xem danh sách các dự án của một nhóm 66
Bảng 3.24.Use Case sửa thông tin lược đồ 67
Bảng 3.25 đến Bảng 3.42 trình bày các Use Case liên quan đến việc quản lý lược đồ và bảng, bao gồm các thao tác như xóa, tạo mới, xem thông tin, sửa đổi, và tìm kiếm lược đồ và bảng trong dự án Bảng 5.1 đến Bảng 5.6 mô tả các giao diện người dùng, từ giao diện đăng nhập cho đến thông báo lỗi và quy trình lấy lại mật khẩu qua OTP, nhằm đảm bảo trải nghiệm người dùng mượt mà và an toàn.
Bảng 5.7 đến Bảng 5.31 mô tả chi tiết giao diện của các trang trong hệ thống, bao gồm trang chủ, trang thông tin cá nhân, trang đổi mật khẩu, và danh sách nhóm đã tham gia Các bảng tiếp theo mô tả giao diện tìm kiếm nhóm, thêm nhóm mới, và giao diện project của một nhóm Ngoài ra, các bảng cũng trình bày cách thêm và xóa thành viên trong nhóm, thông tin nhóm, và quản lý dự án như tạo, xóa, và xem thông tin dự án Cuối cùng, các bảng mô tả giao diện cho việc tạo và quản lý lược đồ, bảng, cũng như chọn kiểu dữ liệu và xuất dữ liệu.
DANH MỤC CÁC TỪ VIẾT TẮT
STT Từ viết tắt Ý nghĩa
5 CORS Cross-origin resource sharing
7 CSRF Cross-site Request Forgery
11 GSSAPI Generic Security Service Application Program Interface
16 J2EE Java 2 Platform Enterprise Edition
17 JDBC Java™ EE Database Connectivity
25 LDAP Lightweight directory access protocol
29 POJO Plain Old Java Object
30 SAML Security Assertion Markup Language
35 SSPI Microsoft Security Support Provider Interface
41 LAMP Linux, Apache, MySQL, and PHP
42 MVCC Multi Version concurrency control
PHẦN NỘI DUNG CHƯƠNG 1: MỞ ĐẦU 1.1 Lý do chọn đề tài
Hiện nay, sự phát triển của nền công nghiệp 4.0 và Internet đã dẫn đến sự gia tăng đáng kể lượng truy cập và sử dụng website Điều này đã tạo ra nhu cầu cao về việc xây dựng và phát triển website để đáp ứng thị hiếu của người dùng.
Trong quá trình phát triển website, việc kiểm thử là rất quan trọng Khi một website đang trong giai đoạn xây dựng mà chưa có dữ liệu thực, lập trình viên và đội ngũ phát triển thường phải tạo dữ liệu giả với hiệu suất thấp và độ chính xác không cao Điều này dẫn đến việc kiểm thử không hiệu quả và tốn nhiều thời gian để hoàn thành dự án.
Việc xây dựng một website để khởi tạo dữ liệu giả cho kiểm thử là rất cần thiết Nhóm chúng tôi đã nghiên cứu và thực hiện đề tài “Xây dựng website MOCKER khởi tạo dữ liệu cho việc kiểm thử hệ thống” nhằm hỗ trợ quá trình phát triển website trở nên thuận lợi hơn.
Trong quá trình làm đề tài, nhóm chúng em đề ra những mục tiêu sau:
Xây dựng một hệ thống website cho phép người dùng yêu cầu tạo ra dữ liệu giả nhằm phục vụ kiểm thử hệ thống.
Xây dựng một hệ thống website cho phép người dùng tạo nhóm, chia sẻ và hợp tác để phát triển cũng như sử dụng dữ liệu hiệu quả hơn.
+ Giao diện thân thiện, dễ dàng sử dụng
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG
Nhóm chúng em đã thực hiện tiến hành khảo sát trên một vài Website tiêu biểu và có lược người sử dụng và truy cập nhiều như:
+ Mockaroo (https://www.mockaroo.com)
+ Generate data (https://generatedata.com)
Mockaroo là nền tảng khởi tạo dữ liệu và API, hỗ trợ nhiều định dạng phổ biến như JSON, SQL, CSV và XML Nền tảng này giúp người dùng tạo dữ liệu cho kiểm thử hệ thống và cho phép lưu trữ dễ dàng Ngoài ra, Mockaroo cung cấp server với các API giả, hỗ trợ kiểm thử và thiết kế Frontend mà không cần phụ thuộc vào API từ Backend.
Mặc định khi vào Website thì phần table sẽ được hiển thị, từ đó việc cấu hình cũng như tải dữ liệu dễ dàng hơn
Hình 2.1 Giao diện trang chủ của Mockaroo
Chức năng đăng ký và đăng nhập hỗ trợ nhiều phương thức, bao gồm đăng nhập bằng tài khoản Google, GitHub và Facebook Nếu người dùng không muốn sử dụng các phương thức này, họ có thể đăng ký hoặc đăng nhập bằng Email và Mật khẩu.
Hình 2.2 Giao diện trang đăng nhập của Mockaroo
Sau khi đăng nhập, người dùng có thể tạo dự án riêng biệt, giúp tránh nhầm lẫn với các dự án khác Danh sách các dự án sẽ được sắp xếp theo một thứ tự nhất định, và người dùng có thể dễ dàng thêm, sửa hoặc xóa một hoặc nhiều dự án.
Hình 2.3 Giao diện Project của Mockaroo
Mỗi Project sẽ gồm nhiều Schema tương ứng và cũng được sắp xếp theo thứ tự nhất định
Hình 2.4 Giao diện Schema của Mockaroo
Khi người dùng chọn một Schema thì Tables liên kết sẽ được hiển thị cho việc cấu hình và tải dữ liệu
Hình 2.5 Giao diện generate dữ liệu của Mockaroo
Chức năng Preview hỗ trợ dạng bảng (table) và theo dòng (raw) với format được định dạng trong cài đặt
Hình 2.6 Giao diện preview của Mockaroo
Nhìn chung, sau khi khảo sát, Website Mockaroo có những ưu điểm và nhược điểm như sau: Ưu điểm:
+ Có thể khởi tạo dữ liệu khi chưa đăng ký và đăng nhập
+ Chức năng đăng ký và đăng nhập được hỗ trợ bởi nhiều phương thức
+ Các Project được phân nhóm riêng biệt để có thể dễ dàng phân biệt giữa các dự án với nhau
+ Các Schema được gom nhóm và trong Project nhằm tránh sự nhầm lẫn
+ Chức năng Preview phục vụ cho việc kiểm tra dữ liệu trước khi tiến hành sử dụng + Giao diện thân thiện, dễ dàng sử dụng
+ Tốc độ tải trang cũng như khởi tạo dữ liệu nhanh chóng
+ Có tài liệu, forum hướng dẫn cụ thể có thể truy cập và tìm hiểu
+ Chỉ được dùng free một lượng data nhất định (giới hạn cho việc tải dữ liệu và 1000 dòng)
+ Tính năng chọn SQL Type vẫn chưa được thể hiện trên Website
+ Không hỗ trợ i18 cho nhiều ngôn ngữ
+ Chỉ cấu hình được một table mà không có nhiều table liên kết với nhau
Generate Data là một dự án mã nguồn mở miễn phí có sẵn trên GitHub, yêu cầu nhà phát triển có kinh nghiệm để thiết lập và cấu hình Dự án này cung cấp chức năng khởi tạo dữ liệu, hỗ trợ nhiều định dạng như JSON, CSV, SQL, XML và HTML, cùng với hơn 30 loại dữ liệu khác nhau, bao gồm các đối tượng thường gặp như tên, email và quốc gia.
Khi truy cập Website Generate Data, trang mặc định là một form để chọn generate type và format Người dùng có thể dễ dàng khởi tạo dữ liệu
Hình 2.7 Giao diện chính của generatedata.com
Với chức năng đăng ký và đăng nhập, Generate Data hỗ trợ đăng ký bằng Email và Password, thêm vào đó có thể đăng nhập bằng tài khoản Google
Generate Data cung cấp giao diện đăng nhập thân thiện tại generatedata.com, hỗ trợ nhiều ngôn ngữ phổ biến nhằm phục vụ người dùng từ các khu vực khác nhau.
Hình 2.9 Giao diện thay đổi ngôn ngữ của generatedata.com
Khi khởi tạo dữ liệu, Generate Data chia layout thành hai thành phần chính: bảng hỗ trợ cấu hình và layout kết quả để hiển thị thông tin sau khi khởi tạo.
Hình 2.10 Giao diện generate của generatedata.com Ở Website Generate Data có diễn đàn tin tức, bao gồm những thông tin cơ bản về website…
Hình 2.11 Giao diện thông báo, tin tức của generatedata.com Sau khi khảo sát, thì website này có những ưu điểm và nhược điểm sau: Ưu điểm:
+ Website hỗ trợ nhiều phương thức đăng ký và đăng nhập
+ Hỗ trợ i18n cho đa ngôn ngữ
+ Hỗ trợ nhiều generate type và format
+ Bao gồm trang diễn đàn để thông báo những tin tức mới
+ Không giới hạn số data được khởi tạo
+ Số lượng generate type vẫn còn hạn chế
+ Chỉ cấu hình được một table mà không có nhiều table liên kết với nhau
Sau khi tiến hành đánh giá và khảo sát các website, nhóm chúng em đã rút ra nhiều bài học quý giá và kinh nghiệm thiết thực để áp dụng vào đề tài của mình.
+ Giao diện phải bắt mắt, thân thiện với người dùng (UI)
+ Nâng cao trải nghiệm người dùng (UX)
+ Dễ dàng đăng ký và đăng nhập
+ Tốc độ khởi tạo, tải xuống của data càng nhanh càng tốt
+ Có Document hướng dẫn khi người dùng mới bắt đầu
+ Có phần tin tức để cập nhật các tính năng mới sau mỗi lần update
+ Hỗ trợ i18n phục vụ cho đa ngôn ngữ
+ Có thể cấu hình được nhiều table liên kết với nhau
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1 Xác định yêu cầu
Các yêu cầu chức năng của hệ thống bao gồm:
+ Đăng ký, đăng nhập và phân quyền:
✓ Đăng ký tạo tài khoản
✓ Đăng nhập vào hệ thống
✓ Chia nhóm và phân quyền
+ Khởi tạo project, schema và table:
+ Khởi tạo và xuất dữ liệu:
✓ Khởi tạo dữ liệu từ việc cài đặt từ table
✓ Xuất dữ liệu theo nhiều format được hỗ trợ trên hệ thống
3.1.2 Yêu cầu phi chức năng
Các yêu cầu phi chức năng bao gồm:
✓ Giao diện người dùng thân thiện, dễ sử dụng
✓ Tốc độ xử lý các thao tác nhanh chóng và chính xác
✓ Hệ thống có tính bảo mật, phần quyền rõ ràng
✓ Việc bảo trì, nâng cấp và phát triển dễ dàng
3.2 Mô hình hóa yêu cầu
Hình 3.1 Lược đồ Use Case
3.2.2 Đặc tả Use Case và lược đồ tuần tự
Tên Use Case Đăng ký tài khoản
Mô tả Người dùng thực hiện đăng ký để tạo tài khoản trên hệ thống
Actor Khách Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng muốn tạo tài khoản cá nhân trên hệ thống
Tiền điều kiện Người dùng chưa có tài khoản
– Thành công: Người dùng tạo được tài khoản mới trên hệ thống
– Thất bại: Tài khoản của người dùng không được tạo trên hệ thống
1 Người dùng chọn chức năng đăng ký trên trang đăng nhập
2 Người dùng nhập các thông tin hệ thống yêu cầu
3 Người dùng chọn nút SIGNUP
4 Hệ thống kiểm tra các thông tin người dùng nhập vào
5 Hệ thống gửi mã OTP về địa chỉ email của người dùng
6 Người dùng nhập mã OTP
7 Người dùng chọn nút Submit
8 Hệ thống xác thực mã OTP
9 Hệ thống điều hướng đến trang thông tin cá nhân
Luồng thay thế Không có
Luồng ngoại lệ Ở bước 4, nếu hệ thống phát hiện có dữ liệu đầu vào nào không hợp lệ, các công việc sau được thực hiện:
1 Hệ thống báo lỗi không thể tạo tài khoản
2 Use Case quay lại bước 2 của luồng cơ bản Ở bước 7, nếu hệ thống không thể xác thực mã OTP, các công việc sau được thực hiện:
1 Hệ thống thông báo mã OTP bị sai
2 Use Case quay lại bước 6 của luồng cơ bản
– Các trường nhập thông tin không được để trống
– Mã OTP gửi về email người dùng là một số ngẫu nhiên có
– Tên đăng nhập chưa được sửa dụng
Yêu cầu phi chức năng Không có
Bảng 3.1 Use Case đăng ký tài khoản
Hình 3.2 Lược đồ tuần tự đăng ký tài khoản
3.2.2.2 Đăng nhập bằng tài khoản mật khẩu
Tên Use Case Đăng nhập
Mô tả Người dùng đăng nhập vào hệ thống
Actor Người dùng Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng muốn đăng nhập vào hệ thống
Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống
– Thành công: Người dùng đăng nhập được vào hệ thống – Thất bại: Hệ thống thông báo lỗi đăng nhập không thành công
1 Người dùng chọn chức năng đăng nhập
2 Người dùng nhập tên đăng nhập và mật khẩu
3 Người dùng chọn nút LOGIN
4 Hệ thống xác thực thông tin đăng nhập và cho phép người dùng truy cập vào hệ thống
Luồng thay thế Không có
Luồng ngoại lệ Ở bước 4, nếu hệ thống không thể xác thực thông tin đăng nhập của người dùng, các công việc sau được thực hiện:
1 Hệ thống hiển thị thông báo lỗi đăng nhập không thành công
2 Use Case quay lại bước 2 của luồng cơ bản
Quy định nghiệp vụ – Trường tên đăng nhập và mật khẩu không được để trống
– Tên đăng nhập và mật khẩu không được dài quá 20 ký tự Yêu cầu phi chức năng Không có
Bảng 3.2 Use Case đăng nhập bằng tài khoản mật khẩu
Hình 3.3 Lược đồ tuần tự đăng nhập bằng tài khoản mật khẩu
Tên Use Case Đăng xuất
Mô tả Người dùng đăng xuất khỏi hệ thống
Actor Người dùng Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng muốn đăng xuất khỏi hệ thống
Tiền điều kiện Người dùng đã đăng nhập vào hệ thống
Hậu điều kiện – Thành công: Người dùng đăng xuất khỏi hệ thống
– Thất bại: Phiên đăng nhập của người dùng vẫn tiếp tục
Luồng cơ bản 1 Người dùng chọn chức năng đăng xuất
2 Hệ thống kết thúc phiên đăng nhập của người dùng
Luồng thay thế Không có
Luồng ngoại lệ Không có
Quy định nghiệp vụ Không có.
Yêu cầu phi chức năng Không có
Bảng 3.3 Use Case đăng xuất
Hình 3.4 Lược đồ tuần tự đăng xuất
Tên Use Case Lấy lại mật khẩu
Mô tả Người dùng sử dụng chức năng này để khôi phục mật khẩu tài khoản trong trường hợp quên mật khẩu
Người dùng có thể khôi phục mật khẩu tài khoản khi quên mật khẩu để đăng nhập vào hệ thống Quy trình này có độ ưu tiên cao nhằm đảm bảo người dùng nhanh chóng lấy lại quyền truy cập vào tài khoản của mình.
Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống
– Thành công: Mật khẩu của tài khoản người dùng được đặt lại
– Thất bại: Hệ thống thông báo lỗi, mật khẩu của tài khoản người dùng không thay đổi
1 Người dùng chọn chức năng khôi phục mật khẩu
2 Người dùng nhập email của tài khoản
3 Người dùng chọn nút Send code
4 Hệ thống xác thực email
5 Hệ thống gửi một mã OTP về email người dùng
6 Người dùng nhập mã OTP
7 Người dùng chọn nút Submit
8 Hệ thống xác thực mã OTP
9 Hệ thống hiện thông báo mật khẩu mới cho người dùng
10 Hệ thống lưu mật khẩu mới
11 Hệ thống chuyển người dùng về trang đăng nhập
THIẾT KẾ GIAO DIỆN
Giao diện trang đăng nhập
Hình 5.1 Giao diện trang đăng nhập
1 Thẻ Trường nhập username (email)
2 Thẻ Trường nhập password
3 Thẻ Nút đăng nhập
4 Thẻ Nút quên mật khẩu
Bảng 5.1 Mô tả giao diện đăng nhập
Giao diện thông báo đăng nhập không thành công
Hình 5.2 Giao diện thông báo đăng nhập không thành công
1 Thẻ
Thông báo thông tin đăng nhập sai
Bảng 5.2 Mô tả giao diện thông báo đăng nhập không thành công.
Giao diện quên mật khẩu
Hình 5.3 Giao diện quên mật khẩu
1 Thẻ Trường nhập username (email)
2 Thẻ Nút gửi mã xác nhận
3 Thẻ Quay về trang đăng nhập
Bảng 5.3 Mô tả giao diện quên mật khẩu.
Giao diện nhập OTP
Hình 5.4 Giao diện nhập OTP
1 Thẻ Trường nhập mã xác nhận
2 Thẻ Nút gửi lại mã xác nhận
Bảng 5.3 Mô tả giao diện nhập OTP
Giao diện khi nhập OTP sai
Hình 5.5 Giao diện khi nhập OTP sai
15 Thẻ
Thông báo mã OTP sai
Bảng 5.4 Mô tả giao diện nhập OTP sai.
Giao diện xác nhận OTP và lấy mật khẩu thành công
Hình 5.6 Giao diện xác nhận OTP và lấy mật khẩu thành công
1 Thẻ Trường nhập mật khẩu mới
2 Thẻ Trường nhập xác nhận mật khẩu mới
3 Thẻ Nút xác nhận đổi mật khẩu
Bảng 5.5 Mô tả giao diện nhập OTP và lấy lại mật khẩu thành công.
Giao diện trang đăng kí
Hình 5.7 Giao diện trang đăng ký
1 Thẻ Trường nhập username (email)
2 Thẻ Trường nhập mật khẩu
3 Thẻ Trường nhập xác nhận mật khẩu
4 Thẻ Nút đăng ký
5 Thẻ Điều hướng đến trang đăng nhập
Bảng 5.6 Mô tả giao diện trang đăng ký
Giao diện trang chủ
Hình 5.8 Giao diện trang chủ
1 Thẻ
Trường tên của field
2 Thẻ
Trường tên của loại dữ liệu được khởi tạo
3 Thẻ
Trường tên của loại dữ liệu được liên kết trong database
4 Thẻ
Trường các lựa chọn
5 Thẻ Nút thêm một file
6 Thẻ Các nút tải dữ liệu, preview dữ liệu và lưu table vào các schema đang tồn tại Bảng 5.7 Mô tả giao diện trang chủ
Giao diện trang thông tin cá nhân
Hình 5.9 Giao diện trang thông tin cá nhân
1 Thẻ Trường username (email)
2 Thẻ Nút đổi mật khẩu
3 Thẻ Trường tên của người dùng
4 Thẻ Trường bio (tóm tắt) của người dùng
5 Thẻ Trường nhập số điện thoại
6 Thẻ Nút lưu thông tin
Bảng 5.8 Mô tả giao diện trang thông tin cá nhân
Giao diện trang đổi mật khẩu
Hình 5.10 Giao diện trang đổi mật khẩu
1 Thẻ Trường nhập mật khẩu cũ
2 Thẻ Trường nhập mật khẩu mới
3 Thẻ Trường nhập mật khẩu xác nhận
4 Thẻ Nút thay đổi mật khẩu
Bảng 5.9 Mô tả giao diện trang đổi mật khẩu
Giao diện danh sách nhóm đã tham gia
Hình 5.11 Giao diện danh sách nhóm đã tham gia
1 Thẻ Tạo một nhóm mới
2 Thẻ Nút lọc nhóm theo quyền
3 Thẻ Tìm nhóm theo tên, mô tả
4 Thẻ Thông tin các nhóm đã tham gia
5 Thẻ Nút thay đổi trang
Bảng 5.10 Giao diện danh sách nhóm đã tham gia
Giao diện tìm kiếm nhóm đã tham gia
Hình 5.12 Giao diện tìm kiếm nhóm đã tham gia
2 Thẻ Kết quả tìm kiếm
Bảng 5.11 Mô tả giao diện tìm kiếm nhóm đã tham gia
Giao diện thêm một nhóm mới
Hình 5.13 Giao diện thêm một nhóm mới
1 Thẻ Tên của nhóm
2 Thẻ Mô tả của nhóm
4 Thẻ Hủy bỏ tạo nhóm
Bảng 5.12 Mô tả giao diện thêm một nhóm mới
Giao diện project của một nhóm
Hình 5.14 Giao diện project của một nhóm
1 Thẻ Lọc nhóm dựa theo quyền
2 Thẻ Thông tin các projects nằm trong group
4 Thẻ Tạo một project mới trong group
Bảng 5.13 Mô tả giao diện project của một nhóm
Giao diện thành viên của một nhóm
Hình 5.15 Giao diện thành viên của một nhóm
1 Thẻ Nút thêm một user mới
2 Thẻ Lọc user theo quyền
3 Thẻ Các users trong group
Bảng 5.14 Mô tả giao diện thành viên của một nhóm
Giao diện thêm thành viên vào một nhóm
Hình 5.16 Giao diện thêm thành viên vào một nhóm
1 Thẻ Tìm kiếm người dùng
2 Thẻ
Các người dùng khớp với tên đã nhập
Bảng 5.15 Mô tả giao diện thêm thành viên vào một nhóm
Giao diện xóa một thành viên trong nhóm
Hình 5.17 Giao diện xóa một thành viên trong nhóm
1 Thẻ
Thông báo xác nhận xóa một user
Bảng 5.16 Mô tả giao diện xóa một thành viên trong nhóm
Giao diện thông tin của một nhóm
Hình 5.18 Giao diện thông tin của một nhóm
1 Thẻ Tên của nhóm
2 Thẻ Mô tả của nhóm
3 Thẻ Nút lưu thông tin nhóm
4 Thẻ Nút xóa nhóm
Bảng 5.17 Mô tả giao diện thông tin của một nhóm
Giao diện xóa một nhóm
Hình 5.19 Giao diện xóa một nhóm
1 Thẻ
Thông báo xác nhận xóa nhóm
2 Thẻ Nút hủy thao tác
3 Thẻ Nút xác nhận xóa
Bảng 5.18 Mô tả giao diện xóa một nhóm
Giao diện xem thông tin của một dự án
Hình 5.20 Giao diện xem thông tin của một dự án
1 Thẻ Tên của dự án
2 Thẻ Mô tả của dự án
3 Thẻ Nút lưu thông tin dự án
4 Thẻ Nút xóa dự án
5 Thẻ
Thông tin của nhóm mà dự án đó nằm trong
6 Thẻ Thông tin về các lược đồ của dự án
Bảng 5.19 Mô tả giao diện xem thông tin của một dự án
Giao diện xóa một dự án
Hình 5.21 Giao diện xóa một dự án
1 Thẻ
Thông báo xác nhận xóa dự án
2 Thẻ Nút hủy thao tác
3 Thẻ Nút xác nhận
Bảng 5.20 Mô tả giao diện xóa một dự án
Giao diện tạo một dự án
Hình 5.22 Giao diện tạo một dự án
1 Thẻ Tên của dự án
2 Thẻ Mô tả của dự án
3 Thẻ Nút lưu một dự án
4 Thẻ Nút hủy dự án
Bảng 5.21 Mô tả giao diện tạo một dự án
Giao diện các lược đồ của một dự án
Hình 5.23 Giao diện các lược đồ của một dự án
1 Thẻ Nút tạo một lược đồ mới
2 Thẻ Nút lọc lược đồ theo quyền
3 Thẻ Nút tìm kiếm lược đồ
4 Thẻ Các lược đồ trong dự án
Bảng 5.22 Mô tả giao diện lược đồ của một dự án
Giao diện tạo một lược đồ
Hình 5.24 Giao diện tạo một lược đồ
1 Thẻ Tên của lược đồ
2 Thẻ Mô tả của lược đồ
3 Thẻ Nút lưu lược đồ
4 Thẻ Nút hủy thao tác
Bảng 5.23 Mô tả giao diện tạo một lược đồ
Giao diện xóa lược đồ
Hình 5.25 Giao diện xóa lược đồ
1 Thẻ
Thông báo xác nhận xóa lược đồ
2 Thẻ Nút hủy thao tác
3 Thẻ Nút xác nhận xóa lược đồ
Bảng 5.24 Mô tả giao diện xóa lược đồ
Giao diện xem các bảng của lược đồ
Hình 5.26 Giao diện xem các bảng của lược đồ
1 Thẻ Các bảng của lược đồ sẽ xuất hiện ở đây
Bảng 5.25 Mô tả giao diện xem các bảng của lược đồ
Giao diện thêm một bảng vào lược đồ
Hình 5.27 Giao diện thêm một bảng vào lược đồ
1 Thẻ Thông tin của table
2 Thẻ Thêm một field vào bảng
3 Thẻ Ô nhập tên bảng
4 Thẻ Ô nhập số lượng dòng
5 Thẻ Nút lưu bảng
6 Thẻ Nút xóa bảng
Bảng 5.26 Mô tả giao diện thêm một bảng vào lược đồ.
Giao diện của một bảng
Hình 5.28 Giao diện của một bảng
1 Thẻ Các field của bảng
2 Thẻ Nút thêm một field vào bảng
3 Thẻ Tên của bảng
4 Thẻ Số lượng dòng của bảng
5 Thẻ Nút lưu bảng
6 Thẻ Nút xóa bảng
Bảng 5.27 Mô tả giao diện của một bảng.
Giao diện chọn các kiểu dữ liệu SQL cho trường của bảng
Hình 5.29 Giao diện chọn các kiểu dữ liệu SQL cho trường của bảng
1 Thẻ Trường tìm kiếm
2 Thẻ Dữ liệu và ví dụ của nó
Bảng 5.28 Mô tả giao diện chọn SQL type cho trường của bảng
Giao diện chọn các kiểu dữ liệu sinh ra cho trường của bảng
Hình 5.30 Giao diện chọn các kiểu dữ liệu sinh ra cho trường của bảng
2 Thẻ Các kiểu dữ liệu generate type
3 Thẻ Bộ dữ liệu và ví dụ của nó
4 Thẻ Remove bộ dữ liệu
Bảng 5.29 Mô tả giao diện chọn các kiểu dữ liệu sinh ra cho trường của bảng
Giao diện lựa chọn thông tin để xuất dữ liệu
Hình 5.31 Giao diện lựa chọ thông tin để xuất dữ liệu
1 Thẻ Nút chọn kiểu dữ liệu được generate
2 Thẻ Tên của file được tải về
Bảng 5.30 Giao diện chọn thông tin để xuất dữ liệu
KIỂM THỬ PHẦN MỀM
KẾT QUẢ ĐẠT ĐƯỢC & HƯỚNG PHÁT TRIỂN
Hướng phát triển
STT Thời gian Công việc Ghi chú
+ Thiết kế cơ sở dữ liệu
Bắt đầu tiểu luận chuyên ngành
+ Tìm hiểu về Spring Boot,
+ Tìm hiểu về Angular, Typescript, HTML, SCSS
+ Chỉnh sửa cơ sở dữ liệu
+ Tìm hiểu về JSON WEB TOKEN
+ Tìm hiểu các xây dựng RESTful API
+ Tiến hành code base của dự án bao gồm frontend và backend
+ Tìm hiểu các design pattern
+ Xây dựng API cho backend
+ Thiết kế bản mẫu giao diện
+ Tiến hành phát triển back end
+ Tiến hành phát triển frontend
7 21/12/2022 – 24/12/2022 Lắp ráp và kiểm thử hệ thống, tiến hành sửa lỗi
8 24/12/2022 – 28/12/2022 Viết và hoàn thiện báo cáo
Kết thúc tiểu luận chuyên ngành
9 17/03/2023 – 25/03/2023 Đọc lại code, xác định phần cần thêm, bảo dưỡng trong dự án
Bắt đầu khóa luận tốt nghiệp
+ Maintain, tối ưu hóa lại các API, các hàm, thêm các sử lý ngoại lệ
+ Thiết kế lại giao diện
+ Xây dựng và phát triển frontend
+ Xây dựng và phát triển backend
12 11/06/2023 – 20/06/2023 Lắp ráp, kiểm thử hệ thống, tiến hành sửa lỗi
13 21/06/2023 – 28/06/2023 Tìm hiểu và thực hành deploy
14 29/06/2023 – 08/07/2023 Viết và hoàn thành báo cáo Ý kiến của giảng viên hướng dẫn
(Kỹ và ghi rõ họ tên)
Lương Quốc Trung Đỗ Quốc Việt
DANH MỤC CÁC TỪ VIẾT TẮT 21
1.1 Lý do chọn đề tài 23
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 24
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 32
3.1.2.Yêu cầu phi chức năng 32
3.2 Mô hình hóa yêu cầu 33
3.2.2.Đặc tả Use Case và lược đồ tuần tự 34
3.2.4.Lược đồ lớp (Class diagram) 93
CHƯƠNG 4: KIẾN TRÚC HỆ THỐNG VÀ CÁC CÔNG NGHỆ SỬ DỤNG 95
4.1.3.Những đặc điểm cơ bản của Java 97
4.1.4.Kiến trúc và môi trường của Java 97
4.2.2.Các module và kiến trúc của Spring Framework 98
4.2.3.Thành phần cốt lõi của Spring Framework 98
4.4.3.Các tính năng của Spring Security 113
4.7.3.Mối liên hệ giữa HTML, CSS và JavaScript 118
4.7.4.HTML và SCSS trong MOCKER 119
4.8.3.So sánh Typescript với JavaScript 122
4.9.1.Giới thiệu chung về Angular 124
4.9.2.Tại sao nên sử dụng Angular 125
4.9.3.Những tính năng nổi bật của Angular 125
4.9.4.Angular hoạt động như thế nào? 126
4.10.Thiết kế hệ thống dữ liệu 138
4.10.2 Generate 1 lược đồ gồm nhiều bảng và các mối quan hệ 139
CHƯƠNG 5: THIẾT KẾ GIAO DIỆN 141
5.1 Giao diện trang đăng nhập 141
5.2 Giao diện thông báo đăng nhập không thành công 142
5.3 Giao diện quên mật khẩu 142
5.5 Giao diện khi nhập OTP sai 144
5.6 Giao diện xác nhận OTP và lấy mật khẩu thành công 144
5.7 Giao diện trang đăng kí 145
5.9 Giao diện trang thông tin cá nhân 147
5.10.Giao diện trang đổi mật khẩu 148
5.11.Giao diện danh sách nhóm đã tham gia 149
5.12.Giao diện tìm kiếm nhóm đã tham gia 150
5.13.Giao diện thêm một nhóm mới 151
5.14.Giao diện project của một nhóm 152
5.15.Giao diện thành viên của một nhóm 153
5.16.Giao diện thêm thành viên vào một nhóm 154
5.17.Giao diện xóa một thành viên trong nhóm 155
5.18.Giao diện thông tin của một nhóm 156
5.19.Giao diện xóa một nhóm 157
5.20.Giao diện xem thông tin của một dự án 158
5.21.Giao diện xóa một dự án 159
5.22.Giao diện tạo một dự án 160
5.23.Giao diện các lược đồ của một dự án 161
5.24.Giao diện tạo một lược đồ 162
5.25.Giao diện xóa lược đồ 163
5.26.Giao diện xem các bảng của lược đồ 164
5.27.Giao diện thêm một bảng vào lược đồ 164
5.28.Giao diện của một bảng 165
5.29.Giao diện chọn các kiểu dữ liệu SQL cho trường của bảng 166
5.30.Giao diện chọn các kiểu dữ liệu sinh ra cho trường của bảng 167
5.31.Giao diện lựa chọn thông tin để xuất dữ liệu 168
5.32.Giao diện xem trước dữ liệu 169
CHƯƠNG 6: KIỂM THỬ PHẦN MỀM 170
CHƯƠNG 7: KẾT QUẢ ĐẠT ĐƯỢC & HƯỚNG PHÁT TRIỂN 183
Hình 2.1.Giao diện trang chủ của Mockaroo 24
Hình 2.2.Giao diện trang đăng nhập của Mockaroo 25
Hình 2.3.Giao diện Project của Mockaroo 25
Hình 2.4.Giao diện Schema của Mockaroo 26
Hình 2.5.Giao diện generate dữ liệu của Mockaroo 26
Hình 2.6.Giao diện preview của Mockaroo 27
Hình 2.7.Giao diện chính của generatedata.com 28
Hình 2.8.Giao diện đăng nhập của generatedata.com 29
Hình 2.9.Giao diện thay đổi ngôn ngữ của generatedata.com 29
Hình 2.10.Giao diện generate của generatedata.com 30
Hình 2.11.Giao diện thông báo, tin tức của generatedata.com 30
Hình 3.1.Lược đồ Use Case 33
Hình 3.2.Lược đồ tuần tự đăng ký tài khoản 35
Hình 3.3.Lược đồ tuần tự đăng nhập bằng tài khoản mật khẩu 37
Hình 3.4.Lược đồ tuần tự đăng xuất 38
Hình 3.5.Lược đồ tuần tự lấy lại mật khẩu 40
Hình 3.6.Lược đồ tuần tự thay đổi thông tin cá nhân 42
Hình 3.7.Lược đồ tuần tự đổi mật khẩu 43
Hình 3.8.Lược đồ tuần tự tìm kiếm người dùng 45
Hình 3.9.Lược đồ tuần tự xem danh sách các nhóm đã tham gia 46
Hình 3.10.Lược đồ tuần tự tìm kiếm nhóm đã tham gia 47
Hình 3.11.Lược đồ tuần tự xem thành viên của một nhóm 48
Hình 3.12.Lược đồ tuần tự thêm thành viên của một nhóm 49
Hình 3.13.Lược đồ tuần tự xóa thành viên của một nhóm 51
Hình 3.14.Lược đồ tuần tự tạo nhóm mới 52
Hình 3.15.Lược đồ tuần tự xem thông tin của nhóm 53
Hình 3.16.Lược đồ tuần tự sửa thông tin nhóm 55
Hình 3.17.Lược đồ tuần tự xóa nhóm 56
Hình 3.18.Lược đồ tuần tự đổi quyền của các thành viên trong nhóm 58
Hình 3.19.Lược đồ tuần tự sửa thông tin dự án 59
Hình 3.20.Lược đồ tuần tự xóa dự án 61
Hình 3.21.Lược đồ tuần tự tạo mới dự án 62
Hình 3.22.Lược đồ tuần tự xem thông tin chung của dự án 63
Hình 3.23.Lược đồ tuần tự tìm kiếm dự án của một nhóm 65
Hình 3.24.Lược đồ tuần tự xem danh sách các dự án của một nhóm 66
Hình 3.25.Lược đồ tuần tự sửa thông tin lược đồ 67
Hình 3.26.Lược đồ tuần tự xóa lược đồ 69
Hình 3.27.Lược đồ tuần tự tạo lược đồ mới 70
Hình 3.28.Lược đồ tuần tự xem thông tin chung của lược đồ 72
Hình 3.29.Lược đồ tuần tự tìm kiếm lược đồ của một dự án 73
Hình 3.30.Lược đồ tuần tự xem danh sách các lược đồ của một dự án 74
Hình 3.31.Lược đồ tuần tự xóa bảng 75
Hình 3.32.Lược đồ tuần tự tạo bảng mới 77
Hình 3.33.Lược đồ tuần tự xem thông tin chung của bảng 78
Hình 3.34.Lược đồ tuần tự sửa thông tin cơ bản của bảng 79
Hình 3.35.Lược đồ tuần tự thêm trường mới của một bảng 81
Hình 3.36.Lược đồ tuần tự sửa thông tin trường của một bảng 82
Hình 3.37.Lược đồ tuần tự xóa trường của một bảng 83
Hình 3.38.Lược đồ tuần tự tìm kiếm bảng của một lược đồ 84
Hình 3.39.Lược đồ tuần tự xem danh sách các bảng của một lược đồ 85
Hình 3.40.Lược đồ tuần tự thêm quan hệ giữa các bảng 86
Hình 3.41.Lược đồ tuần tự sửa quan hệ giữa các bảng 88
Hình 3.42.Lược đồ tuần tự xóa quan hệ giữa các bảng 89
Hình 3.43.Lược đồ tuần tự xem trước dữ liệu xuất 90
Hình 3.44.Lược đồ tuần tự xuất dữ liệu 92
Hình 3.45.Lược đồ thực thể 93
Hình 4.1.Sơ đồ kiến trúc hệ thống 95
Hình 4.2.Ứng dụng spring trong MOCKER 99
Hình 4.3.Tầng Data Access Layer trong MOCKER 100
Hình 4.9.Cấu hình application.yaml 104
Hình 4.10.Lược đồ Spring Data JPA trong MOCKER 105
Hình 4.11.Tầng Business Logic Layer trong MOCKER 106
Hình 4.12.Interface của Business Logic Layer trong MOCKER 106
Hình 4.13.Ví dụ về một Class Service 107
Hình 4.16.Cấu trúc file mocker.yaml 109
Hình 4.17.Cấu trúc của phần paths 109
Hình 4.19.Cấu hình một phương thức 110
Hình 4.20.Truyền param trong phương thức get 111
Hình 4.21.Cấu trúc phần components 111
Hình 4.23.Cấu hình phần responses 112
Hình 4.24.Địa chỉ các file sinh ra 112
Hình 4.26.Sping security trong MOCKER 114
Hình 4.27.Hình minh họa Spring Security giữa Front-end và Back-end 114
Hình 4.28.Cấu hình đường dẫn trong Spring Security 115
Hình 4.29.Cấu hình JWT Token 115
Hình 4.33.Thư mục HTML và SCSS trong MOCKER 119
Hình 4.34.HTML và SCSS trong MOCKER 120
Hình 4.36.Kiến trúc Angular trong MOCKER 127
Hình 4.38.Hàm intercept của HTTP Client 129
Hình 4.45.Thuộc tính trong một Model 135
Hình 4.47.Khai báo Pipe trong HTML 136
Hình 4.50.Class service và các API 138
Hình 5.1.Giao diện trang đăng nhập 141
Hình 5.2.Giao diện thông báo đăng nhập không thành công 142
Hình 5.3.Giao diện quên mật khẩu 142
Hình 5.4.Giao diện nhập OTP 143
Hình 5.5.Giao diện khi nhập OTP sai 144
Hình 5.6.Giao diện xác nhận OTP và lấy mật khẩu thành công 144
Hình 5.7.Giao diện trang đăng ký 145
Hình 5.8.Giao diện trang chủ 146
Hình 5.9.Giao diện trang thông tin cá nhân 147
Hình 5.10.Giao diện trang đổi mật khẩu 148
Hình 5.11.Giao diện danh sách nhóm đã tham gia 149
Hình 5.12.Giao diện tìm kiếm nhóm đã tham gia 150
Hình 5.13.Giao diện thêm một nhóm mới 151
Hình 5.14.Giao diện project của một nhóm 152
Hình 5.15.Giao diện thành viên của một nhóm 153
Hình 5.16.Giao diện thêm thành viên vào một nhóm 154
Hình 5.17.Giao diện xóa một thành viên trong nhóm 155
Hình 5.18.Giao diện thông tin của một nhóm 156
Hình 5.19.Giao diện xóa một nhóm 157
Hình 5.20.Giao diện xem thông tin của một dự án 158
Hình 5.21.Giao diện xóa một dự án 159
Hình 5.22.Giao diện tạo một dự án 160
Hình 5.23.Giao diện các lược đồ của một dự án 161
Hình 5.24.Giao diện tạo một lược đồ 162
Hình 5.25.Giao diện xóa lược đồ 163
Hình 5.26.Giao diện xem các bảng của lược đồ 164
Hình 5.27.Giao diện thêm một bảng vào lược đồ 164
Hình 5.28.Giao diện của một bảng 165
Hình 5.29.Giao diện chọn các kiểu dữ liệu SQL cho trường của bảng 166
Hình 5.30.Giao diện chọn các kiểu dữ liệu sinh ra cho trường của bảng 167
Hình 5.31.Giao diện lựa chọ thông tin để xuất dữ liệu 168
Hình 5.32.Giao diện để xem trước dữ liệu 169
Bảng 3.1 Use Case đăng ký tài khoản 35
Bảng 3.2 Use Case đăng nhập bằng tài khoản mật khẩu 36
Bảng 3.3 Use Case đăng xuất 38
Bảng 3.4 Use Case lấy lại mật khẩu 39
Bảng 3.5 Use Case thay đổi thông tin cá nhân 41
Bảng 3.6 Use Case đổi mật khẩu 43
Bảng 3.7 Use Case tìm kiếm người dùng 44
Bảng 3.8 Use Case xem danh sách các nhóm đã tham gia 46
Bảng 3.9 Use Case tìm kiếm nhóm đã tham gia 47
Bảng 3.10.Use Case xem thành viên của một nhóm 48
Bảng 3.11.Use Case thêm thành viên của một nhóm 49
Bảng 3.12.Use Case xóa thành viên của một nhóm 50
Bảng 3.13.Use Case tạo nhóm mới 52
Bảng 3.14.Use Case xem thông tin của nhóm 53
Bảng 3.15.Use Case sửa thông tin nhóm 54
Bảng 3.16.Use Case xóa nhóm 56
Bảng 3.17.Use Case đổi quyền của các thành viên trong nhóm 57
Bảng 3.18.Use Case sửa thông tin dự án 59
Bảng 3.19.Use Case xóa dự án 60
Bảng 3.20.Use Case tạo dự án mới 62
Bảng 3.21.Use Case xem thông tin chung của dự án 63
Bảng 3.22.Use Case tìm kiếm dự án của một nhóm 64
Bảng 3.23.Use Case xem danh sách các dự án của một nhóm 66
Bảng 3.24.Use Case sửa thông tin lược đồ 67
Bảng 3.25 đến Bảng 3.42 trình bày các Use Case liên quan đến việc quản lý lược đồ và bảng, bao gồm các thao tác như xóa, tạo, xem thông tin, sửa đổi và tìm kiếm Cụ thể, Bảng 3.25 mô tả Use Case xóa lược đồ, trong khi Bảng 3.26 và Bảng 3.27 lần lượt đề cập đến việc tạo lược đồ mới và xem thông tin chung của lược đồ Các bảng tiếp theo, từ Bảng 3.30 đến Bảng 3.41, tập trung vào việc quản lý bảng, bao gồm việc thêm, sửa, xóa bảng và các trường trong bảng, cũng như việc thiết lập quan hệ giữa các bảng Cuối cùng, Bảng 3.42 và Bảng 3.43 giới thiệu các Use Case liên quan đến việc xem trước và xuất dữ liệu Bảng 5.1 đến Bảng 5.6 mô tả các giao diện liên quan đến đăng nhập, thông báo lỗi và nhập OTP, giúp người dùng dễ dàng tương tác với hệ thống.
Bảng 5.7 đến Bảng 5.31 mô tả chi tiết giao diện của các trang chức năng trong hệ thống, bao gồm trang chủ, trang thông tin cá nhân, trang đổi mật khẩu, danh sách nhóm tham gia, tìm kiếm nhóm, thêm nhóm mới, giao diện dự án, thành viên nhóm, thêm và xóa thành viên, thông tin nhóm, xóa nhóm, xem thông tin dự án, xóa dự án, tạo dự án, lược đồ dự án, tạo và xóa lược đồ, xem các bảng trong lược đồ, thêm bảng vào lược đồ, giao diện bảng, chọn kiểu SQL cho trường bảng, chọn kiểu dữ liệu cho trường bảng, chọn thông tin xuất dữ liệu và xem trước dữ liệu.
DANH MỤC CÁC TỪ VIẾT TẮT
STT Từ viết tắt Ý nghĩa
5 CORS Cross-origin resource sharing
7 CSRF Cross-site Request Forgery
11 GSSAPI Generic Security Service Application Program Interface
16 J2EE Java 2 Platform Enterprise Edition
17 JDBC Java™ EE Database Connectivity
25 LDAP Lightweight directory access protocol
29 POJO Plain Old Java Object
30 SAML Security Assertion Markup Language
35 SSPI Microsoft Security Support Provider Interface
41 LAMP Linux, Apache, MySQL, and PHP
42 MVCC Multi Version concurrency control
PHẦN NỘI DUNG CHƯƠNG 1: MỞ ĐẦU 1.1 Lý do chọn đề tài
Hiện nay, với sự tác động của nền công nghiệp 4.0 và sự phát triển vượt bậc của Internet, lượng truy cập và sử dụng website đang gia tăng đáng kể Điều này dẫn đến nhu cầu xây dựng và phát triển website ngày càng cao.
Trong quá trình phát triển website, việc kiểm thử là vô cùng quan trọng Khi một website đang trong giai đoạn xây dựng mà chưa có dữ liệu thực, lập trình viên và đội ngũ phát triển cần tạo dữ liệu giả với hiệu suất thấp, điều này có thể dẫn đến tính chính xác không cao Kết quả là, dữ liệu không đúng cho việc kiểm thử và thời gian hoàn thành dự án bị kéo dài.
Việc xây dựng một website để khởi tạo dữ liệu giả cho kiểm thử là rất cần thiết Nhóm chúng tôi đã thực hiện đề tài “Xây dựng website MOCKER khởi tạo dữ liệu cho kiểm thử hệ thống” nhằm hỗ trợ quá trình phát triển website trở nên dễ dàng hơn.
Trong quá trình làm đề tài, nhóm chúng em đề ra những mục tiêu sau:
Xây dựng một hệ thống website cho phép người dùng yêu cầu tạo dữ liệu giả nhằm phục vụ kiểm thử hệ thống hiệu quả.
Xây dựng một hệ thống website cho phép người dùng được nhóm thành các nhóm, nhằm chia sẻ và cùng nhau phát triển dữ liệu Hệ thống này tạo điều kiện thuận lợi cho việc sử dụng và tối ưu hóa thông tin, giúp tăng cường sự hợp tác và sáng tạo giữa các thành viên.
+ Giao diện thân thiện, dễ dàng sử dụng
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG
Nhóm chúng em đã thực hiện tiến hành khảo sát trên một vài Website tiêu biểu và có lược người sử dụng và truy cập nhiều như:
+ Mockaroo (https://www.mockaroo.com)
+ Generate data (https://generatedata.com)
Mockaroo là nền tảng khởi tạo dữ liệu và API hỗ trợ nhiều định dạng như JSON, SQL, CSV và XML Nền tảng này giúp người dùng tạo dữ liệu cho việc kiểm thử hệ thống một cách dễ dàng và cho phép lưu trữ dữ liệu đã tạo Ngoài ra, Mockaroo còn cung cấp server với các API giả, hỗ trợ kiểm thử và thiết kế Frontend mà không cần phụ thuộc vào API từ Backend.
Mặc định khi vào Website thì phần table sẽ được hiển thị, từ đó việc cấu hình cũng như tải dữ liệu dễ dàng hơn
Hình 2.1 Giao diện trang chủ của Mockaroo
Chức năng đăng ký và đăng nhập của chúng tôi hỗ trợ nhiều phương thức linh hoạt, bao gồm đăng nhập bằng tài khoản Google, GitHub và Facebook Nếu người dùng không muốn sử dụng các phương thức này, họ có thể dễ dàng đăng ký hoặc đăng nhập bằng Email và Mật khẩu.
Hình 2.2 Giao diện trang đăng nhập của Mockaroo
Sau khi đăng nhập, người dùng có thể tạo các dự án riêng biệt mà không lo bị nhầm lẫn với những dự án khác Danh sách các dự án sẽ được sắp xếp theo thứ tự nhất định, giúp dễ dàng quản lý Người dùng cũng có thể dễ dàng thêm, sửa đổi hoặc xóa một hoặc nhiều dự án khi cần thiết.
Hình 2.3 Giao diện Project của Mockaroo
Mỗi Project sẽ gồm nhiều Schema tương ứng và cũng được sắp xếp theo thứ tự nhất định
Hình 2.4 Giao diện Schema của Mockaroo
Khi người dùng chọn một Schema thì Tables liên kết sẽ được hiển thị cho việc cấu hình và tải dữ liệu
Hình 2.5 Giao diện generate dữ liệu của Mockaroo
Chức năng Preview hỗ trợ dạng bảng (table) và theo dòng (raw) với format được định dạng trong cài đặt
Hình 2.6 Giao diện preview của Mockaroo
Nhìn chung, sau khi khảo sát, Website Mockaroo có những ưu điểm và nhược điểm như sau: Ưu điểm:
+ Có thể khởi tạo dữ liệu khi chưa đăng ký và đăng nhập
+ Chức năng đăng ký và đăng nhập được hỗ trợ bởi nhiều phương thức
+ Các Project được phân nhóm riêng biệt để có thể dễ dàng phân biệt giữa các dự án với nhau
+ Các Schema được gom nhóm và trong Project nhằm tránh sự nhầm lẫn
+ Chức năng Preview phục vụ cho việc kiểm tra dữ liệu trước khi tiến hành sử dụng + Giao diện thân thiện, dễ dàng sử dụng
+ Tốc độ tải trang cũng như khởi tạo dữ liệu nhanh chóng
+ Có tài liệu, forum hướng dẫn cụ thể có thể truy cập và tìm hiểu
+ Chỉ được dùng free một lượng data nhất định (giới hạn cho việc tải dữ liệu và 1000 dòng)
+ Tính năng chọn SQL Type vẫn chưa được thể hiện trên Website
+ Không hỗ trợ i18 cho nhiều ngôn ngữ
+ Chỉ cấu hình được một table mà không có nhiều table liên kết với nhau
Generate Data là một dự án mã nguồn mở miễn phí có sẵn trên GitHub, yêu cầu người dùng có kinh nghiệm lập trình để thiết lập và cấu hình Công cụ này cung cấp khả năng khởi tạo dữ liệu và hỗ trợ nhiều định dạng như JSON, CSV, SQL, XML, và HTML, cùng với hơn 30 loại dữ liệu khác nhau, bao gồm tên, email, và quốc gia.
Khi truy cập Website Generate Data, trang mặc định là một form để chọn generate type và format Người dùng có thể dễ dàng khởi tạo dữ liệu
Hình 2.7 Giao diện chính của generatedata.com
Với chức năng đăng ký và đăng nhập, Generate Data hỗ trợ đăng ký bằng Email và Password, thêm vào đó có thể đăng nhập bằng tài khoản Google
Giao diện đăng nhập của Generate Data (Hình 2.8) được thiết kế để phục vụ người dùng từ nhiều khu vực khác nhau và hỗ trợ nhiều ngôn ngữ phổ biến thông qua tính năng i18n.
Hình 2.9 Giao diện thay đổi ngôn ngữ của generatedata.com
Khi khởi tạo dữ liệu, Generate Data chia layout thành hai thành phần chính: bảng hỗ trợ cấu hình và layout hiển thị kết quả sau khi khởi tạo.
Hình 2.10 Giao diện generate của generatedata.com Ở Website Generate Data có diễn đàn tin tức, bao gồm những thông tin cơ bản về website…
Hình 2.11 Giao diện thông báo, tin tức của generatedata.com Sau khi khảo sát, thì website này có những ưu điểm và nhược điểm sau: Ưu điểm:
+ Website hỗ trợ nhiều phương thức đăng ký và đăng nhập
+ Hỗ trợ i18n cho đa ngôn ngữ
+ Hỗ trợ nhiều generate type và format
+ Bao gồm trang diễn đàn để thông báo những tin tức mới
+ Không giới hạn số data được khởi tạo
+ Số lượng generate type vẫn còn hạn chế
+ Chỉ cấu hình được một table mà không có nhiều table liên kết với nhau
Sau khi tiến hành đánh giá và khảo sát các website, nhóm chúng em đã rút ra nhiều bài học quý giá và kinh nghiệm hữu ích để áp dụng vào đề tài nghiên cứu của mình.
+ Giao diện phải bắt mắt, thân thiện với người dùng (UI)
+ Nâng cao trải nghiệm người dùng (UX)
+ Dễ dàng đăng ký và đăng nhập
+ Tốc độ khởi tạo, tải xuống của data càng nhanh càng tốt
+ Có Document hướng dẫn khi người dùng mới bắt đầu
+ Có phần tin tức để cập nhật các tính năng mới sau mỗi lần update
+ Hỗ trợ i18n phục vụ cho đa ngôn ngữ
+ Có thể cấu hình được nhiều table liên kết với nhau
CHƯƠNG 3: PHÂN TÍCH THIẾT KẾ HỆ THỐNG 3.1 Xác định yêu cầu
Các yêu cầu chức năng của hệ thống bao gồm:
+ Đăng ký, đăng nhập và phân quyền:
✓ Đăng ký tạo tài khoản
✓ Đăng nhập vào hệ thống
✓ Chia nhóm và phân quyền
+ Khởi tạo project, schema và table:
+ Khởi tạo và xuất dữ liệu:
✓ Khởi tạo dữ liệu từ việc cài đặt từ table
✓ Xuất dữ liệu theo nhiều format được hỗ trợ trên hệ thống
3.1.2 Yêu cầu phi chức năng
Các yêu cầu phi chức năng bao gồm:
✓ Giao diện người dùng thân thiện, dễ sử dụng
✓ Tốc độ xử lý các thao tác nhanh chóng và chính xác
✓ Hệ thống có tính bảo mật, phần quyền rõ ràng
✓ Việc bảo trì, nâng cấp và phát triển dễ dàng
3.2 Mô hình hóa yêu cầu
Hình 3.1 Lược đồ Use Case
3.2.2 Đặc tả Use Case và lược đồ tuần tự
Tên Use Case Đăng ký tài khoản
Mô tả Người dùng thực hiện đăng ký để tạo tài khoản trên hệ thống
Actor Khách Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng muốn tạo tài khoản cá nhân trên hệ thống
Tiền điều kiện Người dùng chưa có tài khoản
– Thành công: Người dùng tạo được tài khoản mới trên hệ thống
– Thất bại: Tài khoản của người dùng không được tạo trên hệ thống
1 Người dùng chọn chức năng đăng ký trên trang đăng nhập
2 Người dùng nhập các thông tin hệ thống yêu cầu
3 Người dùng chọn nút SIGNUP
4 Hệ thống kiểm tra các thông tin người dùng nhập vào
5 Hệ thống gửi mã OTP về địa chỉ email của người dùng
6 Người dùng nhập mã OTP
7 Người dùng chọn nút Submit
8 Hệ thống xác thực mã OTP
9 Hệ thống điều hướng đến trang thông tin cá nhân
Luồng thay thế Không có
Luồng ngoại lệ Ở bước 4, nếu hệ thống phát hiện có dữ liệu đầu vào nào không hợp lệ, các công việc sau được thực hiện:
1 Hệ thống báo lỗi không thể tạo tài khoản
2 Use Case quay lại bước 2 của luồng cơ bản Ở bước 7, nếu hệ thống không thể xác thực mã OTP, các công việc sau được thực hiện:
1 Hệ thống thông báo mã OTP bị sai
2 Use Case quay lại bước 6 của luồng cơ bản
– Các trường nhập thông tin không được để trống
– Mã OTP gửi về email người dùng là một số ngẫu nhiên có
– Tên đăng nhập chưa được sửa dụng
Yêu cầu phi chức năng Không có
Bảng 3.1 Use Case đăng ký tài khoản
Hình 3.2 Lược đồ tuần tự đăng ký tài khoản
3.2.2.2 Đăng nhập bằng tài khoản mật khẩu
Tên Use Case Đăng nhập
Mô tả Người dùng đăng nhập vào hệ thống
Actor Người dùng Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng muốn đăng nhập vào hệ thống
Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống
– Thành công: Người dùng đăng nhập được vào hệ thống – Thất bại: Hệ thống thông báo lỗi đăng nhập không thành công
1 Người dùng chọn chức năng đăng nhập
2 Người dùng nhập tên đăng nhập và mật khẩu
3 Người dùng chọn nút LOGIN
4 Hệ thống xác thực thông tin đăng nhập và cho phép người dùng truy cập vào hệ thống
Luồng thay thế Không có
Luồng ngoại lệ Ở bước 4, nếu hệ thống không thể xác thực thông tin đăng nhập của người dùng, các công việc sau được thực hiện:
1 Hệ thống hiển thị thông báo lỗi đăng nhập không thành công
2 Use Case quay lại bước 2 của luồng cơ bản
Quy định nghiệp vụ – Trường tên đăng nhập và mật khẩu không được để trống
– Tên đăng nhập và mật khẩu không được dài quá 20 ký tự Yêu cầu phi chức năng Không có
Bảng 3.2 Use Case đăng nhập bằng tài khoản mật khẩu
Hình 3.3 Lược đồ tuần tự đăng nhập bằng tài khoản mật khẩu
Tên Use Case Đăng xuất
Mô tả Người dùng đăng xuất khỏi hệ thống
Actor Người dùng Độ ưu tiên Rất cao Điều kiện kích hoạt Người dùng muốn đăng xuất khỏi hệ thống
Tiền điều kiện Người dùng đã đăng nhập vào hệ thống
Hậu điều kiện – Thành công: Người dùng đăng xuất khỏi hệ thống
– Thất bại: Phiên đăng nhập của người dùng vẫn tiếp tục
Luồng cơ bản 1 Người dùng chọn chức năng đăng xuất
2 Hệ thống kết thúc phiên đăng nhập của người dùng
Luồng thay thế Không có
Luồng ngoại lệ Không có
Quy định nghiệp vụ Không có.
Yêu cầu phi chức năng Không có
Bảng 3.3 Use Case đăng xuất
Hình 3.4 Lược đồ tuần tự đăng xuất
Tên Use Case Lấy lại mật khẩu
Mô tả Người dùng sử dụng chức năng này để khôi phục mật khẩu tài khoản trong trường hợp quên mật khẩu
Người dùng có độ ưu tiên cao cần khôi phục mật khẩu tài khoản khi quên mật khẩu để đăng nhập vào hệ thống.
Tiền điều kiện Người dùng chưa đăng nhập vào hệ thống
– Thành công: Mật khẩu của tài khoản người dùng được đặt lại
– Thất bại: Hệ thống thông báo lỗi, mật khẩu của tài khoản người dùng không thay đổi
1 Người dùng chọn chức năng khôi phục mật khẩu
2 Người dùng nhập email của tài khoản
3 Người dùng chọn nút Send code
4 Hệ thống xác thực email
5 Hệ thống gửi một mã OTP về email người dùng
6 Người dùng nhập mã OTP
7 Người dùng chọn nút Submit
8 Hệ thống xác thực mã OTP
9 Hệ thống hiện thông báo mật khẩu mới cho người dùng
10 Hệ thống lưu mật khẩu mới
11 Hệ thống chuyển người dùng về trang đăng nhập