Báo cáo Đồ án 1: Xây dựng Web App Mạng Xã hội - ĐH Công nghệ Thông tin

Tải trọn bộ báo cáo đồ án xây dựng web app mạng xã hội chi tiết. Tài liệu tham khảo hữu ích cho sinh viên CNTT kèm source code đầy đủ.

• Tác giả: Nguyễn Thị Như Huỳnh
• Người hướng dẫn: TS. Đỗ Thị Thanh Tuyền
• Trường học: Đại học Công nghệ Thông tin - Đại học Quốc gia TP.HCM
• Chuyên ngành: Công nghệ Phần mềm
• Đề tài: Xây dựng Web-App Mạng Xã Hội: Full Code & Báo Cáo Chi Tiết
• Loại tài liệu: Đồ án
• Năm xuất bản: 2024
• Địa điểm: TP. Hồ Chí Minh

Tóm tắt

I. Giới Thiệu Đồ Án Web App Mạng Xã Hội

Đồ án web app mạng xã hội là một dự án học tập toàn diện được thực hiện bởi các sinh viên Khoa Công nghệ Phần mềm, Trường Đại học Công nghệ Thông tin - Đại học Quốc gia TP.HCM. Dự án này nhằm xây dựng một nền tảng mạng xã hội hiệu quả đáp ứng nhu cầu kết nối, giao tiếp và chia sẻ thông tin của người dùng trên nhiều thiết bị khác nhau. Với sự hướng dẫn của TS. Đỗ Thị Thanh Tuyền, nhóm chúng em đã dành nhiều tâm huyết để phát triển các tính năng quan trọng như quản lý hồ sơ cá nhân, kết bạn, trò chuyện, chia sẻ bài viết và quản lý quyền riêng tư. Mục tiêu chính của dự án là tạo ra một ứng dụng mạng xã hội hoàn chỉnh với giao diện thân thiện, dễ sử dụng và hiệu năng tối ưu.

1.1. Lý Do Chọn Đề Tài

Với sự phát triển không ngừng của công nghệ và nhu cầu kết nối trực tuyến ngày càng tăng, xây dựng web app mạng xã hội trở thành một chủ đề hữu ích và thực tiễn. Những năm gần đây, các ứng dụng mạng xã hội đã thay đổi cách con người giao tiếp, chia sẻ thông tin và kết nối với nhau. Dự án này cho phép sinh viên áp dụng các kiến thức về lập trình web, thiết kế cơ sở dữ liệu, giao diện người dùng và quản lý hệ thống vào thực tế. Đây là cơ hội tuyệt vời để hiểu sâu hơn về kiến trúc ứng dụng mạng xã hội và các thách thức trong phát triển nó.

1.2. Nhu Cầu Thị Trường Hiện Tại

Nhu cầu kết nối và giao tiếp trên nền tảng trực tuyến là một xu hướng toàn cầu mạnh mẽ. Các ứng dụng mạng xã hội không chỉ phục vụ mục đích giao tiếp mà còn hỗ trợ các hoạt động kinh doanh, marketing và quảng bá. Công nghệ mạng xã hội hiện đại yêu cầu tính năng real-time, bảo mật cao, khả năng mở rộng và trải nghiệm người dùng tuyệt vời. Xu hướng áp dụng công nghệ responsive design, cloud computing và AI trong phát triển mạng xã hội ngày càng phổ biến, giúp nâng cao chất lượng dịch vụ và sự hài lòng của người dùng.

II. Công Nghệ Và Môi Trường Phát Triển

