Xây dựng website bán thiết bị di động dùng React.js và Java Spring Boot

Đồ án website bán thiết bị di động dùng React.js và Spring Boot - ĐH Sư phạm Kỹ thuật TP.HCM

• Tác giả: Nguyễn Minh Nhật
• Người hướng dẫn: TS. Lê Vĩnh Thịnh
• Trường học: Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng website bán thiết bị di động dùng React.js và Java Spring Boot
• Loại tài liệu: Khóa luận tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan về website bán thiết bị di động tại ĐH SPKT TP

Đồ án tốt nghiệp tại Trường Đại học Sư phạm Kỹ thuật TP.HCM tập trung giải quyết nhu cầu thương mại điện tử hiện đại. Đề tài được thực hiện bởi sinh viên ngành Công nghệ Thông tin dưới sự hướng dẫn của TS. Lê Vĩnh Thịnh. Thị trường thiết bị di động đòi hỏi các nền tảng bán hàng có tốc độ xử lý nhanh. Kiến trúc hệ thống tách biệt giữa giao diện người dùng và máy chủ xử lý dữ liệu. Công nghệ React.js hỗ trợ xây dựng giao diện tương tác mượt mà. Phía sau giao diện, Java Spring Boot đảm nhận điều phối toàn bộ quy trình nghiệp vụ và lưu trữ. Nền tảng thương mại điện tử giúp doanh nghiệp bán lẻ tiếp cận khách hàng trên diện rộng. Khách hàng dễ dàng tìm kiếm dòng điện thoại thông minh, máy tính bảng và phụ kiện liên quan. Đề tài nghiên cứu các tiêu chuẩn kỹ thuật phần mềm chuẩn mực. Quá trình phát triển tuân thủ quy trình kiểm thử nghiêm ngặt. Hệ thống đáp ứng yêu cầu vận hành liên tục và ổn định. Kết quả nghiên cứu mang lại giá trị thực tiễn cao cho sinh viên kỹ thuật phần mềm.

1.1. Bối cảnh nghiên cứu đề tài tại ĐH SPKT TP.HCM

Thương mại điện tử bùng nổ mạnh mẽ trên toàn cầu. Xu hướng mua sắm thiết bị công nghệ trực tuyến tăng trưởng vượt bậc mỗi năm. Khách hàng mong muốn trải nghiệm giao dịch thông suốt, an toàn và nhanh chóng. Doanh nghiệp cần hạ tầng công nghệ tin cậy để quản lý nguồn hàng phức tạp. Sinh viên Đại học Sư phạm Kỹ thuật TP.HCM bắt nhịp yêu cầu chuyển đổi số thực tế. Đồ án xây dựng nền tảng thương mại điện tử chuyên biệt cho thiết bị di động. Nhóm nghiên cứu phân tích chuỗi cung ứng sản phẩm công nghệ. Quy trình bán hàng truyền thống bộc lộ nhiều điểm hạn chế về chi phí mặt bằng và nhân sự. Giải pháp website trực tuyến giúp tối ưu hóa chi phí vận hành doanh nghiệp hiệu quả.

1.2. Mục tiêu triển khai website thương mại điện tử

Mục tiêu trọng tâm của dự án là hoàn thiện hệ thống thương mại điện tử đáp ứng tiêu chuẩn công nghiệp. Nhóm nghiên cứu xây dựng website với đầy đủ phân hệ dành cho khách hàng và ban quản trị. Giao diện người dùng hướng tới sự đơn giản và trực quan. Hệ thống hỗ trợ tra cứu thông số kỹ thuật điện thoại chính xác. Người mua có thể lọc sản phẩm theo hãng sản xuất, mức giá hoặc tính năng nổi bật. Phía máy chủ đảm bảo khả năng tiếp nhận hàng ngàn yêu cầu truy cập đồng thời. Tính toàn vẹn của dữ liệu giỏ hàng và lịch sử đơn hàng luôn được đặt lên hàng đầu. Dự án cũng hướng đến việc chuẩn hóa cấu trúc mã nguồn theo mô hình kiến trúc phân lớp, tạo tiền đề thuận lợi cho việc bảo trì lâu dài.

II. Phân tích bài toán website bán thiết bị di động React

Việc vận hành hệ sinh thái kinh doanh thiết bị di động trực tuyến gặp nhiều rào cản kỹ thuật phức tạp. Thiết bị di động có danh mục sản phẩm thay đổi liên tục theo thị trường. Mỗi mẫu điện thoại thường sở hữu nhiều biến thể về màu sắc, dung lượng bộ nhớ và giá thành. Sự đa dạng này đòi hỏi cơ sở dữ liệu phải được thiết kế linh hoạt. Nếu kiến trúc cơ sở dữ liệu không chuẩn hóa, hiện tượng trùng lặp hoặc sai lệch tồn kho sẽ xảy ra thường xuyên. Bên cạnh đó, tốc độ tải trang ảnh hưởng trực tiếp đến tỷ lệ chuyển đổi đơn hàng. Người tiêu dùng có xu hướng rời bỏ website nếu trang hiển thị chậm trễ. Cơ chế tải lại toàn bộ trang web truyền thống gây lãng phí băng thông mạng. Ngoài ra, vấn đề an toàn thông tin cá nhân và dữ liệu thanh toán là mối quan tâm lớn. Các cuộc tấn công mạng nhằm vào lỗ hổng bảo mật giao dịch diễn ra ngày càng tinh vi. Đề tài đồ án tại ĐH SPKT TP.HCM đi sâu mổ xẻ những khó khăn này nhằm tìm ra mô hình kiến trúc phần mềm phù hợp nhất.

2.1. Thách thức trong quản lý danh mục và tồn kho di động

