Xây dựng trang mạng xã hội chia sẻ hình ảnh

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN Xây dựng trang mạng xã hội chia sẻ hình ảnh GVHD: TS HUỲNH XUÂN PHỤNG SVTH: VƯƠNG QUỐC VINH SKL009432 KHÓA 2018 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN -o0o - KHÓA LUẬN TỐT NGHIỆP Đề tài: Trang mạng xã hội chia sẻ hình ảnh Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng Sinh viên thực hiện: Vương Quốc Vinh KHÓA 2018 BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM KHOA CÔNG NGHỆ THÔNG TIN -o0o - KHÓA LUẬN TỐT NGHIỆP Đề tài: Trang mạng xã hội chia sẻ hình ảnh Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng Sinh viên thực hiện: Vương Quốc Vinh KHÓA 2018 ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ******* CỘNG HÒA XHCN VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Họ tên Sinh viên 1: Vương Quốc Vinh MSSV 1: 18110396 Họ tên Sinh viên 2: MSSV 2:………………… Ngành: Công nghệ thông tin Tên đề tài: Xây dựng trang mạng xã hội chia sẻ hình ảnh Họ tên Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không ? Đánh giá loại: Điểm: TP Hồ Chí Minh, ngày tháng năm 202 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP.HCM KHOA CNTT ******* CỘNG HÒA XHCN VIỆT NAM Độc lập – Tự – Hạnh phúc ******* PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BI ỆN Họ tên Sinh viên 1: Vương Quốc Vinh MSSV 1: 18110396 Họ tên Sinh viên 2: MSSV 2:………………… Ngành: Công nghệ thông tin Tên đề tài: Xây dựng trang mạng xã hội chia sẻ hình ảnh Họ tên Giáo viên hướng dẫn: TS Huỳnh Xuân Phụng NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không ? Đánh giá loại: Điểm: TP Hồ Chí Minh, ngày tháng năm 202 Giáo viên phản biện (Ký & ghi rõ họ tên) LỜI CÁM ƠN Lời đầu tiên, nhóm xin phép gửi lời cảm ơn chân thành sâu sắc đến với đồn Khoa Cơng Nghệ Thơng Tin – Trường Đại Học Sư Phạm Kỹ Thuật Thành Phố Hồ Chí Minh nói chung thầy hướng dẫn nói riêng tạo điều kiện cho chúng em trau dồi, học tập phát triển kiến thức tảng vững để thực đề tài Sau hành trình năm bắt tay vào thực đề tài, nhóm xin gửi đến Thầy Huỳnh Xuân Phụng lời cảm ơn chân thành, sâu sắc đầy cảm kích đồng hành nhóm em Thầy hướng dẫn cho nhóm em cách tận tâm, nhiệt huyết đưa góp ý vơ q báu cho nhóm em suốt q trình thực đề tài Với hướng dẫn thầy Huỳnh Xuân Phụng, nhóm em trang bị vào hành trang lượng kiến thức kinh nghiệm khổng lồ chuyên ngành yêu cầu thực tế công việc tương lai Điều động lực lớn em để bọn em hoàn thành đề tài cách hoàn thiện tốt Mặc dù nhóm em tồn tâm tồn lực để hồn thiện đề tài cách tốt nhất, việc xảy thiếu xót điều khơng thể tránh khỏi Nhóm em hi vọng nhận góp ý tận tình thầy cơ, qua rút kinh nghiệm cải thiện nâng cấp sản phẩm cách tốt Chúng em xin chân thành cảm ơn! Nhóm thực Vương Quốc Vinh - 18110396 MỤC LỤC DANH SÁCH HÌNH DANH SÁCH BẢNG BIỂU PHẦN MỞ ĐẦU Tính cấp thiết đề tài Đối tượng nghiên cứu Phạm vi nghiên cứu Kết dự kiến đạt Phía người dùng 4.1 4.2.Phía quản trị viên 10 PHẦN NỘI DUNG 11 CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 11 Các cơng nghệ phía Front-end 11 1.1 ReactJS Framework 11 1.2 Redux 12 Các cơng nghệ phía Back end 14 2.1 NodeJS 14 2.2 ExpressJS 14 CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 17 Khảo sát trạng 17 Các nguồn khảo sát 17 1.1 1.1.1 Instagram 17 1.1.2 Pinterest 17 1.1.3 Pexels 18 1.2 Kết khảo sát 19 Xác định yêu cầu 20 2.1 Danh sách chức 20 2.2 Ma trận quyền – Permission matrix 21 2.3 Các yêu cầu phi chức 23 2.4 Đối tượng sử dụng 23 2.5 Các giả thiết, ràng buộc rủi ro 24 Mơ hình hóa yêu cầu 25 Quản lý delivery 25 CHƯƠNG 3: THIẾT KẾ ỨNG DỤNG 28 Kiến trúc chung hệ thống 28 Sơ đồ tổng quan 29 Đặc tả sở liệu 29 3.1 Sơ đồ thiết kế sở liệu 29 3.2 Mô tả chi tiết sơ đồ thiết kế sở liệu 31 Đặc tả chức 36 4.1 Đăng nhập 36 4.2 Đăng nhập với Google 40 1.3 Đăng ký 43 1.4 Quên mật 48 1.5 Đăng xuất 53 1.6 Tìm kiếm hình ảnh 56 1.7 Xem viết dạng modal 59 1.8 Tương tác viết 61 1.9 Bình luận viết 66 1.10 Xóa bình luận viết 69 1.11 Chỉnh sửa viết 73 1.12 Tải hình ảnh viết 76 1.13 Thanh toán 79 1.14 Xóa viết 84 1.15 Báo cáo viết 89 1.16 Thông tin người dùng 94 1.17 Tương tác người dùng 97 1.18 Trò chuyện 100 1.19 Chỉnh sửa thông tin cá nhân 105 1.20 Đổi mật 108 1.21 Lịch sử giao dịch 111 1.22 Thông báo người dùng 114 1.23 Thống kê 115 1.24 Quản lý người dùng 118 1.25 Quản lý viết bị báo cáo 120 CHƯƠNG 4: APIs VÀ KIỂM THỬ PHẦN MỀM 124 Danh sách APIs 124 1.1 Đăng ký 124 1.2 Đăng nhập 125 1.3 Quên mật 126 1.4 Tìm kiếm hình ảnh 129 1.5 Tạo viết 129 1.6 Bài viết nhiều lượt like 130 1.7 Danh sách bình luận viết 131 1.8 Tạo bình luận viết 132 1.9 Lịch sử giao dịch 133 1.10 Danh sách viết bị báo cáo 134 1.11 Tạo báo cáo viết 135 1.12 Danh sách thông báo 135 1.13 Danh sách trò chuyện 136 1.14 Tạo trò chuyện 137 1.15 Danh sách tin nhắn trò chuyện 137 1.16 Tạo tin nhắn 138 1.17 Lấy đường dẫn tới trang toán Momo 139 1.18 Thông tin thống kê (Admin) 140 Kiểm thử 142 PHẦN KẾT LUẬN 144 TÀI LIỆU THAM KHẢO 146 DANH SÁCH HÌNH Hình Virtual DOM ReactJS 11 Hình One-way data binding ReactJS 12 Hình Luồng hoạt động Redux 13 Hình NodeJS 14 Hình Luồng xử lý ExpressJS 15 Hình MongoDB ? 15 Hình Website "Instagram" 17 Hình Website "Pinterest" 18 Hình Website "Pexels" 19 Hình 10 Lược đồ Usecase 25 Hình 11 Kiến trúc chung website 28 Hình 12 Kiến trúc chung website 28 Hình 13 Sơ đồ tổng quan 29 Hình 14 Sơ đồ thiết kế sở liệu 30 Hình 15 Sequence "Đăng nhập" 37 Hình 16 Activity "Đăng nhập" 38 Hình 17 Mơ tả UI "Đăng nhập" 39 Hình 18 Sequence "Đăng nhập với Google" 41 Hình 19 Activity "Đăng nhập với Google" 42 Hình 20 Mơ tả UI "Đăng nhập với Google" 43 Hình 21 Sequence "Đăng ký" 45 Hình 22 Activity "Đăng ký" 46 Hình 23 Mơ tả UI "Đăng ký" 47 Hình 24 Sequence "Quên mật khẩu" 50 Hình 25 Activity "Quên mật khẩu" 51 Hình 26 Mô tả UI "Quên mật khẩu" 52 Hình 27 Mô tả UI "Quên mật khẩu" 52 Hình 28 Mơ tả UI “Quên mật khẩu” 53 Hình 29 Sequence "Đăng xuất" 55