Đồ án: Phát triển website mạng xã hội sử dụng ReactJS, NodeJS và MongoDB

Đồ án phát triển website mạng xã hội với ReactJS, NodeJS & MongoDB. Tìm hiểu quy trình đăng ký, xây dựng nền tảng mạng xã hội hiện đại, hiệu quả.

Chuyên ngành

Công Nghệ Thông Tin

Người đăng

Ẩn danh

Thể loại

Khóa luận tốt nghiệp

2024

71
2
0

Phí lưu trữ

30 Point

Tóm tắt

I. Tổng quan đồ án website mạng xã hội ReactJS NodeJS MongoDB

Đồ án này trình bày quá trình nghiên cứu và phát triển một website mạng xã hội hoàn chỉnh, sử dụng các công nghệ hiện đại trong hệ sinh thái JavaScript. Trong bối cảnh kỹ thuật số, mạng xã hội không chỉ là công cụ kết nối mà còn là một nền tảng chia sẻ thông tin mạnh mẽ. Tuy nhiên, nhiều nền tảng lớn hiện nay tạo ra sự nhiễu loạn thông tin và các tính năng phức tạp không cần thiết. Do đó, mục tiêu của đề tài website mạng xã hội này là xây dựng một không gian trực tuyến đơn giản, tập trung vào trải nghiệm cốt lõi: kết nối và chia sẻ chân thật. Việc lựa chọn công nghệ MERN stack (MongoDB, ExpressJS, ReactJS, NodeJS) làm nền tảng phát triển không phải là ngẫu nhiên. Đây là một bộ công nghệ đồng bộ, sử dụng JavaScript cho cả frontend và backend, giúp tối ưu hóa quy trình làm việc và tăng hiệu suất. ReactJS với kiến trúc dựa trên component cho phép xây dựng giao diện người dùng linh hoạt và có khả năng tái sử dụng cao. NodeJS, với mô hình bất đồng bộ, xử lý hiệu quả hàng ngàn kết nối đồng thời, là lựa chọn lý tưởng cho backend của một ứng dụng mạng xã hội. MongoDB, một cơ sở dữ liệu NoSQL, cung cấp sự linh hoạt trong việc lưu trữ dữ liệu phi cấu trúc như bài viết, bình luận, và thông tin người dùng. Cuối cùng, ExpressJS đóng vai trò là một framework tối giản nhưng mạnh mẽ cho NodeJS, giúp xây dựng các RESTful API một cách nhanh chóng. Báo cáo đồ án mạng xã hội này sẽ đi sâu vào từng giai đoạn, từ phân tích yêu cầu, thiết kế hệ thống, đến triển khai các tính năng cụ thể, cung cấp một cái nhìn toàn diện cho sinh viên và lập trình viên quan tâm đến việc xây dựng ứng dụng web hiện đại.

1.1. Lý do chọn đề tài website mạng xã hội trong kỷ nguyên số

Trong thế kỷ 21, mạng xã hội đã trở thành một phần không thể thiếu, định hình cách con người giao tiếp và tương tác. Tuy nhiên, sự bão hòa của các nền tảng lớn với mục tiêu thương mại đã tạo ra không gian thông tin nhiễu loạn. Đề tài này được chọn với mong muốn áp dụng kiến thức đã học để tạo ra một sản phẩm khác biệt, tập trung vào sự đơn giản và kết nối chân thật. Mục tiêu không phải là tạo ra một cuộc cách mạng, mà là xây dựng một nền tảng gần gũi, nơi người dùng có thể chia sẻ khoảnh khắc, câu chuyện cá nhân mà không bị phân tâm bởi các yếu tố phức tạp. Dự án hướng đến một giao diện thân thiện, các tính năng mạng xã hội cốt lõi và dễ tiếp cận, khuyến khích người dùng trân trọng những giá trị giao tiếp nguyên bản.

1.2. Mục tiêu và phạm vi của luận văn tốt nghiệp ReactJS NodeJS

Mục tiêu chính của luận văn tốt nghiệp reactjs nodejs này là thiết kế và xây dựng thành công một website mạng xã hội với các chức năng cơ bản. Các chức năng này bao gồm: đăng ký/đăng nhập người dùng, quản lý hồ sơ cá nhân, đăng bài viết (văn bản, hình ảnh), tương tác (thích, bình luận), kết bạn và nhắn tin thời gian thực. Phạm vi của đồ án tập trung vào việc áp dụng thành thạo MERN stack, xây dựng một đồ án full-stack javascript hoàn chỉnh. Về mặt kỹ thuật, dự án sẽ triển khai kiến trúc Client-Server, xây dựng backend với NodeJS và ExpressJS, thiết kế cơ sở dữ liệu với MongoDB, và phát triển frontend với ReactJS. Các khía cạnh về bảo mật như xác thực người dùng và tối ưu hóa hiệu suất cũng nằm trong phạm vi nghiên cứu và triển khai của đồ án.

1.3. Tổng quan công nghệ MERN stack được sử dụng trong đồ án

