Tìm Hiểu ReactJS và Spring Boot Framework: Xây Dựng Ứng Dụng Web Hiện Đại

ReactJS Spring Boot: Khám phá framework fullstack mạnh mẽ. Tìm hiểu cách kết hợp ReactJS và Spring Boot để xây dựng ứng dụng web toàn diện, hiệu quả.

• Tác giả: Nguyễn Hoàng Thái Dương
• Người hướng dẫn: ThS. Nguyễn Công Hoan
• Trường học: Trường Đại Học Công Nghệ Thông Tin
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Tìm Hiểu ReactJS-SpringBoot Framework
• Loại tài liệu: Báo cáo đồ án
• Năm xuất bản: 2022
• Địa điểm: TP. Hồ Chí Minh

Mục lục chi tiết

• LỜI CẢM ƠN
• I. Thông tin nhóm
• 2. Tổng quan đề tài
• 2.1. Giới thiệu đề tài
• 2.2. Nội dung đề tài
• 2.3. Mục tiêu hướng tới
• 3. Công nghệ sử dụng
• 3.2. Visual Studio Code
• 4. Microsoft SQL Server
• 5. Github
• 6. Ngôn ngữ Java
• 7. Ngôn ngữ thiết kế Web HTML-CSS-Javascript
• 8. Bootstrap
• 2. Các khái niệm chính trong React (ReactJs)
• 2.1. Virtual DOM
• 2.2. JSX
• 2.3. Component
• 2.4. Props và State
• 2.5. Component Lifecycle
• 2.6. React Hook
• III. Xây dựng back-end cho đồ án bằng Spring Boot
• IV. TRANG WEB MINH HỌA
• 4.1. Giới thiệu ứng dụng web
• 4.2. Hướng giải quyết
• 4.3. Giới thiệu ứng dụng phát triển
• 4.4. Analystics – Phân tích
• V. Màn hình minh họa
• 5.2. Trang sản phẩm quần áo
• 5.3. Trang sản phẩm phụ kiện
• 5.4. Trang chi tiết sản phầm
• 5.5. Trang giỏ hàng
• 5.6. Trang đăng nhập
• VI. KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN
• 6.1. Kết quả đạt được
• 6.2. Hướng phát triển
• TÀI LIỆU THAM KHẢO
• DANH MỤC HÌNH ẢNH

Tóm tắt

I. ReactJS Spring Boot Fullstack Tổng Quan Tại Sao Chọn

Với sự phát triển vượt bậc của công nghệ thông tin, Internet đóng vai trò quan trọng trong mọi lĩnh vực. Thương mại điện tử phát triển mạnh mẽ, đòi hỏi các trang web bán hàng phải bắt mắt, tiện lợi, và đáng tin cậy. Việc xây dựng một trang web như vậy có thể thực hiện bằng nhiều cách, từ các phần mềm kéo thả đơn giản đến lập trình với các framework fullstack mạnh mẽ. Trong đó, ReactJS và Spring Boot nổi lên như một bộ đôi hoàn hảo cho web development.

ReactJS, một thư viện JavaScript mã nguồn mở, được sử dụng để xây dựng giao diện người dùng tương tác. Điểm mạnh của ReactJS nằm ở khả năng tái sử dụng component-based architecture, hiệu suất cao nhờ Virtual DOM, và cộng đồng hỗ trợ lớn mạnh. Spring Boot, một Java framework, giúp đơn giản hóa việc phát triển các ứng dụng Backend mạnh mẽ. Với các tính năng như tự động cấu hình, Dependency Injection (DI), và hỗ trợ nhiều thư viện, Spring Boot giúp tăng tốc độ phát triển và giảm thiểu cấu hình phức tạp.

Đồ án này tập trung vào việc tìm hiểu và ứng dụng ReactJS Spring Boot để xây dựng một ứng dụng Fullstack. Mục tiêu là nắm vững các khái niệm cơ bản, thành thạo việc sử dụng các thư viện liên quan, và tạo ra một sản phẩm thực tế. Nhóm hy vọng sẽ đóng góp một tài liệu tham khảo hữu ích cho những ai muốn khám phá bộ đôi Framework Fullstack mạnh mẽ này.

