Đồ Án Tốt Nghiệp Công Nghệ Thông Tin: Xây Dựng Website Mạng Xã Hội Sử Dụng MERN Stack

Đồ án tốt nghiệp xây dựng website mạng xã hội sử dụng MERN Stack, hướng dẫn chi tiết từ thiết kế đến triển khai, phù hợp cho sinh viên công nghệ thông tin.

• Tác giả: Lê Trương Ngọc Hải
• Người hướng dẫn: ThS. Nguyễn Hữu Trung
• Trường học: Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Xây dựng website mạng xã hội sử dụng MERN Stack
• Loại tài liệu: đồ án tốt nghiệp
• Năm xuất bản: 2024
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Xây dựng website

Đồ án tốt nghiệp tập trung vào xây dựng website mạng xã hội sử dụng MERN Stack. Mục tiêu chính là tạo ra một nền tảng chia sẻ kiến thức với giao diện trực quan và chức năng hỗ trợ người dùng. Phát triển web được thực hiện thông qua việc sử dụng các công nghệ hiện đại như Node.js, React, MongoDB, và Express.js. Điều này đảm bảo tính linh hoạt và hiệu suất cao cho hệ thống. Thiết kế giao diện được chú trọng để tạo sự thân thiện và dễ sử dụng cho người dùng.

1.1. Công nghệ web

Công nghệ web được áp dụng trong đồ án bao gồm MERN Stack, một bộ công nghệ phổ biến trong phát triển ứng dụng web. Node.js và Express.js được sử dụng để xây dựng backend, trong khi React đảm nhận phần frontend. MongoDB được chọn làm cơ sở dữ liệu NoSQL, phù hợp với yêu cầu lưu trữ dữ liệu lớn và linh hoạt. Sự kết hợp này tạo nên một hệ thống mạnh mẽ và dễ bảo trì.

1.2. Phát triển phần mềm

Quá trình phát triển phần mềm được thực hiện theo các bước rõ ràng, từ khảo sát yêu cầu đến thiết kế và triển khai. Quản lý dự án được hỗ trợ bởi nền tảng JIRA, giúp theo dõi tiến độ và quản lý nhiệm vụ hiệu quả. Các chức năng chính của hệ thống bao gồm đăng nhập, đăng ký, quản lý bài viết, và tương tác người dùng. Kỹ thuật lập trình được áp dụng để đảm bảo mã nguồn sạch và dễ mở rộng.

II. Mạng xã hội

Đồ án tập trung vào việc xây dựng một mạng xã hội chia sẻ kiến thức, nhằm tạo ra một cộng đồng học tập và nghiên cứu. Tương tác người dùng là yếu tố cốt lõi, với các chức năng như đăng bài, bình luận, và chia sẻ nội dung. Hệ thống cũng hỗ trợ quản lý nhóm và thông báo, giúp người dùng dễ dàng kết nối và trao đổi thông tin. Dịch vụ web được tích hợp để tăng cường trải nghiệm người dùng, bao gồm liên kết với các nền tảng mạng xã hội khác.

2.1. Thiết kế giao diện

Thiết kế giao diện được tối ưu hóa để tạo sự thu hút và dễ sử dụng. Các trang chính như trang đăng nhập, trang tin tức, và trang cá nhân được thiết kế với bố cục rõ ràng và thẩm mỹ cao. React được sử dụng để xây dựng các thành phần giao diện động, giúp tăng tốc độ tải trang và cải thiện trải nghiệm người dùng. Tối ưu hóa SEO cũng được áp dụng để tăng khả năng hiển thị của trang web trên các công cụ tìm kiếm.

2.2. Tương tác người dùng

Tương tác người dùng được thiết kế để tạo sự kết nối mạnh mẽ giữa các thành viên. Các chức năng như nhắn tin, theo dõi, và thích bài viết giúp người dùng dễ dàng tương tác. Hệ thống cũng hỗ trợ quản lý thông báo và gợi ý nội dung dựa trên sở thích của người dùng. Cơ sở dữ liệu được thiết kế để lưu trữ thông tin người dùng và tương tác một cách hiệu quả, đảm bảo tính nhất quán và bảo mật.

III. MERN Stack

MERN Stack là công nghệ chính được sử dụng trong đồ án, bao gồm MongoDB, Express.js, React, và Node.js. Sự kết hợp này tạo nên một hệ thống full-stack mạnh mẽ và linh hoạt. Node.js và Express.js đảm nhận phần backend, xử lý các yêu cầu từ người dùng và quản lý dữ liệu. React được sử dụng để xây dựng giao diện người dùng động và tương tác. MongoDB là cơ sở dữ liệu NoSQL, phù hợp với yêu cầu lưu trữ dữ liệu lớn và linh hoạt.

