Xây dựng website chuyên bán laptop

Khóa luận tốt nghiệp: Xây dựng website chuyên bán laptop - ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Võ Nhật Phi
• Người hướng dẫn: ThS. Nguyễn Hữu Trung
• 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
• Đề tài: Xây dựng website chuyên bán laptop
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2023
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan đề tài xây dựng website chuyên bán laptop tại HCMUTE

Đề tài nghiên cứu xây dựng website chuyên bán laptop thuộc Khoa Công nghệ Thông tin tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh. Dự án do sinh viên Võ Nhật Phi và Nguyễn Quang Sang thực hiện dưới sự hướng dẫn của Thạc sĩ Nguyễn Hữu Trung. Đề tài tập trung giải quyết bài toán số hóa quy trình kinh doanh máy tính xách tay. Ngành thương mại điện tử hiện nay đòi hỏi nền tảng bán hàng phải có tốc độ cao và khả năng tương tác trực quan. Hệ thống cung cấp giải pháp toàn diện từ quản lý danh mục thiết bị, xử lý đơn đặt hàng đến phân quyền quản trị viên. Việc phân loại chi tiết các thông số kỹ thuật như vi xử lý, bộ nhớ RAM, dung lượng ổ cứng và card đồ họa đóng vai trò quyết định. Đề tài áp dụng các chuẩn kỹ thuật phần mềm tiên tiến nhằm đảm bảo tính toàn vẹn dữ liệu và độ tin cậy vận hành. Kết quả nghiên cứu chứng minh tính khả thi của mô hình web bán lẻ kỹ thuật số trong môi trường giáo dục đại học định hướng ứng dụng thực tiễn.

1.1. Bối cảnh nghiên cứu đề tài tại ĐH Sư phạm Kỹ thuật TP.HCM

Thị trường máy tính xách tay phát triển mạnh mẽ kéo theo nhu cầu mua sắm trực tuyến tăng vọt. Khách hàng đòi hỏi thông tin cấu hình minh bạch cùng giao diện đặt hàng thuận tiện. Tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, chương trình đào tạo kỹ sư công nghệ phần mềm luôn chú trọng kỹ năng thực chiến. Đề tài xây dựng website bán laptop xuất phát từ yêu cầu thực tiễn của doanh nghiệp bán lẻ. Đồ án kết hợp hài hòa giữa lý thuyết phân tích thiết kế hệ thống và công nghệ lập trình hiện đại. Nghiên cứu giải quyết sự thiếu hụt của các giải pháp bán lẻ cũ vốn chậm chạp và khó tùy biến. Hệ thống tạo tiền đề vững chắc cho việc ứng dụng công nghệ số vào thương mại bán lẻ.

1.2. Mục tiêu kỹ thuật của hệ thống thương mại điện tử lẻ laptop

Mục tiêu cốt lõi của hệ thống là cung cấp nền tảng bán hàng ổn định, bảo mật và tối ưu. Website đáp ứng năng lực xử lý lượng truy cập lớn trong các khung giờ khuyến mãi cao điểm. Dữ liệu sản phẩm hiển thị mạch lạc theo thương hiệu, tầm giá và nhu cầu sử dụng thực tế. Tốc độ tải trang đạt chuẩn tối ưu nhằm giữ chân khách hàng trực tuyến. Cơ chế bảo vệ dữ liệu người dùng tuân thủ các quy tắc bảo mật chuẩn công nghiệp. Quy trình thanh toán và đặt hàng giảm thiểu các thao tác trung gian không cần thiết. Đồ án hướng tới tiêu chuẩn chuyên nghiệp tương đương với các website bán lẻ hàng đầu trên thị trường hiện nay.

II. Phân tích bài toán xây dựng website chuyên bán laptop hiện đại

Laptop là mặt hàng công nghệ có giá trị cao và thông số kỹ thuật phức tạp. Người tiêu dùng thường so sánh kỹ lưỡng từng thông số như dòng vi xử lý, card đồ họa, loại tấm nền màn hình và cổng kết nối. Các website bán hàng thông thường thường thiếu bộ lọc chuyên biệt cho mặt hàng này. Vấn đề cập nhật giá cả, trạng thái tồn kho và chương trình khuyến mãi theo thời gian thực luôn là thách thức lớn. Hệ thống quản lý cần bảo đảm dữ liệu sản phẩm phản ánh chính xác từng thay đổi nhỏ từ phía nhà cung cấp. Ngoài ra, việc xác thực quyền hạn quản trị viên và khách hàng yêu cầu quy trình bảo mật nghiêm ngặt. Hệ thống phải ngăn chặn nguy cơ xâm nhập trái phép vào cơ sở dữ liệu bán hàng. Những bài toán nghiệp vụ này đòi hỏi mô hình phân tích ca sử dụng chi tiết và lược đồ luồng dữ liệu minh bạch.

2.1. Yêu cầu nghiệp vụ đặc thù cho nền tảng phân phối laptop

Hệ thống phân phối laptop đòi hỏi luồng xử lý đơn lẻ cực kỳ chính xác. Phân hệ bán lẻ phải quản lý số seri, thời hạn bảo hành chính hãng và thông số linh kiện đi kèm. Khách hàng cần xem xét sản phẩm đa chiều qua hình ảnh chất lượng cao và đánh giá thực tế. Chức năng giỏ hàng phải lưu trữ trạng thái mua sắm tức thời ngay cả khi gián đoạn kết nối mạng. Bộ phận hỗ trợ cần tiếp nhận đơn đặt hàng lập tức để chuẩn bị xuất kho. Toàn bộ luồng dữ liệu từ lúc duyệt mặt hàng đến khi hoàn tất đơn đều có xác nhận tự động. Yêu cầu nghiệp vụ chuẩn hóa giúp hạn chế tối đa tỷ lệ hủy đơn hàng.

2.2. Thách thức quản lý dữ liệu cấu hình và trải nghiệm người dùng

