Xây Dựng Mạng Xã Hội Sử Dụng MERN Stack: Hướng Dẫn Chi Tiết

Chuyên khảo kỹ thuật phân tích Xây dựng mạng xã hội sử dụng mern stack, đánh giá các khía cạnh quan trọng, đề xuất hướng nghiên cứu tiếp theo.

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

2022

111
4
0

Phí lưu trữ

35 Point

Mục lục chi tiết

LỜI CẢM ƠN

ĐỀ CƯƠNG KHOÁ LUẬN TỐT NGHIỆP

CÔNG NGHỆ PHẦN MỀM

KẾ HOẠCH THỰC HIỆN

DANH SÁCH HÌNH

DANH SÁCH BẢNG BIỂU

PHẦN MỞ ĐẦU

0.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI

0.2. ĐỐI TƯỢNG NGHIÊN CỨU

0.3. PHẠM VI NGHIÊN CỨU

0.4. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC

1. CHƯƠNG 1: CƠ SỞ LÝ THUYẾT

1.1. KIẾN TRÚC HỆ THỐNG

1.2. NodeJS là gì

1.3. Kiến trúc của NodeJS

2. CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG MÔ HÌNH HÓA YÊU CẦU

2.1. KHẢO SÁT HIỆN TRẠNG

2.2. XÁC ĐỊNH YÊU CẦU

2.2.1. Yêu cầu chức năng

2.2.2. Yêu cầu phi chức năng

2.3. MÔ HÌNH HÓA YÊU CẦU

2.3.1. Lược đồ Use case

2.3.2. Mô tả Use case

3. THIẾT KẾ PHẦN MỀM

3.1. LƯỢC ĐỒ TUẦN TỰ

3.2. THIẾT KẾ GIAO DIỆN

3.2.1. Giao diện đăng nhập

3.2.2. Giao diện đăng ký

3.2.3. Giao diện quên mật khẩu

3.2.4. Giao diện trang chủ

3.2.5. Giao diện bài viết

3.2.6. Giao diện danh sách lời mời kết bạn

3.2.7. Giao diện danh sách thông báo tương tác

3.2.8. Giao diện tạo bài viết

3.2.9. Giao diện chỉnh sửa bài viết

3.2.10. Giao diện bình luận bài viết

3.2.11. Giao diện tùy chỉnh trên thanh công cụ đầu trang

3.2.12. Giao diện thay đổi mật khẩu của tài khoản bản thân

3.2.13. Giao diện trang cá nhân

3.2.14. Giao diện chỉnh thông tin cá nhân

3.2.15. Giao diện chỉnh sửa ảnh đại diện và ảnh bìa

3.2.16. Giao diện chỉnh sửa sở thích

3.2.17. Giao diện tab bạn bè trong trang cá nhân

3.2.18. Giao diện tab nhóm trong trang cá nhân

3.2.19. Giao diện trang nhóm

3.2.20. Giao diện trang danh sách người dùng

3.2.21. Giao diện biểu đồ trang admin

3.2.22. Giao diện bảng quản lý người dùng trang admin

3.2.23. Giao diện bảng quản lý bài viết trang admin

4. KIỂM THỬ ỨNG DỤNG

4.1. Kế hoạch kiểm thử

4.1.1. Mục đích kiểm thử

4.1.2. Lịch trình kiểm thử

4.2. Phạm vi kiểm thử

4.2.1. Những chức năng được kiểm thử

4.2.2. Những chức năng không được kiểm thử

4.3. Yêu cầu về tài nguyên

4.3.1. Công cụ kiểm thử

4.4. Môi trường kiểm thử

4.4.1. Bảng phân công kiểm thử

4.5. Chiến lược kiểm thử

4.5.1. Các loại kiểm thử

4.5.2. Các loại kiểm thử

4.6. Theo dõi lỗi

4.6.1. Phân loại lỗi

4.6.2. Quy trình xử lý lỗi

5. CHƯƠNG 5: CÀI ĐẶT ỨNG DỤNG

PHẦN KẾT LUẬN

0.1. KẾT QUẢ ĐẠT ĐƯỢC

0.2. Kiến thức tìm hiểu được

0.3. Chương trình đã làm được

0.4. NHƯỢC ĐIỂM

0.5. HƯỚNG PHÁT TRIỂN

TÀI LIỆU THAM KHẢO

Tóm tắt

I. Giới thiệu về MERN Stack và xây dựng mạng xã hội

