Xây dựng website tìm kiếm huấn luyện viên gym cá nhân sử dụng Ant Design và MediaPipe

MỤC LỤC

CƠ SỞ LÝ THUYẾT

    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 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.

    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 Yêu cầu nghiệp vụ

    • Khách chưa đăng nhập
      • Khách đã đăng nhập
        • Huấn luyện viên
          • Quản trị viên

            ● 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 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. ● 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.

            ● 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. ● 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.

            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. ● 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.

            Mô hình hóa yêu cầu chức năng 1. Lược đồ usecase

            • Đặc tả Usecase 1. Đăng ký tài khoản
              • Lược đồ tuần tự 1. Đặt lịch

                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. 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. 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. 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ân Bảng 8: Mô tả lược đồ usecase quản lý thông tin cá nhân 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. 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. 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ân Bảng 11: Mô tả lược đồ usecase quản lý thông tin cá nhân. 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. 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.

                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. 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. 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,.

                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.

                Hình 5. Lược đồ usecase 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

                THIẾT KẾ XÂY DỰNG WEBSITE

                Thiết kế giao diện

                • Màn hình của Khách chưa đăng nhập 1. Trang chủ
                  • Màn hình của Hội viên

                    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. 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. 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.

                    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. 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ập.

                    Hình 30: 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

                    CÀI ĐẶT VÀ KIỂM THỬ HỆ THỐNG

                    Cài đặt Yều cầu

                    Tải Backend: https://github.com/phuocngd15/pt-booking-nodejs-server Run: npm install để cài đặt các packages.

                    Phương pháp kiểm thử Kiểm thử functional test

                      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.