Công nghệ cốt lõi của đồ án là MERN stack, một bộ công cụ mạnh mẽ cho phát triển web. ReactJS được chọn cho frontend vì khả năng tạo giao diện người dùng tương tác cao thông qua Virtual DOM và kiến trúc component. NodeJSExpressJS được sử dụng cho backend, tận dụng mô hình I/O không chặn để xử lý các yêu cầu hiệu quả, rất phù hợp cho các ứng dụng cần độ trễ thấp. MongoDB, với cấu trúc dữ liệu dạng document linh hoạt, là lựa chọn tối ưu để lưu trữ dữ liệu đa dạng của một mạng xã hội. Ngoài ra, đồ án còn tích hợp các công nghệ phụ trợ quan trọng khác như Socket.IO để xây dựng tính năng Socket.IO chat real-time, Mongoose để làm việc với MongoDB một cách có cấu trúc hơn, và JSON Web Token (JWT) cho việc xác thực người dùng JWT.

II. Phân tích cơ sở lý thuyết và thách thức khi làm đồ án MERN

Để thực hiện thành công một đồ án đăng ký phát triển website mạng xã hội sử dụng reactjs nodejs và mongodb, việc nắm vững cơ sở lý thuyết là yêu cầu tiên quyết. Nền tảng của các ứng dụng web hiện đại ngày nay thường dựa trên kiến trúc Client-Server. Trong mô hình này, Client (trình duyệt người dùng) gửi yêu cầu đến Server, và Server xử lý yêu cầu đó rồi trả về dữ liệu. Đồ án này áp dụng mô hình này kết hợp với kiến trúc Single Page Application (SPA). SPA cho phép tải toàn bộ nội dung cần thiết trong lần đầu tiên, sau đó chỉ cập nhật các thành phần thay đổi, mang lại trải nghiệm mượt mà như ứng dụng di động. Tuy nhiên, việc phát triển một ứng dụng như vậy cũng đặt ra nhiều thách thức, đặc biệt về mặt bảo mật và quản lý dữ liệu. Các lỗ hổng bảo mật phổ biến như Cross-Site Scripting (XSS) và Cross-Site Request Forgery (CSRF) luôn là mối đe dọa. Do đó, việc triển khai các cơ chế bảo vệ, chẳng hạn như sử dụng xác thực người dùng JWT, là cực kỳ quan trọng để đảm bảo an toàn thông tin. Một thách thức khác là việc thiết kế CSDL MongoDB cho mạng xã hội. Với tính chất linh hoạt của NoSQL, việc thiết kế một schema hiệu quả, có khả năng mở rộng và tối ưu cho các truy vấn phức tạp đòi hỏi sự phân tích kỹ lưỡng về mối quan hệ giữa các thực thể như người dùng, bài viết, bình luận và tin nhắn.

2.1. Kiến trúc Client Server và mô hình Single Page Application

Kiến trúc Client-Server là mô hình nền tảng, trong đó máy khách (Client) yêu cầu tài nguyên và dịch vụ từ máy chủ (Server). Ưu điểm của mô hình này là quản lý tập trung, bảo mật và khả năng mở rộng tốt. Tuy nhiên, nó cũng có nhược điểm là nguy cơ tắc nghẽn lưu lượng khi có quá nhiều yêu cầu. Để nâng cao trải nghiệm người dùng, đồ án áp dụng mô hình Single Page Application (SPA). SPA chỉ tải lại các phần nội dung cần thiết thay vì toàn bộ trang, giúp giảm độ trễ và tạo cảm giác liền mạch. Frontend trong mô hình SPA đóng vai trò xử lý logic giao diện và gửi yêu cầu dữ liệu đến backend thông qua RESTful API, giúp tách biệt rõ ràng giữa hai phần của ứng dụng.

2.2. Các vấn đề bảo mật website phổ biến XSS CSRF và JWT

Bảo mật là một yêu cầu phi chức năng tối quan trọng. Đồ án đã phân tích các lỗ hổng thường gặp. Tấn công Cross-Site Scripting (XSS) xảy ra khi kẻ tấn công chèn mã độc vào trang web, thực thi trên trình duyệt của người dùng khác. Tấn công Cross-Site Request Forgery (CSRF) lừa người dùng đã xác thực thực hiện các hành động không mong muốn. Để phòng chống, cần xác thực và làm sạch đầu vào, mã hóa đầu ra, và sử dụng các token chống CSRF. Trong đồ án này, JSON Web Token (JWT) được sử dụng như một giải pháp hiệu quả cho việc xác thực. JWT cho phép truyền thông tin an toàn giữa các bên dưới dạng một chuỗi JSON được ký số, đảm bảo rằng người dùng có quyền truy cập vào các tài nguyên được bảo vệ.

2.3. Khó khăn trong việc thiết kế CSDL MongoDB cho mạng xã hội

MongoDB là cơ sở dữ liệu NoSQL dựa trên document, mang lại sự linh hoạt cao do không yêu cầu một schema cứng nhắc. Tuy nhiên, chính sự linh hoạt này lại tạo ra thách thức trong việc thiết kế CSDL MongoDB cho mạng xã hội. Cần phải quyết định nên nhúng (embedding) dữ liệu hay tham chiếu (referencing) giữa các collection để tối ưu hiệu suất truy vấn. Ví dụ, việc lưu trữ bình luận trực tiếp bên trong document bài viết có thể tăng tốc độ đọc nhưng lại làm phức tạp việc phân trang và giới hạn kích thước document. Ngược lại, lưu trữ bình luận ở một collection riêng và tham chiếu lại giúp quản lý dễ hơn nhưng đòi hỏi các thao tác join ở tầng ứng dụng. Việc thiết kế schema hiệu quả đòi hỏi sự cân bằng giữa hiệu suất đọc/ghi và tính nhất quán dữ liệu.

