Toàn văn Đồ án tốt nghiệp: Xây dựng Website bán hàng bằng ReactJS & Spring Boot

Toàn văn đồ án tốt nghiệp xây dựng website bán hàng với ReactJS và Spring Boot. Báo cáo chi tiết, đầy đủ chức năng, là tài liệu tham khảo hữu ích.

• Tác giả: Phan Văn Trí
• Người hướng dẫn: ThS. Nguyễn Minh Đạo
• 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ệ Phần Mềm
• Đề tài: Xây Dựng Website Bán Hàng (Spring Boot & ReactJS)
• Loại tài liệu: Khóa Luận Tốt Nghiệp
• Năm xuất bản: 2020
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Tốt Nghiệp Website Bán Hàng

Đồ án tốt nghiệp website bán hàng là một trong những dự án thực tế quan trọng nhất trong quá trình đào tạo kỹ sư công nghệ thông tin. Dự án này kết hợp hai công nghệ hiện đại: Spring Boot ở phía backend và ReactJS ở phía frontend, tạo nên một ứng dụng web thương mại điện tử hoàn chỉnh. Với sự phát triển nhanh chóng của thương mại điện tử, việc xây dựng một nền tảng bán hàng trực tuyến không chỉ giúp sinh viên nắm vững kiến thức lý thuyết mà còn phát triển kỹ năng thực tiễn cần thiết trong ngành công nghệ thông tin. Đồ án này đóng vai trò quan trọng trong việc chuẩn bị sinh viên cho thị trường lao động hiện đại.

1.1. Định Nghĩa Và Mục Đích Của Dự Án

Mục đích chính của đồ án là xây dựng một website bán hàng hoàn chỉnh với các chức năng core như quản lý sản phẩm, giỏ hàng, thanh toán, và quản lý người dùng. Dự án áp dụng kiến trúc hiện đại với backend RESTful API và frontend responsive design. Sinh viên được rèn luyện kỹ năng phát triển ứng dụng web, quản lý cơ sở dữ liệu, và triển khai hệ thống thực tế.

1.2. Tầm Quan Trọng Trong Đào Tạo CNTT

Đồ án website bán hàng là cơ hội để sinh viên tích hợp toàn bộ kiến thức đã học: Spring Boot, ReactJS, MySQL, Firebase, và API RESTful. Đây là bước chuẩn bị thiết yếu giúp sinh viên tự tin bước vào thế giới công việc chuyên nghiệp, nắm rõ quy trình phát triển phần mềm thực tế.

II. Công Nghệ Sử Dụng Trong Đồ Án Website Bán Hàng

Để xây dựng một website bán hàng chuyên nghiệp, đồ án sử dụng các công nghệ tiên tiến được lựa chọn kỹ lưỡng. Spring Boot là framework phía backend được ưa chuộng nhất hiện nay, cung cấp giải pháp hoàn hảo cho việc xây dựng API RESTful mạnh mẽ. ReactJS là thư viện JavaScript frontend đẳng cấp, giúp tạo nên giao diện responsive và tương tác cao. MySQL đảm nhận vai trò lưu trữ dữ liệu quan trọng, còn Google Firebase hỗ trợ xác thực người dùng và lưu trữ hình ảnh. Sự kết hợp này tạo nên một stack công nghệ hoàn chỉnh cho ứng dụng thương mại điện tử.

2.1. Spring Boot Framework Backend Mạnh Mẽ

Spring Boot giúp sinh viên xây dựng backend API một cách nhanh chóng và hiệu quả. Framework này cung cấp Spring JPA để làm việc với cơ sở dữ liệu, Spring Security để bảo mật ứng dụng, và tính năng tự động cấu hình. Sinh viên sẽ hiểu sâu về xây dựng API RESTful, xác thực JWT, và xử lý lỗi trong ứng dụng.

2.2. ReactJS Thư Viện Frontend Hiện Đại

