Xây dựng website thương mại điện tử kinh doanh đồ thể thao

Trang web cũng tích hợp sẵn hệ thống vận chuyển nhằm hỗ trợ các cửa hàng trong việc vận chuyển đơn hàng đến người dùng.. Mục tiêu đề tài Chương trình cung cấp một ứng dụng đơn giản, d

TỔNG QUAN

L Ý DO CHỌN ĐỀ TÀI

Trong thời đại số hiện nay, mua sắm trực tuyến đã trở nên phổ biến, nhưng nhiều cửa hàng đồ thể thao vẫn gặp khó khăn trong việc triển khai bán hàng trực tuyến Nhận thấy vấn đề này, nhóm chúng tôi đã phát triển một trang web thương mại điện tử cho phép các cửa hàng thể thao dễ dàng đăng ký và bán hàng trực tiếp Trang web còn tích hợp hệ thống vận chuyển, hỗ trợ các cửa hàng trong việc giao hàng đến tay người tiêu dùng.

M ỤC TIÊU ĐỀ TÀI

Chương trình cung cấp một ứng dụng dễ sử dụng, cho phép người dùng mua, bán và tạo cửa hàng để tham gia vào kinh doanh và quản trị trên hệ thống Nó cũng tích hợp hệ thống giao hàng, với các tính năng hỗ trợ sẽ được cập nhật liên tục trong các phiên bản sắp tới.

P HƯƠNG PHÁP THỰC HIỆN

Nhóm đã tiến hành khảo sát và đánh giá các website thương mại điện tử trong lĩnh vực đồ thể thao, từ đó nhận diện được những điểm mạnh và hạn chế của chúng Dựa trên những phân tích này, nhóm đã phát triển một website mới sử dụng công nghệ hiện đại như ReactJS, Spring Framework, NodeJS, và ExpressJS, kết hợp với cơ sở dữ liệu MySQL và MongoDB Mục tiêu là tạo ra một website thân thiện, dễ sử dụng và phù hợp với nhiều đối tượng người dùng.

KHẢO SÁT THỰC TRẠNG

T RANG WEB SPORTER VN

Hình 2 1: trang web sporter.vn

Hệ thống bán lẻ Sporter.vn đồng hành cùng bạn giúp bạn nâng cao khả năng, trình độ thể thao

Các sản phẩm, dịch vụ của sporter.vn:

- Nhận đặt áo bóng đá đội tuyển, câu lạc bộ

- Bán lẻ giày thể thao các loại

- Bán lẻ quần short thể thao Nike chính hãng

- Bán lẻ áo thun thể thao chính hãng: Nike, Adidas, Puma…

- Các phụ kiện thể thao cho các môn: Bóng đá, Cầu lông, Bóng chuyền, Tennis… Ưu điểm:

- Bố cục rõ ràng phù hợp với mục tiêu bán đồ thể thao

- Có thể nhanh chóng đặt mua mà không cần đăng ký tài khoản

- Tốc độ tải trang nhanh

- Thông tin cho các sản phẩm được thể hiện đầy đủ

- Đối với các sản phẩm chưa được bán vẫn có thể đặt hàng được thay vì chỉ xem qua thông tin hoặc đặt hàng trước

- Chức năng thanh toán chưa tích hợp các ví điện tử, khi muốn thanh toán online phải liên hệ trực tiếp với shop

- Không lựa chọn được kích cỡ

Các sản phẩm đã hết hàng và những sản phẩm chưa được bán thường bị xen kẽ với nhau, tạo ra sự lộn xộn khi chúng nằm chung với các sản phẩm đang bán Điều này gây cảm giác rối mắt cho khách hàng.

- Đối với một số danh mục không thể hiện rõ sản phẩm dành cho nữ và cho nam

- Chưa cho phép đặt sản phẩm số lượng lớn.

T RANG WEB SPORT 1 VN

Hình 2 2: trang web sport1.vn

CÔNG TY TNHH THỂ THAO ĐỨC TRUNG (SPORT1) thuộc Tập Đoàn ĐỨC TRUNG, chính thức hoạt động từ năm 2007, đánh dấu sự ra đời của siêu thị thể thao SPORT1 Sự kiện này được xem là bước tiến quan trọng trong việc phân phối dụng cụ thể thao tới tay người tiêu dùng.

- Thể hiện đầy đủ và chi tiết danh mục sản phẩm

- Được lựa chọn kích thước sản phẩm

- Tốc độ tải trang nhanh

- Thiết kế chức năng tìm kiếm tốt

- Chưa tích hợp ví điện tử trong thanh toán

- Chưa chọn lựa màu sắc sản phẩm

- Vẫn còn các sản phẩm không có thông tin chi tiết.

T RANG WEB THETHAOKIMTHANH VN

Trang web thethaokimthanh.vn là nền tảng bán đồ thể thao của Thể thao Kim Thành, với sứ mệnh "nâng cao tầm vóc Việt", thể hiện quyết tâm cải thiện sức khỏe cộng đồng Sản phẩm trên trang web rất đa dạng, phù hợp với nhiều phân khúc giá, nhằm đáp ứng nhu cầu thể thao của mọi người.

Hình 2 3: Trang web thethaokimthanh.vn Ưu điểm:

- Bộ lọc sản phẩm theo 2 lựa chọn đó là về thương hiệu và mức giá

- Sắp xếp sản phẩm theo thứ tự tăng giảm dần…

- Sản phẩm được phân chia vào các mục nhỏ, mục lớn phân loại rõ ràng

- Không có phần tạo người dùng

- Chức năng thanh toán chưa hoàn thiện (chỉ có nhập vài thông tin cơ bản và người bán sẽ liên hệ qua số điện thoại)

- Không có thanh toán bằng thẻ…

T RANG WEB DRAHA VN

Hình 2 4: trang web draha.vn

Trang web draha.vn chuyên cung cấp quần áo thể thao với phong cách hiện đại và đa dạng mẫu mã đẹp mắt Với nhiều ưu điểm nổi bật, trang web này hứa hẹn mang đến cho người tiêu dùng những sản phẩm chất lượng và thời trang.

- Có nhiều mẫu mã và các màu cho từng mã

- Có chức năng thanh toán online

- Bộ lọc sản phẩm theo màu sắc, kích cỡ và giá

- Không có phần tạo người dùng.

K ẾT LUẬN

Những vấn đề cần chú ý:

- Thiết kế giao diện phù hợp với người sử dụng

- Để ý tới tác vụ nặng như load ảnh … để tăng tốc độ trang web từ đó tăng trải nghiệm khách hàng

- Bố cục, màu sắc phù hợp với người sử dụng

- Thiết kế chức năng đơn giản và phù hợp với các khách hàng

Các ưu điểm đã đúc kết được:

- Xây dựng website đơn giản, bố cục rõ ràng, dễ sử dụng và thích hợp cho nhiều lứa tuổi

- Dễ dàng thay đổi kích thước, màu sắc sản phẩm…

- Đa dạng hóa các loại sản phẩm

- Tối ưu hóa tốc độ tải trang

- Tránh các thủ tục rườm rà, phức tạp

- Dễ dàng phân loại các loại sản phẩm dành cho phái nam và phái nữ

Các nhược điểm cần rút kinh nghiệm:

- Tránh xây dựng trang web rườm rà, phức tạp

- Không xây dựng các chức năng dư thừa gây lãng phí tài nguyên

- Không hiển thị các thông tin không liên quan

- Hạn chế tối đa việc chèn quá nhiều quảng cáo và các khuyến mãi

Các tính năng cần bổ sung:

- Xây dựng thêm chức năng cho phép các cửa hàng tham gia buôn bán trên website

- Tích hợp thêm hình thức thanh toán trực tuyến

- Thêm các chức năng tùy chọn kích thước, màu sắc

PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG

T ÀI LIỆU ĐẶC TẢ YÊU CẦU

Tài liệu này được biên soạn dành cho các thầy cô và các bên liên quan, nhằm cung cấp cái nhìn sâu sắc về dự án đang trong quá trình phát triển Dự án sẽ ra mắt với những chức năng cơ bản và sẽ liên tục cập nhật, phát triển thêm các tính năng mới, nhằm đảm bảo hệ thống hoạt động ổn định và phát triển bền vững trong tương lai.

Giới thiệu về ứng dụng cung cấp một website cho các cửa hàng kinh doanh đồ thể thao, giúp họ thực hiện giao dịch mua bán trực tuyến và chuyển đổi số hiệu quả Hệ thống còn tích hợp chức năng giao hàng, cho phép các cửa hàng giao đơn hàng trực tiếp đến tay khách hàng một cách thuận tiện.

