Xây dựng website bán giày thể thao áp dụng công nghệ mern stack

Vì lí do đấy, nhóm em xây dựng website bán giày thể thao để cung cấp cho khách hàng những sản phẩm chất lượng và mẫu mã hợp thời đại?. Mục đích của đề tài Nhằm giúp cho chủ cửa hàng nâng

TỔNG QUAN VỀ ĐỀ TÀI

Tính cấp thiết của đề tài

Để duy trì sức khỏe tốt, bên cạnh chế độ ăn uống và sinh hoạt lành mạnh, việc tập thể dục và thể thao là vô cùng quan trọng Để có những buổi tập hiệu quả, việc trang bị các phụ kiện hỗ trợ là cần thiết.

Nhóm chúng tôi đã phát triển một website chuyên bán giày thể thao, nhằm cung cấp cho khách hàng những sản phẩm chất lượng và mẫu mã hiện đại Trang web tập trung vào việc cung cấp giày đá bóng, giúp người dùng có trải nghiệm tốt nhất trên các loại sân như sân sàn, sân cỏ nhân tạo và sân cỏ tự nhiên.

Mục đích của đề tài

Để nâng cao chất lượng dịch vụ bán hàng và quản lý hiệu quả hàng hóa, kho, cũng như quy trình bán hàng, chủ cửa hàng cần áp dụng các công cụ phù hợp Vi

- Quản lý hàng hóa chi tiết

- Thống kê báo cáo chi tiết: thống kê doanh thu theo ngày, tháng

- Đơn giản hóa quy trình bán hàng

- Tư vấn cho khách hàng có được những sản phẩm phù hợp nhất

- Gợi ý những sản phẩm phù hợp với nhu cầu người dùng

Phương pháp nghiên cứu

Nhóm nghiên cứu đã tập trung vào nhu cầu mua sắm của người tiêu dùng và tình hình xã hội hiện tại Sự cần thiết trong việc sử dụng giày thể thao ngày càng tăng cao, đặc biệt trong bối cảnh thương mại điện tử phát triển mạnh mẽ, điều này thúc đẩy xu hướng chuyển đổi từ mua sắm truyền thống sang hình thức trực tuyến.

2 trực tiếp tại cửa hàng sang trực tuyến sẽ có những ưu điểm mà chúng ta hướng đến Cụ thể là sự tiện lợi

Nhóm nghiên cứu đã tiến hành khảo sát các cửa hàng và website bán giày có quy mô vừa tại thành phố Hồ Chí Minh, tập trung vào quy trình từ nhập hàng đến bán hàng Đối tượng khách hàng chủ yếu là những người chơi thể thao và phụ huynh mua giày cho con.

Nhóm nghiên cứu tập trung vào công nghệ ngôn ngữ, đặc biệt là JavaScript cùng với các thư viện phổ biến như NodeJs, Express và ReactJs Họ cũng nghiên cứu cơ sở dữ liệu trực tuyến MongoDB và tích hợp các dịch vụ chất lượng từ Momo, FPT và Facebook (Meta).

Kết luận nghiên cứu từ nghiệp vụ đến công nghệ, nhóm hướng đến việc phát triển một website bán giày thể thao với đầy đủ chức năng, nhằm tối ưu hóa trải nghiệm người dùng.

Khảo sát hiện trạng

1.4.1 Một số website bán giày trên thị trường

Link website: https://neymarsport.com/

Hình 1: Giao diện trang web Neymarsport

Neymarsport là hệ thống cửa hàng chuyên bán giày, phụ kiện thể thao chính hãng trên địa bàn thành phố Hồ Chí Minh

Chúng tôi cung cấp sản phẩm chính hãng từ các thương hiệu nổi tiếng như NIKE, ADIDAS, PUMA, và nhiều thương hiệu khác Tất cả sản phẩm đều được nhập khẩu từ các nhà phân phối uy tín tại Việt Nam, đảm bảo có tem, nhãn và hộp đầy đủ.

Sản phẩm ở đây luôn theo kịp với xu hướng của thế giới, họ kịp thời nhập về các mẫu mới ra của các hãng b Đặc điểm

- Màu chủ đạo của website này là màu đen xám

- Sản phẩm phong phú, đa dạng

- Thiết kế các trang năng động, màu sắc bắt mắt

- Dễ tiếp cận và sử dụng

Link website: https://thanhhungfutsal.com/

Hình 2: Giao diện trang web Thanh Hùng Futsal

4 a Giới thiệu Đây cũng là một thương hiệu bán giày thể thao được biết đến nhiều Họ cũng có các chi nhánh nằm ở thành phố Hồ Chí Minh

Sản phẩm và giá cả cũng vô cùng là cạnh tranh với Neymarsport

Thanh Hùng Futsal là một trong những điểm đến chất lượng của những ai đam mê thể thao, đặc biệt là thể thao vua b Đặc điểm

- Màu chủ đạo của website này là màu đỏ

- Sản phẩm cũng rất phong phú, đa dạng và luôn bắt kịp xu hướng thể thao

- Thiết kế, bố cục trang web năng động, đậm chất thể thao.

Các giả thiết ràng buộc và rủi ro

Bảng 1: Bảng các giả thiết và rủi ro

STT Hạng mục Mô tả

1 Các giả thiết của dự án - Các thành viên đều có trách nhiệm từ lúc bắt đầu thực hiện cho đến khi kết thúc dự án và báo cáo

- Sản phẩm luôn được cập nhật hàng tuần

- Hoàn thành dự án sớm hơn mong đợi

- Sản pẩm ra mắt không xảy ra lỗi

- Server sẽ được deploy lên Amazon web service

2 Các ràng buộc của dự án - Trong quá trình phát triển dự án, nhóm sẽ chịu trách nhiệm sửa toàn bộ lỗi nếu xảy ra

- Sản phẩm cần được hoàn thành đúng thời hạn đã thống nhất từ trước

3 Các rủi ro và hướng xử lý - Kinh phí phát sinh cao do thuê một số dịch vụ của bên thứ ba

➔ Tìm nguồn tài trợ, thương lượng kinh phí với khách hàng

- Thành viên tham gia dự án nghỉ, bận hoặc đau ốm đột xuất

➔ Các thành viên được chuyển giao kiến thức ở tất cả các vị trí để có thể đảm nhận thêm phần khác.

Các chức năng có thể xây dựng được

- Xem, cập nhật thông tin cá nhân

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

1.6.2 Chức năng dành cho quản trị viên

- Thêm, cập nhật, xóa loại

- Thêm, cập nhật, xóa thương hiệu

- Thêm, cập nhật xóa sản phẩm

- Quản lý, xóa người dùng

- Quản lý đơn hàng, cập nhật trạng thái đơn hàng

1.6.3 Chức năng dành cho người dùng

- Đăng ký, quên mật khẩu (xác nhận bằng mã OTP nhận từ email)

- Cập nhật thông tin cá nhân, đổi mật khẩu (xác nhận bằng mã OTP nhận từ email)

- Quản lý thông tin nhận hàng

- Xem danh sách sản phẩm theo loại, thương hiệu, mức giá hoặc size

- Thanh toán bằng tiền hoặc ví Momo

- Xem hướng dẫn chọn size

CƠ SỞ LÝ THUYẾT

Tổng quan về công nghệ MERN Stack

MERN là sự kết hợp từ Mongodb, Express, React, Node Trong đó:

Hình 3: Sơ đồ MERN Stack

MongoDB là một cơ sở dữ liệu NoSQL linh hoạt, cho phép người dùng dễ dàng tạo lược đồ, cơ sở dữ liệu và bảng Các tài liệu trong MongoDB được xác định bằng khóa chính, tạo thành đơn vị cơ bản của hệ thống này.

Một số ưu điểm của Mongodb:

- Nhanh chóng – Là cơ sở dữ liệu hướng tài liệu, Mongodb dễ dàng lập chỉ mục tài liệu Do đó, phản hồi cho ra kết quả khá nhanh

- Khả năng mở rộng tốt – Dữ liệu có thể có thể được chia nhỏ và mở rộng dễ dàng

- Sử dụng kết hợp với Javascript là lợi thế lớn trong việc truy vấn dữ liệu

- Dữ liệu lưu trữ dưới dạng JSON

- Môi trường cài đặt dễ đàng

- Mô hình tài liệu linh hoạt

Express là một framework web được phát triển bằng Javascript trên nền tảng Node.js, giúp đơn giản hóa việc lập trình phần back-end Framework này cung cấp nhiều tính năng quan trọng như routing, middlewares và template engines, hỗ trợ lập trình viên viết mã ngắn gọn và dễ dàng hơn.

Một số ưu điểm của Express:

- Bất đồng bộ và chạy đơn luồng

- Hiệu quả, nhanh chóng và có thể mở rộng

- Có cộng đồng người dùng lớn

- Giúp tái sử dụng các đoạn mã với bộ định tuyến tích hợp của nó

React là thư viện JavaScript front-end phổ biến, chuyên dùng để phát triển giao diện người dùng Với khả năng xử lý dữ liệu nhanh chóng, ReactJs thường được áp dụng trong việc xây dựng ứng dụng trang đơn (single page applications) Thư viện này có mã nguồn mở và cho phép xây dựng ứng dụng dựa trên các thành phần, mang lại tính linh hoạt và hiệu quả cao trong phát triển.

Một số ưu điểm của React

- Là một DOM (Document Object Model) ảo Nó thực sự là bản sao của DOM gốc

- Có thể xây dựng thành các thành phần và tái sử dụng dễ dàng, thuận tiện

- Cộng đồng sử dụng rất lớn