Quản lý cơ sở dữ liệu laptop gặp trở ngại lớn do tính đa dạng của các cấu hình phần cứng. Một mẫu máy tính xách tay có thể sở hữu nhiều tùy chọn dung lượng RAM và ổ cứng SSD khác nhau. Bảng dữ liệu thiết kế thiếu linh hoạt sẽ gây ra hiện tượng trùng lặp thông tin và làm chậm tốc độ truy vấn. Trải nghiệm người dùng trên thiết bị di động cũng là bài toán khó do dung lượng hiển thị giới hạn. Bảng so sánh thông số kỹ thuật dễ bị vỡ bố cục trên màn hình nhỏ nếu không xử lý giao diện tốt. Tối ưu hóa hiệu năng cơ sở dữ liệu và thiết kế giao diện thích ứng là nhiệm vụ bắt buộc.

III. Giải pháp công nghệ xây dựng website chuyên bán laptop tối ưu

Đề tài áp dụng các công nghệ lập trình tiên tiến nhằm giải quyết triệt để các bài toán phân tích. Phía giao diện người dùng khai thác sức mạnh của React cùng thư viện thành phần Ant Design và Material UI. Cách tiếp cận dựa trên cấu trúc component giúp tái sử dụng mã nguồn và rút ngắn chu kỳ phát triển. Thư viện Ant Design cung cấp các thành phần dựng sẵn chuẩn mực như bảng thông số, nút bấm, biểu mẫu và thông báo trạng thái. Kiến trúc phần mềm phân tầng rõ rệt giữa giao diện người dùng và hệ thống dịch vụ xử lý dữ liệu trung tâm. Các chức năng đăng nhập, đăng ký, đổi thông tin cá nhân và cập nhật mật khẩu tuân theo lược đồ tuần tự chặt chẽ. Hệ thống quản trị hỗ trợ việc thêm mới, chỉnh sửa thông tin cấu hình và xóa sản phẩm khỏi cơ sở dữ liệu an toàn. Giải pháp mang lại hiệu suất phản hồi tức thì, tạo cảm giác mượt mà trong từng tương tác mua bán.

3.1. Ứng dụng React và Ant Design xây dựng giao diện bán lẻ

React đóng vai trò cốt lõi trong việc hiển thị giao diện động và tương tác mượt mà. Khả năng cập nhật Virtual DOM giúp website bán laptop duy trì tốc độ khung hình cao khi chuyển đổi sản phẩm. Ant Design bổ sung hệ thống giao diện đồng nhất với phong cách tối giản và thẩm mỹ hiện đại. Các thành phần như DatePicker, Dropdown lọc theo hãng sản xuất và modal xem chi tiết hoạt động nhịp nhàng. Thư viện còn hỗ trợ mở rộng ngôn ngữ đa quốc gia linh hoạt thông qua thành phần LocaleProvider. Nhờ đó, trải nghiệm mua sắm trực tuyến trở nên chuyên nghiệp và thân thiện đối với mọi nhóm khách hàng.

3.2. Thiết kế kiến trúc phân hệ quản trị và luồng giao dịch

Phân hệ quản trị được bảo vệ bởi cơ chế xác thực phân quyền nhiều lớp. Quản trị viên thực hiện chỉnh sửa cấu hình máy, cập nhật giá và kiểm duyệt tồn kho qua bảng điều khiển riêng. Hệ thống tự động kiểm tra tính hợp lệ của dữ liệu trước khi ghi nhận thay đổi vào cơ sở dữ liệu. Mọi hành động thao tác dữ liệu đều gửi thông báo phản hồi rõ ràng về trạng thái thành công hoặc thất bại. Lược đồ tuần tự cho các ca sử dụng quan trọng được thiết kế chuẩn xác để ngăn chặn xung đột dữ liệu đồng thời. Kiến trúc này bảo đảm tính toàn vẹn và độ sẵn sàng cao của hệ thống.

IV. Đánh giá ứng dụng xây dựng website chuyên bán laptop thực tế

Đồ án tốt nghiệp tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh đã hoàn thành toàn diện các mục tiêu đề ra. Hệ thống website chuyên bán laptop vận hành ổn định trên các môi trường thử nghiệm với đầy đủ tính năng cốt lõi. Người dùng có thể dễ dàng tìm kiếm, so sánh thông số cấu hình và hoàn tất quy trình mua sắm an toàn. Bộ phận quản trị nắm quyền kiểm soát toàn diện danh mục hàng hóa, số lượng tồn kho và thông tin tài khoản người dùng. Đề tài khẳng định năng lực ứng dụng công nghệ phát triển web hiện đại của sinh viên khoa công nghệ thông tin. Giải pháp kỹ thuật này hoàn toàn có thể chuyển giao và áp dụng trực tiếp vào các cửa hàng kinh doanh thiết bị tin học thực tế. Trong tương lai, hệ thống có tiềm năng tích hợp thanh toán tự động qua cổng ngân hàng và mở rộng sang ứng dụng di động đa nền tảng.

4.1. Hiệu quả triển khai đồ án kỹ sư công nghệ thông tin

Đồ án tốt nghiệp thể hiện quy trình phát triển phần mềm chuẩn mực từ khâu phân tích đến kiểm thử. Sản phẩm phần mềm đáp ứng đầy đủ các tiêu chuẩn kỹ thuật do hội đồng chuyên môn tại khoa đánh giá cao. Nhóm nghiên cứu đã làm chủ các công cụ lập trình web hiện đại và phương pháp thiết kế hướng đối tượng. Khối lượng công việc đồ sộ gồm thiết kế cơ sở dữ liệu, dựng sơ đồ ca sử dụng và lập trình mã nguồn hoàn chỉnh. Kết quả này tạo nền tảng chuyên môn vững vàng cho các kỹ sư công nghệ thông tin trước khi gia nhập thị trường lao động.

4.2. Hướng mở rộng tích hợp ứng dụng di động trong tương lai

