Báo cáo Đồ án: Xây dựng ứng dụng Mạng xã hội trên nền tảng Web

Tải đồ án xây dựng ứng dụng mạng xã hội web bằng Spring Boot và Angular. Báo cáo đầy đủ, chi tiết các chức năng, CSDL và giao diện.

• Tác giả: Nguyễn Công Minh
• Trường học: Khoa học máy tính K61
• Chuyên ngành: Mạng xã hội
• Đề tài: Xây dựng một ứng mạng xã hội trên nền tảng web
• Loại tài liệu: Đồ án

Mục lục chi tiết

• DANH MỤC HÌNH ẢNH
• DANH MỤC BẢNG BIỂU
• MỞ ĐẦU
• 1. CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI
• 1.1. Tính cấp thiết của đề tài
• 1.2. Mục tiêu của đề tài
• 1.3. Phạm vi của đề tài
• 1.4. Nội dung nghiên cứu
• 2. CHƯƠNG 2: CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ
• 2.1. Tổng quan về ứng dụng web
• 2.1.1. Ứng dụng web là gì?
• 2.1.2. Các loại ứng dụng web
• 2.1.3. Một số ứng dụng của ứng dụng web
• 2.1.4. Ưu điểm của ứng dụng web
• 2.1.5. Nhược điểm của ứng dụng web
• 2.1.6. Sự khác nhau giữa ứng dụng web và website
• 2.2. Các module của Spring
• 2.3. Thành phần cốt lõi của Spring
• 2.4. Lý do chọn Spring trong đồ án
• 2.5. Những tính cơ bản của Angular
• 2.6. Lý do chọn Angular trong đồ án
• 2.7. Tại sao nên sử dụng MySQL
• 2.8. Nhược điểm của MySQL
• 2.9. Lý do chọn MySQL trong đồ án
• 3. CHƯƠNG 3: PHÂN TÍCH VÀ ĐẶC TẢ YÊU CẦU
• 3.1. Mô tả bài toán và đặc tả yêu cầu
• 3.1.1. Mô tả bài toán
• 3.1.2. Đối tượng sử dụng
• 3.1.3. Các yêu cầu cần đạt được
• 3.1.4. Xác định các ca sử dụng của hệ thống
• 3.2. Đặc tả ca sử dụng
• 3.2.1. Ca sử dụng đăng nhập
• 3.2.2. Ca sử dụng kết bạn
• 3.2.3. Ca sử dụng yêu cầu gia nhập nhóm
• 3.2.4. Ca sử dụng đăng bài
• 3.2.5. Ca sử dụng xoá bài viết
• 3.2.6. Ca sử dụng thay ảnh đại diện/ảnh bìa
• 3.2.7. Ca sử dụng bình luận
• 3.2.8. Ca sử dụng nhắn tin
• 3.2.9. Ca sử dụng tìm kiếm
• 3.3. Xây dựng biểu đồ ca sử dụng
• 3.3.1. Biểu đồ ca sử dụng mức tổng quát
• 3.3.2. Biểu đồ ca sử dụng cho gói người dùng
• 3.3.3. Biểu đồ ca sử dụng gói quản trị nhóm
• 3.3.4. Biểu đồ ca sử dụng gói Quản lý trang cá nhân
• 3.3.5. Biểu đồ ca sử dụng gói quản trị bình luận
• 3.3.6. Biểu đồ ca sử dụng thích
• 3.3.7. Biểu đồ ca sử dụng kết bạn
• 3.3.8. Biểu đồ ca sử dụng đăng nhập
• 3.3.9. Biểu đồ ca sử dụng yêu cầu tham gia nhóm
• 3.4. Biểu đồ tuần tự cho các ca sử dụng
• 3.4.1. Biểu đồ tuần tự UC Đăng nhập
• 3.4.2. Biểu đồ tuần tự UC Kết bạn
• 3.4.3. Biểu đồ tuần tự UC Yêu cầu gia nhập nhóm
• 3.4.4. Biểu đồ tuần tự UC Đăng bài
• 3.4.5. Biểu đồ tuần tự UC Xoá bài viết
• 3.4.6. Biểu đồ tuần tự UC Bình luận
• 3.4.7. Biểu đồ tuần tự UC Thay ảnh đại diện
• 3.4.8. Biểu đồ tuần tự UC Nhắn tin
• 3.4.9. Biểu đồ tuần tự UC Tìm kiếm
• 4. CHƯƠNG 4: THIẾT KẾ HỆ THỐNG
• 4.1. Biểu đồ thành phần
• 4.2. Biểu đồ triển khai
• 4.3. Thiết kế cơ sở dữ liệu
• 4.3.1. Thực thể USER
• 4.3.2. Bảng thực thể PAGE
• 4.3.3. Bảng thực thể USER_PROFILE
• 4.3.4. Bảng thực thể GROUP
• 4.3.5. Bảng thực thể MESSAGE
• 4.3.6. Bảng thực thể BLOCK
• 4.3.7. Bảng thực thể CONTENT
• 4.3.8. Bảng thực thể COMMENT
• 4.3.9. Bảng thực thể POST
• 4.3.10. Bảng thực thể PHOTO
• 4.3.11. Bảng thực thể FOLLOWAGE
• 4.3.12. Bảng thực thể FRIENDSHIP
• 4.3.13. Bảng thực thể FRIEND_REQUEST
• 4.3.14. Bảng thực thể GROUP_JOIN_REQUEST
• 4.3.15. Bảng thực thể GROUP_MEMBER
• 4.3.16. Bảng thực thể REACTION
• 4.3.17. Bảng thực thể REFRESH_TOKEN
• 4.3.18. Mô hình CSDL quan hệ
• 5. CHƯƠNG 5: KẾT QUẢ THỰC NGHIỆM
• 5.1. Cài đặt môi trường hệ thống
• 5.1.1. Cài đặt MySQL
• 5.1.2. Cài đặt Gradle và khởi chạy back-end
• 5.1.3. Cài đặt Angular và khởi chạy phần front-end của ứng dụng
• 5.2. Một số giao diện của ứng dụng
• 5.2.1. Giao diện đăng nhập
• 5.2.2. Giao diện đăng ký
• 5.2.3. Giao diện trang cá nhân
• 5.2.4. Giao diện bài viết
• 5.2.5. Giao diện đăng bài viết
• 5.2.6. Giao diện trang kết bạn
• 5.2.7. Giao diện trang nhóm
• 5.2.8. Giao diện nhóm
• 5.2.9. Giao diện hồ sơ nhóm của quản trị viên
• 5.2.10. Giao diện tin nhắn
• TÀI LIỆU THAM KHẢO

