Xây Dựng Website Mạng Xã Hội Sử Dụng ReactJS và Spring Boot

Chuyên khảo kỹ thuật phân tích Xây dựng website mạng xã hội sử dụng reactjs và spring boot, đá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

2023

148
6
0

Phí lưu trữ

35 Point

Mục lục chi tiết

LỜI CẢM ƠN

1. PHẦN MỞ ĐẦU

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

1.2. MỤC TIÊU CỦA ĐỀ TÀI

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

1.4. CÔNG NGHỆ SỬ DỤNG

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

1.6. Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

2. KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HOÁ 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 của người dùng

2.2.2. Yêu cầu chức năng hệ thống

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

2.3. MÔ HÌNH HOÁ YÊU CẦU

2.3.1. Các Usecase phía Người dùng

2.3.2. Các Usecase phía Quản trị viên

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

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

3.1.1. Chức năng Đăng nhập

3.1.2. Chức năng đăng kí

3.1.3. Chức năng đăng xuất

3.1.4. Chức năng xem thông tin cá nhân

3.1.5. Chức năng chỉnh sửa thông tin cá nhân

3.1.6. Chức năng kết bạn

3.1.7. Chức năng nhắn tin

3.1.8. Chức năng Tìm kiếm người dùng

3.1.9. Chức năng Đăng bài viết

3.1.10. Chức năng Bình luận bài viết

3.1.11. Chức năng tạo trang

3.2. LƯỢC ĐỒ THỰC THỂ KẾT HỢP (ERD)

3.2.1. Lược đồ thực thể kết hợp (ERD)

3.2.2. Mô tả chi tiết bảng dữ liệu

3.3. THIẾT KẾ GIAO DIỆN HỆ THỐNG

3.3.1. GIAO DIỆN PHÍA NGƯỜI DÙNG

3.3.1.1. Giao diện trang Đăng nhập
3.3.1.2. Giao diện trang Đăng ký
3.3.1.3. Giao diện trang Lấy lại mật khẩu
3.3.1.4. Giao diện trang chủ
3.3.1.5. Giao diện trang bạn bè
3.3.1.6. Giao diện trang quản lý trang (Fanpage)
3.3.1.7. Giao diện trang cài đặt thông tin cá nhân
3.3.1.8. Giao diện Trang cài đặt thông tin tài khoản
3.3.1.9. Giao diện Trang nhắn tin
3.3.1.10. Giao diện Trang cá nhân
3.3.1.11. Giao diện Trang Fanpage
3.3.1.12. Giao diện trang Not Found

3.3.2. GIAO DIỆN PHÍA QUẢN TRỊ VIÊN

3.3.2.1. Giao diện trang chủ phía admin
3.3.2.2. Giao diện trang quản lý người dùng
3.3.2.3. Giao diện trang quản lý bài viết
3.3.2.4. Giao diện trang quản lý bình luận
3.3.2.5. Giao diện Trang Fanpage

4. TRẢI NGHIỆM NGƯỜI DÙNG

5. CÀI ĐẶT VÀ KIỂM THỬ PHẦN MỀM

5.1. Yêu cầu hệ thống

5.2. Các bước tiến hành

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

5.4. Phương pháp kiểm thử

5.5. Quy trình kiểm thử

5.6. Kết quả kiểm thử

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

6.1. Về ứng dụng

6.2. NHƯỢC ĐIỂM. HƯỚNG PHÁT TRIỂN

TÀI LIỆU THAM KHẢO

Tóm tắt

I. Tổng Quan Về Xây Dựng Website Mạng Xã Hội Sử Dụng ReactJS Và Spring Boot

Xây dựng website mạng xã hội là một trong những xu hướng phát triển công nghệ hiện đại. Việc sử dụng ReactJSSpring Boot không chỉ giúp tối ưu hóa hiệu suất mà còn mang lại trải nghiệm người dùng tốt hơn. ReactJS cho phép xây dựng giao diện người dùng tương tác, trong khi Spring Boot cung cấp nền tảng vững chắc cho việc phát triển backend. Sự kết hợp này tạo ra một hệ thống mạnh mẽ, dễ bảo trì và mở rộng.