Bước phát triển tiếp theo của đề tài là xây dựng ứng dụng di động đa nền tảng bằng React Native. Công nghệ này cho phép sử dụng chung mã nguồn JavaScript để triển khai ứng dụng trên cả iOS lẫn Android. Khách hàng sẽ nhận được thông báo khuyến mãi và theo dõi đơn hàng laptop theo thời gian thực trên điện thoại. Hệ thống backend sẵn có sẽ cung cấp API dịch vụ dữ liệu đồng bộ giữa website và ứng dụng di động. Ngoài ra, việc bổ sung thuật toán gợi ý cấu hình máy tính theo thói quen sử dụng cũng là hướng nghiên cứu giàu tiềm năng. Nâng cấp này sẽ hoàn thiện hệ sinh thái bán lẻ công nghệ toàn diện.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Khóa luận tốt nghiệp kỹ sư Công nghệ Thông tin với đề tài "Xây dựng website chuyên bán laptop" được thực hiện bởi nhóm sinh viên Võ Nhật Phi (MSSV: 19110426) và Nguyễn Quang Sang (MSSV: 19110447), dưới sự hướng dẫn của ThS. Nguyễn Hữu Trung tại Bộ môn Công nghệ Phần mềm, Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (khóa học 2019 – 2023).

Bối cảnh thực tiễn của nghiên cứu xuất phát từ tác động sâu rộng của đại dịch COVID-19 đối với các hoạt động kinh tế và xã hội, đặt chuyển đổi số trở thành ưu tiên hàng đầu tại nhiều lĩnh vực. Mô hình bán lẻ truyền thống bộc lộ nhiều điểm hạn chế khi tiếp xúc trực tiếp và tụ tập đông người bị hạn chế tối đa. Do đó, nhu cầu chuyển đổi sang mô hình kinh doanh trực tuyến nhằm cung cấp dịch vụ từ xa, giao hàng tận nơi và tối ưu hóa chi phí vận hành trở nên cấp thiết. Đối với mặt hàng thiết bị công nghệ như máy tính xách tay, người tiêu dùng có nhu cầu tìm kiếm một nền tảng trực tuyến linh hoạt, cung cấp đầy đủ thông số kỹ thuật, giá cả niêm yết rõ ràng, hỗ trợ tương tác phản hồi nhanh và đảm bảo tốc độ tải trang ổn định.

Mục tiêu nghiên cứu của đề tài được phân định cụ thể cho hai nhóm đối tượng tác nhân:

1. Phía người dùng (User):

   • Xem và tìm kiếm sản phẩm laptop theo danh mục, thương hiệu, giá cả và các tiêu chí lọc.
   • Xem thông tin chi tiết sản phẩm bao gồm thông số kỹ thuật, mô tả, hình ảnh, bài đánh giá và thảo luận.
   • Thêm sản phẩm vào giỏ hàng, điều chỉnh số lượng hoặc xóa sản phẩm trong giỏ hàng.
   • Thực hiện thanh toán và cung cấp thông tin vận chuyển, địa chỉ nhận hàng.
   • Gửi bình luận và thảo luận về sản phẩm.
   • Đánh giá chất lượng sản phẩm theo thang điểm từ 1 đến 5 sao.
   • Đăng ký tài khoản mới, đăng nhập hệ thống, đổi mật khẩu và khôi phục mật khẩu.
   • Quản lý lịch sử mua hàng và theo dõi trạng thái xử lý của đơn hàng.
   • Nhận hỗ trợ từ cửa hàng thông qua các kênh liên lạc như email, số điện thoại hoặc tiện ích chat trực tuyến.

2. Phía quản trị viên (Admin):

   • Quản lý chương trình khuyến mãi, thiết lập các mã chiết khấu và quà tặng.
   • Quản lý danh mục sản phẩm (laptop, linh kiện, phụ kiện) và các thương hiệu phân phối.
   • Quản lý dữ liệu sản phẩm (thêm, sửa, xóa thông tin cấu hình, hình ảnh, giá niêm yết).
   • Quản lý và xử lý đơn hàng từ người dùng, cập nhật trạng thái đơn và theo dõi quy trình giao hàng.
   • Quản lý và kiểm duyệt các đánh giá, bình luận của khách hàng trên hệ thống.
   • Quản lý tài khoản người dùng, xem danh sách và cập nhật trạng thái hoạt động của tài khoản.
   • Truy xuất báo cáo, thống kê về doanh thu bán hàng, số lượng đơn hàng và sản phẩm kinh doanh.
   • Tiếp nhận và phản hồi thông tin hỗ trợ người dùng.

Đối tượng nghiên cứu trọng tâm là quy trình xây dựng ứng dụng thương mại điện tử chuyên ngành thiết bị máy tính, tập trung vào hai đối tượng người dùng cuối và người quản trị. Phạm vi nghiên cứu về thời gian diễn ra từ ngày 13/02/2023 đến ngày 10/07/2023. Phạm vi kỹ thuật bao gồm thiết kế giao diện trên nền tảng web và di động, thiết kế cơ sở dữ liệu quan hệ, xây dựng giao diện lập trình ứng dụng (RESTful API), xử lý xác thực và phân quyền truy cập, cùng quy trình kiểm thử chức năng phần mềm.

Cơ sở lý thuyết và phương pháp

Khóa luận áp dụng phương pháp nghiên cứu thực nghiệm trong kỹ thuật phần mềm, kết hợp giữa khảo sát hiện trạng thực tế, mô hình hóa phân tích thiết kế hệ thống theo tiến trình chuẩn và cài đặt kiểm thử ứng dụng.

Về phương pháp khảo sát hiện trạng, nhóm tác giả đã tiến hành khảo sát và đánh giá ưu, nhược điểm của hai hệ thống bán lẻ thiết bị công nghệ lớn tại Việt Nam là website "Thế giới di động" và website "FPT SHOP". Kết quả khảo sát cho thấy cả hai nền tảng đều có điểm mạnh về tính trực quan, bộ lọc đa dạng và tích hợp nhiều hình thức thanh toán. Tuy nhiên, các hệ thống này vẫn tồn tại nhược điểm như chưa tối ưu hóa không gian hiển thị danh sách sản phẩm, giao diện giỏ hàng còn phức tạp hoặc chứa nhiều chi tiết thông tin gây phân tán sự chú ý của người mua. Các phát hiện này được nhóm tác giả sử dụng làm căn cứ thực tế để mô hình hóa yêu cầu và tối ưu hóa hệ thống mới.

