(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh(Đồ án tốt nghiệp) Xây dựng Website mạng xã hội về hình ảnh
TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ HÌNH ẢNH SVTH : PHẠM PHƯỚC ĐẶNG TOÀN MSSV : 16110227 SVTH : NGƠ THANH TÀI MSSV : 16110201 Khố: 16 Ngành: CÔNG NGHỆ THÔNG TIN GVHD: TS LÊ VĨNH THỊNH Tp Hồ Chí Minh, ngày 12 tháng 10 năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO ĐỒ ÁN TỐT NGHIỆP XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ HÌNH ẢNH SVTH : PHẠM PHƯỚC ĐẶNG TOÀN MSSV : 16110227 SVTH : NGƠ THANH TÀI MSSV : 16110201 Khố: 16 Ngành: CÔNG NGHỆ THÔNG TIN GVHD: TS LÊ VĨNH THỊNH Tp Hồ Chí Minh, ngày 12 tháng 10 năm 2020 LỜI CẢM ƠN Lời đầu tiên, cho phép nhóm em gửi lời cảm ơn chân thành đến thầy Lê Vĩnh Thịnh, người phụ trách hướng dẫn nhóm chúng em việc thực hoàn thành báo cáo cách tốt hiệu Những dạy, nhật xét, đóng góp ý kiến từ thầy góp phần quan trọng việc giúp chúng em hoàn hành đề tài cách hoàn thiện Cảm ơn thầy cô khoa Công Nghệ Thơng Tin ln nhiệt tình, cống hiến, tận tình giải đáp thắc mắc chúng em Bên cạnh đó, chúng em xin cảm ơn bạn khóa, anh chị khóa khơng ngần ngại chia sẻ thơng tin, kinh nghiệm bổ ích giúp chúng em hồn thiện đề tài Báo cáo thực khoảng thời gian có hạn, với hạn chế mặt kiến thức nên việc sai sót điều khơng thể tránh khỏi q trình thực Chúng em kính mong nhận lời nhận xét, ý kiến đóng góp quý báo từ q Thầy Cơ để chúng em có thêm kinh nghiệm hoàn thành tốt đề tài sau Chúng em xin chân thành cảm ơn ! 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 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