MERN Stack là một bộ công nghệ phổ biến trong phát triển ứng dụng web, bao gồm MongoDB, Express.js, React.js, và Node.js. Sự kết hợp này tạo nên một kiến trúc full-stack mạnh mẽ, phù hợp để xây dựng mạng xã hội. MongoDB là cơ sở dữ liệu NoSQL linh hoạt, Express.jsNode.js hỗ trợ phát triển backend, trong khi React.js đảm nhiệm phát triển frontend. Việc sử dụng MERN Stack giúp tạo ra các ứng dụng real-time với hiệu suất cao và khả năng mở rộng.

1.1. Tổng quan về MERN Stack

MERN Stack là sự kết hợp của bốn công nghệ chính: MongoDB, Express.js, React.js, và Node.js. MongoDB là cơ sở dữ liệu NoSQL, lưu trữ dữ liệu dưới dạng JSON. Express.js là framework giúp xây dựng API RESTful một cách nhanh chóng. React.js là thư viện JavaScript phổ biến để xây dựng giao diện người dùng. Node.js là môi trường runtime cho phép chạy JavaScript trên server. Sự kết hợp này tạo nên một kiến trúc MERN hoàn chỉnh, phù hợp cho phát triển ứng dụng web hiện đại.

1.2. Ứng dụng của MERN Stack trong xây dựng mạng xã hội

MERN Stack được sử dụng rộng rãi trong xây dựng mạng xã hội nhờ khả năng xử lý dữ liệu lớn và hỗ trợ ứng dụng real-time. MongoDB giúp lưu trữ dữ liệu người dùng một cách linh hoạt. Express.jsNode.js đảm bảo phát triển backend hiệu quả, xử lý các yêu cầu từ client. React.js tạo ra giao diện người dùng mượt mà và tương tác cao. Sự kết hợp này giúp tạo ra các ứng dụng web có khả năng mở rộng và hiệu suất cao.

II. Phát triển backend với Node

Phát triển backend là một phần quan trọng trong xây dựng mạng xã hội. Node.jsExpress.js là hai công nghệ chính được sử dụng để xây dựng API RESTful và xử lý các yêu cầu từ client. Node.js sử dụng kiến trúc hướng sự kiệnEvent Loop, giúp xử lý các yêu cầu một cách bất đồng bộ và hiệu quả. Express.js là framework giúp đơn giản hóa việc xây dựng các API và quản lý các middleware.

2.1. Kiến trúc của Node.js

Node.js sử dụng kiến trúc hướng sự kiệnEvent Loop, giúp xử lý các yêu cầu một cách bất đồng bộ. Event Loop là cơ chế giúp Node.js có thể xử lý nhiều yêu cầu cùng lúc mà không cần tạo ra nhiều luồng. Điều này giúp tăng hiệu suất và giảm tải cho server. Node.js cũng hỗ trợ các giao thức mạng như HTTP, TCP, và UDP, giúp xây dựng các ứng dụng web một cách linh hoạt.

2.2. Xây dựng API với Express.js

Express.js là framework giúp đơn giản hóa việc xây dựng API RESTful. Nó cung cấp các công cụ để quản lý các yêu cầu HTTP, xử lý các middleware, và định tuyến các API. Express.js cũng hỗ trợ tích hợp với MongoDB thông qua các thư viện như Mongoose, giúp quản lý dữ liệu một cách hiệu quả. Việc sử dụng Express.js giúp tăng tốc độ phát triển và đảm bảo tính nhất quán trong phát triển backend.

III. Phát triển frontend với React

Phát triển frontend là yếu tố quyết định trải nghiệm người dùng trong xây dựng mạng xã hội. React.js là thư viện JavaScript phổ biến, giúp xây dựng giao diện người dùng mượt mà và tương tác cao. React.js sử dụng Virtual DOM để tối ưu hóa hiệu suất và one-way data binding để quản lý trạng thái ứng dụng một cách hiệu quả. Việc sử dụng React.js giúp tạo ra các ứng dụng web có khả năng mở rộng và dễ bảo trì.

3.1. Virtual DOM trong React.js

Virtual DOM là một trong những tính năng quan trọng của React.js, giúp tối ưu hóa hiệu suất của ứng dụng. Virtual DOM là một bản sao của DOM thật, được sử dụng để cập nhật giao diện người dùng một cách nhanh chóng và hiệu quả. Khi có sự thay đổi trong trạng thái ứng dụng, React.js sẽ so sánh Virtual DOM với DOM thật và chỉ cập nhật những phần cần thiết. Điều này giúp giảm thiểu thời gian render và tăng hiệu suất ứng dụng.

