Báo cáo Đồ án 1: Website mạng xã hội chia sẻ hình ảnh - Sinh viên ĐH CNTT

Báo cáo đồ án Website mạng xã hội chia sẻ hình ảnh. Tài liệu full các chương, phân tích, thiết kế hệ thống, CSDL và source code tham khảo cho sinh viên.

• Tác giả: Lê Nguyễn Đông Xuân
• Người hướng dẫn: Nguyễn Thị Xuân Hương
• Trường học: Trường Đại Học Công Nghệ Thông Tin, Đại Học Quốc Gia Tp. Hồ Chí Minh
• Chuyên ngành: Công Nghệ Phần Mềm
• Đề tài: Website Mạng Xã Hội Chia Sẻ Hình Ảnh
• Loại tài liệu: Đồ Án
• Năm xuất bản: 2024
• Địa điểm: Thành Phố Hồ Chí Minh

Tóm tắt

I. Tổng Quan Về Đồ Án Website Mạng Xã Hội Chia Sẻ Hình Ảnh

Đồ án website mạng xã hội chia sẻ hình ảnh là một dự án học tập toàn diện nhằm xây dựng nền tảng mạng xã hội hiện đại với tính năng chia sẻ và tương tác hình ảnh. Dự án được thực hiện bởi 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ưới sự hướng dẫn của cô Nguyễn Thị Xuân Hương. Mục tiêu chính là phát triển một ứng dụng web đầy đủ tính năng với giao diện người dùng thân thiện, hệ thống bảo mật vững chắc và hiệu suất cao. Dự án khai thác quy trình hoạt động của các hệ thống mạng xã hội phổ biến, áp dụng các công nghệ web hiện đại như React.js, Node.js và MongoDB để tạo ra trải nghiệm người dùng tối ưu nhất.

1.1. Khái Niệm Và Mục Đích Dự Án

Mạng xã hội chia sẻ hình ảnh là một nền tảng kỹ thuật số cho phép người dùng đăng tải, chia sẻ và tương tác với nội dung hình ảnh. Dự án này xuất phát từ sở thích cá nhân và mục đích học tập nhằm tiếp thu kiến thức mới về lập trình web. Nhóm đã phát triển đề tài thành một sản phẩm thực thụ với nhiều tính năng nâng cao như theo dõi người dùng, hệ thống bình luận, và thông báo hoạt động realtime.

1.2. Công Nghệ Sử Dụng

Dự án sử dụng stack công nghệ hiện đại bao gồm React.js cho frontend, Node.js cho backend, và MongoDB cho quản lý dữ liệu. Các công nghệ này giúp tăng cường khả năng mở rộng ứng dụng, tạo điều kiện bảo trì dễ dàng và cập nhật liên tục. Điều này đảm bảo sản phẩm website có thể phát triển và thích ứng với nhu cầu người dùng trong tương lai.

II. Phân Tích Yêu Cầu Và Thiết Kế Hệ Thống

Phân tích yêu cầu là bước quan trọng trong quy trình phát triển đồ án mạng xã hội. Nhóm đã thực hiện khảo sát kỹ lưỡng để xác định các yêu cầu chức năng và yêu cầu phi chức năng của hệ thống. Thiết kế hệ thống bao gồm biểu đồ ngữ cảnh, danh sách các actor, usecase, và biểu đồ lớp phân tích chi tiết. Các yêu cầu giao diện được thiết kế để đảm bảo trải nghiệm người dùng tốt nhất, trong khi các yêu cầu bảo mật được tập trung vào bảo vệ dữ liệu người dùng và tính toàn vẹn thông tin.

2.1. Yêu Cầu Chức Năng Cơ Bản

Hệ thống mạng xã hội phải cung cấp các chức năng chính như quản lý bài đăng (tạo, sửa, xóa), tương tác bài đăng (like, comment, share), xem thông tin người dùng, và tương tác với người dùng khác (follow, unfollow). Ngoài ra, tìm kiếm bài đăng và tìm kiếm người dùng là những tính năng thiết yếu giúp người dùng dễ dàng khám phá nội dung mới và kết nối với cộng đồng.