Thị trường điện thoại di động sở hữu đặc thù phân loại hàng hóa rất chi tiết. Một dòng điện thoại có nhiều phiên bản bộ nhớ và màu sắc khác nhau. Giá bán và số lượng tồn kho của từng biến thể không giống nhau. Việc quản lý thủ công dễ dẫn đến sai sót số liệu trong kho hàng. Khi khách hàng đặt mua cùng lúc một sản phẩm, hiện tượng tranh chấp dữ liệu dễ dàng phát sinh nếu thiếu cơ chế khóa giao dịch. Hệ thống cần giải quyết bài toán đồng bộ hóa trạng thái kho theo thời gian thực. Đồ án xây dựng các mô hình quan hệ bảng dữ liệu chặt chẽ nhằm kiểm soát sự nhất quán này.

2.2. Trở ngại về hiệu năng và trải nghiệm giao diện người dùng

Website thương mại điện tử truyền thống thường tải lại trang mỗi khi người dùng thao tác. Điều này làm gián đoạn trải nghiệm mua sắm và gây khó chịu cho khách hàng. Các trang hiển thị danh sách hàng trăm mẫu điện thoại dễ rơi vào trạng thái đơ cứng nếu xử lý DOM thiếu tối ưu. Thiết bị di động của người dùng có cấu hình phần cứng đa dạng, đòi hỏi giao diện phải tương thích tốt trên mọi kích thước màn hình. Nhóm sinh viên ĐH SPKT TP.HCM nhận thấy sự cần thiết của việc áp dụng mô hình ứng dụng đơn trang. Cơ chế này loại bỏ thao tác làm mới trang, giúp tốc độ phản hồi trở nên tức thì.

III. Giải pháp xây dựng website bán thiết bị di động Spring Boot

Để giải quyết triệt để các rào cản kỹ thuật, đồ án áp dụng mô hình kiến trúc tách biệt giữa frontend và backend. Phía máy khách sử dụng thư viện React.js để xây dựng ứng dụng trang đơn linh hoạt. React.js quản lý trạng thái giao diện hiệu quả thông qua cơ chế Virtual DOM tiên tiến. Người mua dễ dàng thực hiện các thao tác tìm kiếm, lọc thiết bị và thêm hàng vào giỏ mà không cần tải lại trang. Phía máy chủ vận hành trên nền tảng Java Spring Boot mạnh mẽ. Spring Boot cung cấp hệ thống RESTful API an toàn, đáp ứng chuẩn thiết kế microservices hiện đại. Nền tảng tích hợp Spring Security cùng cơ chế mã hóa JWT để xác thực và phân quyền tài khoản người dùng. Cơ sở dữ liệu quan hệ MySQL lưu trữ thông tin sản phẩm, đơn hàng và các giao dịch tài chính. Hệ thống quản trị Admin cung cấp các công cụ kiểm soát danh mục thương hiệu, mã giảm giá và theo dõi trạng thái vận chuyển. Sự kết hợp giữa React.js và Spring Boot tạo nên một hệ sinh thái thương mại điện tử vận hành bền vững, bảo mật và đạt tốc độ phản hồi vượt trội.

3.1. Thiết kế kiến trúc RESTful API bằng Spring Boot

Backend đóng vai trò xương sống trong việc xử lý nghiệp vụ bán hàng. Java Spring Boot được triển khai theo mô hình ba tầng Controller, Service và Repository. Cấu trúc này giúp phân tách rõ ràng trách nhiệm của từng thành phần mã nguồn. Các endpoint RESTful API được thiết kế chuẩn xác để cung cấp dữ liệu định dạng JSON cho ứng dụng React.js. Cơ chế ORM với Spring Data JPA tối ưu hóa các câu truy vấn cơ sở dữ liệu. Nhóm sinh viên thiết lập các bộ lọc xác thực để bảo vệ thông tin cá nhân của người mua hàng. Các thao tác thêm, sửa, xóa sản phẩm trong kho đều được ghi nhận nhật ký chi tiết nhằm phục vụ công tác đối soát dữ liệu.

3.2. Phát triển giao diện người dùng tương tác bằng React.js

Giao diện người dùng được xây dựng hoàn toàn dựa trên nền tảng React.js hiện đại. Các thành phần giao diện được chia nhỏ thành các component độc lập và có khả năng tái sử dụng cao. Nhóm nghiên cứu sử dụng Axios để đồng bộ dữ liệu bất đồng bộ với máy chủ Spring Boot. Khách hàng có thể trải nghiệm tính năng giỏ hàng tức thời và lưu danh sách yêu thích dễ dàng. Giao diện trang web được thiết kế tương thích linh hoạt trên cả điện thoại di động và máy tính bảng. Tốc độ chuyển đổi giữa các trang diễn ra mượt mà nhờ hệ thống định tuyến React Router. Điều này gia tăng đáng kể mức độ hài lòng của người dùng khi tham gia mua sắm trực tuyến.

IV. Kết luận ứng dụng website bán thiết bị di động tại HCMUTE

Đồ án tốt nghiệp xây dựng website bán thiết bị di động đã hoàn thành trọn vẹn các mục tiêu đề ra ban đầu. Nhóm tác giả Nguyễn Minh Nhật và Phan Tân Tỵ dưới sự định hướng của TS. Lê Vĩnh Thịnh đã kiến tạo một giải pháp phần mềm hoàn chỉnh. Hệ thống tích hợp nhuần nhuyễn giữa React.js và Spring Boot, chứng minh tính khả thi cao trong triển khai thực tế. Website xử lý ổn định các luồng nghiệp vụ cốt lõi từ duyệt hàng, đặt hàng đến quản trị chuỗi cung ứng. Nền tảng đáp ứng tốt các tiêu chí phi chức năng về hiệu năng xử lý, tính mở rộng và khả năng bảo mật thông tin. Dự án khẳng định chất lượng đào tạo gắn liền với thực tiễn sản xuất phần mềm tại Trường Đại học Sư phạm Kỹ thuật TP.HCM. Giải pháp công nghệ này không chỉ phục vụ đánh giá năng lực học thuật của sinh viên kỹ thuật. Sản phẩm còn mở ra tiềm năng thương mại hóa thực tế cho các cửa hàng bán lẻ thiết bị di động. Khung kiến trúc được xây dựng bài bản tạo tiền đề vững chắc cho việc bổ sung thêm các tính năng thanh toán số và gợi ý mua hàng thông minh sau này.