Về cơ sở lý thuyết và công nghệ, hệ thống được xây dựng dựa trên các công nghệ phân tán hiện đại, phân chia rõ rệt giữa hai tầng Front-end và Back-end:

Tầng kiến trúc / Thành phần	Công nghệ, Thư viện sử dụng	Vai trò và đặc tính kỹ thuật
Front-end (Web & Mobile)	ReactJS	Thư viện JavaScript xây dựng giao diện Single Page Application (SPA), sử dụng Virtual DOM để tối ưu hóa việc render và cơ chế one-way data binding.
	Redux & Redux-saga	Lớp quản lý trạng thái tập trung (Store duy nhất, State read-only, Reducer thuần túy); xử lý các tác vụ bất đồng bộ (side effects) như gọi API.
	React Native	Framework mã nguồn mở phát triển ứng dụng di động đa nền tảng (Android và iOS) dùng chung nền tảng JavaScript.
	UI Frameworks	Bootstrap, React-bootstrap, Tailwindcss, Material UI, Ant Design hỗ trợ xây dựng giao diện thích ứng (responsive layout).
	Axios	Thư viện HTTP client phát triển trên JavaScript Promise dùng để kết nối và trao đổi dữ liệu với hệ thống API.
Back-end & Dịch vụ	Spring Boot	Module của Spring Framework hỗ trợ phát triển nhanh (RAD), tích hợp sẵn nhúng máy chủ, giảm thiểu cấu hình XML thông qua cơ chế chú thích (Annotations) và Dependency Starter.
	Spring Framework	Nền tảng cốt lõi với hai nguyên lý chính: Dependency Injection (DI) và Aspect Oriented Programming (AOP).
	Spring Security & JWT	Quản lý xác thực và phân quyền người dùng thông qua mã hóa JSON Web Token, Refresh Token và Reset Password Token.
Cơ sở dữ liệu	MySQL	Hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở, hỗ trợ chuẩn giao dịch ACID, cơ chế khóa mức dòng (row-level locking), bảo mật kết nối SSL/SSH.
Tiện ích tích hợp	Tawk.to	Tiện ích hỗ trợ khách hàng và giao tiếp trực tuyến trực tiếp trên giao diện website.

Phương pháp mô hình hóa hệ thống sử dụng ngôn ngữ UML (Unified Modeling Language), biểu diễn bằng các biểu đồ Use Case tổng thể, biểu đồ tuần tự (Sequence Diagram) mô tả luồng xử lý chi tiết và biểu đồ thực thể kết hợp (ERD) cho cơ sở dữ liệu.

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc Client - Server tách biệt, cho phép tầng giao diện và tầng logic dữ liệu hoạt động độc lập thông qua giao thức truyền thông HTTP/HTTPS với định dạng dữ liệu JSON.

Client Tier (ReactJS Web / React Native Mobile) 
Application Tier (Spring Boot RESTful API / Spring Security)
Database Tier (MySQL Relational Database)

Ở tầng Client, ứng dụng được đóng gói thành hai nền tảng: website máy tính sử dụng ReactJS và ứng dụng di động phát triển qua React Native. Phía giao diện chịu trách nhiệm kết xuất dữ liệu, kiểm tra dữ liệu đầu vào cơ bản và gửi yêu cầu đến máy chủ. Đặc biệt, để tối ưu hóa hiệu năng phản hồi và giảm tải truy vấn cho hệ thống, chức năng giỏ hàng của người dùng được thiết kế lưu trữ tạm thời trên bộ nhớ cục bộ trình duyệt (Local Storage). Dữ liệu này chỉ được đồng bộ hóa và tạo bản ghi hóa đơn chính thức trên máy chủ khi người dùng xác nhận đặt hàng.

Ở tầng Back-end, ứng dụng Spring Boot tiếp nhận các yêu cầu HTTP từ client. Tầng Spring Security đóng vai trò bộ lọc bảo mật (filter chain), thực hiện kiểm tra tính hợp lệ của JSON Web Token đính kèm trong tiêu đề yêu cầu (Header). Nếu token hợp lệ và tài khoản có quyền hạn phù hợp (User hoặc Admin), hệ thống sẽ chuyển giao tiếp nhận cho các Controller xử lý nghiệp vụ, thao tác với hệ quản trị cơ sở dữ liệu MySQL và trả về kết quả tương ứng.

Cơ sở dữ liệu quan hệ của hệ thống được chuẩn hóa hoàn chỉnh, bao gồm 22 bảng dữ liệu phục vụ việc lưu trữ thông tin:

Tên bảng dữ liệu	Mục đích và nội dung lưu trữ
User	Lưu trữ thông tin cá nhân, số điện thoại, mật khẩu và trạng thái người dùng.
Role	Lưu trữ danh mục các vai trò trong hệ thống (User, Admin).
User_Role	Bảng trung gian liên kết phân quyền nhiều - nhiều giữa người dùng và vai trò.
RefreshToken	Quản lý các token làm mới phiên đăng nhập của người dùng.
ResetPasswordToken	Quản lý token tạm thời phục vụ yêu cầu khôi phục mật khẩu.
Address	Lưu trữ danh sách địa chỉ nhận hàng của người dùng.
Category	Lưu trữ danh mục phân loại sản phẩm laptop và linh kiện.
Brand	Lưu trữ thông tin các thương hiệu sản xuất thiết bị.
Product	Lưu trữ thông tin sản phẩm chính: tên, giá niêm yết, thông số kỹ thuật, mô tả.
ProductImage	Lưu trữ danh sách đường dẫn hình ảnh chi tiết của sản phẩm.
Product_Unit	Quản lý thông tin đơn vị sản phẩm và quy cách đóng gói.
Product_Accessory	Lưu trữ thông tin phụ kiện đi kèm theo từng dòng máy.
Label	Danh mục nhãn thuộc tính sản phẩm (ví dụ: máy mới, nổi bật).
Product_Label	Bảng liên kết trung gian giữa sản phẩm và nhãn thuộc tính.
Discount	Lưu trữ các mã chiết khấu, chương trình giảm giá và quà tặng.
Product_Discount	Bảng liên kết áp dụng mã chiết khấu cho từng sản phẩm cụ thể.
Cart	Quản lý thông tin giỏ hàng được đồng bộ hóa lên hệ thống.
Invoice	Quản lý hóa đơn bán hàng, trạng thái thanh toán và thông tin giao hàng.
ImportProduct	Quản lý các phiếu nhập hàng và nguồn gốc sản phẩm nhập kho.
Comment	Lưu trữ các thảo luận, bình luận và nội dung phản hồi về sản phẩm.
Feedback	Lưu trữ đánh giá xếp hạng chất lượng sản phẩm (thang điểm từ 1 đến 5 sao).
Banner	Quản lý thông tin banner quảng bá hiển thị theo khung thời gian trên giao diện.
LogSystem	Ghi nhận nhật ký hoạt động và lỗi phát sinh trong quá trình vận hành hệ thống.

Quy trình kiểm thử được triển khai tại Chương 4 của khóa luận nhằm xác nhận mức độ hoàn thiện của phần mềm. Nhóm tác giả đã lập bảng xác định phạm vi kiểm thử, xây dựng bảng phân tích rủi ro và kế hoạch giảm nhẹ, sau đó thực hiện kiểm thử chức năng (Functional Testing) trên cả hai phân hệ Người dùng và Quản trị viên:

• Kiểm thử phân hệ người dùng: Đăng ký tài khoản, đăng nhập, tìm kiếm sản phẩm theo từ khóa và bộ lọc, xem chi tiết, thêm/sửa/xóa sản phẩm trong giỏ hàng, hủy đơn hàng ở trạng thái PENDING, viết bình luận và gửi đánh giá xếp hạng.
• Kiểm thử phân hệ quản trị viên: Đăng nhập quản trị, thêm mới sản phẩm kèm tải lên hình ảnh, chỉnh sửa giá và thông tin kỹ thuật, xóa sản phẩm, xác nhận và cập nhật trạng thái đơn hàng, tạo phiếu nhập hàng, quản lý mã chiết khấu và theo dõi biểu đồ thống kê doanh số.

Nội dung chính theo từng chương

Bố cục của khóa luận tốt nghiệp được cấu trúc thành 4 chương nội dung chính, đi kèm phần mở đầu và kết luận:

Chương 1: Cơ sở lý thuyết

Chương này tập trung giới thiệu và phân tích nền tảng lý thuyết của các công nghệ phần mềm được lựa chọn áp dụng trong đề tài. Nội dung chia làm hai phần chính:

• Các công nghệ Front-end: Phân tích kiến trúc của ReactJS, cơ chế hoạt động của Virtual DOM giúp giảm thiểu chi phí re-render cây DOM thật, luồng dữ liệu một chiều (one-way data binding) thông qua Props và State. Giới thiệu mô hình quản lý trạng thái Redux với ba nguyên lý cốt lõi, vai trò của middleware Redux-saga trong xử lý tác vụ bất đồng bộ. Khái quát các thư viện định dạng giao diện gồm Bootstrap, React-bootstrap, Tailwindcss, Material UI, Ant Design và thư viện Axios. Khái quát nền tảng React Native cho phép tái sử dụng kiến thức JavaScript để xây dựng ứng dụng di động đa nền tảng.
• Các công nghệ Back-end: Trình bày kiến trúc nền tảng Spring Framework với các nguyên lý Dependency Injection (DI) và Aspect Oriented Programming (AOP). Phân tích module Spring Boot và các ưu điểm nổi bật: cơ chế phát triển nhanh (RAD), nhúng sẵn máy chủ web, quản lý phụ thuộc qua Starter dependencies, tính năng cấu hình từ bên ngoài (Externalized Configuration), quản lý môi trường bằng Profiles và ghi nhận log hệ thống qua Spring Boot Logging. Khái quát hệ quản trị cơ sở dữ liệu MySQL, nhấn mạnh vào kiến trúc storage-engine, khả năng hỗ trợ giao dịch ACID toàn vẹn, cơ chế khóa mức dòng và tính ổn định trong xử lý dữ liệu.

Chương 2: Khảo sát hiện trạng và mô hình hoá yêu cầu

Chương này thực hiện việc điều tra thực tế và chuyển đổi nhu cầu người dùng thành các đặc tả kỹ thuật:

• Khảo sát hiện trạng: Phân tích chi tiết hai website thương mại điện tử "Thế giới di động" và "FPT SHOP", tổng hợp danh mục chức năng, chỉ ra các ưu điểm cần học hỏi và nhược điểm về giao diện hiển thị, cấu trúc giỏ hàng cần khắc phục.
• Xác định kiến trúc hệ thống và yêu cầu: Thiết lập sơ đồ kiến trúc tổng thể. Phân định rõ ràng yêu cầu chức năng cho phân hệ Người dùng (10 nhóm chức năng) và phân hệ Quản trị viên (8 nhóm chức năng), cùng các yêu cầu phi chức năng về tính thẩm mỹ giao diện, tốc độ tải trang, an toàn bảo mật và khả năng tích hợp thanh toán.
• Mô hình hóa yêu cầu: Xây dựng sơ đồ Use Case cho từng phân hệ tác nhân và cung cấp 14 bảng mô tả chi tiết use case (gồm các mục Tên, Mô tả, Đối tượng, Tiền điều kiện, Hậu điều kiện, Luồng cơ bản và Luồng thay thế). Trong đó, 11 use case thuộc phân hệ người dùng (Đăng nhập, Chỉnh sửa thông tin tài khoản, Xem chi tiết sản phẩm, Tìm kiếm sản phẩm, Thêm vào giỏ hàng, Xóa khỏi giỏ hàng, Chỉnh sửa giỏ hàng, Thêm bình luận, Thêm đánh giá, Thanh toán hóa đơn, Xem lịch sử đơn hàng) và 3 use case thuộc phân hệ quản trị (Thêm sản phẩm, Xóa sản phẩm, Chỉnh sửa thông tin sản phẩm).