- Dễ dàng để tiếp cận và sử dụng

Node.js là một môi trường chạy JavaScript cho phép người dùng thực thi mã trên máy chủ, không chỉ trong trình duyệt Với trình quản lý Node (npm), người dùng có thể dễ dàng tải và cài đặt hàng nghìn thư viện miễn phí, mở rộng khả năng phát triển ứng dụng.

Một số ưu điểm của Nodejs:

- Là môi trường với mã nguồn mở

- Đơn luồng – Tuân theo mô hình đơn luồng

- Tốc độ xử lý nhanh – Được xây dựng trên công cụ javascript của Google

Chorme Nodejs có tốc độ thực thi nhanh

- Khả năng mở rộng cao

- Cài đặt đơn giản và dễ dàng

- Cộng đồng xử dụng cực kì lớn.

Giới thiệu về Recommend FPT

Recommend FPT là nền tảng sử dụng trí tuệ nhân tạo để đưa ra những gợi ý sản phẩm theo nhu cầu khách hàng sử dụng

Bằng cách sử dụng các thuật toán tiên tiến và học sâu, hệ thống sẽ phân tích dữ liệu của khách hàng và cung cấp kết quả tương ứng.

Hướng dẫn cài đặt và sử dụng các chức năng đã được nhà phát hành hướng dẫn chi tiết bằng tiếng Việt

Link truy cập ở đây: https://recom.fpt.vn/pages/documentation

Hình 4: Giao diện website Recommend FPT

Giới thiệu về Amazon Web Service

Amazon web service (AWS) là nền tảng điện toán đám mây được sử dụng phổ biến, rộng rãi nhất trên toàn cầu hiện nay

AWS cung cấp rất nhiều dịch vụ cho các cá nhân, doanh nghiệp các giải pháp về Storage, computing power, databases, networking, analytics, developer tools, sercurity, virtualization, …

AWS là nền tảng đám mây hàng đầu với kinh nghiệm lâu năm, độ tin cậy cao, bảo mật tối ưu và hiệu suất vượt trội, vượt xa các nhà cung cấp đám mây khác hiện nay.

Một số dịch vụ cơ bản của AWS:

- Dịch vụ máy chủ đám mây (EC2)

- Networking & Content Delivery: Phân phối mạng và nội dung

- Management Tools: Các công cụ quản lý

- Developer Tools: Các Công cụ phát triển.

Cách cài đặt các thành phần trong MERN Stack

- Truy cập vào đường link: https://account.mongodb.com/account/login?signedOut=true và đăng ký tài khoản hoặc đăng nhập bằng tài khoảng Google

Hình 5: Giao diện trang đăng nhập của MongoDB

- Khi đăng nhập vào chúng ta có thể sử dụng MongoDB để tạo database

Hình 6: Giao diện khi đăng nhập vào trong MongoDB

- Truy cập vào đường link: https://nodejs.org/en/download/

Hình 7: Giao diện trang tải về của NodeJS

- Tìm và tải phiên bản thích hợp cho hệ điều hành và x32bit hoặc x64bit

- Sau khi tải về thì chúng ta mở tệp vừa tải về lên và tiến hành cái đặt

- Nhấn Next để tiếp tục

Hình 8: Giao diện cửa sổ cài đặt NodeJS (1)

- Tiếp theo chọn vào mục I accept the terms in the License Agreement và nhấn Next để tiếp tục

- Tiếp tục nhấn Next những cửa sổ hiển thị tiếp theo

- Cuối cùng nhấn Install để cài đặt NodeJS

- Sau đó, cần đợi cho NodeJS được cài đặt

Hình 12: Giao diện cửa sổ thông báo đang cài đặt NodeJS

- Sau khi cài đặt xong chúng ta nhấn Finish để hoàn tất tiến trình cài đặt

Hình 13: Giao diện cửa sổ thông báo đã hoàn tất cài đặt NodeJS

Sau khi hoàn tất cài đặt NodeJS, bạn có thể xác nhận sự hiện diện của NodeJS trên máy tính bằng cách mở Command Prompt và nhập lệnh “node -v” để kiểm tra phiên bản.

Hình 14: Kiểm tra phiên bản NodeJS (cài đặt thành công)

- Mở Command Prompt ở thư mục chứa dự án mà bạn dự định xử lý backend và nhập lệnh: “ npm install express ”

Hình 15: Cài đặt Express Package

- Mở Command Prompt hệ thống và nhập lệnh : “ npm install -g create-react-app

Hình 16: Cài đặt ReactJS ở Global

Cách xây dựng và triển khai dự án MERN Stack

Bước 1: Mở Command Prompt tại thư mục mà bạn muốn chứa dự án và nhập lệnh: “ mdkir < tên thư mục > ” để tạo thư mục chưa mã nguồn dự án

Hình 17: Hình tạo thư mục

Sau khi tạo xong thì trong thư mục bạn mở Command Prompt sẽ xuất hiện thư mục bạn vừa tạo

Hình 18: Hình chứa thư mục vừa tạo

Bước 2: Chúng ta tiếp tục nhập lệnh “ cd < tên thư mục >” để vào thư mục vừa tạo

Hình 19: Hình câu lệnh đi đến thư mục

Lúc này đường dẫn đã trỏ tới thư mục chúng ta vừa trõ tới

Bước 3.1: Bên phần Backend thì chúng ta nhập lệnh “ npm init -y ” để khởi tạo các phần cần thiết cho dự án

Hình 20: Hình khởi tạo dự án

Bước 3.2: Bên phần Frontend thì chúng ta có thể tạo thư mục bằng lệnh

Hình 21: Tạo thư mục Frontend

Mở dự án vừa tạo bằng Visual Studio Code hoặc trình biên dịch khác Nếu sử dụng Visual Studio Code, hãy truy cập vào thư mục chứa dự án và mở Command Prompt, sau đó nhập lệnh “code ” để mở dự án.

Hình 22: Giao diện của Visual Studio Code

Sau đó, Visual Studio Code xuất hiện

Bước 5.1: Bên phần Backend, chúng ta tạo file server.js Tác dụng của file này là kết nối với database và phần frontend dưới localhost

Hình 23: Hình hiển thị vị trí file server.js

Bước 5.2: Chúng ta tạo project ReactJS bên trong thư mục phần Frontend bằng lệnh :

Hình 24: Hình khởi tạo dự án ReactJS

Bước 6: Để chạy project MERN Stack

To run the Backend project, navigate to the server.js file to configure the necessary components, and then execute the command "npm start" in the correct directory level.

Hình 25: Ví dụ cấu hình file server.js

Hình 26: Hình chạy phần Backend thành công

Bước 6.2: Để chạy phần Frontend chúng ta tới thư mục chứa mã nguồn thuộc frontend và cũng nhập lệnh “npm start”

Hình 27: Hình chạy phần Frontend thành công

Hình 28: Giao diện React App khi chạy thành công

PHÂN TÍCH THIẾT KẾ HỆ THỐNG

Mô tả yêu cầu

3.1.1 Tổng quan quy trình nghiệp vụ

Website bán giày có quy trình nghiệp vụ tổng quan như sau:

Người dùng có thể truy cập trang web để tham khảo sản phẩm và thêm vào giỏ hàng, nhưng cần đăng nhập trước (bao gồm đăng nhập truyền thống và đăng nhập bằng Google) Nếu chưa có tài khoản, người dùng có thể đăng ký, và nếu quên mật khẩu, họ có thể sử dụng tính năng khôi phục mật khẩu qua email Sau khi đăng nhập thành công, người dùng có thể thêm sản phẩm vào giỏ và tiến hành thanh toán Đối với tài khoản mới, người dùng cần thêm địa chỉ nhận hàng, và có thể cập nhật thông tin cá nhân như ảnh đại diện, họ và tên, mật khẩu và địa chỉ nhận hàng Hệ thống sẽ lưu lại các địa chỉ và hiển thị danh sách cho người dùng Khi đã có địa chỉ, người dùng có thể thanh toán thông qua trang checkout, với hai hình thức thanh toán: thanh toán khi nhận hàng hoặc thanh toán bằng ví Momo Đối với thanh toán khi nhận hàng, hệ thống sẽ kích hoạt đơn hàng ngay lập tức, trong khi thanh toán bằng Momo yêu cầu quét mã QR Code để hoàn tất giao dịch.

Quản trị viên chịu trách nhiệm quản lý các loại sản phẩm, thương hiệu, người dùng, đơn hàng và đánh giá của khách hàng, nhằm cung cấp thống kê chính xác Họ đóng vai trò quan trọng trong việc theo dõi tiến độ đơn hàng và điều chỉnh trạng thái của chúng.

- Hệ thống còn cho phép quản trị viên và người dùng tương tác tư vấn, hỏi đáp thông qua Messenger được tích hợp bởi Facebook API

Tổng quan

Hình 29: Sơ đồ tổng quan phía người dùng

Hình 30: Sơ đồ tổng quan phía quản trị viên

3.2.3 Sơ đồ hoạt động hệ thống

Hình 32: Sơ đồ hoạt động của hệ thống

3.2.4 Danh sách các chức năng

Bảng 2:Danh sách các chức năng

NĂNG VERSION LOẠI MÔ TẢ

1 Đăng nhập Đăng nhập tài khoản User, admin

Google Đăng nhập tài khoản bằng

3 Đăng ký Đăng ký tài khoản User

4 Quên mật khẩu Đặt lại mật khẩu bị quên mật khẩu khi User

5 Thêm loại Thêm loại sản phẩm vào cơ sở dữ liệu Admin

6 Cập nhật loại Cập nhật lại thông tin loại Admin