Tóm tắt

I. Hướng Dẫn Toàn Diện Đồ Án Mạng Xã Hội Spring Angular

Trong bối cảnh cuộc cách mạng công nghệ 4.0, Internet và các ứng dụng web đã trở thành một phần không thể thiếu trong đời sống xã hội. Nổi bật trong số đó là các mạng xã hội, những nền tảng kết nối hàng tỷ người, cho phép chia sẻ thông tin, hình ảnh và tương tác một cách nhanh chóng. Việc thực hiện một đồ án Mạng xã hội Web Full (Spring & Angular) không chỉ là một bài toán kỹ thuật mà còn là cơ hội để nắm bắt và làm chủ những công nghệ phổ biến nhất hiện nay. Đề tài này giải quyết nhu cầu tìm hiểu sâu về cách thức hoạt động và quy trình xây dựng một hệ thống mạng xã hội hoàn chỉnh, từ backend đến frontend. Mục tiêu chính là áp dụng các kiến thức đã học vào thực tế, nghiên cứu sâu hơn về Spring Framework cho backend, Angular cho frontend, và MySQL cho việc quản lý cơ sở dữ liệu. Dự án này tập trung vào việc xây dựng các tính năng cốt lõi của một mạng xã hội, tạo ra một sản phẩm có tính ứng dụng cao và là nền tảng vững chắc cho các phát triển trong tương lai. Sự kết hợp giữa Spring và Angular được xem là một lựa chọn tối ưu, mang lại hiệu năng cao, khả năng bảo trì tốt và một hệ sinh thái công cụ mạnh mẽ.

1.1. Phân Tích Tính Cấp Thiết của Đề Tài Mạng Xã Hội Hiện Nay

Sự phát triển của Internet đã tạo ra một kỷ nguyên mới trong giao tiếp và trao đổi thông tin. Các mạng xã hội, với vai trò là một trong những ứng dụng thành công nhất của World Wide Web, đã thu hút khoảng 3 tỷ người dùng trên toàn cầu. Người dùng dành trung bình hơn hai giờ mỗi ngày trên các nền tảng này để cập nhật và chia sẻ thông tin. Điều này cho thấy tầm quan trọng và sức ảnh hưởng to lớn của mạng xã hội trong đời sống hiện đại. Không chỉ dừng lại ở việc kết nối và giải trí, mạng xã hội còn đang mở rộng sang lĩnh vực thương mại điện tử, nơi các doanh nghiệp có thể dễ dàng quảng bá sản phẩm đến một lượng lớn người dùng. Do đó, việc tìm hiểu và xây dựng một ứng dụng mạng xã hội từ đầu là một nhiệm vụ cấp thiết. Nó giúp hiểu rõ các công nghệ nền tảng và cách thức vận hành của một dịch vụ Internet phức tạp, từ đó mở ra nhiều cơ hội nghề nghiệp trong lĩnh vực phát triển phần mềm.

1.2. Mục Tiêu Phạm Vi Của Đồ Án Mạng Xã Hội Web Full Stack

Mục tiêu cốt lõi của đồ án là xây dựng một trang mạng xã hội với các chức năng cơ bản và nâng cao kiến thức chuyên môn. Các mục tiêu cụ thể bao gồm: tìm hiểu sâu về các công nghệ ứng dụng web như Spring, Angular, và MySQL; áp dụng các kiến thức đã học để xây dựng một sản phẩm hoàn chỉnh. Trong phạm vi nghiên cứu, dự án tập trung vào các tính năng chính: đăng ký, đăng nhập, quản lý trang cá nhân, đăng bài viết, bình luận, bày tỏ cảm xúc, tạo và quản lý nhóm, nhắn tin và thông báo thời gian thực. Do giới hạn về thời gian và nguồn lực, một số chức năng phức tạp như gọi video, tạo trang (page) do nhiều người quản lý, và tối ưu giao diện cho đa thiết bị sẽ không được triển khai. Việc xác định rõ phạm vi giúp đảm bảo dự án có thể hoàn thành đúng tiến độ và đạt được các mục tiêu đề ra.

