Đồ án mạng xã hội chia sẻ ảnh và video

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO CUỐI KỲ Môn học: ĐỒ ÁN ĐỀ TÀI MẠNG XÃ HỘI CHIA SẺ ẢNH VÀ VIDEO Giảng viên hướng dẫn Sinh viên thực Mã sinh viên Sinh viên thực Mã sinh viên Bộ môn : : : : : : ThS Thái Thụy Hàn Uyển Phạm Thị Thu Trang 20522041 Nguyễn Trần Cẩm Tiên 20522011 Phát triển phần mềm TPHCM, tháng năm 2023 BẢNG GHI NHẬN THAY ĐỔI TÀI LIỆU Ngày Phiên Mô tả 15/03/2023 1.0 Khởi tạo 04/05/2023 1.1 Use-case Diagram & Activity Diagram 21/06/2023 1.2 Hoàn tất Tác giả MỤC LỤC Chương 1: GIỚI THIỆU ĐỀ TÀI 1.1 Tổng quan: .7 1.1 Mục đích: 1.1.1 Khái niệm: .7 1.1.2 Mục đích: 1.1.3 Đối tượng sử dụng: 1.2 Case-study tham khảo: .8 1.3 Môi trường phát triển: 1.4 Mơ tả quy trình thực cơng việc chính: .8 Chương 2: CƠ SỞ LÝ THUYẾT .10 2.1 Ngơn ngữ lập trình Javascript: .10 2.1.1 Javascript gì? 10 2.1.2 Cách thức hoạt động Javascript trang web: 11 2.2 Ngơn ngữ lập trình Typescript: 12 2.2.1 Typescript gì? 12 2.2.2 Đặc điểm: 13 2.3 Hệ quản trị sở liệu MongoDB: .16 2.3.1 MongoDB gì? 16 2.3.2 Đặc điểm: 17 2.3.4 Nhược điểm: 20 2.4 NodeJS: 20 2.4.1 NodeJS gì? .20 2.4.2 Cấu trúc NodeJS: 21 2.4.3 Ưu điểm: 24 2.4.4 Nhược điểm: 24 2.5 ReactJS: 24 2.5.1 ReactJS gì? 24 2.5.2 Những thành phần ReactJS: .25 2.5.3 Ưu điểm: 27 2.5.4 Nhược điểm: 28 Chương 3: XÁC ĐỊNH VÀ MƠ HÌNH HĨA U CẦU PHẦN MỀM 29 3.1 Yêu cầu nghiệp vụ: .29 3.1.1 Mục đích hệ thống .29 3.1.2 Mô tả quy trình: 29 3.2 Yêu cầu chức năng: 30 3.3 Yêu cầu phi chức năng: 30 3.4 Yêu cầu hiệu suất: 30 3.5 Yêu cầu tiện dụng: 31 3.6 Yêu cầu tương thích: 31 3.7 Yêu cầu bảo mật: 31 3.8 Yêu cầu an toàn: .32 3.9 Yêu cầu công nghệ: 32 3.10 Sơ đồ Use-case: 32 3.10.1 Sơ đồ Use-case: 33 3.10.2 Danh sách actor: 33 3.10.3 Danh sách Use-case: 33 3.11 Thiết kế Activity Diagram: 35 3.11.1 Activity Diagram “Đăng nhập”: .35 3.11.2 Activity Diagram “Quản lý hồ sơ cá nhân”: .36 3.11.3 Activity Diagram “Tương tác với đăng”: 37 3.11.4 Activity Diagram “Tạo đăng”: 38 3.11.5 Activity Diagram “Theo dõi người dùng”: .39 3.11.6 Activity Diagram “Nhắn tin”: 39 3.12 Thiết kế Sequence Diagram: 40 3.12.1 Sequence Diagram “Đăng nhập”: .40 3.12.2 Sequence Diagram “Quản lý hồ sơ cá nhân”: 41 3.12.3 Sequence Diagram “Tương tác với đăng”: 42 3.12.4 Sequence Diagram “Tạo đăng”: 43 3.12.5 Sequence Diagram "Theo dõi người dùng”: .44 3.12.6 Sequence Diagram "Nhắn tin”: 45 3.13 Thiết kế Class Diagram: .46 3.13.1 Tổng quan Class Diagram: 46 3.13.2 Đặc tả chi tiết Class Diagram: 46 Chương 4: THIẾT KẾ HỆ THỐNG 52 4.1 Kiến trúc hệ thống: 52 4.2 Mô tả thành phần hệ thống: .52 4.3 Quá trình hoạt động hệ thống: 52 Chương 5: THIẾT KẾ GIAO DIỆN 54 5.1 Màn hình Đăng nhập: .54 5.2 Màn hình Đăng ký: .55 5.3 Màn hình Xác thực OTP: .55 5.4 Màn hình Quên mật khẩu: 56 5.5 Màn hình Tạo mật mới: 56 5.6 Màn hình Trang chủ: 57 5.6.1 Tổng quan: 57 5.6.4 Bài đăng: .59 5.7 Khung Tìm kiếm: 63 5.7.1 Kết tìm kiếm: 63 5.7.2 Tìm kiếm gần đây: 64 5.8 Khung Thông báo: 65 5.9 Màn hình Đổi mật khẩu: 66 5.10 Màn hình Bài đăng chi tiết: 67 5.10.1 Tổng quan: 67 5.10.2 Chia sẻ đăng: .68 5.11 Màn hình Tạo đăng: .70 5.11.1 Tổng quan: 70 5.11.2 Chỉnh sửa ảnh: 72 5.11.3 Cắt ảnh: .73 5.11.4 Sửa màu ảnh: .74 5.11.5 Thêm filter: 74 5.11.6 Chèn chữ: 75 5.12 Màn hình hồ sơ cá nhân: 77 5.13 Màn hình Chỉnh sửa hồ sơ: 79 5.13.1 Tổng quan: 79 5.13.2 Màn hình Chỉnh sửa ảnh đại diện: 80 5.14 Màn hình Tin nhắn: 81 5.15 Màn hình Danh sách story 83 5.16 Màn hình Tạo story: .84 5.17 Màn hình Tạo story chữ: 85 5.18 Màn hình Tạo story hình ảnh/video: 85 5.18.1 Tổng quan: 85 5.18.2 Màn hình Cắt ảnh: .86 5.18.3 Màn hỉnh Chỉnh sửa màu ảnh: 86 5.18.4 Màn hình Thêm filter: .87 5.18.5 Màn hình Thêm chữ: 87 Giao diện hình Thêm chữ trạng thái chỉnh sửa chữ 88 Bảng chọn font 88 Chương 6: KẾT LUẬN 89 6.1 Kết đạt đồ án: 89 6.2 Hạn chế đồ án: 89 6.3 Hướng phát triển đồ án: 89 TÀI LIỆU THAM KHẢO 90 Chương 1: GIỚI THIỆU ĐỀ TÀI 1.1 Tổng quan: InStare trang web mạng xã hội tập trung vào nội dung trực quan hình ảnh video, nơi để người kết nối, thể thân, lan tỏa nguồn cảm hứng đến với người xung quanh Với giao diện thân thiện công cụ chỉnh sửa ảnh, InStare cho phép bạn chia sẻ khoảnh khắc, sáng tạo sở thích với người theo dõi 1.1 Mục đích: 1.1.1 Khái niệm: Mạng xã hội tảng trực tuyến cho phép cá nhân tổ chức tương tác với thông qua việc chia sẻ thơng tin, ý kiến, nội dung, hình ảnh video Nó cho phép người dùng kết nối với người khác, đồng thời tạo cộng đồng trực tuyến với người có sở thích, quan điểm hoạt động Mạng xã hội cung cấp công cụ để quản lý mối quan hệ, tạo thương hiệu, quảng cáo kinh doanh trực tuyến 1.1.2 Mục đích: - Đem đến cộng đồng đưa người sở thích, sở trường đến với nhau, chia sẻ tạo dựng mối quan hệ - Cung cấp tảng cho người giao tiếp với qua tin nhắn - Chia sẻ hình ảnh video đến lượng lớn người dùng - Cung cấp tính cơng cụ để nâng cao tầm nhìn, tạo giá trị cho cộng đồng đóng góp vào sống người dùng - Thiết kế phát triển ứng dụng web chất lượng cao, đáp ứng yêu cầu người dùng đảm bảo tính ổn định an tồn - Tối ưu hóa trải nghiệm người dùng cách xây dựng hệ thống trực quan, dễ sử dụng, cải thiện tính năng, hiệu suất, giao diện - Thiết kế triển khai hệ thống lưu trữ quản lý liệu hiệu 1.1.3 Đối tượng sử dụng: Đối tượng sử dụng mạng xã hội (thông thường từ 13 tuổi trở lên), bao gồm cá nhân, tổ chức, doanh nghiệp cộng đồng Mạng xã hội trở thành phương tiện truyền thông mạnh mẽ để kết nối tương tác với người có sở thích, hoạt động quan điểm Nó sử dụng để chia sẻ thơng tin, đưa ý kiến, giải trí, tạo mối quan hệ kinh doanh, quảng cáo nhiều mục đích khác Người dùng tùy chỉnh trang cá nhân lựa chọn người bạn muốn kết nối với để xây dựng mạng lưới cá nhân cộng đồng trực tuyến 1.2 Case-study tham khảo: - Instagram - Facebook - Twitter 1.3 Môi trường phát triển: - Hệ điều hành: Windows 10 - Cơ sở liệu: MongoDB - Cơng cụ phân tích, thiết kế: Figma, draw.io, StarUML,… - IDE: Visual Studio Code - Môi trường làm việc nhóm: Notion, Google Drive, Microsoft Teams, Facebook Messenger - Các framework sử dụng: NodeJS, NestJS, ReactJS - Ngôn ngữ lập trình: JavaScript, TypeScript - Quản lý phiên bản: Git 1.4 Mơ tả quy trình thực cơng việc chính: • • • Bước 1: Xác định u cầu: - Phân tích khả thi quy mơ thực - Tìm hiểu quy trình nghiệp vụ - Tham khảo trải nghiệm ứng dụng liên quan - Khảo sát người dùng qua mạng - Thu thập thông tin yêu cầu Bước 2: Thiết kế hệ thống: - Vẽ sơ đồ Use-case: phân tích nghiệp vụ tổng quan - Vẽ Sequence Diagram Bước 3: Thiết kế liệu - Thiết kế liệu tương ứng với loại yêu cầu phần mềm để đảm bảo tính đắn tính tiến hóa với phần mềm, có hiệu mặt truy xuất lưu trữ - Xác định lập danh sách bảng liệu cần thiết cho yêu cầu phần mềm • • Xây dựng sơ đồ logic cụ thể phần mềm Bước 4: Thiết kế giao diện - Lập danh sách hình người dùng tương tác với phần mềm - Mô tả đối tượng hình - Xác định chức hiển thị hình Bước 5: Code kiểm thử - Code trình bày theo mơ hình lớp phân chia theo nhiệm vụ yêu cầu - Testcase rõ ràng để kiểm tra tính hiệu hệ thống Chương 2: CƠ SỞ LÝ THUYẾT 2.1 Ngơn ngữ lập trình Javascript: 2.1.1 Javascript gì? JavaScript ngơn ngữ lập trình phổ biến dùng để tạo trang web tương tác Được tích hợp nhúng vào HTML giúp website trở nên sống động JavaScript đóng vai trị phần trang web, thực thi cho phép Client-Side Script từ phía người dùng phía máy chủ (Nodejs) tạo trang web động JavaScript ngôn ngữ lập trình thơng dịch với khả hướng đến đối tượng Là ngơn ngữ lập trình web có mối liên hệ lẫn để xây dựng website sống động, chuyên nghiệp, bạn nhìn tổng quan sau: • HTML: Cung cấp cấu trúc bản, hỗ trợ việc xây dựng layout, thêm nội dung dễ dàng website • CSS: Được sử dụng để kiểm soát hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,… • JavaScript: Tạo nên nội dung “động” website 10 5.11.6.2 Màn hình chỉnh sửa chữ: Giao diện hình Chỉnh sửa chữ Các bảng chọn 76 5.12 Màn hình hồ sơ cá nhân: Giao diện hình Hồ sơ cá nhân thân 77 Giao diện hình Hồ sơ cá nhân người khác 78 5.13 Màn hình Chỉnh sửa hồ sơ: 5.13.1 Tổng quan: 79 5.13.2 Màn hình Chỉnh sửa ảnh đại diện: 80 5.14 Màn hình Tin nhắn: Màn hình tin nhắn tổng quan 81 Khung tìm kiếm liên hệ Các tùy chọn Các popups Màn hình Tin nhắn trạng thái “Blocked” 82 Màn hình Tin nhắn trạng thái “After blocked” 5.15 Màn hình Danh sách story 83 5.16 Màn hình Tạo story: 84 5.17 Màn hình Tạo story chữ: Giao diện Màn hình tạo story chữ Các bảng chọn màu chữ 5.18 Màn hình Tạo story hình ảnh/video: 5.18.1 Tổng quan: 85 5.18.2 Màn hình Cắt ảnh: 5.18.3 Màn hỉnh Chỉnh sửa màu ảnh: 86 5.18.4 Màn hình Thêm filter: 5.18.5 Màn hình Thêm chữ: 5.18.5.1 Màn hình Thêm chữ trạng thái thêm chữ: 87 5.18.5.2 Màn hình Thêm chữ trạng thái chỉnh sửa chữ: Giao diện hình Thêm chữ trạng thái chỉnh sửa chữ Bảng chọn font 88 Chương 6: KẾT LUẬN 6.1 Kết đạt đồ án: - Hoàn thiện mặt giao diện tính tảng mạng xã hội - Giao diện bắt mắt, dễ sử dụng, hút người dùng - Tối ưu code tốc độ load - Quy trình testing kỹ lưỡng, lỗi - Đồ án chia công việc quản lý thời gian chặt chẽ - Các design kế hoạch thiết kế phân định rõ ràng 6.2 Hạn chế đồ án: - Chưa phát triển tính block / bỏ block người dùng - Tính cắt ảnh cịn vài thiếu sót - Web chưa responsive thiết bị điện thoại, tablet 6.3 Hướng phát triển đồ án: - Hoàn thiện tính block / bỏ block người dùng - Tối ưu công cụ chỉnh sửa ảnh - Thêm phân quyền admin chức quản lý dành cho admin - Thêm chức chỉnh sửa video - Thêm chức gửi file (hình ảnh, video) đoạn chat - Thêm chức gợi ý viết - Thêm chức nhận diện khuôn mặt - Thêm chức livestream 89 TÀI LIỆU THAM KHẢO • Vietnix, “JavaScript gì? Kiến thức chi tiết JavaScript bản”, 2021 Địa chỉ: https://vietnix.vn/javascript-la-gi/ • Vietnix, “TypeScript gì? Tồn kiến thức TypeScript dành cho người mới”, 2022 Địa chỉ: https://vietnix.vn/typescript-la-gi/ • Tài liệu framework NestJS: https://docs.nestjs.com/ • Viblo, “TÌM HIỂU VỀ MONGODB”, 2017 Địa chỉ: https://viblo.asia/p/tim-hieu-ve-mongodb-4P856ajGlY3#_7-loi-thecua-mongodb-6 • FPT, “NodeJS gì? Những kiến thức liên quan tới NodeJS”, Địa chỉ: https://aptech.fpt.edu.vn/nodejs-la-gi.html • FPT, “ReactJS gì? Những điều bạn chưa biết ReactJS” Địa chỉ: https://aptech.fpt.edu.vn/reactjs-la-gi.html 90