Glossary V1.0: phiên bản đầu tiên

User requirements definition Phiên bản 1.0 sẽ mang đến cho khách hàng các chức năng sau:

Guest: Đăng ký, xem sản phẩm, so sánh sản phẩm

Để sử dụng hiệu quả trang web, người dùng có thể thực hiện các thao tác như thêm sản phẩm vào giỏ hàng, mua hàng và thanh toán Ngoài ra, người dùng cũng cần đăng nhập và đăng xuất để quản lý tài khoản của mình Họ có thể xem và chỉnh sửa thông tin tài khoản, cũng như điều chỉnh giỏ hàng theo nhu cầu Bên cạnh đó, người dùng có thể bình luận về sản phẩm, xem lịch sử mua hàng và chia sẻ đơn hàng với người khác.

Người bán hàng: đăng ký, đăng nhập, đăng xuất, quản lý cửa hàng, quản lý sản phẩm, quản lý đơn hàng, thống kê, thêm mã giảm giá

Người giao hàng có thể dễ dàng đăng ký, đăng nhập và đăng xuất khỏi hệ thống Họ có thể xem các đơn hàng đã chuẩn bị xong, nhận hàng và giao hàng một cách thuận tiện Ngoài ra, người giao hàng cũng có khả năng theo dõi các đơn hàng đã giao thành công.

Người quản trị hệ thống: quản lý tất cả người dùng, quản lý tất cả người bán hàng, quản lý tất cả

8 người giao hàng, quản lý tất cả sản phẩm, quản lý tất cả cửa hàng

Yêu cầu phi chức năng:

1 Sức chứa khoảng 100 người dùng truy cập cùng lúc

2 Chức năng linh hoạt cho việc đăng nhập giữa các actor khác nhau

4 Giao diện phù hợp cho mọi lứa tuổi

System architecture Hệ thống sử dụng các công nghệ mới: reactjs, spring framework…

1 Sử dụng mô hình mvc + 3 tier để thiết kế và sử dụng song song 2 server để chạy ứng dụng

2 Phân loại người sử dụng (user, seller, shipper và admin)

Yêu cầu phi chức năng:

1 Các dữ liệu đã được backup nên dễ dàng phục hồi

2 Mã hóa dữ liệu nhạy cảm

System evolution 1 Tích hợp thêm các chức năng thanh toán bằng paypal…

Appendices Phiên bản phần mềm: v1.0

Hệ quản trị cơ sở dữ liệu: mysql, mongodb

Công nghệ sử dụng: reactjs, spring framework, nodejs Host: Heroku

L ƯỢC ĐỒ USECASE

11 Đối tượng Tên chức năng Mô tả

Guest Sign up Khách vãng lai có thể đăng ký để trở thành người dùng để sử dụng web

Guest View product Khách vãng lai có thể xem các thông tin các sản phẩm

User Add product to cart Người dùng có thể thêm một sản phẩm vào giỏ hàng

User Order Sau khi thêm sản phẩm vào giỏ hàng, người dùng có thể đặt mua các sản phẩm trong giỏ hàng

User Pay Người dùng lựa chọn 1 trong 2 hình thức thanh toán: thanh toán bằng tiền mặt khi nhận hàng và thanh toán bằng thẻ

User Cash on delivery Người dùng có thể trả tiền mặt khi nhận hàng

User Pay by credit card Người dùng có thể thanh toán online bằng ví điện tử paypal

Người dùng có thể xem thông tin tài khoản của chính mình

Người dùng có thể chỉnh sửa thông tin tài khoản

Người dùng có thể nhận xét sau khi mua sản phẩm, xem lại lịch sử mua hàng, và chia sẻ đơn hàng với bạn bè Nếu quên mật khẩu, họ có thể dễ dàng khôi phục lại Bên cạnh đó, người giao hàng có thể đăng ký tham gia vào hệ thống để trở thành shipper.

Shipper View products already delivery

Người giao hàng có thể xem các đơn hàng có thể được giao

Shipper Receive orders Người giao hàng thực hiện nhận đơn hàng trên hệ thống

Shipper Delivery orders Người giao hàng xác nhận các đơn hàng đã giao

Shipper View orders of mine

Người giao hàng xem lại lịch sử các đơn đã giao

Seller Sign up for seller Người bán hàng có thể đăng ký để trở thành viên trên hệ thống

Seller Static Người bán hàng có thể thống kê doanh thu từng cửa hàng

Seller Sale off Người bán hàng có thể thêm các mã khuyến mãi

Seller Manage store Người bán hàng có thể tạo ra và quản lý các cửa hàng riêng

Seller Manage products Người bán hàng có thể tạo ra và quản lý sản phẩm trong cửa hàng

Seller Manage order Người bán hàng quản lý các đơn hàng của người dùng đã đặt

Admin Manage all users Người quản trị quản lý tất cả người dùng

Admin Manage system Người quản trị quản lý hệ thống

Admin Manage all sellers Người quản trị quản lý tất cả người bán hàng

Người quản trị quản lý tất cả sản phẩm

Admin Manage all store Người quản trị quản lý tất cả cửa hàng

Đ ẶC TẢ USECASE

Name Xem thông tin sản phẩm

Khách vãng lai truy cập vào trang chủ hệ thống sẽ hiển thị thông tin sản phẩm

Post-conditions Sản phẩm sẽ được hiển thị trên trang chủ

Basic flow Người dùng thực hiện các bước sau:

1 Khách hàng truy cập vào trang chủ vào trang chủ

2 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/products lấy tất cả các sản phẩm trong hệ thống

3 BE trả về tất cả các sản phẩm

4 FE hiển thị tất cả sản phẩm lên trang chủ

Exception point Hệ thống hiển thị thông báo chưa có sản phẩm

Hình 3 2: view products sequence diagram

3.3.2 Xem chi tiết sản phẩm

Name Xem thông tin sản phẩm

Khách hàng truy cập vào một sản phẩm hệ thống sẽ hiển thị thông tin chi tiết của sản phẩm

Post-conditions Sản phẩm sẽ được hiển thị trên trang chi tiết sản phẩm

Flow of events sd View Product

Guest Home page Product Controller Database

Call API get all products()

List products model() show products()

1 Truy cập vào trang chủ

2 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/product/category lấy tất cả các chi tiết sản phẩm trong hệ thống

3 BE trả về tất cả các sản phẩm

4 FE hiển thị tất cả sản phẩm lên trang chủ

Hình 3 3: view detail product sequence diagram

Khi một khách hàng chưa có tài khoản trong hệ thống có thể chọn mục đăng ký

Pre-conditions Chưa có tài khoản sd View Detail Product

Guest Home page Product API

To view product details, simply click on a product from the homepage This action retrieves the specific product ID, allowing access to comprehensive information about the product The product detail entity and model provide essential insights, ensuring users can easily understand the features and specifications Ultimately, this process showcases the product details effectively.

Post-conditions Có tài khoản trong hệ thống

Basic flow Người dùng chưa có tài khoản thực hiện các bước sau:

1 Ấn vào nút đăng ký

2 Điền tất cả thông tin vào form đăng ký

4 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/signup để tạo ra một user mới

5 Hệ thống chuyển về trang chủ kèm cùng với tài khoản đã đăng ký

Exception point Hệ thống hiển thị thông báo

Name Đăng nhập sd Sign up

Guest Sign up form Sign up controller

Call Sign up API(name, dateofbirth, email, address, gender, username, password)

To create a user schema, include essential fields such as name, date of birth, email, address, gender, username, and password Implement the signup model to facilitate user registration and establish a user entity based on this model Upon successful creation of the user entity, save it to the database, returning a status of 201 to indicate successful user registration Finally, redirect the user to the home page to complete the signup process.

Brief description Đăng nhập vào tài khoản khách hàng

Pre-conditions Đã có tài khoản

Post-conditions Đăng nhập thành công và có thể thực hiện các thao tác tương ứng

1 Ấn vào nút đăng nhập

2 Điền tất cả thông tin vào form đăng nhập

4 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/login

5 Hệ thống chuyển về trang chủ kèm cùng với tài khoản đã đăng nhập

Alternative flow 1 Người dùng chọn vào mục đăng nhập bằng số điện thoại

2 Người dùng nhập tên, địa chỉ và số diện thoại

3 Người dùng chọn vào nút đăng nhập

Exception point Hệ thống hiển thị thông báo lỗi sai username và password

3.3.5 Xem thông tin tài khoản

