Đồ án 1: Báo cáo phát triển website thương mại điện tử sản phẩm Apple

Tham khảo báo cáo đồ án 1 phát triển website thương mại điện tử bán sản phẩm Apple. Tài liệu đầy đủ, chi tiết cho sinh viên ngành CNTT.

• Tác giả: Hoàng Gia Phong
• Người hướng dẫn: Đặng Việt Dũng
• Trường học: Đại Học Quốc Gia Thành Phố Hồ Chí Minh, Trường Đại Học Công Nghệ Thông Tin, Khoa Công Nghệ Phần Mềm
• Đề tài: Phát Triển Trang Web Thương Mại Điện Tử Chuyên Về Sản Phẩm Công Nghệ Apple
• Loại tài liệu: Đồ án
• Năm xuất bản: 2025
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đề Tài Đồ Án Xây Dựng Web Bán Hàng Sản Phẩm Apple

Đồ án xây dựng web bán hàng sản phẩm Apple là một dự án phát triển ứng dụng thương mại điện tử quy mô lớn thực hiện tại Trường Đại học Công Nghệ Thông Tin, Đại học Quốc gia TP. HCM. Dự án này nhằm xây dựng một platform e-commerce chuyên biệt cung cấp các sản phẩm công nghệ Apple như iPhone, iPad, MacBook và các phụ kiện chính hãng. Mục đích chính của đồ án là ứng dụng các kiến thức về lập trình web, quản lý cơ sở dữ liệu, và thiết kế giao diện vào một dự án thực tế. Hệ thống được xây dựng với kiến trúc ba tầng (3-tier architecture), bao gồm tầng Front-end, Back-end, và Database. Dự án này đòi hỏi sự phối hợp tốt giữa các thành viên nhóm để hoàn thành các yêu cầu chức năng và phi chức năng của hệ thống.

1.1. Lý Do Chọn Đề Tài Xây Dựng Web Bán Hàng Apple

Việc chọn đề tài web bán hàng sản phẩm Apple dựa trên nhu cầu thực tế của thị trường. Sản phẩm Apple luôn có nhu cầu cao với lượng khách hàng đông đảo ở Việt Nam. Xây dựng một nền tảng thương mại điện tử cho sản phẩm Apple giúp sinh viên hiểu rõ hơn về quy trình phát triển phần mềm thực tế. Đồng thời, đề tài này cho phép áp dụng các công nghệ hiện đại như JavaScript, React, Node.js, và các công nghệ web khác.

1.2. Mục Đích và Yêu Cầu Hệ Thống Chính

Mục đích chính của dự án là xây dựng một hệ thống quản lý bán hàng trực tuyến đầy đủ chức năng. Yêu cầu hệ thống bao gồm: quản lý sản phẩm, quản lý đơn hàng, xử lý thanh toán, hệ thống người dùng, quản lý voucher và khuyến mãi. Hệ thống phải đảm bảo tính bảo mật, hiệu suất cao, giao diện thân thiện và hỗ trợ đầy đủ chức năng cho cả khách hàng và nhân viên quản trị.

II. Thiết Kế Kiến Trúc Hệ Thống Web Thương Mại Điện Tử

Kiến trúc hệ thống web bán hàng sản phẩm Apple được thiết kế theo mô hình kiến trúc ba tầng (3-tier architecture) để đảm bảo tính modular, dễ bảo trì và mở rộng. Tầng Front-end được phát triển bằng các công nghệ HTML, CSS, JavaScript và framework hiện đại để tạo giao diện người dùng hấp dẫn. Tầng Back-end xử lý logic nghiệp vụ, xác thực, và quản lý dữ liệu. Tầng Database lưu trữ toàn bộ thông tin sản phẩm, khách hàng, đơn hàng và các dữ liệu liên quan khác. Mô hình này cho phép các thành phần hoạt động độc lập nhưng liên kết chặt chẽ, giúp tối ưu hóa hiệu suất và dễ dàng nâng cấp từng thành phần riêng lẻ.

2.1. Tầng Front end và Công Nghệ Sử Dụng