ReactJS với Hooks giúp xây dựng giao diện người dùng động và hiệu quả. Sinh viên học cách quản lý state management, xử lý forms, và tối ưu hóa performance. ReactJS cho phép tạo nên các component tái sử dụng, giúp code trở nên sạch sẽ và dễ bảo trì hơn.

2.3. MySQL Firebase Và Cơ Sở Dữ Liệu

MySQL lưu trữ dữ liệu chính của ứng dụng như thông tin sản phẩm, người dùng, đơn hàng. Google Firebase cung cấp dịch vụ xác thực, lưu trữ hình ảnh, và hỗ trợ đăng nhập qua Google, Facebook. Sự phối hợp này tạo nên một hệ thống bảo mật và tin cậy.

III. Các Chức Năng Chính Của Website Bán Hàng

Một website bán hàng hoàn chỉnh phải có các chức năng thiết yếu để phục vụ cả người mua và người bán. Chức năng quản lý sản phẩm cho phép hiển thị chi tiết sản phẩm, danh mục giúp người dùng dễ tìm kiếm. Giỏ hàng được lưu trữ bằng localStorage cho phép người dùng thêm/xóa sản phẩm linh hoạt. Hệ thống tài khoản với đăng ký, đăng nhập, đổi mật khẩu đảm bảo bảo mật. Chức năng thanh toán và gửi email thông báo hoàn thiện trải nghiệm mua sắm. Admin có dashboard quản lý sản phẩm, danh mục, và người dùng. Google Map API hiển thị địa chỉ cửa hàng trực tuyến.

3.1. Chức Năng Quản Lý Sản Phẩm Và Giỏ Hàng

Quản lý sản phẩm cho phép hiển thị danh sách sản phẩm mới và chi tiết sản phẩm đầy đủ. Giỏ hàng sử dụng localStorage để lưu trữ cục bộ, giúp người dùng tăng/giảm số lượng sản phẩm một cách mềm mại. Tính năng này cải thiện trải nghiệm người dùng đáng kể.

3.2. Hệ Thống Tài Khoản Và Xác Thực

Đăng ký, đăng nhập, đổi mật khẩu được bảo vệ bằng JWT token và Spring Security. Hỗ trợ xác thực qua Google, Facebook thông qua Google Firebase. Người dùng có thể cập nhật địa chỉ giao hàng và số điện thoại trong tài khoản.

3.3. Admin Dashboard Và Quản Lý Nội Dung

Admin panel cung cấp quyền thêm, sửa, xóa danh mục, sản phẩm, và người dùng. Upload hình ảnh lên Firebase Storage giúp quản lý hình ảnh tập trung. Google Map hiển thị địa chỉ cửa hàng, tăng tính chuyên nghiệp.

IV. Quá Trình Phát Triển Và Kỹ Năng Đạt Được

Quá trình thực hiện đồ án website bán hàng kéo dài khoảng 16 tuần với lịch trình chi tiết từ giai đoạn lập kế hoạch, thiết kế đến kiểm thử. Sinh viên bắt đầu bằng xác định chức năng và phác thảo ý tưởng, tiếp theo là thiết kế cơ sở dữ liệu MySQL. Giai đoạn phát triển backend với Spring Boot và API RESTful kéo dài từ tuần 3-8, đồng thời phát triển frontend với ReactJS. Giai đoạn kiểm thử toàn bộ đảm bảo chất lượng ứng dụng trước khi bàn giao. Sinh viên không chỉ nắm rõ công nghệ mà còn hiểu rõ quy trình phát triển phần mềm chuyên nghiệp.

4.1. Giai Đoạn Lập Kế Hoạch Và Thiết Kế

Tuần 1-2 tập trung vào xác định chức năng, phác thảo workflows, thiết kế cơ sở dữ liệu. Sinh viên tham khảo các website bán hàng hiện có để lấy ý tưởng. Design database schema được hoàn thiện để sẵn sàng cho quá trình phát triển.