Đồ án web app mạng xã hội sử dụng các công nghệ hiện đại nhất để đảm bảo hiệu suất cao và trải nghiệm người dùng tốt nhất. Dự án được phát triển trên nền tảng TypeScript, một ngôn ngữ mạnh mẽ cung cấp tính năng type-checking giúp giảm lỗi và tăng độ tin cậy của code. Môi trường phát triển bao gồm các công cụ hỗ trợ hiện đại như Node.js, React, Express.js cho backend, và các thư viện hỗ trợ tích hợp cơ sở dữ liệu. Với công cụ quản lý dự án chuyên nghiệp, nhóm đã đảm bảo quá trình phát triển được tổ chức tốt, từ thiết kế đến kiểm thử và triển khai.

2.1. Ngôn Ngữ TypeScript Và Ưu Điểm

TypeScript là một ngôn ngữ lập trình được xây dựng trên nền tảng JavaScript, cung cấp tính năng type-checking mạnh mẽ. Ưu điểm của TypeScript bao gồm: giảm thiểu lỗi runtime, hỗ trợ lập trình hướng đối tượng, tăng khả năng bảo trì code, và cải thiện trải nghiệm phát triển với IDE support tốt. Sử dụng TypeScript trong dự án giúp đảm bảo chất lượng code cao, dễ dàng thực hiện refactoring và hợp tác nhóm hiệu quả, đặc biệt khi xây dựng các ứng dụng mạng xã hội quy mô lớn.

2.2. Công Cụ Hỗ Trợ Và Framework

Công cụ phát triển cho dự án bao gồm Visual Studio Code, Git để quản lý phiên bản, Postman để kiểm thử API. Framework chính sử dụng Express.js cho backend, React hoặc Vue.js cho frontend, và MongoDB hoặc PostgreSQL cho cơ sở dữ liệu mạng xã hội. Docker được sử dụng để containerize ứng dụng, đảm bảo tính nhất quán giữa các môi trường phát triển, kiểm thử và production. Các công cụ này tạo thành một stack công nghệ hoàn chỉnh hỗ trợ phát triển, kiểm thử, triển khai và bảo trì ứng dụng một cách hiệu quả.

III. Phân Tích Thiết Kế Và Kiến Trúc Hệ Thống

Thiết kế hệ thống mạng xã hội bắt đầu từ việc phân tích chi tiết các yêu cầu nghiệp vụ, hệ thống và chất lượng. Dự án xác định các actor chính bao gồm người dùng thông thường, admin và hệ thống. Danh sách use-case bao gồm hơn 20 chức năng quan trọng như xem bài viết, tạo bài viết, bình luận, thích, chia sẻ, báo cáo, kết bạn, theo dõi, chat và khóa người dùng. Mỗi use-case được mô tả chi tiết với các bước thực hiện, điều kiện tiên quyết và kết quả mong đợi. Sơ đồ Activity được tạo cho các chức năng chính, giúp hình dung quy trình làm việc của từng tính năng một cách rõ ràng.

3.1. Danh Sách Use Case Và Actor

Hệ thống mạng xã hội được thiết kế với nhiều use-case phức tạp để đáp ứng nhu cầu người dùng. Các actor chính bao gồm User (người dùng thông thường), Admin (quản trị viên) và System (hệ thống). Danh sách use-case bao gồm: View Post, Create Post, Edit Post, Delete Post, Comment, Like Post, Share Post, Report Post, Like Comment, Reply Comment, Add Friend, Follow, UnFriend, UnFollow, Block, Create Chat, Delete Message, Update Status và nhiều use-case khác. Mỗi use-case được đặc tả chi tiết với mục đích, điều kiện tiên quyết, các bước chính, luồng ngoại lệ và kết quả cuối cùng.

3.2. Thiết Kế Cơ Sở Dữ Liệu Và Đối Tượng

Mô hình dữ liệu bao gồm 8 đối tượng chính: User, Admin, Post, Comment, Notification, Chat, Message và Report. Lớp User chứa thông tin người dùng, hồ sơ cá nhân, danh sách bạn và cài đặt quyền riêng tư. Lớp Post lưu trữ bài viết, bình luận, lượt thích, chia sẻ và báo cáo. Lớp Chat và Message quản lý các cuộc trò chuyện và tin nhắn giữa người dùng. Cơ sở dữ liệu được thiết kế với các mối quan hệ phù hợp, chỉ mục tối ưu và các ràng buộc toàn vẹn dữ liệu để đảm bảo hiệu suất và bảo mật cao.

