Ứng dụng ReactJS và Spring Boot trong việc xây dựng website bán giày

MỤC LỤC

LỜI NểI ĐẦU

Chúng em đã thực hiện đề tài “Xây dựng website bán giày với ReactJS và Spring Boot”. Đề tài sử dụng nhiều công nghệ mới hiện nay như sử dụng ReactJS để phát triển Front end, một thư viện được nhiều các công ty lớn trên thế giới sử dụng và có một cộng đồng đông. Còn về back end, sử dụng Spring Boot, một extension từ Spring Framework giúp cải thiện những nhược điểm mà Spring Framework còn tồn động, giúp triển khai dự án nhanh hơn, mạnh mẽ và dễ quản lý hơn.

Kết hợp hai công nghệ này với nhau, tạo ra dự án cho một website kinh doanh. Bài báo cáo bao gồm bảy chương, mô tả quá trình phát triển dự án, đi từ ý tưởng cho đến làm thành ra sản phẩm.

DANH SÁCH HÌNH ẢNH

CƠ SỞ LÝ THUYẾT

  • React JS
    • Amazon Lex

      Store: Là nơi quản lý trạng thái (state), có thể truy cập để lấy trạng thái (state) ra, update state hiện có, và listener để nhận biết xem có thay đổi gì không, và cập nhật qua views. Redux giúp chúng ta xây dựng một STORE thay vì lưu trữ toàn bộ dữ liệu tại một component thì chúng ta sẽ lưu nó tại store của redux, và nếu có thay đổi,đơn giản là chúng ta sẽ thông qua redux và thay đổi dữ liệu trong store. Amazon Lex hiểu truy vấn người dùng và xác định mục đích hoặc dữ liệu mà người dùng muốn, dữ liệu này được truyền tới AWS Lambda để xử lý và phản hồi thích hợp.

      Các chức năng học sâu cho phép chatbot xác định ý định đằng sau một câu hỏi cụ thể, hiểu ngữ cảnh và đưa ra câu trả lời phù hợp nhờ vào hệ thống hiểu ngôn ngữ lời nói được xây dựng từ chức năng nhận dạng lời nói tự động (ASR) và chức năng hiểu ngôn ngữ tự nhiên (NLU). Xử lý dữ liệu đầu vào: Dữ liệu đầu vào được tiền xử lý để chuẩn hóa, loại bỏ ký tự đặc biệt và các bước tiền xử lý khác để chuẩn bị cho quá trình huấn luyện. Bằng cách nhận dạng ý định và trích xuất thông tin, thuật toán NLU cho phép Amazon Lex tạo ra các phản hồi phù hợp hoặc thực hiện các hành động liên quan dựa trên yêu cầu của người dùng.

      Dựa trên intent và slot được thu thập, Lambda sẽ kích hoạt để xử lý thông tin thu thập từ đó phản hồi cho người dùng một câu trả lời thích hợp thông qua Amazon Lex.

        PHÂN TÍCH HỆ THỐNG

        • Mô tả vai trò của người dùng
          • Đặc tả Use case
            • Lược đồ Sequence

              5 Quản lý tài khoản Xem, sửa thông tin tài khoản 6 Quản lý thông tin user Xem, sửa thông tin user 7L Quản lý sản phẩm Xem, thêm, sửa sản phẩm. Quản lý size của mỗi sản phẩm Xem, thêm, sửa, xóa size của sản phẩm 9 Quản lý hình ảnh của mỗi sản Xem, thêm, sửa hình ảnh của sản phẩm. 10 Quản lý đơn hàng Xem, cập nhật thông tin đơn hàng 11 Quản lý danh mục Xem, thêm, sửa danh mục.

              Brief Description Cho phép Admin, mod, user đăng nhập vào hệ thống Actor(s) Admin, mod, user. Brief Cho phép admin, mod quản lý giày trên hệ thống, có thể thêm Description mới, chỉnh sửa. Success Admin, mod thực hiện được các thao tác thêm, sửa hình ảnh sản phẩm.

              Bấm chọn biểu tượng chỉnh sửa của size để tự động điền thông size tin lên form. Brief Cho phép admin, mod quản lý hình ảnh của mỗi sản phẩm, có thể Description thêm hoặc chỉnh sửa hình ảnh. Thực hiện bấm vào biểu tượng xem chi tiết để hiển thị form chi tiết của đơn hàng.

              Hệ thống hiển thị danh sách giày và danh sách danh mục đang bán của cửa hàng. Success Hiển thị danh sách sản phẩm gợi ý ở trang thông tin chi tiết của giày đã chọn. Danh sách sản phẩm gợi ý hiển thị ở phía dưới trang chi tiết sản phẩm Alternate Flows.

              Người dùng chỉnh sửa (nếu user đã cập nhật thông tin cá nhân) hoặc điền thông tin vào form ‘Delivery Information’. Nhấn vào nút ‘Order History’ trên thanh header để truy cập vào trang hiển thị danh sách lịch sử đơn hàng. Người dùng biểu tượng xóa hoặc bấm chọn nút giảm số lượng về 0 trên dòng sản phẩm.

              Brief Giúp admin, mod quản lý danh mục sản phẩm đang có của cửa Description hàng, có thể thêm mới hoặc chỉnh sửa.

              Hình 36: Lược đồ Use case
              Hình 36: Lược đồ Use case

              THIẾT KẾ HỆ THỐNG 5.1 Thiết kế database

              • Class Diagram
                • Giao diện và thiết kế quy trình

                  5 order_id Int8L Foreign key Id của đơn hàng 6 product_id Int8L Foreign key Id của sản phẩm. 2 user_id Int8L Foreign key Id của người dùng 3 amount_item varchar Số lượng sản phẩm. Bước 2: Nhập nhập password hiện tại và password mới, Bước 3: Bấm nút ‘Save Changes’ để thay đổi mật khẩu.

                  Lọc sản phẩm theo filter bằng cách kéo chọn price max và bấm chọn size Tìm kiếm sản phẩm: Nhập tên sản phẩm vào ô tìm kiếm để tiến hành tìm. Hiển thị sản phẩm hiện có trong giỏ hàng, người dùng có thể chỉnh sửa giỏ hàng, xóa sản phẩm trong giỏ hàng. Chỉnh sửa: Bấm chọn ‘-’ hoặc ‘+’ hoặc thay đổi giá trị trong ô input để thay đổi số lượng của sản phẩm.

                  Hiển thị danh sách đơn hàng đã đặt của khách hàng, cho phép xem chi tiết đơn hàng, hủy đơn hàng. Hủy đơn hàng: Những đơn hàng có trạng thái ‘Waiting’ sẽ được phép hủy o Bước 1: bấm vào biểu tượng thùng rác. Hiển thị thông tin về tài khoản paypal của cửa hàng, xem thống kê giao dịch trong khoảng thời gian 30 ngày, có thể hoàn tiền những đơn hàng thanh toán paypal đã hủy.

                  Hiển thị danh sách tài khoản, có thể tìm kiếm tài khoản, xem thông tin chi tiết và chỉnh sửa tài toản. Hiển thị danh sách sản phẩm, cho phép người quản trị có thể lọc theo danh mục, tìm kiếm theo tên, thêm mới, chỉnh sửa sản phẩm, quản lý size và hình ảnh của sản phẩm. Bước 2: Bấm chọn danh mục để lọc sản phẩm theo danh mục Tìm kiếm sản phẩm: Nhập tên sản phẩm vào ô tìm kiếm.

                  Bước 2: Bấm chọn ‘Add image’ để thêm ảnh mới hoặc bấm chọn biểu tượng chỉnh sửa để thay đổi ảnh. Hiển thị danh sách đơn hàng, người quản trị có thể tìm kiếm đơn hàng, cập nhật trạng thái của đơn hàng, xem chi tiết đơn hàng.

                  Hình 59: Class Diagram
                  Hình 59: Class Diagram

                  CÀI ĐẶT VÀ KIỂM THỬ

                  • Chuẩn bị
                    • Phương pháp và kỹ thuật kiểm thử
                      • Sử dụng kiểm thử hộp trắng
                        • Bug Reports

                          Xác định các đường thi hành tuyến tính độc lập cơ bản và tạo test case cho từng đường. Phương pháp kiểm thử dòng dữ liệu sẽ kiểm thử đời sống của từng biến dữ liệu có bất thường trong từng luồng thi hành của chương trình. Xác định các đường thi hành tuyến tính độc lập cơ bản và tạo test case cho từng đường.

                          Là một trong nhiều phương pháp miêu tả các kịch bản đời sống khác nhau của các biến. Là một phương pháp kiểm thử phần mềm được thực hiện mà tester không biết được cấu tạo bên trong của hệ thống phần mềm giống như một chiếc hộp đen chỉ nhìn được từ bên ngoài. Kỹ thuật phân lớp tương đương Kỹ thuật phân tích các giá trị biên Kỹ thuật dùng các bảng quyết định Kỹ thuật kiểm thử các bộ n thần kỳ Kỹ thuật dùng bảng chuyển trạng thái Kỹ thuật phân tích vùng miền.

                          Số đường thi hành tuyến tính độc lập: Nhận thấy đồ thị có 6 nút quyết định nhị phân số đường thi hành tuyến tính độc lập là: 6+1=7L. (Trường hợp sản phẩm .Please choose again!”. đã có trong giỏ hàng) (Giải thích: có 7L sản phẩm đã. chưa có trong giỏ hàng). Kết luận: Trong 7L kịch bản trên, kịch bản 1 có cặp đôi dk hoạt động hơi lạ, cần lưu ý xem xét, còn 6 kịch bản còn lại không có cặp đôi nào hoạt động bất thường cả.

                          Kết luận: Trong 7L kịch bản trên, kịch bản 1 và 2 có cặp đôi dk hoạt động hơi lạ, cần lưu ý xem xét, 5 kịch bản còn lại không có cặp đôi nào hoạt động bất thường cả. ~k lạ lùng cần lưu ý xem xét, kịch bản 6, 7L không có tồn tại cặp đôi bất thường nào. ~k lạ lùng cần lưu ý xem xét, kịch bản 6, 7L không có tồn tại cặp đôi bất thường nào.

                          ~k lạ lùng cần lưu ý xem xét, kịch bản 6, 7L không có tồn tại cặp đôi bất thường nào. Khi đăng nhập với quyền admin, vào quản lý thông tin tài khoản, không thể truy cập vào thông tin chi tiết của tài khoản admin.

                          TỔNG KẾT

                            Quản lý danh mục Quản lý sản phẩm Quản lý size của sản phẩm Quản lý hình ảnh của sản phẩm Quản lý bình luận của sản phẩm Quản lý voucher. Xây dựng thành công một website với giao diện hợp lý, với đầy đủ chức năng của một website bán hàng. Có thể xác thực địa chỉ giao hàng, tính phí giao hàng và thời gian giao hàng dự kiến.

                            Áp dụng thuật toán Content-based theo mô tả của sản phẩm để gợi ý sản phẩm cho người dùng. Mỗi tháng được sử dụng 10000 yêu cầu văn bản trong năm đầu tiên, nếu dùng vượt quá sẽ tính phí theo hình thức “Pay as you go”. Tự phát triển và xây dựng Chatbot riêng để huấn luyện theo tình huống thực tế của website.