Báo cáo đề tài: Xây dựng website bán balo bằng Spring Boot và ReactJS

Đề tài xây dựng website bán balo sử dụng Spring Boot và ReactJS. Báo cáo đầy đủ kèm source code tham khảo cho sinh viên ngành Công nghệ thông tin.

• Tác giả: Nguyễn Đức Mạnh
• Người hướng dẫn: TS. Lê Văn Vinh
• Trường học: Trường Đại học Sư phạm Kỹ thuật TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ phần mềm
• Đề tài: Xây dựng website bán balo sử dụng Spring Boot và ReactJS
• Loại tài liệu: Tiểu luận chuyên ngành
• Năm xuất bản: 2022
• Địa điểm: Hồ Chí Minh

Tóm tắt

I. Giới thiệu về Dự án Website Bán Balo với Spring Boot và ReactJS

Dự án website bán balo sử dụng Spring Boot và ReactJS là một tiểu luận chuyên ngành của sinh viên Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật TP. HCM. Đây là một ứng dụng thương mại điện tử hoàn chỉnh kết hợp công nghệ backend mạnh mẽ với frontend hiện đại. Mục tiêu chính của dự án là xây dựng một nền tảng bán balo chuyên nghiệp, cung cấp trải nghiệm mua sắm tối ưu cho người dùng. Dự án áp dụng các công nghệ tiên tiến bao gồm Spring Boot cho phía server, ReactJS cho giao diện người dùng, MySQL cho cơ sở dữ liệu, và Json Web Token để xác thực an toàn. Thời gian thực hiện dự án kéo dài từ tháng 8 đến tháng 12 năm 2022, với sự hướng dẫn của TS. Lê Văn Vinh. Dự án này không chỉ là một bài tập học tập mà còn là một sản phẩm thực tiễn có thể triển khai trong kinh doanh thực tế.

1.1. Tính Cấp Thiết của Dự án

Nhu cầu về mua sắm trực tuyến ngày càng tăng, đặc biệt là các sản phẩm balo chất lượng cao. Việc xây dựng một website thương mại điện tử chuyên biệt giúp doanh nghiệp tiếp cận khách hàng rộng hơn. Dự án sử dụng Spring Boot và ReactJS là lựa chọn phù hợp vì hiệu năng cao, khả năng mở rộng tốt, và có cộng đồng hỗ trợ lớn.

1.2. Ứng dụng Thực tiễn

Website bán balo này có thể được triển khai thực tế cho các cửa hàng bán balo. Nó hỗ trợ quản lý sản phẩm, đơn hàng, khách hàng một cách hiệu quả. Khách hàng có thể dễ dàng tìm kiếm, so sánh, mua sắm các loại balo với giao diện thân thiện.

II. Kiến Trúc Công Nghệ và Stack Công Nghệ Sử dụng

Dự án website bán balo sử dụng kiến trúc Client-Server hiện đại với sự phân tách rõ ràng giữa frontend và backend. Frontend được xây dựng bằng ReactJS, một thư viện JavaScript mạnh mẽ giúp tạo giao diện người dùng động và responsive. Backend sử dụng Spring Boot, một framework Java cho phép phát triển ứng dụng web nhanh chóng với các tính năng tích hợp sẵn. Cơ sở dữ liệu MySQL lưu trữ toàn bộ thông tin sản phẩm, khách hàng, và đơn hàng. Json Web Token (JWT) được áp dụng để bảo mật và xác thực người dùng. Kiến trúc này đảm bảo hiệu năng cao, bảo mật tốt, và dễ bảo trì. Sự kết hợp này tạo ra một ứng dụng web scalable và đáng tin cậy.

2.1. Spring Boot Backend Framework

Spring Boot là một framework Java giúp phát triển ứng dụng web một cách nhanh chóng. Nó cung cấp các tính năng tích hợp như quản lý dependency, cấu hình tự động, và REST API support. Spring Boot cho phép developers tập trung vào logic kinh doanh thay vì cấu hình phức tạp. Nó hỗ trợ tuyệt vời cho xây dựng API RESTful mà ReactJS có thể gọi để lấy dữ liệu.

2.2. ReactJS Frontend Library

ReactJS là thư viện JavaScript phổ biến nhất hiện nay để xây dựng giao diện người dùng. Nó cho phép tạo component tái sử dụng, quản lý state hiệu quả, và cập nhật giao diện một cách mượt mà mà không cần tải lại trang. ReactJS giúp tạo ra trải nghiệm người dùng nhanh chóng và mềm mại trên website bán balo.

