TỔNG QUAN VỀ ĐỀ TÀI
Lý do chọn đề tài
Trong thời đại công nghệ thông tin phát triển như hiện nay, việc sử dụng internet để tìm kiếm thông tin và dịch vụ là rất phổ biến và tiện lợi Một trong những dịch vụ mà nhiều người quan tâm là huấn luyện viên cá nhân (personal trainer), người có thể hỗ trợ khách hàng trong việc lập kế hoạch, hướng dẫn và theo dõi quá trình tập luyện thể hình, sức khỏe và dinh dưỡng Tuy nhiên, để tìm kiếm một huấn luyện viên cá nhân phù hợp với nhu cầu và mong muốn của mình không phải là điều dễ dàng Hiện nay, có rất nhiều trung tâm thể hình, website hay ứng dụng cung cấp dịch vụ này, nhưng chất lượng và uy tín của chúng không được đảm bảo Ngoài ra, khách hàng cũng gặp khó khăn trong việc so sánh giá cả, chương trình huấn luyện, kinh nghiệm và chuyên môn của các huấn luyện viên cá nhân khác nhau.
Vì vậy, lý do chọn đề tài xây dưng website tìm kiếm huấn luyện viên cá nhân với mục tiêu là tạo ra một nền tảng trưc tuyến cho phép khách hàng dễ dàng tìm kiếm, lọc và đặt lịch với các huấn luyện viên cá nhân theo các tiêu chí như giới tính, chuyên ngành, giá cả, đánh giá và phản hồi của người dùng trước đó Website cũng sẽ cung cấp các thông tin hữu ích về các bài tập, chế độ ăn uống và lời khuyên từ các chuyên gia để giúp khách hàng có được kết quả tốt nhất Đồng thời, website cũng sẽ là một kênh quảng bá và kết nối cho các huấn luyện viên cá nhân có thể tiếp cận được nhiều khách hàng tiềm năng hơn. Đề tài này có ý nghĩa thưc tiễn cao trong bối cảnh nhu cầu chăm sóc sức khỏe và thể hình ngày càng gia tăng trong xã hội hiện đại Thông qua đề tài này có thể góp phần nâng cao chất lượng cuộc sống của người dân và thúc đẩy sư phát triển của ngành công nghệ thông tin.
Mục tiêu
●Xây dưng một website cung cấp thông tin và tìm kiếm huấn luyện viên cá nhân cho khách hàng.
●Tạo ra một nền tảng kết nối giữa khách hàng và huấn luyện viên cá nhân, giúp khách hàng dễ dàng tìm thấy huấn luyện viên phù hợp với nhu cầu của mình.
●Cung cấp thông tin về các dịch vụ huấn luyện, giá cả, kinh nghiệm của huấn luyện viên, giúp khách hàng có thể lưa chọn được một huấn luyện viên phù hợp với mục tiêu của mình.
Về công nghệ, tìm hiểu nghiên cứu, áp dụng framework:
●Gmail service api mail, api map
Công nghệ sử dụng
Front-end: sử dụng ReactJS
Back-end: sử dụng NodeJS, ExpressJS
Các dịch vụ khác: MediaPipe
CƠ SỞ LÝ THUYẾT
NodeJS [1]
Node.js là một nền tảng được xây dưng trên V8 JavaScript Engine – trình thông dịch thưc thi mã JavaScript, giúp xây dưng các ứng dụng web một cách đơn giản và dễ dàng mở rộng Node.js được phát triển bởi Ryan Dahl vào năm 2009 và có thể chạy trên nhiều hệ điều hành khác nhau như Windows, Linux và macOS Nó hoạt động như một máy chủ web và cho phép bạn viết mã JavaScript để chạy trên máy chủ Bạn có thể sử dụngNode.js để xây dưng các ứng dụng web phía máy chủ, các công cụ dòng lệnh và các ứng dụng desktop.
ExpressJS [2]
ExpressJS là một framework được xây dưng trên nền tảng của Nodejs Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile Expressjs hỗ trợ các method HTTP và middleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng ExpressJS được sử dụng để thiết kế và phát triển các ứng dụng web một cách nhanh chóng.
MongoDB [3]
MongoDB là một database hướng tài liệu (document), một dạng NoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB là một hệ thống cơ sở dữ liệu phi quan hệ (NoSQL), mã nguồn mở, được phát hành lần đầu vào tháng 2 năm
2009 bởi MongoDB Inc và quản lý theo SSPL (Server Side Public License).
React [4]
React là một thư viện JavaScript được sử dụng để xây dưng các giao diện người dùng (UI) động React được phát triển bởi Facebook và được sử dụng rộng rãi trong các ứng dụng web React cho phép bạn tạo ra các thành phần UI độc lập và tái sử dụng được trong các ứng dụng khác nhau.
Ant design [5]
Ant Design là một bộ công cụ thiết kế UI được phát triển bởi Ant Financial Nó cung cấp các thành phần UI đẹp và dễ sử dụng cho các ứng dụng web Ant Design được xây dưng trên React và có thể được sử dụng với các thư viện khác như Angular và Vue.
MediaPipe [6]
MediaPipe là một framework mã nguồn mở của Google được sử dụng để xây dưng các ứng dụng xử lý video và âm thanh MediaPipe cung cấp các công cụ để phát hiện khuôn mặt, đeo kính, đo khoảng cách và nhiều hơn nữa MediaPipe có thể được sử dụng với các ngôn ngữ lập trình như C++, Python và Javascript.
Technical stack
Hình 1: Kiến trúc đồ án
PHÂN TÍCH VÀ MÔ HÌNH HÓA YÊU CẦU
Phân tích yêu cầu chức năng
Cung cấp các chức năng cho khách hàng, bao gồm đăng ký tài khoản mới, đăng nhập và xem thông tin về các huấn luyện viên.
1.1.1 Đăng ký tài khoản mới
● Khách hàng truy cập vào ứng dụng và chọn chức năng "Đăng ký tài khoản".
● Một mẫu đăng ký tài khoản mới hiển thị, yêu cầu khách hàng cung cấp các thông tin cần thiết như tên, địa chỉ email, mật khẩu, và các chi tiết cá nhân khác nếu cần thiết.
● Khách hàng điền đầy đủ thông tin và nhấp vào nút "Đăng ký" để hoàn tất quá trình đăng ký.
● Hệ thống kiểm tra thông tin và thông báo cho khách hàng về việc tài khoản đã được tạo thành công hoặc cần cung cấp thông tin bổ sung nếu có.
● Sau khi đăng ký tài khoản, khách hàng có thể truy cập chức năng "Đăng nhập".
● Khách hàng nhập địa chỉ email và mật khẩu đã đăng ký trước đó.
● Hệ thống xác thưc thông tin và đăng nhập thành công nếu thông tin đúng.
● Sau khi đăng nhập thành công, khách hàng sẽ được chuyển đến giao diện chính của ứng dụng và có thể tiếp tục sử dụng các chức năng khác.
1.1.3 Xem thông tin huấn luyện viên:
● Trên giao diện chính của ứng dụng, khách hàng có thể tìm kiếm và xem thông tin về các huấn luyện viên.
● Hệ thống hiển thị danh sách các huấn luyện viên phù hợp với yêu cầu tìm kiếm.
● Khách hàng có thể chọn một huấn luyện viên cụ thể để xem chi tiết thông tin, bao gồm tên, chuyên môn, kinh nghiệm và các thông tin liên hệ khác.
Cung cấp các chức năng cho khách hàng, bao gồm khôi phục mật khẩu, đặt lịch tập, quản lý thông tin cá nhân và xem lại lịch đã đặt.
● Nếu khách hàng quên mật khẩu, họ có thể sử dụng chức năng khôi phục mật khẩu.
● Khách hàng chọn tùy chọn "Quên mật khẩu" trên giao diện đăng nhập.
● Hệ thống yêu cầu khách hàng nhập địa chỉ email đã được liên kết với tài khoản của họ.
● Sau khi khách hàng nhập đúng địa chỉ email, hệ thống gửi một liên kết khôi phục mật khẩu qua email.
● Khách hàng sử dụng liên kết đó để đặt lại mật khẩu và tiếp tục truy cập vào tài khoản.
● Khách hàng có thể sử dụng chức năng đặt lịch tập để chọn lớp, huấn luyện viên và khung giờ phù hợp.
● Trên giao diện chính, khách hàng chọn tùy chọn "Đặt lịch tập".
● Hệ thống hiển thị danh sách các lớp tập có sẵn và thông tin về huấn luyện viên.
● Khách hàng có thể chọn lớp tập và huấn luyện viên theo sở thích và khung giờ phù hợp.
● Sau khi chọn lớp, huấn luyện viên và khung giờ, khách hàng xác nhận đặt lịch tập.
● Hệ thống ghi nhận lịch tập và gửi thông báo xác nhận đến khách hàng.
1.2.3 Quản lý thông tin cá nhân
● Trên giao diện chính, khách hàng có thể truy cập chức năng quản lý thông tin cá nhân.
● Khách hàng có thể xem và chỉnh sửa các thông tin cá nhân như tên, địa chỉ, số điện thoại và hình ảnh cá nhân.
● Sau khi chỉnh sửa, khách hàng lưu thông tin cập nhật và hệ thống cập nhật thông tin trong tài khoản của họ.
1.2.4 Xem lại lịch đã đặt
● Khách hàng có thể sử dụng chức năng xem lại lịch đã đặt để kiểm tra và quản lý lịch tập của mình.
● Trên giao diện chính, khách hàng chọn tùy chọn "Xem lịch đã đặt".
● Hệ thống hiển thị danh sách các lịch tập đã đặt trước đó, bao gồm thông tin về lớp, huấn luyện viên và khung giờ.
● Khách hàng có thể xem thông tin chi tiết về mỗi lịch tập và thay đổi hoặc hủy bất kỳ lịch nào nếu cần.
Cung cấp các chức năng cho Huấn luyện viên, bao gồm xem lịch booking, xem danh sách khách hàng book, mục tiêu tập luyện của khách và tạo nhiệm vụ tập luyện cho khách.
● Huấn luyện viên truy cập vào ứng dụng và chọn chức năng "Xem lịch booking".
● Hệ thống hiển thị danh sách các lịch tập đã được đặt với Huấn luyện viên đó.
● Huấn luyện viên có thể xem thông tin chi tiết về mỗi lịch tập, bao gồm ngày, giờ và tên khách hàng.
● Thông tin về lịch booking giúp Huấn luyện viên có cái nhìn tổng quan về lịch trình công việc và chuẩn bị tốt hơn cho các buổi tập.
1.3.2 Xem danh sách khách hàng book:
● Huấn luyện viên có thể xem mục tiêu tập luyện của từng khách hàng.
● Trên giao diện chi tiết của khách hàng, Huấn luyện viên có thể xem thông tin về mục tiêu tập luyện của khách hàng, bao gồm mục tiêu cụ thể, mục tiêu tập luyện hàng ngày, tuần hoặc tháng, và các yêu cầu đặc biệt khác.
● Thông qua việc hiểu mục tiêu tập luyện của khách hàng, Huấn luyện viên có thể tạo ra các bài tập và lộ trình phù hợp để giúp khách hàng đạt được mục tiêu của mình.
1.3.3 Tạo nhiệm vụ tập luyện cho khách:
● Huấn luyện viên có thể sử dụng chức năng "Tạo nhiệm vụ tập luyện" để tạo ra các bài tập và nhiệm vụ cụ thể cho khách hàng.
● Huấn luyện viên xác định mục tiêu cụ thể cho nhiệm vụ tập luyện, bao gồm bài tập, số lần tập, khối lượng tập, thời gian tập và các chỉ số khác liên quan.
● Huấn luyện viên gán nhiệm vụ tập luyện cho từng khách hàng và thông báo cho họ về nhiệm vụ mới.
● Khách hàng sẽ nhận được thông báo về nhiệm vụ tập luyện và có thể xem chi tiết và tiến hành thưc hiện nhiệm vụ.
Cung cấp các chức năng cho Quản trị viên, bao gồm quản lý vé đặt lịch, quản lý khách hàng, quản lý lớp, quản lý huấn luyện viên, quản lý tài khoản và đặt lịch tập giúp khách hàng.
1.4.1 Quản lý vé đặt lịch
● Quản trị viên có thể sử dụng chức năng "Quản lý vé đặt lịch" để xem và quản lý tất cả các vé đặt lịch của khách hàng.
● Hệ thống hiển thị danh sách các vé đặt lịch, bao gồm thông tin về khách hàng, lớp tập, huấn luyện viên và khung thời gian.
● Quản trị viên có thể xem thông tin chi tiết của mỗi vé đặt lịch, bao gồm tình trạng thanh toán và các thông tin khác liên quan.
● Quản trị viên có thể thưc hiện các hoạt động quản lý như xác nhận thanh toán, hủy vé đặt lịch hoặc cập nhật thông tin liên quan.
● Quản trị viên có chức năng "Quản lý khách hàng" để xem danh sách khách hàng và quản lý thông tin của họ.
● Hệ thống hiển thị danh sách các khách hàng, bao gồm tên, thông tin liên hệ và các chi tiết khác.
● Quản trị viên có thể xem thông tin chi tiết về mỗi khách hàng, bao gồm lịch sử đặt lịch, mục tiêu tập luyện và các thông tin cá nhân khác.
● Quản trị viên có khả năng thêm, xóa hoặc cập nhật thông tin khách hàng khi cần thiết.
● Quản trị viên có chức năng "Quản lý lớp" để xem danh sách các lớp tập và quản lý thông tin liên quan.
● Hệ thống hiển thị danh sách các lớp tập, bao gồm thông tin về huấn luyện viên, khung thời gian và số lượng học viên.
● Quản trị viên có khả năng thêm, xóa hoặc cập nhật thông tin về các lớp tập.
1.4.3 Quản lý huấn luyện viên
● Quản trị viên có chức năng "Quản lý huấn luyện viên" để xem danh sách huấn luyện viên và quản lý thông tin của họ.
● Hệ thống hiển thị danh sách huấn luyện viên, bao gồm tên, thông tin liên hệ và các chi tiết khác.
● Quản trị viên có khả năng thêm, xóa hoặc cập nhật thông tin huấn luyện viên và gán huấn luyện viên cho các lớp tập tương ứng.
● Quản trị viên có chức năng "Quản lý tài khoản" để xem và quản lý các tài khoản người dùng trong hệ thống.
● Hệ thống hiển thị danh sách các tài khoản người dùng, bao gồm thông tin cá nhân và vai trò của họ.
● Quản trị viên có khả năng thêm, xóa hoặc cập nhật thông tin tài khoản và vai trò của người dùng.
1.4.5 Đặt lịch tập giúp khách hàng
● Quản trị viên có chức năng "Đặt lịch tập" để hỗ trợ khách hàng trong việc đặt lịch tập.
● Quản trị viên có thể chọn lớp tập, huấn luyện viên và khung thời gian phù hợp cho khách hàng.
● Hệ thống ghi nhận lịch tập và gửi thông báo xác nhận đến khách hàng.
Mô hình hóa yêu cầu chức năng
Hình 2: Lược đồ usecase tổng quát
Hình 3: Lược đồ usecase đăng ký tài khoản
Usecase đăng ký tài khoản
Mô tả Cho phép Actor đăng ký tài khoản mới
Tác nhân kích hoạt Guest
Tiền điều kiện Không có
Các bước thực hiện Truy cập vào trang web
Nhấn “Đăng ký” Điền đầy đủ thông tin cần thiết Nhấn “Đăng ký”
Bảng 1: Mô tả Lược đồ usecase đăng ký tài khoản
Hình 4: Lược đồ usecase đăng nhập
Mô tả Đăng nhập vào hệ thống với tài khoản web có sẵn.
Tác nhân kích hoạt Guest.
Tiền điều kiện Không có.
Các bước thực hiện Truy cập vào trang web.
Nhấn “Đăng nhập”. Điền đầy thông tin email và mật khẩu của tài khoản Nhấn “Đăng nhập”.
Bảng 2: Mô tả lược đồ usecase đăng nhập
2.2.3 Xem thông tin huấn luyện viên
Hình 5 Lược đồ usecase xem thông tin huấn luyện viên
Usecase xem thông tin huấn luyện viên
Mô tả Cho phép Actor xem thông tin huấn luyện viên.
Tác nhân kích hoạt Guest.
Tiền điều kiện Không có.
Các bước thực hiện Truy cập vào trang web.
Xem thông tin huấn luyện viên.
Nhấn “show more” để xem thêm thông tin chi tiết của huấn luyện viên.
Bảng 3: Mô tả lược đồ usecase xem thông tin huấn luyện viên
Hình 6: Lược đồ usecase đăng xuất
Mô tả Cho phép Actor đăng xuất ra khỏi trang web.
Tác nhân kích hoạt User.
Tiền điều kiện Đã đăng nhập vào trang web.
Các bước thực hiện Nhấn vào nút đăng xuất.
Hệ thống điều hướng về màn hình của Actor không cần đăng nhập.
Bảng 4: Mô tả lược đồ usecase đăng xuất
2.2.5 Thực hiện bài tập huấn luyện viên
Hình 7: Lược đồ usecase thưc hiện bài tập huấn luyện viên
Usecase thực hiện bài tập huấn luyện
Mô tả Cho phép Actor thưc hiện bài tập mà huấn luyện viên giao cho, cụ thể là bài tập Squat
Tác nhân kích hoạt User
Tiền điều kiện Đã đăng nhập vào hệ thống
Các bước thực hiện Truy cập vào trang web.
Xem danh sách bài tập được giao.
Xem hướng dẫn bài tập.
Bấm “Start” để bắt đầu tập theo.
Bảng 5: Mô tả lược đồ usecase thưc hiện bài tập huấn luyện viên
Hình 8: Lược đồ usecase khôi phục mật khẩu
Usecase khôi phục mật khẩu
Mô tả Cho phép người dùng thay đổi mật khẩu của tài khoản
Tác nhân kích hoạt User, Trainer
Tiền điều kiện Có tài khoản của hệ thống
Các bước thực hiện Vào trang login.
Chọn quên mật khẩu. Điền thông tin email.
Nhấn chọn quên mật khẩu.
Hệ thống kiểm tra có tồn tại account không, nếu có thì gửi link đổi mật khẩu cho email đã đăng ký.
Mở email để nhận đường link đổi mật khẩu. Điền mật khẩu mới.
Bảng 6: Mô tả lược đồ usecase khôi phục mật khẩu
2.2.7 Đặt lịch tập của user
Hình 9: Lược đồ usecase đặt lịch tập của user
Usecase đặt lịch tập của user
Mô tả Cho phép Actor đăng lịch tập mới
Tác nhân kích hoạt User
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang booking
Thưc hiện tuần tư theo các bước Chọn lớp
Chọn huấn luyện viên Chọn khung giờ Nhấn “Đăng ký”
Bảng 7: Mô tả lược đồ usecase đặt lịch tập của user
2.2.8 Quản lý thông tin cá nhân của user
Hình 9: Lược đồ usecase quản lý thông tin cá nhân user
Usecase quản lý thông tin cá nhân
Mô tả Cho phép Actor đăng ký tài khoản mới
Tác nhân kích hoạt User, Trainer
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem thông tin cá nhân, cập nhật thông tin cá nhânBảng 8: Mô tả lược đồ usecase quản lý thông tin cá nhân user
Hình 10: Lược đồ usecase xem lịch booking
Mô tả Cho phép Actor xem lại vé đăng ký booking dưới dạng lịch
Tác nhân kích hoạt User
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem thông vé đặt lịch theo dạng thời khóa biểu ngày, tuần, hoặc tháng.
Nhấn “Vé đặt lịch” để xem thông tin chi tiết.
Bảng 9: Mô tả lược đồ usecase xem lịch booking
Hình 11: Lược đồ usecase xem lịch booking của trainer
Usecase xem lịch booking của trainer
Mô tả Cho phép Actor xem lại vé đăng ký booking dưới dạng lịch
Tác nhân kích hoạt Trainer
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem thông vé đặt lịch theo dạng thời khóa biểu ngày, tuần, hoặc tháng.
Nhấn “Vé đặt lịch” để xem thông tin chi tiết.
Bảng 10: Mô tả lược đồ usecase xem lịch booking của trainer
2.2.11 Quản lý thông tin cá nhân
Hình 12: Lược đồ usecase quản lý thông tin cá nhân
Usecase quản lý thông tin cá nhân
Mô tả Cho phép Actor xem, cập nhật lại thông tin cá nhân của mình
Tác nhân kích hoạt Trainer
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem thông tin cá nhân, cập nhật thông tin cá nhânBảng 11: Mô tả lược đồ usecase quản lý thông tin cá nhân
2.2.12 Xem danh sách khách hàng
Hình 13: Lược đồ usecase xem danh sách khách hàng
Usecase xem danh sách khách hàng
Mô tả Cho phép Actor xem dách sách khách hàng đã booking, lớp mình chịu trách nhiệm
Tác nhân kích hoạt Trainer
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem thông tin căn bản của khách hàng
Có thể chỉnh sửa mục tiêu tập luyện khách hàng.
Có thể tạo nhiệm vụ cho khách hàngBảng 12: Mô tả Lược đồ usecase xem danh sách khách hàng
2.2.13 Quản lý vé đặt lịch
Hình 14: Lược đồ usecase quản lý vé đặt lịch
Usecase quản lý vé đặt lịch
Mô tả Cho phép Actor xem danh sách lịch booking
Tác nhân kích hoạt Admin
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem danh sách ticketsBảng 13: Mô tả Lược đồ usecase quản lý vé đặt lịch
Hình 15: Lược đồ usecase quản lý khách
Mô tả Cho phép Actor tạo thêm sửa xóa khách hàng
Tác nhân kích hoạt Trainer
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem danh sách khách hàng và thao tác thêm, sửa thông tin khách hàng.
Bảng 14: Mô tả Lược đồ usecase quản lý khách
2.2.15 Quản lý lớp tập luyện
Hình 16: Lược đồ usecase quản lý lớp tập luyện
Usecase quản lý lớp tập luyện
Mô tả Cho phép Actor thêm, chỉnh sửa thông tin lớp tập luyện
Tác nhân kích hoạt Admin
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem danh sách lớp huấn luyện và thao tác thêm sửa thông tin lớp huấn luyện.
Bảng 15: Mô tả Lược đồ usecase quản lý lớp tập luyện
2.2.16 Quản lý huấn luyện viên
Hình 17: Lược đồ usecase quản lý huấn luyện viên
Mô tả Cho phép Actor quản lý thông tin huấn luyện viên, cập nhật thông tin huấn luyện viên mới,
Tác nhân kích hoạt Admin
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem danh sách huấn luyện và thao tác thêm sửa, xóa huấn luyện viên.
Bảng 16: Mô tả Lượcđồ usecase quản lý huấn luyện viên
Hình 18: Lược đồ usecase quản lý tài khoản
Mô tả Cho phép Actor xem, khóa tài khoản của user, trainer
Tác nhân kích hoạt Admin
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang web
Xem danh sách tài khoản và thao tác thêm, sửa, khóa tài khoản.
Bảng 17: Mô tả lược đồ usecase quản lý tài khoản
2.2.18 Đặt lịch tập cho user
Hình 19: Lược đồ usecase đặt lịch tập cho user
Usecase đặt lịch tập cho khách hàng
Mô tả Cho phép Actor đăng ký tài khoản mới
Tác nhân kích hoạt Admin
Tiền điều kiện Đã đăng nhập vào trang web
Các bước thực hiện Truy cập vào trang booking
Thưc hiện tuần tư theo các bước Chọn lớp
Chọn huấn luyện viên Chọn khung giờ Nhập thông tin khách hàng Nhấn “Đăng ký”
Bảng 18: Mô tả lược đồ usecase đặt lịch tập cho user
Hình 21: Lược đồ tuần xem lịch đặt lịch
3.3.3 Xem thông tin huấn luyện viên
Hình 22: Lược đồ tuần tư xem thông tin huấn luyện viên
3.3.4 Xem nhiệm vụ tập luyện
Hình 23: Lược đồ tuần tư xem nhiệm vụ tập luyện
3.3.5 Thực hiện nhiệm vụ tập luyện
CHƯƠNG 4: THIẾT KẾ XÂY DỰNG WEBSITE
Thiết kế cơ sở dữ liệu
1.1 Sơ đồ thiết kế cơ sở dữ liệu
Hình 25: Sơ đồ thiết kế cơ sở dữ liệu
1.2 Mô tả thiết kế cơ sở dữ liệu
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
2 fullName String Tên người dùng
3 email String Email đăng nhập của người dùng
4 phone String Số điện thoại của người dùng
5 password String Mật khẩu tài khoản người dùng
6 avatar String Url hình ảnh
7 role String Quyền truy cập của người dùng
8 createdAt DateTime Thời gian khởi tạo
10 tickets.courseId Array[Object] Các ID vé đặt lịch
11 introduction String Giới thiệu bản thân
12 tags Array[String] Mục đích tập luyện của người dùng
Bảng 19: Mô tả cơ sở dữ liệu user
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
2 fullName String Tên huấn luyện viên
3 email String Email đăng nhập của huấn luyện viên
4 phone String Số điện thoại của huấn luyện viên
5 avatar String Url hình ảnh
6 role String Quyền truy cập của người dùng
7 createdAt DateTime Thời gian khởi tạo
9 avatars Array[String] Url hình ảnh
10 introduction String Giới thiệu bản thân
11 tags Array[String] Mục đích tập luyện của người dùng
12 skills Array[String] Kỹ năng chuyên môn của huấn luyện viên
13 certificates Array[String] Tên chứng nhận bằng cấp huấn luyện
14 yearExperience Number Số năm kinh nghiệm của huấn luyện viênBảng 20: Mô tả cơ sở dữ liệu trainer
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
2 startTime DateTime Thời gian bắt đầu buổi tập
3 endTime DateTime Thời gian kết thúc buổi tập
4 trainerUUID String Id của huấn luyện viên
5 customerUUID String Id cửa khách hàng
6 programUUID String Id của lớp tập luyện
7 updatedAt String Quyền truy cập của người dùng
8 createdAt DateTime Thời gian khởi tạo
9 state number Trạng thái của véBảng 21: Mô tả cơ sở dữ liệu vé đặt lịch
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
2 serviceName String Tên lớp tập luyện
3 avatar String Url hình ảnh
4 description String Mô tả lớp
5 serviceType Array[String] Đặc tính của lớp
6 responsibleEmployees Array[String] List id huấn luyện viên chịu trách nhiệm hướng dẫn lớp này
7 state Number Trạng thái của lớp tập luyện
8 createdAt DateTime Thời gian khởi tạoBảng 22: Mô tả cơ sở dữ liệu lớp tập luyện
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
2 username String Email đăng ký tài khoản
3 power String Quyền của account, mặc định khi người dùng đăng ký mới là tài khoản user, còn tài khoản của trainer do Admin tạo
4 password String Mật khẩu tài khoản người dùng
5 status Number Trạng thái của tài khoản, 1: active, 2: block
6 createdAt DateTime Thời gian khởi tạo
7 profile String Id của user dùng account này
8 profileModel Object Thông tin của user dùng account này
Bảng 23: Mô tả cơ sở dữ liệu tài khoản
STT Tên thuộc tính Kiểu dữ liệu Ý nghĩa
2 name String Tên bài tập
3 des String Mô tả bài tập
4 reps Number Số reps thưc hiện
5 sets Number Số sets thưc hiện
6 state Number Trạng thái bài tập.
7 level String Mức độ khó của bài tập
8 duration DateTime Thời gian thưc hiện bài tập
9 user String Id của người tập
10 createByTrainer String Id của huấn luyện viên tạo nhiệm vụ
11 imageDemo String URL hình động demo hướng dẫn tập
12 createdAt DateTime Thời gian khởi tạoBảng 24: Mô tả cơ sở dữ liệu nhiệm vụ hằng ngày
2.1 Màn hình của Khách chưa đăng nhập
STT Tên Loại Mô tả
1 Thanh điều Navigation Thanh mục điều hướng, người dùng có thể hướng chọn page
2 Nút try for free Button Điều hướng tới page đăng nhập
3 Menu hiển hiện Carousel Có thể lướt ngang tìm thông tin chương chương trình tập trình tập luyện luyện
Bảng 25: Mô tả màn hình trang chủ
2.1.2 Màn hình xem danh sách huấn luyện viên
Hình 27: Màn hình xem danh sách huấn luyện viên
STT Tên Loại Mô tả
1 Trainer Navigation mục điều hướng, người dùng có thể chọn để mở trang xem thông tin huấn luyện viên
2 Mục lục phân List Mục lục để phân loại huấn luyện viên theo loại huấn luyện kĩ năng. viên theo kỹ năng
3 Hình ảnh huấn Img Hình ảnh của huấn luyện viên, người dùng luyện viên có thể biết thông tin của huấn luyện viên
Bảng 26: Mô tả màn hình xem danh sách huấn luyện viên
2.1.3 Màn hình xem chi tiết huấn luyện viên
Hình 28: Màn hình xem chi tiết huấn luyện viên
STT Tên Loại Mô tả
1 Tên Div Hiển thị tên huấn luyện viên và số năm kinh nghiệm của họ
2 Kỹ năng chuyên List Danh sách kỹ năng chuyên môn của huấn môn luyện viên.
3 Bằng cấp List Danh sách chứng chỉ chứng nhận của huấn luyện viên.
Bảng 27: Mô tả màn hình xem chi tiết huấn luyện viên
2.1.4 Màn hình công cụ tính toán BMI
Hình 29: Màn hình công cụ tính toán BMI
STT Tên Loại Mô tả
1 Mô tả BMI Div Giới thiệu chỉ số BMI là gì, tầm quan trọng của chỉ số BMI
2 Chiều cao Input Nơi người dùng nhập chiều cao
3 Cân nặng List Danh sách chứng chỉ chứng nhận của huấn luyện viên.
4 Số tuổi Input Nơi người dùng nhập cân nặng
5 Tần suất hoạt Select Nơi người dùng chọn tần suất hoạt động động
6 Xem kết quả Button Người dùng bấm để hệ thống tính toán chỉ số BMIBảng 28: Mô tả màn hình công cụ tính toán BMI
2.1.5 Màn hình kết quả tính toán BMI
Hình 30: Màn hình kết quả tính toán BMI
STT Tên Loại Mô tả
1 Kết quả BMI Div Mô tả kết quả BMI của người dụng.
Phân loại BMI vào bốn nhóm: nhẹ cân, bình thường, thừa cân, béo phì. Đưa ra lời khuyên cho người dùng.
2 Ý nghĩa BMI Div Giải thích ý nghĩa, phạm vi chỉ số BMI tương ứng với bốn nhóm: nhẹ cân, bình thường, thừa cân, béo phì.
3 Lời khuyên Div Đưa ra lời khuyên cách duy trình chỉ số
4 Kiểm tra lại Button Người dùng có thể kiểm tra lại chỉ số BMI cho người khácBảng 29: Mô tả màn hình kết quả tính toán BMI
2.2 Màn hình của Hội viên
2.2.1 Màn hình Daily Activity Task
Hình 31: Màn hình nhiệm vụ hằng ngày
STT Tên Loại Mô tả
1 Trang home Navigation Nơi người dụng chọn để xem page danh slider sách nhiệm vụ hằng ngày
2 Danh sách Div Giải thích ý nghĩa, phạm vi chỉ số BMI nhiệm vụ hằng tương ứng với bốn nhóm: nhẹ cân, bình ngày thường, thừa cân, béo phì.
3 Do it Button Bấm vào để thưc hiện nhiệm vụ hằng ngày
Bảng 30: Mô tả màn hình nhiệm vụ hằng ngày
2.2.2 Màn hình thực hiện nhiệm vụ hằng ngày
Hình 32: Màn hình thưc hiện nhiệm vụ hằng ngày
STT Tên Loại Mô tả
1 Hướng dẫn tập Image Image động để người dùng xem cách thức luyện tập luyện
2 Nút start/ reset Button Người dùng bấm để bắt đầu đếm giờ, đếm số lần bài tập
3 Khung hình Video Nhận diện khung xương người tập, từ đó video nhận diện tính toán số lần tập động tác người tập
Bảng 31: Mô tả màn hình thưc hiện nhiệm vụ hằng ngày
2.2.3 Màn hình Calendar lịch booking đã đặt ở dạng tháng
Hình 32: Màn hình lịch ở dạng tháng
STT Tên Loại Mô tả
1 Nút calendar Button Chọn vào để mở page xem lịch đặt lịch
2 Thông tin buổi Div Thông tin ngày tập, buổi tập tập luyện
3 Vé tập luyện Button Cho phép người dùng xem chi tiết vé đặt lịchBảng 32: Mô tả màn hình lịch ở dạng tháng
2.2.4 Màn hình Calendar lịch booking đã đặt ở dạng tuần
Hình 34: Màn hình lịch ở dạng tuần
STT Tên Loại Mô tả
1 Nút thay đổi Button Cho phép người dùng thay đổi giao diện giao diện của hiển thị của lịch tập calendar
2 Lịch tập Div Lịch tập ở dạng tuần
Bảng 33: Mô tả màn hình lịch ở dạng tuần
2.2.5 Màn hình Calendar lịch booking đã đặt ở dạng ngày
Hình 35: Màn hình lịch ở dạng ngày
STT Tên Loại Mô tả
1 Nút thay đổi Button Cho phép người dùng thay đổi giao diện giao diện của hiển thị của lịch tập calendar
2 Lịch tập Div Lịch tập ở dạng ngày
Bảng 34: Mô tả màn hình lịch ở dạng ngày
2.2.6 Màn hình Calendar lịch xem chi tiết một buổi đã đặt
Hình 36: Màn hình lịch chi tiết một buổi đặt lịch
STT Tên Loại Mô tả
1 Thông tin chi Image Thông tin chi tiết của buổi tập, huấn luyện tiết vé đặt lịch viên, ngày giờ tập luyện.
2 Download vé Button Cho phép người dùng tải về vé tập lưu trữ tập
Bảng 35: Mô tả màn hình lịch chi tiết một buổi đặt lịch
2.2.7 Màn hình quản lý thông tin cá nhân
STT Tên Loại Mô tả
1 Nút profile Button Điều hướng tới page quản lý thông tin cá nhân
2 Phân đoạn Div thông tin cá nhân
3 Tên Input Tên của người dùng
4 Điện thoại Input Số điện thoại của người dùng
5 Giới tính Input Giới tính của người dùng
6 Tuổi Input Tuổi của người dùng
7 Giới thiệu Input Giới thiệu bản thân
8 Vào chế độ cập Button Bật chế độ cập nhật thông tin cá nhân người nhật thông tin dùng
Bảng 36: Mô tả màn hình quản lý thông tin cá nhân
2.2.8 Màn hình đặt lịch tập
2.2.1 Màn hình đặt lịch tập bước một, chọn lớp
Hình 38: Màn hình đặt lịch tập, chọn lớp
STT Tên Loại Mô tả
1 Vào trang đặt Button Vào trang đặt lịch lịch
2 Bước một chọn Button Hiển thiện danh sách lớp tập luyện lớp
3 Danh sách lớp List Danh sách lớp tập luyện
4 Nút chọn lớp Button Người dùng xác nhận chọn lớp theo nhu cầuBảng 37: Mô tả màn hình đặt lịch tập, chọn lớp
2.2.1 Màn hình đặt lịch tập bước hai, chọn huấn luyện viên nếu có
Hình 39: Màn hình đặt lịch tập, chọn huấn luyện viên
STT Tên Loại Mô tả
1 Chọn huấn Button Hiển thị danh sách huấn luyện viên chịu luyện viên trách nhiệm cho lớp đã chọn trước đó
2 Nút chọn huấn Button Chọn huấn luyện viên luyện viên
Bảng 38: Mô tả màn hình đặt lịch tập, chọn huấn luyện viên
2.2.1 Màn hình đặt lịch tập bước ba, chọn khung thời gian
STT Tên Loại Mô tả
1 Chọn thời gian Button Điều hướng tới bước chọn khung thời gian
2 Lịch chọn ngày Calendar Người dùng chọn ngày, tối đa đặt lịch trước
3 Khung thời gian Button Đưa ra khung thời gian người dùng chọn, từ
5h sáng tới 10h tới, mỗi buổi kéo dài một tiếng
Bảng 39: Mô tả màn hình đặt lịch tập, chọn khung thời gian
2.2.1 Màn hình đặt lịch tập bước bốn, xem lại thông tin đặt buổi tập
Hình 41: Màn hình đặt lịch tập, xem lại thông tin
STT Tên Loại Mô tả
1 Xem lại thông Button Điều hướng tới bước xem thông tin đặt lịch tin đặt trước khi xác nhận đặt
2 Tên lớp Div Tên lớp tập luyện
3 Tên huấn luyện Div Tên huấn luyện viên viên
4 Ngày Div Thời gian tập luyện
5 Giờ Div Giờ bắt đầu, kết thúc buổi tập
6 Xác nhật đặt Button Người dùng sau khi xem lại thông tin, xác lịch nhận đặt lịch
Bảng 40: Mô tả màn hình đặt lịch tập, xem lại thông tin
2.2.1 Màn hình đặt lịch tập bước năm, nhận vé tập
Hình 42: Màn hình đặt lịch tập, kết quả đặt lịch
STT Tên Loại Mô tả
1 Done Div Thông báo khách hàng đặt lịch đã thành công
2 Tên lớp Div Tên lớp tập luyện
3 Ngày tập Div Ngày tập luyện
4 Giờ tập Div Giờ bắt đầu, kết thúc buổi tập
5 Huấn luyện viên Div Tên huấn luyện viên
6 Khách hàng Div Tên khách hàng
7 Mã QR code để Image Cho phép dùng điện thoại để quét mã xem xem thông tin thông tin vé vé
Bảng 41: Mô tả màn hình đặt lịch tập, kết quả đặt lịch
2.2.1 Màn hình cài đặt giao diện
Hình 43: Màn hình thay đổi giao diện
STT Tên Loại Mô tả
1 Chọn giao diện Button Chọn cách layout
2 Chọn màu chủ Button Chọn màu chủ đạo đạo
3 Chọn độ tương Button Thay đổi độ tương phản phản
Bảng 42: Mô tả màn hình thay đổi giao diện
2.2.1 Màn hình đăng ký tài khoản
Hình 44: Màn hình đăng nhập
STT Tên Loại Mô tả
1 Email Input Người dùng nhập email
2 Password Input Người dùng nhập mật khẩu
3 Sign in Button Người dùng đăng nhập vào hệ thống
4 Tạo tài khoản Link Điều hướng người dùng tới trang đăng ký tài khoản
5 Quên mật khẩu Link Điều hướng người dùng tới trang quên mật khẩuBảng 43: Mô tả màn hình đăng nhập
Hình 45: Màn hình đăng ký tài khoản
STT Tên Loại Mô tả
1 Email Input Người dùng nhập email vào
2 Password Input Người dùng nhập mật khẩu
3 Confirm Input Người dùng xác nhận lại mật khẩu password
4 Show password Checkbox Check vào để hiển thị mật khẩu, xem lại mật khẩu
5 Xác nhận đăng Button Đăng ký tài khoản ký
6 Điều hướng về Link Điều hướng về trang đăng nhập trang đăng nhập
Bảng 44: Mô tả màn hình đăng ký tài khoản
Hình 46: Màn hình quên mật khẩu
STT Tên Loại Mô tả
1 Email Input Người dùng nhập email vào để hệ thống gửi mail đổi mật khẩu
2 Yêu cầu đổi mật Div Xác nhận yêu cầu đổi mật khẩu khẩu
Bảng 45: Mô tả màn hình quên mật khẩu
Hình 47: Màn hình kết thông báo hướng dẫn đổi mật khẩu
STT Tên Loại Mô tả
1 Hướng dẫn đổi Div Hướng dẫn người dùng đổi mật khẩu mật khẩu
2 Điều hương về Button Điều hương về trang đăng nhập trang đăng nhập
Bảng 46: Mô tả màn hình kết thông báo hướng dẫn đổi mật khẩu
2.3 Màn hình của Huấn luyện viên
Hình 48: Màn hình quản lý khách hàng của huấn luyện viên
STT Tên Loại Mô tả
1 Khách hàng của Div Điều hướng vào page xem danh sách người huấn luyện viên tập của huấn luyện viên
2 Tên khách hàng Div Tên của người tập
3 Giới tích Div Giới tính của người tập
4 Cân nặng Div Cân nặng của người tập
5 Chiều cao Div Chiều cao của người tập
6 Mục tiêu cảu Div Mục tiêu của người tập người tập
7 Các thao tác Button Cho phép thêm nhiệm vụ, cập nhật mục tiêu tập luyện của người tậpBảng 47: Mô tả màn hình quản lý khách hàng của huấn luyện viên
Hình 49: Màn hình quản lý khách hàng của admin
STT Tên Loại Mô tả
1 Thêm khách Button Cho phép quản trị thêm khách hàng mới hàng mới
2 Tìm kiếm khách Input Tìm kiếm khách hàng hàng
3 Tên khách hàng Div Đưa ra lời khuyên cách duy trình chỉ số
4 Tên khách hàng Text Tên khách hàng
5 Chỉnh sửa thông Button Cập nhật thông tin khách hàng tin khách hàng
6 Đặt lịch cho Button Đặt lịch cho khách hàng khách hàng
7 Thông tin chi Div Thông chi tiết của khách hàng tiết của khách hàng
Bảng 48: Mô tả màn hình quản lý khách hàng của admin
Hình 50: Màn hình quản lý lớp tập luyện của admin
STT Tên Loại Mô tả
1 Số thứ tư Text Cột thứ tư lớp tập luyện
2 Tên lớp tập Text Tên của lớp tập luyện
3 Miêu tả Text Cột miêu tả lớp tập luyện
4 State Text Trạng thái của lớp, 1: active, 2: pending
5 Type Text Loại lớp tập luyện
6 Action Button Cho phép người dùng cập nhật thông tin lớp, cập nhật loại tài khoản.
Bảng 49: Mô tả màn hình quản lý lớp tập luyện của admin
Hình 51: Màn hình cập nhật thông tin lớp tập luyện
STT Tên Loại Mô tả
1 Tên lớp input Thay đổi tên lớp tập luyện
2 Cập nhật state input Thay đổi trạng thái của lớp: 1: Active, 2:
3 Loại lớp học input Đánh loại lớp học, ví dụ lớp yoga
4 Nút cancel Button Người dùng hủy việc thay đổi thông tin lớp học
5 Nút save Button Người dùng xác nhận thay đổi thông tin lớp họcBảng 50: Mô tả màn hình cập nhật thông tin lớp tập luyện
CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG
Cài đặt
Visual studio code pnpm package management
Tải Frontend: https://github.com/phuocngd15/pt-booking-react-client-v2
Run: pnpm install để cài đặt các packages.
Vào package.json để chọn Run mục dev để chạy ứng dụng.
Hình 52: Màn hình cài đặt front-end
Tải Backend: https://github.com/phuocngd15/pt-booking-nodejs-server
Run: npm install để cài đặt các packages.
Vào package.json để chọn Run mục dev để chạy ứng dụng.
Hình 53: Màn hình cài đặt back-end
Phương pháp kiểm thử
Test case
ID Mô tả testcase Các bước thực Kết quả mong đợi Kết hiện quả
TestCase_01 Đăng ký tài khoản 1 Chọn chức năng Tài khoản được tạo Pass mới đăng ký tài khoản thành công, điều hướng
2 Điền thông tin tài tới trang đăng nhập khoản, email, password
3 Chọn đăng ký TestCase_02 Đăng ký tài khoản 1 Chọn chức năng Báo lỗi input mời Pass mới, nhưng điền đăng ký tài khoản nhập imail email thiếu 2 Điền thông tin password
3 Chọn đăng ký Bảng 51: Test case đăng ký tài khoản
ID Mô tả testcase Các bước thực hiện Kết quả mong đợi Kết quả
TestCase_03 Đăng nhập vào hệ 1 Chọn chức năng Đăng nhập thành công, Pass thống đăng nhập điều hướng tới trang
2 Điền thông tin tài dashboard khoản, email, password
3 Chọn đăng nhập TestCase_04 Đăng nhập không 1 Chọn chức năng Thông báo lỗi Pass đúng pass, tài đăng nhập khoản sai 2 Điền thông tin tài khoản, email, password
3 Chọn đăng nhập Bảng 52: Test case đăng nhập
ID Mô tả testcase Các bước thực hiện Kết quả mong đợi Kết quả
TestCase_05 Đăng ký buổi tập 1 Chọn chức năng Đăng ký thành công Pass luyện mới đăng ký buổi tập buổi tập, có vé tập
5 Xem lại thông tin đăng ký
6 Xác nhận đăng ký Bảng 53: Test case đặt lịch
2.4 Thực hiện nhiệm vụ hằng ngày
ID Mô tả testcase Các bước thực hiện Kết quả mong Kết đợi quả
TestCase_05 Thưc hiện nhiệm 1 Chọn chức năng xem danh Hệ thống tư Pass vụ hằng ngày, kiểm sách bài tập động đếm số tra xem hệ thống 2 Chọn bài tập lần và kết thúc có nhận diện và 3 Nhấn bắt đầu đếm khi đủ số đếm được số lần 4 Thưc hiện bài tập theo tập không video hướng dẫn
Bảng 54: Test case thưc hiện nhiệm vụ hằng ngày