3.2. Quản lý trạng thái với React.js

React.js sử dụng one-way data binding để quản lý trạng thái ứng dụng một cách hiệu quả. One-way data binding đảm bảo rằng dữ liệu chỉ được truyền từ component cha xuống component con, giúp tránh được các vấn đề về đồng bộ hóa dữ liệu. React.js cũng hỗ trợ các thư viện quản lý trạng thái như Redux, giúp quản lý trạng thái ứng dụng một cách tập trung và dễ dàng hơn.

21/02/2025
Xây dựng mạng xã hội sử dụng mern stack

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

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 KIẾN TRÚC HỆ THỐNG Hình 1: Hình minh hoạ kiến trúc hệ thống[1] Kiến trúc chung của hệ thống bao gồm có 3 tầng truyền thống, tầng hiển thị front- end(Reactjs),tầng ứng dụng backend (expressJs và nodeJs) và tầng cơ sở dữ liệu (mongodb), front-end và backend giao tiếp với nhau qua RESTful API 1.1 NodeJS là gì Node là một nền tảng phát triển các ứng dụng web back-end được viết bằng JavaScript, là một trình biên đóng gói của Google’s V8 JavaScript engine, libuv platform abstraction layer, và một thư viện lõi được viết bằng Javascript. Mục tiêu của NodeJS là làm cho web có khả năng push như trong một số ứng dụng gmail. NodeJS cung cấp công cụ giúp lập trình viên có thể làm việc trong non-blocking, mô hình I/O. Sau hơn 20 năm nghiên cứu, xây dựng và phát triển, nhóm kĩ sư đã cho ra đời sản phẩm ứng dụng web NodeJS chạy thời gian thực và kết nối 2 chiều client và server, cho phép trao đổi dữ liệu một cách tự do.

Ngoài việc chạy trên JavaScript thì Node có những tính năng đi kèm sau: 18 - Có trình CLI (giao diện dòng lệnh) - Chạy theo mô hình REPL - Có các hàm quản lý tiến trình - Có các đối tượng hỗ trợ làm việc với dữ liệu nhị phân - Hỗ trợ TCP và UDP - Hỗ trợ phân giải DNS - Hỗ trợ HTTP và HTTPS - Có thể truy cập file và thư mục Dưới đây là sơ đồ về các thành phần quan trọng trong NodeJS: Hình 2: Các thành phần quan trọng trong NodeJS [2] NodeJS cho phép chúng ta dễ dàng thực hiện các giao thức mạng cấp thấp. Ví dụ, NodeJS có một mô-đun HTTP, cho phép xây dựng một máy chủ web chỉ với một vài dòng mã, nhưng do đó chúng ta phải tìm hiểu thêm nhiều thứ, chẳng hạn như hiểu tiêu đề của các gói HTTP, không giống như PHP, vốn chỉ là một mô-đun mở rộng. cho các mạng hiện có Máy chủ (như Apache hay NginX) - tức là PHP dễ sử dụng hơn NodeJS, nhưng không cho phép lập trình viên làm công việc cấp thấp. Tuy nhiên, vì NodeJS là một framework mã nguồn mở, nên có rất nhiều thư viện cho phép các nhà phát triển viết các máy chủ web nhanh hơn và dễ dàng hơn.2 Kiến trúc của NodeJS NodeJS sử dụng kiển trúc lập trình hướng sự kiện bất đồng bộ, và đây là một tính năng làm cho các ứng dụng NodeJS có thể chạy với hiệu suất cao.