1.1. Giới thiệu về ReactJS Ưu điểm và nhược điểm chính

ReactJS là một thư viện JavaScript mã nguồn mở được phát triển bởi Facebook, chuyên dùng để xây dựng giao diện người dùng. Ưu điểm lớn nhất của ReactJS là Component-based Architecture, cho phép chia nhỏ giao diện thành các thành phần độc lập, dễ tái sử dụng và bảo trì. Virtual DOM giúp tăng hiệu suất bằng cách chỉ cập nhật những phần thay đổi trên giao diện. JSX, một cú pháp mở rộng cho phép viết mã HTML trực tiếp trong JavaScript, giúp code dễ đọc và dễ hiểu hơn. Tuy nhiên, ReactJS chỉ tập trung vào tầng View, không cung cấp đầy đủ chức năng của một MVC Framework. Vì vậy, cần kết hợp với các thư viện khác để xây dựng ứng dụng hoàn chỉnh. Việc học ReactJS ban đầu có thể khó khăn đối với những người mới làm quen với Web Development, đặc biệt là các khái niệm như JSX, Props, và State. ReactJS có kích thước tương đối lớn so với một số thư viện Frontend khác, điều này có thể ảnh hưởng đến tốc độ tải trang.

1.2. Tổng quan Spring Boot Tại sao nó lại quan trọng

Spring Boot là một Framework Java giúp đơn giản hóa việc phát triển các ứng dụng Backend. Nó cung cấp tính năng Rapid Application Development (RAD), giúp giảm thiểu thời gian cấu hình và cài đặt dự án. Spring Boot tự động cấu hình các thành phần cần thiết, giảm thiểu việc cấu hình bằng XML. Nó hỗ trợ nhúng trực tiếp các server như Tomcat, Jetty, giúp đơn giản hóa việc triển khai ứng dụng. Dependency Injection (DI) và Inversion of Control (IoC) là những nguyên lý quan trọng trong Spring Boot, giúp tăng tính linh hoạt và khả năng bảo trì của ứng dụng. Tuy nhiên, Spring Boot cũng có một số nhược điểm. Do sử dụng cấu hình mặc định, nó có thể tạo ra nhiều dependency không cần thiết, làm tăng kích thước file triển khai. Việc chuyển đổi các dự án Spring cũ sang Spring Boot có thể gặp nhiều khó khăn. Spring Boot không thích hợp cho các dự án quá lớn, đặc biệt là các ứng dụng monolithic.

1.3. Lựa chọn Fullstack Kết hợp ReactJS và Spring Boot hiệu quả

Sự kết hợp giữa ReactJS và Spring Boot tạo ra một bộ đôi Framework Fullstack mạnh mẽ, cho phép xây dựng các ứng dụng web hiện đại với hiệu suất cao và khả năng mở rộng tốt. ReactJS xử lý phần giao diện người dùng (Frontend), cung cấp trải nghiệm tương tác mượt mà và linh hoạt. Spring Boot đảm nhận phần xử lý logic nghiệp vụ (Backend), cung cấp các RESTful Services mạnh mẽ và bảo mật. Giao tiếp giữa ReactJS và Spring Boot thường được thực hiện thông qua REST API sử dụng định dạng JSON. Spring Security trong Spring Boot giúp bảo vệ ứng dụng bằng cách cung cấp các cơ chế Authentication và Authorization mạnh mẽ. Việc sử dụng Docker và Kubernetes giúp triển khai ứng dụng Fullstack này một cách dễ dàng và linh hoạt trên nhiều môi trường khác nhau. Nhóm lựa chọn sự kết hợp này vì nó phù hợp với yêu cầu của đồ án, đồng thời cung cấp nhiều cơ hội học hỏi và phát triển kỹ năng Web Development.