1.3. Lựa Chọn Công Nghệ Nền Tảng Spring Angular và MySQL

Việc lựa chọn công nghệ là yếu tố quyết định đến sự thành công của đồ án Mạng xã hội Web Full (Spring & Angular). Spring Framework được chọn cho backend vì khả năng xây dựng REST API nhanh chóng, hỗ trợ mạnh mẽ cho việc tương tác với cơ sở dữ liệu thông qua Spring Data JPA, và cung cấp một hệ thống bảo mật toàn diện với Spring Security. Đối với frontend, Angular là lựa chọn lý tưởng để xây dựng ứng dụng một trang (SPA – Single Page Application), mang lại trải nghiệm người dùng mượt mà. Angular hỗ trợ TypeScript, giúp phát triển các dự án lớn một cách an toàn và dễ bảo trì. Về cơ sở dữ liệu, MySQL được sử dụng vì đây là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở, miễn phí, phổ biến và có một cộng đồng hỗ trợ rộng lớn. Sự kết hợp của bộ ba công nghệ này tạo nên một kiến trúc full-stack mạnh mẽ, đáng tin cậy và dễ dàng mở rộng.

II. Thách Thức Khi Xây Dựng Ứng Dụng Mạng Xã Hội Quy Mô Lớn

Xây dựng một ứng dụng mạng xã hội là một bài toán phức tạp, đòi hỏi phải phân tích kỹ lưỡng các yêu cầu chức năng và phi chức năng. Thách thức lớn nhất nằm ở việc thiết kế một hệ thống có khả năng mở rộng, đáp ứng được lượng lớn người dùng tương tác đồng thời. Hệ thống cần quản lý hiệu quả các mối quan hệ phức tạp giữa người dùng, bài viết, bình luận và các nhóm. Một đồ án Mạng xã hội Web Full (Spring & Angular) phải xác định rõ các đối tượng sử dụng, từ người dùng thông thường đến quản trị viên nhóm, mỗi đối tượng có những quyền hạn và nhu cầu khác nhau. Việc đặc tả chi tiết các ca sử dụng (use case) như đăng nhập, kết bạn, đăng bài, hay nhắn tin là bước nền tảng để thiết kế kiến trúc hệ thống một cách chính xác. Ngoài ra, các yêu cầu phi chức năng như giao diện thân thiện, thời gian tải trang nhanh, và tính bảo mật cao cũng là những yếu tố quan trọng quyết định trải nghiệm người dùng và sự thành công của ứng dụng. Việc cân bằng giữa tính năng và hiệu năng luôn là một thách thức đối với các nhà phát triển.

2.1. Phân Tích Yêu Cầu Người Dùng và Chức Năng Cốt Lõi

Việc xác định đúng đối tượng người dùng là bước đầu tiên để xây dựng các chức năng phù hợp. Trong đồ án này, có hai nhóm người dùng chính: người dùng thông thường và quản trị viên nhóm. Người dùng thông thường có các quyền cơ bản như đăng bài, quản lý trang cá nhân, bình luận và tương tác. Quản trị viên nhóm có thêm các quyền quản lý thành viên, duyệt bài đăng và cài đặt nhóm. Các yêu cầu chức năng cốt lõi bao gồm: đăng nhập/đăng xuất, quản lý bài viết (đăng, xóa, sửa), quản lý trang cá nhân, tương tác (thích, bình luận, chia sẻ), và quản lý nhóm. Về yêu cầu phi chức năng, ứng dụng phải có bố cục hợp lý, ngôn ngữ rõ ràng, màu sắc hài hòa và tương thích với nhiều trình duyệt web khác nhau. Tối ưu hóa thời gian tải trang là một ưu tiên hàng đầu để đảm bảo trải nghiệm người dùng tốt nhất.

2.2. Đặc Tả Các Use Case Quan Trọng Đăng Nhập Đăng Bài Kết Bạn

Việc đặc tả các ca sử dụng (use case) giúp mô tả chi tiết luồng tương tác của người dùng với hệ thống. Ví dụ, ca sử dụng Đăng nhập yêu cầu người dùng cung cấp thông tin hợp lệ, hệ thống sẽ kiểm tra và chuyển hướng đến trang chủ nếu thành công. Ca sử dụng Đăng bài cho phép người dùng tạo nội dung văn bản, đính kèm hình ảnh và đăng lên trang cá nhân hoặc nhóm. Ca sử dụng Kết bạn mô tả quy trình gửi lời mời, nhận thông báo và chấp nhận hoặc từ chối lời mời. Mỗi ca sử dụng đều được phân tích kỹ lưỡng với các luồng sự kiện chính, luồng rẽ nhánh, tiền điều kiện và hậu điều kiện. Việc xây dựng các biểu đồ ca sử dụng và biểu đồ tuần tự cho từng chức năng giúp trực quan hóa kiến trúc và luồng dữ liệu, làm cơ sở vững chắc cho giai đoạn thiết kế và triển khai hệ thống.

III. Giải Pháp Backend Xây Dựng REST API Với Spring Framework

