CHƯƠNG 1: TỔNG QUAN - Tập trung vào phương pháp nghiên cứu tài liệu, bao gồm việc đọc sách, tham khảo các tài liệu uy tín, theo dõi bài viết chuyên sâu và xem các video liên quan đến Java Spring Boot và ReactJS. - Áp dụng phương pháp chuyên gia, chúng em đã tận dụng sự giúp đỡ và tư vấn từ giáo viên hướng dẫn cũng như sự chia sẻ kinh nghiệm từ các thầy cô trong khoa Công nghệ thông tin tại Trường Đại học Sư phạm Kỹ thuật TP. Điều này đã giúp chúng em có cái nhìn sâu sắc hơn và đảm bảo tính chất chất lượng và chuyên sâu của đề tài nghiên cứu. 20 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.
Giới thiệu về Technical Stack 2. Technical Stack là gì? Technical Stack là một tập hợp các công nghệ, ngôn ngữ lập trình, framework, thư viện, cơ sở dữ liệu, và các thành phần khác được sử dụng để xây dựng và triển khai một ứng dụng hay dự án công nghệ. Một số Stack thông dụng TECHNICAL STACK CÁC CÔNG NGHỆ MERN Mongo DB, Express JS, React JS, Node JS LAMP Stack Linux, Apache, MySQL, PHP WISA Stack Window, IIS, SQL Server, ASP. Một số Stack thông dụng 2.
Giới thiệu về MySQL 2. Định nghĩa MySQL Hình 1. Định nghĩa MySQL MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server. Với RDBMS là viết tắt của Relational Database 21 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Management System.
MySQL được tích hợp apache, PHP. MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu. Mỗi cơ sở dữ liệu có thể có nhiều bảng quan hệ chứa dữ liệu. MySQL cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL.
Ưu điểm và nhược điểm của MySQL Ưu điểm: - Dễ sử dụng: MySQL là cơ sở dữ liệu tốc độ cao, ổn định, dễ sử dụng và hoạt động trên nhiều hệ điều hành cung cấp một hệ thống lớn các hàm tiện ích rất mạnh. - Độ bảo mật cao: MySQL rất thích hợp cho các ứng dụng có truy cập CSDL trên Internet khi sở hữu nhiều nhiều tính năng bảo mật thậm chí là ở cấp cao. - Đa tính năng: MySQL hỗ trợ rất nhiều chức năng SQL được mong chờ từ một hệ quản trị cơ sở dữ liệu quan hệ cả trực tiếp lẫn gián tiếp. - Khả năng mở rộng và mạnh mẽ: MySQL có thể xử lý rất nhiều dữ liệu và hơn thế nữa nó có thể được mở rộng nếu cần thiết.
- Nhanh chóng: Việc đưa ra một số tiêu chuẩn cho phép MySQL để làm việc rất hiệu quả và tiết kiệm chi phí, do đó nó làm tăng tốc độ thực thi. Nhược điểm: - Giới hạn: Theo thiết kế, MySQL không có ý định làm tất cả và nó đi kèm với các hạn chế về chức năng mà một vào ứng dụng có thể cần. - Độ tin cậy: Cách các chức năng cụ thể được xử lý với MySQL (ví dụ tài liệu tham khảo, các giao dịch, kiểm toán,…) làm cho nó kém tin cậy hơn so với một số hệ quản trị cơ sở dữ liệu quan hệ khác. - Dung lượng hạn chế: Nếu số bản ghi của bạn lớn dần lên thì việc truy xuất dữ liệu của bạn là khá khó khăn, khi đó chúng ta sẽ phải áp dụng nhiều biện pháp để tăng tốc độ truy xuất dữ liệu như là chia tải database này ra nhiều server, hoặc tạo cache MySQL 22 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.
Vai trò của MySQL - MySQL là CSDL có tốc độ khá cao, ổn định và khá dễ sử dụng có thể hoạt động được trên khá nhiều hệ điều hành. - Tính bảo mật mạnh và sử dụng được trên nhiều ứng dụng mà MySQL còn hoàn toàn được sử dụng miễn phí. - MySQL không chỉ dừng lại ở bổ trợ cho PHP và Perl, mà nó còn bổ trợ cho nhiều ngôn ngữ khác, Nó là nơi để lưu trữ thông tin trên các trang web được viết bằng Perl hoặc PHP. Giới thiệu về Spring Boot 2.
Định nghĩa Spring Boot Hình 2. Định nghĩa Spring Boot Spring Boot là một framework trong dự án Spring của ngôn ngữ lập trình Java, được thiết kế để đơn giản hóa và tăng cường quá trình phát triển ứng dụng Java. Nó cung cấp một cách nhanh chóng để tạo ra các ứng dụng Java độc lập và tự chạy. Một số tính năng của Spring Boot - Tạo ra các ứng dụng Spring mang tính độc lập.
- Nhúng trực tiếp Tomcat, Jetty hoặc Undertow mà không cần phải triển khai ra file WAR. - Starter dependency giúp cho việc chạy cấu hình Maven trở nên đơn giản hơn. - Tự động chạy cấu hình Spring khi cần thiết. - Không sinh code cấu hình, đồng thời không yêu cầu phải cấu hình bằng XML.
23 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Vai trò của Spring boot - Được phát triển tối ưu sao cho cấu hình XML trở nên đơn giản nhanh chóng và dễ dàng nhất trong Spring. - Gia tăng được năng suất trong quá trình lập trình. - Giảm ở mức tối thiểu thời gian lập trình.
- Giúp người dùng mặc dù không có nhiều kiến thức lập trình vẫn có thể xây dựng được một ứng dụng. - Giúp tích hợp dễ dàng với nhiều framework và thư viện khác trong hệ sinh thái của Spring, chẳng hạn như Spring MVC, Spring Data, Spring Security, và nhiều hơn nữa. - Spring Boot sử dụng cơ chế cấu hình tự động để cấu hình ứng dụng. - Giảm thiểu công việc setup và đảm bảo tính nhất quán giữa các dự án.
- Spring Boot tích hợp sẵn máy chủ web như Tomcat, Jetty, hoặc Undertow, giúp ứng dụng chạy độc lập mà không cần một web container bên ngoài. - Cung cấp các tính năng quản lý và giám sát như sức khỏe của ứng dụng, thông tin về các endpoints, và các chức năng khác để giúp quản trị và giám sát ứng dụng dễ dàng hơn. - Spring Boot thường được sử dụng để phát triển ứng dụng RESTful APIs. - Ứng dụng Spring Boot có thể chạy độc lập mà không cần môi trường container bên ngoài, giúp tối ưu hóa quá trình triển khai.
Giới thiệu về ReactJS 2. Định nghĩa ReactJS Hình 3. Định nghĩa React JS 24 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT React là một thư viện JavaScript front-end mã nguồn mở được dùng để xây dựng các thành phần UI có thể tái sử dụng, hiển thị dữ liệu thay đổi theo thời gian. Vai trò của ReactJS React là một thư viện JavaScript xây dựng giao diện người dùng hoặc UIs.
Ngoài ra, React có thể dễ dàng tái sử dụng (tiết kiệm thời gian phát triển và giảm nguy cơ xảy ra lỗi), React đi kèm với hai tính năng chính là JSX và Virtual Dom. Định nghĩa JSX JSX là cú pháp mở rộng của Javascript giúp dễ dàng sửa đổi DOM bằng cách sử dụng mã HTML đơn giản, tương thích với hầu hết các nền tảng trình duyệt. Định nghĩa Virtual Dom Hình 4. Định nghĩa Virtual Dom Virtual DOM là một định dạng dữ liệu của Javascript giúp thể hiện nội dung của DOM tại một thời điểm nhất định.
Khi trạng thái của đối tượng thay đổi, Virtual DOM chỉ thay đổi đối tượng đó trong DOM thực thay vì cập nhật lại các đối tượng trong DOM. Định nghĩa Hooks Hooks là một bổ sung mới trong React 16. Chúng cho phép sử dụng trạng thái và các tính năng khác của React mà không cần viết một lớp. Định nghĩa Component 25 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Component là các thành phần độc lập của giao diện và có thể tái sử dụng lại.
Các component được dùng bằng cách gọi tên tương tự các thẻ HTML và nhiệm vụ chính là trả về HTML thông qua hàm render. Có 2 loại component trong ReactJS: - Function Component - Class Component 2. Giới thiệu về Redux 2. Định nghĩa Redux Redux là một công cụ cho phép quản lý state trong ứng dụng Javascript với khả năng hỗ trợ viết các ứng dụng hoạt động một cách nhất quán, linh hoạt trong các môi trường khác nhau (client, server, native) và dễ dàng test.
Định nghĩa Redux Redux thường là bộ đôi kết hợp hoàn hảo với React. Khi sử dụng Redux, state của ứng dụng được lưu trong store và mỗi component có thể truy cập vào bất kỳ state nào mà nó cần từ store này. Cách thức hoạt động của Redux Cách thức hoạt động của Redux: Có một store lưu giữ toàn bộ state của ứng dụng. Mỗi component có thể truy cập state được lưu trữ mà không cần phải gửi các props từ component này sang component khác.
26 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT Hình 6. Cách thức hoạt động của Redux Redux hoạt động dựa vào 3 thành phần cơ bản: Actions, Reducers và Store. - Action: các events giúp gửi dữ liệu từ ứng dụng tới store. Các tác vụ được gửi bằng phương thức store.
Các actions là các đối tượng JavaScript và chúng phải có type để chỉ ra loại action sẽ được thực hiện. - Reducer: các function lấy state hiện tại của ứng dụng, thực hiện một action và trả về state mới. Các states này được lưu trữ dưới dạng các đối tượng và chỉ định cách state của ứng dụng thay đổi để đáp ứng với một action được gửi đến store. - Store: lưu trữ các states của ứng dụng.
Các actions được thực hiện trên state luôn trả về state mới. Như vậy, state rất dễ dự đoán trước. Vai trò của Redux - Hỗ trợ dự đoán và quản lý các states - Dễ dàng bảo trì, test và gỡ lỗi - Tối ưu hiệu suất giúp các components kết nối dễ dàng và hiển thị ngay khi thực hiện - Giữ state trong bộ nhớ cục bộ của ứng dụng và khôi phục dễ dàng - Xử lý render ban đầu của ứng dụng bằng cách gửi state đến server cùng với phản hồi của nó 27 CHƯƠNG 3: KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU CHƯƠNG 3: KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU 3. Khảo sát hiện trạng Bằng các từ khoá "website bán áo bóng đá", " football kits website " để tìm các website làm về đề tài này thì Google trả về rất nhiều kết quả phù hợp kể cả trong nước và quốc tế.
Tuy nhiên để đảm bảo tính phổ biến, thịnh hành của các website, nhóm em tiến hành chọn 3 website đứng đầu với mỗi từ khoá để khảo sát. Website nước ngoài 3.com/en/ Hình 7. Trang chủ website kitbag.com Đây là website được hiển thị đầu tiên trong trang kết quả tìm kiếm với từ khóa. Kitbag là công ty hàng đầu trên toàn thế giới về bộ dụng cụ và áo thi đấu bóng đá được cấp phép chính thức cho các câu lạc bộ yêu thích.
28 CHƯƠNG 3: KHẢO SÁT VÀ XÁC ĐỊNH YÊU CẦU Hình 8. Trang chi tiết sản phẩm website kitbag. Trang giỏ hàng website kitbag.