II. Vấn Đề Thách Thức Xây Dựng Ứng Dụng Fullstack Hoàn Chỉnh

Xây dựng một ứng dụng Fullstack với ReactJS Spring Boot không phải là một nhiệm vụ đơn giản. Nhóm gặp phải nhiều vấn đề và thách thức trong quá trình thực hiện đồ án. Một trong những thách thức lớn nhất là việc tích hợp hai Framework này lại với nhau. Cần thiết lập môi trường phát triển, cấu hình các dependency, và đảm bảo rằng ReactJS có thể giao tiếp với Spring Boot thông qua REST API.

Việc quản lý State trong ReactJS cũng là một vấn đề quan trọng. Cần lựa chọn phương pháp quản lý State phù hợp với quy mô và độ phức tạp của ứng dụng. Redux và Context API là hai lựa chọn phổ biến, mỗi lựa chọn có những ưu điểm và nhược điểm riêng. Thiết kế API Design là một yếu tố then chốt trong việc xây dựng ứng dụng Fullstack. Cần đảm bảo rằng API được thiết kế rõ ràng, dễ sử dụng, và tuân thủ các nguyên tắc RESTful.

Việc Testing ứng dụng Fullstack cũng là một thách thức. Cần thực hiện Unit Testing cho các Component trong ReactJS và các Service trong Spring Boot. Integration Testing cần được thực hiện để đảm bảo rằng các thành phần khác nhau của ứng dụng hoạt động tốt với nhau. Cuối cùng, việc CI/CD (Continuous Integration/Continuous Deployment) giúp tự động hóa quá trình xây dựng, kiểm thử, và triển khai ứng dụng, giảm thiểu rủi ro và tăng tốc độ phát triển.

2.1. Tích hợp ReactJS và Spring Boot Các bước cấu hình cần thiết

Để tích hợp ReactJS và Spring Boot, cần thực hiện một số bước cấu hình quan trọng. Đầu tiên, cần tạo một project ReactJS bằng công cụ Create React App hoặc các công cụ tương tự. Tiếp theo, cần tạo một project Spring Boot bằng Spring Initializr hoặc các công cụ IDE như VS Code hoặc IntelliJ IDEA. Cần cấu hình Maven hoặc Gradle để quản lý các dependency của dự án Spring Boot. Axios hoặc Fetch API có thể được sử dụng trong ReactJS để gửi các request đến REST API của Spring Boot. Cần cấu hình CORS (Cross-Origin Resource Sharing) trong Spring Boot để cho phép ReactJS truy cập vào API từ một domain khác. Cuối cùng, cần triển khai cả hai ứng dụng trên cùng một server hoặc trên các server khác nhau, tùy thuộc vào yêu cầu của dự án.

2.2. Quản lý State trong ReactJS Redux vs Context API

State Management là một vấn đề quan trọng trong ReactJS, đặc biệt là đối với các ứng dụng lớn và phức tạp. Redux là một thư viện State Management phổ biến, cung cấp một kho lưu trữ trung tâm cho tất cả các State của ứng dụng. Redux sử dụng các khái niệm như Actions, Reducers, và Store để quản lý State một cách có cấu trúc. Context API là một tính năng tích hợp sẵn trong ReactJS, cho phép chia sẻ State giữa các Component mà không cần phải truyền Props một cách thủ công. Redux phù hợp với các ứng dụng lớn và phức tạp, nơi mà State cần được quản lý một cách chặt chẽ. Context API phù hợp với các ứng dụng nhỏ và vừa, nơi mà việc chia sẻ State giữa các Component là đơn giản và không cần quá nhiều cấu trúc.

2.3. Thiết kế REST API Nguyên tắc RESTful và các phương pháp hay