Để xây dựng phần backend cho đồ án Mạng xã hội Web Full (Spring & Angular), Spring Framework được lựa chọn làm giải pháp chính. Spring là một framework mạnh mẽ cho các ứng dụng Java, đặc biệt là Java Enterprise. Kiến trúc của Spring dựa trên các module, cho phép các nhà phát triển chỉ sử dụng những phần cần thiết, giúp ứng dụng trở nên nhẹ và hiệu quả. Thành phần cốt lõi là Spring Core Container, nơi quản lý vòng đời của các đối tượng (Spring Beans) thông qua nguyên tắc Inversion of Control (IoC) và Dependency Injection (DI). Nguyên tắc này giúp giảm sự phụ thuộc giữa các thành phần, làm cho mã nguồn dễ kiểm thử và bảo trì hơn. Spring MVC được sử dụng để xây dựng các REST API, tạo ra các endpoint để phía frontend (Angular) có thể giao tiếp và trao đổi dữ liệu. Spring Data JPA đơn giản hóa việc truy cập dữ liệu bằng cách cung cấp một lớp trừu tượng trên nền tảng JPA, giúp tương tác với cơ sở dữ liệu MySQL một cách thuận tiện. Cuối cùng, Spring Security đảm bảo an toàn cho hệ thống bằng cách xử lý xác thực và phân quyền người dùng, bảo vệ các API khỏi truy cập trái phép.

3.1. Kiến Trúc Spring MVC và Nguyên Tắc Dependency Injection

Spring MVC (Model-View-Controller) là một module quan trọng giúp xây dựng các ứng dụng web linh hoạt. Trong kiến trúc REST API, nó đóng vai trò xử lý các HTTP request, điều hướng đến các controller phù hợp để xử lý logic nghiệp vụ và trả về dữ liệu dưới dạng JSON. Nền tảng của Spring là nguyên tắc Dependency Injection (DI). Thay vì một đối tượng tự tạo ra các phụ thuộc của nó, các phụ thuộc này sẽ được "tiêm" vào bởi một container bên ngoài (Spring IoC Container). Điều này giúp các thành phần trở nên độc lập hơn, dễ dàng thay thế và kiểm thử. Ví dụ, một UserService có thể được tiêm một UserRepository để thực hiện các thao tác với cơ sở dữ liệu mà không cần biết chi tiết về cách UserRepository được triển khai.

3.2. Quản Lý Dữ Liệu Hiệu Quả với Spring Data JPA và MySQL

Tương tác với cơ sở dữ liệu là một phần không thể thiếu của bất kỳ ứng dụng web nào. Spring Data JPA là một công cụ mạnh mẽ giúp đơn giản hóa lớp truy cập dữ liệu. Nó cho phép các nhà phát triển định nghĩa các repository interface, và Spring sẽ tự động tạo ra các phương thức truy vấn cơ bản (CRUD - Create, Read, Update, Delete) dựa trên tên phương thức. Điều này giúp giảm đáng kể lượng mã boilerplate cần viết. Khi kết hợp với MySQL, một hệ quản trị cơ sở dữ liệu quan hệ ổn định và phổ biến, Spring Data JPA cung cấp một giải pháp toàn diện để lưu trữ và truy xuất dữ liệu người dùng, bài viết, và các mối quan hệ trong mạng xã hội một cách hiệu quả và an toàn.

IV. Phương Pháp Frontend CSDL Giao Diện Angular và MySQL

Phía frontend của đồ án Mạng xã hội Web Full (Spring & Angular) được xây dựng bằng Angular, một framework phát triển bởi Google. Angular lý tưởng cho việc xây dựng các ứng dụng trang đơn (Single Page Application - SPA), nơi toàn bộ ứng dụng được tải một lần và các trang được thay đổi động mà không cần tải lại toàn bộ. Điều này mang lại trải nghiệm người dùng nhanh và mượt mà, rất phù hợp với một mạng xã hội. Angular sử dụng kiến trúc dựa trên component, cho phép chia nhỏ giao diện người dùng thành các phần độc lập và có thể tái sử dụng. Cơ chế Data Binding hai chiều tự động đồng bộ hóa dữ liệu giữa Model (logic nghiệp vụ) và View (giao diện), giúp mã nguồn trở nên gọn gàng hơn. Giao diện Angular sẽ giao tiếp với backend Spring thông qua các RESTful API để lấy và gửi dữ liệu. Song song đó, việc thiết kế cơ sở dữ liệu MySQL một cách khoa học là nền tảng cho toàn bộ hệ thống. Các bảng thực thể như USER, POST, COMMENT, FRIENDSHIP được định nghĩa rõ ràng với các mối quan hệ hợp lý để đảm bảo tính toàn vẹn và hiệu quả truy vấn dữ liệu.

4.1. Xây Dựng Giao Diện SPA Single Page Application với Angular

Angular cho phép xây dựng các ứng dụng SPA hiệu suất cao. Thay vì yêu cầu máy chủ render toàn bộ trang HTML cho mỗi lần điều hướng, Angular sẽ chỉ yêu cầu dữ liệu cần thiết từ REST API và tự cập nhật giao diện trên trình duyệt của người dùng. Framework này sử dụng TypeScript, một phiên bản mở rộng của JavaScript, cung cấp tính năng kiểm tra kiểu tĩnh giúp phát hiện lỗi sớm và làm cho các dự án lớn dễ quản lý hơn. Các tính năng như routing, quản lý form và dependency injection được tích hợp sẵn, giúp các nhà phát triển xây dựng các ứng dụng phức tạp một cách có cấu trúc và hiệu quả. Nhờ vậy, giao diện người dùng của mạng xã hội trở nên linh hoạt và có khả năng tương tác cao.