1.1. Lợi Ích Của Việc Sử Dụng ReactJS Trong Xây Dựng Website

ReactJS mang lại nhiều lợi ích cho việc phát triển giao diện người dùng. Với khả năng tái sử dụng component, lập trình viên có thể tiết kiệm thời gian và công sức. Hơn nữa, ReactJS hỗ trợ Virtual DOM, giúp cải thiện tốc độ tải trang và trải nghiệm người dùng.

1.2. Tại Sao Nên Chọn Spring Boot Cho Backend

Spring Boot là một framework mạnh mẽ cho việc phát triển ứng dụng Java. Nó cung cấp tính năng tự động cấu hình, giúp lập trình viên dễ dàng thiết lập môi trường phát triển. Hơn nữa, Spring Boot hỗ trợ xây dựng API RESTful, rất cần thiết cho việc kết nối frontend và backend.

II. Những Thách Thức Khi Xây Dựng Website Mạng Xã Hội

Mặc dù việc xây dựng website mạng xã hội mang lại nhiều cơ hội, nhưng cũng không thiếu thách thức. Các vấn đề như bảo mật, hiệu suất và khả năng mở rộng là những yếu tố cần được xem xét kỹ lưỡng. Đặc biệt, việc quản lý dữ liệu người dùng và bảo vệ thông tin cá nhân là rất quan trọng.

2.1. Vấn Đề Bảo Mật Trong Mạng Xã Hội

Bảo mật là một trong những thách thức lớn nhất khi xây dựng mạng xã hội. Việc sử dụng JSON Web Token để xác thực người dùng là một giải pháp hiệu quả. Điều này giúp bảo vệ thông tin cá nhân và ngăn chặn truy cập trái phép.

2.2. Quản Lý Dữ Liệu Người Dùng

Quản lý dữ liệu người dùng là một nhiệm vụ phức tạp. Sử dụng MongoDB để lưu trữ dữ liệu giúp dễ dàng mở rộng và quản lý thông tin. Tuy nhiên, cần có các biện pháp để đảm bảo tính nhất quán và an toàn cho dữ liệu.

III. Phương Pháp Xây Dựng Website Mạng Xã Hội Hiệu Quả

Để xây dựng một website mạng xã hội hiệu quả, cần áp dụng các phương pháp và công nghệ hiện đại. Việc kết hợp ReactJS cho frontend và Spring Boot cho backend là một trong những cách tiếp cận tốt nhất. Ngoài ra, cần chú trọng đến thiết kế giao diện và trải nghiệm người dùng.

3.1. Thiết Kế Giao Diện Người Dùng Tương Tác

Giao diện người dùng cần phải dễ sử dụng và thân thiện. Sử dụng ReactJS giúp tạo ra các component tương tác, mang lại trải nghiệm tốt cho người dùng. Thiết kế responsive cũng là yếu tố quan trọng để phù hợp với nhiều thiết bị.

3.2. Xây Dựng API RESTful Với Spring Boot

Việc xây dựng API RESTful với Spring Boot giúp kết nối frontend và backend một cách hiệu quả. Các API này cần được thiết kế rõ ràng và dễ sử dụng, đảm bảo tính linh hoạt cho việc mở rộng trong tương lai.

IV. Ứng Dụng Thực Tiễn Của Website Mạng Xã Hội

Website mạng xã hội không chỉ là nơi kết nối người dùng mà còn là công cụ hỗ trợ doanh nghiệp trong việc marketing và phát triển thương hiệu. Các tính năng như tạo trang (Fanpage), quản lý bài viết và tương tác giữa người dùng giúp tăng cường sự gắn kết và tạo ra giá trị cho cộng đồng.

4.1. Tạo Trang Fanpage Để Kinh Doanh