Name Xem thông tin tài khoản

Xem thông tin tài khoản khách hàng

Post-conditions Hiển thị đầy đủ thông tin tài khoản

1 Ấn vào tài khoản của tôi

2 Hệ thống gọi đến API sd Login

User Login form User Controller

To log in, users must enter their username and password The system validates these credentials through a login function, retrieving the user entity if the information is correct If successful, the user model is created, and the user is redirected to the home page In case of incorrect credentials, an error message is displayed, indicating that the username or password is incorrect.

19 https://tlcngroup2be.herokuapp.com/user/:id

3 Hệ thống hiển thị thông tin tài khoản của user

Exception point Hệ thống hiển thị thông báo lỗi

Hình 3 6: View information sequence diagram

Name Thêm vào giỏ hàng

Thêm sản phẩm vào giỏ hàng

Pre-conditions Đã có tài khoản sd View UserInfomation

User Infomation form User Controller User service

Post-conditions Sản phẩm thêm vào giỏ hàng thành công

1 Ấn vào sản phẩm muốn thêm

2 Chọn thêm vào giỏ hàng

3 Hệ thống tự động thêm sản phẩm vào giỏ hàng

4 Hiển thị thông báo thêm vào giỏ hàng thành công

Hình 3 7: Add product to cart

Người dùng sau khi lựa chọn các sản phẩm mong muốn có thể lựa chọn đặt hàng sd AddToCart

User Button add to cart User Controller User Service

Add product to cart(ProductModel)

Add product to cart(Product Model)

Post-conditions Đơn hàng được gửi về các cửa hàng để chuẩn bị

1 Thêm tối thiểu một sản phẩm vào giỏ hàng

4 Kiểm tra thông tin sản phẩm và lựa chọn hình thức thanh toán

5 Chọn đặt hàng bằng tiền mặt

6 Hệ thống gửi đến API https://tlcngroup2be.herokuapp.com/user/order

7 BE gửi thông báo thành công

8 Hệ thống chuyển về trang chủ

Alternative flow 1 Thêm tối thiểu một sản phẩm vào giỏ hàng

4 Kiểm tra thông tin sản phẩm và lựa chọn hình thức thanh toán

5 Chọn thanh toán bằng thẻ tín dụng

6 Lựa chọn phương thức thanh toán

7 Điền đầy đủ thông tin thẻ

9 Hệ thống gửi đến API https://tlcngroup2be.herokuapp.com/user/order

10 BE gửi thông báo thành công

11 Hệ thống chuyển về trang chủ

3.3.8 Xem lịch sử đặt hàng

Name Xem lịch sử đặt hàng

Khách hàng có thể xem lịch sử đặt hàng

Post-conditions Hệ thống hiển thị lịch sử đặt hàng

1 Ấn vào đơn hàng

2 Hệ thống gửi đến API https://tlcngroup2be.herokuapp.com/user/orderhistory/:id

3 BE gửi danh sách đơn hàng

4 Hệ thống hiển thị lên trang xem lịch sử sd Order

User Confirm cart page Order Controller Order Service

To effectively manage product orders, utilize the database's click order button to initiate the order process This involves creating a product list entity and saving it accordingly Upon successful completion of the order, a confirmation message will be displayed, ensuring that the order has been saved successfully.

Alternative flow 1 Nếu xảy ra các trường hợp khác hệ thống sẽ thông báo lỗi

Hình 3 9: order history sequence diagram

3.3.9 Xem chi tiết đơn hàng

Name Xem lịch sử chi tiết đơn hàng

Khách hàng có thể xem lịch sử chi tiết đơn hàng

Post-conditions Hệ thống hiển thị lịch sử chi tiết đơn hàng đã đặt sd View order history

User view order history page

To view order history, use the function with the specific order ID You can retrieve an order by its ID, and to create a new order, utilize the create order entity function, which will return the corresponding order entity Additionally, the create order model function will return the order model Finally, you can display the order history for review.

1 Ấn vào mục đơn hàng

2 Ấn vào một đơn hàng bất kỳ

3 Hệ thống gửi đến API https://tlcngroup2be.herokuapp.com/user/orderdetailhistory /:id

4 BE gửi danh sách chi tiết sản phẩm trong đơn hàng

5 Hệ thống hiển thị lên trang xem lịch sử

Exception point Hệ thống hiển thị thông báo không có đơn hàng

Hình 3 10: Order details sequence diagram sd Order Details

User Order detail form Order controller Order service Database

Khách hàng có thể bình luận sản phẩm

Pre-conditions Đã có tài khoản, đã mua sản phẩm

Post-conditions Bình luận được thêm vào sản phẩm

1 Ấn vào đơn hàng

2 Ấn vào một đơn hàng bất kỳ

4 Hệ thống gửi đến API https://tlcngroup2be.herokuapp.com/user/comment

5 BE lưu bình luận vào sản phẩm

6 Hệ thống hiển thị thông báo bình luận thành công Alternative flow

Exception point Hệ thống thông báo thêm bình luận chưa thành công

Name Tạo ra một cửa hàng mới

Người bán hàng có thể tạo ra một cửa hàng mới

Pre-conditions Đã có tài khoản bán hàng

Post-conditions Tạo thành công một cửa hàng

Basic flow Người dùng thực hiện các bước sau: sd Comment

User Comment form Comment controller

The database functionality includes creating a comment using the comment model, establishing a comment entity, and saving the comment entity Upon successful completion of these actions, a success message is displayed to confirm the operation.

1 Truy cập vào trang chủ

2 Đăng nhập bằng tài khoản người bán hàng

3 Truy cập vào trang chủ của người bán hàng

5 Nhập thông tin cần thiết

6 Ấn nút tạo cửa hàng

7 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/store tạo cửa hàng mới

8 BE tạo ra một cửa hàng và lưu trữ vào trong database

9 BE trả về thông tin cửa hàng

10 Hệ thống gọi đến API lấy tất cả các cửa hàng thuộc sở hữu của chủ cửa hàng đó

11 BE lấy tất cả các cửa hàng thuộc sở hữu của chủ cửa hàng đó

12 BE trả về các cửa hàng

13 FE hiển thị cửa hàng lên trang quản lý

Exception point Hệ thống thông báo lỗi tạo cửa hàng không thành công

Hình 3 12: create store sequence diagram

3.3.12 Chỉnh sửa một cửa hàng

Name Chỉnh sửa thông tin một cửa hàng

Người bán hàng có thể chỉnh sửa một cửa hàng tùy ý

Pre-conditions Đã có tài khoản bán hàng

Cửa hàng phải tồn tại

Post-conditions Chỉnh sửa thành công thông tin một cửa hàng

Flow of events sd Create Store

Store API Store entity Database

Enter all store information(userId, nameStore, storeDescription, image)

Call API create a store(userId, nameStore, storeDescription, image)

Create new store schema(userId, nameStore, storeDescription, image)

Add store schema to database() return store information() return store information()

To retrieve all stores associated with a specific user, utilize the API by providing the userId This API call will access the database and return all stores linked to the given userId, effectively displaying all relevant store information for that user.

1 Người bán hàng ấn vào nút chỉnh sửa của cửa hàng

2 FE hiển thị thông tin của cửa hàng

3 Người bán hàng nhập các thông tin cần chỉnh sửa và ấn chỉnh sửa

4 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/store/:id chỉnh sửa thông tin cửa hàng

5 BE cập nhật thông tin vào trong cơ sở dữ liệu

6 BE trả về thông báo cập nhật thành công

7 FE hiển thị thông báo cập nhật thành công và chuyển về trang quản lý

Exception point Nếu xảy ra các trường hợp khác hệ thống sẽ thông báo lỗi

Hình 3 13: Update store sequence diagram

3.3.13 Thêm sản phẩm sd Update store

Seller Update store form Store API Store entity Database

Enter all information you want to update in store(storeId, nameStore, storeDescription, image)

Save store schema in database() return store information() return message update successfully() show message update successfully()

Name Thêm sản phẩm trong cửa hàng

Người bán hàng thêm một sản phẩm vào cửa hàng

Pre- conditions Đã có tài khoản bán hàng

Cửa hàng phải tồn tại

Thêm sản phẩm thành công

1 Ấn vào chi tiết của một cửa hàng

5 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/seller/product

6 Nhập thông tin chi tiết của loại sản phẩm

7 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/seller/product/categoryclot hes

8 Hệ thống thông báo thêm sản phẩm thành công

Hệ thống thông báo lỗi thêm sản phẩm thất bại

Hình 3 14: create product sequence diagram

