Xây dựng website mạng xã hội về hình ảnh

MỤC LỤC LỜI CẢM ƠN ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP 11 DANH MỤC HÌNH ẢNH 16 DANH MỤC BẢNG 18 TỔNG QUAN 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Đối tượng phạm vi nghiên cứu 1.4 Kết dự kiến đạt CƠ SỞ LÝ THUYẾT 2.1 Tổng quan công nghệ thực 2.1.1 2.2 Các thành phần công nghệ thực NestJS 2.2.1 Tổng quan 2.2.2 Ưu điểm 2.2.3 2.2.3 Nhược điểm 2.3 GraphQL 2.3.1 Tổng quan 2.3.2 Tính 2.3.3 Tại phải dùng GraphQL 2.3.4 Nhược Điểm 2.4 MongoDB 2.4.1 Mơ hình 2.4.2 Đặc trưng 2.4.3 Ưu điểm 2.4.4 Nhược điểm 2.5 ReactJS 2.5.1 Tổng Quan 2.5.2 Đôi nét ReacJS 10 2.5.3 Ưu điểm 11 2.5.4 2.6 Nhược điểm 12 Ant Design 12 2.6.1 2.7 Tổng Quan Về Ant Design 12 Webpack 12 2.7.1 2.8 Tổng Quan Về Webpack 12 Eslint 13 2.8.1 2.9 Tổng Quan Về Eslint 13 Docker 13 2.9.1 Tổng Quan Về Docker 13 2.9.2 Các thức hoạt động Docker 13 2.9.3 Lý nên sử dụng Docker 13 2.10 Nginx 14 2.10.1 2.11 Tổng quan Nginx 14 Microsoft Computer vision 14 2.11.1 Sơ nét Microsoft Computer Vision : 14 KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU 16 3.1 Khảo sát trạng 16 3.1.1 Facebook 16 3.1.2 Instagram 17 3.1.3 Pinterest 18 3.2 Xác định yêu cầu 19 3.3 Đặc tả chức 20 3.3.1 Bảng requirement dành cho use case 20 3.3.2 Liệt kê actor 22 3.3.3 Bảng use case 22 :THIẾT KẾ ỨNG DỤNG 42 4.1 Thiết kế liệu 42 4.1.1 Sơ đồ thiết kế liệu 42 4.1.2 Mô tả sơ đồ thiết kế liệu 42 4.2 Sơ đồ tuần tự(Sequence Diagram) 47 4.2.1 Sequence tìm kiếm ảnh ‘‘Search Image’’ 47 4.2.2 Sequence chọn chủ đề ảnh vừa đăng nhập ‘‘Choose topic’s image what to see when account just register completely’’ 49 4.2.3 Sequence xem danh sách photo ‘‘View Image List’’ 50 4.2.4 Sequence hiển thị bình luận,reaction post ‘‘See comment,reaction in each image’’ 52 4.2.5 Sequence Thao tác bình luận thả cảm xúc post ‘‘’’ 53 4.2.6 Sequence phản hồi bình luận ‘‘Response with parent comment ’’ 56 4.2.7 Sequence tạo post ‘‘Create a new post with image’’ 59 4.2.8 Sequence tìm kiếm ảnh theo chủ đề click vào tag post ‘‘Search topic when click topic’s tag in each a post’’ 62 4.2.9 Sequence tải ảnh với nhiều kích thước khác ‘‘Dowload image with other size’’ 63 4.2.10 them’’ Sequence xem người dùng khác click vào họ ‘‘View user when click 64 4.2.11 Sequence chat user ‘‘Chat between users’’ 66 4.2.12 Sequence nhận thơng báo có người dùng tương tác với post’’ Receive notifications when someone comment or add reaction in your post’’ 67 4.2.13 Sequence xem thông tin cá nhân ‘‘See personal imformation’’ 69 4.2.14 Sequence đăng kí tài khoản người dùng ‘‘Register an new account’’ 72 4.2.15 Sequence đăng nhập tài khoản người dùng ‘‘Login with an account ’’ 73 4.2.16 Sequence thị danh sách người dùng ‘‘View Accounts’’ 74 4.2.17 Sequence thị tất post 76 4.3 Thiết kế giao diện 78 CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 97 5.1 Cài đặt ứng dụng 97 5.2 Kiểm thử ứng dụng 100 5.2.1 Chức đăng kí 100 5.2.2 Chức đăng nhập 101 5.2.3 Chức tìm kiếm 102 5.2.4 Chức thông báo tương tác 102 5.2.5 Chức kiểm sốt nơi dụng ảnh post lên 103 KẾT LUẬN 103 6.1 Kết đạt 103 6.2 Ưu điểm nhược điểm 103 6.2.1 Ưu điểm 103 6.2.2 Nhược điểm 103 6.2.3 Khó khăn 104 6.3 Kinh nghiệm đạt 104 6.4 Hướng phát triển cho tương lai 104 TÀI LIỆU THAM KHẢO 105 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******* ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP Họ tên Sinh viên 1: Phạm Phước Đặng Toàn .MSSV 1: 16110227 Họ tên Sinh viên 2: Ngô Thanh Tài……… MSSV 2: 16110201 Ngành: Công nghệ Thông tin Thời gian làm tiểu luận: từ: 14/09/2020 đến: 06/01/2021 Tên đề tài: XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ HÌNH ẢNH GV hướng dẫn: TS LÊ VĨNH THỊNH Nhiệm vụ luận văn: Nghiên cứu công nghệ sử dụng (ReactJS, NestJS, Grahpql, MongoDB, Docker) Tìm hiểu,nghiên cứu cách sử dụng graphQL, NestJS với MongoDB Tìm hiểu cách deploy website lên Docker Tìm hiểu,nghiên cứu sử dụng UI component Ant Design với ReactJS Dùng ReactJS kết hợp với Ant Design để làm front-end theo xu hướng SPA (Single Page Appliction) Kết hợp phần Front-end Back-end để xây dựng website mạng xã hội hình ảnh Deploy website Docker Đề cương viết luận văn : MỤC LỤC Phần 1: Mở đầu 1.1 Tính cấp thiết đề tài 1.2 Mục đích đề tài 1.3 Cách tiếp cận phương pháp nghiên cứu 1.4 Kết dự kiến đạt Phần 2: Nội dung Chương 1: Tổng quan 1.1 Tổng quan công nghệ thực 1.2 NestJS 1.3 GraphQL 1.4 MongoDB 1.5 ReacJS 1.6 Ant Design 1.7 Webpack 1.8 Eslint 1.9 Docker 1.10 Nginx 1.11 Microsoft Computer Vision Chương 2: Khảo sát trạng xác định yêu cầu Chương 3: Thiết kế ứng dụng Chương 4: Cài đặt kiểm thử ứng dụng Phần 3: Kết luận Tài liệu tham khảo KẾ HOẠCH THỰC HIỆN STT Mô tả công việc Ngày bắt đầu-Ngày kết thúc (Thực Tế) Khảo sát trạng, lên ý tưởng, viết mơ tả đồ án; tìm hiểu, lựa chọn chuẩn bị môi trường làm việc 14/09/2020 – 15/09/2020 Thiết kế giao diện prototypes 15/09/2020 – 25/09/2020 Thiết kế Database 15/09/2020 – 25/09/2020 Code chức trang đăng nhập, đăng ký Code chức thay đổi thông tin người dùng Code trang đăng nhập,đăng kí reactjs Call API từ backend Code trang home với danh sách ảnh reactjs 25/09/2020 – 27/09/2020 27/09/2020 – 29/09/2020 29/09/2020 – 05/10/2020 Code thêm,sửa,xoá ảnh Báo cáo tiến độ lần (Online) Code chức tìm theo ảnh theo chủ đề Call API lên Front-end 10 Code chức gợi ý ảnh theo chủ đề xem chi tiết ảnh 07/10/2020 – 07/10/2020 07/10/2020 – 07/10/2020 08/10/2020 – 20/10/2020 Call API lên Front-end 11 Code chức thêm,sửa,xoá thả cảm xúc ,bình luận cho ảnh 15/10/2020 – 21/10/2020 12 Code chức thêm,sửa,xố bình luận bình luận cha đồng thời thả cảm xúc 20/10/2020 – 21/10/2020 13 Code chức người dùng mơi đăng nhập vào u cầu chọn chủ đề u thích từ filter theo chủ đề chọn 18/10/2020 – 25/10/2020 14 Code chức chuyển đến chủ đề chọn click vào tag chi tiết hình 18/10/2020 – 18/10/2020 15 Code chức thay đổi thông tin dùng 19/10/2020 – 22/10/2020 16 Code chưc thị trạng thái người dùng online trực tuyến 22/10/2020 – 31/10/2020 17 Code chức chat user 31/10/2020 – 08/11/2020 18 Cải thiện chức chat thêm emoji 08/11/2020 – 10/11/2020 19 Báo cáo tiến độ 50% 11/11/2020 – 11/11/2020 20 Code chức đăng ảnh kèm chủ đề 11/11/2020 – 25/11/2020 21 Cải thiện chức đăng ảnh kèm caption 25/11/2020 – 27/11/2020 22 Cải thiện realtime lần chat user bình luận 28/11/2020 – 10/12/2020 23 Báo cáo tiến độ lần 2(Online) 24 Code chức cho admin 1/12/2020 – 10/12/2020 25 Kiểm thử chức năng,cải thiện số chức cịn thiếu sót 11/12/2020 – 15/12/2020 26 Nghiên cứu package kiểm soát nội dung ảnh đăng lên microsoft computer vison 15/12/2020 -20/12/2020 27 Tổng hợp,bổ sung nội dung báo cáo 15/12/2020 – 22/12/2020 29/11/2020 – 29/11/2020 28 Tiếp tục bổ sung liệu,sửa đổi fixbug 15/12/2020 – 25/12/2020 29 Báo cáo tiến độ lần 20/12/2020 – 20/12/2020 DANH MỤC HÌNH ẢNH Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 3.1 Trang facekbook 16 3.2 Trang Instagram 17 3.3 Trang pinterest 18 3.4 Use case tìm kiếm ảnh “Search Image” 22 3.5 Use case chọn topic hình yêu thích vừa tạo tài khoản 24 3.6 Use case xem hình thơng tin chi tiết hình 25 3.7 Use case xem bình lận lượt thích 27 3.8 Use case chức bình luận/thả cảm xúc cho hình ảnh 28 3.9 Use case trả lời bình luận 30 3.10 Use case đăng/xóa/sửa ảnh 32 3.11 Use case tìm kiếm hình ảnh chủ đề 33 3.12 Use case tải hình với nhiều kích thước 34 3.13 Use case xem thông tin cá nhân 35 3.14 Use case Chat 36 3.15 Use case nhận thông báo 37 3.16 Use case xem trang cá nhân 38 3.17 Use case đăng kí/đăng nhập 39 3.18 Use case chức admin 40 4.1 Sơ đồ ERD sở liệu 42 4.2 Sequence tìm kiếm theo chủ đề 47 4.3 Sequence tìm kiếm theo nhiều chủ đề 48 4.4 Sequence chọn chủ đè ảnh vừa đăng nhập 49 4.5 Sequence xem danh sách ảnh theo chủ đề chọn 50 4.6 Sequence xem chi tiết ảnh 51 4.7 Sequence hiển thị bình luận,reaction post 52 4.8 Sequence cập nhật bình luận reaction 53 4.9 Sequence xóa bình luận reaction 54 4.10 Sequence thêm bình luận reaction 55 4.11 Sequence cập nhật bình luận 56 4.12 Sequence xóa bình luận 57 4.13 Sequence thêm bình luận 58 4.14 Sequence tạo post 59 4.15 Sequence xóa post 60 4.16 Sequence cập nhật post 61 4.17 Sequence tìm kiếm ảnh theo chủ đề click vào tag post 62 4.18 Sequence tải ảnh với nhiều kích thước khác 63 4.19 Sequence xem ảnh đại diên người dùng 64 4.20 Sequence xem thông tin chi tiết người dùng 65 Báo cáo đồ án tốt nghiệp 4.3.1.12 Chat Window Screen Hình 4.44 Chat window screen No Name Required Type Tên ảnh đại diện người dùng Component Trạng thái nhập bạn bè Component Ô nhập tin nhắn Input Tin nhắn gửi Component Tin nhắn bạn bè Component Reference Note Khi người khác nhập tin nhắn người nhận component Bảng 38 Chat window screen CHƯƠNG THIẾT KẾ ỨNG DỤNG Trang 90 Báo cáo đồ án tốt nghiệp 4.3.1.13 Minimized Chat Hình 4.45 Minimied Chat No Name Required Cửa sổ caht sau thu nhỏ Type Button Reference Note Khi click hiển thị thành cửa sổ chat Bảng 39 Minimied Chat CHƯƠNG THIẾT KẾ ỨNG DỤNG Trang 91 Báo cáo đồ án tốt nghiệp 4.3.1.14 Notifications Screen Hình 4.46 Notification screen No Name Required Một thông báo Type Button Reference Note Khi click vào điều hướng đến viết vừa tương tác Bảng 40 Notification screen CHƯƠNG THIẾT KẾ ỨNG DỤNG Trang 92 Báo cáo đồ án tốt nghiệp 4.3.1.15 Profile Screen Hình 4.47 Profile screen No Name Required Type Ảnh đại diện Button Ảnh bìa Image Ảnh đăng người dùng Component Các tab menu Component Reference Note Khi click vào menu cho phép người dùng đổi ảnh đại diện Bảng 41 Profile screen CHƯƠNG THIẾT KẾ ỨNG DỤNG Trang 93 Báo cáo đồ án tốt nghiệp 4.3.1.16 Personal Information Screen Hình 4.48 Personal Information Screen No Name Required Thông tin cá nhân Các nút edit thông tin cá nhân Type Reference Note Component Button Click vào để edit thơng tin Bảng 42 Personal Information Screen CHƯƠNG THIẾT KẾ ỨNG DỤNG Trang 94 Báo cáo đồ án tốt nghiệp CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 5.1 Cài đặt ứng dụng v Máy phải có cài đặt npm với node js Các bước cài đặt : Ở hướng dẫn này,nhóm sử dụng IDE Visual Studio Code Bước : Clone dowload project nhóm từ link gitlab : https://gitlab.com/TaiNgo/pitogram Bước : Một thư mục có tên ‘‘pitogram’’ xuất sau việc clone dowload từ gitlab hoàn tất Tiến hành vào thư mục ‘‘pitogram’’ Hình 5.1 Hình folder project pitogram Bước : Sau mở thư mục Visual studio code,thì có folder :pback pfront CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Trang 97 Báo cáo đồ án tốt nghiệp Hình 5.2 Hình folder back fornt end Bước : Trỏ đến thư mục pback pfront câu lệnh Terminal với folder pback cd pback , pfront cd pfront Sau đó, tiên hành install package dùng folder Ta sử dụng câu lệnh npm i để install package cho folder CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Trang 98 Báo cáo đồ án tốt nghiệp Hình 5.3 Hình install project Bước : Sau việc install hoàn tất Với folder pback ta sử dụng câu lệnh : npm run start :dev để run phía backend Folder pfront sử dụng câu lệnh : npm run dev để run phía frontend Hình 5.4 Hình run project CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Trang 99 Báo cáo đồ án tốt nghiệp Sau giao diện khởi chạy http://locahost :3000 5.2 Kiểm thử ứng dụng 5.2.1 Chức đăng kí Test Case ID Description SignUp_001 Đăng ký tài khoản user Test steps Nhập thông tin yêu cầu hình: Email, Giới tính,Tên đầy đủ, Mật xác nhận mật Expected Output Result Đăng ký thành công tự động đăng nhập vào hệ thống Pass Nhấn nút Đăng ký SignUp_002 Kiểm tra bỏ trống số trường biểu mẫu Bỏ trống trường đánh dấu nhấn Đăng ký Yêu cầu nhập lại thông tin đầy đủ tương ứng với trường Pass SignUp_003 Kiểm tra nhập email tồn hệ thống Nhập thông tin yêu cầu nhập email tồn hệ thống Hệ thống khơng cho tạo tài khoản email tồn yêu cầu phải nhập lại Pass Nhấn nút Đăng ký Bảng 43 Test case chức đăng kí CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Trang 100 Báo cáo đồ án tốt nghiệp 5.2.2 Chức đăng nhập Test Case ID Description SignIn _001 Kiểm tra việc đăng nhập chưa có tài khoản SignIn _002 SignIn _003 Đăng nhập tài khoản user Đăng nhập tài khoản admin Test steps Expected Output Result Nhập tên đăng nhập mật chưa đăng kí hệ thống Hiện thơng báo “Tài khoản email mật khơng xác!” Pass Nhập email password tài khoản user Đăng nhập thành công hệ thống chuyển sang trang HomePage Pass Nhấn nút Đăng nhập Đăng nhập thất bại show lỗi hình trang yêu cầu nhập lại Nhập email password tài khoản admin Đăng nhập thành công hệ thống chuyển sang trang quản lý admin Nhấn nút đăng nhập Nhấn nút Sign In Pass Đăng nhập thất bại reload trang yêu cầu nhập lại Bảng 44 Test case chức đăng nhập CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Trang 101 Báo cáo đồ án tốt nghiệp 5.2.3 Chức tìm kiếm Test Case ID Description Test steps SearchTag_001 Kiểm tra việc nhập có tag hệ thống có filter liệu không Nhập tag SearchTag_002 Kiểm tra việc nhập có đại chuỗi kí tự có filter liệu khơng Nhập chuỗi Nhấn nút search Expected Output Result Lọc danh sách theo tag Pass Khơng có liệu lọc Pass Nhấn nút search Bảng 45 Test case chức tìm kiếm 5.2.4 Chức thông báo tương tác Test Case ID Test steps Description Expected Output Result Notification_001 Kiểm tra nhập bình luận vào post chủ post có notification khơng Nhập bình Chủ post nhận Pass luận vào thông báo có post người bình luận post Nhấn nút search Notification_002 Kiểm tra thả cảm xúc vào post chủ post có notification không Thả reaction vào post Nhấn nút search Chủ post nhận thông báo có người thả reaction post Pass Bảng 46: Test case chức thông báo tương tác CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Trang 102 Báo cáo đồ án tốt nghiệp 5.2.5 Chức kiểm sốt nơi dụng ảnh post lên Test Case ID Test steps Description Expected Output Result CheckImage_001 Đăng ảnh Kiểm tra ảnh với nội dung ví đăng lên có hợp dụ chó lệ hay không Nhấn nút đăng Tấm ảnh đăng thành công Pass CheckImage_002 Đăng ảnh Kiểm tra ảnh với nội dung đồ đăng lên có hợp truỵ lệ hay khơng Nhấn nút đăng Tẩm ảnh không dược Pass đăng lên website nội dung khơng hợp lệ Bảng 47: Test case chức kiểm soát nội dung ảnh post lên CHƯƠNG CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG Trang 103 Báo cáo đồ án tốt nghiệp KẾT LUẬN 6.1 Kết đạt - Kỹ làm việc nhóm, tiếp thu ý kiến nhau, kỹ giao tiếp tốt - Kỹ search tài liệu, tìm kiếm hướng giải cho vấn đề trình xây dựng đồ án - Học hỏi, trao dồi thêm kiến thức từ cơng nghệ áp dụng q tình xây dựng đồ án - Xây dựng web mạng xã hội ảnh phục vụ cho nhu cầu xã hội - Xây dựng web dạng SPA (Sigle Page Application ) ReactJS - Tích hợp Microsoft Computer Vision vào website 6.2 Ưu điểm nhược điểm 6.2.1 Ưu điểm - Website thiết kế với giao diện dễ nhìn, thân thiện với người dùng - Website có đầy đủ chức trang mạng xã hội - Có chức chat với emoji user phần bình luận ảnh giúp người dùng cảm thấy thích thú việc sử dụng website điều giúp tăng lượt sử dụng website lên - Ràng buộc nội dung ảnh đăng lên website, tránh tình trạng đăng ảnh đồ truỵ,văn hóa phẩm Microsoft Computer Vision - Tự động phân loại nội dung ảnh theo chủ đề - TÌm kiếm ảnh, lọc ảnh theo chủ đề ưa thích người dùng 6.2.2 Nhược điểm - Do việc xử lí chức năng,nghiệp vụ kinh nghiệm nên số chức chưa hoàn thiện việc gợi ý kết bạn user - Chưa tích hợp quảng cáo Google vào hệ thống - Về phần admin chưa hoàn thiện nhiều chức để quản lí chặt chẻ người dùng việc post ảnh lên website CHƯƠNG KẾT LUẬN Trang 103 Báo cáo đồ án tốt nghiệp 6.2.3 Khó khăn 6.2.3.1 Chức STT Khó khăn Khắc phục Chức theo dõi người dùng Hiện chưa thể khắc phục 6.2.3.2 Quy trình thực STT Khó khăn Khắc phục Việc commit branch lên gitlab ban đầu conflict branch Sử dụng teamview,chat để thống cách merge ,pull request để thực trơn tru Do nằm thời gian dịch bệnh bùng phát nên khó khăn việc làm việc nhóm Sử dụng cơng cụ mạng xã hội teamview để trao đổi thông tin 6.3 Kinh nghiệm đạt Học làm việc teamwork thao tác với qua teamview,facebook hỗ trỡ,học hỏi nhiều từ việc làm việc với git người với áp dụng tốt công việc với dự án nhiều người Được tiếp xúc,học hỏi thêm công nghệ hổ trợ cho dự án sau 6.4 Hướng phát triển cho tương lai Khắc phục,cải thiện chức chưa hoàn thiện để cải thiện website,thân thiện với người dùng Tích hợp số hệ thống khác vào hệ thống chạy quảng cáo,livestream, CHƯƠNG KẾT LUẬN Trang 104 Báo cáo đồ án tốt nghiệp TÀI LIỆU THAM KHẢO https://reactjs.org/ https://nestjs.com/ https://docs.mongodb.com/ https://ant.design/ https://graphql.org/ https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/ TÀI LIỆU THAM KHẢO Trang 105 ... MỤC HÌNH ẢNH Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình. .. người dùng 65 Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình Hình 4.21 Sequence... quanh ảnh đẹp để người dù xa lạ trở thành người bạn đề tài thực tiễn, nhóm tụi em thử sức xây dựng trang web mạng xã hội hình ảnh 1.2 Mục đích đề tài Đề tài “XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ HÌNH ẢNH