3.1. Lập trình JavaScript

Lập trình JavaScript là nền tảng chính trong việc phát triển hệ thống. Node.js được sử dụng để xây dựng server-side, trong khi React đảm nhận client-side. Sự thống nhất trong ngôn ngữ lập trình giúp tăng hiệu quả phát triển và dễ dàng bảo trì. Express.js được sử dụng để tạo các API RESTful, giúp kết nối giữa frontend và backend một cách hiệu quả.

3.2. Cơ sở dữ liệu

Cơ sở dữ liệu được quản lý bởi MongoDB, một hệ thống NoSQL linh hoạt và hiệu suất cao. MongoDB được chọn vì khả năng lưu trữ dữ liệu phi cấu trúc và dễ dàng mở rộng. Các bộ dữ liệu được thiết kế để hỗ trợ các chức năng chính của hệ thống, bao gồm quản lý người dùng, bài viết, và tương tác. Quản lý dữ liệu được thực hiện thông qua các truy vấn và thao tác dữ liệu hiệu quả.

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

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT. Giới thiệu về ReactJS. Giới thiệu về NodeJS. Giới thiệu về MongoDB .1 Giới thiệu về Express.

KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ. Phân tích hiện trạng. Khảo sát website Spiderum. Phân tích yêu cầu của dự án.

Danh sách yêu cầu chức năng hệ thống. Danh sách yêu cầu phi chức năng. MÔ HÌNH HÓA YÊU CẦU. Đặc tả Usecase.

Đăng ký tài khoản. Xác thực tài khoản. Quên mật khẩu. Chỉnh sửa thông tin người cá nhân.

Xem bài viết. Thích bài viết. Chia sẻ bài viết. Bình luận bài viết.

Tạo bài viết. Báo cáo người dùng. Xem trang cá nhân. Theo dõi người dùng.

Nhắn tin với người khác. Xóa đoạn tin nhắn. Phê duyệt tin nhắn chờ. Xóa tin nhắn người dùng.

Gửi yêu cầu tham gia nhóm. Chỉnh sửa thông tin nhóm. Chỉnh sửa ảnh đại diện nhóm. Phê duyệt tham gia nhóm.

Phê duyệt yêu cầu bài viết. Xem danh sách thông báo. Khóa tài khoản người gửi báo cáo. Thêm cài đặt bài viết.

Xoá cài đặt bài viết. Chỉnh sửa bài viết. Xem chi tiết người dùng. Phân quyền người dùng.

Khoá tài khoản người dùng. Mở khoá tài khoản người dùng. Thêm mới người dùng. Thêm mới nhóm.

Chỉnh sửa nhóm. Xem chi tiết nhóm. Xem thống kê. Gợi ý bài viết.

THIẾT KẾ PHẦN MỀM. Lược đồ tuần tự. Đăng ký tài khoản. Xác thực tài khoản.

Quên mật khẩu. Chỉnh sửa thông tin người cá nhân. Xem chi tiết bài viết. Thích bài viết.

Chia sẻ bài viết. Chia sẻ bài viết qua facebook. Bình luận bài viết. Tạo bài viết.

Báo cáo người dùng. Xem trang cá nhân. Theo dõi người dùng. Nhắn tin với người khác.

Xóa đoạn tin nhắn. Phê duyệt tin nhắn chờ. Xóa tin nhắn người dùng. Gửi yêu cầu tham gia nhóm.

Chỉnh sửa thông tin nhóm. Chỉnh sửa ảnh đại diện nhóm. Phê duyệt tham gia nhóm. Phê duyệt yêu cầu bài viết.

Xem danh sách thông báo. Khóa tài khoản người gửi báo cáo. Thêm cài đặt bài viết. Xoá cài đặt bài viết.

Chỉnh sửa bài viết. Xem chi tiết người dùng. Phân quyền người dùng. Khoá tài khoản người dùng.

Mở khoá tài khoản người dùng. Thêm mới người dùng. Thêm mới nhóm. Chỉnh sửa nhóm.

Xem thống kê. Gợi ý bài viết. Lược đồ Cơ sở dữ liệu. THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ.

Trang đăng nhập. Trang xác thực tài khoản. Trang quên mật khẩu. Trang News Feed.

Trang tin nhắn. Trang bài viết mới nhất. Trang bài viết phổ biến. Trang bài viết nổi bật.

Trang bài viết được lưu. Trang các bản thảo. Giao diện một bài viết. Giao diện chi tiết bài viết.

Giao diện công cụ tìm kiếm. Giao diện phím tắt thông báo, tin nhắn. Giao diện tạo bài viết. Giao diện Chatbot hỗ trợ.