III. Hướng dẫn xây dựng Backend với NodeJS ExpressJS và MongoDB

Phần backend của đồ án đăng ký phát triển website mạng xã hội sử dụng reactjs nodejs và mongodb là xương sống của toàn bộ hệ thống, chịu trách nhiệm xử lý logic nghiệp vụ, tương tác với cơ sở dữ liệu và cung cấp dữ liệu cho frontend. Nền tảng được lựa chọn là NodeJS vì tốc độ xử lý nhanh nhờ cơ chế bất đồng bộ. Trên nền tảng NodeJS, ExpressJS được sử dụng làm framework để đơn giản hóa việc xây dựng ứng dụng web và API. Một trong những nhiệm vụ cốt lõi là thiết kế và triển khai một hệ thống RESTful API khoa học. API này hoạt động như một giao diện lập trình ứng dụng, cho phép frontend thực hiện các thao tác CRUD (Create, Read, Update, Delete) trên các tài nguyên như người dùng, bài viết. Việc định tuyến (routing) trong ExpressJS giúp phân chia các endpoint một cách logic, dễ quản lý và bảo trì. Để tương tác với cơ sở dữ liệu, đồ án sử dụng Mongoose, một thư viện ODM (Object Data Modeling) cho MongoDB. Mongoose cung cấp một giải pháp dựa trên schema để mô hình hóa dữ liệu ứng dụng, giúp đảm bảo tính toàn vẹn dữ liệu thông qua các quy tắc xác thực (validation) và tạo ra các model dễ sử dụng. Cuối cùng, để bảo vệ các API endpoint, một cơ chế xác thực mạnh mẽ là không thể thiếu. Đồ án đã áp dụng xác thực người dùng JWT, một tiêu chuẩn mở để tạo các token truy cập. Quy trình này đảm bảo chỉ những người dùng đã đăng nhập và có quyền hợp lệ mới có thể truy cập vào các tài nguyên được bảo vệ, tăng cường an ninh cho toàn hệ thống.

3.1. Xây dựng RESTful API hiệu quả bằng ExpressJS API

RESTful API là tiêu chuẩn thiết kế API, tập trung vào các tài nguyên hệ thống và sử dụng các phương thức HTTP (GET, POST, PUT, DELETE) để thao tác trên chúng. Với ExpressJS API, việc xây dựng các endpoint trở nên đơn giản. Bằng cách sử dụng router, các tuyến đường (routes) được tổ chức theo từng module chức năng (ví dụ: /users, /posts, /messages). Middleware trong ExpressJS cũng đóng vai trò quan trọng, cho phép thực thi các hàm xử lý trung gian như kiểm tra xác thực, ghi log, hoặc xử lý lỗi trước khi request đến được controller chính. Cách tiếp cận này giúp mã nguồn backend trở nên sạch sẽ, có cấu trúc và dễ dàng mở rộng.

3.2. Triển khai Mongoose schema design cho quản lý dữ liệu

Mặc dù MongoDB có schema linh hoạt, việc sử dụng Mongoose để định nghĩa một cấu trúc rõ ràng cho dữ liệu là một thực hành tốt. Mongoose schema design cho phép định nghĩa các trường dữ liệu, kiểu dữ liệu, giá trị mặc định, và các quy tắc xác thực cho mỗi collection. Ví dụ, một schema cho người dùng có thể yêu cầu trường email là duy nhất và phải có định dạng hợp lệ. Bằng cách tạo các Model từ Schema, Mongoose cung cấp một loạt các phương thức tĩnh và phương thức của đối tượng để thực hiện các thao tác với cơ sở dữ liệu một cách tiện lợi, giúp trừu tượng hóa các câu lệnh truy vấn MongoDB phức tạp và làm cho mã nguồn dễ đọc hơn.

3.3. Cách xác thực người dùng JWT và xử lý phân quyền

Bảo mật API là yếu tố sống còn. Đồ án sử dụng JSON Web Token (JWT) cho mục đích xác thực. Khi người dùng đăng nhập thành công, server sẽ tạo một chuỗi token JWT chứa thông tin định danh (ví dụ: userId) và ký nó bằng một khóa bí mật. Token này được gửi về cho client. Trong các yêu cầu tiếp theo đến các tài nguyên cần bảo vệ, client sẽ đính kèm token này trong header Authorization. Phía server sẽ sử dụng một middleware để xác minh chữ ký của token. Nếu token hợp lệ, yêu cầu sẽ được tiếp tục xử lý; nếu không, server sẽ trả về lỗi 401 Unauthorized. Phương pháp này là stateless (không trạng thái), giúp hệ thống dễ dàng mở rộng.

IV. Phương pháp phát triển Frontend ReactJS và tính năng real time