Tầng Front-end của ứng dụng web bán hàng được xây dựng sử dụng JavaScript, HTML5, CSS3 kết hợp với framework React hoặc Vue.js. Lớp này chịu trách nhiệm hiển thị giao diện người dùng, xử lý tương tác người dùng, và gửi yêu cầu đến Back-end. Giao diện được thiết kế responsive để hoạt động tốt trên cả desktop, tablet, và mobile. Công nghệ Webpack được sử dụng để bundle và optimize các tài nguyên phía client.

2.2. Tầng Back end và Quản Lý Dữ Liệu

Tầng Back-end sử dụng Node.js với Express.js hoặc Python với Flask/Django để xử lý các API request từ Front-end. Tầng này quản lý logic xác thực người dùng, xử lý đơn hàng, tính toán giá trị thanh toán, và quản lý kho hàng. Cơ sở dữ liệu sử dụng MySQL hoặc PostgreSQL để lưu trữ dữ liệu có cấu trúc. Hệ thống được thiết kế với mức độ bảo mật cao, bao gồm mã hóa mật khẩu, xác thực token, và kiểm soát quyền truy cập.

III. Phân Tích Các Use Case và Chức Năng Chính của Ứng Dụng

Hệ thống web bán hàng sản phẩm Apple bao gồm ba nhóm actor chính: Khách hàng (User), Nhân viên bán hàng (Staff), và Quản trị viên (Admin). Mỗi nhóm có những use case và quyền hạn riêng biệt. Nhóm use case cho User bao gồm: xem danh sách sản phẩm, tìm kiếm, lọc và sắp xếp, xem chi tiết sản phẩm, thêm vào giỏ hàng, thanh toán, đánh giá sản phẩm, theo dõi đơn hàng. Nhóm use case cho Admin/Staff bao gồm: quản lý sản phẩm, quản lý đơn hàng, quản lý voucher, quản lý người dùng, quản lý vai trò, thống kê báo cáo. Mỗi use case được mô tả chi tiết bằng các sơ đồ UML, bao gồm sequence diagram và state diagram.

3.1. Các Use Case Chính Cho Khách Hàng

Khách hàng có thể thực hiện các use case như: tìm kiếm sản phẩm Apple, xem chi tiết sản phẩm, thêm sản phẩm vào giỏ hàng, thanh toán đơn hàng. Ngoài ra, người dùng có thể đăng ký tài khoản, đăng nhập, cập nhật thông tin cá nhân, quản lý địa chỉ nhận hàng. Các tính năng nâng cao bao gồm: sử dụng voucher, tích điểm thưởng, đánh giá sản phẩm, bình luận, theo dõi trạng thái đơn hàng, và xem lịch sử mua hàng.

3.2. Các Use Case Quản Trị Cho Admin và Staff

Admin và Staff có quyền quản lý toàn bộ hệ thống sản phẩm: thêm sản phẩm mới, chỉnh sửa thông tin sản phẩm, xóa sản phẩm. Họ cũng quản lý đơn hàng: cập nhật trạng thái đơn hàng, xem chi tiết đơn hàng, trả lời phản hồi khách hàng. Thêm vào đó là quản lý voucher, tạo chương trình khuyến mãi, quản lý người dùng, và xem báo cáo thống kê doanh số, lợi nhuận.

IV. Thiết Kế Giao Diện và Trải Nghiệm Người Dùng

Thiết kế giao diện web bán hàng sản phẩm Apple được thực hiện với nguyên tắc User-Centered Design để đảm bảo trải nghiệm người dùng tốt nhất. Giao diện được chia thành nhiều màn hình chính: màn hình đăng nhập/đăng ký, trang chủ, danh sách sản phẩm, chi tiết sản phẩm, giỏ hàng, thanh toán, quản lý đơn hàng. Mỗi màn hình được thiết kế thân thiện, dễ sử dụng và hỗ trợ trên các thiết bị khác nhau. Giao diện Admin và Staff cung cấp các dashboard quản lý tập trung, cho phép quản lý sản phẩm, đơn hàng, người dùng, và thống kê một cách hiệu quả và trực quan. Hệ thống sử dụng design system thống nhất với màu sắc, typography, và component nhất quán trên toàn bộ ứng dụng.