REST API Design là một yếu tố quan trọng trong việc xây dựng ứng dụng Fullstack. API nên tuân thủ các nguyên tắc RESTful, như sử dụng các phương thức HTTP (GET, POST, PUT, DELETE) để thực hiện các CRUD Operations (Create, Read, Update, Delete). API nên sử dụng định dạng JSON để truyền tải dữ liệu. Các Endpoints của API nên được đặt tên rõ ràng và dễ hiểu. API nên hỗ trợ phân trang để xử lý lượng dữ liệu lớn. API nên được bảo mật bằng các cơ chế Authentication và Authorization. Swagger có thể được sử dụng để mô tả và tài liệu hóa API, giúp cho việc sử dụng API trở nên dễ dàng hơn.

III. Giải Pháp Xây Dựng API Backend với Spring Boot RESTful

Để giải quyết các thách thức trên, nhóm tập trung vào việc xây dựng một API Backend mạnh mẽ và linh hoạt với Spring Boot. Spring Data JPA được sử dụng để truy cập và quản lý dữ liệu từ Database. Hibernate là một ORM (Object-Relational Mapping) được sử dụng để ánh xạ các đối tượng Java với các bảng trong Database. Spring Security được sử dụng để bảo vệ API bằng cách cung cấp các cơ chế Authentication và Authorization mạnh mẽ.

RESTful Services được xây dựng để cung cấp các Endpoints cho ReactJS truy cập. Các Endpoints này cho phép thực hiện các CRUD Operations trên dữ liệu. JSON được sử dụng để truyền tải dữ liệu giữa ReactJS và Spring Boot. Các thư viện như Formik và Yup được sử dụng trong ReactJS để xử lý Form và Validation. Các thư viện như Material UI, Ant Design, hoặc Bootstrap được sử dụng để xây dựng giao diện người dùng đẹp mắt và thân thiện.

3.1. Sử dụng Spring Data JPA và Hibernate ORM cho Java

Spring Data JPA là một module của Spring Data, giúp đơn giản hóa việc truy cập và quản lý dữ liệu từ Database. Hibernate là một ORM (Object-Relational Mapping), cho phép ánh xạ các đối tượng Java với các bảng trong Database. Spring Data JPA cung cấp các interface và repository, giúp giảm thiểu code boilerplate cần thiết để thực hiện các CRUD Operations. Hibernate tự động tạo ra các câu lệnh SQL dựa trên các annotation và cấu hình, giúp giảm thiểu lỗi và tăng tốc độ phát triển. Việc sử dụng Spring Data JPA và Hibernate giúp cho việc truy cập và quản lý dữ liệu trở nên dễ dàng hơn, đồng thời tăng tính linh hoạt và khả năng bảo trì của ứng dụng.

3.2. Triển khai Spring Security Xác thực và phân quyền API

Spring Security là một Framework mạnh mẽ để bảo vệ ứng dụng Spring Boot. Nó cung cấp các cơ chế Authentication và Authorization mạnh mẽ, giúp đảm bảo rằng chỉ những người dùng được phép mới có thể truy cập vào các tài nguyên của ứng dụng. Authentication là quá trình xác minh danh tính của người dùng. Authorization là quá trình xác định xem người dùng có quyền truy cập vào các tài nguyên cụ thể hay không. Spring Security hỗ trợ nhiều phương pháp Authentication, như username/password, OAuth 2.0, và JWT. Spring Security cũng hỗ trợ nhiều phương pháp Authorization, như role-based access control và attribute-based access control.

3.3. Xây dựng RESTful Services Endpoint HTTP Methods JSON

RESTful Services là một phần quan trọng của API Backend. RESTful Services cung cấp các Endpoints cho ReactJS truy cập. Mỗi Endpoint tương ứng với một tài nguyên cụ thể. Các phương thức HTTP (GET, POST, PUT, DELETE) được sử dụng để thực hiện các CRUD Operations trên tài nguyên. JSON được sử dụng để truyền tải dữ liệu giữa ReactJS và Spring Boot. RESTful Services nên tuân thủ các nguyên tắc RESTful, như statelessness, cacheability, và uniform interface.

IV. Giải Pháp Xây dựng giao diện người dùng ReactJS

Phần Frontend sẽ sử dụng các giải pháp khác như ReacJs, React-router-dom phiên bản 6, React Hook để hiện thực các tính năng được yêu cầu trong trang web.