4.1. Đánh giá kết quả đạt được của đồ án tốt nghiệp

Hệ thống phần mềm được nghiệm thu thành công với đầy đủ các tính năng đã cam kết. Toàn bộ luồng nghiệp vụ từ đăng ký thành viên, quản lý giỏ hàng đến thanh toán đơn hàng đều vận hành chính xác. Phân hệ quản trị Admin thực hiện tốt công tác theo dõi trạng thái đơn hàng và cập nhật danh mục sản phẩm. Tốc độ phản hồi của các API backend luôn duy trì ở mức tối ưu dưới tải trọng thử nghiệm. Hội đồng chuyên môn tại ĐH SPKT TP.HCM đánh giá cao tính chuẩn mực trong cấu trúc mã nguồn và tài liệu thiết kế phần mềm. Đồ án thể hiện năng lực làm chủ công nghệ mới của sinh viên tốt nghiệp ngành Công nghệ Thông tin.

4.2. Hướng phát triển và khả năng ứng dụng thực tế

Hệ sinh thái website có khả năng triển khai ngay cho các chuỗi cửa hàng bán lẻ thiết bị di động. Nhờ cấu trúc module linh hoạt, hệ thống dễ dàng tích hợp thêm các cổng thanh toán trực tuyến phổ biến như VNPay hoặc MoMo. Hướng phát triển tiếp theo tập trung vào việc ứng dụng trí tuệ nhân tạo để phân tích hành vi mua sắm của khách hàng. Thuật toán gợi ý sẽ đề xuất các phụ kiện đi kèm phù hợp với từng mẫu điện thoại. Đội ngũ nghiên cứu cũng có thể chuyển đổi backend sang mô hình microservices phân tán hoàn toàn khi quy mô người dùng tăng đột biến. Nền tảng hứa hẹn mang lại giải pháp chuyển đổi số toàn diện cho lĩnh vực bán lẻ điện tử.

Nội dung chính

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

Trong bối cảnh công nghệ thông tin phát triển mạnh mẽ và nền kinh tế số ngày càng mở rộng, thương mại điện tử đã trở thành một trong những lĩnh vực then chốt thúc đẩy các hoạt động kinh doanh hiện đại. Xu hướng mua sắm trực tuyến gia tăng nhanh chóng, đặc biệt sau tác động của đại dịch COVID-19, đã định hình lại căn bản thói quen và hành vi tiêu dùng của khách hàng. Việc xây dựng nền tảng thương mại điện tử không chỉ đáp ứng yêu cầu kết nối nhanh chóng giữa doanh nghiệp với người tiêu dùng mà còn tối ưu hóa chi phí vận hành, mở rộng thị phần và nâng cao năng lực cạnh tranh. Tuy nhiên, các doanh nghiệp bán lẻ vẫn gặp nhiều thách thức trong việc nâng cao trải nghiệm người dùng, đảm bảo an toàn thông tin và ứng dụng các giải pháp công nghệ mới như trí tuệ nhân tạo. Xuất phát từ thực tiễn đó, đề tài "Xây dựng website bán thiết bị di động dùng React.js và Java Spring Boot" được thực hiện nhằm giải quyết bài toán chuyển đổi số cho mô hình kinh doanh bán lẻ thiết bị di động.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài được xác định theo các nội dung cụ thể:

1. Xây dựng một nền tảng bán hàng trực tuyến hỗ trợ tiếp cận khách hàng liên tục, tối ưu hóa các quy trình bán lẻ thiết bị di động.
2. Cải thiện trải nghiệm người dùng thông qua giao diện trực quan, các công cụ tìm kiếm, lọc sản phẩm theo danh mục và so sánh giá.
3. Cung cấp đầy đủ thông tin kỹ thuật chi tiết của sản phẩm bao gồm cấu hình, giá thành, chương trình khuyến mãi và chính sách bảo hành.
4. Tích hợp giải pháp trợ lý ảo (chatbot AI) để hỗ trợ phản hồi, tư vấn trực tiếp và hỗ trợ tra cứu thông tin sản phẩm tự động.
5. Tự động hóa quy trình quản lý đơn hàng, quản trị kho hàng, hỗ trợ thanh toán trực tuyến và thu thập dữ liệu phục vụ quản trị kinh doanh.

Đối tượng và phạm vi nghiên cứu:

• Đối tượng nghiên cứu: Nhu cầu mua sắm trực tuyến của người tiêu dùng; quy trình quản lý bán lẻ thiết bị di động của doanh nghiệp; các công nghệ và giải pháp kỹ thuật phần mềm bao gồm Java Spring Boot, kiến trúc RESTful API, hệ quản trị cơ sở dữ liệu PostgreSQL, thư viện ReactJS, chuẩn xác thực JSON Web Token (JWT), cùng các dịch vụ tích hợp Dialogflow, VNPay, Cloudinary và giao thức gửi thư SMTP.
• Phạm vi nghiên cứu:
  • Về công nghệ: Tập trung vào kiến trúc phân tách giữa tầng giao diện (Front-end) và tầng xử lý nghiệp vụ (Back-end) qua RESTful API; kết hợp lưu trữ dữ liệu trên hệ thống cơ sở dữ liệu quan hệ; tích hợp nền tảng Dialogflow phục vụ chatbot hỗ trợ điều hướng, tìm kiếm sản phẩm và kiểm tra tình trạng tồn kho; nghiên cứu mô hình lọc cộng tác (Collaborative Filtering - CF) để xây dựng chức năng gợi ý sản phẩm dựa trên lịch sử mua hàng.
  • Về thời gian và không gian: Đề tài được thực hiện từ ngày 19/08/2024 đến ngày 08/12/2024 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.

---

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

Đề tài vận dụng hệ thống lý luận về thương mại điện tử kết hợp với các nguyên lý thiết kế và công nghệ kỹ thuật phần mềm hiện đại nhằm giải quyết bài toán đặt ra.