4.1. Sơ Đồ Màn Hình và Luồng Điều Hướng

Sơ đồ màn hình (wireframe) được xây dựng để visualize các màn hình chính và luồng điều hướng giữa chúng. Người dùng có thể dễ dàng navigate từ trang chủ đến danh sách sản phẩm, chi tiết sản phẩm, giỏ hàng, và thanh toán. Sơ đồ điều hướng cũng cho thấy các điểm truy cập khác nhau cho Admin, Staff, và User thông thường. Thiết kế sơ đồ màn hình giúp sinh viên hình dung rõ ràng cấu trúc giao diện ứng dụng trước khi bắt đầu lập trình chi tiết.

4.2. Chi Tiết Các Màn Hình Và Thành Phần Giao Diện

Màn hình đăng nhập cho phép người dùng nhập email/username và mật khẩu. Trang chủ hiển thị banner quảng cáo, danh mục sản phẩm, và sản phẩm nổi bật. Danh sách sản phẩm có lọc theo danh mục, khoảng giá, đánh giá và sắp xếp theo giá, độ phổ biến. Chi tiết sản phẩm hiển thị hình ảnh, mô tả chi tiết, giá, đánh giá, bình luận khách hàng. Giỏ hàng cho phép sửa số lượng, xóa sản phẩm, xem tổng tiền và tiến hành thanh toán.

Trích đoạn nội dung tài liệu

ĐẠI HỌC QUỐC GIA TP. HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM ___________________________________________ ĐỒ ÁN 1 PHÁT TRIỂN TRANG WEB THƯƠNG MẠI ĐIỆN TỬ CHUYÊN VỀ SẢN PHẨM CÔNG NGHỆ APPLE Giáo viên hướng dẫn: Đặng Việt Dũng Nhóm sinh viên thực hiện: 1. Hoàng Gia Phong 22521084 2. Lê Đức Thịnh 22521410 Tp.

Hồ Chí Minh, 1/2025 LỜI CẢM ƠN Lời đầu tiên, nhóm chúng em xin gửi lời cảm ơn chân thành đến thầy Đặng Việt Dũng đã hướng dẫn, hỗ trợ và góp ý cho nhóm chúng em trong quá trình một học kì thực hiện đồ án 1 đề tài – Phát triển trang web thương mại điện tử chuyên về sản phẩm công nghệ Apple. Trong thời gian qua, nhóm em đã học hỏi thêm được nhiều kiến thức, kinh nghiệm cũng như hiểu biết thêm về nhiều công nghệ mới. Những nhận xét, góp ý chân tình của thầy chính là cơ sở để nhóm có thể chỉnh sửa và hoàn thiện đề tài này một cách tốt nhất. Tuy nhiên, đây là lần đầu tiên nhóm chúng em làm một ứng dụng web quản lý với quy mô lớn như vậy.

Nên bài báo cáo cũng như ứng dụng này chúng em không thể tránh khỏi nhiều sai sót. Vì thế, nhóm chúng em luôn mong sự nhiệt tình góp ý từ thầy để chúng em có thể hoàn thiện hơn, cả về bài báo cáo này, cũng như kiến thức mà chúng em sẽ dùng ở các môn sau. Một lần nữa, em xin cảm ơn thầy Dũng đã tận tình giúp đỡ nhóm em, em xin cảm ơn thầy. Em xin kính chúc thầy Đặng Việt Dũng thật nhiều sức khỏe, thành công và hạnh phúc! Chúng em xin chân thành cảm ơn! 1 MỤC LỤC LỜI CẢM ƠN.