Tính năng tạo trang (Fanpage) cho phép doanh nghiệp quảng bá sản phẩm và dịch vụ. Điều này giúp tăng cường sự hiện diện trực tuyến và thu hút khách hàng tiềm năng.

4.2. Quản Lý Tương Tác Giữa Người Dùng

Quản lý tương tác giữa người dùng là rất quan trọng. Các tính năng như bình luận, thích và chia sẻ giúp tạo ra một môi trường giao tiếp sôi nổi và thân thiện.

V. Kết Luận Về Tương Lai Của Website Mạng Xã Hội

Tương lai của website mạng xã hội hứa hẹn sẽ còn phát triển mạnh mẽ với sự hỗ trợ của các công nghệ mới. Việc áp dụng ReactJSSpring Boot sẽ giúp tối ưu hóa hiệu suất và trải nghiệm người dùng. Các xu hướng như trí tuệ nhân tạo và phân tích dữ liệu cũng sẽ đóng vai trò quan trọng trong việc nâng cao giá trị của mạng xã hội.

5.1. Xu Hướng Công Nghệ Mới Trong Mạng Xã Hội

Các công nghệ mới như trí tuệ nhân tạo và machine learning sẽ giúp cải thiện trải nghiệm người dùng. Việc phân tích dữ liệu người dùng cũng sẽ giúp tối ưu hóa nội dung và quảng cáo.

5.2. Tương Lai Của Giao Tiếp Trực Tuyến

Giao tiếp trực tuyến sẽ ngày càng trở nên phổ biến. Mạng xã hội sẽ tiếp tục là nền tảng quan trọng để kết nối con người và chia sẻ thông tin.

10/07/2025

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

PHẦN MỞ ĐẦU 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI Công nghệ thông tin ngày càng phát triển và được ứng dụng mạnh mẽ trong mọi lĩnh vực của đời sống, kinh tế, xã hội. Cùng với đó, nhu cầu trao đổi, chia sẻ thông tin, kiến thức giữa con người với con người một cách nhanh chóng và hiệu quả ngày càng tăng. Từ đó, mạng xã hội ra đời và đang dần trở nên phổ biến trong cuộc sống.

Mạng xã hội có một sức mạnh vô cùng to lớn và mang lại nhiều tiện ích cho người dùng như giúp người dùng kết nối các mối quan hệ, cập nhật tin tức, kiến thức và xu thế, là nơi chia sẻ cảm xúc. Ngoài ra, mạng xã hội còn được các doanh nghiệp coi như một “át chủ bài” để phát triển kinh doanh và marketing. Không những vậy, mạng xã hội còn là nơi để người dùng có thể giải trí, thư giãn sau thời gian làm việc mệt mỏi. Chính vì vậy, cho nên đến thời điểm hiện tại, mạng xã hội phát triển nở rộ và thu hút được lượng người dùng tham gia đông đảo với nhiều mạng lưới khác nhau là điều dễ hiểu.

Theo Trịnh Hòa Bình và cộng sự (Tháng 3, 2015), khảo sát cho thấy có 61,8% số người trả lời cho biết đã tham gia ít nhất một mạng xã hội. Có 23,1% tham gia 2 MXH và 15,1% là thành viên của ít nhất 3 MXH. Trường hợp nhiều nhất tham gia đến 8 MXH trực tuyến. Xuất phát từ những nhu cầu thực tế được phân tích ở trên, nhóm thực hiện đề tài nhận thấy được vai trò to lớn của mạng xã hội trong cuộc sống.

Do đó, nhóm quyết định chọn đề tài “Xây dựng Website Mạng xã hội” làm đề tài Khóa luận tốt nghiệp. MỤC TIÊU CỦA ĐỀ TÀI Mục tiêu chính của đề tài: Tìm hiểu và áp dụng các kiến thức đã học, đã nghiên cứu để xây dựng và hoàn thiện một Website Mạng xã hội cho phép người dùng kết nối và trao đổi thông tin. 15 Mục tiêu cụ thể của đề tài: Áp dụng và thực hành các công nghệ cụ thể là ReactJs và Spring boot vào đồ án. Xây dựng Website đáp ứng được các yêu cầu cơ bản sau: - Giao diện “Dễ nhìn, dễ sử dụng”.