Khung lý thuyết và công nghệ nền tảng

• Tổng quan thương mại điện tử: Đề tài tiếp cận các định nghĩa tiêu chuẩn từ Tổ chức Thương mại Thế giới (WTO) và Diễn đàn Hợp tác Kinh tế Châu Á - Thái Bình Dương (APEC), xác định thương mại điện tử là việc tiến hành hoạt động sản xuất, quảng cáo, phân phối, bán hàng và thanh toán thông qua mạng Internet và truyền thông số liệu. Khung lý thuyết làm rõ 4 nhóm lợi ích kinh tế: gia tăng cơ hội đạt lợi nhuận thông qua nắm bắt thông tin thị trường; cắt giảm chi phí sản xuất, chi phí văn phòng, mặt bằng và in ấn catalog; tiết kiệm thời gian giao dịch; và củng cố chiến lược phát triển quan hệ khách hàng.
• Java Spring Boot: Framework mã nguồn mở trên nền Java giúp tinh gọn quá trình cấu hình và xây dựng các dịch vụ web. Spring Boot cung cấp các tiện ích Spring Application tự động cấu hình (Auto-configuration), máy chủ nhúng (Embedded Server như Tomcat, Jetty, Undertow), quản lý cấu hình từ bên ngoài (Externalized Configuration), đa môi trường (Profiles), hệ thống ghi nhật ký linh hoạt (Logging tích hợp Logback, Log4j2, JDK) và công cụ giám sát Spring Boot Actuator. Kiến trúc nội bộ phân tách rõ ràng thành Controller (tiếp nhận HTTP request), Service (xử lý logic nghiệp vụ) và Repository (truy xuất cơ sở dữ liệu thông qua Spring Data JPA/Hibernate).
• PostgreSQL: Hệ quản trị cơ sở dữ liệu quan hệ - đối tượng (ORDBMS) mã nguồn mở, hoạt động dựa trên cấu trúc bộ nhớ dùng chung (Shared Memory), các tiến trình nền và tập tin dữ liệu. Hệ thống hỗ trợ xử lý dữ liệu phức tạp, tính toán mở rộng và đảm bảo tính toàn vẹn dữ liệu.
• RESTful API: Tiêu chuẩn kiến trúc giao tiếp phần mềm dựa trên giao thức HTTP, sử dụng cấu trúc định danh URL và các phương thức chuẩn (GET, POST, PUT, DELETE) tương ứng với chu trình thao tác CRUD (Create, Read, Update, Delete) trên tài nguyên hệ thống.
• ReactJS: Thư viện giao diện người dùng mã nguồn mở của Meta (Facebook), vận hành theo mô hình kiến trúc dựa trên thành phần (Component-Based Architecture), cú pháp mở rộng JSX, luồng dữ liệu một chiều (Unidirectional Data Flow) và cơ chế Virtual DOM giúp tối ưu hiệu năng render thông qua thuật toán so khớp (diffing). Thư viện triển khai các React Hooks (useState, useEffect, useContext) trong các Functional Component.
• JSON Web Token (JWT): Tiêu chuẩn mở RFC 7519 dùng cho việc xác thực và phân quyền không trạng thái (stateless). Chuỗi token gồm 3 phần: Header (thuật toán mã hóa), Payload (thông tin người dùng và quyền hạn), và Signature (chữ ký số bảo đảm toàn vẹn). Token được lưu trữ tại client và truyền tải qua HTTP Header dưới định dạng Authorization: Bearer <token>.

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

1. Phương pháp phân tích - khảo sát hiện trạng: Nghiên cứu và so sánh mô hình hoạt động, tính năng, ưu nhược điểm của 02 hệ thống bán lẻ thiết bị di động thực tế tại Việt Nam gồm FPT Shop và Thế giới di động (MWG).
2. Phương pháp mô hình hóa phần mềm: Sử dụng ngôn ngữ mô hình hóa hợp nhất (UML) để xây dựng hệ thống biểu đồ Use case, biểu đồ tuần tự (Sequence Diagram), biểu đồ hoạt động (Activity Diagram) và biểu đồ lớp (Class Diagram) nhằm chuẩn hóa các yêu cầu kỹ thuật và luồng dữ liệu.
3. Phương pháp tích hợp hệ thống: Kết nối và thực nghiệm các dịch vụ ngoài chuyên dụng phục vụ vận hành: Dialogflow (Chatbot AI), VNPay (Cổng thanh toán điện tử), Cloudinary (Lưu trữ tệp đa phương tiện đám mây) và giao thức SMTP (Hệ thống gửi thư điện tử tự động).

---

Thiết kế và triển khai

Hệ thống được thiết kế theo mô hình phân tầng độc lập (Decoupled Architecture), tách biệt giữa tầng hiển thị phía Client và tầng cung cấp dịch vụ phía Server, đảm bảo tính sẵn sàng, khả năng bảo trì và nâng cấp.

Thành phần	Công nghệ / Dịch vụ áp dụng	Chức năng kỹ thuật chính
Giao diện (Front-end)	ReactJS, Tailwind CSS	Xây dựng giao diện web đa phương tiện, xử lý các thành phần giao diện động, tương thích đa nền tảng và thiết bị di động.
Xử lý nghiệp vụ (Back-end)	Java Spring Boot, Spring Security, JPA/Hibernate	Xây dựng các RESTful API endpoint, kiểm soát logic bán hàng, xác thực tài khoản và quản lý giao dịch.
Lưu trữ (Database)	PostgreSQL	Lưu trữ cơ sở dữ liệu quan hệ cho toàn bộ hệ thống gồm sản phẩm, khách hàng, đơn hàng, danh mục, thương hiệu và giảm giá.
Xác thực & Bảo mật	JSON Web Token (JWT)	Đảm bảo tính toàn vẹn và phân quyền người dùng cho các API bảo mật.
Trợ lý ảo (Chatbot AI)	Dialogflow	Xử lý ngôn ngữ tự nhiên, hỗ trợ giải đáp thắc mắc, tìm kiếm sản phẩm và tra cứu tồn kho qua tin nhắn.
Lưu trữ đa phương tiện	Cloudinary	Quản lý và tối ưu hóa việc tải lên, lưu trữ hình ảnh sản phẩm.
Cổng thanh toán	VNPay	Xử lý thanh toán trực tuyến qua ngân hàng và thẻ tín dụng.
Dịch vụ thông báo	Giao thức SMTP	Gửi email thông báo tự động xác nhận đơn hàng và các hoạt động tài khoản.