2.2. Yêu Cầu Dữ Liệu Và Bảo Mật

Dữ liệu người dùng bao gồm thông tin cá nhân, bài đăng, comments, và lịch sử tương tác. Bảo mật thông tin được ưu tiên cao với các biện pháp mã hóa mật khẩu, xác thực người dùng, và kiểm soát quyền truy cập. Yêu cầu an toàn thông tin đảm bảo dữ liệu được bảo vệ khỏi các mối đe dọa bảo mật như tấn công brute force và lỗi SQL injection.

III. Xây Dựng Và Triển Khai Ứng Dụng

Quá trình xây dựng chương trình đòi hỏi sự phối hợp chặt chẽ giữa phát triển frontend và phát triển backend. Nhóm đã tổ chức mã nguồn theo cấu trúc rõ ràng với danh sách components, danh sách routes API, và tổ chức thư mục dự án khoa học. Cài đặt chương trình được thực hiện với hỗ trợ của Github để theo dõi kiểm soát mã nguồn và Vercel để deploy chương trình. Kết quả cuối cùng là một website mạng xã hội hoàn chỉnh với đầy đủ tính năng và giao diện chuyên nghiệp.

3.1. Công Nghệ Và Ngôn Ngữ Lập Trình

Ngôn ngữ lập trình Typescript được chọn để đảm bảo chất lượng mã cao và khả năng bảo trì tốt. Thư viện và công nghệ bao gồm React.js, Node.js Express, MongoDB, và các thư viện hỗ trợ như JWT cho xác thực. Việc sử dụng Typescript giúp phát hiện lỗi sớm và cải thiện hiệu suất phát triển của nhóm.

3.2. Triển Khai Và Kiểm Thử

Kết quả chạy chương trình bao gồm các tính năng như quản lý bài đăng, tương tác bài đăng, xem thông tin người dùng, tìm kiếm, và quản lý thông tin cá nhân. Kiểm thử chức năng được thực hiện toàn diện để đảm bảo tất cả các tính năng hoạt động chính xác. Deploy bằng Vercel giúp ứng dụng trở nên sẵn sàng cho người dùng cuối.

IV. Kết Quả Hạn Chế Và Hướng Phát Triển

Sản phẩm website mạng xã hội đã hoàn thành với đầy đủ tính năng cơ bản của một nền tảng chia sẻ hình ảnh hiện đại. Hệ thống cung cấp trải nghiệm người dùng mượt mà với giao diện trực quan, tốc độ tải nhanh, và các tính năng tương tác mạnh mẽ. Tuy nhiên, dự án vẫn tồn tại một số hạn chế cần cải thiện như khả năng mở rộng backend, tối ưu hóa hiệu suất với dữ liệu lớn, và thêm các tính năng nâng cao như video sharing hoặc AI recommendations. Hướng phát triển trong tương lai bao gồm tích hợp livestream, hệ thống thông báo push, và analytics chi tiết cho người dùng.

4.1. Các Tính Năng Đã Hoàn Thành

Đồ án đã triển khai thành công các tính năng chính bao gồm hệ thống đăng ký đăng nhập an toàn, chia sẻ hình ảnh, bình luận và like, theo dõi người dùng, thông báo hoạt động, và thay đổi giao diện. Các tính năng này tạo ra một cộng đồng trực tuyến sôi động và gắn kết, nơi người dùng có thể dễ dàng tương tác với nhau.

4.2. Hạn Chế Và Hướng Cải Thiện

Hạn chế hiện tại bao gồm khả năng xử lý dữ liệu lớn của backend, tối ưu cache, và thiếu một số tính năng nâng cao. Hướng phát triển tương lai nhóm dự định thêm tính năng video sharing, stories, direct messaging, và recommendation system để nâng cao giá trị của sản phẩm.

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