IV. Xây Dựng Giao Diện Và Triển Khai Ứng Dụng

Thiết kế giao diện cho web app mạng xã hội được thực hiện với tư duy người dùng trung tâm, đảm bảo trải nghiệm thân thiện, dễ sử dụng trên tất cả các thiết bị. Giao diện website bao gồm các trang chính như đăng nhập, đăng ký, quên mật khẩu, trang chủ, tạo bài viết, xem bài viết, tìm kiếm và kết quả tìm kiếm. Giao diện di động được tối ưu hóa cho các thiết bị nhỏ hơn, đảm bảo hiệp nhân tính và khả năng sử dụng cao. Giao diện quản trị cho admin cho phép quản lý người dùng, bài viết, báo cáo và các cài đặt hệ thống. Toàn bộ mã nguồn đầy đủ được chia sẻ để hỗ trợ việc học tập và phát triển tiếp theo.

4.1. Giao Diện Website Responsive

Giao diện website được thiết kế với responsive design để hoạt động tốt trên các kích thước màn hình khác nhau. Trang đăng nhập cung cấp trường nhập tài khoản, mật khẩu và nút đăng nhập với tùy chọn "Quên mật khẩu". Trang đăng ký cho phép người dùng tạo tài khoản mới với các trường thông tin cần thiết. Trang chủ hiển thị dòng thời gian bài viết, thanh tìm kiếm, danh sách bạn và các thông báo. Trang tạo bài viết cung cấp trình soạn thảo WYSIWYG, hỗ trợ thêm hình ảnh, video và cài đặt quyền riêng tư. Mỗi trang được thiết kế với màu sắc hài hòa, typography rõ ràng và bố cục trực quan.

4.2. Tích Hợp Tính Năng Và Triển Khai

Ứng dụng mạng xã hội hoàn chỉnh tích hợp tất cả các tính năng đã thiết kế thông qua các API RESTful chuyên nghiệp. Backend xử lý xác thực người dùng, cấp phép truy cập, xác thực yêu cầu và quản lý cơ sở dữ liệu. Frontend giao tiếp với backend thông qua các API endpoint, xử lý dữ liệu và cập nhật giao diện theo thời gian thực. Kiểm thử toàn diện được thực hiện với unit tests, integration tests và user acceptance tests. Triển khai ứng dụng sử dụng Docker và CI/CD pipeline, đảm bảo tự động hóa quy trình xây dựng, kiểm thử và triển khai. Tất cả mã nguồn chi tiết được lưu trữ trên Git repository với documentation đầy đủ.

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

CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1. Lý do chọn đề tài Hiện nay, số lượng người dùng internet và smartphone trên thế giới không ngừng tăng, tạo điều kiện thuận lợi cho sự phát triển của các ứng dụng di động và website. ảnh hưởng đến nhiều khía cạnh của chúng ta từ công việc, giáo dục, giao tiếp đến giải trí, v. Và quan trọng là con người ngày càng có nhu cầu kết nối và giao tiếp với nhau thông qua các nền tảng trực tuyến, mọi người có nhu cầu chia sẻ những khoảnh khắc, suy nghĩ và ý tưởng của họ với bạn bè, gia đình và cộng đồng trực tuyến.