2.3. MySQL và Json Web Token

MySQL là hệ quản trị cơ sở dữ liệu mạnh mẽ và đáng tin cậy cho lưu trữ dữ liệu. JWT (Json Web Token) cung cấp cơ chế xác thực an toàn, hiệu quả cho phép người dùng đăng nhập và truy cập các tính năng cá nhân hóa mà không cần lưu session phức tạp.

III. Phân Tích Yêu Cầu và Mô Hình Hóa Hệ Thống

Quá trình phân tích yêu cầu là bước quan trọng trong phát triển website bán balo. Nhóm đã khảo sát các website cạnh tranh như 'Saigon Swagger' để hiểu rõ các tính năng cần thiết và cải thiện trải nghiệm người dùng. Yêu cầu chức năng bao gồm: quản lý sản phẩm balo, giỏ hàng, đơn hàng, tài khoản người dùng, và bảng điều khiển quản trị viên. Dự án sử dụng mô hình Use Case để minh họa các kịch bản tương tác giữa người dùng và hệ thống. Sơ đồ lớp được thiết kế để biểu diễn cấu trúc dữ liệu và mối quan hệ giữa các thực thể. Lược đồ tuần tự mô tả quy trình đăng nhập, đăng ký, và cập nhật thông tin. Việc mô hình hóa kỹ lưỡng đảm bảo hiểu rõ vấn đề trước khi bước vào cài đặt.

3.1. Khảo Sát Hiện Trạng và Xác định Chức năng

Nhóm đã khảo sát các website bán balo hiện tại để xác định tính năng thiếu và cơ hội cải thiện. Các chức năng chính được xác định bao gồm: hiển thị sản phẩm, tìm kiếm, lọc theo danh mục, quản lý giỏ hàng, thanh toán, và theo dõi đơn hàng. Yêu cầu phi chức năng như hiệu năng, bảo mật, và khả năng mở rộng cũng được xem xét kỹ lưỡng.

3.2. Mô Hình Use Case và Sơ Đồ Lớp

Sơ đồ Use Case minh họa hai loại người dùng: khách hàng và quản trị viên. Khách hàng có thể duyệt, tìm kiếm, mua hàng, và theo dõi đơn hàng. Quản trị viên có quyền quản lý sản phẩm, đơn hàng, và người dùng. Sơ đồ lớp thể hiện các đối tượng như Product, Cart, Order, User và mối quan hệ giữa chúng.

3.3. Lược Đồ Tuần Tự cho Các Quy Trình Chính

Lược đồ tuần tự mô tả chi tiết quy trình đăng nhập: người dùng gửi thông tin đăng nhập, Spring Boot xác thực, phát hành JWT token, trả về frontend. Quy trình đăng ký tương tự nhưng thêm lưu user vào database. Cập nhật thông tin đòi hỏi xác thực JWT trước.

IV. Cài Đặt Kiểm Thử và Kết Quả Dự Án

Giai đoạn cài đặt bắt đầu sau khi hoàn thành thiết kế website bán balo. Backend Spring Boot được phát triển với các REST API endpoints để xử lý yêu cầu từ ReactJS frontend. Database MySQL được tạo với các bảng quan hệ lưu trữ thông tin sản phẩm, người dùng, và đơn hàng. Frontend ReactJS xây dựng các component như ProductList, ProductDetail, Cart, Checkout, và AdminDashboard. Json Web Token được tích hợp để bảo vệ các API endpoint nhạy cảm. Quá trình kiểm thử (testing) bao gồm unit testing, integration testing, và user acceptance testing. Kết quả đạt được là một ứng dụng hoàn chỉnh, có thể triển khai thực tế. Dự án đã thành công trong việc kết hợp Spring Boot và ReactJS tạo ra một website bán balo chuyên nghiệp với trải nghiệm người dùng tốt và quản trị viên hiệu quả.

4.1. Yêu Cầu Hệ Thống và Môi Trường Phát Triển

Dự án yêu cầu Java JDK 8+ để chạy Spring Boot. Node.js và npm cần thiết cho phát triển ReactJS. MySQL Server phải được cài đặt để quản lý cơ sở dữ liệu. IDE như IntelliJ hoặc Eclipse cho backend, Visual Studio Code cho frontend. Git được sử dụng để quản lý phiên bản code. Các bước cài đặt đơn giản, dễ theo dõi.