Chẳng hạn như đối với các ứng dụng bình thường như một chương trình viết bằng C++ thì khi ta viết chương 19 trình để đọc dữ liệu, chương trình sẽ phải dừng lại ở đoạn code đọc dữ liệu để chờ cho đến khi có dữ liệu để đọc, nếu muốn chương trình tiếp tục vừa chạy các công việc khác vừa đọc dữ liệu thì phải dùng đến đa luồng (multi-threading), tuy nhiên việc dùng đa luồng rất phức tạp và có thể làm chậm server nếu quản lý đa luồng không tốt. Trong khi đó, NodeJS chỉ sử dụng một luồng duy nhất, các câu lệnh nhập xuất không cần phải chờ mà được thực hiện ngay lập tức bằng cách sử dụng Event Loop, cứ mỗi lần có sự kiện xảy ra thì chuyển dữ liệu của sự kiện đó đến các hàm xử lý tương ứng, và trong khi các hàm xử lý đang chạy thì vòng lặp sự kiện vẫn tiếp tục nhận sự kiện và chuyển đến các hàm xử lý tương ứng khác. Đối với các chương trình bình thường thì khi chạy đến dòng code trên, luồng chạy chương trình đó sẽ phải dừng lại để đợi quá trình xử lý từ cơ sở dữ liệu thực hiện xong và trả về rồi mới tiếp tục được, trong quá trình đợi đó sẽ có nhiều yêu cầu khác có thể xảy ra và hiệu suất phần mềm sẽ giảm do lãng phí tài nguyên, để giải quyết tình trạng đó thì ta có thể dùng cơ chế đa luồng để xử lý, tuy nhiên đa luồng có một nhược điểm làm tiêu tốn nhiều bộ nhớ và CPU và nếu chúng ta quản lý không tốt việc xử lý đa luồng có thể làm chậm server. Thay vì dùng đa luồng thì NodeJS sử dụng cơ chế Event Loop để giải quyết việc này, nói một cách đơn giản thì Node sẽ đưa các câu lệnh chờ trên vào một luồng khác là Event Loop để xử lý riêng, trong khi luồng chính vẫn sẽ chạy các công việc của riêng nó, và khi nào luồng chính “rảnh” rồi thì luồng Event Loop sẽ chuyển các công việc đã thực hiện xong trở về lại luồng chính.

Và chính vì NodeJS chỉ sử dụng 2 luồng nên tài nguyên hệ thống sẽ không bị chiếm nhiều như khi dùng cơ chế đa luồng, ngoài ra việc viết mã sử dụng Event Loop đơn giản hơn nhiều Trong đoạn mã trên, kết quả trả về từ hàm query() thay vì được gán vào một biến thì sẽ được truyền vào một hàm khác là function(err, result), và hàm này sẽ được chuyển vào luồng Event Loop và chờ cho đến khi luồng chính “rảnh” thì mới được chuyển qua.3 Cách thức hoạt động của NodeJS Ý tưởng chính của NodeJS là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng. Bởi vì, NodeJS có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao. Nếu như các ứng dụng web truyền thống, các request tạo ra một luồng xử lý yêu cầu mới và chiếm RAM của hệ thống thì việc tài nguyên của hệ thống sẽ được sử 20 dụng không hiệu quả. Chính vì lẽ đó giải pháp mà NodeJS đưa ra là sử dụng luồng đơn (Single-Threaded), kết hợp với non-blocking I/O để thực thi các request, cho phép hỗ trợ hàng chục ngàn kết nối đồng thời[1].

Hình 3: Cách thức hoạt động của NodeJS[3] Tính toán nhanh như sau: giả sử mỗi một luồng đính kèm 2MB dữ liệu được gửi lên server chạy trong hệ thống với 8GB RAM hệ thống, thì có tối đa khoảng 4000 kết nối đồng thời. Tuy nhiên với NodeJS thì nó có khả năng mở rộng ra cả hàng triệu kết nối cùng lúc. Thật vậy, cơ chế của NodeJS Application xử lý Model như sau: - Client gửi request đến Web Server. - NodeJS Web Service duy trì trong nội bộ một luồng giới hạn để cung cấp dịch vụ cho Client Request.

- NodeJS Web Service nhận tất cả các request và đặt chúng vào một trong Queue. Nó được gọi là một Event Queue. 21 - NodeJS Web Service nội bộ có một thành phần được gọi là "Event Loop". - Event Loop chỉ sử dụng một luồng đơn để xử lý Model.

- Event Loop kiểm tra tất cả các Request đặt trong Event Queue. Nếu không có request nào thì chờ request đến vô thời hạn. - Nếu có request thì sẽ lấy một request từ Event Queue: - Khởi động quá trình xử lý tiến trình từ client request. - Nếu Client Request không chứa nhiều Blocking I/O thì xử lý tất cả mọi thứ và chuẩn bị cho quá trình gửi lại phản hồi cho phía client.

- Nếu Client Request chứa nhiều Blocking I/O như việc tương tác với cơ sở dữ liệu, tập tin hệ thống, dịch vụ mở rộng, thì nó sẽ thực hiện theo các phương pháp tiếp cận khác nhau. Kiểm tra các luồng sẵn có từ nội bộ bên trong của request gửi lên. Chọn một luồng và chỉ định cho client request tương ứng với luồng đó. Luồng đó phải có trách nhiệm với reuqest đó, xử lý nó, thực thi các hoạt động Blocking I/O, chuẩn bị các phản hồi và gửi lại cho Event Loop.