CHƯƠNG 1: KHẢO SÁT, MÔ TẢ YÊU CẦU BÀI TOÁN 1. Phát biểu bài toán Quản lý thông tin và tương tác giữa người dùng là một thách thức lớn trong việc phát triển các nền tảng mạng xã hội chia sẻ hình ảnh, đặc biệt là trong bối cảnh bùng nổ công nghệ thông tin hiện nay. Dự án xây dựng một website mạng xã hội chia sẻ hình ảnh nhằm tạo ra một môi trường trực tuyến cho phép người dùng không chỉ chia sẻ và bình luận về các hình ảnh mà còn tương tác, kết nối và xây dựng cộng đồng xung quanh sở thích chung. Website sẽ quản lý thông tin cá nhân của người dùng, bao gồm họ tên, ngày tháng năm sinh, giới tính, địa chỉ, và tài khoản email.

Ngoài ra, các thông tin liên quan đến hoạt động trên nền tảng như số lượng hình ảnh đã chia sẻ, số lượng người theo dõi, và các tương tác (như thích, bình luận) cũng sẽ được lưu trữ. Việc này sẽ giúp người dùng dễ dàng quản lý thông tin của mình và kết nối với những người có cùng sở thích. Dự án sẽ được thiết kế để người dùng có thể dễ dàng tải lên và chia sẻ hình ảnh, cũng như bình luận và tương tác với các bài viết của người khác. Bên cạnh đó, hệ thống cũng sẽ cho phép người dùng theo dõi những người khác để cập nhật các hoạt động mới nhất từ bạn bè và những người có ảnh hưởng trong cộng đồng.

Mục tiêu cuối cùng là tạo ra một nền tảng mạng xã hội chia sẻ hình ảnh hấp dẫn, an toàn và thân thiện với người dùng, góp phần nâng cao trải nghiệm trực tuyến và tạo ra một cộng đồng kết nối và sáng tạo cho tất cả mọi người. Các lớp người dùng và đặc trưng User (Người dùng cuối): 3 ● Tham gia tương tác nhiều nhất: Người dùng cuối là nhóm tương tác trực tiếp với hệ thống hàng ngày, bao gồm việc đăng tải và tương tác với các bài đăng của người khác. ● Yêu cầu về giao diện: Hệ thống phải đảm bảo cung cấp một giao diện thân thiện, dễ tương tác và dễ hiểu. Điều này giúp người dùng, kể cả những người không rành về công nghệ, có thể sử dụng website một cách dễ dàng.

● Các chức năng chính: o Xem, tạo, chỉnh sửa, và xóa các bài đăng. o Theo dõi người dùng khác để cập nhật các bài đăng mới. o Chỉnh sửa thông tin cá nhân và tùy chỉnh quyền riêng tư. o Tương tác với các bài đăng qua các chức năng như "Thích", "Bình luận", và "Chia sẻ".

o Tương tác qua tin nhắn và trò chuyện thời gian thực với người dùng khác. Developer (Nhà phát triển): ● Bảo trì và sửa lỗi: Developer là nhóm chịu trách nhiệm quản lý và duy trì hệ thống, đảm bảo website luôn hoạt động trơn tru và sửa các lỗi phát sinh. ● Hiểu rõ kiến trúc hệ thống: Developer cần nắm bắt toàn bộ kiến trúc của hệ thống, bao gồm frontend, backend, cơ sở dữ liệu, và các dịch vụ liên quan. ● Kiến thức lập trình vững chắc: Developer cần có kiến thức lập trình chuyên sâu, bao gồm việc sử dụng các framework và công nghệ như Next.js, Firebase, MongoDB và TailwindCSS.

4 ● Cải tiến hệ thống: Developer cần nắm bắt và cập nhật công nghệ mới để cải tiến hệ thống, đảm bảo hiệu suất và khả năng mở rộng đáp ứng được nhu cầu ngày càng tăng của người dùng. Môi trường hoạt động ● Môi trường: hoạt động trên nền tảng là một web based application, được chạy trên hầu hết các loại trình duyệt phổ biến như FireFox, Chrome…. ● Hệ điều hành: do hoạt động chủ yếu trên nền tảng web, nên ứng dụng sẽ hỗ trợ các hệ điều hành phổ biến như Windows, macOS, Linux, hay Android và iOS. ● Phạm vi sử dụng: dành cho người dùng tên toàn thế giới ● Host: Sử dụng dịch vụ hosting của Vercel ● Database: Phối hợp giữa MongoDB và Firebase để lưu trữ dữ liệu và đồng bộ thời gian thực.