4.2. Các Bước Cài Đặt và Triển Khai

Bước 1: Clone repository và cài đặt dependencies. Bước 2: Cấu hình database MySQL. Bước 3: Chạy Spring Boot server trên port 8080. Bước 4: Chạy ReactJS development server trên port 3000. Bước 5: Kiểm tra kết nối API và giao diện người dùng. Bước 6: Thực hiện kiểm thử các chức năng chính. Các bước được tài liệu hóa rõ ràng.

4.3. Kết Quả Đạt Được và Nhược Điểm

Dự án thành công hoàn thành tất cả các chức năng dự kiến. Giao diện ReactJS đẹp, responsive trên mobile và desktop. Backend Spring Boot xử lý request nhanh chóng. Bảo mật JWT hoạt động tốt. Nhược điểm: có thể cải thiện tìm kiếm và lọc sản phẩm nâng cao hơn, thêm tính năng review sản phẩm, wishlist. Dự án là nền tảng vững chắc cho phát triển tiếp theo.

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

PHẦN MỞ ĐẦU 1. Tính cấp thiết của đề tài Trong bối cảnh hiện nay, với sự phát triển của công nghệ và thông tin nhanh chóng và luôn đổi mới hằng ngày. Và sự ảnh hưởng của dịch Covid trong những năm vừa qua. Thì internet đang trở thành xu hướng mới trong việc mua bán hàng hóa và trao đổi thông tin.

Và trong bối cảnh đó, nhu cầu mua sắm của khách hàng trở nên cao hơn và tiêu chuẩn mua sắm cũng phải phù hợp với yêu cầu của người dùng. Đó là những vấn đề nan giải của các doanh nghiệp kinh doanh. Với ý tưởng của nhóm, thì việc xây dụng một trang web cung cấp thông tin và mua bán sản phẩm và ở đây là cung cấp và bán balo là cần thiết đối với một doanh nghiệp hay một cửa hàng buôn bán balo. Với việc khách hàng có thể nhanh chóng lựa chọn sản phẩm phù hợp với nhu cầu, với giá tiền thì một trang web bán balo có thể nhanh chóng giải quyết điều đó.

Người dùng có thể thoải mái lựa chọn, mua sắm của mình mọi lúc và mọi nơi. Cũng như về phía cung cấp có thể lựa chọn trang web là nơi quảng bá các sản phẩm. Và hơn thế nữa việc quản lý các đơn hàng và chi phí doanh thu cũng trở nên dễ dàng hơn. Việc có một ứng dụng web bán hàng sẽ tiết kiệm thời gian và nguồn lực rất nhiều đối với cả khách hàng và doanh nghiệp.

Mục tiêucủa đề tài Đề tài “Xây dụng website bán balo” sẽ bao gồm các mục tiêu sau:  Xây dụng một website cho phép người dùng có thể tìm kiếm, xem thông tin và đặt mua các sản phẩm balo trong thời gian trực tuyến ở bắt kỳ thời điểm và thời gian nào. Và sau đó người dùng có thể theo dõi và để lại bình luận đánh giá với các sản phẩm đã mua  Website có giao diện thân thiện với người dùng và có tốc độ xử lý nhanh chóng cũng như bảo mật thông tin cho người dùng  Xây dụng hệ thống quản lý ở phía doanh nghiệp hay cửa hà ng. Đối tượng nghiên cứu Đề tài này có mục tiêu chính đó là nghiên cứu về kiến thức quản lý thực tiễn và vận hành hệ thống kinh doanh các sản phẩm balo và các công nghệ được áp dụng để thực hiện sản phẩm đó. Trong đó với đối tượng nghiên cứu công nghệ ứng dụng nhóm sẽ nghiên cứ về RESTful API, Spring Boot, MySQL và JWT để xây dựng hệ thống các API để thực hiện thao tác truy xuất dữ liệu một cách an toàn, chính xác, bảo mật cũng như nhánh chóng nhất.