Tiến trình thiết kế hệ thống được mô hình hóa qua các biểu đồ nghiệp vụ:

• Thiết kế tuần tự (Sequence Diagram): Xây dựng chi tiết 42 kịch bản tương tác giữa người dùng, thành phần giao diện, Controller, Service, Repository và Database (từ các chức năng cơ bản như đăng ký, đăng nhập, tìm kiếm, giỏ hàng, đặt hàng đến các nghiệp vụ quản trị danh mục, thương hiệu, sản phẩm, phiếu giảm giá và người dùng).
• Thiết kế luồng hoạt động (Activity Diagram): Tập trung vào 6 quy trình nghiệp vụ cốt lõi gồm: Đăng ký tài khoản, Đăng nhập hệ thống, Nhắn tin với chatbot, Quản lý đơn hàng, Thêm sản phẩm mới và Quy trình đặt hàng.
• Cấu trúc lớp (Class Diagram): Xác định các thực thể dữ liệu chính và mối quan hệ giữa chúng trong cơ sở dữ liệu quan hệ.

---

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

Chương 1: Mở đầu

Chương 1 làm rõ tính cấp thiết của đề tài trong kỷ nguyên thương mại điện tử và nhu cầu ứng dụng công nghệ cao vào ngành bán lẻ thiết bị di động sau dịch COVID-19. Tác giả xác định đối tượng nghiên cứu xoay quanh quy trình bán hàng, hành vi khách hàng và các công nghệ Java Spring Boot, ReactJS, PostgreSQL, JWT, Dialogflow, Cloudinary, SMTP. Phạm vi nghiên cứu tập trung vào kiến trúc RESTful API, tích hợp chatbot tra cứu sản phẩm/tồn kho và ứng dụng mô hình lọc cộng tác (Collaborative Filtering) trong việc gợi ý sản phẩm. Kết quả dự kiến đạt được là một website thương mại điện tử hoàn chỉnh, đa nền tảng, tích hợp đầy đủ các dịch vụ hỗ trợ trải nghiệm người dùng.

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

Nội dung chương 2 chia làm hai phần chính:

1. Lý thuyết thương mại điện tử: Khái quát các định nghĩa của WTO và APEC; phân tích 4 nhóm lợi ích kinh tế (cơ hội doanh thu, tiết giảm chi phí, giảm thiểu hoạt động in ấn và củng cố liên kết đối tác).
2. Công nghệ phát triển hệ thống: Trình bày kiến trúc và ưu nhược điểm của các công nghệ:
   • Framework Spring Boot: Cấu hình tự động, Spring Application, Profiles, Externalized Configuration, Logging, kiến trúc phân tầng Controller - Service - Repository.
   • Hệ quản trị PostgreSQL: Nguyên lý hoạt động dựa trên Shared Memory, tiến trình nền và hệ thống tệp tin; phân tích các ưu điểm về an toàn dữ liệu, mã nguồn mở và hạn chế trong các truy vấn đơn giản.
   • RESTful API: Nguyên lý hoạt động của các phương thức CRUD qua HTTP.
   • Thư viện ReactJS: Phân tích cơ chế Component, JSX, Virtual DOM, dữ liệu một chiều, React Hooks, cùng ưu điểm về hiệu năng và nhược điểm về sự phụ thuộc vào thư viện bên thứ ba.
   • Chuẩn JWT: Cấu trúc RFC 7519, quy trình sinh token, xác thực Bearer token, ưu điểm gọn nhẹ và hạn chế về kích thước cùng việc không thể thu hồi tức thì trước hạn.

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

Chương này đánh giá thực trạng thị trường qua việc khảo sát 02 website bán lẻ công nghệ hàng đầu tại Việt Nam:

Website khảo sát	Ưu điểm ghi nhận	Nhược điểm ghi nhận
FPT Shop	Thiết kế sáng tạo, thân thiện với người dùng (UX); chức năng tìm kiếm nhanh chóng, chuẩn xác; hình ảnh chất lượng cao kèm mô tả thông số chi tiết; giỏ hàng và quy trình thanh toán linh hoạt, hỗ trợ trả góp; tích hợp chatbot AI và Zalo.	Tốc độ tải trang đôi khi còn chậm, có thể gây ảnh hưởng đến trải nghiệm người dùng.
Thế giới di động	Giao diện trực quan, dễ thao tác; bộ lọc tìm kiếm đáp ứng đúng nhu cầu khách hàng theo hãng, mức giá; danh mục sản phẩm phân chia khoa học; hình thức thanh toán đa dạng; chính sách bảo hành rõ ràng.	Mật độ quảng cáo dày đặc chiếm diện tích hiển thị; màu sắc giao diện sặc sỡ; tốc độ tải trang tương đối chậm; phong cách thiết kế chủ yếu hướng tới đối tượng người dùng trẻ.

Từ kết quả khảo sát, nhóm tác giả đặc tả các yêu cầu hệ thống:

• Yêu cầu chức năng theo 3 nhóm tác nhân:
  • Quản trị viên (Admin): Quản lý danh mục, quản lý thương hiệu, quản lý sản phẩm, quản lý người dùng, quản lý đơn hàng, quản lý voucher/phiếu giảm giá (thêm, xóa, cập nhật), xử lý trạng thái đơn hàng và thống kê doanh thu theo tháng/quý/năm.
  • Khách vãng lai (Guest): Đăng ký tài khoản, đăng nhập, quên mật khẩu, xem danh sách sản phẩm phân trang, xem chi tiết sản phẩm, tìm kiếm theo tên, lọc sản phẩm theo danh mục/sắp xếp theo giá, nhắn tin với chatbot.
  • Thành viên (User): Toàn quyền sử dụng chức năng của Guest, quản lý giỏ hàng, quản lý danh sách yêu thích (wishlist), theo dõi tình trạng đơn đặt hàng, đánh giá và bình luận sản phẩm, đặt hàng và thanh toán trực tuyến, quản lý và cập nhật thông tin cá nhân, đổi mật khẩu.