Giao diện người dùng (Frontend) là bộ mặt của ứng dụng, quyết định trực tiếp đến trải nghiệm người dùng. Trong đồ án đăng ký phát triển website mạng xã hội sử dụng reactjs nodejs và mongodb, ReactJS được chọn làm thư viện chính để xây dựng một giao diện hiện đại và có hiệu suất cao. Triết lý của React xoay quanh việc xây dựng giao diện từ các thành phần (components) độc lập và có thể tái sử dụng. Mỗi component quản lý trạng thái (state) riêng của nó, và khi state thay đổi, React sẽ tự động cập nhật giao diện một cách hiệu quả nhờ vào Virtual DOM. Để quản lý trạng thái toàn cục của ứng dụng, đặc biệt là trong các ứng dụng phức tạp như mạng xã hội, việc sử dụng các công cụ quản lý trạng thái là cần thiết. Đồ án này đề cập đến việc sử dụng Redux state management, một thư viện giúp duy trì một nguồn dữ liệu đáng tin cậy duy nhất (single source of truth) cho toàn bộ ứng dụng, giúp việc debug và quản lý luồng dữ liệu trở nên dễ dàng hơn. Bên cạnh đó, React Hooks là một tính năng mạnh mẽ cho phép sử dụng state và các tính năng khác của React trong các functional component, giúp mã nguồn ngắn gọn và dễ hiểu hơn. Một yếu tố không thể thiếu trong mạng xã hội hiện đại là tính tương tác thời gian thực. Để triển khai các tính năng như chat và thông báo tức thì, đồ án đã tích hợp thư viện Socket.IO. Socket.IO cho phép thiết lập một kết nối hai chiều, liên tục giữa client và server, giúp dữ liệu được đẩy đi ngay lập tức mà không cần client phải gửi yêu cầu.

4.1. Quản lý trạng thái với Redux state management và React Hooks

Trong một ứng dụng React lớn, việc truyền dữ liệu qua nhiều cấp component (prop drilling) có thể trở nên phức tạp. Redux state management giải quyết vấn đề này bằng cách tạo ra một 'store' trung tâm để lưu trữ toàn bộ trạng thái ứng dụng. Các component có thể 'subscribe' vào store để nhận dữ liệu và 'dispatch' các 'action' để yêu cầu thay đổi trạng thái. Kết hợp với React Hooks như useState, useEffect, và các hook của Redux (useSelector, useDispatch), việc quản lý cả trạng thái cục bộ của component và trạng thái toàn cục của ứng dụng trở nên mạch lạc và hiệu quả, giúp hướng dẫn làm mạng xã hội bằng MERN trở nên dễ tiếp cận hơn.

4.2. Tích hợp Socket.IO chat real time cho tính năng nhắn tin

Để mang lại trải nghiệm tương tác tức thì, tính năng nhắn tin được xây dựng dựa trên giao thức WebSocket, và Socket.IO là thư viện được lựa chọn để triển khai. Socket.IO chat real-time hoạt động bằng cách thiết lập một kênh giao tiếp bền bỉ giữa client và server. Khi một người dùng gửi tin nhắn, client sẽ phát (emit) một sự kiện đến server. Server sau đó nhận sự kiện này và phát lại cho người nhận tương ứng. Quá trình này diễn ra gần như ngay lập tức, tạo ra cảm giác cuộc trò chuyện đang diễn ra trong thời gian thực. Socket.IO cũng có cơ chế dự phòng, tự động chuyển sang các phương thức khác như long-polling nếu WebSocket không được hỗ trợ.

4.3. Các tính năng mạng xã hội cốt lõi được triển khai

Dựa trên kết quả khảo sát và phân tích, đồ án đã triển khai các tính năng mạng xã hội thiết yếu. Người dùng có thể tạo tài khoản, đăng nhập, cập nhật hồ sơ cá nhân. Tính năng trung tâm là tạo và chia sẻ bài viết, cho phép đính kèm hình ảnh. Hệ thống tương tác bao gồm thích, bình luận bài viết. Các tính năng kết nối xã hội như gửi yêu cầu kết bạn, chấp nhận/từ chối lời mời cũng được xây dựng. Cuối cùng, tính năng nhắn tin trực tiếp giữa hai người dùng, được hỗ trợ bởi công nghệ thời gian thực, hoàn thiện trải nghiệm kết nối cơ bản của một mạng xã hội. Các tính năng này tạo thành một nền tảng vững chắc, có thể được tìm thấy trong source code mạng xã hội reactjs của dự án.

V. Thiết kế hệ thống và deploy ứng dụng MERN lên môi trường thật