4.2. Thiết Kế Cơ Sở Dữ Liệu Quan Hệ MySQL Cho Mạng Xã Hội

Thiết kế cơ sở dữ liệu là xương sống của hệ thống. Trong đồ án này, mô hình cơ sở dữ liệu quan hệ được sử dụng với MySQL. Các bảng chính bao gồm USER (lưu thông tin người dùng), USER_PROFILE (thông tin chi tiết), POST (bài viết), COMMENT (bình luận), FRIENDSHIP (quan hệ bạn bè), và GROUP_MEMBER (thành viên nhóm). Mỗi bảng được thiết kế với các thuộc tính và ràng buộc rõ ràng. Ví dụ, bảng USER có các trường như username, password, email và một khóa chính id. Các mối quan hệ (một-nhiều, nhiều-nhiều) được thiết lập thông qua các khóa ngoại. Một thiết kế CSDL tốt giúp đảm bảo tính nhất quán của dữ liệu, tối ưu hóa tốc độ truy vấn và dễ dàng mở rộng khi hệ thống phát triển.

4.3. Tương Tác Giữa Angular và Spring qua RESTful API

Sự kết nối giữa frontend và backend được thực hiện thông qua RESTful API. Backend Spring cung cấp các endpoint HTTP (ví dụ: /api/posts, /api/users/{id}). Frontend Angular sử dụng các dịch vụ (services) để gửi các yêu cầu HTTP (GET, POST, PUT, DELETE) đến những endpoint này. Ví dụ, để hiển thị danh sách bài viết, Angular sẽ gửi một yêu cầu GET đến /api/posts. Backend nhận yêu cầu, truy vấn cơ sở dữ liệu MySQL và trả về một danh sách bài viết dưới dạng JSON. Angular sau đó sẽ nhận dữ liệu JSON này và hiển thị lên giao diện người dùng. Kiến trúc này giúp tách biệt rõ ràng giữa logic giao diện và logic nghiệp vụ, làm cho hệ thống dễ phát triển và bảo trì.

V. Kết Quả Triển Khai Đồ Án Mạng Xã Hội Spring Angular

Quá trình triển khai đồ án Mạng xã hội Web Full (Spring & Angular) đã mang lại một sản phẩm hoàn chỉnh với các chức năng cốt lõi hoạt động ổn định. Hệ thống được xây dựng thành công trên môi trường cục bộ, bao gồm việc cài đặt và cấu hình MySQL cho cơ sở dữ liệu, khởi chạy backend bằng Gradle và Spring Boot, và triển khai frontend với Angular CLI. Kết quả thực nghiệm cho thấy ứng dụng đáp ứng tốt các yêu cầu đã đề ra trong giai đoạn phân tích. Các giao diện người dùng được thiết kế trực quan và thân thiện, từ trang đăng nhập, đăng ký cho đến trang cá nhân, dòng thời gian, và các trang quản lý nhóm. Người dùng có thể thực hiện các thao tác cơ bản như đăng bài viết kèm hình ảnh, bình luận, tương tác với bài viết của người khác, gửi lời mời kết bạn và tham gia vào các nhóm. Chức năng nhắn tin cũng được triển khai, cho phép người dùng giao tiếp riêng tư. Sản phẩm cuối cùng là một minh chứng rõ ràng cho việc áp dụng thành công kiến thức lý thuyết vào một dự án thực tế, thể hiện khả năng làm chủ công nghệ của bộ đôi Spring và Angular.

5.1. Hướng Dẫn Cài Đặt Môi Trường và Triển Khai Ứng Dụng

Để triển khai ứng dụng, cần thiết lập một môi trường phát triển hoàn chỉnh. Đầu tiên, cài đặt hệ quản trị cơ sở dữ liệu MySQL và tạo cơ sở dữ liệu cho dự án. Tiếp theo, phần backend được khởi chạy bằng cách sử dụng công cụ build Gradle. Lệnh gradle bootRun sẽ biên dịch mã nguồn Java và khởi động máy chủ web nhúng (Tomcat). Sau khi backend hoạt động, phần frontend được cài đặt bằng Angular CLI. Cần di chuyển đến thư mục mã nguồn frontend và chạy lệnh npm install để tải các gói phụ thuộc, sau đó dùng ng serve để khởi chạy máy chủ phát triển. Khi cả hai phần backend và frontend đều chạy thành công, người dùng có thể truy cập vào ứng dụng thông qua trình duyệt web tại địa chỉ được cung cấp.

5.2. Giao Diện Người Dùng Từ Đăng Nhập Đến Tương Tác Bài Viết

Giao diện người dùng là bộ mặt của ứng dụng. Hệ thống cung cấp đầy đủ các màn hình cần thiết cho một mạng xã hội. Giao diện Đăng nhập và Đăng ký đơn giản, dễ sử dụng. Sau khi đăng nhập, người dùng được chuyển đến trang chủ nơi hiển thị các bài viết từ bạn bè và các nhóm đã tham gia. Trang Cá nhân cho phép người dùng xem và chỉnh sửa thông tin, thay đổi ảnh đại diện và ảnh bìa. Giao diện Bài viết được thiết kế rõ ràng, hiển thị nội dung, hình ảnh, số lượt thích và bình luận. Người dùng có thể dễ dàng tạo bài viết mới thông qua một hộp thoại trực quan. Các tương tác như thích, bình luận, chia sẻ được thực hiện một cách mượt mà, phản hồi ngay lập tức nhờ kiến trúc SPA của Angular.