Bên cạnh đó, người dùng ngày càng tìm kiếm sự tiện lợi và trải nghiệm kết nối và liên lạc tốt hơn qua điện thoại di động của họ. Mạng xã hội giúp mọi người kết nối với bạn bè, gia đình và những người có cùng sở thích từ khắp nơi trên thế giới, mọi người có thể kết bạn, chia sẻ những khoảnh khắc, suy nghĩ và ý tưởng của họ với cộng đồng trực tuyến, thảo luận về một vấn đề hoặc sự kiện. Nhắn tin và gọi điện trực tiếp cùng bạn bè, gia đình và đồng nghiệp mọi lúc mọi nơi thông qua ứng dụng và website, liên lạc rẻ hơn so với sử dụng điện thoại di động hoặc dịch vụ tin nhắn truyền thống. Mạng xã hội là nguồn cung cấp tin tức và thông tin về các sự kiện hiện tại, cung cấp nhiều nội dung giải trí như video, hình ảnh, trò chơi và âm nhạc.

Doanh nghiệp có thể sử dụng mạng xã hội để quảng bá sản phẩm và dịch vụ, kết nối với khách hàng và tăng doanh số bán hàng, v. Chính vì những lợi ích đáng kể và đáp ứng phần lớn nhu cầu liên lạc và kết nối trong cuộc sống, chúng em quyết định chọn thực hiện đề tài “Xây dựng web - app mạng xã hội”. Ứng dụng cho phép kết nối trực tuyến bằng cách kết bạn; chia sẻ cho bạn bè những khoảnh khắc và suy nghĩ; bình luận và phản hồi; liên lạc với bạn bè, gia đình người thân bằng cách nhắn tin hoặc gọi điện 1. Khảo sát hiện trạng 15 1.

Nhu cầu kết nối và giao tiếp trên nền tảng trực tuyến Trong thời đại số hóa hiện nay, nhu cầu kết nối và giao tiếp giữa con người ngày càng trở nên cấp thiết. Người dùng không chỉ muốn duy trì liên lạc với bạn bè, gia đình mà còn mong muốn mở rộng mối quan hệ với những người có cùng sở thích, quan điểm trên các nền tảng trực tuyến. Bên cạnh đó, việc chia sẻ các khoảnh khắc, cảm xúc, suy nghĩ và ý tưởng cũng trở thành một phần không thể thiếu trong cuộc sống hàng ngày. Sự phát triển của các nền tảng mạng xã hội không chỉ hỗ trợ giao tiếp cá nhân mà còn mang lại những giá trị lớn lao trong công việc, học tập, giải trí, và thậm chí là kinh doanh.

Tuy nhiên, nhiều ứng dụng hiện nay còn gặp hạn chế về khả năng tùy chỉnh, tối ưu trải nghiệm người dùng, và tích hợp các tính năng giao tiếp toàn diện. Xu hướng áp dụng công nghệ trong phát triển mạng xã hội Sự phát triển của các công nghệ hiện đại cho phép xây dựng ứng dụng mạng xã hội với hiệu suất cao, giao diện thân thiện, và khả năng mở rộng linh hoạt: React Native: Hỗ trợ phát triển ứng dụng di động đa nền tảng, đảm bảo giao diện và hiệu năng tốt trên cả Android và iOS. Đây là lựa chọn lý tưởng để phát triển các ứng dụng di động mạng xã hội.js: Là một framework phổ biến cho phát triển ứng dụng web với khả năng kết xuất phía server (SSR) và tích hợp API mạnh mẽ. Điều này giúp tối ưu tốc độ tải trang, hỗ trợ SEO tốt hơn cho các ứng dụng web mạng xã hội.

MongoDB: Với tính năng lưu trữ dữ liệu không cấu trúc và khả năng mở rộng linh hoạt, MongoDB là cơ sở dữ liệu lý tưởng để quản lý thông tin người dùng, bài đăng, tin nhắn và các nội dung tương tác khác trên nền tảng mạng xã hội. Đặc biệt, các công nghệ như AI và Machine Learning đang ngày càng được tích hợp vào 16 ứng dụng mạng xã hội để cung cấp các gợi ý nội dung cá nhân hóa, nhận diện hình ảnh và video, và tối ưu hóa các thuật toán tìm kiếm. Các hệ thống này không chỉ giúp người dùng khám phá nội dung phù hợp mà còn nâng cao khả năng tương tác, chia sẻ và kết nối với bạn bè và cộng đồng. Blockchain giúp tăng cường bảo mật thông tin cá nhân và các giao dịch trực tuyến, tạo điều kiện cho các mô hình mạng xã hội phi tập trung.