Các ràng buộc ● Frontend: Sử dụng công nghệ NextJS, ReactJS, TailwindCSS ● Backend: Sử dụng Firebase serverless function, NextJS API route, NodeJS ● Authentication: Đăng nhập truyền thống (email – password) và đăng nhập sử dụng tài khoản từ các nguồn khác như Google, Github (Oauth) ● Database: o Firebase Firestore cho việc đồng bộ tin nhắn thời gian thực 5 o Firebase Storage kết hợp với ImageKit cho việc lưu trữ và tối ưu hình ảnh do người dùng tải lên hệ thống o MongoDB cho việc lưu trữ các thông tin còn lại của hệ thống Library: Sử dụng các thư viện phù hợp cho việc tích hợp các chức năng của hệ thống 1. Các giả định ban đầu cho ứng dụng ● Người dùng có kết nối Internet ổn định để tải và sử dụng trang web mượt mà. ● Các trình duyệt mà người dùng sử dụng đều được cập nhật lên phiên bản mới nhất và hỗ trợ đầy đủ các tính năng HTML5, CSS3, và JavaScript ES6 trở lên. ● Người dùng sẽ đăng ký tài khoản và cung cấp thông tin cá nhân chính xác để sử dụng đầy đủ các chức năng của hệ thống.

● Thiết bị của người dùng (máy tính hoặc điện thoại di động) có cấu hình đủ mạnh để hiển thị nội dung trang web một cách trơn tru, bao gồm xử lý hình ảnh và các tương tác real-time (tin nhắn). ● Hệ thống máy chủ (Firebase và Vercel) đảm bảo uptime đủ cao để duy trì dịch vụ liên tục mà không gặp tình trạng downtime ngoài kế hoạch. ● Dữ liệu hình ảnh và tin nhắn sẽ không bị thất thoát hoặc hỏng hóc khi lưu trữ và đồng bộ trên các hệ thống Firebase và MongoDB. ● Người dùng hiểu và tuân thủ các quy tắc về nội dung được phép chia sẻ trên hệ thống, bao gồm các quy định về quyền riêng tư và nội dung không phù hợp.

6 ● Hệ thống xác thực người dùng sẽ được sử dụng một cách đáng tin cậy để bảo vệ thông tin người dùng khỏi các mối đe dọa bảo mật. ● Dung lượng lưu trữ hình ảnh của Firebase và ImageKit là đủ để đáp ứng số lượng người dùng dự kiến ban đầu của hệ thống. Yêu cầu chức năng hệ thống Hệ thống sẽ bao gồm các chức năng chính sau: STT Tên chức năng Mức độ ưu tiên 1 Đăng nhập Cao 2 Đăng kí Cao 3 Quản lý bài đăng Cao 4 Tương tác bài đăng Cao 5 Xem thông tin người dùng Cao 6 Tương tác người dùng khác Cao 7 Tìm kiếm bài đăng Trung bình 8 Tìm kiếm người dùng Trung bình 9 Quản lý thông tin cá nhân Trung bình 10 Nhận thông báo Cao 11 Thay đổi giao diện Thấp 12 Nhắn tin Cao 7 1. Yêu cầu dữ liệu Mô hình các lớp dữ liệu trong hệ thống: Tên Mô tả 1 User Dữ liệu người dùng 2 Post Dữ liệu các bài đăng 3 Category Dữ liệu các danh mục 4 Follow Dữ liệu tương tác theo dõi 5 Like Dữ liệu tương tác thích 6 Comment Dữ liệu tương tác bình luận bài đăng 7 CommentLike Dữ liệu tương tác thích bình luận 8 Userchat Dữ liệu các hộp thoại tin nhắn người của người dùng 9 Chat Dữ liệu tin nhắn của người dùng Mô hình dữ liệu Logic của hệ thống: 8 1.