4.1. Sử dụng React Hook useState useEffect useRef

Giúp code gọn nhẹ hơn, dễ hiểu hơn, dễ quản lý và bảo trì component hơn

4.2. Sử dụng React Router Dom v6

Điều hướng trang và hiển thị component

4.3. Xây dựng giao diện người dùng

Xây dựng bố cục trang, trình bày, trang trí bằng các thư viện hỗ trợ UI như bootstrap

V. Kết Quả Hướng Phát Triển Ứng Dụng ReactJS Spring Boot

Kết quả đạt được cho thấy sự kết hợp ReactJS và Spring Boot là một lựa chọn hiệu quả để xây dựng các ứng dụng Fullstack. Ứng dụng đã triển khai thành công các chức năng quan trọng như quản lý sản phẩm, giỏ hàng, thanh toán, và quản lý người dùng.

Hướng phát triển trong tương lai có thể tập trung vào việc tối ưu hóa hiệu suất, cải thiện trải nghiệm người dùng, và mở rộng chức năng của ứng dụng. Việc sử dụng Server-Side Rendering (SSR) có thể giúp cải thiện tốc độ tải trang và SEO. Việc tích hợp các dịch vụ đám mây như AWS hoặc Azure có thể giúp tăng tính khả dụng và khả năng mở rộng của ứng dụng. Việc áp dụng các phương pháp Agile Development và Scrum có thể giúp tăng tốc độ phát triển và đảm bảo chất lượng của ứng dụng.

5.1. Đánh giá kết quả đạt được Ưu và nhược điểm thực tế

Nhóm đã đạt được các kết quả cụ thể trong quá trình thực hiện đồ án. Ưu điểm lớn nhất là việc nắm vững các khái niệm cơ bản và thành thạo việc sử dụng ReactJS và Spring Boot. Ứng dụng đã triển khai thành công các chức năng quan trọng, đáp ứng yêu cầu của đề tài. Nhược điểm là việc tích hợp hai Framework này vẫn còn một số khó khăn. Hiệu suất của ứng dụng có thể được cải thiện. Trải nghiệm người dùng cần được tối ưu hóa.

5.2. Hướng phát triển ứng dụng SSR Cloud Microservices

Trong tương lai, ứng dụng có thể được phát triển theo nhiều hướng khác nhau. Server-Side Rendering (SSR) có thể giúp cải thiện tốc độ tải trang và SEO. Việc tích hợp các dịch vụ đám mây như AWS hoặc Azure có thể giúp tăng tính khả dụng và khả năng mở rộng của ứng dụng. Việc chuyển đổi sang kiến trúc Microservices có thể giúp tăng tính linh hoạt và khả năng bảo trì của ứng dụng.

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

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN 1 TÌM HIỂU REACTJS-SPRINGBOOT FRAMEWORK Giảng viên hướng dẫn: ThS. Nguyễn Công Hoan Sinh viên thực hiện: Nguyễn Hoàng Thái Dương 19521409 Nguyễn Âu Duy 19521423 TP.Hồ Chí Minh,2022 ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN 1 TÌM HIỂU REACTJS-SPRINGBOOT FRAMEWORK Giảng viên hướng dẫn: ThS. Nguyễn Công Hoan Sinh viên thực hiện: Nguyễn Hoàng Thái Dương 19521409 Nguyễn Âu Duy 19521423 TP.Hồ Chí Minh,2022 LỜI CẢM ƠN Nhóm xin gửi lời cảm ơn chân thành đến thầy Nguyễn Công Hoan đã tận tình giảng dạy, hướng dẫn chúng em trong suốt thời gian học vừa qua và các bạn học đã góp ý và giúp đỡ nhóm trong quá trình thực hiện đồ án này. Do kiến thức và thời gian thực hiện hạn chế, đồ án của nhóm vẫn còn nhiều thiếu sót.