3.3.15 Chỉnh sửa thông tin sản phẩm

Name Chỉnh sửa một sản phẩm

Người bán hàng có thể chỉnh sửa một sản phẩm

Pre-conditions Đăng ký tài khoản bán hàng

Có ít nhất một cửa hàng

Có ít nhất một sản phẩm

Post-conditions Chỉnh sửa thành công một sản phẩm

1 Đăng nhập bằng tài khoản người bán hàng sd Create product

Product API Product entity Database

Create a product(storeid, category, name, quantity, price, description, image)

Call create a product API(storeid, category, name, quantity, price, description, image)

Create new product schema (storeid, category, name, quantity, price, description, image)

Add product schema to database() return product information() return product information()

Call get all product by storeId (storeId) get all products by storeId(storeId) return all product by storeId() return all product by storeId() show all products by storeId()

2 Truy cập vào trang quản lý cửa hàng

3 Bấm vào nút chi tiết của cửa hàng cần tạo sản phẩm

4 Ấn vào nút thông tin một sản phẩm

5 FE hiển thị thông tin sản phẩm

6 Người bán hàng ấn nút chỉnh sửa

7 Chỉnh sửa các thông tin cần thiết và ấn nút lưu

8 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/product/:id chỉnh sửa thông tin sản phẩm

9 BE lưu thông tin sản phẩm chỉnh sửa vào cơ sở dữ liệu

10 BE trả về thông tin đã chỉnh sửa

11 FE hiển thị thông tin cho người bán hàng

Exception point Hệ thống thông báo chỉnh sửa sản phẩm thất bại

Hình 3 15: Update product sequence diagram sd Update product

Product API Product schema Database

Enter all information you want to update(name, quantity, price, description, image, productId)

Call update product API(name, quantity, price, description, image, productId)

Create new product schema(name, quantity, price, description, image, productId)

Save product schema to database() return product information() return product information() return product information() show product update information()

Name Xử lý đơn hàng

Xử lý đơn hàng

Cửa hàng phải tồn tại Đã có đơn hàng

Post-conditions Xử lý đơn hàng thành công

1 Vào trang quản lý cửa hàng

3 Hệ thống gọi đến API https://cnpmmbe.herokuapp.com/seller/order/4

4 BE gửi lại thông tin đặt hàng

5 Seller xác nhận đơn hàng

6 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/seller/orderdetail/status /2

7 Hệ thống thông báo xác nhận thành công

Extension point Hệ thống thông báo đơn hàng không tồn tại và reload lại trang

Hình 3 16: Solve order sequence diagram

Thống kê đơn hàng bán được của một cửa hàng

Cửa hàng phải tồn tại sd Solv e order

Seller Order form Order controller order detail entity

To update the status of an order detail, use the function `updateStatusOrderDetail(id)` to retrieve and modify the order's information After making changes, ensure to save the order detail to the database with `saveOrderDetailToDB(orderDetail)` Upon successful completion of the update, return a confirmation message indicating that the update was successful.

Hiển thị thống kê theo ngày, tháng, quý, năm và khoảng thời gian tùy ý

3 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/seller/order/:id/statusfinis hed

4 BE gửi lại thông tin thống kê

5 Hệ thống hiển thị thống kê

Hệ thống hiển thị cửa hàng chưa bán được sản phẩm

Hình 3 17: Static sequence diagram sd Static

Seller Static form Order controller static model order service

To retrieve order details by store ID, use the function `static(id)`, which creates an order detail entity This process returns a list of order detail entities Subsequently, a static model is generated from the list of order details, allowing for the display of a comprehensive list of static models.

3.3.18 Lấy thông tin đơn hàng cần giao

Name Lấy thông tin đơn hàng cần giao

Lấy thông tin toàn bộ đơn hàng cần giao

Pre-conditions Đăng ký tài khoản người giao hàng

Post-conditions Hiển thị danh sách đơn hàng cần giao

1 Vào trang người giao hàng

2 Hệ thống gọi đến API https://cnpmmbe.herokuapp.com/shipper

3 BE gửi lại thông tin đơn hàng

4 Hệ thống hiển thị đơn hàng

Exception point Hệ thống thông báo chưa có đơn hàng cần giao

Hình 3 18: Get list order already ship

Name Lấy thông tin đơn hàng đã nhận

Lấy thông tin toàn bộ đơn hàng đã nhận

Pre-conditions Đã có tài khoản người giao hàng

Post-conditions Hiển thị danh sách đơn hàng cần giao

2 Vào mục đơn hàng đã nhận

3 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/shipper/order/0 sd Get order already shipped

Shipper Order already ship Shipper controller form shipper model Shipper service

The database processes the order shipment by retrieving the shipped orders using the function `get_order_already_ship()` It then creates an order detail entity and returns a list of these entities Subsequently, a shipper model is generated from the list of order detail entities, which is then displayed through the function `show_list_shipper_model()`.

4 BE gửi lại thông tin đơn hàng

5 Hệ thống hiển thị đơn hàng đã nhận

Exception point Hệ thống hiển thị thông báo chưa nhận đơn hàng

Hình 3 19: Get list recieved order already ship

Name Lấy thông tin đơn hàng đã giao

Lấy thông tin toàn bộ đơn hàng đã giao sd Order receiv ed

Shipper Order already Shipper controller recieved ship form

Click column recived order already ship()

Pre-conditions Đã có tài khoản người giao hàng

Post-conditions Hiển thị danh sách đơn hàng đã giao

2 Vào mục đơn hàng đã giao

3 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/shipper/ordersuccess/:i d

4 BE gửi lại thông tin đơn hàng

5 Hệ thống hiển thị đơn hàng đã giao tương ứng với từng shipper

Exception point Hệ thống hiển thị thông báo chưa nhận đơn hàng

Hình 3 20: Get list order by shipperId

Name Quản lý người dùng

Admin có được toàn bộ người dùng và có thể tùy ý thực hiện các chức năng thêm, xóa, sửa tất cả người dùng

Pre-conditions Đăng nhập bằng tài khoản admin

Post-conditions Hệ thống hiển thị toàn bộ người dùng, admin có thể tùy ý thêm, xóa, sửa người dùng

Flow of events sd Order receiv ed

Shipper Shipper Order Shipper controller Shipper service

Get order recieved by shipper(shipperId)

Get order recieved by shipper(shipperid)

Return order recieved by shipper()

2 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/admin/users

3 BE gửi lại thông tin toàn bộ khách hàng

4 Hệ thống hiển thị thông tin khách hàng

5 Admin tiến hành tùy ý quản lý khách hàng

Exception point Hệ thống thông báo lỗi ra màn hình

Hình 3 21: Manage user sequence diagram

Name Quản lý cửa hàng

Brief Lấy thông tin toàn bộ cửa hàng sd Manage user

Admin Manage user form Admin controller

To manage users effectively, utilize the function to retrieve all user entities, allowing for comprehensive access to user data Create a user entity to facilitate the addition of new users, and subsequently generate a list of user models based on the retrieved user entities Finally, display the complete list of user models for easy reference and management.

Post-conditions Hiển thị danh sách toàn bộ cửa hàng, admin có quyền quản lý tất cả các cửa hàng

2 Vào mục tất cả cửa hàng

3 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/admin/stores

4 BE gửi lại thông tin toàn bộ cửa hàng

5 Hệ thống hiển thị thông tin cửa hàng

6 Admin có quyền thao tác thêm, xóa, chỉnh sửa trên tất cả cửa hàng

Exception point Hệ thống thông báo chưa có cửa hàng

Hình 3 22: Manage user sequence diagram

Name Quản lý đơn hàng

Lấy thông tin toàn bộ đơn hàng

Post-conditions Hiển thị danh sách toàn bộ đơn hàng, admin có quyền thao tác trên toàn bộ đơn hàng

Basic flow Người dùng thực hiện các bước sau: sd Manage stores

Admin Manage store form Admin controller

Store model store service store entity

To manage stores effectively, utilize the function to retrieve all store entities This process involves creating a list of store entities and converting it into a corresponding list of store models Finally, display the complete list of store models to showcase all available stores.

2 Vào mục tổng đơn hàng

3 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/admin/orders

4 BE gửi lại thông tin toàn bộ đơn hàng

5 Hiển thị danh sách toàn bộ đơn hàng, admin có quyền thao tác trên toàn bộ đơn hàng

Exception point Hệ thống hiển thị thông báo chưa có đơn hàng

Hình 3 23: manage orders sequence diagram

3.3.24 Quản lý sản phẩm sd Manage orders

Order model order service order entity