Cũng như nghiên cứu về ReacJS và các thư viện hỗ trợ thiết kế giao diện để thiết kế một giao diện đẹp mắt và thân thiện với người dùng 4. Phạmvi nghiên cứu Đối với phạm vi nghiên cứu, nhóm quyết định nghiên cứu đề tài để phát triển trang web với một số tác vụ cơ bản của website bán hàng như là: xem danh sách và chi tiết các sản phẩm, tìm kiếm và lọc sản phẩm, thêm sản phẩm vào giỏ hàng, quản lý giỏ hàng, đặt hàng và thanh toán, … 5. Phân công THÀNH VIÊN CÔNG VIỆC - Thiết kế cơ sở dữ liệu - Xây dựng Back – End Phạm Văn Thắng - Vẽ Diagram - Viết báo cáo - Thiết kế giao diện - Xây dựng Front – End Nguyễn Đức Mạnh - Vẽ Diagram - Viết báo cáo 14 PHẦN NỘI DUNG CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1. Giới thiệu ReacJS là một thư viện JavaScript được ra mắt vào năm 2013.

ReacJS được phát triển bởi Facebook và nó được sử dụng để phát triển ứng dụng web và các ứng dụng trên nền tảng di động. [1] Điểm mạnh của ReacJS là cho phép lập trình viên viết HTML trực tiếp lên JavaScript thông qua cú pháp JSX. V ậy nên lập trình viên có thể lập trình và kiểm tra kết quả thông qua việc đưa đoạn HTML vào JavaScript. ReacJS cho phép người lập trình viên tạo ra các Component và có thể lồng nhiều Component vào nhau thông qua lệnh return của phương thức render.

Điều này có thể giúp chúng ta tổ chức code trở nên dễ dàng hơn và chúng ta có thể tái sử dụng code giảm thiểu thời gian code không cần thiết. Ưu điểm ReacJS cho phép việc thực hiện viết các đoạn code Javacript trở nên đễ dàng hơn nhờ sử dụng một cú pháp đặ c biệt đó là JSX. Người dùng có thể thực hiện nhúng các đoạn HTML và JavaScript thông qua JSX. [1] ReacJS cho phép phá vỡ những cấu trúc, cấu tạo UI phức tạp thành những Component độc lập và có thể tái sử dụng chúng ở nhiều nơi.

[1] ReacJS hỗ trợ công cụ giúp việc debug code trở nên đơn giản, dễ dàng hơn 1. Giới thiệu Spring framework là một framework của nền tảng Java với mã nguồn mở dùng để phát triển các ứng dụng Java. Ban đầu nó được viết bỏi Rod Johnson và đước cấp 15 giấy phép vào năm 2013. Spring framework được phát triển để xây dựng nhiều ứng dụng Java nhưng chủ yếu Spring framework được sử dụng để phát triển các ứng dụng web trên nền tảng Java EE.

[2] Spring cho phép xây dựng các ứng dụng từ “plain old Java objects” (POJOs) và cho áp dụng quy định dịch vu không xâm phạm vào các POJO. Ưu điểm Ưu điểm của Spring là có dung lượng nhẹ chỉ khoảng 2MB và vì là mã nguồn mở nên nó giúp cho việc phát triển các ứng dụng Java trở nên đơn giả n hóa. [2] Spring framework sử dụng các design parttern Dependency Injection hoặc Inversion of Control. Vì vậy các component sẽ được tách rời và được sử dụng độc lập với nhau nên sẽ giúp cho việc tổ chức code trở nên gọn gàng và rút ngắn thời gian code cũng như dễ dàng bảo trì sau này.

[2] Spring framework chia thành các module riêng biệt cho nên việc sử dụng features rất tự do. [2] Spring framework hỗ trợ gần như hầu hết các tính năng của Java EE và nhiều tính năng mới khác. Spring Boot Spring Boot là một module của Spring Framework. Nó được phát triển bởi đội ngũ lập trình Pivotal và được sử dụng để phát triển các ứng dụng độc lập.

Nhờ tính gọn nhẹ nên Spring Boot giúp cho vi ệc lập trình trở nên dễ dàng hơn. Spring Boot sẽ tự động cấu hình Spring dựa vào các dependencies mà trước đó đã được cấu hình thêm vào dự án. Ngoài ra các service như là Tomcat và Jetty cũng được nhúng vào ứng dụng nên vì thế ứng dụng có thể chạy ở bất cứ đâu nhằm giải quyết vấn đề cấu hình sau này. Giới thiệu MySQL là một hệ quản trị cơ sở dữ liệu có tốc độ xử lý nhanh được sử dụng phổ biến trong các ứng dụng lớn và nhỏ khác nhau.