Sau khi xác định cơ sở lý thuyết và công nghệ, giai đoạn tiếp theo của đồ án đăng ký phát triển website mạng xã hội sử dụng reactjs nodejs và mongodb là phân tích và thiết kế hệ thống một cách chi tiết. Quá trình này bắt đầu bằng việc khảo sát và đặc tả yêu cầu, từ đó xác định rõ các yêu cầu chức năng (những gì hệ thống phải làm) và yêu cầu phi chức năng (các tiêu chí về hiệu suất, bảo mật, khả năng sử dụng). Dựa trên các yêu cầu này, các biểu đồ UML (Unified Modeling Language) được sử dụng để mô hình hóa hệ thống. Biểu đồ Use Case giúp minh họa các tương tác giữa người dùng (actor) và hệ thống, xác định các chức năng chính như đăng nhập, đăng bài, nhắn tin. Biểu đồ lớp (Class Diagram) mô tả cấu trúc tĩnh của hệ thống, bao gồm các lớp đối tượng, thuộc tính, phương thức và mối quan hệ giữa chúng. Các biểu đồ trạng thái và hoạt động giúp làm rõ luồng xử lý của từng chức năng cụ thể. Khi quá trình phát triển hoàn tất, việc kiểm thử và triển khai là bước cuối cùng để đưa sản phẩm đến tay người dùng. Quá trình kiểm thử bao gồm kiểm thử đơn vị (Unit Testing) để đảm bảo từng thành phần hoạt động đúng, kiểm thử tích hợp (Integration Testing) để kiểm tra sự tương tác giữa các module. Cuối cùng, việc deploy ứng dụng MERN lên một nền tảng đám mây như Heroku hoặc AWS cho phép ứng dụng hoạt động công khai trên Internet. Toàn bộ quá trình phát triển được quản lý phiên bản và lưu trữ công khai trên github đồ án mạng xã hội để tiện theo dõi và cộng tác.

5.1. Phân tích yêu cầu và thiết kế use case cho các module

Việc phân tích yêu cầu bài toán là bước nền tảng, xác định rõ mục tiêu cần xây dựng. Các yêu cầu chức năng được phân chia cho hai nhóm người dùng chính: người dùng thông thường và quản trị viên. Dựa trên đó, các biểu đồ Use Case được thiết kế cho từng module chính. Ví dụ, Use Case module Authentication bao gồm các hành động đăng ký, đăng nhập, lấy lại mật khẩu. Use Case module bài viết bao gồm đăng bài, xem bài viết, tương tác. Việc thiết kế Use Case chi tiết giúp đội ngũ phát triển có cái nhìn rõ ràng về phạm vi công việc và các luồng chức năng cần được triển khai trong báo cáo đồ án mạng xã hội.

5.2. Quy trình kiểm thử và deploy ứng dụng MERN lên cloud

Để đảm bảo chất lượng, ứng dụng phải trải qua nhiều giai đoạn kiểm thử. Kiểm thử đơn vị tập trung vào các hàm và component riêng lẻ. Kiểm thử tích hợp đảm bảo frontend và backend giao tiếp đúng cách thông qua API. Kiểm thử chấp nhận người dùng (UAT) được thực hiện để xác nhận ứng dụng đáp ứng đúng mong đợi. Sau khi vượt qua các bài kiểm thử, quy trình deploy ứng dụng MERN được tiến hành. Quá trình này bao gồm việc xây dựng (build) mã nguồn ReactJS thành các tệp tĩnh, cấu hình biến môi trường (ví dụ: chuỗi kết nối cơ sở dữ liệu), và triển khai cả server NodeJS và các tệp frontend lên một nhà cung cấp dịch vụ đám mây. Việc này giúp ứng dụng có thể truy cập được từ mọi nơi.

5.3. Xem source code mạng xã hội reactjs trên Github

Tính minh bạch và khả năng học hỏi là một phần quan trọng của các dự án học thuật. Toàn bộ mã nguồn của dự án được quản lý bằng Git và lưu trữ công khai trên một kho chứa (repository) Github. Sinh viên và lập trình viên quan tâm có thể truy cập vào github đồ án mạng xã hội để tham khảo. Tại đây, có thể xem chi tiết cách cấu trúc một đồ án full-stack javascript, cách triển khai các tính năng, và theo dõi lịch sử phát triển của dự án thông qua các commit. Việc công khai source code mạng xã hội reactjs và backend NodeJS không chỉ thể hiện tính trung thực của tác giả mà còn đóng góp tài nguyên cho cộng đồng phát triển.

VI. Kết luận đồ án và hướng phát triển tương lai cho website MERN

Sau một thời gian nghiên cứu và triển khai, đồ án đăng ký phát triển website mạng xã hội sử dụng reactjs nodejs và mongodb đã hoàn thành các mục tiêu đề ra. Dự án đã xây dựng thành công một ứng dụng web mạng xã hội với các chức năng cốt lõi, hoạt động ổn định trên nền tảng MERN stack. Quá trình thực hiện đã giúp củng cố kiến thức nền tảng về phát triển web hiện đại, từ việc thiết kế kiến trúc, xây dựng RESTful API, phát triển giao diện người dùng tương tác đến việc triển khai ứng dụng thực tế. Sản phẩm cuối cùng là một minh chứng rõ ràng cho việc áp dụng lý thuyết vào thực tiễn, thể hiện khả năng làm chủ công nghệ và giải quyết vấn đề của một lập trình viên full-stack. Luận văn tốt nghiệp reactjs nodejs này không chỉ là một bài tập lớn mà còn là một dự án thực tế, mang lại những kinh nghiệm quý báu về quản lý dự án, làm việc với cơ sở dữ liệu NoSQL, và xử lý các vấn đề về hiệu suất và bảo mật. Tuy nhiên, do giới hạn về thời gian và nguồn lực, ứng dụng vẫn còn nhiều tiềm năng để cải thiện và mở rộng. Các hướng phát triển trong tương lai có thể tập trung vào việc tối ưu hóa giao diện người dùng, bổ sung các tính năng nâng cao, và cải thiện khả năng mở rộng của hệ thống để đáp ứng lượng người dùng lớn hơn. Đây là một nền tảng vững chắc để tiếp tục phát triển thành một sản phẩm hoàn thiện hơn.