To manage orders effectively, utilize the function to retrieve all orders, which will generate a comprehensive list of order entities Subsequently, create a list order model based on these entities, enabling a structured return of the order model Finally, display the list order model to present the organized order information clearly.

Name Quản lý sản phẩm

Admin quản lý toàn bộ sản phẩm trên hệ thống

Post-conditions Hiển thị danh sách toàn bộ sản phẩm, admin có quyền thao tác trên toàn bộ sản phẩm

3 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/admin/products

4 BE gửi lại thông tin toàn bộ sản phẩm

5 Hệ thống hiển thị thông tin sản phẩm, admin có quyền thao tác trên toàn bộ sản phẩm

Hình 3 24: manage product sequence diagram

Name So sánh giá sản phẩm

So sánh giá giữa các sản phẩm

Hiển thị danh sách toàn bộ giá sản phẩm liên quan

Flow of sd Manage products

To manage products effectively, utilize the function to retrieve all products, followed by creating a list of product entities This process involves generating a list of product models from the product entities and subsequently displaying the list of product models for easy access and management.

1 Người dùng ấn vào sản phẩm

2 Hệ thống gọi đến API https://tlcngroup2be.herokuapp.com/product/suggestions/name /Áo thể thao

3 BE gửi lại các sản phẩm liên quan

4 Hệ thống hiển thị các sản phẩm liên quan

Hệ thống hiển thị thông báo chưa có sản phẩm liên quan

Hình 3 25: Comparing product sequence diagram sd Comparing Product

Guest Button comparing Home controller Product service Database

3.3.26 Quản lí mã giảm giá

Name Quản lí mã giảm giá

Người bán hàng có thể quản lý mã giảm giá của từng sản phẩm

Post-conditions Sản phẩm đã được áp dụng mã giảm giá

1 Người bán hàng vào trang quản lý cửa hàng

5 Người bán hàng có thể thêm, xóa, chỉnh sửa mã giảm giá Alternative flow

Exception point Hệ thống hiển thị thông báo chưa có mã giảm giá

Name Chia sẻ đơn hàng

Người dùng có thể chia sẻ giỏ hàng cho người khác để tiết kiệm phí ship

Post-conditions Gộp đơn hàng

Flow of events sd Coupon

Seller Coupon form Coupon controller Coupon service

1 Thêm sản phẩm vào giỏ hàng

2 Chia sẻ mã code cho người bạn mong muốn

3 Người dùng được chia sẻ nhập mã chia sẻ vào ô

4 Hệ thống tự động cập nhật đơn hàng

Exception point Hệ thống hiển thị thông báo mã chia sẽ không tồn tại

Hình 3 27: Sharing cart sequence diagram

3.3.28 Tạo mã khuyến mãi sd Share cart

Add proudct to cart & enter share code()

Name Tạo mã khuyến mãi

Người bán hàng có thể tạo mã khuyến mãi của từng cửa hàng

Post-conditions Mã khuyến mãi được áp dụng vào cửa hàng

1 Đăng nhập bằng tài khoản seller

3 Chọn cửa hàng muốn quản lý mã giảm giá

4 Thực hiện thêm mã giảm giá

5 Hệ thống thông báo thêm mã giảm giá thành công và hiển thị mã giảm giá

Exception point Hệ thống thông báo thêm mã giảm giá thất bại

Hình 3 28: Create voucher sd Voucher

Seller Voucher Form Voucher Controller Voucher service Database

L ƯỢC ĐỒ LỚP

P HÂN TÍCH LƯỢC ĐỒ CƠ SỞ DỮ LIỆU

Hình 3 30: cơ sở dữ liệu mysql

Hình 3 31: cơ sở dữ liệu mongodb

Một người dùng có các thuộc tính như id, name, gender, birthdate, email, address, phone, username và password Khách hàng có thể đăng ký tài khoản với vai trò bình thường, trở thành chủ cửa hàng hoặc người giao hàng, với vai trò của người dùng được xác định qua thuộc tính role.

- Một cửa hàng có các thuộc tính sau: id, user, name store, store description, image Một chủ cửa hàng có thể có một hoặc nhiều cửa hàng

- Một sản phẩm có các thuộc tính sau: id, store, category, name, quantity, price, description, image Một cửa hàng có thể có một hoặc nhiều sản phẩm

- Một bình luận có các thuộc tính sau: id, username, comment, star, date, productid Một sản phẩm có thể có một hoặc nhiều bình luận

A clothing product is characterized by specific attributes including ID, type, brand, origin, size, color, material, gender, and product The category attribute is used to identify the type of product.

A footwear product is characterized by specific attributes including ID, style, size, color, height, weight, material, sole, origin, warranty, gender, and product type The product category is determined based on these defining attributes.

A product classified as an accessory will have specific attributes, including id, type, color, brand, origin, size, material, and product The product type is determined by its category attribute.

An order has several key attributes, including an ID, user ID, order date, total amount, order status, payment status, and shipper ID A customer can have one or multiple orders associated with their account.

An order detail can include various attributes such as id, product id, product name, price, quantity, description, date, status, and order id A single order may consist of one or more products.

CÁC CÔNG NGHỆ SỬ DỤNG

M Ô HÌNH HỆ THỐNG

Hình 4 1: mô hình hệ thống Ứng dụng được chia làm 3 phần: Front-end, backend và database giúp tách biệt và dễ dàng nâng cấp, sửa chữa khi cần thiết

- Front-end: sử dụng html, css, javascript và reactjs để phát triển

- Backend: sử dụng spring boot, spring security, spring data jpa, nodejs để phát triển

- Database: sử dụng mysql, mongodb

- Thanh toán trực tuyến: sử dụng paypal API

- Upload hình ảnh: sử dụng google API.

T ỔNG QUAN VỀ R EACTJS

React (Reactjs hay React.js) là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng và các thành phần UI Được phát triển bởi sự hợp tác giữa Facebook và Instagram, React hiện được duy trì bởi Facebook cùng với một cộng đồng các nhà phát triển và công ty cá nhân Thư viện này có thể được sử dụng làm nền tảng cho việc phát triển các ứng dụng trang đơn hoặc di động Một trong những đặc điểm nổi bật của React là khả năng render dữ liệu ở cả tầng Server lẫn tầng Client.

Nói về ưu điểm thì React cho ta:

React Component dễ dàng sử dụng và cho phép tạo ra các component nhẹ nhờ vào JSX, một cú pháp mở rộng cho JavaScript, giúp việc viết mã trở nên đơn giản và hiệu quả hơn.

57 hợp HTML với JavaScript React cung cấp việc tạo component nhẹ, các thành phần phi trạng thái rất dễ dàng

- API thanh lịch: Khuyến khích bạn nắm lấy bố cục bằng các component

- Hỗ trợ cộng đồng lớn: React rất phổ biến, minh chứng rõ ràng bởi cộng đồng hỗ trợ lớn của nó

- Phổ biến trong giới StartUp: Mức độ phổ biến của React đã giúp thúc đẩy sự phát triển của các công ty khởi nghiệp

Nhiều tiện ích nguồn mở cho React mang đến cho bạn nhiều tùy chọn xây dựng giải pháp hoàn chỉnh nhờ vào sự phát triển của cộng đồng.

Hầu hết các framework JavaScript không thân thiện với SEO, mặc dù đã có nhiều cải tiến Tuy nhiên, việc hỗ trợ render dữ liệu dưới dạng trang web giúp cải thiện khả năng tối ưu hóa công cụ tìm kiếm.

Bên cạnh đó Reactjs vẫn có vài nhược điểm sau:

Các component trong React không phải là HTML nguyên bản mà được viết bằng JSX, điều này đòi hỏi thời gian để đội ngũ phát triển React thực hiện các điều chỉnh cần thiết.

Các giải pháp hoàn chỉnh cho việc xây dựng giao diện người dùng trong React thường yêu cầu tích hợp các thư viện của bên thứ ba để mở rộng chức năng.

Reactjs chỉ là một thư viện dành cho tầng View, không phải là một framework MVC như nhiều framework khác Được phát triển bởi Facebook, React giúp render phần giao diện người dùng nhưng không bao gồm Model và Controller Do đó, để xây dựng ứng dụng hoàn chỉnh, React cần kết hợp với các thư viện khác Ngoài ra, React cũng không hỗ trợ hai chiều (two-way binding) hay Ajax.

Tính khả dụng của các tùy chọn có thể gây nhầm lẫn, đặc biệt là đối với người mới bắt đầu Việc có quá nhiều lựa chọn có thể khiến người dùng cảm thấy bối rối và khó khăn trong việc đưa ra quyết định.