Event Loop gửi lại phản hồi tương ứng cho client. 22 Hình 4: Cơ chế của Event Loop trong NodeJS [4] Mô tả sơ đồ như sau: - Có n số lượng client gửi request lên web service. Chúng ta giả định rằng chúng đều truy cập đồng thời vào ứng dụng Web của chúng ta - Chúng ta giả định client của chúng ta là Client-1, Client-2 đến client-n - Web server của chúng ta duy trì một vùng các luồng có giới hạn và giả định rằng m là số luồng của vùng luồng đó. - NodeJS Web service nhận các request từ client-1, client-2 đến client-n và đặt chúng vào trong Event Queue - NodeJS Event Loop chọn các request theo dạng một đối một: ▪ Event Loop chọn client-1 request-1 o Kiểm tra trong client-1 request-1 có không yêu cầu bất kì hoạt động Blocking I/O hoặc mất nhiều thời gian cho việc tính toán phức tạp.

o Request này thì đơn giản và Non-blocking I/O, nó không có đòi hỏi một xử lý nào riêng biệt. 23 o Event Loop xử lý tất cả các giai đoạn để cung cấp cho hoạt động của client-1 request-1 (hoạt động ở đây nghĩa là các function của javascript) và chuẩn bị response-1. o Event Loop gửi Response-1 đến Client-1 ▪ Event Loop chọn client-2 request-2 o Kiểm tra trong client-2 request-2 có không yêu cầu bất kì hoạt động Blocking I/O hoặc mất nhiều thời gian cho việc tính toán phức tạp. o Request này thì đơn giản và Non-blocking I/O, nó không có đòi hỏi một xử lý nào riêng biệt.

o Event Loop xử lý tất cả các giai đoạn để cung cấp cho hoạt động của client-2 request-2 và chuẩn bị response-2. o Event Loop gửi Response-2 đến Client-2. ▪ Event Loop chọn client-n request-n o Kiểm tra trong client-n request-n có không yêu cầu bất kì hoạt động Blocking I/O hoặc mất nhiều thời gian cho việc tính toán phức tạp. o Request này thì phức tạp và nhiệm vụ Blocking I/O.

Event Loop thì không thể xử lý request này ngay được. o Event Loop lựa chọn Thread T-1 từ nội bộ khu vực Thread và chỉ định Client-n Request-n này ánh xạ với Thread T-1 o Thread T-1 đọc và xử lý Request-n, thực hiện Blocking IO cần thiết hoặc tính toán nhiệm vụ, và hoàn tất để chuẩn bị Response-n. o Thread T-1 gửi Response-n này đến Event Loop o Event Loop trong công đoạn này gửi Response-n này tới Client-n - Tại đây Client Request thì gọi đến một hoặc nhiều function javascript. Các function Javascript có thể gọi tới các function khác hoặc có thể sử dụng chức năng callback đặc thù.1 Định nghĩa 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. 24 Hình 5: Cấu trúc một API được xây dựng với ExpressJS[3] 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. - Khai báo 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ố.

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

Hướng dẫn xây dựng mạng xã hội với MERN Stack là tài liệu chi tiết giúp bạn nắm vững quy trình phát triển một mạng xã hội từ đầu đến cuối bằng công nghệ MERN (MongoDB, Express.js, React, Node.js). Tài liệu này không chỉ cung cấp kiến thức cơ bản về từng thành phần trong MERN mà còn hướng dẫn cách tích hợp chúng để tạo ra một ứng dụng hoàn chỉnh. Bạn sẽ học được cách thiết kế cơ sở dữ liệu, xây dựng API, và phát triển giao diện người dùng thân thiện. Đặc biệt, tài liệu nhấn mạnh vào việc tối ưu hiệu suất và bảo mật, giúp bạn tạo ra một sản phẩm chuyên nghiệp và đáng tin cậy.

Nếu bạn quan tâm đến việc phát triển ứng dụng web với các công nghệ tương tự, hãy khám phá thêm Đồ án hcmute tìm hiểu expressjs nextjs và phát triển website bán đồ điện tử để hiểu sâu hơn về cách sử dụng Express.js và Next.js trong các dự án thực tế. Bên cạnh đó, Xây dựng và quản lý website review phim bằng công nghệ react và node js đồ án tốt nghiệp cũng là một tài liệu hữu ích giúp bạn mở rộng kiến thức về React và Node.js trong việc phát triển các nền tảng đánh giá. Cả hai tài liệu này đều là nguồn tham khảo tuyệt vời để bạn nâng cao kỹ năng và áp dụng vào các dự án của mình.