CHƯƠNG 1: CƠ SỞ LÝ THUYẾT Hệ thống quản lý sách được tạo nên bởi 4 thành phần chính: - Front-end: giao diện sử dụng bởi người quản lý Công nghệ sử dụng: ReactJS/NextJS. - Back-end: cung cấp các Api cho ứng dụng Công nghệ sử dụng: NestJS. - Message Service: hệ thống quản lý thông tin sự kiện Công nghệ sử dụng: Kafka. - Matching Service: trích xuất dữ liệu đồng bộ Công nghệ sử dụng: ngôn ngữ Python, ASR model.
Ngoài ra, hệ thống sử dụng Postgres làm cơ sở dữ liệu và Docker để ảo hóa một số thành phần hệ thống, giúp hệ thống dễ dàng triển khai và cài đặt ở môi trường mới. Khái niệm Theo “The Road to React: Your journey to master plain yet pragmatic React.js” của Robin Wieruch [1], ReactJS là một thư viện JavaScript mã nguồn mở được xây dựng bởi Facebook để xây dựng các giao diện người dùng tương tác. ReactJS sử dụng mô hình lập trình theo thành phần (component-based programming) để xây dựng các ứng dụng web dễ bảo trì và mở rộng. Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau.
React sử dụng khái niệm DOM ảo (Virtual DOM) để chọn lựa và render những phần tử của node dựa tên sự thay đổi trạng thái khiến cho ta chỉ cần thay đổi ít thành phần nhất có thể để giữ DOM update. Đặc điểm Reactjs cực kì hiệu quả: Reactjs tạo ra cho chính nó DOM ảo – nơi mà các component thực sự tồn tại trên đó. Điều này sẽ giúp cải thiện hiệu suất rất nhiều. Hoàng Anh Đức – D19CNPM04 Trang 4 Đồ án tốt nghiệp Reactjs giúp việc viết các đoạn code JS dễ dàng hơn: Nó dung cú pháp đặc biệt là JSX (Javascript mở rộng) cho phép ta trộn giữa code HTML và Javascript.
Ta có thể them vào các đoạn HTML vào trong hàm render mà không cần phải nối chuỗi. Reactjs là một thư viện component, nó có thể vừa render ở ngoài trình duyệt sử dụng DOM và cũng có thể render bằng các chuỗi HTML mà server trả về. Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS. 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.
Hạn chế Học tập đường cong: ReactJS có một đường cong học tập dốc, đặc biệt là đối với người mới bắt đầu phát triển web. Ngôn ngữ JSX và mô hình lập trình phản ứng có thể gây nhầm lẫn và khó hiểu đối với một số người. Hiệu suất: Mặc dù ReactJS nói chung rất nhanh, nhưng nó có thể trở nên chậm chạp khi ứng dụng trở nên lớn hơn và phức tạp hơn. Điều này đặc biệt đúng đối với các ứng dụng có nhiều trạng thái hoặc được kết xuất lại thường xuyên.
Phụ thuộc vào thư viện bên thứ ba: ReactJS phụ thuộc vào một số lượng lớn các thư viện bên thứ ba để hoạt động. Điều này có thể khiến cho việc triển khai và quản lý ứng dụng trở nên phức tạp hơn và làm tăng khả năng xảy ra lỗi. Thiếu kiểm tra loại: ReactJS là một ngôn ngữ động, vì vậy không có hệ thống kiểm tra loại nào đảm bảo rằng các giá trị có đúng loại hay không cho đến khi chúng được thực thi. Điều này có thể dẫn đến lỗi thời gian chạy khó gỡ lỗi và khó theo dõi.
Các vấn đề về SEO: ReactJS là một khung dựng hình phía trước, nghĩa là nó tạo ra nội dung HTML động trong trình duyệt. Điều này có thể gây khó khăn cho các công cụ tìm kiếm để lập chỉ mục và xếp hạng nội dung của ứng dụng. Kích thước gói: Các ứng dụng ReactJS có thể trở nên khá lớn, điều này có thể ảnh hưởng đến thời gian tải và hiệu suất của ứng dụng. Để giảm kích thước, các công cụ như webpack và Browserify có thể được sử dụng để đóng gói và thu nhỏ mã ứng dụng.
Khái niệm NextJS là framework mã nguồn mở được xây dựng trên nền tảng của React. Hoàng Anh Đức – D19CNPM04 Trang 5 Đồ án tốt nghiệp ReactJS cho phép chúng ta xây dựng các trang web tĩnh có tốc độ siêu nhanh và thân thiện với người dùng, cũng như xây dựng các ứng dụng web React. NextJS được ra đời vào năm 2016, thuộc sở hữu của Vercel. NextJS bắt đầu trở nên phổ biến vào năm 2018 và tiếp tục tăng trưởng mạnh mẽ trong cộng đồng phát triển web vào những năm sau đó.
Sự kết hợp của các tính năng như Server-side Rendering (SSR) với Static Site Generation (SSG) đã giúp NextJS trở thành sự lựa chọn hấp dẫn cho nhiều dự án phát triển ứng dụng web. Đặc điểm Kiến trúc tĩnh: Next.js sử dụng kiến trúc tĩnh, có nghĩa là mã của bạn được biên dịch thành các tệp HTML, CSS và JavaScript tĩnh tại thời điểm xây dựng. Điều này làm cho Next.js rất nhanh, vì các tệp tĩnh có thể được tải xuống và hiển thị ngay lập tức mà không cần phải xử lý bất kỳ mã nào trên máy chủ. Khả năng tạo trang web có khả năng tương tác cao: Next.js cung cấp một số tính năng giúp bạn dễ dàng tạo trang web có khả năng tương tác cao, chẳng hạn như hỗ trợ cho các thành phần tương tác, chuyển đổi trang mượt mà và các hiệu ứng hoạt hình.
Tối ưu hóa SEO: Next.js được thiết kế để tối ưu hóa cho SEO, có nghĩa là các trang web được xây dựng bằng Next.js sẽ có thứ hạng cao hơn trong các công cụ tìm kiếm. Hỗ trợ TypeScript: Next.js hỗ trợ TypeScript, một siêu tập hợp của JavaScript, giúp bạn viết mã an toàn hơn và bảo trì dễ dàng hơn. Hạn chế Khó khăn trong việc tích hợp với một số thư viện bên ngoài: Một số thư viện và plugin có thể cần phải điều chỉnh hoặc tùy chỉnh để hoạt động tốt với Next. Ví dụ như để sử dụng Redux trong ứng dụng NextJS, các bạn cần cài thêm thư viện next- redux-wrapper để quản lý state trên cả server và client.
Đòi hỏi chạy trên server NodeJS: Để deploy ứng dụng NextJS, bạn cần có một máy chủ NodeJS, việc này có thể làm tăng chi phí và quá trình triển khai sẽ trở nên phức tạp hơn. Tốc độ phát triển chậm hơn: Next.js vẫn là một framework tương đối mới và đang trong quá trình phát triển. Do đó, có thể mất nhiều thời gian hơn để xây dựng và triển khai các ứng dụng Next.js so với các framework khác. Hoàng Anh Đức – D19CNPM04 Trang 6 Đồ án tốt nghiệp Khá phức tạp để thiết lập: Việc thiết lập một ứng dụng Next.js có thể khá phức tạp, đặc biệt là nếu bạn chưa có kinh nghiệm với JavaScript hoặc các framework khác.
Bạn sẽ cần phải cài đặt nhiều công cụ và thư viện khác nhau để có thể bắt đầu sử dụng Next. Khái niệm NestJS là một framework mã nguồn mở để phát triển ứng dụng server-side (backend applications) bằng ngôn ngữ TypeScript hoặc JavaScript. Nó được xây dựng trên cơ sở của Node.js và sử dụng các khái niệm từ TypeScript để tạo ra một môi trường phát triển hiện đại và mạnh mẽ cho việc xây dựng các ứng dụng web và API. Mục tiêu chính của NestJS là cung cấp một cấu trúc ứng dụng rõ ràng và dễ quản lý, giúp tăng tính bảo trì và sự tổ chức trong mã nguồn.
Để đạt được điều này, NestJS triển khai mô hình kiến trúc lõi (core architecture) dựa trên các nguyên tắc của Angular, đặc biệt là sử dụng Dependency Injection (DI) và Modules (Các module). Đặc điểm NestS là một framework phát triển backend mã nguồn mở đáng chú ý, được xây dựng dựa trên Node.js và sử dụng ngôn ngữ TypeScript hoặc JavaScript. Đặc điểm nổi bật của NestJS là mô hình kiến trúc lõi giúp tổ chức ứng dụng một cách rõ ràng và dễ quản lý, giúp lập trình viên xây dựng các ứng dụng server-side hiện đại và phức tạp một cách hiệu quả. Một trong những ưu điểm nổi bật của NestJS là việc hỗ trợ cả TypeScript và JavaScript.
Lập trình viên có thể lựa chọn ngôn ngữ phù hợp với nhu cầu và kinh nghiệm của họ. TypeScript là một ngôn ngữ mở rộng của JavaScript, cung cấp kiểu dữ liệu tĩnh và các tính năng nâng cao, giúp mã nguồn dễ đọc và dễ bảo trì hơn. NestJS triển khai mô hình kiến trúc lõi, trong đó mỗi ứng dụng bao gồm ít nhất một module gốc và có thể có nhiều module con. Mỗi module đại diện cho một phần chức năng cụ thể của ứng dụng, giúp mã nguồn trở nên rõ ràng, tổ chức tốt hơn và dễ quản lý.
Với NestJS, việc sử dụng Dependency Injection (DI) là một cách hiệu quả để giảm sự phụ thuộc cứng giữa các thành phần của ứng dụng. DI giúp bạn tạo ra mã linh hoạt, tái sử dụng và dễ kiểm thử. Các decorator (chú thích) trong NestJS giúp xác định vai trò và mục đích của từng thành phần trong mã nguồn như Controllers, Providers, Middleware, v., giúp bạn dễ dàng hiểu và bảo trì mã nguồn. Hoàng Anh Đức – D19CNPM04 Trang 7 Đồ án tốt nghiệp NestJS hỗ trợ Middleware và Interceptors, giúp bạn thực hiện các thao tác chung trước và sau khi xử lý yêu cầu HTTP.
Điều này giúp bạn xử lý các yêu cầu HTTP trước khi chúng đến các route xử lý chính và thay đổi response trước khi nó được gửi về client. Exception handling (xử lý ngoại lệ) là một phần quan trọng trong NestJS, giúp bạn xử lý các exception xảy ra trong ứng dụng và trả về các thông báo lỗi thích hợp cho client khi có lỗi xảy ra. Hạn chế Khúc học cong cao: NestJS có một đường cong học tập dốc hơn một số khuôn khổ JavaScript khác, vì vậy có thể mất nhiều thời gian hơn để bắt đầu. Điều này đặc biệt đúng đối với các nhà phát triển không quen với lập trình hướng đối tượng.
Thiếu một số tính năng: NestJS không có một số tính năng có sẵn trong các khuôn khổ JavaScript khác, chẳng hạn như hỗ trợ các thành phần web tùy chỉnh hoặc khả năng tạo các ứng dụng di động. Quy trình xây dựng phức tạp: Quy trình xây dựng cho NestJS có thể phức tạp, đặc biệt là đối với các dự án lớn hoặc phức tạp. Điều này có thể khiến việc triển khai và bảo trì ứng dụng trở nên khó khăn hơn. Khó gỡ lỗi: Quá trình gỡ lỗi cho NestJS có thể khá thách thức, đặc biệt là đối với những người mới bắt đầu.
Điều này một phần là do kiến trúc hướng đối tượng của NestJS, có thể gây khó khăn trong việc theo dõi luồng thực thi của ứng dụng. Thiếu tài liệu và cộng đồng: NestJS vẫn là một khuôn khổ tương đối mới, nên tài liệu và cộng đồng còn khá hạn chế.