1 DANH MỤC HÌNH. 9 DANH MỤC BẢNG. TỔNG QUAN ĐỀ TÀI.1 Giới thiệu đề tài.2 Lý do chọn đề tài.3 Yêu cầu hệ thống – Mục đích của dự án.1 Ngôn ngữ lập trình Javascript.3 Nhược điểm.3 Nhược điểm.3 Nhược điểm.3 Nhược điểm. Các Use-case của dự án.1 Sơ đồ Use-case tổng quát.2 Sơ đồ Use-case chi tiết cho Admin và Staff.3 Sơ đồ chi tiết cho User.2 Chi tiết các Actor.3 Chi tiết các Use-case.1 Chi tiết Use-case: Xem danh sách sản phẩm.2 Chi tiết Use-case: Tìm kiếm sản phẩm.3 Chi tiết Use-case: Xem các chương trình khuyến mãi.4 Chi tiết Use-case: Lọc và sắp xếp sản phẩm.5 Chi tiết Use-case: Xem chi tiết sản phẩm.6 Chi tiết Use-case: Thêm sản phẩm vào giỏ hàng.7 Chi tiết Use-case: Xem giỏ hàng.8 Chi tiết Use-case: Đăng nhập.9 Chi tiết Use-case: Đăng ký.10 Chi tiết Use-case: Thay đổi thông tin cá nhân:.11 Chi tiết Use-case: Đổi mật khẩu.12 Chi tiết Use-case: Đánh giá sản phẩm.13 Chi tiết Use-case: Theo dõi đơn hàng.14 Chi tiết Use-case: Xem lịch sử đơn hàng.15 Chi tiết Use-case: Hủy đơn hàng.16 Chi tiết Use-case: Đặt hàng.17 Chi tiết Use-case: Thanh toán.18 Chi tiết Use-case: Tích điểm.19 Chi tiết Use-case: Sử dụng điểm.20 Chi tiết Use-case: Sử dụng voucher.21 Chi tiết Use-case: Thêm địa chỉ và thông tin nhận hàng.22 Chi tiết Use-case: Thay đổi địa chỉ và thông tin nhận hàng.23 Chi tiết Use-case: Quản lý sản phẩm.24 Chi tiết Use-case: Thêm sản phẩm.25 Chi tiết Use-case: Chỉnh sửa sản phẩm.26 Chi tiết Use-case: Xóa sản phẩm.27 Chi tiết Use-case: Quản lý voucher.28 Chi tiết Use-case: Thêm voucher.29 Chi tiết Use-case: Chỉnh sửa voucher.30 Chi tiết Use-case: Quản lý sự kiện ưu đãi.31 Chi tiết Use-case: Thêm sự kiện ưu đãi.32 Chi tiết Use-case: Chỉnh sửa sự kiện ưu đãi.33 Chi tiết Use-case: Quản lý flash sale.34 Chi tiết Use-case: Thêm flash sale.35 Chi tiết Use-case: Chỉnh sửa flash sale.36 Chi tiết Use-case: Quản lý đơn hàng.37 Chi tiết Use-case: Cập nhật trạng thái đơn hàng.38 Chi tiết Use-case: Xem chi tiết đơn hàng.39 Chi tiết Use-case: Trả lời phản hồi khách hàng.40 Chi tiết Use-case: Quản lý người dùng.41 Chi tiết Use-case: Khóa người dùng.42 Chi tiết Use-case: Đổi vai trò người dùng.43 Chi tiết Use-case: Thống kê báo cáo.44 Chi tiết Use-case: Quản lý phân quyền.45 Chi tiết Use-case: Tạo mới vai trò.46 Chi tiết Use-case: Chỉnh sửa vai trò.47 Chi tiết Use-case: Xóa vai trò.