4.2. Giai Đoạn Phát Triển Frontend Và Backend

Tuần 3-14 là giai đoạn coding chính của dự án. Backend Spring Boot được phát triển với Spring JPA, Spring Security, RESTful API. Frontend ReactJS xây dựng các component cho quản lý sản phẩm, giỏ hàng, tài khoản. Firebase integration cho xác thực và upload hình ảnh.

4.3. Kiểm Thử Và Hoàn Thiện Sản Phẩm

Tuần 15-16 dành cho kiểm thử toàn bộ ứng dụng, viết test case, và sửa lỗi. Sinh viên học cách debug, tối ưu hóa hiệu suất, và đảm bảo ứng dụng sẵn sàng bàn giao cho người dùng thực tế.

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

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 1. TỔNG QUAN SPRING FRAMEWORK Sơ lược về Spring Spring là một framework phát triển các ứng dụng java được sử dụng phổ biến. Giúp tạo các ứng dụng có hiệu năng cao, dể kiểm thử, dể sử dụng lại code. Spring có kích thước nhỏ, version chỉ khoảng 2MB hoạt động một cách trong suốt với lập trình viên.

Spring có mã nguồn mở, được phát triển chia sẻ và có cộng đồng người dùng lớn. Được xây dựng dựa trên 2 nguyên tắc design chính đó là: Dependency, Injection và Aspect Oriendted Programming. Spring có thể sử dụng để phát triển Java, Desktop, ứng dụng Mobile, Java web. Mục tiêu chính là giúp phát triển các ứng dụng J2EE một cách dể dàng hơn dựa trên mô hình POJO (Plain Old Java Object) Giới thiệu Spring Framework Spring FrameWork là một bộ khung ứng dụng và bộ chứa đảo ngược điều khiển cho nền tảng JAVA.

Chức năng chính của bộ khung này có thể áp dụng cho bất kỳ ứng dụng JAVA nào. Spring Framework trở nên phổ biến trong cộng đồng JAVA như một phương án song hành, thay thế, hoặc thậm chí bổ sung cho mô hình Enterprise JavaBeans (EJB) Spring là một Framework phát triển các ứng dụng Java được sử dụng bởi hàng triệu lập trình viên. Nó giúp tạo các ứng dụng có hiệu năng cao, dễ kiểm thử, sử dụng lại code… Lịch sử phát triển của Spring Framework Vào năm 2002, Spring Framework được phát hành phiên bản đầu tiên bởi Rod Johnson. Phần đầu tiên được viết vào năm 2000.

Vào năm 2001, những mô hình lập trình cho các ứng dụng web được đại đa số sử dụng đều do JAVA Servlet API và Enterprise JavaBeans cung cấp. Năm 2003 thành lập dự án tại Sourceforge để phát triển Spring. Sau Khi phát triên trên nàn tảng ban đầu hơn một năm họ đã phát triển phiên bản đầu tiên (1.0) vào tháng 3 năm 2004. Kiến trúc của Spring Framework được ra mắt lần đầu tiên vào tháng 6 năm 2003 dưới giấy phép Apache – phiên bản 2.0 đánh dấu mốc thành đạt đầu tiên được xuất bản vào tháng 3 năm 2004 và tiếp đó là tháng 9 năm 2004 và tháng 3 năm 2005.

Spring Framework đã làm cho những kỹ thuật trước đây chưa được biết mấy trở thành kỹ thuật được nhiều người ưa chuộng trong một thời gian ngắn ngủi. Một trong những kỹ thuật nổi tiếng hơn cả là kỹ thuật “Đảo ngược quyền điều khiển”. Năm 2005 cho thấy mức độ hưởng ứng nâng cao hơn những năm trước, nguyên nhân cũng vì những phiên bản mới được giới thiệu với cột mốc đáng kể và những tính năng mới được thêm vào. Diễn đàn Spring (Spring Forum) ra đời cuối năm 2004 cũng góp phần không nhỏ trong việc nâng cao tính phổ biến của bộ framework và từ đó đến nay đã sinh trưởng và phát triển trờ thành nguồn thông tin quan trọng, giúp đỡ cho người sử dụng.