MySQL được phát triển và hỗ trợ bởi một công ty Thụy Điển. [4] MySQL được phát hành với giấy phép mã nguồn mở vậy nên nó là miễn phí đối với các lập trình viên và các doanh nghiệp. MySQL được phát triển dựa trên dạng chuẩn của ngôn ngữ dữ liệu SQL. Ưu điểm Nhờ việc thực thi các lệnh theo một tiêu chuẩn giúp cho MySQL có tốc độ xử lý nhanh và cũng như việ c tiết kiệm được chi phí.

MySQL hỗ trợ lên đến 50 triệu hàng hoặc nhiều hơn và có thể đạt tới giới hạn kích tước là 8 terabyte và vẫn có thể hoạt động tốt cho dù xử lý các tập lệnh hay dữ liệu lớn MySQL hoạt động tốt trên nhiều nền tảng khác nhau và có thể kết hợp tốt với nhiều ngôn ngữ như PHP, Java, C, C++, … Do là mã nguồn mở nên lập trình viên có thể cấu hình MySQL cho phù hợp với nhiều dự án khác nhau giúp cho việc các ứng dụng trở nên nhanh chóng và tiết kiệm được chi phí. Json Web Token JSON Web Token (JWT) là một tiêu chuẩn mở ( RFC 7519) định nghĩa cách thức truyền tin an toàn giữa các thành viên bằng 1 đối tượng JSON. Thông tin này có thể được xác thực và đánh dấu tin cậy nhờ vào “chữ ký” của nó. Phần chữ ký của JWT sẽ được mã hóa lại bằng HMAC hoặc RSA.

JSON Web Token bao gồm 3 phần, được ngăn cách nhau bởi dấu chấm: header, payload, signature. [5] Trong việc Authentication, sau khi người dùng đăng nhậ p thành công thì mã thông báo web JSON sẽ được gửi lại về phía người dùng và mã truy cập này là bảo 17 mật. Bất cứ khi nào người dùng muốn truy cập vào tài nguyên nào thì người dùng cũng phải cung cấp JWT cho phía máy chủ. Máy chủ chịu trách nhiệm kiểm tra thông tin JWT có hợp lệ hay không và trả lại dữ liệu cho người dùng nếu hợp lệ.

[5] Trong JWT thường chứa các dữ liệu cần thiết cho việc Authorization và vì thông tin JWT khánhỏ (khoảng 8KB) nên khi cấu hình JWT chúng ta nên ngăn chặ n không để chúng quá lớn giúp cho việc xử lý trở nên nhanh chóng. [5] Vì JSON it dài dòng hơn XML và kích thước sau khi mã hóa cũng vậy cho nên việc sử dụng JWT trở thành một lựa chọn tốt trong thời điểm hiện nay. 18 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 2. Khảo sát hiện trạng 2.

Website "Saigon Swangger” Link: https://saigonswagger. Website "Saigon Swangger” - Các chức năng chính:  Giao diện hiển thị sản phẩm theo từng danh mục.  Tìm kiếm sản phảm theo tên.  Đăng nhập, đăng ký.

 Đặt hàng, giỏ hàng, thanh toán sản phẩm  Xem thông tin tài khoản.  Xem lịch sử mua hàng. - Ưu điểm:  Thanh toán bằng nhiều phương thức  Giao diện đơn giản, trực quan, người mới dễ dàng sử dụng.  Mặt hàng đa dạng.

19 - Nhược điểm:  Không có chức năng chat trực tiếp với cửa hàng.  Trong giỏ hàng không có chức năng xóa sản phẩm.  Không có chức năng lọc sản phẩm theo yêu cầu (giá, phân loại,. Website “balohanghieu” Link: https://balohanghieu.

Các chức năng chính:  Giao diện hiển thị sản phẩm theo từng danh mục.  Tìm kiếm sản phảm theo tên.  Đặt hàng, giỏ hàng, thanh toán sản phẩm.  Lọc sản phẩm 2.

Ưu điểm:  Giao diện đơn giả n, trực quan, người mới dễ dàng sử dụng.  Mặt hàng đa dạng.  Lọc sản phẩm theo yêu cầu: thương hiệu, chất liệu, … 2. Nhược điểm:  Không có chức năng thanh toán online.

 Không tạo tài khoản và lưu thông tin tài khoả n.  Không có chức năng chat trực tiếp với cửa hàng. Website “balocenter” Link: https://balocenter. Các chức năng chính:  Giao diện hiển thị sản phẩm theo từng danh mục.

 Đăng nhập, đăng ký.  Tìm kiếm sản phảm theo tên.  Đặt hàng, giỏ hàng, thanh toán sản phẩm.  Lọc sản phẩm 2.