Chương 3: Thiết kế phần mềm

Chương này thực hiện thiết kế chi tiết toàn bộ các thành phần của hệ thống trước khi bước vào giai đoạn viết mã:

• Lược đồ tuần tự (Sequence Diagram): Xây dựng hệ thống 19 biểu đồ tuần tự mô tả luồng tương tác giữa Actor, Giao diện, Controller, Service và Database. Các kịch bản bao gồm: Đăng nhập, Đăng ký, Đổi thông tin cá nhân, Đổi mật khẩu, Quên mật khẩu, Tìm kiếm sản phẩm, Thêm sản phẩm vào giỏ hàng, Đặt hàng; cùng các nghiệp vụ quản trị như Đăng nhập phía Admin, Thêm thông tin sản phẩm, Cập nhật thông tin/hình ảnh sản phẩm, Xóa thông tin sản phẩm, Xem chi tiết đơn hàng, Thay đổi trạng thái đơn hàng, Tạo phiếu nhập hàng, Phản hồi bình luận, Phân quyền người dùng và Cập nhật mã chiết khấu.
• Thiết kế cơ sở dữ liệu: Xây dựng lược đồ thực thể kết hợp (ERD) tổng thể và 22 bảng mô tả chi tiết cấu trúc dữ liệu, kiểu dữ liệu, khóa chính, khóa ngoại và ràng buộc toàn vẹn của từng bảng.
• Thiết kế giao diện (UI): Trình bày thiết kế chi tiết cho hơn 40 màn hình giao diện, bao gồm giao diện web người dùng (Trang chủ, Trang tổng hợp sản phẩm, Trang chi tiết, Giỏ hàng, Đánh giá, Thảo luận, Lịch sử đặt hàng, Đăng nhập/Đăng ký), giao diện tích hợp tiện ích chat Tawk.to, giao diện hệ thống quản lý của Admin (quản lý Banner, Thương hiệu, Phân loại, Mã chiết khấu, Nhãn thuộc tính, Đơn đặt hàng, Phân quyền, Thống kê doanh thu) và các màn hình giao diện ứng dụng trên thiết bị di động (Mobile App).

Chương 4: Cài đặt ứng dụng

Chương cuối cùng trình bày quá trình hiện thực hóa các thiết kế thành phần mềm chạy được trên môi trường thực tế và đánh giá chất lượng sản phẩm:

• Cài đặt chương trình: Cấu hình và kết nối các tầng công nghệ. Hiện thực hóa các API chức năng phía Spring Boot, cấu hình bảo mật với Spring Security và JWT, lập trình giao diện người dùng và quản trị viên bằng ReactJS và React Native, thực hiện kết nối trao đổi dữ liệu với cơ sở dữ liệu MySQL.
• Kiểm thử ứng dụng: Trình bày bảng xác định phạm vi kiểm thử, bảng nhận diện rủi ro cùng các phương án xử lý giảm nhẹ. Báo cáo kết quả kiểm thử chức năng phía người dùng và kết quả kiểm thử chức năng phía quản trị viên theo từng ca kiểm thử (test case) được lập trong đề tài.

Kết quả và đóng góp

Đề tài đã hoàn thành đầy đủ các nhiệm vụ được giao trong đề cương nghiên cứu, đạt được các kết quả cụ thể sau:

1. Về sản phẩm ứng dụng:

   • Xây dựng thành công hệ thống website bán laptop hoàn chỉnh bằng ReactJS kết hợp ứng dụng trên thiết bị di động bằng React Native, cung cấp giao diện trực quan và thích ứng cho người mua hàng.
   • Phát triển hệ thống Back-end sử dụng Spring Boot với kiến trúc RESTful API, đáp ứng đầy đủ các nghiệp vụ quản lý danh mục, xử lý sản phẩm, tiếp nhận đơn đặt hàng, quản lý nhập kho và thống kê số liệu kinh doanh.
   • Triển khai cơ chế xác thực và phân quyền bằng JSON Web Token (JWT) kết hợp Spring Security, quản lý phiên làm việc qua RefreshToken và tính năng lấy lại mật khẩu qua ResetPasswordToken.
   • Thiết kế và cài đặt cơ sở dữ liệu quan hệ MySQL chuẩn hóa gồm 22 bảng, quản lý toàn diện từ dữ liệu danh mục sản phẩm, biến thể, hình ảnh, khuyến mãi đến nhật ký hệ thống (LogSystem).
   • Tích hợp thành công tiện ích chat trực tuyến Tawk.to trên website hỗ trợ tương tác trực tiếp giữa khách hàng và quản trị viên.
   • Hoàn thành các ca kiểm thử chức năng cho cả hai phân hệ, đảm bảo các luồng sự kiện chính và luồng thay thế hoạt động theo đúng tài liệu mô tả use case.

2. Phân công và đóng góp của các thành viên thực hiện:

   • Sinh viên Võ Nhật Phi: Chịu trách nhiệm thiết kế giao diện web quản trị viên và giao diện di động cho người dùng; thiết kế lược đồ CSDL và tạo CSDL MySQL; xây dựng hệ thống xử lý logic và RESTful API; vẽ các biểu đồ tuần tự cho phân hệ quản trị viên; viết báo cáo phần hệ thống và các nội dung kỹ thuật liên quan.
   • Sinh viên Nguyễn Quang Sang: Chịu trách nhiệm thiết kế giao diện website người dùng; lập trình tương tác với API và hiển thị chức năng phía client; thực hiện kiểm thử và sửa lỗi ứng dụng; vẽ biểu đồ Use Case kèm bảng mô tả chi tiết; vẽ các biểu đồ tuần tự cho phân hệ người dùng; viết báo cáo phần giao diện và phần mở đầu.