6.1. Đánh giá kết quả đạt được của đồ án full stack javascript

Kết quả chính của đồ án là một website mạng xã hội hoạt động được, đáp ứng đầy đủ các yêu cầu chức năng đã đề ra. Về mặt kỹ thuật, dự án đã triển khai thành công một đồ án full-stack javascript hoàn chỉnh, sử dụng đồng bộ ngôn ngữ lập trình cho cả hai phía client và server. Hệ thống API backend được xây dựng có cấu trúc, tuân thủ các nguyên tắc REST. Giao diện frontend với React Hooks và quản lý trạng thái hiệu quả mang lại trải nghiệm người dùng tốt. Các tính năng phức tạp như chat thời gian thực và xác thực bằng JWT đã được tích hợp thành công. Dự án đã chứng minh tính khả thi và hiệu quả của việc sử dụng MERN stack cho các ứng dụng web hiện đại.

6.2. Hướng phát triển và nâng cấp các tính năng mạng xã hội

Để trở thành một sản phẩm cạnh tranh, hệ thống cần được tiếp tục phát triển. Các hướng nâng cấp tiềm năng bao gồm: tối ưu hóa giao diện cho thiết bị di động (Responsive Design), phát triển ứng dụng di động bằng React Native để tái sử dụng logic. Về tính năng mạng xã hội, có thể bổ sung chức năng tạo nhóm, tổ chức sự kiện, gọi video, và phát triển một thuật toán gợi ý nội dung (news feed algorithm) thông minh hơn. Về mặt hạ tầng, có thể nghiên cứu các giải pháp deploy ứng dụng MERN có khả năng mở rộng cao hơn như sử dụng Docker, Kubernetes và các dịch vụ cơ sở dữ liệu được quản lý để chuẩn bị cho lượng truy cập lớn trong tương lai.

18/09/2025

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

CHƯƠNG I: GIỚI THIỆU ĐÊ TÀII. Giới thiệu đề tài - lý do chọn đề tải. Nội dung thực hiện và công nghệ sử dụng. Công nghệ sử dụng.

Phân tích yêu cầu. Thiết kế kiến trúc hệ thống "HH. Phát triển frontend. Phát triển Backend.

Tích hợp cơ sở đữ liệu. Bảo mật và tối ưu hóa. Triển khai và kiểm thử.1 6 CHƯƠNG 2: CƠ SỞ LÝ THUYÊTT. Giới thiệu về phát triển website hiện đại.

Kiến trúc Client SeFVeE. Đánh giá ưu nhược điểm của mô hình Client Server. Sinple Pasee Application (SPA). Giới thiệu về React]§.

Lợi ích mang lại cho lập trình viên. Tính năng nỗi bật.-- 5à ST 211211211112111121212121 21210 rag 10 "Pa. Cơ sở dữ liệu và cơ sở dữ liệu NoSQ. ác cc 11c 1121 1111111111111 1111112111111 1111 k1 kg 1k 14 PP co an.

Giải thích các thành phần. Cách thức hoạt động.Thư viện SocketÏO. LH n0 1111000111 1155 1111125111111 111kg 19 PIN v. Khi nào nên dùng JWT.

Các van dé bảo mật websife. Vấn đề lỗi bảo mật Back End. Vấn đề lỗi bảo mật Front End (thường gặp).--- 5s cse se 23 CHUONG 3: Phân tích và đặc tả yêu cầu. 26 KV Ai o0 in ằ.

- scS1 2221112111 1121111212121 2111211 nn 1H ng ro 26 3. Phân tích yêu cầu bải toán. Phát biểu bài toán. Yêu cầu chức năng.

Yêu cầu phí chức năng. 30 CHƯƠNG 4: PHẦN TÍCH, THIẾT KẾ HỆ THÓNG. Use case tổng quát. Use case module Authentication.

le cece eeeeeenteeteeteeneeneeens 32 4. Use case module bải viẾT. Use case module người dùng. Use case module nhắn tin.

Biéu đồ trạng thái (State Diagram). Giải thích các khái niệm. Biểu đỗ trạng thái chức năng đăng ký đăng nhập. Biểu đỗ trạng thái chức năng đăng bài.

Biểu đỗ trạng thái chức năng xem và chỉnh sửa hồ sơ người dùng. Biểu đỗ trạng thái chức năng tương tác bai Viet. Biểu đồ trạng thái chức năng kết bạn. Biểu đỗ trạng thái chức năng nhắn tín.

Biểu đỗ trạng thái chức năng quản lý danh mục và luật trang. Biểu đỗ trạng thái chức năng quản lý báo cáo. Biéu đỗ hoạt động ( Activity điaeram). Giải thích các khái niệm.

Biểu đỗ hoạt động chức năng đăng ký/đăng nhập. Biểu đỗ hoạt động chức năng đăng bải. Biểu đỗ hoạt động chức năng xem và chỉnh sửa hỗ sơ người dùng. Biểu đỗ hoạt động chức năng tương tác bài viẾt.