React đóng vai trò là cầu nối giữa React và DOM (Document Object Model), một giao diện lập trình ứng dụng (API) quan trọng DOM cho phép truy xuất tài liệu HTML và XML dưới dạng cây cấu trúc dữ liệu Mô hình DOM thường độc lập với hệ điều hành và dựa trên kỹ thuật lập trình hướng đối tượng để mô tả tài liệu một cách hiệu quả.

ReactDOM cung cấp cho ta khả năng giao tiếp với DOM bằng javascript

58 Ở đây ta dùng phương thức render để hiển thị mã HTML được chỉ định bên trong phần tử HTML được chỉ định

JSX, hay JavaScript kết hợp với XML, cho phép người dùng viết cú pháp tương tự XML và chuyển đổi nó thành JavaScript Trong JSX, các phần tử XML, thuộc tính và các phần tử con được chuyển đổi thành các đối số cho hàm React.createElement.

So sánh JSX với cú pháp React.createElement():

Không chỉ đơn giản như vậy, vì là JSX nên có một số attributes cũng khác so với lúc chúng ta viết HTML như className (JSX) và class (html)…

Tại sao chúng ta nên sử dụng JSX bởi vì:

JSX sử dụng cú pháp tương tự XML, giúp cấu trúc cây khi biểu thị các thuộc tính, từ đó dễ dàng định nghĩa và quản lý các component phức tạp Thay vì phải định nghĩa và gọi nhiều hàm hoặc đối tượng trong JavaScript, cấu trúc này cho phép người dùng dễ dàng đọc hiểu ý nghĩa của các component Code JSX ngắn gọn và dễ hiểu hơn so với code JavaScript truyền thống.

- Thứ hai: JSX không làm thay đổi ngữ nghĩa của JavaScript

Cách viết gần gũi với các thẻ HTML giúp các developers, đặc biệt là các designer, dễ dàng hiểu và chỉnh sửa mã nguồn mà không gặp khó khăn.

Một điểm đặc biệt của JSX là khả năng nhúng các biểu thức vào trong mã nguồn bằng cách đặt chúng giữa cặp dấu ngoặc nhọn Điều này cho phép tích hợp linh hoạt các biểu thức vào trong cấu trúc JSX Hơn nữa, JSX cũng có thể được sử dụng như một biểu thức để nhúng vào trong đoạn mã JSX khác, tạo ra sự linh hoạt và dễ dàng khi xây dựng giao diện người dùng.

ReactJS cung cấp một thư viện icon đa dạng với nhiều phong cách khác nhau, giúp người dùng dễ dàng lựa chọn phù hợp với từng hoàn cảnh Thay vì sử dụng các icon từ các trang như Font Awesome, thư viện này mang đến sự linh hoạt và hoàn toàn miễn phí, thật sự là một lựa chọn tuyệt vời cho các nhà phát triển.

T ỔNG QUAN VỀ S PRING FRAMEWORK

Spring Boot là một phần quan trọng trong hệ sinh thái Spring Framework, giúp lập trình viên dễ dàng triển khai ứng dụng độc lập Nó tối giản hóa cấu hình Spring, cho phép giảm thiểu tối đa các thiết lập cần thiết Bên cạnh đó, Spring Boot còn hỗ trợ các bộ chứa nhúng, mang lại sự tiện lợi cho việc phát triển ứng dụng.

Spring Boot cho phép các ứng dụng web hoạt động độc lập mà không cần Web Server, đồng thời hỗ trợ phát triển API một cách nhanh chóng và đơn giản Ứng dụng Spring Boot bắt đầu từ hàm main và quét các lớp, package cùng cấp và thấp hơn Spring áp dụng nguyên tắc thiết kế IoC (Inversion of Control) và kỹ thuật DI (Dependency Injection), giúp các lớp độc lập và dễ dàng nâng cấp, sửa chữa khi cần thiết Mỗi lớp được đánh dấu với các chú thích như @Component, @Controller, @RestController, và @Service.

Trong Spring, các đối tượng được đánh dấu bằng @Bean trong @Repository sẽ được coi là bean và được lưu trữ trong IoC container Điều này cho phép chúng ta dễ dàng nhúng lớp này vào lớp khác và sử dụng chúng một cách hiệu quả.

Spring Data JPA là một phần của hệ sinh thái Spring Data, giúp triển khai các kho lưu trữ dựa trên JPA một cách dễ dàng Mô-đun này cung cấp hỗ trợ nâng cao cho lớp truy cập dữ liệu, giúp đơn giản hóa việc truy cập và quản lý dữ liệu JPA, viết tắt của Java Persistence API, là một đặc tả Java cho phép ánh xạ giữa các đối tượng Java và cơ sở dữ liệu quan hệ thông qua công nghệ ORM (Object Relational Mapping) phổ biến.

Để khai báo một lớp entity trong Spring, bạn sử dụng @Entity Các thuộc tính của lớp này cần tương ứng với các cột trong bảng của cơ sở dữ liệu Mỗi lớp entity phải có ít nhất một thuộc tính khóa chính (primary key) được đánh dấu bằng @Id.

Spring data JPA sẽ sử dụng công nghệ ORM để tạo ra một bảng tương tự trong cơ sở dữ liệu

Để thao tác với dữ liệu JPA, bạn cần sử dụng một bộ công cụ giúp đơn giản hóa các thao tác Đặc biệt, việc thêm chú thích @Repository là cần thiết để thực hiện các thao tác này một cách hiệu quả.

Spring Security is an integral part of the Spring Framework ecosystem, enhancing system security To configure Spring Security, it is essential to declare @Configuration, @EnableWebSecurity, and extend the WebSecurityConfigurerAdapter class.

Luồng chạy của Spring Security bắt đầu khi một chứng chỉ (credential) như username và password được cung cấp để xác thực AuthenticationManager tiếp nhận chứng chỉ này và gọi phương thức authenticate() để thực hiện xác thực Phương thức này tìm kiếm một provider phù hợp thông qua phương thức support() Khi tìm thấy provider thích hợp, nó sẽ gọi phương thức authenticate() của provider đó và truy cập lớp UserDetailsService để lấy dữ liệu người dùng Lớp UserDetailsService cung cấp phương thức loadUser ByUsername() để lấy thông tin người dùng dựa trên tên tài khoản (username) và trả về một đối tượng UserDetails.

Hệ thống sẽ kiểm tra và trả về kết quả tương ứng

Hình 4 11: kiến trúc spring security Ứng dụng spring security trong đồ án:

Hình 4 12: cấu hình spring security

Hình 4 13: cấu hình lớp user details service

3 Cấu hình lớp Details service:

Hình 4 14: cấu hình lớp details service

4 Cấu hình service để thực hiện xác thực:

Hình 4 15: cấu hình login service

T ỔNG QUAN VỀ M YSQL

MySQL là một hệ quản trị cơ sở dữ liệu (CSDL) giúp lưu trữ và quản lý thông tin một cách có tổ chức và ngăn nắp Hệ thống này cho phép truy cập dữ liệu nhanh chóng và thuận lợi, đồng thời hỗ trợ nhiều ngôn ngữ lập trình khác nhau.

T ỔNG QUAN VỀ NODEJS

Node.js là một nền tảng phát triển độc lập được xây dựng trên Javascript Runtime của Chrome, cho phép phát triển ứng dụng mạng nhanh chóng và dễ dàng mở rộng Với Node.js, người dùng có thể tạo ra các ứng dụng có tốc độ xử lý nhanh và hỗ trợ thời gian thực.

T ỔNG QUAN VỀ MONGODB

MongoDB is a document-oriented NoSQL database that moves away from the traditional table-based structure of relational databases It is designed to accommodate flexible schemas, utilizing JSON-like documents stored in a format known as BSON.

P AYPAL API

Nhóm đã tích hợp PayPal API Sandbox vào website để thực hiện thanh toán Đây là một môi trường thử nghiệm độc lập mà PayPal cung cấp, giúp các website có thể tích hợp dễ dàng và hiệu quả.

Link chi tiết: https://developer.paypal.com/docs/business/test-and-go-live/simulation- tests/

G OOGLE API

Để thực hiện việc upload ảnh và gửi email xác thực đến người dùng nhóm đã sử dụng google mail và google drive API

Link chi tiết google drive API: https://developers.google.com/drive/api/v3/about-sdk Link chi tiết google mail API: https://developers.google.com/gmail/api/reference/rest

Ứ NG DỤNG XÂY DỰNG KIẾN TRÚC HỆ THỐNG