5.3. Các Tính Năng Nổi Bật Quản Lý Nhóm và Nhắn Tin

Ngoài các tính năng cá nhân, ứng dụng còn hỗ trợ mạnh mẽ cho việc tương tác cộng đồng thông qua các nhóm. Người dùng có thể tạo nhóm, tìm kiếm và gửi yêu cầu tham gia các nhóm có sẵn. Giao diện Quản lý nhóm cho phép quản trị viên duyệt yêu cầu tham gia, quản lý thành viên, và kiểm duyệt nội dung. Bên trong nhóm, các thành viên có thể thảo luận, chia sẻ file và phương tiện. Một tính năng quan trọng khác là Nhắn tin. Người dùng có thể bắt đầu cuộc trò chuyện với bạn bè. Giao diện cửa sổ nhắn tin quen thuộc, hiển thị lịch sử tin nhắn và cho phép gửi tin nhắn mới. Các thông báo về tin nhắn mới giúp người dùng không bỏ lỡ các cuộc hội thoại quan trọng.

VI. Tổng Kết và Hướng Phát Triển Cho Đồ Án Mạng Xã Hội Web

Đồ án Mạng xã hội Web Full (Spring & Angular) đã hoàn thành các mục tiêu đề ra, xây dựng thành công một ứng dụng web hoàn chỉnh với các chức năng cốt lõi. Dự án không chỉ là một sản phẩm phần mềm mà còn là quá trình học hỏi, tích lũy kinh nghiệm quý báu về phân tích, thiết kế và triển khai một hệ thống phức tạp. Việc sử dụng các công nghệ hiện đại như Spring Framework và Angular đã cung cấp một nền tảng vững chắc, giúp hiểu sâu hơn về kiến trúc microservices, REST API, và ứng dụng trang đơn (SPA). Mặc dù đã đạt được những kết quả đáng kể, dự án vẫn còn một số hạn chế và tiềm năng để phát triển thêm. Các chức năng như gọi video, thông báo đẩy (push notifications) theo thời gian thực nâng cao, và tối ưu hóa cho thiết bị di động là những hướng đi khả thi trong tương lai. Sự thành công của đồ án này khẳng định tầm quan trọng của việc kết hợp lý thuyết và thực hành, đồng thời mở ra nhiều cơ hội để phát triển các ứng dụng web phức tạp hơn trong tương lai.

6.1. Đánh Giá Kết Quả Đạt Được và Những Kiến Thức Tích Lũy

Dự án đã thành công trong việc xây dựng một mạng xã hội chức năng, đáp ứng đầy đủ các yêu cầu đã phân tích. Qua quá trình thực hiện, nhiều kiến thức chuyên môn đã được củng cố và nâng cao, bao gồm: kỹ năng làm việc với Spring Boot để xây dựng backend, sử dụng Spring Data JPA để tương tác với CSDL, và triển khai Angular để tạo giao diện người dùng động. Hơn nữa, kiến thức về phân tích hệ thống qua việc vẽ biểu đồ use case, biểu đồ tuần tự, và thiết kế CSDL đã được áp dụng một cách hiệu quả. Đây là những kỹ năng nền tảng và thiết yếu cho bất kỳ lập trình viên full-stack nào.

6.2. Hạn Chế Của Đề Tài và Những Chức Năng Có Thể Mở Rộng

Do giới hạn về thời gian, dự án vẫn còn một số hạn chế. Các chức năng nâng cao phổ biến trên các mạng xã hội lớn chưa được triển khai, bao gồm gọi điện và gọi video, tạo các trang (page) cho doanh nghiệp, và tối ưu hóa giao diện hoàn toàn cho các thiết bị di động (responsive design). Hệ thống thông báo vẫn có thể được cải thiện để hoạt động hiệu quả hơn ở quy mô lớn. Trong tương lai, dự án có thể được mở rộng bằng cách tích hợp các công nghệ như WebSocket cho các tính năng real-time phức tạp hơn, sử dụng các dịch vụ đám mây để triển khai, hoặc xây dựng một ứng dụng di động riêng biệt sử dụng chung REST API với phiên bản web.

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

Chương I. Tổng quan về đề tài. Chương II. Cơ sở lý thuyết và công nghệ.

Chương này sẽ trình bày về một số công nghệ cho các ứng dụng web. Chương III. Phân tích và đặc tả yêu cầu. Chương này sẽ phân tích và mô tả bài toán qua các ca sử dụng.

Chương IV. Thiết kế hệ thống. Chương này trình bày về cài đặt và triển khai hệ thống. Chương V: Kết quả thực nghiệm.

Nguyễn Công Minh - Lớp Khoa học máy tính K61 2 CHƯƠNG 2. CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ 2. Tổng quan về ứng dụng web 2. Ứng dụng web là gì? Các ứng dụng web (web application) sử dụng kết hợp các server-side scripts (PHP và ASP) để xử lý việc lưu trữ và truy xuất thông tin, và client-side scripts (JavaScript và HTML) để trình bày thông tin cho người dùng.