• Yêu cầu phi chức năng: Khả năng mở rộng kiến trúc, khả năng bảo trì, khả năng tương thích nền tảng, đảm bảo quyền riêng tư và tuân thủ luật bảo mật, kiểm soát các ràng buộc tài nguyên hệ thống (tốc độ bộ xử lý, bộ nhớ, dung lượng đĩa, băng thông).
• Mô hình hóa: Xây dựng các sơ đồ Use case tổng thể và phân rã chi tiết, kèm theo 46 bảng đặc tả kịch bản Use case (Bảng 1 đến Bảng 46).

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

Chương 4 tập trung vào thiết kế động và tĩnh của hệ thống:

• Xây dựng 42 lược đồ tuần tự (Sequence Diagram) mô tả luồng thông điệp giữa Actor, View, Controller, Service, Repository và Database cho từng chức năng nghiệp vụ từ người dùng đến quản trị viên.
• Trình bày 6 lược đồ hoạt động (Activity Diagram) thể hiện các tiến trình nghiệp vụ chính: Đăng ký tài khoản, Đăng nhập hệ thống, Tương tác với chatbot, Quản lý đơn hàng người dùng, Thêm sản phẩm và Quy trình đặt hàng.
• Xây dựng lược đồ lớp (Class Diagram) tổng hợp các thực thể dữ liệu, định hình cấu trúc dữ liệu nền tảng cho việc cài đặt phần mềm.

Chương 5: Thiết kế giao diện

Chương 5 hiện thực hóa các yêu cầu thông qua thiết kế giao diện chi tiết, được ghi nhận qua hệ thống bảng đặc tả từ Bảng 47 đến Bảng 66:

• Phân hệ Client (Người dùng cuối): Thiết kế 14 giao diện thành phần gồm Giao diện đăng nhập, Giao diện đăng ký, Thanh điều hướng (khi chưa đăng nhập), Trang chủ, Trang lọc sản phẩm, Trang chi tiết sản phẩm, Trang thông tin cá nhân, Trang cập nhật thông tin cá nhân, Trang đổi mật khẩu, Danh sách yêu thích, Giỏ hàng, Thanh toán online (qua VNPay), Danh sách đơn hàng và Khung hội thoại nhắn tin với chatbot.
• Phân hệ Admin (Quản trị): Thiết kế 6 giao diện quản trị gồm Trang tổng quan (thống kê doanh thu, đơn hàng), Trang quản lý người dùng, Trang quản lý danh mục, Trang thêm danh mục, Trang quản lý sản phẩm và Trang thêm sản phẩm.

Chương 6: Cài đặt và kiểm thử

Chương này tổng kết hạ tầng kỹ thuật và thực nghiệm:

• Liệt kê các công cụ hỗ trợ xây dựng phần mềm và môi trường phát triển (Bảng 67).
• Tổng hợp các công nghệ sử dụng trong đồ án gồm ReactJS, Spring Boot, PostgreSQL, JWT, Dialogflow, VNPay, Cloudinary, SMTP (Bảng 68).
• Đặc tả yêu cầu cấu hình môi trường vận hành và các bước cài đặt hệ thống.
• Báo cáo kết quả kiểm thử chức năng (Bảng 69) nhằm đảm bảo các luồng xử lý dữ liệu và giao diện vận hành chính xác theo yêu cầu thiết kế.

Chương 7: Kết luận

Chương cuối tóm tắt các kết quả đạt được về mặt lý thuyết và thực tiễn, phân tích kiến thức đã tích lũy và đề xuất các định hướng nghiên cứu, phát triển tiếp theo của hệ thống.

---

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

Kế hoạch và tiến độ hoàn thành thực tế

Đồ án được thực hiện nghiêm ngặt theo kế hoạch 16 tuần đã đề ra trong đề cương:

Giai đoạn (Tuần)	Khoảng thời gian	Nhiệm vụ kỹ thuật	Kết quả đạt được
Tuần 1 - 2	19/08 – 01/09	Khảo sát hiện trạng, thu thập nhu cầu, xác định nền tảng.	Tài liệu đặc tả yêu cầu bài toán.
Tuần 3 - 4	02/09 – 22/09	Nghiên cứu PostgreSQL, thiết kế cấu trúc CSDL và Class Diagram.	Bản thiết kế database và lược đồ lớp.
Tuần 5 - 7	23/09 – 13/10	Tìm hiểu thư viện React, Tailwind CSS; xây dựng giao diện.	Bộ giao diện website hoàn chỉnh.
Tuần 8 - 10	14/10 – 03/11	Tìm hiểu Spring Boot, Spring Security, JPA/Hibernate; tích hợp JWT.	Hệ thống RESTful API endpoints và cơ chế xác thực phân quyền.
Tuần 11 - 13	04/11 – 17/11	Kết nối Front-end và Back-end qua hệ thống API.	Website hoạt động đồng bộ các chức năng cơ bản.
Tuần 14 - 15	18/11 – 01/12	Tích hợp dịch vụ Dialogflow (ChatBot), Cloudinary, SMTP.	Hệ thống tích hợp đầy đủ chatbot AI, lưu trữ ảnh và gửi email.
Tuần 16	02/12 – 08/12	Đánh giá, nghiệm thu và hoàn thiện báo cáo.	Tập báo cáo khóa luận tốt nghiệp hoàn chỉnh.

Kết quả kỹ thuật đạt được