7 Xóa loại Xóa loại ra khỏi danh sách Admin

Thêm thương hiệu vào cơ sở dữ liệu Admin

Cập nhật lại thông tin thương hiệu Admin

Xóa thương hiệu ra khỏi danh sách Admin

Thêm sản phẩm vào cơ sở dữ liệu Admin

Cập nhật lại thông tin sản phẩm Admin

Xóa sản phẩm ra khỏi danh sách Admin

Xóa người dùng ra khỏi danh sách Admin

Quản lý các đơn hàng mà người dùng đã và đang đặt Admin

Cập nhật trạng thái đơn hàng

Thay đổi trạng thái đơn hàng cho người dùng biết Admin

17 Thống kê Thống kê doanh thu Admin

Tìm kiếm, lọc sản phẩm

Tìm kiếm sản phẩm theo tiêu chí

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

Xem chi tiết thông tin sản phẩm User

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

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

Tăng/giảm số lượng sản phẩm trong giỏ Điều chỉnh số lượng từng sản phẩm trong giỏ User

Xóa sản phẩm trong giỏ

Xóa sản phẩm không muốn thanh toán trong giỏ User

23 Đánh giá sản phẩm Đánh giá sao và để lại bình luận cho sản phẩm User

Checkout đơn hàng trước khi thanh toán User

Thanh toán sau khi nhận hàng

Thanh toán đơn hàng sau khi nhận được hàng User

Thanh toán đơn hàng bằng ví

Tra cứu đơn hàng đã đặt của bản thân User

28 Hủy đơn hàng Hủy đơn hàng nếu đổi ý User

Nhắn tin tư vấn, hỏi đáp tương tác quan lại giữa người dùng và quản trị viên

Gợi ý sản phẩm liên quan

Gợi ý những sản phẩm liên quan với sản phẩm cụ thể User

Gợi ý sản phẩm dựa trên hành vi người dùng

Gợi ý những sản phẩm dựa trên quá trình tương tác với hệ thống của người dùng

Xem hướng dẫn để chọn size giày phù hợp User

Cập nhật thông tin cá nhân

Cập nhật thông tin cá nhân User,

Thêm thông tin nhận hàng

Thêm thông tin muốn nhận hàng vào danh sách User

Xóa thông tin nhận hàng

Xóa thông tin không cần nữa ra khỏi danh sách User

36 Thay đôi mật khẩu Thay đổi mật khẩu User

37 Xét giảm giá Xét giảm giá cho sản phẩm Admin

Thiết kế cơ sở dữ liệu

3.3.2 Các thành phần của cơ sở dữ liệu a Collection Category

Tên Kiểu dữ liệu Ý nghĩa

Name string Tên sản phẩm slug String Đuôi của URL categoryImage String Hình ảnh đại diện loại sản phẩm

ParentId String Id cha của loại sản phẩm

CreatedAt DateTime Ngày tạo loại sản phẩm

UpdatedAt DateTime Ngày chỉnh sửa

Name: Tên loại sản phẩm

Slug: là phần sau của URL để truy vấn dựa theo tên loại sản phẩm VD: giay-da-banh- tre-em

CategoryImage: Hình ảnh từng loại sản phẩm đại diện

ParentId: Id của loại sản phẩm bao phủ sản phẩm VD: Loại giày sân cỏ nằm trong loại giày đá banh

Timestamps: Tạo ra trường createdAt (thời điểm tạo), updatedAt (thời điểm cập nhật) b Collection Brand

Name string Tên sản phẩm slug String Đuôi của URL brandImage String Hình ảnh đại diện thương hiệu

CreatedAt DateTime Ngày tạo thương hiệu

Name: Tên thương hiệu sản phẩm

Slug: là phần sau của URL để truy vấn dựa theo tên thương hiệu VD: giay-nike

BrandImage: Hình ảnh từng loại sản phẩm đại diện

Timestamps: Tạo ra trường createdAt (thời điểm tạo), updatedAt (thời điểm cập nhật) c Collection Product

Name String Tên người dùng

Slug String Đuôi của URL

Price Number Giá của sản phẩm

DiscountPercent Number Phần trăm giảm giá

Desciption String Mô tả về sản phẩm

ProductPictures String Id sản phẩm

Brand ObjectId Đánh giá sản phẩm (điểm)

Category ObjectId Phản hồi của khách hàng

Reviews Document Đánh giá của người dùng

Sizes Document Các thông số kích cỡ

CreatedAt DateTime Ngày tạo sản phẩm

IsDisable String Bô vô hiệu hóa

Slug: là phần sau của URL để truy vấn dựa theo tên sản phẩm VD: giay-adidas- amanda-x7-nvidia

Price: giá gốc của sản phẩm (chưa bao gồm giảm giá )

DiscountPercent: phần trăm giảm giá của sản phẩm, mặc định bằng 0

ProductPictures: Danh sách các ảnh về sản phẩm

Reviews: Danh sách đánh giá sản phẩm của người dùng bao gồm: Số sao / 5 (rating), bình luận (comment), thông tin người dùng (user), thời gian đánh giá (createdAt)

Sizes: Các kích cỡ của giày

Branch: Id của thương hiệu dùng để truy vấn trong database

Category: Id của loại sản phẩm dùng để truy vấn trong database

Timestamps are crucial for tracking the creation and update times of products, specifically using fields like createdAt and updatedAt The IsDisable flag differentiates between deleted products and those currently for sale Additionally, understanding the collection size is essential for effective inventory management.

Description String Mô tả về kích cỡ

Size: Kích cỡ của sản phẩm

Desciption: Mô tả về kích cỡ đó dành cho chân có kích thước bao nhiêu e Collection User

Name string Tên người dùng

Username String Tên đăng nhập

Email String Email người dùng

Password String Mật khẩu khi đăng nhập

Role String Phân quyền người dùng (admin, user)

ProfilePicture String Ảnh đại diện

CreatedAt DateTime Ngày tạo tài khoản

Name: tên của người dùng

Username: tên đăng nhập của người dùng

Email: Email để xác định mỗi khách hàng chỉ duy nhất một email nhất định và có thể dùng nó để đăng nhập

Password: Mật khẩu đăng nhập của từng người dùng

Role: Phân quyền cho từng loại user nếu là admin là người quản lý nội dung, còn user thì của khách hàng

ProfilePicture: Ảnh đại diện của người dùng

Timestamps: Tạo ra trường createdAt (thời điểm tạo), updatedAt (thời điểm cập nhật) f Collection Order

The data structure includes various fields: "user" as an ObjectId representing the user's ID, "addressId" as an ObjectId for the user's address ID, "totalAmount" as a Number indicating the total amount, "items" as a Document detailing the products in the shopping cart, "paymentStatus" as a string reflecting the payment status, and "paymentType" as a string specifying the payment method.

OrderStatus Document Trạng thái đơn hàng

CreatedAt DateTime Ngày tạo đơn hàng

User: chứa id của người dùng

AddressId: Id của bảng thông tin địa chỉ nhận hàng của người dùng

TotalAmount: tổng số tiền của mà người dùng đã đặt hàng

Items: Danh sách các sản phẩm người dùng đã đặt bao gồm :

ProductId: Id của sản phẩm

SizeId: Id của kích cỡ

PayablePrice: Giá ngay thời điểm mua

PaymentStatus: trạng thái thanh toán tiền của người dùng

PaymentType: kiểu thanh toán tiền của người dùng bao gồm thanh toán sau khi nhận hàng hoặc qua ví điện tử

OrderStatus: Trạng thái của đơn hàng theo từng giai đoạn như đặt hàng thành công, đã đóng gói, đã được vận chuyển, đã được giao

Timestamps: Tạo ra trường createdAt (thời điểm tạo), updatedAt (thời điểm cập nhật) g Collection Cart

User ObjectId Id của User

CartItems Document Danh sách các sản phẩm trong giỏ hàng

CreatedAt DateTime Ngày tạo giỏ hàng

User: Id của người dùng để xác định giỏ hàng của từng người từng tài khoản

CartItems: Sản phẩm trong giỏ hàng khách hàng đã thêm vào bao gồm các thông tin như:

Product: Id của sản phẩm

Size: Id của kích cỡ

Quantity: Số lượng sản phẩm

Timestamps: Tạo ra trường createdAt (thời điểm tạo), updatedAt (thời điểm cập nhật) h Collection DeliveryInfo

User String Id của người dùng

Address Array Danh sách các địa chỉ của người dùng

Name String Tên của người dùng

PhoneNumber String Số điện thoại của người dùng

Address String Thông tin địa chỉ nhận hàng

IsDefault Boolean Cờ xác định địa chỉ được chọn

User: chứa id của người dùng để lấy thông tin

Address: Danh sách các địa chỉ nhận hàng của người dùng có thể tùy chọn Name: Tên người nhận hàng

PhoneNumber: Số điện thoại nhận hàng

Address: Thông tin địa chỉ nhận hàng

IsDefault: Là địa chỉ mặc định

Timestamps: Tạo ra trường createdAt (thời điểm tạo), updatedAt (thời điểm cập nhật)

3.3.3 Cách kết nối cơ sở dữ liệu

Bước 1: Chúng ta vào trang chủ mongoDB Atlas Database