Công nghệ sử dụng Dự án sử dụng các công nghệ và ngôn ngữ lập trình hiện đại nhằm tối ưu hiệu năng, tính ổn định và khả năng mở rộng. TypeScript TypeScript là một siêu ngôn ngữ của JavaScript, cung cấp các tính năng như kiểm tra kiểu tĩnh, cho phép phát hiện lỗi trong quá trình phát triển thay vì khi chạy ứng dụng. Việc sử dụng TypeScript trong dự án mang lại những lợi ích sau: ● Kiểm tra kiểu dữ liệu: TypeScript giúp xác định lỗi liên quan đến kiểu dữ liệu ngay từ khi biên dịch, giúp giảm thiểu các lỗi runtime và làm mã dễ hiểu và bảo trì hơn. ● Tăng cường khả năng làm việc nhóm: Với các tính năng như types, interfaces và class, TypeScript giúp các lập trình viên hiểu rõ hơn về cấu trúc và cách thức hoạt động của mã, từ đó cải thiện khả năng giao tiếp và hợp tác giữa các thành viên trong nhóm.

● Dễ dàng mở rộng: TypeScript hỗ trợ viết mã dễ bảo trì và mở rộng hơn, giúp dự án có thể phát triển trong tương lai mà không gặp phải vấn đề liên quan đến sự thay đổi cấu trúc mã phức tạp. ● Công cụ hỗ trợ mạnh mẽ: Nhờ sự hỗ trợ của các công cụ như Visual Studio Code, TypeScript giúp lập trình viên dễ dàng viết mã nhờ các tính năng như tự động hoàn thành mã, kiểm tra lỗi và gợi ý các sửa đổi khi mã bị lỗi. 17 ● Tương thích với JavaScript: TypeScript hoàn toàn tương thích với mã JavaScript hiện có, giúp dễ dàng chuyển đổi từ JavaScript sang TypeScript mà không phải làm lại từ đầu.js là một framework React phổ biến hỗ trợ khả năng kết xuất phía máy chủ (Server- side Rendering - SSR) và tạo trang tĩnh (Static Site Generation - SSG).js, dự án có thể: ● Tăng tốc độ tải trang và cải thiện SEO. ● Tích hợp API mạnh mẽ, phù hợp với các ứng dụng web mạng xã hội.

● Hỗ trợ xây dựng giao diện người dùng hiện đại, tương thích tốt với các trình duyệt. ● Sử dụng TypeScript giúp cải thiện chất lượng mã nguồn, giảm thiểu lỗi và nâng cao tính ổn định, dễ bảo trì 1. React Native React Native là một framework phát triển ứng dụng di động đa nền tảng, sử dụng JavaScript hoặc TypeScript. Các ưu điểm của React Native: ● Tạo ra ứng dụng cho cả Android và iOS từ một codebase duy nhất.

● Hiệu suất gần như ứng dụng gốc (native). ● Thư viện phong phú giúp xây dựng giao diện linh hoạt và nhanh chóng. MongoDB MongoDB là một hệ quản trị cơ sở dữ liệu NoSQL mạnh mẽ, lý tưởng cho các ứng dụng cần lưu trữ dữ liệu không có cấu trúc. Những lợi ích chính: ● Lưu trữ dữ liệu linh hoạt như thông tin người dùng, bài đăng, bình luận, và tin nhắn.