Điều này cho phép người dùng tương tác với doanh nghiệp bằng biểu mẫu trực tuyến, hệ thống quản lý nội dung, giỏ hàng mua sắm và hơn thế nữa. Ngoài ra, các ứng dụng còn cho phép nhân viên tạo tài liệu, chia sẻ thông tin, cộng tác trên các dự án và làm việc trên các tài liệu chung bất kể vị trí hoặc thiết bị. Một số Web app phổ biến và được hàng triệu người sử dụng hàng ngày trên thế giới như: Netflix, Facebook, Twitter, Instagram, … Hình CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ-1. Một số Web apps phổ biến.

Nguyễn Công Minh - Lớp Khoa học máy tính K61 3 2. Các loại ứng dụng web Bảng CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ-1. Các loại ứng dụng web Responsive Dynamic Serving Separate Mobile Site Khái niệm Là trang web tự động Trang web tự động Đây là hình thức xây thay đổi kích thước và cung cấp 2 phiên bản dựng 2 trang web riêng hình thức hiển thị dựa khác nhau về mặt dựa biệt cho Desktop và theo kích cỡ màn hình theo thiết bị mà người mobile. Các website thiết bị truy cập của dùng truy cập vào.

này sẽ không phụ thuộc người dùng. Điểm khác biệt của nhau về nội dung, URL Dynamic Serving với cũng khác nhau. Responsive là HTML của từng thiết bị nhận được sẽ khác nhau. Tuy nhiên URL của trang web sẽ thay đổi.

Mô tả Thay đổi để phù hợp Thay đổi để phù hợp Thay đổi để phù hợp với kích thước màn với kích thước màn với kích thước màn hình thiết bị truy cập hình thiết bị truy cập hình thiết bị truy cập của người dùng. của người dùng. của người dùng. Thiết bị Thay đổi về CSS, Phục vụ phiên bản 1 Website cho Desktop không thay đổi HTML.

HTML khác nhau tùy và 1 website cho theo thiết bị. URL Không thay đổi. Không thay đổi. Khác nhau cho Desktop và mobile.

Bảo trì Ít tốn kém. Cần nhiều nhân lực về 2 trang web riêng biệt, kỹ thuật. có thể giống hoặc khác cho từng trang tùy theo định hướng phát triển. Nguyễn Công Minh - Lớp Khoa học máy tính K61 4 Nội dung Chỉ một nội dung cho cả Chỉ một nội dung cho cả 2 website riêng biệt, có thể Desktop và mobile.

Desktop và Mobile, có thể giống nhau hoặc riêng cho khác nhau tùy theo định từng trang tùy theo định hướng phát triển. hướng phát triển. Tác động Không ảnh hưởng. Không ảnh hưởng.

Chuẩn bị kỹ thuật để đảm đến SEO bảo không bị trùng lặp nội dung. Tốc độ web Phiên bản mobile có thể Tùy thuộc vào lập trình. Tùy thuộc vào lập trình. Đặc điểm Tiện lợi, phù hợp với các Dynamic Serving khá Mang đến trải nghiệm website tin tức, nội dung phức tạp và tốn kém hơn người tốt nhất trên điện người dùng chỉ cần đọc là trong quá trình xây dựng thoại di động.

Tốn nhiều thời gian lập Chi phí thấp, bảo trì dễ Dễ dàng bảo trì, quản lý trình web app. nội dung, URL và SEO. Chi phí thiết kế ứng dụng Thiết kế web app nhanh Đem lại trải nghiệm tốt web và bảo trì cao hơn. chóng, quản lý nội dung hơn cho các website có dễ dàng, URL và SEO.

nhiều tính năng như ecommerce. Quá trình quản lý nội dung, URL, SEO cũng phức tạp hơn. Một số ứng dụng của ứng dụng web a) Quản lý tuyển dụng  Quản lý các đợt ứng tuyển của công ty.  Lập phiếu và tạo đợt tuyển dụng.

 Đăng thông tin, duyệt yêu cầu tuyển dụng. Nguyễn Công Minh - Lớp Khoa học máy tính K61 5  Nhận hồ sơ đăng ký, quản lý kết quả phỏng vấn của ứng viên.  Đóng hệ thống và duyệt, nhận hồ sơ khi hết hạn.  Chấm điểm test tự động, gửi mail đến những ứng viên đạt yêu cầu và chờ bộ phận tuyển dụng sắp xếp ngày, giờ phỏng vấn.

 Gửi email cám ơn đến ứng viên không đạt và lưu vào danh sách ứng viên đã làm test.  Gửi email hẹn ứng viên thời gian phỏng vấn sơ tuyển.  Tự động báo cáo với bộ phận tuyển dụng những ứng viên không xác nhận email.  Chuyển thông tin ứng viên được tuyển vào danh sách nhân viên  Theo dõi nhu cầu tuyển dụng từ các bộ phận, phòng ban chi tiết theo vị trí công việc đang cần ứng tuyển.

 Khai báo nhanh chóng các thông tin ứng tuyển như: kinh nghiệm làm việc, thông tin sức khỏe hay trình độ học vấn, chứng chỉ và các kỹ năng….  Lưu trữ các thông tin ứng viên chưa được tuyển để sử dụng cho các lần tuyển dụng sau, giúp công ty giảm chi phí về tuyển dụng.  Cung cấp kịp thời và chi tiết các báo cáo thống kê, phân tích tình hình tuyển dụng.  Tự động chuyển đổi toàn bộ thông tin ứng viên sang nhân viên mới với những hồ sơ được trúng tuyển.