- Giao diện có thiết kế Responsive phù hợp với tất cả các thiết bị và mọi độ phân giải màn hình. - Xây dựng một Website cho phép người dùng được thực hiện chức năng cơ bản như: • Phía người dùng: Cho phép tạo và truy cập vào tài khoản; Quản lý bài viết; Quản lý tương tác bài viết (Bình luận/Cảm xúc); Quản lý trang cá nhân/tài khoản/hình ảnh/bạn bè; Quản lý trang (Fanpage); Tìm kiếm người dùng; Kết bạn; Nhắn tin. • Phía quản trị viên: Quản lý tài khoản người dùng; Quản lý bài viết; Quản lý tương tác; Quản lý trang (Fanpage). ĐỐI TƯỢNG NGHIÊN CỨU Đề tài nghiên cứu và phân tích ưu điểm, hạn chế về giao diện và chức năng của các trang mạng xã hội ở trong nước và quốc tế.

Đồng thời nghiên cứu nhu cầu thực thế của mỗi người trong việc sử dụng mạng xã hội để liên lạc và trao đổi thông tin, để từ đó rút ra mục tiêu chính của đề tài. Ngoài ra, nhóm thực hiện cũng nghiên cứu các công nghệ để có thể áp dụng vào việc xây dựng hệ thống, bao gồm: - Nghiên cứu framework Spring boot, Restful API để xây dựng các APIs hỗ trợ cho việc truy xuất và thao tác với dữ liệu một cách chính xác và nhanh chóng. - Nghiên cứu và tìm hiểu cơ sở dữ liệu MongoDB để lưu trữ dữ liệu. - Nghiên cứu các thư viện Javascript để xây dựng giao diện người dùng cụ thể là: ReactJs, framework hỗ trợ - Redux và cùng với một số thư viện khác.

16 - Tìm hiểu và nghiên cứu công nghệ Json Web Token để bảo mật cho hệ thống và kiểm soát tất cả các luồng dữ liệu ra vào. CÔNG NGHỆ SỬ DỤNG Để thực hiện đề tài, nhóm tìm hiểu và sử dụng các công nghệ sau: - Về phía Back-end: sử dụng framework Spring boot, Restful API để xây dựng các APIs hỗ trợ cho việc truy xuất và thao tác với dữ liệu. Và sử dụng công nghệ Json Web Token để bảo mật cho hệ thống. - Về phía Front-end: sử dụng framework ReactJs để xây dựng và thiết kế giao diện người dùng cùng với framework hỗ trợ Redux.

- Về cơ sở dữ liệu: sử dụng cơ sở dữ liệu MongoDB để lưu trữ dữ liệu người dùng 1. PHẠM VI NGHIÊN CỨU Ở trong đề tài này, nhóm thực hiện tập trung xây dựng một mạng xã hội trực tuyến cho phép người dùng sử dụng như một trang mạng xã hội thông thường như: đăng bài viết chia sẻ khoảnh khắc/trạng thái, giao lưu, trao đổi thông tin, kết bạn và liên lạc với nhau thông qua Internet. Xây dựng các chức năng hỗ trợ người dùng tìm kiếm các người dùng khác, tương tác và bình luận các bài viết của người dùng khác. Ngoài ra còn cung cấp cho người dùng chức năng tạo trang (Fanpage) để kinh doanh, giải trí, quảng bá thương hiệu,…nhằm mục đích liên kết, tập hợp các người dùng khác có cùng sở thích.

Bên cạnh đó, tạo ra một trang web dành cho người quản trị có thể kiểm soát tài khoản người dùng, bài viết, bình luận, trang (Fanpage). Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN Sau khi hoàn thiện đề tài, nhóm thực hiện đề tài sẽ rèn luyện, tiếp thu được nhiều kỹ năng và kiến thức bổ ích, đặc biệt là về những công nghệ mới đang được sử dụng hiện nay. Nâng cao tinh thần nghiên cứu và sáng tạo, cống hiến vì cộng đồng. Qua đó nhóm cũng có kinh nghiệm trong những dự án tiếp theo.