Nhóm rất mong nhận được góp ý của Thầy Cô và các bạn để đồ án của nhóm được hoàn thiện. Nhóm sinh viên thực hiện Nguyễn Hoàng Thái Dương-Nguyễn Âu Duy 3 NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN. HCM, ngày … tháng 6 năm 2022 GVHD ThS. Nguyễn Công Hoan Mục Lục I.

Thông tin nhóm. Tổng quan đề tài .1 Giới thiệu đề tài .2 Nội dung đề tài .3 Mục tiêu hướng tới. Công nghệ sử dụng .2 Visual Studio Code .4 Microsoft SQL Server .6 Ngôn ngữ Java .7 Ngôn ngữ thiết kế Web HTML-CSS-Javascript. Các khái niệm chính trong React (ReactJs).4 Props và State.

Cách hoạt động. Nhược điểm. Ưu điểm và Tại sao nên dùng ReactJs. Các framework-package liên quan đến ReactJs.

Nhược điểm của Spring Boot. Ưu điểm của Spring Boot. Các thư viện được sử dụng trong Spring Boot. Xây dựng back-end cho đồ án bằng Spring Boot.

TRANG WEB MINH HỌA. Giới thiệu ứng dụng web .2 Hướng giải quyết .3 Giới thiệu ứng dụng phát triển. Product Requirement Document .4 Analystics – Phân tích. Màn hình minh họa .2 Trang sản phẩm quần áo.3 Trang sản phẩm phụ kiện .4 Trang chi tiết sản phầm .5 Trang giỏ hàng.6 Trang đăng nhập.

KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN. Kết quả đạt được. Hướng phát triển. TÀI LIỆU THAM KHẢO.

56 Danh Mục Hình Ảnh Hình I-1 Intellij Logo ___________________________________________ 3 Hình I-2 VS code Logo__________________________________________ 4 Hình I-3 Postman Logo__________________________________________ 4 Hình I-4 SQL Server Logo _______________________________________ 5 Hình I-5 Github Logo ___________________________________________ 5 Hình I-6 Java logo _____________________________________________ 6 Hình I-7 Logo HTML-CSS-Javascript ______________________________ 7 Hình I-8 Logo Bootstrap _________________________________________ 8 Hình II-1 Mô hình DOM trong ứng dụng ReactJs ____________________ 10 Hình II-2 Ví dụ về JSX _________________________________________ 11 Hình II-3 Ví dụ về component ___________________________________ 12 Hình II-4 Ví dụ props __________________________________________ 13 Hình II-5 Component Lifecycle __________________________________ 14 Hình II-6 Top các framework phát triển Web theo năm 2021 ___________ 18 Hình II-7 useState _____________________________________________ 19 Hình II-8 useEffect ____________________________________________ 19 Hình II-9 React-Router _________________________________________ 21 Hình II-10 useNavigate _________________________________________ 22 Hình II-11useLocation _________________________________________ 22 Hình II-12 useParam ___________________________________________ 23 Hình II-13 Link _______________________________________________ 24 Hình II-14 Redux Model________________________________________ 25 Hình II-15 ReduxToolkit Slice, AsyncThunk ________________________ 26 Hình III-1 Hibernate: các hàm tương ứng sẽ có các anotation query và câu lệnh query tương ứng ________________________________________________ 29 Hình III-2 Ví dụ về việc sử dụng anotation _________________________ 30 Hình III-3 Cấu trúc file đồ án ____________________________________ 32 Hình IV-1 Trang ______________________________________________ 47 Hình IV-2 Trang quần áo _______________________________________ 48 Hình IV-3 Trang chưa sản phẩm phụ kiện __________________________ 48 Hình IV-4 ___________________________________________________ 48 Hình IV-5 Trang chi tiết sản phẩm ________________________________ 49 Hình IV-6 Trang đặt hàng tông ___________________________________ 50 Hình IV-7 Trang giỏ hàng đặt hàng _______________________________ 51 Hình IV-8 Trang đăng nhập _____________________________________ 51 Hình IV-9 Trang đăng ký _______________________________________ 52 Hình V-1 Kiến trúc áp dụng _____________________________________ 53 I. Thông tin nhóm BẢNG PHÂN CÔNG THỰC HIỆN ĐỒ ÁN MÔN HỌC Nguyễn Hoàng Thái Dương Nguyễn Âu Duy MSSV: 19521409 MSSV: 19521423 Xử lý front-end Xử lý back-end Tìm hiểu ReactJs Xử lý Database Tìm hiểu SpringBoot SV thực hiện 1 SV thực hiện 2 (Ký tên) (Ký tên) Nguyễn Hoàng Thái Dương Nguyễn Âu Duy 2. Tổng quan đề tài 2.1 Giới thiệu đề tài Với sự phát triển nhảy vọt của công nghệ thông tin hiện nay, Internet ngày càng giữ vai trò quan trọng trong các lĩnh vực khoa học kĩ thuật và đời sống. Internet là tập hợp kết nối giữa các máy tính, là một mạng máy tính toàn cầu mà bất kì ai 1 cũng có thể truy cập bằng latop, PC, các thiết bị di dộng, thiết bị gia dụng thông minh,….

