ĐỒ án môn PHÁT TRIỂN hệ THỐNG WEB xây DỰNG WEBSITE MẠNG xã hội

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN XÂY DỰNG WEBSITE MẠNG XÃ HỘI ĐỒ ÁN MÔN PHÁT TRIỂN HỆ THỐNG WEB GVHD: Ths Võ Tấn Khoa Sinh viên thực hiện: - Nguyễn Hữu Khang - 19521665 - Phạm Hoàng Khang – 19521668 - Ngô Gia Thái – 19522187 - Trần Thị Thanh Tuyền – 19522503 - Võ Đoàn Kim Như – 19521972 - Lâm Trường Sơn – 19522133 □□ Tp Hồ Chí Minh, 03/2022 □□ IE213 – Kỹ thuật phát triển hệ thống Web NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2022 2|Page IE213 – Kỹ thuật phát triển hệ thống Web Người nhận xét (Ký tên ghi rõ họ tên) 3|Page IE213 – Kỹ thuật phát triển hệ thống Web BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN Họ tên Nguyễn Hữu Khang Phạm Hồng Khang Ngơ Gia Thái Trần Thị Thanh Tuyền Võ Đoàn Kim Như Lâm Trường Sơn 4|Page IE213 – Kỹ thuật phát triển hệ thống Web LỜI MỞ ĐẦU Những năm gần đây, mạng xã hội có bước phát triển mạnh mẽ, tác động lớn đến đờờ̀i sống xã hội hầu hết quốc gia giới, có Việt Nam Mạng xã hội trở thành thuật ngữ phổ biến với tính đa dạng cho phép ngườờ̀i dùng kết nối, chia sẻ, tiếp nhận thông tin cách nhanh chóng, hiệu Ngày nay, với điện thoại thông minh, máy tính bảng hay máy tính cá nhân có kết nối internet tham gia vào mạng xã hội Với nội dung phong phú cách thức sử dụng dễ dàng, mạng xã hội mang lại nhiều tiện ích bật: (1) Góp phần củng cố niềm tin quần chúng nhân dân lãnh đạo Đảng, Nhà nước điều hành Chính phủ, (2) Góp phần tích cực vào phát triển nhận thức, tư kỹ sống cong ngườờ̀i, (3) Góp phần tích cực vào phát triển văn hóa cộng đồng, (4) Góp phần thúc đẩy trình hội nhập quốc tế lĩnh vực văn hóa Việt Nam,… Vì tiện ích bật phổ biến mạng xã hội nhu cầu ngườờ̀i dùng việc sử dụng mạng xã hội, nhóm chúng em định chọn đề tài “Xây dựng website mạng xã hội” 5|Page IE213 – Kỹ thuật phát triển hệ thống Web DANH MỤC HÌNH Hinh 1-1: Mô hinh thac nươc cai tiên 22 Hinh 2-1: Giao diện hình đăng nhập 25 Hinh 2-2: Giao diện hình đăng ký 26 Hinh 2-3: Giao diện hình trang cá nhân 26 Hinh 2-4: Giao diện hình Facebook 27 Hinh 2-5: Giao diện menu / tin nhắn / thông báo 27 Hinh 2-6: Giao diện trang chủ instagram 29 Hinh 2-7: Giao diện trang cá nhân instagram 29 Hinh 2-8: Giao diện hình chat instagram 30 Hinh 3-1: Mô hinh kiên truc thông 36 Hinh 3-2: Sơ đô Usecase tông quat 39 Hinh 3-3: Sơ đô Usecase quan ly người dung 43 Hinh 3-4: Sơ đô Usecase quan ly bai đăng 48 Hinh 3-5: Sơ đô Usecase quan ly tin nhăn 58 6|Page IE213 – Kỹ thuật phát triển hệ thống Web Hinh 4-1: Sơ đô lơp tông thê 80 Hinh 4-2: Cac lơp chinh 82 Hinh 4-3: Cơ sơ dư liêu 83 Hinh 4-4 Sơ đô liên kêt cac man hinh 87 Hinh 4-5: Thanh header 88 Hinh 4-6: Thanh tim kiêm 90 Hinh 4-7: Thêm bai viêt 91 Hinh 4-8: Giao diên sau chon anh 92 Hinh 4-9: User navigation 93 Hinh 4-10: Trang đăng nhâp 94 Hinh 4-11: Trang đăng ky 96 Hinh 4-13: Bai viêt 99 Hinh 4-14: Trang tin nhăn 100 Hinh 4-16: Giao diên cai đặt cuôc trò chuyên nhom 102 Hinh 4-17: Popup cai đặt viên 104 7|Page IE213 – Kỹ thuật phát triển hệ thống Web Hinh 4-18: Trang ca nhân 105 Hinh 4-19: Popup followers 107 Hinh 4-20: Popup xac nhân 108 Hinh 4-21: Popup following 109 Hinh 4-22: Popup xac nhân 110 Hinh 4-23: Trang cai đặt người dung 111 Hinh 6-1: Quá trình làm việc Trello 118 Hinh 6-2: Giao diện quản lý source code Backend Github 119 Hinh 6-3: Giao diện quản lý source code Frontend Github 119 Hinh 6-4: Giao diện thiết kế giao diện Figma 120 Hinh 6-5: Giao diện quản lý hình ảnh trang web 121 8|Page IE213 – Kỹ thuật phát triển hệ thống Web DANH MỤC BANG Bang 3-1: Bang chu giai sơ đô Usecase 37 Bang 3-2: Bang mô ta Actors 38 Bang 3-3: Bang mô ta Usecase 39 Bang 3-4: Danh sach yêu câu tiên dung 75 Bang 3-5: Danh sach yêu câu hiêu qua 76 Bang 4-1: Collection USER 83 Bang 4-2: Collection POST 84 Bang 4-3: Collection COMMENT 85 Bang 4-4: Collection CONVERSATION 85 Bang 4-5: Collection MESSAGE 86 Bang 4-6: Collection NOTIFICATION 86 Bang 4-7: Danh sach mang hinh chinh 88 Bang 4-8: Mô ta phân header 88 Bang 4-9: Mô ta phân tim kiêm 90 9|Page IE213 – Kỹ thuật phát triển hệ thống Web Bang 4-10: Mô ta phân thêm bai viêt mơi 91 Bang 4-11: Mô ta phân thêm bai viêt 92 Bang 4-12: Mô ta phân trang chu 93 Bang 4-13: Mô ta phân trang đăng nhâp 94 Bang 4-14: Mô ta phân trang đăng ky 96 Bang 4-15: Mô ta phân ban tin 98 Bang 4-16: Mô ta phân bai viêt 100 Bang 4-17: Mô ta phân trang tin nhăn .100 Bang 4-19: Mô ta phân cai đặt cuôc trò chuyên nhom 102 Bang 4-20: Mô ta phân Popup xoa viên 104 Bang 4-21: Mô ta phân trang ca nhân 105 Bang 4-22: Mô ta phân Popup followers 107 Bang 4-23: Mô ta phân Popup xac nhân 108 Bang 4-24: Mô ta phân Popup following 108 Bang 4-25: Mô ta phân Popup xac nhân 109 10 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web 4.2.8 Trang cai đặt 4.2.8.1 Giao diên trang cai đặt tai khoản Hình 4-35: Trang cai đặt người dùng Mô tả chi tiết thành phần giao diện: 112 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web 5, 6, 7, 8, 9, 10 113 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web CHƯƠNG 5: HIỆN THỰC 5.1 Các công nghệ sử dụng 5.1.1 Front-end HTML5: HTML (viết tắt từ Hypertext Markup Language, "Ngôn ngữ Đánh dấu Siêu văn bản") ngôn ngữ đánh dấu thiết kế để tạo nên trang web World Wide Web Nó trợ giúp công nghệ CSS ngôn ngữ kịch giống JavaScript Các trình duyệt web nhận tài liệu HTML từ web server hoặặ̣c kho lưu trữ cục render tài liệu thành trang web đa phương tiện HTML mô tả cấu trúc trang web vê mặặ̣t ngữ nghĩa dấu hiệu ban đầu bao gồm cho xuất tài liệu CSS3: CSS chữ viết tắt Cascading Style Sheets, ngơn ngữ sử dụng để tìm định dạng lại phần tử tạo ngôn ngữ đánh dấu (HTML) CSS giúp thêm style vào phần tử HTML đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc,… Javascript: JavaScript ngơn ngữ lập trình website, tích hợp nhúng HTML giúp website sống động JavaScript cho phép kiểm soát hành vi trang web tốt so với sử dụng HTML Vậy ứng dụng thực tiễn JavaScript gì? Các slideshow, pop-up quảng cáo tính autocomplete Google ví dụ dễ thấy cho bạn, chúng đêu viết JavaScript ReactJS: ReactJS thư viện Javascript dùng để xây dựng giao diện ngườờ̀i dùng Được tạo Facebook, React ngày sử dụng rộng rãi, đặặ̣c biệt 114 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web trang web đòờ̀i hỏi yêu cầu cao vê giao diện với khả bật nhanh, dễ học, code ngắn tái sử dụng tốt 5.1.2 Back-end NodeJS –ExpressJS: NodeJS nên tảng mã nguồn mở chạy server-side Networking applications Được viết ngôn ngữ JavaScript chạy hệ điêu hành Mac OS X, Windows, Linux, FreeBSD, IBM i Node JS cung cấp kiến trúc event-driven architecture non-blocking I/O API băng thơng ứng dụng có khả mở rộng Node JS cho phép tạo máy chủ web công cụ sử dụng ngôn ngữ JavaScript module Các module NodeJS giúp việc viết code đơn giản hơn, giảm độ phức tạp cho việc viết ứng dụng server Sử dụng Google V8 JavaScript engine để chạy code có lượng lớn module viết Javascript Node JS chạy Server Apache IIS Đặặ̣c biệt Node JS chọn làm nên tảng phát triển Microsoft, Yahoo, Walmart, Groupon, SAP, LinkedIn, Rakuten, Paypal, Voxer GoDaddy Áp dụng cho sản phâm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi công nghệ, hoặặ̣c tạo dự án Startup nhanh Cung cấp thư viện cần thiết Express, Mongoose, Body-parser, ejs, Multer, … Express giúp tương tác Server Client Multer giúp upload lưu file (Ảnh, video, …) Socket.io: thư viện JavaScript hướng kiện cho ứng dụng web thờờ̀i gian thực Nó cho phép giao tiếp hai chiều máy khách máy chủ web Bao gồm hai phần: thư viện phía máy khách (socket.io-client) chạy trình duyệt thư viện phía máy chủ (socket.io) cho Node.js 115 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web 5.1.3 Database MongoDB: hệ quản trị sở liệu NoSQL mã nguồn mở đa tảng viết C++ Bản ghi MongoDB lưu trữ dạng liệu văn (Document), cấu trúc liệu bao gồm cặặ̣p giá trị trườờ̀ng tương tự đối tượng JSON MongoDB phát triển MongoDB Inc dạng giấy phép Server Side Public License (SSPL) Mongoose: framework JavaScript thườờ̀ng sử dụng ứng dụng Node.js với database MongoDB 5.2 Cài đặặ̣t kiểm thử 116 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web STT Nhóm Quản Quản Quản Quản Quản 117 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web cá nhân nhấn vào thông báo, đánh dấu thông báo chưa xem/đã xem, thị số lượng thông báo mới… Chưa có popup thị nội dung thơng báo Quản lý comment post 118 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web CHƯƠNG 6: ĐÁNH GIÁ VÀ KẾT LUẬN 6.1 Nhận xét 6.1.1 Quá trình làm việc Sử dụng công cụ: - Công cụ quản lý dự án: Trello Hình 6-36: Quá trìì̀nh làm việc ởở̉ Trello (Link: https://trello.com/b/dPh39FfG/ie213) - Công cụ quản lý dự án phiên code: Github 119 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web Hình 6-37: Giao diện quảở̉n lý source code Backend Github (Link: https://github.com/sonlam137216/SocialNetwork_BE) Hình 6-38: Giao diện quảở̉n lý source code Frontend Github (Link: https://github.com/giathai1505/SocialMediaWebSite) 120 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web - Công cụ thiết kế giao diện: Figma Hình 6-39: Giao diện thiếế́t kếế́ giao diện Figma (Link: https://www.figma.com/proto/I66ZPLX5xD1gkOZrKEUjpO/ig) - Cơng cụ quản lý hình ảnh: Cloudinary 121 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web Hình 6-40: Giao diện quảở̉n lý hìì̀nh ảở̉nh trang web 6.1.2 Kết đạt Xây dựng phần mêm thỏa mãn số yêu cầu biểu mẫu đề ban đầu Hiểu vận dụng kiến thức học lớp vê quy trình phát triển phần mềm, kiến thức lập trình từ CSDL Nosql (MongoDB), Backend (Express NodeJS), Frontend (ReactJS) đến kiến thức khác cách deploy web lên Heroku, Netify… Biết cách sử dụng số công cụ, phần mêm phục vụ cho việc lập trình, làm việc chung Trello, Github, Figma, Cloudinary Các thành viên nhóm có hội học tập, làm việc chung nhiêu Biết cách phối hợp làm việc nhóm sử dụng công cụ để làm việc từ xa 122 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web 6.1.3 Ưu điểm Về việc tổ chức quản lý nhóm: - Các thành viên tích cực tham gia đóng góp ý kiến trao đổi q trình thực đồ án - Nhóm hỗ trợ tốt, thành viên sẵẵ̃n sàng hướng dẫn để tiến - Việc quản lý công việc nhóm thực cách dễ dàng sử dụng công cụ Trello - Công việc phân chia phù hợp với định hướng thành viên Về sản phẩm: - Phần mềm xây dựng đáp ứng yêu cầu trang mạng xã hội, thỏa mãn yêu cầu biểu mẫu trình bày - Giao diện trực quan, dễ sử dụng với hầu hết phận ngườờ̀i dùng - Có số hiệu ứng đáp ứng trải nghiệm sử dụng cho ngườờ̀i dùng - Hệ thống cần đăng nhập trước sử dụng, đồng thờờ̀i mật mã hóa q trình đăng nhập lưu xuống sở liệu, đảm bảo yêu cầu bảo mật cho ngườờ̀i dùng 6.1.4 Hạn chế Về việc tổ chức quản lý nhóm: - Nhóm bước đầu thực theo bước quy trình thác nước cải tiến, nhiên nhóm chưa hồn tồn ứng dụng thực theo mơ hình 123 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web Đơi thành viên chưa hồn thành công việc tiến độ lý khách - quan/chủ quan Đôi công việc phân chia khơng đồng đều, trình độ thành viên - chênh lệch Về sản phẩm: - Sản phẩm chưa thực responsive - Một số chức chưa hoàn thiện như: call, video call, report, … - Chưa có trang riêng/chức riêng cho admin - Chưa thực tối ưu source code chưa thực số bước sau xây dựng trang web seo,… 6.2 Hướng phát triển Do thờờ̀i gian thực đồ án có hạn, nhóm hồn thành kết trình bày Trong tương lai, nhóm đề số hướng phát triển để trang web tiếp tục trì hồn thiện ngày Dưới hướng phát triển nhóm chúng em: - Tối ưu giao diện cách thiết kế giao diện chuyên nghiệp thực responsive cho trang web - Thêm yếu tố tạo nên thương hiệu cá nhân cho trang web để đưa trang web vào dự án thực sống - Hoàn thiện chức call video - Thêm chức report ngườờ̀i dùng hoặặ̣c đăng không hợp lệ/vi phạm - Hoàn thiện, nâng cao chức xây dựng - Tối ưu source code để giảm thờờ̀i gian chờờ̀, từ nâng cao trải nghiệm sử dụng trang web ngườờ̀i dùng 124 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web - Nâng cao tinh bao mât va quyên riêng tư cua người dung - Thêm chưc đăng tai video, găn the người dung khac vao bai viêt, lưu bai viêt - Tiến hành phương pháp tối ưu hóa cơng cụ tìm kiếm để trang web có thứ hạng cao kết trả trình duyệt 125 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web TÀI LIỆU THAM KHẢO NodeJS Documentation Lấy từ https://nodejs.org/en/docs/ [truy cập lần cuối: 23/05/2022] ReactJS Documentation Lấy từ https://reactjs.org/docs/getting-started.html [truy cập lần cuối: 23/05/2022] Json Web Token Introduction Lấy từ https://jwt.io/introduction [truy cập lần cuối: 23/05/2022] Socket.IO Introduction Lấy từ https://socket.io/docs/v4/ [truy cập lần cuối: 23/05/2022] MongoDB Documentation Lấy từ https://www.mongodb.com/docs/ [truy cập lần cuối: 23/05/2022] Facebook Lấy từ https://www.facebook.com/ [truy cập lần cuối: 23/05/2022] Instagram Lấy từ https://www.instagram.com/ [truy cập lần cuối: 23/05/2022] 126 | P a g e ... bật phổ biến mạng xã hội nhu cầu ngườờ̀i dùng việc sử dụng mạng xã hội, nhóm chúng em định chọn đề tài ? ?Xây dựng website mạng xã hội? ?? 5|Page IE213 – Kỹ thuật phát triển hệ thống Web DANH MỤC... Kỹ thuật phát triển hệ thống Web LỜI MỞ ĐẦU Những năm gần đây, mạng xã hội có bước phát triển mạnh mẽ, tác động lớn đến đờờ̀i sống xã hội hầu hết quốc gia giới, có Việt Nam Mạng xã hội trở thành... internet Mạng xã hội phát triển có liên quan trực tiếp đến phát triển internet nên việc tìm hiểu thơng tin mạng cung cấp nhìn tổng quát hình thành, phát triển xu hướng mạng xã hội 2.2 Khảo sát mạng xã