Khi sản 17 phẩm của nhóm được áp dụng vào thực tế việc sử dụng một trang mạng xã hội để kết nối và liên lạc giữa con người với con người sẽ ngày càng phát triển hơn nữa. Đem lại sự tiện lợi, hiệu quả và an toàn của mục đích trao đổi thông tin trực tuyến. SPRING BOOT Hình 2. Định nghĩa Spring Boot là một framework mã nguồn mở dựa trên Java được phát triển và giới thiệu bởi Pivotal Team.

Spring Boot giúp các Java Developer có một nền tảng để bắt đầu xây dựng một ứng dụng Spring với cấu hình tự động 2. Tính năng Autoconfiguration: Developer có thể tự động cấu hình Spring Application. Tuy nhiên Developers có thể cấu hình lại ứng dụng web của họ dựa trên các phụ thuộc của từng dự án. 19 Standalone: Không cần phải triển khai ứng dụng của người đến máy chủ web.

Người dùng chỉ cần nhập lệnh chạy để bắt đầu ứng dụng. Opinionated: Spring Boot quyết định cho người dùng mặc định sử dụng cho cấu hình. Ngoài ra, người dùng sẽ tự quyết định các gói nào sẽ cài đặt cho các phụ thuộc mà người dùng yêu cầu. Định nghĩa ReactJS là một framework mã nguồn mở và Javascript và là một thư viện được phát triển bởi Facebook.

ReactJs được dùng để xây dựng giao diện tương tác người dùng và ứng dụng web một cách nhanh hơn và hiệu quả hơn nhằm làm tăng trải nghiệm người dùng. Đặc trưng của Reactjs JSX – Javascript Syntax Extension: JSX là sự kết hợp giữa HTML và Javascript. Developers có thể nhúng đoạn code Javacript vào trong HTML elements. JSX làm cho đoạn code dễ hiểu hơn.

Virtual DOM: DOM là viết tắt của Document Object Model. Là một phần quan trọng nhất của website vì nó chia nhỏ các modules và thực thi các đoạn code đó. Thông thường Javascripts Framework thực thi toàn bộ các modules 1 lần làm cho trang web chạy chậm nhưng trong react thì sử dụng Virtual DOM là một bản sao của real DOM. Khi có sự thay đổi nào trong ứng dụng web, toàn bộ Virtual DOM sẽ được cập nhất trước và sẽ so sánh với các real DOM.

Khi tìm được sự khác biệt thì DOM chỉ cập nhật phần đã thay đổi trong real DOM. One way Data Binding: Dữ liệu trong React chỉ chạy theo 1 hướng từ trên xuống. các thuộc tính trong thành phần con không thể trả dữ liệu về thành phần cha của nó nhưng có thể liên lạc với các thành phần cha để tiến hành sửa đổi theo dữ liệu đầu vào. Đây là quá trình ràng buộc dữ liệu 1 chiều.

Component: React cho phép chia trang web thành nhiều components khác nhau. Mỗi Component là một phần của UI Design có logic. Các thành phần có logic được viết bằng code Javascript giúp nó dễ hiểu, thực thi nhanh hơn và có thể tái sử dụng. 3: Kiến trúc MongoDB 2.

Định nghĩa MongoDB là một hệ thống quản lý cơ sở dữ liệu (Database Management System - DBMS) phi tuyến tính (NoSQL) mã nguồn mở. Nó được thiết kế để lưu trữ và quản lý dữ liệu trong các tài liệu JSON, và được phát triển bởi MongoDB, Inc. MongoDB là một cơ sở dữ liệu phân tán và có tính năng mạnh mẽ về tích hợp và mở rộng. Tính năng Một số tính năng quan trọng của MongoDB: 1.