Thiết kế dữ liệu.1 Mô hình dữ liệu logic.3 Lược đồ cơ sở dữ liệu.4 Giải thích các lớp.1 Sơ đồ trạng thái – Đăng nhập.2 Sơ đồ trạng thái - Đổi mật khẩu.3 Sơ đồ trạng thái - Đánh giá.4 Sơ đồ trạng thái - Bình luận.5 Sơ đồ trạng thái - Xóa sản phẩm.6 Sơ đồ trạng thái – Chỉnh sửa sản phẩm.7 Sơ đồ trạng thái – Cập nhật trạng thái sự kiện.8 Sơ đồ trạng thái – Cập nhật vai trò người dung. Sơ đồ trình tự (Sequence Diagram).1 Sơ đồ trình tự - Đăng ký.2 Sơ đồ trình tự - Thanh toán.3 Sơ đồ trình tự - Sử dụng voucher.4 Sơ đồ trình tự - Thêm sản phẩm.5 Sơ đồ trình tự - Thêm sự kiện ưu đãi.6 Sơ đồ trình tự - Thêm voucher.7 Sơ đồ trình tự - Thêm vai trò. Kiến trúc Website.1 Tổng quan kiến trúc.2 Chi tiết kiến trúc.1 Lớp Front-end.2 Lớp Back-end. Thiết kế Giao diện.1 Sơ đồ màn hình tổng quát.2 Sơ đồ màn hình với vai trò User.3 Sơ đồ màn hình với vai trò Admin hoặc Staff.2 Chi tiết các màn hình.1 Màn hình đăng nhập.2 Màn hình trang chủ.3 Màn hình danh sách sản phẩm.4 Màn hình chi tiết sản phẩm.5 Màn hình giỏ hàng.6 Màn hình thông tin cá nhân.7 Màn hình địa chỉ nhận hàng.8 Màn hình đơn hàng.9 Màn hình chi tiết đơn hàng.10 Màn hình đổi mật khẩu.11 Màn hình thông tin cá nhân – Admin.12 Màn hình thống kế báo cáo.13 Màn hình kho hàng.14 Màn hình thêm sản phẩm.15 Màn hình chỉnh sửa sản phẩm.16 Màn hình sản phẩm nổi bật.17 Màn hình danh mục.18 Màn hình thêm danh mục.19 Màn hình chỉnh sửa danh mục.20 Màn hình đơn hàng – Admin.21 Màn hình chi tiết đơn hàng – Admin.22 Màn hình đánh giá.23 Màn hình người dùng.24 Màn hình voucher.25 Màn hình thêm voucher.26 Màn hình chỉnh sửa voucher.27 Màn hình Flash Sale.28 Màn hình thêm Flash Sale.29 Màn hình chỉnh sửa Flash Sale.30 Màn hình chi tiết Flash Sale.31 Màn hình sự kiện ưu đãi.32 Màn hình thêm sự kiện ưu đãi.33 Màn hình chỉnh sửa sự kiện ưu đãi.34 Màn hình chi tiết sự kiện ưu đãi.35 Màn hình phân quyền.127 8 TÀI LIỆU THAM KHẢO.129 DANH MỤC HÌNH Hình 1: Biểu tượng JavaScript.15 Hình 2: Biểu tượng React.15 Hình 3: Biểu tượng TailwindCSS.16 Hình 4: Biểu tượng NodeJS.17 Hình 5: Biểu tượng MongoDB.19 Hình 6: Sơ đồ Use-case tổng quát.21 Hình 7: Chi tiết sơ đồ Use-case Admin và Staff.22 Hình 8: Chi tiết sơ đồ Use-case User.23 Hình 9: Sơ đồ dữ liệu logic.

