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: 1.1 Mục đích: 1.1.1 Khái niệm: 1.1.2 Mục đích: 1.1.3 Đối tượng sử dụng: 1.2 Case-study tham khảo: 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: 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: 30 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: .32 3.10.2 Danh sách actor: 34 3.10.3 Danh sách Use-case: 34 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: 60 5.7 Khung Tìm kiếm: 65 5.7.1 Kết tìm kiếm: 65 5.7.2 Tìm kiếm gần đây: 66 5.8 Khung Thông báo: 67 5.9 Màn hình Đổi mật khẩu: .68 5.10 Màn hình Bài đăng chi tiết: .69 5.10.1 Tổng quan: .69 5.10.2 Chia sẻ đăng: 70 5.11 Màn hình Tạo đăng: 72 5.11.1 Tổng quan: .72 5.11.2 Chỉnh sửa ảnh: .74 5.11.3 Cắt ảnh: 75 5.11.4 Sửa màu ảnh: 76 5.11.5 Thêm filter: 76 5.11.6 Chèn chữ: .77 5.12 Màn hình hồ sơ cá nhân: 79 5.13 Màn hình Chỉnh sửa hồ sơ: .81 5.13.1 Tổng quan: .81 5.13.2 Màn hình Chỉnh sửa ảnh đại diện: 82 5.14 Màn hình Tin nhắn: 83 5.15 Màn hình Danh sách story 85 5.16 Màn hình Tạo story: 85 5.17 Màn hình Tạo story chữ: 87 5.18 Màn hình Tạo story hình ảnh/video: 87 5.18.1 Tổng quan: .87 5.18.2 Màn hình Cắt ảnh: 88 5.18.3 Màn hỉnh Chỉnh sửa màu ảnh: .88 5.18.4 Màn hình Thêm filter: 89 5.18.5 Màn hình Thêm chữ: .89 Giao diện hình Thêm chữ trạng thái chỉnh sửa chữ 90 Bảng chọn font 90 Chương 6: KẾT LUẬN 91 6.1 Kết đạt đồ án: .91 6.2 Hạn chế đồ án: 91 6.3 Hướng phát triển đồ án: 91 TÀI LIỆU THAM KHẢO .92 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 2.1 Mục đích: 2.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 2.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 2.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