4.2.1.1. Giới thiệu
ReactJS là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng. ReactJS được phát triển bởi Facebook và đang được sử dụng rộng rãi trong việc xây dựng các ứng dụng web đơn trang (Single-Page Applications - SPAs).
ReactJS có kiến trúc thành phần (component-based architecture) giúp tách biệt giao diện thành các thành phần độc lập, dễ quản lý và tái sử dụng.
4.2.1.2. Ưu điểm
− Tái sử dụng: ReactJS sử dụng kiến trúc thành phần, cho phép tái sử dụng các thành phần giao diện người dùng. Điều này giúp giảm đáng kể công sức lập trình và tăng tốc độ phát triển.
− Hiệu suất cao: ReactJS sử dụng Virtual DOM (DOM ảo) để quản lý và cập nhật giao diện người dùng. Khi có thay đổi, ReactJS chỉ cập nhật phần DOM
thực sự thay vì toàn bộ DOM, điều này tạo ra hiệu suất cao hơn so với cách tiếp cận truyền thống.
− Cộng đồng mạnh mẽ: ReactJS có một cộng đồng lớn và phát triển rộng rãi, cung cấp nhiều tài liệu, thư viện và công cụ hỗ trợ. Điều này giúp người phát triển dễ dàng tìm kiếm giải pháp và hỗ trợ khi cần thiết.
4.2.1.3. Nhược điểm
− Khả năng phức tạp hóa dự án: Khi xây dựng các ứng dụng có logic phức tạp hoặc cấu trúc dữ liệu lớn, việc quản lý state và luồng dữ liệu trong ReactJS có thể trở nên phức tạp và khó điều chỉnh.
− Kiến thức ban đầu: ReactJS cần một kiến thức ban đầu cao hơn so với các thư viện JavaScript khác. Để tận dụng tối đa ReactJS, người phát triển cần phải hiểu rõ về cú pháp JSX, kiến trúc thành phần và các khái niệm liên quan.
4.2.1.4. Áp dụng
− Xây dựng giao diện người dùng linh hoạt: ReactJS cho phép tạo ra các thành phần giao diện độc lập, giúp quản lý giao diện dễ dàng và tái sử dụng nhiều lần. Trong dự án TaNa, ReactJS được sử dụng để xây dựng các thành phần giao diện như ảnh đại diện, bài viết, bình luận, hồ sơ người dùng, và nhiều phần tử khác.
Ví dụ: Thành phần ảnh đại diện là một trong những thành phần được tái sử dụng nhiều nhất trong dự án, thay vì phải xử lý logic như gắn liên kết đến trang cá nhân của người dùng, bắt sự kiện người dùng hoạt động,… ở từng nơi riêng lẻ, chúng em đã tách thành phần ảnh đại diện ra và tái sử dụng ở tất cả các nơi cần dùng đến:
Ảnh 33: Tách thành phần ảnh đại diện
Ảnh 34: Tái sử dụng thành phần ảnh đại diện ở bình luận
Ảnh 35: Tái sử dụng thành phần ảnh đại diện ở thẻ liên hệ
Ảnh 36: Tái sử dụng thành phần ảnh đại diện ở lối tắt
Ảnh 37: Tái sử dụng thành phần ảnh đại diện ở phần tạo bài viết
Ảnh 38: Tái sử dụng thành phần ảnh đại diện ở bài viết
Ảnh 39: Kết quả sử dụng lại thành phần ảnh đại diện ở trang chủ
− Tăng hiệu suất phát triển: Với kiến trúc thành phần và khả năng tái sử dụng, ReactJS giúp giảm công sức lập trình và tăng tốc độ phát triển. Trong dự án TaNa, việc sử dụng ReactJS cho phép đội phát triển tạo ra các tính năng và giao diện người dùng một cách nhanh chóng và hiệu quả.
Ví dụ:
Trang bạn bè và Tab bạn bè ở trang cá nhân đều hiển thị danh sách bạn bè như nhau:
Ảnh 40: Trang bạn bè
Ảnh 41: Trang cá nhân – Tab bạn bè
Khi tách thành phần danh sách bạn bè ra, ta chỉ cần viết 1 nơi thì sẽ tái sử dụng được cả 2 nơi:
Ảnh 42: Tách thành phần danh sách bạn bè
Ảnh 43: Tái sử dụng ở trang cá nhân – Tab bạn bè
Ảnh 44: Tái sử dụng ở trang bạn bè
4.2.2. Next JS
4.2.2.1. Giới thiệu
NextJS là một framework ReactJS phía máy chủ (server-side) giúp xây dựng ứng dụng web tĩnh và động. NextJS cho phép viết mã JavaScript cả phía máy chủ và phía khách hàng (client) trong cùng một dự án, cung cấp khả năng tạo ra các ứng dụng web hiệu quả với tốc độ tải trang nhanh và tải trọng máy chủ thấp.
4.2.2.2. Ưu điểm
− Tối ưu hóa SEO: NextJS cho phép xây dựng các trang web tĩnh tối ưu hóa SEO. Thông qua tính năng server-side rendering (SSR), NextJS có thể tạo ra các trang HTML đầy đủ và tối ưu cho công cụ tìm kiếm, giúp cải thiện khả năng tìm thấy và xếp hạng của trang web.
− Routing tự động: NextJS cung cấp routing tự động dựa trên cấu trúc thư mục.
Điều này giúp đơn giản hóa việc quản lý các đường dẫn và tạo ra các URL thân thiện với người dùng.
4.2.2.3. Nhược điểm
− Phức tạp hóa quản lý state: NextJS không có cơ chế quản lý state tích hợp như Redu. Điều này có thể gây khó khăn trong việc quản lý state của ứng dụng và tạo ra một cấu trúc dự án phức tạp hơn.
− Tăng chi phí cho ứng dụng quy mô lớn: NextJS với tính năng server-side rendering (SSR) có thể tăng chi phí cho máy chủ khi phải xử lý các yêu cầu động của nhiều người dùng. Điều này đòi hỏi tài nguyên máy chủ mạnh mẽ hơn để đảm bảo khả năng mở rộng và hiệu suất của ứng dụng.
4.2.2.4. Áp dụng
− Xây dựng trang web tĩnh và tối ưu hóa SEO: NextJS hỗ trợ việc tạo ra các trang web tĩnh với tính năng server-side rendering (SSR). Điều này giúp TaNa có thể tạo ra các trang web tối ưu hóa SEO, cung cấp nội dung đầy đủ cho công cụ tìm kiếm và cải thiện khả năng tìm thấy và xếp hạng của trang web trên kết quả tìm kiếm.
Ví dụ: Trang bài viết, hàm getServerSideProps của NextJS sẽ xử lý trước khi tải trang, nếu là bài viết công khai, thông tin bài post sẽ được truyền vào thành phần PostSEO giúp tối ưu SEO cho trang về bài viết.
Ảnh 45: Tối ưu SEO ở trang bài viết
− Routing tự động và tạo ra các trang động: NextJS cung cấp routing tự động dựa trên cấu trúc thư mục. Điều này giúp quản lý đường dẫn và tạo ra các URL thân thiện với người dùng trong dự án TaNa.
Ví dụ: Trong dự án, chúng em chỉ cần tạo đường dẫn đúng với route cần xử lý, không cần xử lý routing.
Ảnh 46: Routing tự động theo thư mục 4.2.3. Node JS
4.2.3.1. Giới thiệu
NodeJS là một môi trường runtime chạy JavaScript đa nền tảng và có mã nguồn mở, được sử dụng để chạy các ứng dụng web bên ngoài trình duyệt của client. Nền tảng này được phát triển bởi Ryan Dahl vào năm 2009, được xem là một giải pháp hoàn hảo cho các ứng dụng sử dụng nhiều dữ liệu nhờ vào mô hình hướng sự kiện (event-driven) không đồng bộ.
4.2.3.2. Ưu điểm
- IO hướng sự kiện không đồng bộ, cho phép xử lý nhiều yêu cầu đồng thời.
- Sử dụng JavaScript – một ngôn ngữ lập trình dễ học.
- Chia sẻ cùng code ở cả phía client và server.
- NPM(Node Package Manager) và module Node đang ngày càng phát triển mạnh mẽ.
- Cộng đồng hỗ trợ tích cực.
- Cho phép stream các file có kích thước lớn.
4.2.3.3. Nhược điểm
- Không có khả năng mở rộng, vì vậy không thể tận dụng lợi thế mô hình đa lõi trong các phần cứng cấp server hiện nay.
- Khó thao tác với cơ sử dữ liệu quan hệ.
- Mỗi callback sẽ đi kèm với rất nhiều callback lồng nhau khác.
- Cần có kiến thức tốt về JavaScript.
- Không phù hợp với các tác vụ đòi hỏi nhiều CPU.
4.2.3.4. Áp dụng
Cài đặt server chạy với PORT trong file .env hoặc sẽ chạy ở port 8800:
Ảnh 47: Code – nodejs cài đặt server
4.2.4. Express JS 4.2.4.1. Giới thiệu
Expressjs là một framework được xây dựng trên nền tảng của Nodejs.
Nó cung cấp các tính năng mạnh mẽ để phát triển web hoặc mobile. Expressjs hỗ trợ các method HTTP và midleware tạo ra API vô cùng mạnh mẽ và dễ sử dụng.
Ảnh 48: Mô hình ExpressJS
Tổng hợp một số chức năng chính của Expressjs như sau:
- Thiết lập các lớp trung gian để trả về các HTTP request.
- Define router cho phép sử dụng với các hành động khác nhau dựa trên phương thức HTTP và URL.
- Cho phép trả về các trang HTML dựa vào các tham số.
4.2.4.2. Ưu điểm
- Rất dễ học, chỉ cần bạn biết JavaScript, bạn sẽ không cần phải học một ngôn ngữ mới để học ExpressJS
- Giúp cho việc phát triển back-end dễ dàng hơn nhiều khi sử dụng ExpressJS
- Mã JavaScript được diễn giải thông qua Google V8 JavaScript Engine của Node.js. Do đó, mã sẽ được thực hiện một cách nhanh chóng và dễ dàng.
- ExpressJS rất đơn giản để tùy chỉnh và sử dụng theo nhu cầu.
- Cung cấp một module phần mềm trung gian linh hoạt và rất hữu ích để
- Hỗ trợ phát triển ứng dụng theo mô hình MVC, đây là mô hình phổ biến cho việc lập trình web hiện nay.
4.2.4.3. Nhược điểm
- Thiếu tích hợp mặc định: Express.js được xây dựng với triết lý "middleware- first", điều này có nghĩa là nó tập trung vào việc cung cấp middleware mạnh mẽ và linh hoạt để xử lý các yêu cầu HTTP. Tuy nhiên, nó không cung cấp tích hợp mặc định cho một số tính năng như ORM (Object-Relational Mapping), xác thực người dùng, và quản lý phiên. Điều này đòi hỏi người phát triển phải tự lựa chọn và tích hợp các thư viện hoặc module bên thứ ba để đáp ứng các yêu cầu cụ thể.
- Cấu trúc tổ chức dự án: Express.js không đưa ra quy định cụ thể về cấu trúc tổ chức dự án. Điều này có thể dẫn đến việc tổ chức dự án không đồng nhất và khó quản lý trong các dự án lớn và phức tạp. Người phát triển phải tự quyết định về cách tổ chức các tệp tin, thư mục và module trong dự án.
- Quản lý trạng thái: Express.js không cung cấp một cách thức mặc định để quản lý trạng thái (state) của ứng dụng. Khi xây dựng các ứng dụng phức tạp với nhiều trạng thái và quyền truy cập, việc quản lý trạng thái có thể trở nên phức tạp và tốn nhiều công sức.
- Tài liệu hạn chế: Mặc dù Express.js có một cộng đồng phát triển mạnh mẽ, tài liệu chính thức của nó có thể còn hạn chế và không chi tiết. Điều này có thể làm khó khăn cho người mới học và tìm hiểu Express.js.
4.2.4.4. Áp dụng
Import và sử dụng express trong file app.js
Ảnh 49: Code – import express
Set up các routes:
Ảnh 50: Code – Set up các routes
Tạo middleware xác thực trước khi vào controller:
Ảnh 51: Code – Middleware xác thực
Controller: nơi mà xử lý các yêu cầu và trả về cho người dùng
Ảnh 52: Code - Controller
4.2.5. MongoDB 4.2.5.1. Giới thiệu
MongoDB là một cơ sở dữ liệu mã nguồn mở, được hàng triệu người sử dụng. MongoDB được viết bằng C++. MongoDB là một database hướng tài liệu (document), một dạng NoSQL database. Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON. MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ và các document khác nhau. Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh.
Ngoài ra, MongoDB là một cơ sở dữ liệu đa nền tảng, hoạt động trên các khái niệm Collection và Document, nó cung cấp hiệu suất cao, tính khả dụng cao và khả năng mở rộng dễ dàng.
4.2.5.2. Ưu điểm
- Dữ liệu lưu trữ phi cấu trúc, không có ràng buộc, toàn vẹn, giúp tăng tính sẵn sàng, hiệu suất và mở rộng lưu trữ dễ dàng.
- Dữ liệu được caching trên RAM, giảm truy cập vào ổ cứng, tăng tốc độ đọc và ghi.
4.2.5.3. Nhược điểm
- Không thích hợp cho các mô hình giao dịch đòi hỏi độ chính xác cao do thiếu ràng buộc.
- Thiếu cơ chế giao dịch (transaction) để hỗ trợ ứng dụng ngân hàng.
- Hoạt động dựa trên việc sử dụng RAM, vì vậy yêu cầu một lượng lớn bộ nhớ RAM khi hoạt động.
- Mọi thay đổi về dữ liệu mặc định chưa được ghi xuống ổ cứng ngay lập tức, do đó có nguy cơ cao mất dữ liệu khi xảy ra mất điện đột ngột.
4.2.5.4. Áp dụng
Dùng thư viện mongoose để kết nối đến MongoDB. Mongoose là một thư viện ODM (Object-Document Mapping) cho Node.js và MongoDB. Nó cung cấp một cách tiện lợi và linh hoạt để tương tác với cơ sở dữ liệu MongoDB thông qua JavaScript.
Mongoose giúp đơn giản hóa việc tạo, định nghĩa và thao tác với các mô hình dữ liệu, cung cấp các tính năng như xác thực, kiểm tra dữ liệu và tạo quan hệ giữa các bảng.
Ảnh 53: Code – Cài đặt kết nối đến MongoDB
Cài đặt các Model:
Ảnh 54: Code – Cài đặt model cho MongoDB
Database của TaNa dùng MongoDB Compasss để kết nối:
Ảnh 55: Database của TaNa
4.2.6. Redis
4.2.6.1. Giới thiệu
Redis là một hệ thống lưu trữ dữ liệu in-memory (dữ liệu được lưu trữ trong bộ nhớ chính) mã nguồn mở, được thiết kế để cung cấp hiệu suất cao và khả năng mở rộng. Redis (REmote DIctionary Server) hỗ trợ nhiều kiểu dữ liệu, bao gồm chuỗi, băm, danh sách, tập hợp, bộ đếm và các cấu trúc dữ liệu phức tạp hơn như xâu JSON.
Nó cung cấp một tập hợp các lệnh mạnh mẽ để thao tác dữ liệu và hỗ trợ các tính năng như replication (sao chép), clustering (phân tán), và pub/sub (publish/subscribe) để xây dựng các ứng dụng thời gian thực.
4.2.6.2. Ưu điểm
- Hiệu suất cao: Với việc lưu trữ dữ liệu trong bộ nhớ chính, Redis cung cấp tốc độ truy xuất dữ liệu nhanh hơn so với hệ thống lưu trữ trên đĩa.
- Hỗ trợ nhiều kiểu dữ liệu: Redis cho phép lưu trữ và thao tác trên các kiểu dữ liệu phong phú, từ đơn giản như chuỗi đến phức tạp như cấu trúc dữ liệu đám mây (JSON).
- Cấu trúc dữ liệu linh hoạt: Redis cung cấp các cấu trúc dữ liệu linh hoạt như danh sách, tập hợp, băm, và xếp hạng để giải quyết các vấn đề cụ thể của ứng dụng.
- Hỗ trợ transaction: Redis hỗ trợ transaction, cho phép nhóm nhiều lệnh lại thành một giao dịch duy nhất để đảm bảo tính toàn vẹn dữ liệu.
4.2.6.3. Nhược điểm
- Dung lượng bộ nhớ hạn chế: Vì dữ liệu được lưu trữ trong bộ nhớ chính, dung lượng bộ nhớ của máy chủ Redis có giới hạn. Điều này có thể gây hạn chế khi lưu trữ dữ liệu lớn hơn dung lượng bộ nhớ hiện có.
- Khả năng mất dữ liệu: Mặc dù Redis cung cấp tính năng sao chép dữ liệu và lưu trữ trên đĩa, nhưng nếu không cấu hình đúng, có nguy cơ mất dữ liệu trong trường hợp xảy ra sự cố.
- Khả năng mở rộng: Redis có khả năng mở rộng với tính năng phân tán và clustering, nhưng quá trình mở rộng có thể phức tạp hơn so với một số hệ thống lưu trữ khác.
4.2.6.4. Áp dụng
Tạo 1 file để cài đặt và kết nối với Redis.
Ảnh 56: Code - Kết nối với Redis
- Dùng redis để lưu số truy cập của người dùng trong 1 phút, để ngăn chặn người dùng truy cập quá nhiều trong 1 phút làm ảnh hướng để server.
Ảnh 57: Code – Giới hạn truy cập dùng Redis
Ảnh 58: Code – Sử dụng các method của Redis
Các method được dùng:
• Method "incr" (tắt chữ viết tắt của "increment") được sử dụng để tăng giá trị của một khóa (key) số nguyên trong Redis. Nếu khóa không tồn tại, Redis sẽ tạo một khóa mới với giá trị ban đầu là 0 và sau đó tăng giá trị lên
một đơn vị. Đây là một cách tiện lợi để thực hiện các hoạt động đếm, theo dõi, đếm lượt truy cập và các tác vụ tương tự trong Redis.
• Method "expire" được sử dụng để đặt thời gian sống (expiration time) cho một khóa trong Redis. Thời gian sống là khoảng thời gian sau đó mà khóa sẽ tồn tại trong Redis trước khi bị xóa tự động. Khi thời gian sống hết hạn, khóa sẽ không còn tồn tại trong Redis nữa.
• Method "ttl" (tắt chữ viết tắt của "time to live") được sử dụng để lấy thời gian còn lại (time remaining) của một khóa trong Redis. Nó trả về số giây còn lại cho thời gian sống của khóa. Nếu khóa không tồn tại hoặc không có thời gian sống, giá trị trả về sẽ là -1.
- Dùng Redis để lưu và xóa OTP của người dùng
Ảnh 59: Code – Áp dụng lưu vào xóa OTP trong Redis
Ảnh 60: Code – Get OTP trong Redis
Các method được dùng:
• Method "set" được sử dụng để lưu trữ một giá trị cho một khóa (key) trong Redis. Nếu khóa đã tồn tại, giá trị sẽ được ghi đè lên. Nếu khóa chưa tồn tại, Redis sẽ tạo một khóa mới và gán giá trị cho nó.
• Method "set" được sử dụng để lưu trữ một giá trị cho một khóa (key) trong Redis. Nếu khóa đã tồn tại, giá trị sẽ được ghi đè lên. Nếu khóa chưa tồn tại, Redis sẽ tạo một khóa mới và gán giá trị cho nó.
• Method "del" (hoặc còn được gọi là " DELETE ") được sử dụng để xóa một khóa và giá trị tương ứng khỏi Redis.
4.2.7. Socket
4.2.7.1. Giới thiệu
Socket là một công nghệ phần cứng hoặc phần mềm được sử dụng để thiết lập kết nối mạng giữa các thiết bị hoặc ứng dụng. Nó cho phép các ứng dụng giao tiếp và truyền dữ liệu trực tiếp qua mạng. Socket thường được sử dụng để xây dựng các tính năng realtime trong các ứng dụng, như trò chuyện trực tuyến, cập nhật dữ liệu realtime, trò chơi đa người chơi, và nhiều ứng dụng khác.
4.2.7.2. Ưu điểm
- Truyền thông realtime: Socket cho phép truyền thông tin và dữ liệu trực tiếp và nhanh chóng qua mạng, giúp tạo ra các trải nghiệm realtime cho người dùng.