Tài liệu dựa vào dữ liệu: MongoDB lưu trữ dữ liệu dưới dạng tài liệu JSON (BSON - Binary JSON), cho phép lưu trữ dữ liệu có cấu trúc hoặc không cấu trúc mà không yêu cầu sự tuân theo một mô hình cố định. Hỗ trợ đa dạng các loại dữ liệu: MongoDB hỗ trợ các loại dữ liệu đa dạng, bao gồm văn bản, số, ngày tháng, mảng, tài liệu lồng nhau, và nhiều kiểu dữ liệu khác. Tích hợp tốt với ngôn ngữ lập trình: MongoDB cung cấp các driver và thư viện cho nhiều ngôn ngữ lập trình phổ biến, như Python, Java, Node.js, và nhiều ngôn ngữ khác, giúp dễ dàng tích hợp vào ứng dụng. Tính nhất quán và phân tán: MongoDB hỗ trợ khả năng phân tán và sao chép dữ liệu để đảm bảo tính nhất quán và khả năng chịu lỗi.

Truy vấn mạnh mẽ: MongoDB cung cấp ngôn ngữ truy vấn mạnh mẽ để trích xuất và xử lý dữ liệu theo cách hiệu quả. Tự động sharding: MongoDB hỗ trợ tự động chia dữ liệu thành các mảng dữ liệu nhỏ hơn, gọi là shard, để cải thiện hiệu suất và khả năng mở rộng. Hệ thống tìm kiếm toàn văn (text search): MongoDB cung cấp tích hợp hệ thống tìm kiếm toàn văn cho phép tìm kiếm dựa trên nội dung của các tài liệu. Khả năng sao chép dự phòng và khôi phục dữ liệu: MongoDB cho phép tạo bản sao dự phòng của dữ liệu và khôi phục dữ liệu một cách dễ dàng.

JSON WEB TOKEN Hình 2. 4: Cấu trúc Json Web Token 23 2. Định nghĩa JSON Web Token (JWT) là một tiêu chuẩn mở (RFC 7519) định nghĩa một cách nhỏ gọn và khép kín để truyền một cách an toàn thông tin giữa các bên dưới dạng đối tượng JSON. JWTs được ký hiệu dưới dạng bí mật (với thuật toán HMAC) hoặc khóa công khai/ riêng tư bằng RSA hoặc ECDSA.

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

Tài liệu "Xây Dựng Website Mạng Xã Hội Sử Dụng ReactJS và Spring Boot" cung cấp một cái nhìn tổng quan về quy trình phát triển một nền tảng mạng xã hội hiện đại, sử dụng hai công nghệ phổ biến là ReactJS cho phần giao diện người dùng và Spring Boot cho phần backend. Tài liệu này không chỉ hướng dẫn chi tiết từng bước trong việc xây dựng website mà còn nhấn mạnh những lợi ích của việc sử dụng các công nghệ này, như khả năng mở rộng, hiệu suất cao và trải nghiệm người dùng mượt mà.

Để mở rộng kiến thức của bạn về các ứng dụng khác của ReactJS và Spring Boot, bạn có thể tham khảo tài liệu "Xây dựng website bán hàng trực tuyến với reactjs", nơi bạn sẽ tìm thấy cách áp dụng ReactJS trong thương mại điện tử. Ngoài ra, tài liệu "Nghiên cứu struts framework trong java và ứng dụng xây dựng website mạng xã hội âm nhạc" sẽ giúp bạn hiểu thêm về các công nghệ khác trong lĩnh vực mạng xã hội. Cuối cùng, tài liệu "Đồ án tốt nghiệp đề tài xây dựng website bán giày trực tuyến bằng vuejs và spring boot" sẽ cung cấp cho bạn cái nhìn về việc kết hợp Spring Boot với một framework khác, VueJS, trong phát triển web.

Những tài liệu này sẽ giúp bạn mở rộng kiến thức và khám phá thêm nhiều khía cạnh khác nhau trong lĩnh vực phát triển website.