Năm 2005 cho thấy mức độ hưởng ứng nâng cao hơn những năm trước, nguyên nhân cũng vì những phiên bản mới được giới thiệu với cột mốc đáng kể và những tính năng mới được thêm vào. Diễn đàn Spring (Spring Forum) ra đời cuối năm 2004 cũng góp phần không nhỏ trong việc nâng cao tính phổ biến của bộ framework và từ đó đến nay đã sinh trưởng và phát triển trờ thành nguồn thông tin quan trọng, giúp đỡ cho người sử dụng. Logo Spring Framework Đặc điểm chính của Spring Framework Spring được chia làm nhiều module khác nhau, tùy theo mục đich phát triển mà chúng ta dùng một trong cách module đó. Dưới đây là kiến trúc tổng thể của Spring Framework.Hệ thống Spring Framework Hai trong những phần chủ chốt là nền tảng tạo nên sức mạnh Spring Framework là IoC và DI.

 Test: Tầng này cung cấp khả năng hỗ trợ kiểm thử với JUnit và TestNG  Spring core Container Bao gồm các module spring core, beans, context và expression languate (EL)  Spring core, bean cung cấp tính năng IOC và Dependency Injection.  Spring Context hỗ trợ đa ngôn ngữ (internationalization), các tính năng Java EE như EJB, JMX.  Expression Language được mở rộng từ Expresion Language trong JSP. Nó cung cấp hỗ trợ việc setting/getting giá trị, các method cải tiến cho phép truy cập collections, index, các toán tử logic…  AOP, Aspect and Instrumentation Những module này hỗ trợ cài đặt lập trình hướng khía cạnh (Aspect Oriented Programming), hỗ trợ tích hợp với AspectJ.

 Data Access / Integration Nhóm này bao gồm JDBC, ORM, OXM, JMS và module Transaction. Những module này cung cấp khả năng giao tiếp với database  Web Nhóm này gồm Web, Web-Servlet… hỗ trợ việc tạo ứng dụng web. Ưu nhược điểm của Spring Framework Ưu điểm  Spring cho phép lập trình viên sử dụng POJOs. Việc sử dụng POJOs giúp bạn không phải làm việc với EJB, ứng dụng, các luồng chạy, cấu hình… đơn giản hơn rất nhiều.

 Spring được tổ chức theo kiểu module. Số lượng các gói và các lớp khá nhiều, nhưng bạn chỉ quan tâm đến những gì bạn cần và không cần quan tâm đến phần còn lại.  Spring hổ trợ sử dụng khá nhiều công nghệ nhu ORM Framework, các logging framework, JEE, các thư viện tạo lịch trình.  Module Web của Spring được thiết kế theo mô hình MVC nên nó cung cấp đầy đủ các tính năng giúp thay thế các web framework khác như Struts Nhược điểm  Các nhà phát triển phải tham khảo nhiều tập tin theo cách một hệ thống thực hiện  Dependency injection thường đòi hỏi nhiều dòng code để thực hiện cùng một code thừa kế.

 Dependency injection tang khớp nối bằng cách yêu cầu người sử dụng một hệ thống con để cung cấp cho nhu cầu của các hệ thống con.  Spring chỉ đơn giản hóa việc sử dụng Dependency Injection bằng cách cung cấp các cấu hình và quản lý tài liệu tham khảo cho các đôi tượng được tạo ra. Một số dự án khác của Spring Framework Cũng dựa trên các nguyên tắc thiết kế cơ bản của spring core. Spring còn phát triển nhiều project con như:  Spring MVC Spring MVC được thiết kế dành cho việc xây dựng các ứng dụng nền tảng web.

 Spring Security Cung cấp các cơ chế xác thực (authentication) và phân quyền (authorization) cho ứng dụng của bạn.  Spring boot Spring Boot là một framework giúp chúng ta phát triển cũng như chạy ứng dụng một cách nhanh chóng.  Spring Bacth Dự án này giúp chúng ta dễ dàng tạo các lịch trình (scheduling) và tiến trình (processing) cho các công việc xử lý theo mẻ (batch job).  Spring Social Dự án này sẽ kết nối ứng dụng của bạn với các API bên thứ ba của Facebook, Twitter, Linkedin … (ví dụ đăng nhập bằng facebook, google+ …)  Spring IO  Spring Cloud  Spring Mobile  Spring for Android  Spring Session 1.