Vì thế cùng với sự lớn mạnh của Internet thì hàng loạt các sản phẩm mang tính thương mại ra đời với quy mô từ nhỏ đến lớn ở các ngành nghề, lĩnh vực liên quan và phổ biến,thông dụng ở mọi lĩnh vực khác. Internet đã tạo ra một cuộc cách mạng trao đổi thông tin trong mọi lĩnh vực văn hóa, y tế, xã hội, giáo dục,… nhờ đó góp phần thúc đẩy sự phát triển cảu thế giới. Trong đó nổi bật là các sản phẩm, thiết bị thương mại điện tử mà mọi người đều có thể sử dụng dễ dàng và hữu ích. Việc mua bán bây giờ không chỉ thông qua xem hàng – mua hàng trực tiếp mà còn có thể giao dịch qua các trang Web thương mại điện tử một cách tiện lợi nhưng vẫn đảm bảo được sự uy tín, chất lượng từ sản phẩm mà các doanh nghiệp, cửa hàng, siêu thị, cá nhan… cung cấp cho khách hàng cũng như sự hỗ trợ và chính sách bán hàng.

Việc để tạo ra một trang Web bán hàng bắt mắt, tiện lợi cho người mua là một trong những vấn đề đang được quan tâm hàng đầu. Có rất nhiều cách để tạo ra một trang Web như thông qua các phần mềm thứ ba để tạo với những người thích thiết kế giao diện nhưng không có hiểu biết sâu rộng về lập trình hay lập trình với các ngôn ngữ, framework hỗ trợ phát triển ứng dụng Web : .NET, HTML-CSS, Javascript, Bootsrap, Vue.js, Angular… Trong đó nhóm đã chọn ReactJs cho phần thiết kế giao diện người dùng (front-end) và framework Java SpringBoot cho phần xử lý tác vụ logic, kết nối Database để xây dựng một ứng dụng Web bán hàng online.2 Nội dung đề tài Thông qua việc tìm hiểu về Reactjs và SpringBoot nhóm sẽ áp dụng để thiết kế ứng dụng web để có thể hiểu sâu và thành thạo các kiến thức đã tìm hiểu. 2 Việc sử dụng các package – tính năng – thư viện liên quan đến ReactJs và Spring Boot sẽ được trình bày chi tiết trong quá trình tìm hiểu cũng như thiết kế ứng dụng Web.3 Mục tiêu hướng tới • Việc tìm hiểu và áp dụng sẽ giúp các thành viên trong nhóm có cơ hội học hỏi, tiếp thu, mở rộng những kiến thức mới về các framework cũng như cách để xây dựng các ứng dụng từ framework với quá trình thế nào. Từ đó không chỉ giúp nhóm có thêm kinh nghiệm để thiết kế các ứng dụng khác liên quan đến Reactjs và SpringBoot mà còn có thể hỗ trợ cho công việc thực tập, làm việc trong tương lai.