● Khả năng mở rộng dễ dàng để đáp ứng nhu cầu sử dụng lớn. ● Truy xuất dữ liệu nhanh, đáp ứng tốt các yêu cầu phức tạp. Cloudinary Cloudinary là một nền tảng quản lý và tối ưu hóa tài nguyên đa phương tiện (media). Đây là công cụ lý tưởng để xử lý hình ảnh và video trong ứng dụng mạng xã hội.

Các tính năng chính: ● Tải lên, lưu trữ, và quản lý hình ảnh/video một cách dễ dàng. ● Tự động tối ưu hóa tài nguyên để giảm thời gian tải. ● Hỗ trợ tạo các phiên bản ảnh/video với kích thước và hiệu ứng tùy chỉnh. Pusher Pusher là một nền tảng cung cấp các dịch vụ thời gian thực (real-time) giúp ứng dụng mạng xã hội tăng cường khả năng tương tác.

Các lợi ích chính: ● Thực hiện tính năng nhắn tin thời gian thực giữa người dùng. ● Cung cấp thông báo theo thời gian thực (real-time notifications) về bài đăng, bình luận hoặc lượt thích. ● Tích hợp dễ dàng với ứng dụng để xử lý sự kiện theo thời gian thực mà không làm ảnh hưởng đến hiệu suất tổng thể. Môi trường phát triển Môi trường phát triển của dự án web-app mạng xã hội được thiết lập nhằm tận dụng tối đa các công cụ và công nghệ hiện đại, đảm bảo hiệu quả trong quá trình viết mã, kiểm thử, và triển khai.js) ● Code Editor: Sử dụng Visual Studio Code với các tiện ích mở rộng như ESLint, Prettier, và Tailwind CSS IntelliSense để hỗ trợ kiểm tra mã nguồn, định dạng, và tự động hoàn thiện cú pháp.js và npm: Cài đặt Node.js để quản lý các gói cần thiết thông qua npm hoặc yarn.

● Dev Server: Sử dụng máy chủ phát triển tích hợp của Next.js để xem trước ứng dụng trên trình duyệt với khả năng cập nhật theo thời gian thực (hot reload). Di động (React Native) ● Code Editor: Visual Studio Code với các tiện ích mở rộng hỗ trợ React Native như React Native Tools và NativeWind. ● CLI: Sử dụng React Native CLI hoặc Expo CLI để khởi chạy và kiểm thử ứng dụng nhanh chóng. Công cụ hỗ trợ Cơ sở dữ liệu (MongoDB) ● MongoDB Atlas: Dịch vụ cơ sở dữ liệu đám mây của MongoDB để lưu trữ dữ liệu trực tuyến.

● MongoDB Compass: Công cụ quản lý cơ sở dữ liệu với giao diện đồ họa giúp kiểm tra và thao tác dữ liệu dễ dàng trong quá trình phát triển. 20 Quản lý media (Cloudinary) ● Cloudinary Dashboard: Quản lý và cấu hình tài khoản Cloudinary trực tuyến. ● API Testing Tools: Sử dụng Postman hoặc Insomnia để kiểm tra các API upload và xử lý media của Cloudinary. Quản lý thời gian thực (Pusher) ● Pusher Dashboard: cung cấp một giao diện trực tuyến để quản lý và cấu hình tài khoản Pusher: Tạo các kênh (channels) và sự kiện (events) để giao tiếp thời gian thực.

● API Testing Tools: Sử dụng Postman hoặc Insomnia để kiểm tra việc phát (publish) sự kiện đến các kênh cụ thể. Quản lý dự án và cộng tác(GitHub) Dự án sử dụng GitHub để quản lý mã nguồn, lưu trữ phiên bản và hỗ trợ cộng tác nhóm. Nhờ GitHub, việc theo dõi lịch sử, phân nhánh, gộp mã và giải quyết xung đột trở nên dễ dàng, đảm bảo tính minh bạch và khả năng mở rộng của dự án trong tương lai. 21 CHƯƠNG 2: CƠ SỞ LÝ THUYẾT 2.