b) Quản lý hàng bán lẻ, kho  Quản lý nhóm hàng đang kinh doanh và tìm kiếm các mặt hàng tiện lợi.  Quản lý thông tin các nhà cung cấp hàng hóa, xuất nhập hàng vào kho.  Quản lý, thiết lập bảng giá, xuất hàng bán sỉ, lẻ.  Chức năng tìm kiếm, báo cáo kho hàng, thống kê doanh thu theo nhân viên.

 Báo cáo lãi, lỗ và in báo cáo cụ thể. c) Quản lý trường học  Quản lý tuyển sinh, thi xếp lớp, kết quả học tập.  Quản lý học viên và giáo viên.  Quản lý đào tạo - lớp học.

Nguyễn Công Minh - Lớp Khoa học máy tính K61 6  Quản lý thu chi, tính lương. d) Phần mềm kế toán.  Tìm kiếm, quản lý chứng từ, quản lý tiền tệ, nhập dữ liệu từ file Excel.  Điều chỉnh danh mục tài khoản, đối tượng tương tác và hợp đồng.

 Xuất, trao đổi và sao lưu dữ liệu nhanh chóng. e) Phần mềm tính tiền siêu thị  Quản lý các đơn hàng - giao dịch và phân quyền nhóm, nhân viên  Quản lý công nợ, thông báo chính xác cụ thể số lượng hàng hóa tồn kho và số lượng đã bán  Lưu lại lịch sử chỉnh sửa kết hợp với máy in, các thiết bị đọc mã vạch,…  Tự động lưu trữ, sao lưu dữ liệu, thống kê báo cáo đảm bảo an toàn hệ thống. Ưu điểm của ứng dụng web  So với ứng dụng trên máy tính và các ứng dụng trên di động, ứng dụng web thường sẽ dễ dàng bảo trì hơn do đó kéo theo chi phí phát sinh cũng thấp hơn.  Ứng dụng web có thể dùng được trên tất cả các nền tảng: Máy tính (Linux, Mac, Windows, …), di động (Android, iOs, …) chỉ cần chúng hỗ trợ trình duyệt web.

 Không qua sự kiểm duyệt cũng như kiểm soát của các chợ ứng dụng lớn như Appstore, Play store, …  Không cần cài đặt để có thể sử dụng.  Dễ dàng cập nhật và không cần nhắc người dùng cập nhật. Nhược điểm của ứng dụng web  Bảo mật không phải là một thế mạnh của các ứng dụng web khi truyền các dữ liệu cá nhân qua Internet.  Ứng dụng web không phụ thuộc vào nền tảng nhưng lại phụ thuộc và trình duyệt web.

Một số trình duyệt khác nhau sẽ có các điểm khác biệt nhất định.  Phụ thuộc vào mạng Internet. Hầu hết các ứng dụng web đều yêu cầu kết nối Internet để hoạt động.  Có thể sẽ tiêu tốn nhiều dữ liệu di động hơn so với các nền tảng khác do ứng dụng web sẽ phải tải tất cả dữ liệu từ Internet về và không thể sử dụng lại (hoặc rất ít) các dữ liệu đã được tải về từ trước.

Nguyễn Công Minh - Lớp Khoa học máy tính K61 7 2. Sự khác nhau giữa ứng dụng web và website Bảng CƠ SỞ LÝ THUYẾT VÀ CÔNG NGHỆ-2. Sự khác nhau giữa ứng dụng web và website Ứng dụng web Website Đối tượng Được thiết kế với mục tiêu là tương Website thường là các trang với tác với người dùng. Thường sẽ lưu nội dung tĩnh.

Nội dung của trang thông tin người dùng và tuỳ biến sẽ không đổi với tất cả người dùng. theo các dữ liệu cá nhân của người dùng. Tương tác Người dùng không chỉ xem các nội Chỉ cung cấp các nội dung hình người dùng dung trong trang mà còn tương tác, ảnh và văn bản để người dùng xem sử dụng, điều khiển chúng. và người dùng sẽ không thể hoặc rất ít có khả năng tương tác với chúng.

Đăng nhập Ứng dụng web cần người dùng Việc đăng nhập là không bắt buộc đăng nhập để có thể tối ưu giao cho các trang thông tin. Người diện và các chức năng dựa theo dùng cũng có thể đăng nhập nhưng từng người dùng. thường sẽ không có tác động nhiều đến nội dung của trang trước và sau đăng nhập. Nhiệm vụ và Ứng dụng web sẽ có các chức năng Thường sẽ chỉ có chức năng là hiển độ phức tạp cao và phức tạp hơn so với website.

thị các nội dung nhất định. Biên dịch Phải được biên dịch trước khi được Không cần biên dịch. Triển khai Tất cả thay đổi sẽ khiến toàn bộ Những sự thay đổi nhỏ không cần (Deployment) project phải được biên dịch và triển phải tải lại toàn bộ mà chỉ cần cập khai lại. nhật phần HTML code.

Nguyễn Công Minh - Lớp Khoa học máy tính K61 8 2. Spring là gì? Spring được xem là một Framework có vai trò phát triển cho các ứng dụng Java. Trong số đó, phổ biến nhất là Java Enterprise và nó được sử dụng bởi hàng triệu lập trình viên khác nhau. Framework này được phát triển đầu tiên bởi Rod Johnson và được ban hành giấy phép Apache 2.

Spring có kích thước nhẹ và trong suốt nên có thể hoạt động một cách trong suốt nhất với lập trình viên.