TỔNG QUAN VỀ REACTJS Giới thiệu về ReactJS React.js là một thư viện Javascript đang nổi lên trong những năm gần đây với xu hướng Single Page Application. Trong khi những framework khác cố gắng hướng đến một mô hình MVC hoàn thiện thì React nổi bật với sự đơn giản và dễ dàng phối hợp với những thư viện Javascript khác. Nếu như AngularJS là một Framework cho phép nhúng code javasscript trong code html thông qua các attribute như ng-model, ng-repeat.thì với react là một library cho phép nhúng code html trong code javascript nhờ vào JSX, bạn có thể dễ dàng lồng các đoạn HTML vào trong JS. Tích hợp giữa javascript và HTML vào trong JSX làm cho các component dễ hiểu hơn.

Lịch sử của ReactJS Trước thời điểm năm 2013 việc xây dựng UI cho Facebook hoàn toàn dựa trên framework AngularJS của Google, tuy nhiên sau thời điểm năm 2013 khi lượng người dùng trở nên quá lớn và dữ liệu Facebook lưu trữ ngày càng nhiều, kéo theo đó việc xử lý dữ liệu ở ngoài UI trở nên quá khó khăn vì AngularJS chậm và khá nặng nề. Facebook không thể tìm kiếm được 1 framework nào khác đủ khả năng thay thế cho AngularJS, vậy nên các lập trình viên của Facebook đã tự tạo ra 1 công nghệ mới với tên gọi React và nó bao gồm 2 phần: ReactJS (dùng cho web app) và React Native (dùng cho mobile app). Đến năm 2015 thì Facebook quyết định open source mã nguồn của React cho cộng đồng và đến nay cộng đồng dev trên toàn thế giới đã góp 1 phần công sức không nhỏ giúp cho React ngày 1 hoàn thiện hơn. Đặc điểm của ReactJS Giúp nhà phát triển tạo ra giao diện người dùng nhanh chóng.

Xây dựng lên các Component có tính tái sử dụng, dể dàng chia nhỏ vấn đề, testing, quản lý và mở rộng hệ thống. Sử dụng Virtual DOM tạo ra các bản cache cấu trúc dữ liệu của ứng dụng trên bộ nhớ. Sử dụng cú pháp đặc biệt là JSX giúp việc viết các đoạn code JS dể dàng hơn. Hệ thống mã nguồn mở giúp react phát triển mạnh hơn bởi số lượng cộng đồng lớn.

Giúp trang web chạy nhanh hơn thông qua việc chỉ chạy và load lại các component. Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dể dàng cho bảo trì và sửa lỗi. Virtual DOM Công nghệ DOM ảo 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ý.

React JS 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 & Real Dom React 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.

Component Với các đặc điểm ở trên, React 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 đó React sẽ rất hữu ích để sử dụng.

Giới thiệu về JSX JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript. Đặc điểm: Faster: Nhanh hơn. JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javacsript. Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript.

Safer: an toàn hơn. Ngược với Javascript, JSX là kiểu statically-typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++.