Trang web này không chỉ là một nền tảng thương mại điện tửmà còn là nguồn thông tin đáng tin cậy về giày bóng đá cho cộng đồng yêu thể thao.Trong quá trình phát triển, em đã chú trọng và
GIỚI THIỆU TỔNG QUAN
Đặt vấn đề
Hiện nay thương mại điện tử Việt Nam đang phát triển rất nhanh Nhu cầu mua sắm trực tuyến của người dùng ngày càng tăng cao Việc xây dựng trang web bán hàng trang sức trực tuyến là điều tất yếu cho những công ty, các tổ chức kinh doanh muốn hình thành thương hiệu Thương mại điện tử thực sự là một cuộc cách mạng trong phương thức bán hàng mà nếu biết cách áp dụng thì doanh nghiệp sẽ đạt được thành công ngoài mong đợi trong việc đưa sản phẩm đến tay người tiêu dùng
Trong thời đại công nghệ số này, sự bùng nổ của thương mại điện tử đã làm thay đổi bức tranh kinh doanh truyền thống, mở ra những cơ hội đầy hướng hẹn và thách thức đối với các doanh nghiệp Xu hướng mua sắm trực tuyến ngày càng trở thành một phần không thể thiếu trong cuộc sống hằng ngày của chúng ta, khiến cho việc xây dựng và phát triển các trang web thương mại trở nên quan trọng hơn bao giờ hết.
Trong bối cảnh này, đồ án “Xây dựng website bán giày bóng đá” là một cơ hội để tiếp cận với xu hướng mạnh mẽ của thương mại điện tử Với sự thuận tiện và linh hoạt mà website này mang lại, người tiêu dùng không chỉ dễ dàng tìm kiếm và so sánh sản phẩm, mà còn, có thể thực hiện giao dịch mọi lúc mọi nơi.
Việc xây dựng một trang web chuyên về giày bóng đá không chỉ đáp ứng nhu cầu mua sắm của người tiêu dùng mà còn tạo ra một không gian trực tuyến độc đáo, nơi mà đam mê và sự đặc sắc của sản phẩm được thể hiện rõ nét Đồ án này không chỉ là việc triển khai một trang web bán hàng, mà còn là cơ hội để bạn hiểu sâu hơn về cách quản lý sản phẩm, tương tác với khách hàng, và xây dựng một trải nghiệm mua sắm trực tuyến độc đáo.
Mục tiêu của đề tài
Giúp các chủ cửa hàng quản lý tốt hơn về các hoạt động kinh doanh, đông thời tạo thêm chiến lược marketing mới cho cửa hàng.
Tạo ra một giao diện người dùng đẹp, dễ sử dụng và tương tác, tối ưu hóa trải nghiệm người dùng trong quá trình mua sắm.
Phát triển hệ thống quản lý sản phẩm để hiển thị và cập nhật thông tin chi tiết về giày bóng đá, bao gồm hình ảnh, giá cả, mô tả,
Tích hợp các phương thức thanh toán an toàn và tiện lợi, tạo điều kiện thuận lợi cho việc hoàn tất giao dịch.
Tích hợp hệ thống đánh giá và nhận xét sản phẩm, tạo sự minh bạch và đáng tin cậy trong quá trình mua sắm.
Cung cấp chức năng tìm kiếm nhanh chóng và hiệu quả, kèm theo các tùy chọn lọc để người dùng dễ dàng tìm thấy sản phẩm mong muốn.
Thiết lập các biện pháp bảo mật để đảm bảo an toàn thông tin cá nhân của khách hàng trong quá trình giao dịch.
Nghiên cứu và đề xuất các hướng phát triển tiềm năng để nâng cao chất lượng và chức năng của trang web trong tương lai.
Đối tượng và phạm vi nghiên cứu
Người tiêu dùng: Những người đam mê bóng đá và quan tâm đến việc mua sắm giày bóng đá trực tuyến Bao gồm cả người chơi bóng đá chuyên ngiệp, những người hâm mộ bóng đá và những người tìm kiếm sản phẩm chất lượng.
Quản trị cửa hàng: những cửa hàng quan tâm đến phương thức bán hàng trực tuyến.
Các website bán hàng trên thị trường hiện nay.
Phạm vi sử dụng: Phạm vi chủ yếu là các doanh nghiệp vừa và nhỏ
Phạm vi sản phẩm: Đối tượng nghiên cứu sẽ tập trung vào giày bóng đá, bao gồm các loại giày cho cả người chơi chuyên nghiệp và người chơi nghiệp dư.
Phạm vi chức năng: Trang web sẽ tập trung vào các chức năng như tìm kiếm, lọc sản phẩm, thanh toán, đánh giá sản phẩm, và tương tác người dùng.
Phạm vi thời gian: Nghiên cứu sẽ tập trung vào quá trình phát triển và triển khai trang web, cũng như đánh giá hiệu suất và thuật toán sau khi trang web đã đi vào hoạt động.
Phạm vi nghiên cứu mở rộng: Nghiên cứu cũng có thể đề xuất hướng phát triển tương lai và cải tiến cho trang web, bao gồm các tính năng mở rộng và cập nhật công nghệ.
Công cụ sử dụng
Trong quá trình thực hiện đề tài, đã sử dụng một số công cụ để phục vụ cho việc triển khai đề tài, bao gồm:
- Công cụ xây dựng ứng dụng: Visual Studio Code.
CƠ SỞ LÝ THUYẾT
MongoDB (Database)
Khái niệm cơ bản: o MongoDB là hệ quản trị cơ sở dữ liệu NoSQL, lưu trữ dữ liệu dưới dạng JSON-like BSON
Schema-less : o MongoDB không yêu cầu sử dụng schema cố định, giúp linh hoạt trong việc thay đổi cấu trúc dữ liệu mà không cần phải cập nhật toàn bộ cơ sở dữ liệu.
Exspress.js (Bạckend Framework)
Middleware: o Express.js sử dụng middleware để xử lý yêu cầu HTTP, giúp quản lý và xử lý các yêu cầu trước khi đến tay các route xử lý chính.
Routing: o Express.js hỗ trợ việc xác định và xử lý các route dựa trên các HTTP methods như GET, POST, PUT, DELETE.
React.js (Frontend Library)
Components: o React chia giao diện thành các component tái sử dụng, giúp quản lý và duy trì mã nguồn một cách hiệu quả.
Virtual DOM o Virtual DOM của React giúp tối ưu hóa hiệu suất của ứng dụng bằng cách cập nhật chỉ những phần tử cần thiết thay vì cả trang.
Node.js (Runtime Environment)
Asynchronous I/O: o Node.js sử dụng mô hình không đồng bộ (asynchronous) để xử lý nhiều yêu cầu cùng một lúc, giúp tối ưu hóa hiệu suất
Event-Driven Programming: o Sự kiện và callback được sử dụng để xử lý các tác vụ, giúp ứng dụng chạy mượt mà và hiệu quả.
RESTful API
Kiến trúc API: o Sử dụng kiến trúc RESTful để thiết kế các endpoint API, giúp tương tác linh hoạt và hiệu quả với frontend.
HTTP Methods: o Sử dụng các phương thức HTTP như GET, POST, PUT, DELETE để thực hiện các thao tác CRUD trên dữ liệu.
State Management
Redux (Optional): o Redux có thể được sử dụng để quản lý trạng thái ứng dụng, đặc biệt là khi ứng dụng có nhiều thành phần chia sẻ dữ liệu.
Authentication và Authorization
JSON Web Token (JWT): o Sử dụng JWT để xác thực người dùng và đảm bảo an toàn cho dữ liệu gửi qua mạng.
Middleware và Permissions: o Sử dụng middleware và quản lý quyền để kiểm soát quyền truy cập vào các tài nguyên.
WebSocket (Optional)
Real-Time Communication: o Sử dụng WebSocket để cung cấp giao tiếp thời gian thực giữa client và server, đặc biệt hữu ích trong các trường hợp cần cập nhật dữ liệu ngay khi có thay đổi.
XÁC ĐỊNH VÀ PHÂN TÍCH YÊU CẦU
Các quy trình, nghiệp vụ
Khách hàng: o Đăng ký tài khoản. o Cập nhật thông tin tài khoản sau khi đăng ký. o Tìm kiếm sản phẩm theo tên, danh mục, thể loại, từ khoá, giá của sản phẩm. o Tìm kiếm sản phẩm theo bộ lọc danh mục, thể loại sản phẩm. o Xem chi tiết sản phẩm. o Chọn số lượng, kích thước sản phẩm. o Đặt hàng, mua hàng (thanh toán sau khi nhận sản phẩm, thanh toán Online qua Stripe. o Xem lịch sử mua hàng. o Xem và cập nhật giỏ hàng. o Bình luận, đánh giá sản phẩm theo số sao, chỉ khách hàng đã mua sản phẩm đó thì mới có thể bình luận.
Đối tượng admin: o Quản lý khách hàng: quản lý khách hàng của toàn hệ thống (thêm, sửa, xóa, cập nhật). o Quản lý giao diện trang web: cập nhật slide cho giao diện trang chủ, thêm, sửa, xóa, cập nhật sản phẩm, danh mục, thể loại sản phẩm (thêm, sửa, xóa, cập nhật). o Quản lý sản phẩm: quản lý tất cả các sản phẩm (thêm, sửa, xóa, cập nhật các sản phẩm hết hàng). o Quản lý danh mục sản phẩm: quản lý các thông tin về danh mục sản phẩm(thêm, sửa, xóa, cập nhật). o Quản lý đơn hàng: xem đơn đặt hàng, xác nhận đơn hàng, các trạng o Thống kê các thông tin của khách hàng, sản phẩm, danh mục, đơn hàng,
Yêu cầu phần mềm
Đăng ký và đăng nhập o Người dùng đăng ký tài khoản bằng Email và mật khẩu o Người dùng thực hiện đăng nhập bằng Email và mật khẩu đã đăng ký để thực hiện các chức năng theo phân quyền của tài khoản
Quản lý người dùng: o Khách hàng và Quản trị viên có thể cập nhật các thông tin cá nhân như Tên, Avatar, địa chỉ, o Quản trị viên có thể thêm/sửa/xóa người dùng
Quản lý sản phẩm: o Khách hàng cố thể thực hiện xem chi tiết sản phẩm, thêm sản phẩm vào giỏ hàng, đánh giá sản phẩm, o Quản trị viên có thể thêm/sửa/xóa sản phẩm.
Quản lý danh mục: o Quản trị viên có thể thêm/sửa/xóa danh mục sản phẩm.
Quản lý giỏ hàng: o Khách hàng có thể thực hiện thêm sản phẩm vào giỏ hàng, cập nhật số lượng và kích thước sản phẩm trong giỏ hàng,
Quản lý đơn hàng: o Khách hàng có thể tạo đơn hàng, theo dõi đơn hàng, hủy đơn hàng, xem lịch sử đơn hàng, xóa đơn hàng đã đặt. o Quản trị viên có thể tra cứu tất cả đơn hàng đã đặt, cập nhật trạng thái đơn hàng
Quản lý thanh toán: o Khách hàng có thể thực hiện thanh toán bằng thẻ hoặc quét mã QR
Hỗ trợ khách hàng: o Khách hàng có thể liên hệ với quản trị viên thông qua Email
Thống kê và báo cáo: o Quản trị viên có thể thực hiện thống kê thông tin về người dùng, danh mục, sản phẩm, đơn hàng để định hướng kinh doanh
3.2.2 Yêu cầu phi chức năng.
Yêu cầu về giao diện (GUI): cung cấp giao diện đơn giản, dễ sử dụng, tối ưu hóa trải nghiệm người dùng.
Yêu cầu về chất lượng: o Tính tiến hoá: dễ dàng chỉnh sửa và nâng cấp. o Tính tiện dụng: giao diện hệ thống trực quan, dễ sử dụng, tính tương tác cao. o Tính hiệu quả: hệ thống thể hiện đầy đủ thông tin, thời gian phản hồi, thông lượng nhanh chóng o Tính tương thích: hệ thống hoạt động tốt trên các nền tảng Tương thích với các loại điều hành o Tính an toàn, bảo mật: trang web đảm bảo bảo mật thông tin cá nhân,thanh toán của người dùng với hệ thống phân chia quyền rõ ràng.
PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG
Sơ đồ Use-case
Hình 2: Use-case khách hàng
Phân tích hệ thống
Phân tích và thiết kế Cơ sở dữ liệu
Dựa trên việc xác định yêu cầu và phân tích yêu cầu, ứng dụng web bao gồm các bảng sau đây:
Bảng 1: Bảng mô tả Users
Tên trường Kiểu dữ liệu Khóa chính Mô tả
_id String X Mã người dùng name String Tên người dùng email String Email phone String Số điện thoại address Object Địa chỉ
Avatar Object Ảnh đại diện
Role Number Phân quyền người dùng
Datetime Thời gian tạo và cập nhật
Bảng 2: Bảng mô tả Products
Tên trường Kiểu dữ liệu Khóa chính Mô tả
_id String X Mã sản phẩm
Name String Tên sản phẩm
Images Array Danh sách ảnh
InStock Number Số lượng tồn kho
Sold Number Số lượng đã bán
NumReview Number Số lượng đánh giá dùng TimeStamps
Datetime Thời gian tạo và cập nhật
Bảng 3: Bảng mô tả Categories
Tên trường Kiểu dữ liệu
_id String X Mã danh mục
Name String Tên danh mục
Datetime Thời gian tạo và cập nhật
Bảng 4: Bảng mô tả Reviews
Tên trường Kiểu dữ liệu Khóa chính Mô tả
_id String X Mã đánh giá
User Object Ngừơi đánh giá
Rating Number Số sao đánh giá
Comment String Nội dung đánh giá
Datetime Thời gian tạo và cập nhật
Bảng 5: Bảng mô tả Carts
Tên trường Kiểu dữ liệu Khóa chính Mô tả
_id String X Mã giỏ hàng
Items Array Danh sách sản phẩm
Datetime Thời gian tạo và cập nhật
Bảng 6: Bảng mô tả Orders
Tên trường Kiểu dữ liệu Khóa chính Mô tả
_id String X Mã đơn hàng
Cart Array Sản phẩm từ giỏ hàng
ShippingAddress Object Địa chỉ giao hàng
CartPrice Number Giá trị giỏ hàng
ShippingCost Number Tiền vận đơn
TotalPrice Number Tổng tiền đơn hàng
PaymentMethod String Phương thức thanh toán
Datetime Thời gian tạo và cập nhật
CÀI ĐẶT VÀ TRIỂN KHAI HỆ THỐNG
Môi trường cài đặt
- Node.js, MongoDB, Express.js, Cloudinary
5.1.2 Môi trường phát triển và triển khai hệ thống
- Ngôn ngữ lập trình: o Bạckend: JavaScript (Node.js). o Frontend: JavaScript (React). o Query language: MongoDB query language
- Framework và thư viện: o Bạckend: Express (Node.js framework). o Frontend: React (Material UI). o State Management: Redux (Optional) o HTTP Client: Axios
- Cơ sở dữ liệu: o MongDB (NoSQL Database). o Mongoose (Object Data Modeling library for MongoDB and Node.js).
- Quản lý phiên bản: Github
- Trình quản lý gói và phụ thuộc: Npm (Node Package Manager)
- Công cụ vẽ sơ đồ phân tích thiết kế: Draw.io.
- Công cụ phát triển: Vs Code + Postman.
Màn hình giao diện
Hình 1: Màn hình trang chủ
Hình 2: Màn hình trang đăng nhập
Hình 3: Màn hình trang đăng ký
Hình 4: Màn hình trang tài khoản
5.2.3.1 Trang sản chi tiết sản phẩm
Hình 5: Màn hình trang chi tiết sản phẩm
Hình 6: Màn hình trang tài khoản
Hình 7: Màn hình trang liên hệ
Hình 8: Màn hình trang giỏ hàng
Hình 9: Màn hình trang tạo đơn hàng
5.2.7.1 Thanh toán khi nhận hàng
Hình 10: Màn hình thanh toán khi nhận hàng
Hình 11: Màn hình thanh toán bằng thẻ
5.2.7.3 Thanh toán bằng quét mã QR
Hình 12: Màn hình thanh toán bằng quét mã QR
Hình 13: Màn hình trang tài khoản
5.2.8.1 Trang cập nhật hồ sơ
Hình 14: Màn hình cập nhật hồ sơ
5.2.9 Trang bảng điều khiển của khách hàng
Hình 15: Màn hình bản điều khiển của khách hàng
5.2.10 Trang bảng điều khiển của Admin
Hình 16: Màn hình quản trị người dùng
Hình 17: Màn hình quản trị đơn hàng
Hình 18: Màn hình quản trị sản phẩm
Hình 19: Màn hình thêm mới sản phẩm
Hình 20: Màn hình quản trị doanh mục
Hình 21: Màn hình thêm mới danh mục
Hình 22: Màn hình thống kê
TỔNG KẾT
Kết quả đạt được
Hoàn thành triển khai một trang web thương mại điện tử chuyên về giày bóng đá với giao diện thân thiện và các chức năng quản lý sản phẩm, đánh giá, và đơn hàng.
Sử dụng MERN stack để xây dựng backend ổn định, có thể mở rộng dễ dàng và xử lý các yêu cầu của người dùng một cách linh hoạt.
Tích hợp cổng thanh toán an toàn và tiện lợi, đồng thời quản lý đơn hàng một cách chính xác và linh hoạt.
Phát triển giao diện người dùng thân thiện, dễ sử dụng và tương tác, tạo ra trải nghiệm mua sắm trực tuyến tích cực cho người dùng.
Hiện thực quản lý người dùng và xác thực an toàn bằng JWT, bảo vệ thông tin cá nhân của người dùng.
Hạn chế
Cần thêm công việc tối ưu hóa hiệu suất để đảm bảo ứng dụng chạy mượt mà và nhanh chóng, đặc biệt là khi có nhiều người dùng truy cập cùng một lúc
Hệ thống thử nghiệm chưa được triển khai đầy đủ, dẫn đến khả năng phát hiện lỗi và sửa lỗi còn hạn chế.
Cần thực hiện đánh giá bảo mật chi tiết và triển khai các biện pháp bảo mật mạnh mẽ để bảo vệ thông tin cá nhân và giao dịch của người dùng
Có thể vẫn còn một vài sai sót khác mà chưa phát hiện được
Hướng phát triển
Khắc phục những lỗi còn tồn đọng trong quãng thời gian xây dựng dự án
Tiếp tục tối ưu hóa hiệu suất và mở rộng hệ thống để đối mặt với tình trạng tăng cường của lượng người dùng và dữ liệu.
Xây dựng ứng dụng di động để mở rộng sự tiện lợi và tiếp cận cho người dùng sử dụng điện thoại di động.
Kết nối với các hệ thống thanh toán và vận chuyển thứ ba để cung cấp nhiều