Trang giao diện tất cả nhóm. Trang giao diện nhóm của người dùng. Trang giao diện nhóm người dùng tạo. Trang cá nhân người dùng.

Trang tạo một nhóm mới. Trang cá nhân của người dùng khác. Trang chỉnh sửa thông tin người dùng. Trang thay đổi mật khẩu.

Trang chủ của Admin. Trang Dashboard báo cáo, thống kê. Trang quản lý bài viết. Trang quản lý nhóm.

Trang quản lý Tag. Trang quản lý tài khoản người dùng. Trang quản lý tài khoản bị khóa. Trang quản lý ticket report.

Giao diện xử lí báo cáo. Giao diện setting lịch. CÀI ĐẶT VÀ KIỂM THỬ.THƯ VIỆN CẦN THIẾT VÀ CÀI ĐẶT ỨNG DỤNG .KIỂM THỬ PHẦN MỀM. 127 PHẦN KẾT LUẬN.

NHỮNG KẾT QUẢ ĐẠT ĐƯỢC. Về kiến thức. Về kinh nghiệm. 129 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM.

Nhược điểm. HƯỚNG PHÁT TRIỂN. 130 TÀI LIỆU THAM KHẢO. 132 DANH SÁCH HÌNH Hình 1.1 Màn hình Trang chủ Website Spiderum 10 Hình 2.

2 Thanh Navbar Website Spiderum .3 Màn hình Danh sách bài viết Website Spiderum.4 Màn hình Đăng nhập Website Spiderum .5 Màn hình Trang cá nhân Website Spiderum. Màn hình Hỗ trợ người dùng Spiderum .7 Màn hình Trò chuyện Website Spiderum. Lược đồ Usecase……………………………………………………………18 Hình 3. Lược đồ Usecase nhắn tin.

Lược đồ Usecase Quản lý bài viết. Lược đồ Usecase quản lý báo cáo. Lược đồ Usecase tương tác nhóm…………………………………………. Lược đồ Usecase quản lý người dùng………………………………………21 Hình 4.

Lược đồ tuần tự đăng nhập………………………………………………… 62 Hình 4. Lược đồ tuần tự đăng ký tài khoản. Lược đồ tuần tự xác thực tài khoản. Quên mật khẩu .5 Lược đồ tuần tự chỉnh sửa thông tin người cá nhân.

Lược đồ tuần tự xem chi tiết bài viết. Lược đồ tuần tự lưu bài viết. Thích bài viết. Lược đồ tuần tự báo cáo bài viết.

Lược đồ tuần tự chia sẻ bài viết. Lược đồ tuần tự chia sẻ bài viết qua facebook. Lược đồ tuần tự bình luận bài viết. Lược đồ tuần tự xóa bài viết.

Lược đồ tuần tự tạo bài viết. Lược đồ tuần tự báo cáo tag. Lược đồ tuần tự báo cáo người dùng. Lược đồ tuần tự báo cáo bình luận.

Lược đồ tuần tự xem trang cá nhân. Lược đồ tuần tự theo dõi người dùng. Lược đồ tuần tự nhắn tin với người dùng khác. Lược đồ tuần tự xóa đoạn tin nhắn.

Lược đồ tuần tự phê duyệt tin nhắn chờ. Lược đồ tuần tự xóa tin nhắn người dùng. Lược đồ tuần tự tạo nhóm. Lược đồ tuần tự xóa nhóm.

Lược đồ tuần tự gửi yêu cầu tham gia nhóm. Lược đồ tuần tự chỉnh sửa thông tin nhóm. Lược đồ tuần tự chỉnh sửa ảnh đại diện nhóm. Lược đồ tuần tự phê duyệt tham gia nhóm.

Lược đồ tuần tự phê duyệt yêu cầu bài viết. Lược đồ tuần tự xem danh sách thông báo. Lược đồ tuần tự tìm kiếm. Lược đồ tuần tự xóa báo cáo.

Lược đồ tuần tự khoản tài khoản người gửi báo cáo. Lược đồ tuần tự thêm cài đặt bài viết. Lược đồ tuần tự xóa cài đặt bài viết. Lược đồ tuần tự xóa bài viết.

Lược đồ tuần tự chỉnh sửa bài viết. Lược đồ tuần tự xem chi tiết người dùng. Lược đồ tuần tự phân quyền người dùng. Lược đồ tuần tự khóa tài khoản người dùng.

Lược đồ tuần tự mở khóa tài khoản người dùng. Lược đồ tuần tự thêm mới người dùng. Lược đồ tuần tự them mới nhóm. Lược đồ tuần tự xóa nhóm.