70 Hình 10: Conceptual model. 70 Hình 11: Lược đồ cơ sở dữ liệu. 71 Hình 12: Các công nghệ sử dụng ở Front-end.99 Hình 13: Các công nghệ sử dụng ở Back-end.99 Hình 14: Công nghệ sử dụng cho cơ sở dữ liệu.100 Hình 15: Cấu trúc Component-Based.100 Hình 16: Màn hình đăng nhập.104 Hình 17: Màn hình trang chủ - chưa đăng nhập.105 Hình 18: Màn hình trang chủ - đã đăng nhập.106 Hình 19: Màn hình danh sách sản phẩm.107 9 Hình 20: Màn hình chi tiết sản phẩm.108 Hình 21: Màn hình giỏ hàng.109 Hình 22: Màn hình giỏ hàng – sau khi xác nhận đơn.110 Hình 23: Màn hình thông tin cá nhân.111 Hình 24: Màn hình địa chỉ nhận hàng.111 Hình 25: Màn hình đơn hàng.112 Hình 26: Màn hình chi tiết đơn hàng.113 Hình 27: Màn hình đổi mật khẩu.113 Hình 28: Màn hình thông tin cá nhân – Admin.114 Hình 29: Màn hình thống kê báo cáo.114 Hình 30: Màn hình kho hàng. 115 Hình 31: Màn hình thêm sản phẩm – thông tin sản phẩm.115 Hình 32: Màn hình thêm sản phẩm – thông tin SKU và thuộc tính.116 Hình 33: Màn hình chỉnh sửa sản phẩm – thông tin sản phẩm.116 Hình 34: Màn hình chỉnh sửa sản phẩm – thông tin SKU và thuộc tính.117 Hình 35: Màn hình sản phẩm nổi bật.117 Hình 36: Màn hình danh mục.118 Hình 37: Màn hình thêm danh mục.118 Hình 38: Màn hình chỉnh sửa danh mục.119 Hình 39: Màn hình đơn hàng.119 Hình 40: Màn hình chi tiết đơn hàng – Admin.120 Hình 41: Màn hình đánh giá.120 Hình 42: Màn hình người dùng.121 10 Hình 43: Màn hình voucher.121 Hình 44: Màn hình thêm voucher.122 Hình 45: Màn hình chỉnh sửa voucher.122 Hình 46: Màn hình Flash Sale.123 Hình 47: Màn hình thêm Flash Sale.123 Hình 48: Màn hình chỉnh sửa Flash Sale.124 Hình 49: Màn hình chi tiết Flash Sale.124 Hình 50: Màn hình sự kiện ưu đãi.125 Hình 51: Màn hình thêm sự kiện ưu đãi.125 Hình 52: Màn hình chỉnh sửa sự kiện ưu đãi.126 Hình 53: Màn hình chi tiết sự kiện ưu đãi.126 Hình 54: Màn hình phân quyền.

127 11 DANH MỤC BẢNG Bảng 1: Chi tiết các Actor. TỔNG QUAN ĐỀ TÀI 1.1 Giới thiệu đề tài Đề tài nhóm chúng em chọn là xây dựng, phát triển trang web thương mại điện tử chuyên về sản phẩm công nghệ Apple. Mục đích của dự án này hướng đến việc hỗ trợ khách hàng dễ dàng trong việc mua các sản phẩm công nghệ của Apple online mà vẫn thuận tiện và hiệu quả. Đối với chủ cửa hàng và nhân viên có thể quản lý hàng hóa, các sự kiện ưu đãi, các voucher và người dùng một cách tối ưu.

Website được chúng em thiết kế để có thể hoạt động tốt trên nhiều màn hình khác nhau, từ laptop xách tay đến máy tính bàn, đến các thiết bị cầm tay như điện thoại, máy tính bảng. Với thiết kế thống nhất trong toàn bộ ứng dụng, các thao tác quan trọng được đơn giản hóa hết mức có thể cũng như hỗ trợ các phím tắt cần thiết. Phần mềm phù hợp với cả những người mới sử dụng cũng như những người đã làm việc nhiều với ứng dụng.2 Lý do chọn đề tài Với sự phát triển vượt bậc của công nghệ thông tin trong thời đại công nghệ 4.0, đi kèm với sự trỗi dậy mạnh mẽ của các sàn thương mại điện tử, các website mua bán trực tuyến hậu Covid-19 tại Việt Nam cũng như trên thế giới. Các dịch vụ mua sắm online ngày trở nên phổ biến với độ tiện lợi, nhanh gọn và tiết kiệm nhiều chi phí.

Một website thương mại điện tử chuyên về sản phẩm công nghệ của Apple sẽ giúp người dùng dễ dàng lựa chọn và mua sắm các sản phẩm phù hợp mà không cần phải đến trực tiếp cửa hàng. Ngoài ra chủ cửa hàng và quản lý có thể thống kê, báo cáo doanh số, quản lý hàng hóa và các sự kiện liên quan một cách dễ dàng và tự động.3 Yêu cầu hệ thống – Mục đích của dự án  Xây dựng một website trực quan, dễ sử dụng  Trang web có giao diện hiện đại và thân thiện. 13  Đối với khách hàng, hệ thống có đầy đủ các chức năng cơ bản cần thiết cho việc mua hàng, tích điểm, sử dụng voucher giảm giá, các sự kiện ưu đãi và flashsale.