• Xây dựng thành công hệ thống website thương mại điện tử chuyên biệt cho ngành hàng thiết bị di động, hoạt động ổn định trên các trình duyệt web và thiết bị di động.
• Xây dựng hệ thống 42 lược đồ tuần tự, 6 lược đồ hoạt động, hoàn thành việc cài đặt và kiểm thử chức năng của 46 ca sử dụng theo đặc tả.
• Hiện thực hóa đầy đủ các phân hệ chức năng cho Khách vãng lai, Người dùng thành viên và Quản trị viên (quản lý 6 danh mục chính: người dùng, sản phẩm, danh mục, thương hiệu, phiếu giảm giá và đơn hàng).
• Tích hợp thành công 4 dịch vụ chuyên biệt: cổng thanh toán VNPay, chatbot thông minh Dialogflow, dịch vụ lưu trữ hình ảnh Cloudinary và dịch vụ thông báo qua email SMTP.

---

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

Căn cứ theo phạm vi nghiên cứu và các nội dung đã ghi nhận trong văn bản khóa luận:

• Hạn chế:
  • Hệ thống vận hành theo kiến trúc dịch vụ tập trung phân tầng cơ bản, chưa chuyển dịch sang kiến trúc microservices phân tán phục vụ mở rộng quy mô lớn.
  • Tính năng chatbot AI thông qua Dialogflow và việc tích hợp mô hình Collaborative Filtering dựa trên lịch sử mua hàng mới dừng ở mức tích hợp dịch vụ nền tảng thử nghiệm, chưa tự chủ thuật toán học sâu chuyên biệt trên hệ thống nội bộ.
  • Tốc độ tải dữ liệu và tối ưu hóa tài nguyên phần cứng (bộ nhớ, dung lượng đĩa, băng thông mạng) cần tiếp tục hoàn thiện trong điều kiện dữ liệu lớn và truy cập đồng thời cao.
• Hướng phát triển:
  • Nghiên cứu và tối ưu hóa sâu hơn các mô hình ngôn ngữ lớn (LLM) để nâng cao năng lực phản hồi và cá nhân hóa của trợ lý ảo.
  • Mở rộng thuật toán gợi ý sản phẩm dựa trên các hành vi duyệt web nâng cao ngoài lịch sử mua sắm.
  • Tiếp tục hoàn thiện các kịch bản kiểm thử hiệu năng, bảo mật và bổ sung các phương thức thanh toán điện tử mới.

---

Giá trị tham khảo

Báo cáo khóa luận tốt nghiệp này là nguồn tài liệu hữu ích cho:

• Sinh viên ngành Công nghệ thông tin và Công nghệ phần mềm: Cung cấp tài liệu tham khảo thực tế về quy trình phát triển một dự án phần mềm thương mại điện tử từ khâu khảo sát, phân tích yêu cầu, mô hình hóa UML (Use case, Sequence, Activity, Class Diagram) đến lập trình cài đặt và kiểm thử.
• Người làm đề tài về hệ thống phân tách Front-end / Back-end: Cung cấp khung triển khai mẫu kết hợp giữa thư viện ReactJS (giao diện) và framework Java Spring Boot (RESTful API), cùng giải pháp phân quyền không trạng thái bằng JSON Web Token.
• Các nội dung đáng tham khảo nhất:
  • Hệ thống 46 bảng mô tả Use case chi tiết từ Bảng 1 đến Bảng 46.
  • Thiết kế luồng xử lý thông qua 42 lược đồ tuần tự (Sequence Diagram) và 6 lược đồ hoạt động (Activity Diagram).
  • Bản kế hoạch phân bổ tiến độ kỹ thuật chi tiết theo chu kỳ 16 tuần từ lúc chuẩn bị đến nghiệm thu sản phẩm.

---

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

1. Hệ thống sử dụng kiến trúc công nghệ nào cho hai tầng Front-end và Back-end?
Tầng Front-end được xây dựng bằng thư viện ReactJS kết hợp với Tailwind CSS nhằm tạo giao diện tương tác động và tương thích đa nền tảng. Tầng Back-end được phát triển bằng framework Java Spring Boot kết hợp Spring Security và Spring Data JPA/Hibernate, cung cấp các dịch vụ theo chuẩn RESTful API giao tiếp trực tiếp với cơ sở dữ liệu PostgreSQL.

2. Đề tài đã tích hợp những dịch vụ bên ngoài nào vào website bán hàng?
Hệ thống tích hợp 4 dịch vụ chính: Dialogflow của Google để xây dựng chatbot AI hỗ trợ tư vấn và kiểm tra tồn kho; VNPay phục vụ thanh toán trực tuyến qua thẻ tín dụng và ngân hàng; Cloudinary để lưu trữ và quản lý tập tin hình ảnh đa phương tiện; và giao thức SMTP để gửi email thông báo tự động đến người dùng.

3. Cơ chế xác thực và phân quyền trong hệ thống được thực hiện bằng giải pháp gì?
Hệ thống sử dụng chuẩn JSON Web Token (JWT - RFC 7519). Khi người dùng đăng nhập thành công, máy chủ Back-end sinh một chuỗi JWT chứa thông tin định danh và quyền hạn gửi về phía client. Client lưu token và đính kèm vào HTTP Header (Authorization: Bearer <token>) trong mọi yêu cầu tiếp theo để máy chủ xác thực tính hợp lệ của chữ ký mà không cần duy trì session trên server.

4. Phân hệ Quản trị viên (Admin) quản lý những thực thể dữ liệu nào?
Quản trị viên có toàn quyền thực hiện các thao tác thêm, xóa, cập nhật trên 6 thực thể chính: Người dùng, Sản phẩm, Danh mục, Thương hiệu, Phiếu giảm giá (voucher) và Đơn đặt hàng, đồng thời có thể quản lý trạng thái xử lý đơn hàng và theo dõi thống kê doanh thu theo tháng, quý, năm.