Lược đồ tuần tự chỉnh sửa nhóm. Lược đồ tuần tự thêm tag. Lược đồ tuần tự xóa tag. Lược đồ tuần tự xem thống kê.

Lược đồ tuần tự gợi ý bài viết .Trang đăng nhập……………………………………………………………. Trang xác thực tài khoản. Trang quên mật khẩu .5 Trang đặt lại mật khẩu. Trang News Feed.

Trang tin nhắn. Trang upload hình ảnh. Trang xóa đoạn hội thoại .12 Trang bài viết mới nhất. Trang bài viết phổ biến.

Trang bài viết nổi bật. Trang bài viết được lưu. Trang bài viết bản thảo. Trang giao hiện xem bài viết.

Giao diện chi tiết bài viết. Trang giao diện các bình luận bài viết. Giao diện công cụ tìm kiếm .22 Giao diện thông báo tin nhắn. Giao diện thông báo.

Giao diện tạo bài viết bước 1. Giao diện tạo bài viết bước 2. Giao diện tạo bài viết bước 3. Giao diện Chatbot hỗ trợ.

Giao diện tất cả nhóm. Giao diện chi tiết nhóm. Giao diện danh sách người dùng trong nhóm. Giao diện nhóm người dung tham gia.

Giao diện chi tiết nhóm. Hộp thoại mời người dùng vào nhóm. Giao diện nhóm người dùng tạo. Giao diện chi tiết nhóm.

Hộp thoại chỉnh sửa tag. Hộp thoại chỉnh sửa nhóm. Trang cá nhân người dùng. Danh sách người dung theo dõi và danh sách người dùng khác theo dõi.

Giao diện thêm mới nhóm. Trang cá nhân của người dung khác. Trang chỉnh sửa thông tin người dùng. Thay đổi mật khẩu.

Trang chủ của Admin. Trang Dashboard báo cáo, thống kê. Trang quản lý bài viết. Trang quản lý nhóm.

Trang quản lý tag. Trang quản lý tài khoản người dùng. Giao diện tạo mới tài khoản. Trang quản lý tài khoản bị khóa.

Trang quản lý ticket report. Hộp thoại thêm mới và chỉnh sửa ticket report. Giao diện xử lí báo cáo. Giao diện setting lịch.

Giao diện chi tiết của một setting xóa bài. Giao diện thêm mới setting. Bug và task quản lý ở Jira………….127 DANH SÁCH BẢNG Bảng 3. Bảng đặc tả usecase đăng nhập.

Bảng đặc tả usecase đăng ký tài khoản. Bảng đặc tả xác thực tài khoản. Bảng đặc tả usecase quên mật khẩu. Bảng đặc tả usecase chỉnh sửa thông tin cá nhân.

Bảng đặc tả usecase xem bài viết. Bảng đặc tả usecase lưu bài viết. Bảng đặc tả usecase thích bài viết. Bảng đặc tả usecase báo cáo bài viết.

Bảng đặc tả usecase chia sẻ bài viết. Bảng đặc tả usecase bình luận bài viết. Bảng đặc tả usecase xóa bài viết. Bảng đặc tả usecase tạo bài viết.

Bảng đặc tả usecase xóa bình luận. Bảng đặc tả usecase báo cáo tag. Bảng đặc tả usecase báo cáo người dùng. Bảng đặc tả usecase báo cáo bình luận.

Bảng đặc tả usecase xem trang cá nhân. Bảng đặc tả usecase theo dõi. Bảng đặc tả usecase nhắn tin với người dung khác. Bảng đặc tả usecase xóa đoạn tin nhắn.

Bảng đặc tả usecase phê duyệt tin nhắn chờ. Bảng đặc tả usecase xóa tin nhắn người dùng. Bảng đặc tả usecase tạo nhóm. Bảng đặc tả usecase xóa nhóm .26 Bảng đặc tả usecase gửi yêu cầu tham gia nhóm.

Bảng đặc tả usecase chỉnh sửa thông tin nhóm. Bảng đặc tả usecase chỉnh sửa ảnh đại diện nhóm. Bảng đặc tả usecase phê duyệt tham gia nhóm. Bảng đặc tả usecase phê duyệt yêu cầu bài viết.

Bảng đặc tả usecase xem danh sách thông báo. Bảng usecase đặc tả tìm kiếm. Bảng đặc tả usecase phê duyệt báo cáo. Bảng đặc tả usecase xóa báo cáo.

Bảng đặc tả usecase khóa tài khoản người gửi báo cáo. Bảng đặc tả usecase thêm cài đặt bài viết. Bảng đặc tả usecase xóa cài đặt bài viết. Bảng đặc tả usecase chỉnh sửa bài viết .