3. Đóng góp so với khảo sát thực tế:

   • Khắc phục các nhược điểm được chỉ ra từ khảo sát thực tế trên hai hệ sinh thái "Thế giới di động" và "FPT SHOP", tối ưu hóa không gian hiển thị danh sách thiết bị giúp người dùng tập trung vào các thông số kỹ thuật cốt lõi.
   • Tối ưu hóa trải nghiệm thao tác giỏ hàng thông qua cơ chế lưu trữ cục bộ (Local Storage), giúp thao tác thêm, bớt sản phẩm diễn ra tức thì mà không tạo áp lực tải lên máy chủ cơ sở dữ liệu.

Hạn chế và hướng nghiên cứu tiếp

Khóa luận được triển khai bởi hai thành viên trong khoảng thời gian 5 tháng (từ tháng 02/2023 đến tháng 07/2023), do đó còn tồn tại một số điểm hạn chế kỹ thuật:

• Hệ thống thanh toán trực tuyến mới dừng lại ở việc mô phỏng cập nhật trạng thái đơn hàng và lưu phương thức thanh toán, chưa tích hợp trực tiếp qua các cổng thanh toán điện tử thực tế của bên thứ ba (như VNPay, MoMo, ZaloPay).
• Tính năng tìm kiếm và gợi ý sản phẩm được xây dựng dựa trên các câu truy vấn lọc điều kiện cứng trong cơ sở dữ liệu, chưa áp dụng các mô hình học máy để phân tích hành vi và cá nhân hóa trải nghiệm người dùng.
• Công tác kiểm thử trong văn bản chủ yếu tập trung vào kiểm thử chức năng hộp đen, chưa ghi nhận các số liệu kiểm thử hiệu năng chịu tải lớn (stress test, load test) trong điều kiện nhiều người dùng truy cập đồng thời.

Các hướng phát triển tiếp theo được tác giả xác định bao gồm:

• Tích hợp cổng thanh toán trực tuyến chính thức qua các dịch vụ trung gian thanh toán uy tín.
• Nghiên cứu và xây dựng hệ thống khuyến nghị sản phẩm thông minh (Recommendation System) dựa trên lịch sử xem hàng và đánh giá của khách hàng.
• Nâng cấp và triển khai hệ thống lên hạ tầng đám mây (Cloud) kết hợp đóng gói container (Docker) để tăng tính linh hoạt và khả năng mở rộng dịch vụ.

Giá trị tham khảo

Báo cáo khóa luận là tài liệu học thuật có giá trị tham khảo rõ ràng đối với sinh viên và người nghiên cứu trong các trường hợp sau:

• Đối tượng phù hợp: Sinh viên chuyên ngành Công nghệ Phần mềm, Công nghệ Thông tin, Hệ thống Thông tin đang thực hiện đồ án môn học hoặc khóa luận tốt nghiệp về xây dựng hệ thống thương mại điện tử.
• Phần nội dung có giá trị tham khảo cao:
  • Quy trình mô hình hóa yêu cầu tại Chương 2 với 14 bảng đặc tả use case mẫu mực, phân định chặt chẽ giữa luồng cơ bản và luồng ngoại lệ.
  • Hệ thống 19 lược đồ tuần tự (Sequence Diagram) tại Chương 3, cung cấp tài liệu trực quan về cách thiết kế luồng xử lý từ Client qua Controller, Service đến Repository trong mô hình kiến trúc phân tầng.
  • Cấu trúc cơ sở dữ liệu quan hệ gồm 22 bảng tại Chương 3, là mẫu thiết kế tham khảo thực tế cho các bài toán quản lý cửa hàng kinh doanh thiết bị phần cứng, phụ kiện, hóa đơn xuất nhập và phân quyền bảo mật.
  • Kế hoạch triển khai dự án mẫu theo từng mốc thời gian và bảng phân chia nhiệm vụ chi tiết giữa các thành viên trong nhóm phát triển.

Câu hỏi thường gặp

1. Khóa luận sử dụng giải pháp công nghệ nào để thực hiện xác thực và phân quyền cho người dùng và các API?
Hệ thống sử dụng giải pháp xác thực bằng JSON Web Token (JWT) kết hợp với framework Spring Security ở phía Back-end. Dữ liệu phân quyền được lưu trữ trong cơ sở dữ liệu qua các bảng Role và User_Role. Phiên làm việc của người dùng được duy trì và bảo vệ thông qua cơ chế mã hóa token, hỗ trợ cấp lại token qua bảng RefreshToken và xử lý cấp lại mật khẩu qua bảng ResetPasswordToken.

2. Cơ chế quản lý giỏ hàng của khách hàng trên website được thiết kế và vận hành như thế nào?
Theo đặc tả use case trong khóa luận, khi khách hàng thực hiện các thao tác thêm, xóa hoặc điều chỉnh số lượng sản phẩm, thông tin giỏ hàng được xử lý và lưu trữ trực tiếp trên bộ nhớ cục bộ trình duyệt (Local Storage) ở phía Client. Cách tiếp cận này giúp tối ưu hóa tốc độ tương tác của người dùng và giảm bớt các truy vấn không cần thiết lên máy chủ. Dữ liệu này chỉ được gửi lên Back-end và lưu chính thức vào bảng Invoice trong cơ sở dữ liệu khi khách hàng tiến hành bước thanh toán đơn hàng.

3. Cơ sở dữ liệu của hệ thống gồm bao nhiêu bảng và được quản lý bởi hệ quản trị nào?
Cơ sở dữ liệu của hệ thống được quản trị trên hệ quản trị cơ sở dữ liệu quan hệ MySQL, bao gồm 22 bảng dữ liệu: Address, Banner, Brand, Cart, Category, Comment, Discount, Feedback, ImportProduct, Invoice, Label, LogSystem, Product, ProductImage, Product_Unit, RefreshToken, ResetPasswordToken, Product_Accessory, Product_Discount, Product_Label, Role, User_Role và User.