Biêu đồ hoạt động chức năng kết bạn. 2 TH HE S1 2E ca 51 3. Biêu đồ hoạt động chức năng nhắn tỉn. Biêu đồ hoạt động hệ thống quả tF|.

2c 222122 212222122 ces 52 kê nh. Biểu đỗ tuần tự chức năng đăng kí đăng nhập. Biểu đỗ tuần tự chức năng đăng bải viẾt. Biéu dé tuan ty chire nang twong tac bai Viet.

Biểu đồ tuần tự chức năng kết bạn. Biểu đồ tuần tự chức năng nhắn tỉn. Biểu đỗ tuần quản lý trang web. Biểu đồ triển khai.JHCaaddđdiiiaiiaaiaaâä3ỶÝỶẢỶẢ.

58 CHƯƠNG 4: Thiết kế và cài đặt cơ sở dữ liệu.-- 1S TS 1111121531 5115115152E5x x52 60 DANH MUC CAC TU VIET TAT STT Chữ viết tắt Giải thích Ị API Giao dién lap trinh ung dung (Application Programming Interface) Cross-Origin Resource Sharing (Chia sé tài 2 CORS. , nguyên nhiêu nguôn khác nhau) 3 JWT Json Web Token 4 UI User Interface (Giao diện người dùng) JavaScript Object Notation (Mét kiéu định 5 JSON - dạng đữ liệu tuân theo một quy luật nhật định) Hyper Text Transfer Protocol (Giao thức 6 |HTTP có Truyền tải Siêu Văn Bản) 7 MVC Model — View — Controller 8 UML Unified Modeling 8 Language guag (Ng6n g ngữ mô hình hóa thống nhất) DANH MUC BANG BIEU VA HINH ANH Bang 1. Céng nghé va ly do sử dụng. Ví dụ về middleware trone eXpress.

-- -c c1 1211211211111 21111111111211 1111111 KH 1g kg 13 Hinh 2. Route paraimef€rs.-- 5 TT 2112121111 2121112201121 221 du 19 Hình 2. Ví dụ về một chuỗi token. Mã token sau khi ø1ải Imã.

Cấu trúc của header (JWT).-s- c scnxS1EE 1118121111112 tre. Yêu cầu chức năng của người dùng thông thường. Yêu cầu chức năng của quản trị viên. Yêu cầu phi chức năng.

Use-Case tổng quát hệ thống. Use-Case module AuthentIcafIon.- -á c cc 2112112112 1111151121111 xe 32 Hình 4. Use-case module bải viẾt. Use-case module người dùng.

Use case module nhắn tĩn. 2-2221 29EE22E222E22122522522212212222222Xe2 33 Hình 4. Biểu đồ lớp của hệ thống. Giải thích các kí hiểu sử dụng trong biểu đỗ trạng thái.

Biéu đỗ trạng thái chức năng đăng ký đăng nhập. Biếu đỗ trạng thái chức năng đăng bải. Biểu đỗ trạng thái chức năng xem và chỉnh sửa hồ sơ người dùng. Biếu đồ trạng thái chức năng xem và tương tác bài viết.

Biéu d6 trang thái gửi yêu cầu kết bạn. Biêu đồ trang thái phản hồi yêu cầu kết bạn. Biểu đồ trạng thái chức năng nhắn tin. Biếu đồ trạng thái chức năng quản lý danh mục và luật trang.

Biếu đồ trạng thái chức năng quản lý báo cáo. 5s csceczszsea 45 LOI MO DAU Trong thế ký 21, mạng xã hội đã trở thành một phần không thể thiếu của cuộc sống hàng ngày, ảnh hưởng mạnh mẽ đến cách chúng ta giao tiếp, làm việc và tiêu thụ thông tin. Việc tích hợp công nghệ thông tin vào xây dựng mạng xã hội không chỉ tạo ra nền tảng kết nối cá nhân mà còn mở rộng cơ hội cho sự tương tác xã hội trực tuyến trên quy mô lớn. Điều nay dan dén su lan rộng về phạm vị và ảnh hưởng của mạng xã hội, đồng thời đặt ra những thách thức mới trong quản ly thông tin, bảo vệ quyền riêng tư và đảm bảo an toàn trực tuyến.

Nhằm áp dụng và vận dụng những kiến thức đã học tại trường cũng như tự tìm hiểu thực tế, tôi đã lên ý tưởng xây dựng một mạng xã hội đơn giản. Mạng xã hội này sẽ được thiết kế với giao điện thân thiện và dễ sử dụng, giúp người dùng dễ dàng tương tác va chia sẻ nội dung một cách tự nhiên. Với tính năng chia sẻ hình ảnh va video, người dùng có thể chia sẻ những khoảnh khắc đặc biệt trone cuộc sông hàng ngày, từ những bức ảnh gia đình đến những video hài hước. Ngoài ra, tôi cũng đề xuất một tính năng cho phép người dùng chia sẻ câu chuyện cá nhân hoặc bài viết về những trải nghiệm, suy nghĩ và cảm xúc của họ.

Điều này tạo ra một không gian trực tuyến phong phú, nơi mọi người có thể kê chuyện, học hỏi và tương tác với nhau. Với những ý tưởng và tính năng này, tôi hy vọng sẽ vận dụng tôi đa những kiến thức đã học, đồng thời có cơ hội thực hành và trải nghiệm thực tế trong việc phát triển và quản lý một dự án công nghệ thông tin. Hà Nội, ngày. tháng 06 năm 2024 CHUONG I: GIOI THIEU DE TAI 1.