Yêu cầu giao diện, phần cứng, phần mềm 1. Yêu cầu giao diện người dùng ● Thiết kế thân thiện, dễ nhìn, không quá cầu kì hay mang nặng tính kỹ thuật ● Bố cục hiển thị bài đăng hợp lý làm nổi bật các thông tin quan trọng, phù hợp với mọi loại màn hình của các thiết bị khác nhau ● Các nút bấm dễ dàng tiếp cận, hiển thị nội dung báo trước cho người dùng ● Hệ thống cần tích hợp các thanh thông báo lỗi cho người dùng biết khi xảy ra sự cố nhằm nâng cao trải nghiệm sử dụng 1. Yêu cầu phần mềm ● Hệ thống sử dụng MongoDB để lưu trữ các dữ liệu của hệ thống 9 ● Hệ thống sử dụng Firebase Firestore để lưu trữ các tin nhắn thời gian thực của người dùng ● Hệ thống sử dụng Firebase Storage và ImageKit để lưu trữ và tối ưu hóa hình ảnh do người dùng đăng tải ● Hệ thống sử dụng Knock để nhận và gửi thông báo thời gian thực cho người dùng ● Hệ thống phải tương thích với các trình duyệt web phổ biến hiện nay như Chrome, FireFox, Safari, Edge…. ● Hệ thống sử dụng REST API để giao tiếp giữa giao diện người dùng và dịch vụ máy chủ 1.

Yêu cầu phần cứng ● Hệ thống phải tương thích với các thiết bị người dùng thông thường như điện thoại thông minh, máy tính bàn, laptop, máy tính bảng… ● Hỗ trợ các cử chỉ ngón tay như vuốt và phóng to để điều hướng và xem chi tiết trên các thiết bị di động 1. Yêu cầu phi chức năng 1. Yêu cầu dễ sử dụng ● Dễ sử dụng (Ease of Use): Giao diện người dùng cần phải trực quan và dễ hiểu, cho phép người dùng thực hiện các tác vụ cơ bản mà không cần sự hướng dẫn nhiều. Các nút và biểu tượng cần phải rõ ràng và dễ nhận biết.

10 ● Dễ học (Ease of Learning): Hệ thống nên có cấu trúc logic và nhất quán, giúp người dùng mới có thể nhanh chóng nắm bắt cách sử dụng. ● Khả năng ghi nhớ (Memorability): Thiết kế giao diện cần phải nhất quán để người dùng có thể dễ dàng nhớ cách thực hiện các tác vụ sau thời gian không sử dụng. ● Hiệu quả tương tác (Efficiency of Interactions): Người dùng nên có khả năng hoàn thành các tác vụ trong thời gian ngắn nhất có thể, với số lượng thao tác tối thiểu. ● Ergonomics: Thiết kế giao diện cần phải thoải mái cho người dùng trong suốt quá trình sử dụng, bao gồm kích thước nút bấm phù hợp, khoảng cách giữa các yếu tố giao diện và cách bố trí trực quan.

Yêu cầu hiệu suất ● Thời gian tải trang: o Các trang chính (trang chủ, danh sách sản phẩm) phải tải trong vòng 2 giây khi truy cập từ kết nối internet thông thường. o Các trang sản phẩm cụ thể phải tải trong vòng 1,5 giây. ● Khả năng chịu tải: o Hệ thống phải có khả năng xử lý đồng thời ít nhất 500 người dùng mà không làm giảm hiệu suất. o Trong thời gian cao điểm, hệ thống phải có khả năng xử lý ít nhất 100 yêu cầu bài đăng mỗi phút mà không phát sinh lỗi.

● Thời gian bảo trì và phục hồi: 11 o Hệ thống phải đảm bảo thời gian hoạt động (uptime) đạt 99.9% mỗi tháng. o Trong trường hợp xảy ra sự cố, thời gian khôi phục hệ thống phải không vượt quá 1 giờ. ● Tối ưu hóa tìm kiếm: o Hệ thống phải trả về kết quả tìm kiếm trong vòng 2 giây đối với các truy vấn từ người dùng.