Hình 4 16: mô hình kiến trúc hệ thống

4.9.1.1 View Đây là phần giao diện (theme) dành cho người sử dụng Nơi mà người dùng có thể lấy được thông tin dữ liệu của MVC thông qua các thao tác truy vấn như tìm kiếm hoặc sử dụng thông qua các website Công nghệ chính để xây dựng view chính là reactjs Để xây dựng được view nhóm đã chia cấu trúc như sau:

Thư mục admin chứa các tệp JavaScript cần thiết cho việc xử lý hiển thị trong chức năng quản trị, bao gồm các chức năng như đăng nhập, điều hướng, xem tài khoản người dùng, cửa hàng, đơn hàng và sản phẩm.

- Assets: Chứa các file hình ảnh và file css để format cho trang web đẹp hơn

- Body: Đây là nơi chứa file javascript phục vụ cho mục đích hiển thị sản phẩm ở trang chủ và hiển thị trang thông tin sản phẩm chi tiết

- Footer: Chứa file phục vụ cho mục đích hiển thị chân trang trong tất cả các trang

Thư mục này chứa các tệp quan trọng của phần đầu trang web, bao gồm thanh điều hướng (navbar), thanh tìm kiếm, và giỏ hàng Ngoài ra, trang đăng nhập và đăng ký cũng được lưu trữ trong thư mục này.

- Rest: Các trang báo lỗi, trang cung cấp thông tin về web và trang thông báo về chức năng đang phát triển

Seller: Các thành phần liên quan đến việc quản lý và hiển thị chức năng của người bán hàng bao gồm: tạo, xóa, sửa, xem cửa hàng và tạo sản phẩm.

- Shipper: Chứa file javascript phục vụ cho mục đích hiển thị, xử lý cho trang của người giao hàng

- Utils: Đây là các phần được sử dụng chung cho nhiều trang gồm: hiển thị loading, hiện thông báo …

- User: Gồm những thành phần liên quan đến người dùng như: xem giỏ hàng, thanh toán, bình luận, thay đổi thông tin cá nhân…

Khuôn mẫu dữ liệu trả về cho giao diện người dùng không chỉ hiển thị thông tin mà còn là điểm tiếp nhận dữ liệu khi người dùng tương tác với hệ thống.

- Nơi tiếp nhận các yêu cầu từ người dùng sau đó gọi đến lớp service để xử lý và trả về qua view

- Nơi xử lý tất cả các nghiệp vụ của bài toán

- Thực hiện thao tác với cơ sở dữ liệu

- Config: folder chứa tất cả cấu hình trong hệ thống

- Entities: mỗi lớp trong entities tương ứng với một bảng trong cơ sở dữ liệu

- Filters: lớp lọc jwt với mỗi yêu cầu gửi đến từ người dùng

Object mapper là công cụ chuyển đổi giữa model và entity, cho phép người dùng thao tác với model mà không can thiệp trực tiếp vào entity Điều này đảm bảo tính nhất quán và an toàn trong quá trình quản lý dữ liệu.

- Utils: cung cấp bộ công cụ sử dụng chung cho các lớp

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

C ÀI ĐẶT

Khi người dùng truy cập vào website lần đầu, họ sẽ được chuyển hướng đến trang chủ, nơi cung cấp các chức năng cơ bản như xem sản phẩm, đăng ký tài khoản, đăng nhập và kiểm tra giỏ hàng.

Mô tả: Có thể đăng ký trở thành: người mua hàng, người bán hàng, người giao hàng

Khi đăng ký tài khoản, bạn cần cung cấp thông tin cá nhân như tên, năm sinh và số điện thoại Nếu thông tin không đầy đủ, hệ thống sẽ thông báo lỗi Sau khi nhập đầy đủ và nhấn đăng ký, tài khoản của bạn sẽ được tạo và bạn sẽ tự động đăng nhập vào website.

Người dùng chỉ cần nhấn vào nút đăng nhập trên thanh công cụ để bắt đầu quá trình đăng nhập Để đảm bảo thành công, cần điền đầy đủ và chính xác thông tin; nếu không, hệ thống sẽ thông báo lỗi Khi thông tin được nhập đúng, form đăng nhập sẽ biến mất và người dùng có thể sử dụng các chức năng tương ứng với vai trò của mình.

5.1.4 Trang thông tin tài khoản

Hình 5 4: trang thông tin tài khoản

Trang này cho phép bạn xem và chỉnh sửa thông tin đã đăng ký Để truy cập, hãy nhấp vào tên của bạn trên thanh công cụ và chọn "Tài khoản của tôi" Hệ thống sẽ dẫn bạn đến trang thông tin tài khoản, nơi hiển thị các thông tin cá nhân Bạn có thể thay đổi thông tin và nhấn nút lưu Sau khi hoàn tất, hệ thống sẽ hiển thị thông báo xác nhận.

5.1.5 Trang thay đổi mật khẩu

Hình 5 5: trang thay đổi mật khẩu

Để thay đổi mật khẩu, bạn cần nhập đầy đủ ba mục: mật khẩu cũ, mật khẩu mới và xác nhận mật khẩu mới Sau khi hoàn tất và kiểm tra tính chính xác, hãy nhấn xác nhận Hệ thống sẽ thông báo khi quá trình thay đổi mật khẩu đã hoàn tất.

5.1.6 Trang đơn hàng đã đặt

Hình 5 6: trang đơn hàng đã đặt

Mô tả: Hiển thị thông tin chi tiết về các đơn hàng bạn đã đặt, sắp xếp theo thứ tự từ gần đến xa Mỗi đơn hàng sẽ bao gồm các thông tin quan trọng như ngày mua, giá trị đơn hàng, trạng thái thanh toán và tình trạng đơn hàng.

5.1.7 Trang thông tin chi tiết đơn hàng

Hình 5 7: trang thông tin chi tiết đơn hàng

Khi bạn nhấn vào đơn hàng, bạn sẽ được chuyển đến trang thông tin chi tiết, nơi hiển thị tất cả sản phẩm trong đơn hàng, bao gồm giá từng món và số lượng.

5.1.8 Form nhận xét sản phẩm

Hình 5 8: form nhận xét sản phẩm

Để nhận xét sản phẩm, bạn cần mua sản phẩm đó trước Sau khi hoàn tất giao dịch, hãy truy cập vào thông tin chi tiết đơn hàng và nhấn vào phần nhận xét nằm ngay sau sản phẩm Hệ thống sẽ hiển thị một form để bạn đánh giá chất lượng (sao) và để lại bình luận về sản phẩm.

5.1.9 Trang thông tin sản phẩm

Hình 5 9: trang thông tin sản phẩm

Mô tả sản phẩm bao gồm thông tin chi tiết, đánh giá từ người tiêu dùng trước đó và hướng dẫn đặt hàng Để tiến hành mua sắm, người tiêu dùng cần lựa chọn đầy đủ các tùy chọn sản phẩm trước khi nhấn vào nút thêm vào giỏ hàng hoặc mua ngay.

Để quản lý giỏ hàng, hãy nhấn vào biểu tượng giỏ hàng ở góc trên bên phải, gần thanh tìm kiếm Tại đây, bạn sẽ thấy thông tin về các sản phẩm đã thêm vào giỏ hàng, cho phép bạn tăng giảm số lượng hoặc xóa sản phẩm Cuối cùng, tổng số tiền của tất cả sản phẩm sẽ được hiển thị cùng với nút thanh toán.

Mô tả: Hiển thị các thông tin về giao hàng như: địa chỉ, số điện thoại người mua hàng

Hiển thị danh sách sản phẩm và tổng giá trị đơn hàng bao gồm phí vận chuyển Đối với phương thức thanh toán khi nhận hàng, bạn chỉ cần nhấn nút thanh toán để hoàn tất giao dịch.

Hệ thống sẽ gửi đơn hàng của bạn đến shipper, người sẽ đảm nhận việc giao hàng Khi hàng được giao, người mua sẽ thanh toán cho đơn hàng.

Hình 5 12: thanh toán bằng paypal

Người dùng có thể thanh toán cho đơn hàng bằng cách sử dụng tài khoản PayPal của mình, chỉ cần nhấn vào nút PayPal màu vàng Sau khi nhấn, trang đăng nhập của PayPal sẽ hiện ra để người dùng thực hiện thanh toán Sau khi hoàn tất thanh toán, người dùng sẽ được chuyển về trang chủ.

5.1.13 Trang quản lý cửa hàng

Hình 5 13: trang quản lý cửa hàng