4. Khảo sát hiện trạng trong khóa luận đã đánh giá những hệ thống thực tế nào và rút ra điểm gì?
Khóa luận đã khảo sát hai website thương mại điện tử thực tế tại Việt Nam là "Thế giới di động" và "FPT SHOP". Nghiên cứu ghi nhận các điểm mạnh về lượng mặt hàng, bộ lọc chi tiết và khả năng tích hợp thanh toán/chat, đồng thời chỉ ra các điểm hạn chế về không gian hiển thị danh sách sản phẩm chưa được tối ưu, giao diện giỏ hàng chưa bắt mắt và trang chi tiết còn chứa nhiều thông tin không thực sự cần thiết.

5. Phạm vi và các kịch bản kiểm thử ứng dụng trong khóa luận bao gồm những gì?
Khóa luận thực hiện kiểm thử chức năng cho cả hai phân hệ tác nhân:

• Phía người dùng: Kiểm thử các chức năng đăng ký, đăng nhập, tìm kiếm sản phẩm theo từ khóa và bộ lọc, xem chi tiết sản phẩm, thêm/sửa/xóa sản phẩm trong giỏ hàng, hủy đơn hàng trạng thái PENDING, gửi bình luận và đánh giá sản phẩm từ 1 đến 5 sao.
• Phía quản trị viên: Kiểm thử đăng nhập trang quản lý, thêm/sửa/xóa thông tin sản phẩm và hình ảnh, cập nhật trạng thái đơn đặt hàng, lập phiếu nhập hàng, quản lý mã chiết khấu và theo dõi báo cáo thống kê doanh số.

Kết luận

Khóa luận tốt nghiệp "Xây dựng website chuyên bán laptop" của sinh viên Võ Nhật Phi và Nguyễn Quang Sang đã giải quyết hoàn chỉnh bài toán xây dựng nền tảng thương mại điện tử phục vụ nhu cầu mua sắm thiết bị công nghệ trực tuyến. Đề tài kết hợp thành công các công nghệ hiện đại bao gồm ReactJS, React Native, Spring Boot và MySQL, hình thành một hệ thống phân tán đa nền tảng với đầy đủ các nghiệp vụ từ bán hàng, quản lý kho đến phân quyền bảo mật. Báo cáo khóa luận được trình bày mạch lạc, tuân thủ đúng tiến trình công nghệ phần mềm từ khảo sát hiện trạng, phân tích use case, thiết kế tuần tự, xây dựng cơ sở dữ liệu đến kiểm thử ứng dụng, tạo nên nguồn tài liệu học thuật và kỹ thuật có giá trị ứng dụng cao.

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Các công nghệ sử dụng ở front-end 1. ReactJS Khái niệm ReactJS là một thư viện JavaScript có tính hiệu quả và linh hoạt để xây dựng các thành phần giao diện người dùng (UI) có thể sử dụng lại. ReactJS giúp phân chia các UI phức tạp thành các thành phần nhỏ (được gọi là component).

Nó được tạo ra bởi Jordan Walke, một kỹ sư phần mềm tại Facebook. ReactJS ban đầu được phát triển và duy trì bởi Facebook , sau đó được sử dụng trong các sản phẩm của mình như WhatsApp & Instagram. ReactJS được dùng để xây dựng các ứng dụng - single page application (SPA). Một trong những điểm thú vị của ReacJS là nó không chỉ được xây dựng bên phía clients mà còn được sử dụng trên server và có thể kết nối với nhau.

ReactJS so sánh sự thay đổi giữa các giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM. Công nghệ Virtual DOM giúp tăng hiệu năng cho ứng dụng. Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý. ReactJS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này.

Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật. Virtual DOM trong ReactJS 17 PHẦN NỘI DUNG ReactJS sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều. Dữ liệu được truyền từ parent đến child thông qua props. Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi.

Với các đặc điểm ở trên, ReactJS dùng để xây dựng các ứng dụng lớn mà dữ liệu của chúng thay đổi liên tục theo thời gian. Dữ liệu thay đổi thì hầu hết kèm theo sự thay đổi về giao diện. Ví dụ như Facebook: trên Newsfeed của bạn cùng lúc sẽ có các status khác nhau và mỗi status lại có số like, share, comment liên tục thay đổi. Khi đó ReactJS sẽ rất hữu ích để sử dụng.

Virtual DOM trong ReactJS Ưu điểm Các ưu điểm nổi bật khi sử dụng ReactJS thay cho các framework khác: ReactJS cho phép Developer viết ứng dụng trực tiếp trên JavaScript. Thêm vào đó là JSX – một trong những tính năng không chỉ làm cho ReactJS dễ dàng mà còn thú vị hơn. Developer giờ đây có thể tạo nên một tính năng mới và có thể xem nó xuất hiện ngay trong thời gian thực, giúp Developer có thể được đưa trực tiếp các đoạn HTML vào JavaScript. Một ý tưởng khác làm cho ReactJS trở nên độc đáo là nó cho phép Developer phá vỡ những cấu tạo UI phức tạp thành những component độc lập.

Dev sẽ không phải lo lắng về tổng thể ứng dụng web, giờ đây Developer dễ dàng chia nhỏ các cấu trúc UI/UX phức tạp thành từng component đơn giản hơn. 18 PHẦN NỘI DUNG Không chỉ vậy, thông qua Props, các component có thể kết nối với nhau bằng cách sử dụng data tùy biến. Điều này giúp chuyển các dữ liệu đã được tùy biến đến một UI component cụ thể. Tính năng State khi sử dụng ReactJS, giúp điều chỉnh trạng thái cho các component (child) nhận data từ một component nguồn (parent).

Developer có thể thay đổi trạng thái cho nhiều component (child) trên ứng dụng nhưng không ảnh hưởng tới component gốc (parent) đang ở trạng thái Stateful. Việc điều chỉnh các ứng dụng cũng trở nên dễ dàng hơn, giao diện thay đổi trực quan hơn với tốc độ cao. Dom ảo (Virtual DOM) giúp cho ứng dụng nhanh hơn.