(https://www.mongodb.com/) để đăng ký một tài khoản hoặc đăng nhập bằng tài khoản google để vào mongoDB online

Hình 34: Giao diện đăng kí, đăng nhập mongodb

Sau khi đăng nhập thành công ta sẽ thấy giao diện như bên dưới

Hình 35: Giao diện trang chủ mongoDB

Bước 2: Tiến hành tạo và cấu hình database

Bước 2.1: Tạo project mongoDB online

Hình 36: Các thức tạo project

Thêm các thông tin như tên và ấn create để khởi tạo project sau khi tạo thành công thì sẽ ra giao diện như sau:

Hình 37: Khởi tạo project thành công

Bước 2.2: Chúng ta cấu hình tài khoản mongoDB

Chúng ta sẽ ấn vào build Database lúc này hệ thống sẽ cho chúng ta chọn các gói muốn sử dụng

Hình 38: Tùy chọn gói lưu trữ dữ liệu

Tiếp theo sẽ là chọn khu vực mà bạn muốn chọn là server để lưu trữ và chọn tạo Cluster

Hình 39: Giao diện cấu hình xong tài khoản mongoDB

Tiếp theo sẽ là cấu hình bảo mật và cấp phát địa chỉ IP sử dụng cho Database

Hình 40: Giao diện cấu hình thông tin bảo mật

Vậy là ta đã cấu hỉnh xong Database

Hình 41: Giao diện cấu hình xong tài khoản mongoDB

Bước 2.3: Chúng ta chọn “Connect”, rồi chúng ta chọn “Connect your application” , chúng ta bấm copy để “Copy” đường dẫn kết nối:

Hình 42: Giao diện lấy connection string

41 mongodb+srv://tanguyen:@cluster0.fndnx.mongodb.net/?retry Writes=true&w=majority

: mật khẩu khi chúng ta cấu hình,

: tên database mà chúng ta cần đặt tên

Bước 2.4: Lấy đoạn connection string vừa copy và dán vào phần code

Hình 43: Đoạn mã kết nối với MongoDB atlas Database

Đặc tả các chức năng

Hình 44: Activity diagram đăng nhập

Bảng 11: Kịch bản đăng nhập

Brief description Quản trị viên, người dùng đăng nhập để có thể truy cập vào trong hệ thống để mua hàng, quản lý hàng hóa

Actor(s) Quản trị viên, người dùng

Pre-conditions Quản trị viên, người dùng đã vào giao diện đăng nhập

Post-conditions Nếu thao tác thành công: Xác thực thành công và chuyển hướng vào trang chủ

Nếu không thành công: Hệ thống báo lỗi và không đăng nhập thành công

Use case bắt đầu khi quản trị viên, người dùng thực hiện:

3 Chuyển hướng vào trang chủ

Hệ thống báo lỗi và thực hiện tác vụ sẽ gặp sự cố khi quản trị viên hoặc người dùng nhập thông tin không hợp lệ, hoặc khi có vấn đề về mạng.

Hình 45: Lược đồ tuần tự đăng nhập

- Giao diện dành cho người dùng

Hình 46: Giao diện đăng nhập phía người dùng

- Giao diện dành cho quản trị viên

Hình 47: Giao diện đăng nhập phía quản trị viên

Hình 48: Activity diagram đăng nhập bằng Google

Bảng 12: Kịch bản đăng nhập bằng Google

Name Đăng nhập bằng Google

Brief description Người dùng sử dụng chức năng này để đăng nhập bằng tài khoản

Pre-conditions Người dùng đã vào giao diện đăng nhập

Nếu thao tác đăng nhập thành công, người dùng sẽ được chuyển hướng vào trang chính Ngược lại, nếu không thành công, hệ thống sẽ thông báo lỗi và không thực hiện đăng nhập.

Basic flow Use case bắt đầu khi người dùng thực hiện:

(Thành công) 1 Điền email và mật khẩu đã đăng ký google mail

Hệ thống báo lỗi và tác vụ thực hiện sẽ không thành công khi người dùng nhập thông tin không hợp lệ hoặc sự cố về mạng

Hình 49: Lược đồ tuần tự đăng nhập bằng Google

Hình 50: Giao diện đăng nhập bằng Google

Hình 51: Activity diagram đăng ký

Bảng 13: Kịch bản đăng ký

Brief description Người dùng đăng ký để tạo tài khoản vào trong hệ thống để mua hàng

Pre-conditions Người dùng đã vào giao diện đăng ký

Nếu thao tác tạo tài khoản thành công, người dùng sẽ được chuyển hướng đến trang chủ Ngược lại, nếu không thành công, hệ thống sẽ thông báo lỗi và quá trình đăng ký sẽ không hoàn tất.

Use case bắt đầu khi người dùng thực hiện:

1 Điền thông tin đăng ký

Hình 52: Lược đồ tuần tự đăng ký

Hình 53: Giao diện đăng ký

Hình 54: Activity diagram quên mật khẩu

Bảng 14: Kịch bản quên mật khẩu

Brief description Người dùng sử dụng chức năng này để đặt lại mật khẩu khi quên mật khẩu hiện tại

Pre-conditions Người dùng đã vào giao diện quên mật khẩu

Nếu thao tác đặt lại mật khẩu thành công, người dùng sẽ được chuyển hướng đến trang đăng nhập Ngược lại, nếu thao tác không thành công, hệ thống sẽ thông báo lỗi và không cho phép đăng nhập.

Use case bắt đầu khi người dùng thực hiện:

1 Điền email và nhấn gửi

2 Vào mail và lấy mã xác thực

3 Nhập mã xác thực, mật khẩu mới và xác nhận mật khẩu

4 Nhấn đặt lại mật khẩu

5 Chuyển hướng vào trang đăng nhập

Hình 55: Lược đồ tuần tự quên mật khẩu

Hình 56: Giao diện quên mật khẩu

Hình 57: Activity diagram thêm loại

Bảng 15: Kịch bản thêm loại

Brief description Quản trị viên có thể thêm loại sản phẩm bổ sung vào hệ thống

Pre-conditions Quản trị viên đã đăng nhập vào hệ thống và vào mục Category

Post-conditions Nếu thao tác thành công: Loại sản phẩm mới được thêm vào cơ sở dữ liệu

Nếu không thành công: Hệ thống báo lỗi và loại sản phẩm không được thêm

Use case bắt đầu khi quản trị viên thực hiện:

1 Nhấn vào mục Thêm loại sản phẩm, hệ thống hiển thị ra cửa sổ thêm loại

2 Nhập tên cho loại sản phẩm mới

3 Chọn loại sản phẩm nếu loại được nhập thuộc loại chi tiết của loại đó

4 Chọn ảnh bìa cho loại sản phẩm mới

5 Nhấn nút thêm loại sản phẩm mới

6 Hệ thống lưu vào cơ sở dữ liệu

Hệ thống báo lỗi và tác vụ thực hiện sẽ không thành công khi quản trị viên nhập thông tin không hợp lệ hoặc sự cố về mạng

Hình 58: Lược đồ tuần tự thêm loại

Hình 59: Giao diện thêm loại

Hình 60: Activity diagram cập nhật loại

Bảng 16: Kịch bản cập nhật loại

Brief description Quản trị viên có thể cập nhật loại sản phẩm và lưu lại vào hệ thống

Pre-conditions Quản trị viên đã đăng nhập vào hệ thống

Post-conditions Nếu thao tác thành công: Thông tin loại sản phẩm được cập nhật lại

Nếu không thành công: Hệ thống báo lỗi và loại sản phẩm không được cập nhật

1 Nhấn vào mục Cập nhật loại sản phẩm, hệ thống hiển thị ra cửa sổ cập nhật loại

2 Chọn thông tin cần sửa đổi của loại sản phẩm đó

3 Tiến hành chỉnh sửa trường thông tin

Hình 61: Lược đồ tuần tự cập nhật loại

Hình 62: Giao diện cập nhật loại

Hình 63: Activity diagram xóa loại

Bảng 17: Kịch bản xóa loại

Name Xóa loại sản phẩm

Brief description Quản trị viên có thể xóa loại sản phẩm

Pre-conditions Quản trị viên đã đăng nhập vào hệ thống và vào mục Category

Post-conditions Nếu thao tác thành công: Loại sản phẩm bị xóa khỏi cơ sở dữ liệu

Nếu không thành công: Hệ thống báo lỗi và loại sản phẩm không được xóa

1 Nhấn vào mục Xóa loại sản phẩm

2 Hệ thống hiện cửa sổ xác nhận

3 Nhấn nút xác nhận xóa

4 Hệ thống xóa loại sản phẩm ra khỏi cơ sở dữ liệu

Hệ thống báo lỗi và thực hiện tác vụ sẽ gặp khó khăn khi xảy ra sự cố về mạng hoặc khi sản phẩm cụ thể đang tồn tại trong hệ thống.

Hình 64: Lược đồ tuần tự xóa loại

Hình 65: Giao diện xóa loại

Hình 66: Activity diagram thêm thương hiệu

Bảng 18: Kịch bản thêm thương hiệu

Brief description Quản trị viên có thể thêm thương hiệu bổ sung vào hệ thống

Post-conditions Nếu thao tác thành công: Thương hiệu mới được thêm vào cơ sở dữ liệu

Nếu không thành công: Hệ thống báo lỗi và thương hiệu không được thêm

1 Nhấn vào mục Thêm thương hiệu, hệ thống hiển thị ra cửa sổ thêm thương hiệu

2 Nhập tên thương hiệu mới

3 Chọn ảnh bìa cho loại thương hiệu

4 Nhấn nút thêm thương hiệu mới

Hình 67: Lược đồ tuần tự thêm thương hiệu

Hình 68: Giao diện thêm thương hiệu

Hình 69:Activity diagram cập nhật thương hiệu

Bảng 19: Kịch bản cập nhật thương hiệu

Name Cập nhật thương hiệu

Brief description Quản trị viên có thể cập nhật thương hiệu và lưu lại vào hệ thống

Post-conditions Nếu thao tác thành công: Thông tin thương hiệu được cập nhật lại

Nếu không thành công: Hệ thống báo lỗi và thương hiệu không được cập nhật

1 Nhấn vào mục Cập nhật thương hiệu sản phẩm, hệ thống hiển thị ra cửa sổ cập nhật thương hiệu

2 Chọn thông tin cần sửa đổi của thương hiệu đó

3 Tiến hành chỉnh sửa trường thông tin

Hình 70: Lược đồ tuần tự cập nhật thương hiệu

Hình 71: Giao diện cập nhật thương hiệu

Hình 72: Activity diagram xóa thương hiệu

Bảng 20: Kịch bản xóa thương hiệu

Brief description Quản trị viên có thể xóa thương hiệu

Post-conditions Nếu thao tác thành công: Thương hiệu bị xóa khỏi cơ sở dữ liệu

Nếu không thành công: Hệ thống báo lỗi và thương hiệu không được xóa

1 Nhấn vào mục Xóa thương hiệu

4 Hệ thống xóa thương hiệu ra khỏi cơ sở dữ liệu

Hệ thống báo lỗi và thực hiện tác vụ sẽ gặp sự cố khi xảy ra vấn đề về mạng hoặc khi sản phẩm của thương hiệu đó còn tồn tại trong hệ thống.

Hình 73: Lược đồ tuần tự xóa thương hiệu

Hình 74: Giao diện xóa thương hiệu

Hình 75: Activity diagram thêm sản phẩm

Bảng 21: Kịch bản thêm sản phẩm

Brief description Quản trị viên có thể thêm sản phẩm bổ sung vào hệ thống

Post-conditions Nếu thao tác thành công: Sản phẩm mới được thêm vào cơ sở dữ liệu

Nếu không thành công: Hệ thống báo lỗi và sản phẩm không được thêm

1 Nhấn vào mục Thêm sản phẩm, hệ thống hiển thị ra cửa sổ thêm thương hiệu

2 Nhập thông tin hợp lệ vào từng trường thuộc tính của sản phẩm

3 Chọn ảnh cho sản phẩm

4 Nhấn nút thêm sản phẩm mới

Hình 76: Lược đồ tuần tự thêm sản phẩm

Hình 77: Giao diện thêm sản phẩm

Hình 78: Activity diagram cập nhật sản phẩm

Bảng 22: Kịch bản cập nhật sản phẩm

Name Cập nhật sản phẩm

Brief description Quản trị viên có thể cập nhật sản phẩm và lưu lại vào hệ thống

Post-conditions Nếu thao tác thành công: Thông tin sản phẩm được cập nhật lại

Nếu không thành công: Hệ thống báo lỗi và sản phẩm không được cập nhật

1 Nhấn vào mục Cập nhật sản phẩm trên sản phẩm bạn muốn

2 Chỉnh sửa những thông tin mà quản trị viên muốn

Hình 79: Lược đồ tuần tự cập nhật sản phẩm

Hình 80: Giao diện cập nhật sản phẩm

Hình 81: Activity diagram xóa sản phẩm

Bảng 23: Kịch bản xóa sản phẩm

Brief description Quản trị viên có thể xóa sản phẩm

Post-conditions Nếu thao tác thành công: Sản phẩm bị xóa khỏi cơ sở dữ liệu

Nếu không thành công: Hệ thống báo lỗi và sản phẩm không được xóa

1 Nhấn vào mục Xóa sản phẩm

4 Hệ thống vô hiệu hóa sản phẩm, không cho sản phẩm xuất hiện

Hệ thống báo lỗi và tác vụ thực hiện sẽ không thành công khi có sự cố về mạng hoặc

Hình 82: Lược đồ tuần tự xóa sản phẩm

Hình 83: Giao diện xóa sản phẩm

Hình 84: Activity diagram xóa người dùng

Bảng 24: Kịch bản xóa người dùng

Brief description Quản trị viên có thể xóa người dùng hoặc quản trị viên

Nếu thao tác xóa người dùng hoặc quản trị viên thành công, họ sẽ bị xóa khỏi cơ sở dữ liệu và không còn xuất hiện trên màn hình Ngược lại, nếu thao tác không thành công, hệ thống sẽ hiển thị thông báo lỗi và hủy bỏ tác vụ.

1 Nhấn vào nút Xóa tại người dùng, quản trị viên cần xóa

2 Hệ thống xóa người dùng, quản trị viên đó ra khỏi cơ sở dữ liệu

Hệ thống báo lỗi và tác vụ thực hiện sẽ không thành công khi có sự cố về mạng hoặc không kết nối được với server

Hình 85: Lược đồ tuần tự xóa người dùng

Hình 86: Giao diện xóa người dùng

Hình 87: Activity diagram quản lý đơn hàng

Bảng 25: Kịch bản quản lý đơn hàng

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

Brief description Quản trị viên có thể xem, kiểm tra đơn hàng

Use case bắt đầu khi quản trị viên vào mục Order:

1 Xem các đơn hàng đã được bán

Hệ thống sẽ không hiển thị các đơn hàng hoặc các thao tác không thành công vì sự cố do mạng hoặc kết nối đến server

Hình 88: Lược đồ tuần tự quản lý người dùng

Hình 89: Giao diện quản lý người dùng

3.4.16 Cập nhật trạng thái đơn hàng

Hình 90: Activity diagram cập nhật trạng thái đơn hàng

Bảng 26: Kịch bản cập nhật trạng thái đơn hàng Name Cập nhật trạng thái đơn hàng

Brief description Quản trị viên nhấn chọn trạng thái thích hợp của từng đơn hàng và nhấn nút Xác nhận

Pre-conditions Quản trị viên, người dùng đã đăng nhập vào hệ thống và vào trang

Use case bắt đầu khi quản trị viên vào mục Order:

2 Chọn trạng thái của đơn hàng cần thay đổi

3 Nhấn nút Confirm để xác nhận cập nhật trạng thái

4 Hệ thống lưu trạng thái vừa được cập nhật xuống cơ sở dữ liệu và trả về trạng thái hiện tại của đơn hàng đã được cập nhật

Còn về phía người dùng thì :

1 Vào mục Tra cứu đơn hàng

2 Theo dõi chi tiết và trạng thái các đơn hàng đã và đang đặt

3 Người dùng nhấn chọn lọc các đơn hàng theo trạng thái

4 Hệ thống sẽ lọc ra các đơn hàng theo trạng thái mà người dùng vừa lọc

5 Người dùng có thể nhấn nút Hủy ở đơn hàng nếu đơn hàng đó còn trong quá trình đặt và đóng gói

6 Hệ thống sẽ xóa đơn hàng đó

Hệ thống sẽ không hiển thị các đơn hàng hoặc các thao tác không thành công vì sự cố do mạng hoặc kết nối đến server

Hình 91: Lược đồ tuần tự cập nhật trạng thái đơn hàng

Hình 92: Giao diện cập nhật trạng thái đơn hàng

Hình 93: Activity diagram xét giảm giá

Bảng 27: Kịch bản xét giảm giá

Brief description Quản trị viên có thể xét giảm giá cho các sản phẩm theo loại, thương hiệu

Use case bắt đầu khi quản trị viên thực hiện :

2 Chọn loại hoặc thương hiệu muốn xét giảm giá

3 Chọn phần trăm giá giảm

5 Các sản phẩm được áp dụng phần trăm giá giảm

Hệ thống sẽ không thực hiện được thao tác vì sự cố do mạng hoặc kết nối đến server

Hình 94: Lược đồ tuần tự xét giảm giá

Hình 95: Giao diện xét giảm giá

Hình 96: Activity diagram thống kê

Bảng 28: Kịch bản thống kê

Brief description Quản trị viên có thể xem thống kê theo mốc, khoảng thời gian về việc bán hàng trên website

Use case bắt đầu khi quản trị viên thực hiện :

1 Nhấn vào mục Statistic phần SideBar

2 Chọn ngày bắt đầu và kết thúc muốn xem thống kê

3 Chọn bước nhảy muốn xem (ngày, tháng, năm, )

4 Chọn loại biểu đồ (Tròn ,Cột, )

5 Hệ thống hiển thị ra dữ liệu doanh thu qua biểu đồ

Hệ thống sẽ không hiển thị đúng vì sự cố do mạng hoặc kết nối đến server

Hình 97: Lược đồ tuần tự thống kê

Hình 98: Giao diện thống kê

3.4.19 Tìm kiếm, lọc sản phẩm

Hình 99: Activity diagram tìm kiếm, lọc sản phẩm

Bảng 29: Kịch bản tìm kiếm, lọc sản phẩm

Name Tìm kiếm, lọc sản phẩm

Quản trị viên và người dùng có thể dễ dàng tìm kiếm loại, thương hiệu hoặc sản phẩm mong muốn thông qua ô tìm kiếm hoặc các tùy chọn lọc có sẵn.

Pre-conditions Quản trị viên, người dùng đã đăng nhập vào hệ thống

Post-conditions Nếu thao tác thành công: Các loại, sản phẩm, thương hiệu được nhập có liên quan sẽ được hiện ra màn hình

Nếu thao tác thật bại: Có thể hiện lỗi nếu thông tin được nhập vào không hợp lệ hay vì sự cố nào đó

Use case bắt đầu khi quản trị viên, người dùng sẽ thực hiện:

1 Tìm kiếm thông tin sản phẩm 1.1.Nhập thông tin cần tìm 1.2.Nhấn nút Tìm kiếm

2 Lọc sản phẩm theo lựa chọn : Lựa chọn các tiêu chí có sẵn

Nếu hệ thống gặp sự cố hay thông tin nhập không hợp lệ thì sẽ không thực hiện tác vụ được

Hình 100: Lược đồ tuần tự tìm kiếm, lọc sản phẩm

Hình 101: Giao diện tìm kiếm, lọc sản phẩm phía quản trị viên

Hình 102: Giao diện tìm kiếm, lọc sản phẩm phía người dùng

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

Hình 103: Activity diagram xem chi tiết sản phẩm

Bảng 30: Kịch bản xem chi tiết sản phẩm

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

Brief description Người dùng vào trang chi tiết sản phẩm, xem mô tả , ảnh của sản phẩm

Pre-conditions Người dùng nhấn vào một sản phẩm bất kì

Post-conditions Nếu thao tác thành công: Dữ liệu của sản phẩm sẽ được hệ thống đưa lên trang web

Nếu thao tác thất bại: Trang sẽ không hiện dữ liệu

Use case bắt đầu khi người dùng thực hiện :

1 Nhấn chọn 1 sản phẩm bất kì

2 Xem thông tin chi tiết, ảnh minh họa sản phẩm

3 Nhấn chọn size phù hợp và số lượng muốn mua

4 Nhấn mua ngay để chuyển trang Checkout

5 Hệ thống sẽ ghi nhận và chuyển sản phẩm đó với size và số lượng tương ứng

6 Người dùng có thể nhấn Thêm vào giỏ

7 Sản phẩm được thêm vào giỏ hàng

Thông tin chi tiết của trang không được hiện hoặc các thao tác sẽ không được thực hiện

Hình 104: Lược đồ tuần tự xem chi tiết sản phẩm

Hình 105: Giao diện chi tiết sản phẩm

3.4.21 Xem hướng dẫn chọn size

Hình 106: Activity diagram hướng dẫn chọn size

Bảng 31: Kịch bản hướng dẫn chọn size

Name Xem hướng dẫn chọn size

Brief description Người dùng vào trang hướng dẫn chọn size để đo size 1 cách chính xác nhất

Pre-conditions Người dùng vào mục Hướng dẫn chọn size hoặc vào chi tiết sản phẩm và chọn link hướng dẫn chọn size

Post-conditions Nếu thao tác thành công: Dữ liệu của trang sẽ được hiển thị

Nếu không thành công: Tác vụ không thực hiện được

1 Xem các bước thực hiện để xác định size giày

2 Người dùng có thể nhấn vào video để xem cách xác định size giày

Nếu hệ thống có sự cố hay vì lý do nào đó không hợp lệ thì thao tác không thực hiện được

Hình 107: Lược đồ tuần tự hướng dẫn chọn size

Hình 108: Giao diện hướng dẫn chọn size

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

Hình 109: Activity diagram thêm sản phẩm vào giỏ

Bảng 32: Kịch bản thêm sản phẩm vào giỏ

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

Người dùng chọn sản phẩm và hệ thống sẽ chuyển hướng đến trang chi tiết sản phẩm, nơi họ có thể chọn kích thước và số lượng mong muốn trước khi nhấn "Thêm vào giỏ hàng".

Pre-conditions Người dùng đã đăng nhập vào hệ thống

Nếu thao tác thêm sản phẩm vào giỏ hàng thành công, trang giỏ hàng sẽ hiển thị dữ liệu và sản phẩm vừa được thêm Ngược lại, nếu thao tác không thành công, dữ liệu sẽ không hiển thị hoặc thao tác không thực hiện được.

1 Nhấn chọn 1 sản phẩm bất kì

2 Xem thông tin chi tiết, ảnh minh họa sản phẩm

3 Nhấn chọn size phù hợp và số lượng muốn mua

4 Nhấn nút Thêm vào giỏ

Hệ thống sẽ báo lỗi trong khi thao tác hoặc dữ liệu trang không được tải

Hình 110: Lược đồ tuần tự thêm sản phẩm vào giỏ

Hình 111: Giao diện thêm sản phẩm vào giỏ

3.4.23 Tăng/giảm số lượng sản phẩm trong giỏ

Hình 112: Activity diagram tăng giảm số lượng sản phẩm trong giỏ

Bảng 33: Kịch bản tăng/giảm số lượng sản phẩm trong giỏ Name Tăng giảm số lượng sản phẩm

Brief description Người dùng nhấn vào nút tăng giảm để điều chỉnh số lượng muốn mua cho từng sản phẩm

Nếu thao tác thành công, hệ thống sẽ ghi nhận và hiển thị số lượng chính xác theo yêu cầu của người dùng Ngược lại, nếu thao tác không thành công, hệ thống sẽ thông báo lỗi cho người dùng.

1 Nhấn vào nút tăng giảm số lượng trên từng sản phẩm

2 Điều chỉnh số lượng thích hợp

3 Hệ thống sẽ lưu lại và hiển thị số lượng tương ứng

Thao tác thất bại và hiển thị thông báo lỗi

Hình 113: Lược đồ tuần tự tăng giảm số lượng sản phẩm trong giỏ

Hình 114: Giao diện tăng giảm số lượng sản phẩm trong giỏ

3.4.24 Xóa sản phẩm trong giỏ

Hình 115: Activity diagram xóa sản phẩm trong giỏ

Bảng 34: Kịch bản xóa sản phẩm trong giỏ

Name Xóa sản phẩm trong giỏ

Brief description Người dùng nhấn vào nút xóa để xóa sản phẩm cần xóa trong giỏ ra

Pre-conditions Người dùng đã đăng nhập vào hệ thống và trong giỏ hàng có sản phẩm cần xóa

Nếu thao tác xóa sản phẩm thành công, sản phẩm sẽ bị xóa và không còn hiển thị trong giỏ hàng Ngược lại, nếu thao tác không thành công, sẽ có thông báo lỗi hiển thị.

1 Nhấn vào nút xóa trên sản phẩm cần xóa

2 Hệ thống sẽ xóa sản phẩm đó ra khỏi giỏ hàng

Thao tác thất bại và hiển thị thông báo lỗi

Hình 116: Lược đồ tuần tự xóa sản phẩm trong giỏ

Hình 117: Giao diện xóa sản phẩm trong giỏ

3.4.25 Cập nhật thông tin cá nhân

Hình 118: Activity diagram cập nhật thông tin cá nhân

Bảng 35: Kịch bản cập nhật thông tin cá nhân Name Cập nhật thông tin cá nhân

Brief description Quản trị viên, người dùng có thể điều chỉnh các thông tin cá nhân của mình

Pre-conditions Quản trị viên, người dùng đã đăng nhập vào hệ thống

Nếu thao tác thành công, thông tin người dùng và quản trị viên sẽ được cập nhật và lưu trữ trong cơ sở dữ liệu Ngược lại, nếu thao tác không thành công, hệ thống sẽ hiển thị thông báo không hợp lệ và hủy bỏ tác vụ.

1 Nhấn vào biểu tượng hoặc hồ sơ

3 Nhấn nút Xác nhận cập nhật

(Thất bại) Ở các bước 2 nếu có các tác vụ không hợp lệ sẽ không thực hiện được hoặc do sự cố về mạng, vấn đề kết nối với server

Hình 119: Lược đồ tuần tự cập nhật thông tin cá nhân

Hình 120: Giao diện cập nhật thông tin cá nhân

Hình 121: Activity diagram thay đổi mật khẩu

Bảng 36: Kịch bản thay đổi mật khẩu

Name Thay đổi mật khẩu

Brief description Người dùng có thể thay đổi mật khẩu mới cho mình

Nếu thao tác cập nhật mật khẩu thành công, mật khẩu của người dùng sẽ được lưu trữ an toàn trong cơ sở dữ liệu Ngược lại, nếu thao tác không thành công, hệ thống sẽ hiển thị thông báo lỗi và hủy bỏ tác vụ.

2 Nhập mật khẩu mới và xác nhận mật khẩu

5 Nhấn nút Xác nhận cập nhật

(Thất bại) Ở các bước 2 nếu có các tác vụ không hợp lệ sẽ không thực hiện được hoặc do sự cố về mạng, vấn đề kết nối với server

Hình 122: Lược đồ tuần tự thay đổi mật khẩu

Hình 123: Giao diện thay đổi mật khẩu

3.4.27 Thêm thông tin nhận hàng

Hình 124: Activity diagram thêm thông tin nhận hàng

Bảng 37: Kịch bản thêm thông tin nhận hàng

Name Thêm thông tin nhận hàng

Brief description Người dùng có thêm thông tin nhận hàng khác vào danh sách

Nếu thao tác thành công, thông tin nhận hàng sẽ được thêm vào dữ liệu Ngược lại, nếu thao tác thất bại, hệ thống có thể hiển thị lỗi do thông tin nhập vào không hợp lệ hoặc do sự cố khác.

Use case bắt đầu khi người dùng sẽ thực hiện:

1 Nhập tất cả các trường cần để tạo thông tin nhận hàng mới

Nếu hệ thống gặp sự cố hay thông tin nhập không hợp lệ thì sẽ không thực hiện tác vụ được

Hình 125: Lược đồ tuần tự thêm thông tin nhận hàng

Hình 126: Giao diện thêm thông tin nhận hàng

3.4.28 Xóa thông tin nhận hàng

Hình 127: Activity diagram xóa thông tin nhận hàng

Bảng 38: Kịch bản xóa thông tin nhận hàng Name Xóa thông tin nhận hàng

Brief description Người dùng có thể xóa thông tin nhận hàng ra khỏi danh sách

QUẢN LÝ DỰ ÁN VÀ TIẾN ĐỘ

Quản lý tiến độ

4.1.1 Phiên bản 1 (Xây dựng và phát triển Tiểu luận chuyên ngành):

1 Giai đoạn 1 (Tuần 1 đến cuối tuần 2)

- Lên ý tưởng giao diện người dùng

- Thao khảo các trang web có nội dung tương tự

- Cài đặt các package cần thiết

- Xây dựng nền tảng cho phần Backend (Thiết kế API, bảo mật dùng JWT, router, model, controller, …)

- Xây dựng giao diện cho Admin/User

- Xây dựng các chức năng quản lý loại, thương hiệu, sản phẩm

- Xây dựng chức năng tìm kiếm, lọc sản phẩm

- Xây dựng các chức năng quản lý giỏ hàng, cập nhật

- Xây dựng chức năng thanh toán

- Xây dựng chức năng quản lý đơn hàng, tra cứu đơn hàng

- Xây dựng chức năng tư vấn hỏi đáp

- Xây dựng chức năng đánh giá sản phẩm

- Xây dựng chức năng báo cáo, thống kê

5 Giai đoạn 5 (Tuần 15 đến hết học kì)

- Kiểm thử lại toàn bộ hệ thống

- Khắc phục lỗi phát sinh trong lúc kiểm thử

- Triển khai dự án lần 1

4.1.2 Phiên bản 2 (Nâng cấp, phát triển thành Khóa luận tốt nghiệp)

1 Giai đoạn 1 - Từ tuần 26 đến tuần 29 (từ ngày 14/2 – 13/3/2022)

- Xem lại đặc tả yêu cầu toàn bộ hệ thống đã được xây dựng trước

- Thiết kế mô hình diagram chi tiết hơn so với báo cáo trước

- Xây dựng crawler service để tạo dữ liệu mẫu

- Nghiên cứu về mô hình microservices

- Nghiên cứu về kafka, API gateway

- Tái cấu trúc Monolithic sang microservices

- Xây dựng recommendation system gợi ý sản phẩm

- Nghiên cứu về docker swarm, dịch vụ cơ sở hạ tầng của digital Ocean, viết dockerfile & docker-compose

- Cải tiến search trực tiếp

- Chỉnh sửa phương thức xác thực Jsonwebtoken theo microservices

- Phát triển thêm chức năng gợi ý sản phẩm

- Kiểm thử lại toàn bộ hệ thống

- Khắc phục lỗi phát sinh trong quá trình kiểm thử

Quản lý rủi ro

4.2.1 Xác định rủi ro và mức độ ảnh hưởng

Bảng 48 : Bảng xác định rủi ro và mức độ ảnh hưởng

Rủi ro Xác xuất xảy ra Mức độ ảnh hưởng

Kinh nghiệm thiếu sót làm cho cấu trúc, hiệu suất sản phẩm không được tối ưu Cao Khá nghiêm trọng

Thành viên trong nhóm bị nhiễm covid-19 Cao Rất nghiêm trọng

Trục trặc trong việc quản lý mã nguồn trên github khiến các đoạn mã bị xung đột Cao Nghiêm trọng

Nhiều phần kiến thức khó làm mất nhiều thời gian tìm hiểu Cao Khá nghiêm trọng

Thành viên trong nhóm bị đau/ ốm Cao Vừa

Thành viên xin rút khỏi dự án Thấp Rất nghiêm trọng

Khách hàng yêu cầu tính năng khó Khá cao Nghiêm trọng

Khách hàng thay đổi yêu cầu của tính năng Khá cao Nghiêm trọng

Xung đột nội bộ Thấp Rất nghiêm trọng

Bảng 49: Bảng hướng giải quyết một số rủi ro

Rủi ro Hướng giải quyết

Kinh nghiệm thiếu sót Chủ động tìm hiểu, nghiên cứu tài liệu liên quan Tham khảo trên các cộng đồng lập trình Thành viên bị nhiễm covid-19

Tăng cường tập luyện thể dục thể thao, ăn chín uống sôi, hạn chế tiếp xúc hoặc đi đến nơi đông người Xung đột code khi quản lý github

Luôn tạo nhánh mới mỗi khi commit code và kiểm tra code thật kĩ trước khi merge

Khách hàng yêu cầu tính năng khó hoặc thay đổi yêu cầu

Thương lượng xin thêm chi phí cũng như thời gian để hoàn thành

Xung đột nội bộ Luôn trao đổi, động viên khích lệ tinh thần giữa các thành viên, cân đối nhiệm vụ giao cho mỗi người.

Triển khai hệ thống

4.3.1 Triển khai phần server lên AWS

Hiện nay, có nhiều dịch vụ đám mây như Azure, Amazon và Heroku hỗ trợ việc triển khai ứng dụng nhanh chóng Trong số đó, nhóm chúng tôi đã lựa chọn Heroku làm nền tảng để đặt server trực tuyến.

- Kiến trúc deploy: Sử dụng công cụ Native Clustering (phân cụm) của Docker swarm để quản lí

- Tiền điều kiện: o Đã có tài khoản AWS o Đã clone mã nguồn o Các service đã được đóng gói và đẩy lên Docker hub

+ Bước 1: Tiến hành tạo các instance trên máy chủ EC2

Tiến hành nhập các thông tin cần thiết sau đó ấn “Launch Instance”

Hình 158: Khởi tạo EC2 instance

+ Bước 2: SSH vào EC2 instance

Hình 159: Giao diện danh sách các instance

Tiến hành vào chi tiết instance bằng cách bấm vô Instance ID

Hình 160: Giao diện chi tiết instance

Chọn connect để lấy connect string và tiến hành ssh vào Instance

Hình 161: Connection string để SSH

Tiến hành SSH vào EC2 instance bằng Command Line máy cá nhân tại thư mục chứa file BEM đã khởi tạo lúc tạo Instance

Hình 162: SSH vào EC2 instance

Hình 163: Màn hình sau khi SSH thành công

+ Bước 3: Tiến hành cài Docker vào máy chủ EC2 qua những dòng lệnh sau

• sudo amazon-linux-extras install docker –y

• sudo usermod -a -G docker ec2-user

• sudo chmod 666 /var/run/docker.sock

+ Bước 4: Copy file docker-compose.yml từ máy ngoài vào EC2 Đầu tiên ta lấy đường dẫn lưu file docker-compose.yml

Hình 164: Đường dẫn chưa file docker-compose

Tiếp tục đứng tại vị trí folder chứa file pem mở cmd và run dòng lệnh như sau:

• scp -i xxxxx.pem “đường dẫn”/docker-compose.yml ec2-user@ec2-54-167-68- 165.compute-1.amazonaws.com:~/

Hình 165: Màn hình sau khi copy thành công

+ Bước 5: Khởi tạo docker swarm và run hệ thống

Khởi tạo docker swarm bằng câu lệnh:

Tiếp tục khởi tạo mạng chung cho các service bằng câu lệnh:

“docker network create -d overlay doublet-network”

Run hệ thống bằng câu lênh:

“docker stack deploy compose-file docker-compose.yml doublet_stack”

Vậy là đã hoàn thành deploy server

4.3.2 Triển khai phần giao diện

- Về phần frontend nhóm chọn Vercel, tương tự như heroku nhưng hỗ trợ deploy frontend mạnh mẽ hơn

Để bắt đầu, bạn cần tạo một repository trên GitHub và đẩy mã nguồn của mình lên đó Sau khi hoàn tất, hãy đăng nhập vào Vercel bằng tài khoản GitHub mà bạn đã sử dụng để tải mã nguồn lên.

Hình 166: Giao diện sau khi đăng nhập thành công

+ Bước 3: Chọn mã nguồn cần đẩy lên hosting

Chọn New Project và chọn import project cần đẩy lên

Hình 167: Giao diện chọn project cần đẩy

Tiến hành import project cần deploy

+ Bước 4: Thiết lập môi trường và hoàn tất deploy

Sau khi import vào thì chúng ta cần thêm các biến môi trường mà chúng ta sử dụng sau đó chọn Deploy để hoàn tất

Hình 168: Giao diện thiết lập môi trường

144 Sau khi chờ đợi deploy ta sẽ thấy được màn hình thành công như sau:

Hình 169: Giao diện deploy thành công

KIỂM THỬ

Kế hoạch kiểm thử

Xây dựng kế hoặc kiểm thử:

- Các rủi ro và yếu tố bất ngờ

- Môi trường kiểm thử: trên nhiều trình duyệt khác nhau

- Thực hiện test các testcase với các Actor

Kiểm thử thủ công

5.2.1 Kiểm thử chức năng đăng ký

Bảng 50: Kiểm thử chức năng đăng ký

Kiểm tra chức năng đăng ký tài khoản user

1 Truy cập vào trang web

3 Nhập email, tên, password, và confirm password

5 Nhận OTP được gửi về email và nhập vào ô Mã OTP

6 Click Xác nhận Đăng ký thành công

Kiểm tra định dạng email

Không thể đăng ký và hiển thị thông

3 Nhập email với định dạng sai

4 Click button đăng ký báo email không hợp lệ

Kiểm tra mật khẩu không đủ 8 ký tự

3 Nhập password dưới 8 kí tự

Hiển thị thông báo “Mật khẩu hợp lệ chỉ chứa từ 8- 50” kí tự”

Kiểm tra confirm password không trùng khớp

1.Truy cập vào trang web

“daylapwd” và confirm password “khongphaipwd”

Không thể đăng ký và hiển thị thông báo “Xác nhận mật khẩu không trùng khớp !”

Kiểm tra bỏ trống các trường

Thông báo không hợp lệ dưới các ô nhập và alert

“Vui lòng kiểm tra lại thông tin đăng ký !”

Kiểm tra nhập vào email đã tồn tại

Không thể đăng ký và hiển thị thông

4 Click button đăng ký báo email đã tồn tại

Kiểm tra việc verify email khi đăng ký xong

Gửi mã OTP về email thành công

5.2.2 Kiểm thử chức năng đăng nhập

Bảng 51: Kiểm thử chức năng đăng nhập

Kiểm tra khi nhập sai mật khẩu thì sẽ đăng nhập thất bại

4 Click vào button đăng nhập

Không thể đăng nhập và thông báo

“Thông tin đăng nhập không đúng”

Kiểm tra khi user không nhập email hoặc mật khẩu

3 Click vào button đăng nhập

Không và đăng nhập và hiển thị thông báo “Vui lòng kiểm tra thông

148 thì sẽ đăng nhập thất bại tin đăng nhập”

Kiểm tra khi user nhập sai định dạng email sẽ không thể đăng nhập

“.com” và password 4.Click đăng nhập

Không thể đăng nhập và hiển thị thông báo “Vui lòng kiểm tra thông tin đăng nhập”

Kiểm tra khi user nhập email không tồn tại sẽ đăng nhập thất bại

3 Nhập email không tồn tại và password

Không thể đăng nhập và hiển thị thông báo “Thông tin đăng nhập không đúng”

Kiểm tra khi user nhập các thông tin hợp lệ thì đăng nhập thành công

4 Click đăng nhập Đăng nhập thành công Pass

5.2.3 Kiểm thử chức các chức năng quản lý giỏ hàng

Bảng 52: Kiểm thử các chức năng quản lý giỏ hàng

Kiểm tra chức năng thêm sản phẩm vào giỏ hàng khi chưa đăng nhập vào tài khoản

3 Click chọn 1 sản phẩm bất kì

4 Click chọn “Thêm vào giỏ hàng”

Không thể thêm vào giỏ hàng và chuyển hướng đến trang đăng nhập

Kiểm tra chức năng thêm sản phẩm vào giỏ hàng khi đã đăng nhập vào tài khoản

3 Vào chi tiết 1 sản phẩm bất kì

4 Chọn size và click “Thêm vào giỏ hàng”

Kiểm tra chức năng tăng số lượng sản phẩm trong giỏ hàng

3 Chọn vào biểu tượng giỏ hàng

4 Click tăng số lượng sản phẩm

Số hiển thị tăng theo số lượng click

Kiểm tra chức năng giảm số lượng sản phẩm trong giỏ hàng

3 Chọn vào biểu tượng giỏ hàng

4 Click tăng số lượng sản phẩm

Số hiển thị giảm theo số lượng click

Kiểm tra chức năng xoá sản phẩm khỏi giỏ hàng

5 Click button xoá sản phẩm

Xoá sản phẩm khỏi giỏ hàng thành công

5.2.4 Kiểm thử chức năng quản lý sản phẩm

Bảng 53: Quản lý chức năng quản lý sản phẩm

Kiểm tra chức năng xoá sản phẩm

1 Truy cập vào trang quản trị admin

2 Đăng nhập với tài khoản Admin

3 Click Product bên navigation bên trái

4 Click icon ‘del” ở cuối dòng thông tin sản phẩm

5 Click "OK" trên thanh xác nhận

Xoá sản phẩm và cập nhật lại trang web

Kiểm tra chức năng hiển thị thông tin sản phẩm theo tên

4 Bấm vào ô name trên thanh nav

Hiển thị danh sách thông tin sản phẩm theo thứ tự từ A-Z và Z-A

Kiểm tra chức năng tìm kiếm sản phẩm

4 Nhập từ khóa vào khung Enter your search

Hiện thông tin liên quan đến từ khóa cần tìm

5.2.5 Kiểm thử chức năng quản lý người dùng

Bảng 54: Kiểm thử chức năng quản lý người dùng

Kiểm tra chức năng hiển thị theo Role tài khoản

Hiển thị danh sách thông tin tài khoản của User

3 Click User bên navigation bên trái

4 Chọn vào selected lần lượt với 3 loại “all”, “user”,

Kiểm tra chức năng tìm kiếm theo email, name người dùng

4 Nhập từ khóa cần tìm vào ô

Hiện thông tin về những tài khoản liên quan

Kiểm tra chức năng xoá tài khoản người dùng

5 Click button “del” ở cuối dòng thông tin người dùng

6 click “OK” để xác nhận

Xoá tài khoản thành công Pass

Hiển thị thông tin chi tiết về user

Hiển thị thông tin chi tiết về user đó

4 Click button “Details” ở mỗi hàng user

Kiểm tra update thông tin quản trị viên thanh công

3 Click Tên quản trị viên trên góc phải màn hình

4 Nhập các thông tin mới

Cập nhật thành công và thông tin được thay đổi mới

Kiểm tra update Role cho user thành công

3 Chọn “details” vào bất kì một user

Cập nhật thành công và thông tin được thay đổi mới

5.2.6 Kiểm thử chức năng quản lý đơn hàng

Bảng 55: Kiểm thử chức năng quản lý đơn hàng

Kiểm tra chức năng hiển thị theo trạng thái đơn hàng

3 Chọn Order tại navigation bên trái

Hiển thị danh sách các đơn hàng có trạng thái “Packed” hay

Kiểm tra chức năng hiển thị theo trạng thái đơn hàng

4 Chọn trạng thái “Packed” tại button phía trên cùng bên phải

Hiển thị danh sách các đơn hàng có trạng thái “Packed”

Thay đổi trạng thái của đơn hàng

Hiển thị đơn hàng với trạng thái mới đúng theo trạng thái vừa chọn

4 Thay đổi trạng thái của một đơn hàng

Kiểm tra đơn hàng khi thay đổi trạng thái sang

4 Chọn filter các đơn hàng với trạng thái “Shipped”

Trạng thái được chuyển thành công và giao diện màn hình có chữ

Kiểm thử API

5.3.1 API đăng nhập – phương thức POST

Bảng 56: Bảng mô tả API đăng nhập

Route Method Request JSON Response JSON Mô tả https://ec2-3-112-

1.compute.amazon aws.com/api/auth/s ignin

Xác thực tài khoản đăng nhập

5.3.2 API đăng ký – phương thức POST

Bảng 57: Bảng mô tả API đăng ký

1.compute.amazon aws.com/api/auth/s ignup

Thông báo tạo tài khoản thành công

5.3.3 API lấy toàn bộ sản phẩm– phương thức POST

Hình 172: API lấy toàn bộ sản phẩm

Bảng 58: Bảng mô tả API lấy toàn bộ sản phẩm

1.compute.amazon aws.com/api/produ ct/getProducts

Post products: Array Hiển thị tất cả các sản phẩm

5.3.4 API lấy một sản phẩm theo Slug – phương thức GET

Hình 173: API lấy một sản phẩm theo slug

Bảng 59: Bảng mô tả API lấy một sản phẩm theo Slug

1.compute.amazon aws.com/api/produ ct/”Slug”

Get product: Object Hiển thị một sản phẩm theo slug

5.3.5 API lấy các sản phẩm theo loại – phương thức GET

Hình 174: API lấy các sản phẩm theo loại

Bảng 60: Bảng mô tả API lấy các sản phẩm theo loại

1.compute.amazon aws.com/api/produ ct/category/Giay- bong-dja-

Get products: Array Hiển thị danh sách các sản phẩm theo loại

5.3.6 API thêm sản phẩm – phương thức POST

Hình 175: API thêm sản phẩm

Bảng 61: Bảng mô tả API thêm sản phẩm

1.compute.amazon aws.com/api/produ ct/add

Array product: Object Hiển thị thông tin sản phẩm đã được thêm thành công

5.3.7 API tìm kiếm sản phẩm theo từ khóa – Phương thức POST

Hình 176: API tìm kiếm sản phẩm theo từ khóa

Bảng 62: Bảng mô tả API tìm kiếm sản phẩm theo từ khóa

1.compute.amazon aws.com/api/produ ct/searchByProduc tName

Post - text: string products: Array Hiển thị danh sách sản phẩm

5.3.8 API thêm loại – phương thức POST

Bảng 63: Bảng mô tả API thêm loại

1.compute.amazon aws.com/api/categ ory/add

Image category: Object Hiển thị danh mục sản phẩm đã thêm

5.3.9 API lấy thông tin đơn hàng – phương thức POST

Hình 178: API lấy thông tin đơn hàng

Bảng 64: Bảng mô tả API lấy thông tin đơn hàng

1.compute.amazo naws.com/api/ord er/getOrder

Post orderId: string order: Object Hiển thị thông tin đơn hàng thành công

5.3.10 API gợi ý danh sách sản phẩm liên quan

Hình 179: API gợi ý danh sách sản phẩm liên quan

Bảng 65: Bảng mô tả API gợi ý danh sách sản phẩm liên quan

Request JSON Response JSON Mô tả https://ec2-3-112-

1.compute.amazon aws.com/api/recom

“id”: String } order: Object Hiển thị danh sách các sản phẩm liên quan

Tiêu đề	Xây Dựng Website Bán Giày Thể Thao Áp Dụng Công Nghệ MERN Stack
Tác giả	Lê Đức Tân, Nguyễn Văn Tân
Người hướng dẫn	TS. Huỳnh Xuân Phụng
Trường học	Đạ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	Đồ Án Tốt Nghiệp
Năm xuất bản	2022
Thành phố	Tp. Hồ Chí Minh

Định dạng
Số trang	193
Dung lượng	14,89 MB