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 Giáo viên hướng dẫn (Ký & ghi rõ họ tên) năm 202 Đ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 Giáo viên phản biện (Ký & ghi rõ họ tên) năm 202 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 hồ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 để hoà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 4.1 Phía người dùng 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 1.1 1.1.1 Instagram 17 1.1.2 Pinterest 17 1.1.3 Pexels 18 1.2 Các nguồn khảo sát 17 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 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 Hình 102 API "Tạo bình luận viết" HTTP Request POST - https://sm-api12.herokuapp.com/api/comment Bảng 86 HTTP Request "Tạo bình luận viết" Attribute Type Required Description comment String ✓ Nội dung bình luận postId String ✓ ID viết HTTP Response Bảng 87 HTTP Response "Tạo bình luận viết" Attribute 1.9 Type Required Object ✓ Description Bình luận Lịch sử giao dịch 133 Hình 103 API "Lịch sử giao dịch" HTTP Request GET - https://sm-api12.herokuapp.com/api/payment N/A HTTP Response Bảng 88 HTTP Response "Lịch sử giao dịch" Attribute Type Required Array ✓ Description Danh sách giao dịch người dùng 1.10 Danh sách viết bị báo cáo Hình 104 API "Danh sách viết bị báo cáo" HTTP Request GET - https://sm-api12.herokuapp.com/api/report N/A 134 HTTP Reponse Bảng 89 HTTP Response "Danh sách viết bị báo cáo" Attribute Type Required Array ✓ Description Danh sách viết bị báo cáo 1.11 Tạo báo cáo viết Hình 105 API "Tạo báo cáo viết" HTTP Request POST - https://sm-api12.herokuapp.com/api/report Bảng 90 HTTP Request "Tạo báo cáo viết" Attribute Type Required Description reason String ✓ Lí báo cáo postId String ✓ ID viết HTTP Response Bảng 91 HTTP Response "Tạo báo cáo viết" Attribute Type Required status String ✓ Description Trạng thái báo cáo 1.12 Danh sách thơng báo 135 Hình 106 API "Danh sách thông báo" HTTP Request GET - https://sm-api12.herokuapp.com/api/noti N/A HTTP Response Bảng 92 HTTP Response "Danh sách thông báo" Attribute Type Required Description Array ✓ Danh sách thông báo người dùng 1.13 Danh sách trị chuyện Hình 107 API "Danh sách trò chuyện" HTTP Request GET - https://sm-api12.herokuapp.com/api/conversation N/A 136 HTTP Response Bảng 93 HTTP Response "Danh sách trò chuyện" Attribute Type Required Array ✓ Description Danh sách trò chuyện người dùng 1.14 Tạo trị chuyện Hình 108 API "Tạo trị chuyện mới" HTTP Request POST - https://sm-api12.herokuapp.com/api/conversation Bảng 94 HTTP Request "Tạo trò chuyện mới" Attribute Type Required receiverId String ✓ Description ID người dùng HTTP Response Bảng 95 HTTP Response "Tạo trò chuyện mới" Attribute Type Required Object ✓ Description Thơng tin trị chuyện 1.15 Danh sách tin nhắn trị chuyện 137 Hình 109 API "Danh sách tin nhắn trò chuyện" HTTP Request GET - https://sm-api12.herokuapp.com/api/message/CONVERSATION_ID N/A HTTP Response Bảng 96 HTTP Response "Danh sách tin nhắn trò chuyện" Attribute Type Required Array ✓ Description Danh sách tin nhắn 1.16 Tạo tin nhắn Hình 110 API "Tạo tin nhắn" HTTP Request 138 POST - https://sm-api12.herokuapp.com/api/message Bảng 97 HTTP Resquest "Tạo tin nhắn" Attribute Type Required Description conversationId String ✓ ID trò chuyện text String ✓ Nội dung tin nhắn HTTP Response Bảng 98 HTTP Response "Tạo tin nhắn" Attribute Type Required Object ✓ Description Thông tin tin nhắn 1.17 Lấy đường dẫn tới trang tốn Momo Hình 111 API "Lấy đường dẫn tới trang toán Momo" HTTP Request POST - https://sm-api12.herokuapp.com/api/momo Bảng 99 HTTP Request "Lấy đường dẫn tới trang toán Momo" Attribute Type Required 139 Description url String ✓ Đường dẫn đến trang sau toán price Number ✓ Giá tiền toán ($) HTTP Response Bảng 100 HTTP Response "Lấy đường dẫn tới trang toán Momo" Attribute Type Required String ✓ Description Đường dẫn đến trang tốn Momo 1.18 Thơng tin thống kê (Admin) Hình 112 API "Thống kê" HTTP Request GET - https://sm-api12.herokuapp.com/api/dashboard N/A HTTP Response 140 Bảng 101 HTTP Response "Thống kê" Attribute Type Required totalPosts Number ✓ Số lượng viết totalUsers Number ✓ Số lượng người dùng totalReports Number ✓ Số lượng viết bị báo cáo totalKeywords Number ✓ Số lượng từ khóa userChart Object ✓ Thơng tin hiển thị biểu đồ người dùng userData Array ✓ Danh sách người dùng reportData Object ✓ Thông tin hiển thị viết bị báo cáo 141 Description Kiểm thử Bảng 102 Kiểm thử ID Test case description Expected Test steps Output Result Truy cập vào trang https://social-medialv.netlify.app/register UI_001 Kiểm tra chức đăng ký Nhập đầy đủ Hiển thị thông trường thông tin báo đăng ký Pass email chưa tồn thành công website “Create Chọn account” Truy cập vào trang Kiểm tra chức UI_002 đăng nhập https://social-medialv.netlify.app/login Nhập tài khoản mật Hiển thị thông báo đăng nhập Pass thành công Chọn “Sign in” Đăng nhập thành công Truy cập vào trang https://social-mediaKiểm tra chức UI_003 đăng viết lv.netlify.app/ Mở cửa sổ tạo viết Nhập trường thông tin tải hình ảnh có website Chọn “Upload” 142 Hiển thị thơng báo hình ảnh Pass tồn “Forget Chọn Kiểm tra chức quên mật password” Nhập email để nhận mã xác thực Nhập xác thực mã Hiển thị thông báo tạo mật Pass Tạo mật Kiểm tra chức FUNC_001 tìm kiếm hình ảnh Truy cập vào trang https://social-medialv.netlify.app/search Nhập từ khóa 143 Hiển thị hình ảnh theo khóa nhập từ Pass PHẦN KẾT LUẬN Kết đạt Sau trình nghiên cứu xây dựng đề tài “Trang mạng xã hội chia sẻ hình ảnh”, nhóm đạt kết sau: 1.1 Về lý thuyết Trong suốt trình thực đề tài, nhóm liên tục tìm hiểu ứng dụng công nghệ, kĩ thuật liên quan đến NodeJS ExpressJS để tạo nên APIs giúp tối ưu hiệu suất, tăng tốc độ phản hồi cho người dùng Hiểu mức độ quan trọng việc bảo mật liệu người dùng, áp dụng JSON Web Token, thư viện hỗ trợ mạnh mẽ việc tạo Token phân quyền người dùng đảm bảo an toàn liệu Tìm hiểu dịch vụ AWS Rekcognition việc phân loại hình ảnh, giúp người dùng tìm kiếm dễ dàng Ứng dụng thành công Framework ReactJS MaterialUI thư viện hỗ trợ xử lý liệu như: Redux, Redux-Saga, Axios… Tạo nên giao diện đơn giản để dễ dàng tiếp cận với người dùng cuối 1.2 Về ứng dụng Website hồn thiện chức năng: • Cho phép người dùng đăng nhập với Google, chức cho thao tác với tài khoản như: Quên mật khẩu, đổi mật khẩu, thay đổi thông tin cá nhận… • Tương tác với viết: Bình luận, u thích, báo cáo tải hình ảnh • Cho phép người dùng tốn hình ảnh u cầu trả phí với đa dạng phương thức ngồi nước như: tốn ví, Paypal, Momo • Người dùng tương tác với người dùng khác trị chuyện theo dõi người dùng • Tìm kiếm hình ảnh dễ dàng với từ khóa 144 • Bảo vệ hình ảnh người dùng Ưu điểm • Trang web đơn giản, dễ sử dụng phù hợp với lứa tuổi, • Cho phép kiếm tiền tốn nhiều hình thức • Các chức hoạt động xác, gặp lỗi Nhược điểm Bên cạnh nhóm nhận thấy website cịn nhiều nhược điểm: • Website xây dựng dựa quan điểm khảo sát nhóm nên khó tránh khỏi thiếu sót mặt chức năng, giao diện • Cơng cụ tìm kiếm khơng hỗ trợ đa ngơn ngữ • Dự án đặt server miễn phí nên tốc độ xử lý chưa nhanh • Chưa đảm bảo sức chứa lượng người dùng lớn Hướng phát triển tương lai • Xây dựng cơng cụ tìm kiếm đa ngơn ngữ cho website • Tăng bảo mật thơng tin, liệu • Cho phép người dùng tải hình ảnh với nhiều kích thước • Thêm đa dạng phương thức tốn • Nâng cấp hệ thống đảm báo lưu lượng người dùng tốc độ xử lý Github: https://github.com/vinh2112/SocialMedia Website: https://social-media-lv.netlify.app/ 145 TÀI LIỆU THAM KHẢO [1] React – A JavaScript library for building user interfaces | https://reactjs.org/ [2] Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine | https://nodejs.org/ [3] AWS Services – Rekognition | https://docs.aws.amazon.com/rekognition/latest/dg/what-is.html [4] Tìm hiểu Json Web Token (JWT) | https://viblo.asia/p/tim-hieu-ve-json-web-token-jwt7rVRqp73v4bP [5] Material UI | https://mui.com/ 146 S K L 0