Chương 1: Tổng quan về đề tài 1. Mục tiêu Mục tiêu chính của dự án là sử dụng các công nghệ ReactJS, Java Spring Boot, PostgreSQL, Firebase để xây dựng một trang web học từ vựng tiếng Anh hiệu quả dựa trên phương pháp Spaced Repetition. Dự án sẽ áp dụng quy trình phát triển phần mềm SCRUM để đảm bảo sự linh hoạt và hiệu quả trong việc quản lý dự án. Việc phát triển source code nói chung tuân theo các nguyên tắc SOLID cơ bản để đảm bảo khả năng mở rộng và bảo trì, cũng như áp dụng các nguyên lý về functional programming trong phát triển Frontend, cũng như JSONAPI trong thiết kế và phát triển REST API.
Công nghệ sử dụng Front-end: sử dụng ReactJS Back-end: sử dụng Java Spring Boot Database: PostgreSQL Các dịch vụ khác: Heroku, Netlify, OpenAI, WordsAPI 1. Phương pháp nghiên cứu Lý thuyết thực tiễn: Tìm hiểu tính năng, giao diện các trang web và ứng dụng di động học từ vựng tiếng anh có sẵn. Tìm hiểu tài liệu về công nghệ sử dụng trong dự án. Tham khảo chuyên gia: Tham khảo ý kiến của giảng viên hướng dẫn và người có kinh nghiệm liên quan đến các vấn đề của đề tài.
Phát triển mô hình: Phát triển dự án theo mô hình phát triển phần mềm từ đặc tả, thiết kế đến hoàn thành sản phẩm. 11 Chương 2: Cơ sở lý thuyết CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2. Giới thiệu ReactJS là một thư viện JavaScript mã nguồn mở, được phát triển bởi Facebook, cho việc xây dựng giao diện người dùng (UI) động và linh hoạt. ReactJS giúp phát triển ứng dụng web hiệu quả và dễ bảo trì thông qua việc quản lý các thành phần (components) tái sử dụng.
Được xây dựng dựa trên ý tưởng "One-way data binding," ReactJS tối ưu hóa sự tương tác giữa các thành phần, mang lại trải nghiệm người dùng mượt mà và nhanh chóng. Ưu điểm ReactJS cho phép phân chia UI thành các thành phần độc lập, dễ dàng quản lý và tái sử dụng. Tạo điều kiện thuận lợi cho việc phát triển ứng dụng lớn mà không gặp vấn đề về quản lý mã nguồn. ReactJS sử dụng virtual DOM để tối ưu hóa quá trình render, giảm số lượng thay đổi trên DOM thực tế và cải thiện hiệu suất ứng dụng.
Hỗ trợ Cộng đồng mạnh mẽ. Nhược điểm Khá khó học đối với người mới bắt đầu. Cần tích hợp với nhiều thư viện và công nghệ khác nhau để xây dựng thành một ứng dụng hoàn chỉnh. Lý do sử dụng ReactJS giúp xây dựng giao diện người dùng linh hoạt và hiệu quả, đồng thời cung cấp giải pháp hiệu suất cao thông qua virtual DOM.
Với cộng đồng đông đảo và sự hỗ trợ từ Facebook, ReactJS đảm bảo rằng bạn có nguồn lực và kiến thức để giải quyết mọi vấn đề trong quá trình phát triển. ReactJS có khả năng tích hợp với nhiều thư viện và framework khác, giúp bạn linh hoạt trong việc lựa chọn công nghệ cho dự án của mình. 12 Chương 2: Cơ sở lý thuyết 2. Giới thiệu Firebase là một nền tảng phát triển ứng dụng di động và web được cung cấp bởi Google.
Nó cung cấp một loạt các dịch vụ và công cụ mạnh mẽ cho việc xây dựng và triển khai ứng dụng mà không cần phải quan tâm đến các vấn đề hạ tầng phức tạp. Firebase hỗ trợ nhiều tính năng như cơ sở dữ liệu thời gian thực, xác thực người dùng, lưu trữ tệp, hosting và nhiều dịch vụ khác. Ưu điểm Dễ sử dụng và nhanh chóng. Cơ sở dữ liệu thời gian thực giúp đồng bộ dữ liệu trực tiếp.
Xác thực người dùng đơn giản thông qua nhiều phương tiện. Lưu trữ tệp linh hoạt và dễ quản lý. Nhược điểm Giới hạn về tính tùy chỉnh. Chi phí có thể tăng lên khi sử dụng nhiều nguồn lực.
Lý do sử dụng Phát triển nhanh chóng và tập trung vào logic kinh doanh. Dịch vụ đa chức năng với tích hợp sẵn của Database, Authentication, Hosting, và Analytics. Hỗ trợ mạnh mẽ từ Google, đảm bảo ổn định và cập nhật liên tục. Giới thiệu Netlify là một dịch vụ đám mây cung cấp nền tảng phát triển và triển khai cho các ứng dụng web và trang web.
Nó giúp đơn giản hóa quá trình xây dựng, triển khai và quản lý ứng dụng mà không đòi hỏi kiến thức chuyên sâu về hạ tầng. Netlify cung cấp các tính năng như triển khai liên tục, quản lý địa chỉ DNS, HTTPS tự động, và nhiều dịch vụ khác để tối ưu hóa quy trình phát triển. Ưu điểm Giao diện người dùng thân thiện và trực quan. Quy trình triển khai đơn giản và nhanh chóng.
13 Chương 2: Cơ sở lý thuyết Hỗ trợ triển khai liên tục từ các kho lưu trữ phổ biến như GitHub và GitLab. Cung cấp tính năng quản lý DNS tích hợp, giúp dễ dàng quản lý tên miền. Tự động cung cấp HTTPS cho tất cả các trang web mà không cần cấu hình phức tạp. Nhược điểm Có thể có giới hạn đối với những ứng dụng đòi hỏi tùy chỉnh cao.
Sử dụng các tính năng mạnh mẽ có thể đi kèm với chi phí tăng lên. Lý do sử dụng Quy trình xây dựng và triển khai đơn giản giúp tập trung vào phát triển ứng dụng. Tích hợp liền mạch nhiều dịch vụ như triển khai liên tục, quản lý DNS và HTTPS tự động. Được hỗ trợ mạnh mẽ từ cộng đồng và đội ngũ phát triển Netlify, đảm bảo ổn định và cập nhật liên tục.
Giới thiệu Shadcn là một thư viện UI của React. Shadcn cung cấp một bộ các thành phần UI được thiết kế sẵn, giúp cho việc phát triển giao diện người dùng React trở nên dễ dàng và nhanh chóng hơn. Ưu điểm Shadcn sử dụng các nguyên tắc thiết kế hiện đại, giúp cho giao diện người dùng của bạn trông đẹp mắt và dễ sử dụng. Shadcn cung cấp một bộ các thành phần UI được thiết kế sẵn, bao gồm các thành phần cơ bản như nút, hộp văn bản.
và các thành phần phức tạp hơn như thanh trượt, lịch. Shadcn được xây dựng dựa trên React, vì vậy nó rất dễ sử dụng đối với các lập trình viên React. Nhược điểm Shadcn bao gồm nhiều thành phần UI, vì vậy nó có thể khiến ứng dụng của bạn nặng hơn. 14 Chương 2: Cơ sở lý thuyết Shadcn cung cấp các thành phần UI được thiết kế sẵn, vì vậy bạn có thể không thể tùy chỉnh chúng theo ý muốn.
Lý do sử dụng Phát triển giao diện người dùng React một cách nhanh chóng và dễ dàng. Sử dụng các thành phần UI được thiết kế sẵn với chất lượng cao. Tương thích với nhiều phiên bản ReactJS, trong đó có React 18. Giới thiệu Tailwind CSS là một framework CSS mà không có bất kỳ CSS nào được viết sẵn trước.
Thay vào đó, Tailwind cung cấp một bộ các class utility giúp thiết kế giao diện web một cách linh hoạt và hiệu quả. Với cú pháp dễ đọc và mô-đun, Tailwind CSS giúp người phát triển tạo ra giao diện đẹp và dễ bảo trì mà không làm tăng kích thước của file CSS. Ưu điểm Cú pháp class rõ ràng và dễ đọc, giảm sự phức tạp trong việc quản lý CSS. Cho phép tùy chỉnh mỗi class hoặc thêm các plugin để mở rộng tính năng.
Tạo ra CSS hiệu quả mà không tăng kích thước của file CSS quá mức. Nhược điểm Có thể gặp khó khăn trong việc tích hợp với các dự án yêu cầu CSS phức tạp hơn. Mặc dù đơn giản, nhưng có thể đòi hỏi một thời gian để làm quen với cú pháp và các class utility. Lý do sử dụng Giúp tăng tốc quá trình phát triển với các class sẵn có.
Dễ dàng tích hợp với nhiều dự án khác nhau và các framework JavaScript. Giảm sự phức tạp của CSS và giúp dễ bảo trì mã nguồn. Giới thiệu useSWR là một hook React giúp quản lý trạng thái dữ liệu và tái sử dụng các request HTTP trong ứng dụng React một cách hiệu quả. Được xây dựng trên cơ sở 15 Chương 2: Cơ sở lý thuyết của fetch, useSWR tự động quản lý việc lấy dữ liệu từ server, caching kết quả, và tự động làm mới dữ liệu khi có sự kiện tái sử dụng.
Ưu điểm Cung cấp giao diện sử dụng đơn giản và dễ hiểu. Tích hợp dễ dàng vào các dự án React hiện tại. Cho phép quản lý trạng thái dữ liệu theo cách tự định nghĩa. Tự động làm mới dữ liệu khi có sự kiện tái sử dụng, giảm độ phức tạp trong việc quản lý cache.
Nhược điểm Mặc dù đơn giản, nhưng có thể gặp khó khăn trong việc tùy chỉnh hành vi một số trường hợp đặc biệt. Có thể không có sự ổn định như một số thư viện quản lý trạng thái dữ liệu khác. Lý do sử dụng Giúp quản lý trạng thái dữ liệu một cách hiệu quả và tự động. Dễ tích hợp vào các dự án React hiện tại mà không cần thay đổi quá nhiều mã nguồn.
Giúp giảm độ phức tạp trong quá trình quản lý cache và làm mới dữ liệu. Giới thiệu Spring Boot là một framework phát triển ứng dụng Java được xây dựng trên nền tảng Spring Framework. Nó cung cấp một cách tiếp cận linh hoạt và hiệu quả để xây dựng ứng dụng Java dựa trên các nguyên tắc "Convention over Configuration" và "Opinionated Defaults". Spring Boot giúp giảm độ phức tạp của việc cấu hình và triển khai ứng dụng Java.
Ưu điểm Cung cấp cấu hình mặc định thông minh và tự động cho nhiều tính năng. Giảm độ phức tạp của việc cấu hình, giúp phát triển nhanh chóng. Tích hợp tốt với nhiều công nghệ và thư viện khác của Java. 16 Chương 2: Cơ sở lý thuyết 2.
Nhược điểm Dành cho các dự án lớn, có thể quá mạnh mẽ cho các ứng dụng nhỏ. Mặc dù giảm độ phức tạp, nhưng có thể giảm khả năng tùy chỉnh cho những trường hợp đặc biệt. Lý do sử dụng Giúp tăng tốc quá trình phát triển ứng dụng Java với cấu hình mặc định thông minh. Dễ tích hợp với các thư viện và công nghệ khác của Java.
Cung cấp các tiêu chuẩn và conventions giúp duy trì mã nguồn và triển khai dễ dàng. Giới thiệu PostgreSQL là một hệ quản trị cơ sở dữ liệu mã nguồn mở và một trong những hệ quản trị cơ sở dữ liệu phổ biến nhất trên thế giới. Với khả năng chịu tải cao, độ tin cậy và tính mở rộng, PostgreSQL là sự lựa chọn ưu việt cho nhiều ứng dụng, từ dự án nhỏ đến các hệ thống quy mô lớn. Ưu điểm Đảm bảo tính toàn vẹn và nhất quán của dữ liệu thông qua các giao dịch.
Hỗ trợ đồng thời nhiều truy cập người dùng và các kết nối cơ sở dữ liệu. Cung cấp khả năng mở rộng dự án theo nhu cầu và hỗ trợ các kiểu dữ liệu đa dạng.