Giới thiệu đề tài — lý do chọn đề tài Trong thế giới số hóa ngày nay, có vô số mạng xã hội với các tính năng phức tạp và mục tiêu thương mại. Mặc dù chúng mang lại nhiều tiện ích cho người dùng, nhưng cũng đồng thời tạo ra sự nhiễu loạn thông tin, bão hòa nội dung và thậm chí là thông tin sai lệch. Điều này khiến cho việc tìm kiếm một không gian thực sự đề kết nối và chia sẻ trở nên khó khăn hơn bao giờ hết. Dự án này không nhằm mục đích tạo ra một "cú nhảy vọt" hay thay đổi cách thức hoạt động của internet.

Thay vào đó, nó là cơ hội để tôi áp dụng những kiến thức đã học trong bốn năm tại trường, cùng với những hiểu biết mới mà tôi sẽ nghiên cứu và tiếp thu trong quá trình thực hiện. Tôi mong muốn xây dựng một sản phẩm mang lại trải nghiệm đơn giản và gần gũi hơn cho người dùng, nơi mọi người có thê tập trung vào việc chia sẻ và kết nối một cách chân thật và y nghia. Dự án không đòi hỏi nhiều tính năng hay công nghệ phức tạp. Tôi hướng đến sự đơn giản nhưng đủ dùng, với một giao diện thân thiện cùng các tính năng dễ tiếp cận và sử dụng.

Sự đơn giản này không chỉ giúp người dùng dễ dàng hơn trong việc làm quen và sử dụng, mà còn tạo ra một môi trường không bị phân tán bởi quá nhiều yếu tố phức tạp. Tôi hy vọng rằng, dự án này sẽ mang lại một không gian mới mẻ, nơi mọi nguoi co thé trai nghiệm sự kết nối và chia sẻ một cách thực sự. Hơn nữa, tôi cũng hy vọng rằng dự án này sẽ khuyến khích người dùng tập trung vào những giá trị cốt lõi của mạng xã hội - đó là sự giao tiếp, kết nối và chia sẻ. Thay vì bị cuốn vào những yếu tổ phụ như quảng cáo hay các tính năng phức tạp, người dùng sẽ có cơ hội trải nphiệm một không sian mạng xã hội thuần túy, nơi họ có thể cảm nhận và trân trọng hơn những mỗi quan hệ và những câu chuyện được chia sẻ.

Đây cũng chính là mục tiêu lớn nhất mà tôi hướng tới khi thực hiện dự án này.2, Nội dung thực hiện và công nghệ sử dụng 1. Công nghệ sử dụng Bảng 1. Công nghệ và lÿ do sử dụng Công nghệ Lý do Express.js Hiệu suất cao: Node. Js sử dụng mô hình sự kiện không đồng bộ (asynchronous event-driven), giúp xử lý nhiều yêu cầu đồng thời mà không cân tạo nhiều luồng, tăng hiệu suất đáng kê.

Đơn giản và linh hoạt: Express.Jjs cung cấp một API tối giản nhưng mạnh mẽ, cho phép phát triển nhanh chóng các ứng dụng web và API RESTful. Hệ sinh thái phong phu: Node.js c6é mot hé sinh thai rong Ion voi nhiều gói thư viện hữu ích trên npm, giúp dễ dàng tích hợp các tinh nang bé sung. Cộng đồng lớn: Cộng đồng phát triển lớn mạnh, nhiều tài liệu và hỗ trợ từ cộng đồng giúp giải quyết các vấn đề nhanh chóng. Hiéu suat cao: Su dung Virtual DOM gitp téi wu héa qua trình cập nhat va render, tăng hiệu suất ứng dụng.

Component-based: Cho phép xây dựng các giao diện phức tạp từ các thành phan nhỏ, tải sử dụng được. Dễ dàng quản lý trạng thái: Sử dụng các thư viện quản lý trạng thái React.js như Redux hoặc Context API, giúp quản lý trạng thải ứng dụng một cách hiệu quả. SEO-friendly: Với khả năng render phía server (server-side rendering) hoặc sử dụng các framework như Next.Js, giúp cải thiện khả năng tối ưu hóa công cụ tìm kiếm (SEO). ¢ Document-oriented: MongoDB la mét cơ sở dữ liệu NoSQL dựa trên document, giúp lưu trữ dữ liệu dưới dạng JSON-like documents (BSON).

Điều này phù hợp với các ứng dụng web hiện đại yêu cầu sự linh hoạt trong cầu trúc dữ liệu. ® - Scalability: MongoDB hỗ trợ khả năng mở rộng tốt, cho phép đễ dàng thêm các node mới vào cluster đề xử lý lượng đữ liệu lớn. ¢ Dynamic schema: MongoDB cho phép lưu trữ dữ liệu với schema MongoDB động, giúp đễ dàng thay đối cầu trúc dữ liệu mà không cần thay đổi cầu trúc cơ sở dữ liệu.

Nội dung được bảo vệ bản quyền — Tải xuống đầy đủ