5. Đồ án được triển khai trong bao lâu và phân bổ các giai đoạn kỹ thuật như thế nào?
Đồ án thực hiện trong 16 tuần (từ ngày 19/08/2024 đến 08/12/2024), phân bổ thành các giai đoạn: Tuần 1-2 khảo sát yêu cầu; Tuần 3-4 thiết kế cơ sở dữ liệu và Class Diagram; Tuần 5-7 thiết kế giao diện ReactJS/Tailwind CSS; Tuần 8-10 phát triển API Spring Boot và xác thực JWT; Tuần 11-13 tích hợp kết nối Front-end và Back-end; Tuần 14-15 tích hợp các dịch vụ Dialogflow, Cloudinary, SMTP; và Tuần 16 nghiệm thu, hoàn thiện báo cáo.

---

Kết luận

Đồ án tốt nghiệp của sinh viên Nguyễn Minh Nhật và Phan Tân Tỵ dưới sự hướng dẫn của TS. Lê Vĩnh Thịnh đã hoàn thành toàn diện mục tiêu xây dựng website bán thiết bị di động sử dụng React.js và Java Spring Boot. Báo cáo thể hiện một quy trình kỹ thuật phần mềm bài bản từ khâu khảo sát hiện trạng thực tế, mô hình hóa chi tiết bằng hệ thống biểu đồ UML, đến thiết kế giao diện và cài đặt hệ thống RESTful API kết hợp cơ sở dữ liệu PostgreSQL. Bên cạnh các chức năng mua sắm và quản trị cốt lõi, công trình đã tích hợp thành công các tiện ích công nghệ như cổng thanh toán VNPay, chatbot thông minh Dialogflow, dịch vụ đám mây Cloudinary và gửi thư tự động qua SMTP. Đây là một tài liệu kỹ thuật có giá trị tham khảo thiết thực cho các nghiên cứu và dự án phát triển phần mềm thương mại điện tử tương tự.

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

MỞ ĐẦU 1.1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI Trong bối cảnh công nghệ thông tin phát triển mạnh mẽ, thương mại điện tử đang trở thành một trong những lĩnh vực trọng điểm thúc đẩy nền kinh tế số. Xu hướng mua sắm trực tuyến ngày càng gia tăng, đặc biệt sau tác động của đại dịch COVID-19, đã thay đổi đáng kể hành vi tiêu dùng của người dân. Việc xây dựng các website thương mại điện tử không chỉ đáp ứng nhu cầu kết nối nhanh chóng giữa doanh nghiệp và khách hàng mà còn giúp tối ưu hóa chi phí vận hành, mở rộng thị trường và nâng cao tính cạnh tranh. Tuy nhiên, nhiều doanh nghiệp vẫn đối mặt với thách thức về trải nghiệm người dùng, bảo mật thông tin và tích hợp các công nghệ tiên tiến như AI, Big Data.

Do đó, nghiên cứu và phát triển một hệ thống website thương mại điện tử hiệu quả, đáp ứng các yêu cầu hiện đại, là vấn đề cấp thiết, đóng vai trò quan trọng trong việc nâng cao năng lực cạnh tranh và phát triển bền vững của doanh nghiệp trong thời kỳ hội nhập quốc tế. Nhận thấy nhu cầu thực tế và những lợi ích mà học thương mại điện tử mang lại, nhóm sinh viên đã quyết định lựa chọn đề tài “Xây dựng website bán thiết bị di động ”.Mục tiêu của đề tài là đáp ứng nhu cầu kinh doanh và nâng cao trải nghiệm của khách hàng trong thời đại số hóa. Trước tiên, website giúp tăng doanh thu bằng cách cung cấp nền tảng mua sắm trực tuyến tiện lợi, cho phép tiếp cận khách hàng mọi lúc, mọi nơi. Đồng thời, nó đóng vai trò quan trọng trong việc cải thiện trải nghiệm người dùng thông qua giao diện thân thiện, tính năng tìm kiếm sản phẩm, so sánh giá và đặt hàng dễ dàng.

Bên cạnh đó, website còn là công cụ quảng bá thương hiệu hiệu quả, giúp tăng cường uy tín và sự nhận diện của doanh nghiệp thông qua thiết kế chuyên nghiệp và nội dung hấp dẫn. Ngoài việc cung cấp thông tin sản phẩm chi tiết như cấu hình, giá cả, khuyến mãi và chính sách bảo hành, website còn hỗ trợ tương tác trực tiếp với khách hàng thông qua chatbot và tư vấn trực tuyến. Không chỉ giúp tối ưu hóa quy trình bán hàng với các tính năng quản lý đơn hàng, tồn kho và thanh toán tự động, website còn thu thập và phân tích dữ liệu hành vi khách hàng để xây dựng chiến lược tiếp thị hiệu quả. Hơn nữa, đây cũng là công cụ hỗ trợ đắc lực cho các chiến dịch marketing và khuyến mãi nhằm thu hút và giữ chân khách hàng lâu dài.2 ĐỐI TƯỢNG NGHIÊN CỨU Đối với đề tài này, đối tượng nghiên cứu dựa trên nhu cầu mua sắm trực tiếp của khách hàng ,nhu cầu của các doanh nghiệp bán lẻ thiết bị di động, các dòng sản phẩm và dịch vụ,nhà phát triển và thiết kế website.

Đồng thời nghiên cứu các công nghệ áp dụng để tạo ra website. Cụ thể như sau: Tập trung nghiên cứu Spring boot, Restful API để xây dựng nên hệ thống các APIs hỗ trợ lấy dữ liệu một cách chính xác và nhanh chóng nhất. Tìm hiểu ,sử dụng hệ thống quản trị cơ sở dữ liệu mã nguồn mở để lưu trữ dữ trên hệ thống. Tìm hiểu, sử dụng thư viện ReactJS để thiết kế và xây dựng giao diện website cho người dùng cuối tương tác với hệ thống.

Tìm hiểu dịch vụ smtp để thực hiện gửi email thông báo cho người dùng Tìm hiểu dịch vụ Dialogflow để tích hợp vào tính năng ChatBot. Tìm hiểu, sử dụng dịch vụ Cloudinary để update các file lên cloud.