• Ngoài ra nhóm còn muốn dùng những gì mình đã thu hoạch được đề có thể giúp những lập trình việc đang muốn tìm hiểu về cả hai framework này để có thể làm tài liệu tham khảo. Công nghệ sử dụng Những công nghệ, tool,framework liên quan mà nhóm đã sử dụng trong quá trình thực hiện: 3.1 Intellij Được phát hành lần đầu tiên vào năm 2001, IntelliJ IDEA là một môi trường phát triển tích hợp cho Windows, macOS và Linux. Nó chủ yếu được sử dụng để phát triển phần mềm bằng ngôn ngữ lập trình Java, nhưng cũng hỗ trợ các ngôn ngữ khác hoặc tự nhiên hoặc sử dụng một plugin. Nó cũng là cơ sở cho Hình I-1 Intellij Android Studio của Google, môi trường phát triển Logo 3 chính thức để tạo các ứng dụng Android.

Nhóm sử dụng cho việc code Back-end 3.2 Visual Studio Code Visual Studio Code là một trình soạn thảo mã nguồn được phát triển bởi Microsoft dành cho Windows, Linux và macOS. Nó hỗ trợ chức năng debug,đi kèm với Git, có chức năng nổi bật cú pháp ( syntax highlighting ), smart code , snippets, và cải tiến mã nguồn. Nó cũng cho phép tùy chỉnh, do đó, người dùng có thể thay đổi theme, phím tắt, và các tùy chọn khác. Hình I-2 VS code Nó miễn phí và là phần mềm mã nguồn mở theo giấy Logo phép MIT.

Nhóm sử dụng cho việc code Front-end.3 Postman Postman là một công cụ cho phép chúng ta thao tác với API, phổ biến nhất là REST. Postman hiện là một trong những công cụ phổ biến nhất được sử dụng trong thử nghiệm các API. Với Postman, ta có thể gọi Rest API mà không cần viết dòng code nào. Hình I-3 Postman Logo Postman hỗ trợ tất cả các phương thức HTTP (GET, POST, PUT, PATCH, DELETE, …).

Bên cạnh đó, nó còn cho phép lưu lại lịch sử các lần request, rất tiện cho việc sử dụng lại khi cần. Nhóm sử dụng Postman cho việc test API.4 Microsoft SQL Server SQL Server chính là một hệ quản trị dữ liệu quan hệ sử dụng câu lệnh SQL để trao đổi dữ liệu giữa máy cài SQL Server và máy Client. Một Relational Database Management System – RDBMS gồm có: databases, datase engine và các chương trình ứng dụng dùng để quản lý các bộ phận trong RDBMS và Hình I-4 SQL Server những dữ liệu khác. Logo Các thành cơ bản trong SQL Server gồm có: Reporting Services, Database Engine, Integration Services, Notification Services, Full Text Search Service, … Tất cả kết hợp với nhau tạo thành một giải pháp hoàn chỉnh giúp cho việc phân tích và lưu trữ dữ liệu trở nên dễ dàng hơn.

Nhóm sử dụng CSDL SQL Server làm Database cho ứng dụng.5 Github GitHub là một hệ thống quản lý dự án và phiên bản code, hoạt động giống như một mạng xã hội cho lập trình viên. Các lập trình viên có thể clone lại mã nguồn từ một repository và Github chính là một dịch vụ máy chủ repository công cộng, Hình I-5 Github Logo mỗi người có thể tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thể làm việc. GitHub được coi là một mạng xã hội dành cho lập trình viên lớn nhất và dễ dùng nhất với các tính năng cốt lõi như: 5 Wiki, issue, thống kê, đổi tên project, project được đặt vào namespace là user. Watch project: theo dõi hoạt động của project của người khác.

Xem quá trình người ta phát triển phầm mềm thế nào, project phát triển ra sao Follow user: theo dõi hoạt động của người khác. Github giúp ta quản lý source code dễ dàng, tracking sự thay đổi version.