Mô tả: Đây là trang dành cho người bán hàng, là nơi hiển thị các cửa hàng mà người bán đã tạo

5.1.14 Form tạo cửa hàng mới

Hình 5 14: form tạo cửa hàng

Để tạo cửa hàng mới, người dùng chỉ cần nhấn vào nút "create store" ở góc trên bên phải Hệ thống sẽ hiện ra một form đăng ký, yêu cầu nhập đầy đủ thông tin cần thiết Sau khi hoàn tất, người dùng sẽ nhận được thông báo và cửa hàng mới sẽ xuất hiện ngay trên trang quản lý.

Hình 5 15: form cập nhật cửa hàng

Để chỉnh sửa thông tin đã đăng ký, bạn chỉ cần nhấn vào nút cập nhật trên cửa hàng Hệ thống sẽ hiển thị một biểu mẫu cho phép bạn chỉnh sửa các thông tin cần thiết Sau khi hoàn tất việc thay đổi, hãy nhấn vào nút cập nhật hoặc cập nhật ảnh để lưu lại các thay đổi.

5.1.16 Xem sản phẩm đang chờ của cửa hàng

Hình 5 16: xem sản phẩm chờ của cửa hàng

K IỂM THỬ

Test Steps Test Data Expected

Status Đăng ký Đăng ký tên tài khoản đã được dùng

4 Chọn ngày, tháng, năm sinh

1 Nhập họ và tên: Bùi Đức Huy

2 Chọn ngày, tháng, năm sinh:

3 Nhập email: huy18110117@ gmail.com

4 Nhập tên tài khoản: Đăng ký không thành công

5.2.2 Xem lịch sử đơn hàng

Xem lịch sử đơn hàng

2 Click chọn đơn hàng

Hiển thị lịch sử đơn hàng

5.2.3 Quản lý thông tin tài khoản

Quản lý thông tin tài khoản

Khác h hàng có thể thay đổi thông tin thành công

3 Điền thông tin tài khoản

6 Click vào tài khoản của tôi

1 Nhập tên: Bùi Đức Huy1

2 Nhập email: huy18110117@ gmail.com

5 Chọn ngày, tháng, năm sinh:

Sửa thông tin thành công

Status Đăng nhập Đăng nhập

1 truy cập https://group9cn pmm.herokuapp com/ vai trò= người dùng

Tên đăng nhập khanguser Đăng nhập thành công

2 Nhập Tên đăng nhập và mật khẩu

3 Click Đăng nhập mật khẩu giakhang123

Verify on enterin g valid userid and passwo rd, the custom er can login

1 truy cập https://group9cn pmm.herokuapp com/admin

4 Click Tất cả cửa hàng

Tên đăng nhập congadmin mật khẩu = 123 hiển thị thông tin list cửa hàng

2 Nhập Tên đăng nhập và

Tên đăng nhập congadmin mật khẩu = 123

Xóa cửa hàng thành công

4 click Tất cả cửa hàng

7 thực hiện lại từ bước 1 - 4

4 click Tất cả sản phẩm

Tên đăng nhập congadmin mật khẩu = 123 hiển thị thông tin list sản phẩm

KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN

K ẾT QUẢ ĐẠT ĐƯỢC

Nhóm thực hiện tự đánh giá đã hoàn thành các yêu cầu của khóa luận, bổ sung đầy đủ tài liệu về API và hình ảnh kiểm thử Qua quá trình làm luận văn, nhóm đã học hỏi nhiều kiến thức mới như Spring Framework, MERN stack, và phương pháp thiết kế ứng dụng Đồng thời, nhóm cũng cải thiện kỹ năng làm việc nhóm và xử lý xung đột trên GitHub, có cái nhìn tổng quan về quy trình hình thành một ứng dụng Mặc dù vẫn còn một số thiếu sót, nhóm cam kết sẽ tiếp tục hoàn thiện và phát triển trong các dự án tiếp theo.

Nhóm đã nghiên cứu và tìm hiểu kiến thức về:

- Cách hoạt động và sử dụng: MERN stack, spring framework

- Cách thiết kế, phân tích và triển khai cơ sở dữ liệu: mysql, mongodb

- Biết cách phân tích, đánh giá và hoàn thiện một website thương mại điện tử

Nhóm đã hoàn thiện các chức năng:

- Guest: Đăng ký, xem sản phẩm

Người dùng có thể dễ dàng thêm sản phẩm vào giỏ hàng, thực hiện mua hàng và thanh toán Họ cũng có thể đăng nhập hoặc đăng xuất, xem và chỉnh sửa thông tin tài khoản, cũng như điều chỉnh giỏ hàng theo ý muốn Ngoài ra, người dùng có thể bình luận về sản phẩm, xem lịch sử mua hàng và đặt chung giỏ hàng với người khác.

- Người bán hàng: đăng ký, đăng nhập, đăng xuất, quản lý cửa hàng, quản lý sản phẩm, quản lý đơn hàng, thống kê

Người giao hàng có thể dễ dàng đăng ký, đăng nhập và đăng xuất từ hệ thống Họ có khả năng xem các đơn hàng đã chuẩn bị xong, nhận hàng và thực hiện giao hàng Bên cạnh đó, người giao hàng cũng có thể theo dõi tình trạng các đơn hàng đã giao thành công.

Người quản trị hệ thống đóng vai trò quan trọng trong việc quản lý toàn bộ người dùng, người bán hàng, người giao hàng, sản phẩm và cửa hàng Họ đảm bảo rằng mọi hoạt động diễn ra một cách suôn sẻ và hiệu quả, từ việc theo dõi các giao dịch cho đến việc duy trì mối quan hệ với các bên liên quan.

H ẠN CHẾ

Các tính năng đã hoàn thiện ở mức cơ bản tuy nhiên vẫn còn vài hạn chế:

- Thanh toán trực tuyến chỉ có thể áp dụng ví paypal

- Chưa hoàn thiện tính năng nhận đơn của shipper giúp giảm chi phí

- Lần đầu triển khai hệ thống trên 2 server riêng biệt nên hệ thống vẫn còn gặp lỗi

Trong thời gian tới, nhóm thực hiện sẽ nâng cấp website với giao diện mới và tính năng cải tiến, nhằm đáp ứng tốt hơn nhu cầu người dùng Chúng tôi sẽ triển khai chức năng thanh toán qua nhiều ví điện tử và tối ưu hóa chi phí giao hàng.

Nhóm sẽ tiến hành tìm kiếm tài liệu để nâng cao kiến thức về việc tạo lập trang web hoàn thiện hơn Đồng thời, nhóm cũng sẽ kiểm tra lại trang web và tìm cách nâng cấp để giảm thiểu các vấn đề hạn chế của phần mềm.

Nhóm sẽ tiếp tục phát triển ứng dụng web sử dụng công nghệ MERN stack và Spring framework, đồng thời nỗ lực cung cấp các phiên bản cập nhật trong thời gian tới Chúng tôi cũng sẽ củng cố kiến thức về bảo mật để nâng cao tính an toàn và hoàn thiện ứng dụng.

1 Nhân Đặng, React là gì? Phân biệt sự khác nhau giữa React JS với React Native, thegioididong.com, link: https://www.thegioididong.com/hoi-dap/react-la-gi-phan- biet-su-khac-nhau-giua-react-js-voi-react-

1318152?fbclid=IwAR2zlcfAq1Tu08UBPUQkM11zFVnYqaVGZNzObbqQcZdK3j6l qBv67-xOyl8

2 MySQL Là Gì? Tổng Quan Về Hệ Quản Trị Dữ Liệu MySQL, http://sqladvice.com/, link: http://sqladvice.com/mysql-la-gi-tong-quan-ve-he-quan-tri-du-lieu-mysql/

CÁC LIÊN KẾT TÀI LIỆU

Front-end: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/FrontEnd/FE/beg roupfe

Backend: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/BackEnd/begrou p2

System design: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/System%20Desi gn

Report: https://github.com/giakhangnguyenlam/TLCNGroup2UTE/tree/main/Report Heroku: https://utesportingstore.herokuapp.com/

Tiêu đề	Xây Dựng Website Thương Mại Điện Tử Kinh Doanh Đồ Thể Thao
Tác giả	Nguyễn Lâm Gia Khang, Nguyễn Thành Công
Người hướng dẫn	Th.S Mai Anh Thơ, TS. Lê Vĩnh Thịnh
Trường học	Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
Chuyên ngành	Công Nghệ Thông Tin
Thể loại	Khóa Luận Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	110
Dung lượng	12,93 MB