ĐỒ á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 MSSV 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 Phân công Đánh giá 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 Hình 1-1: Mô hình thác nước cải tiến 22 Hình 2-1: Giao diện hình đăng nhập 25 Hình 2-2: Giao diện hình đăng ký 26 Hình 2-3: Giao diện hình trang cá nhân 26 Hình 2-4: Giao diện hình Facebook .27 Hình 2-5: Giao diện menu / tin nhắn / thông báo 27 Hình 2-6: Giao diện trang chủ instagram 29 Hình 2-7: Giao diện trang cá nhân instagram 29 Hình 2-8: Giao diện hình chat instagram 30 Hình 3-1: Mô hình kiến trúc hệ thống 36 Hình 3-2: Sơ đồ Usecase tổng quát 39 Hình 3-3: Sơ đồ Usecase quản lý người dùng 43 Hình 3-4: Sơ đồ Usecase quản lý bài đăng 48 Hình 3-5: Sơ đồ Usecase quản lý tin nhắn .58 6|Page IE213 – Kỹ thuật phát triển hệ thống Web Hình 4-1: Sơ đồ lớp tổng thể 80 Hình 4-2: Các lớp chính 82 Hình 4-3: Cơ sở dữ liệu 83 Hình 4-4 Sơ đồ liên kết các màn hình 87 Hình 4-5: Thanh header 88 Hình 4-6: Thanh tìm kiếm .90 Hình 4-7: Thêm bài viết 91 Hình 4-8: Giao diện sau chọn ảnh 92 Hình 4-9: User navigation .93 Hình 4-10: Trang đăng nhập 94 Hình 4-11: Trang đăng ký 96 Hình 4-13: Bài viết 99 Hình 4-14: Trang tin nhắn 100 Hình 4-16: Giao diện cài đặt cuộc trò chuyện nhóm 102 Hình 4-17: Popup cài đặt thành viên 104 7|Page IE213 – Kỹ thuật phát triển hệ thống Web Hình 4-18: Trang cá nhân 105 Hình 4-19: Popup followers 107 Hình 4-20: Popup xác nhận 108 Hình 4-21: Popup following 109 Hình 4-22: Popup xác nhận 110 Hình 4-23: Trang cài đặt người dùng 111 Hình 6-1: Quá trình làm việc Trello 118 Hình 6-2: Giao diện quản lý source code Backend Github 119 Hình 6-3: Giao diện quản lý source code Frontend Github 119 Hình 6-4: Giao diện thiết kế giao diện Figma .120 Hình 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 BẢNG Bảng 3-1: Bảng chú giải sơ đồ Usecase 37 Bảng 3-2: Bảng mô tả Actors 38 Bảng 3-3: Bảng mô tả Usecase 39 Bảng 3-4: Danh sách yêu cầu tiện dụng 75 Bảng 3-5: Danh sách yêu cầu hiệu quả 76 Bảng 4-1: Collection USER 83 Bảng 4-2: Collection POST 84 Bảng 4-3: Collection COMMENT 85 Bảng 4-4: Collection CONVERSATION 85 Bảng 4-5: Collection MESSAGE 86 Bảng 4-6: Collection NOTIFICATION 86 Bảng 4-7: Danh sách màng hình chính 88 Bảng 4-8: Mô tả thành phần header .88 Bảng 4-9: Mô tả thành phần tìm kiếm 90 9|Page IE213 – Kỹ thuật phát triển hệ thống Web Bảng 4-10: Mô tả thành phần thêm bài viết mới 91 Bảng 4-11: Mô tả thành phần thêm bài viết 92 Bảng 4-12: Mô tả thành phần trang chủ 93 Bảng 4-13: Mô tả thành phần trang đăng nhập .94 Bảng 4-14: Mô tả thành phần trang đăng ký 96 Bảng 4-15: Mô tả thành phần bản tin .98 Bảng 4-16: Mô tả thành phần bài viết 100 Bảng 4-17: Mô tả thành phần trang tin nhắn 100 Bảng 4-19: Mô tả thành phần cài đặt cuộc trò chuyện nhóm .102 Bảng 4-20: Mô tả thành phần Popup xóa thành viên 104 Bảng 4-21: Mô tả thành phần trang cá nhân 105 Bảng 4-22: Mô tả thành phần Popup followers 107 Bảng 4-23: Mô tả thành phần Popup xác nhận 108 Bảng 4-24: Mô tả thành phần Popup following 108 Bảng 4-25: Mô tả thành phần Popup xác nhận 109 10 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web 4.2.8 Trang cài đặt 4.2.8.1 Giao diện trang cài đặt tài khoản Hình 4-35: Trang cài đặt người dùng Mô tả chi tiết thành phần giao diện: Bảng 4-30: Mô tả thành phần trang cài đặt người dùng STT Tên listSettings Kiểu List View Chức Danh sách tên của các trường cài đặt tài khoản người dùng listAccountI List View Các thông tin của tài khoản nfo 112 | P a g e IE213 – Kỹ thuật phát triển hệ thống Web lblUsername Label Tên của tài khoản btnChangeA Button Đổi ảnh đại diện của tài khoản TextBox Nhập thông tin người dùng vatar 5, 6, 7, 8, txtAccountI 9, 10 nfo 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 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ệ, 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 chức Mức độ Ghi hoàn thành Quản lý user 90% Hoàn thành Đăng ký, Đăng nhập, có sử dụng JWT Token, Redux Persist,… Cho phép người dùng thay đổi thông tin cá nhân, hình đại diện,… Chưa xác thực thơng tin người dùng Quản lý post 80% Hoàn thành chức năng: Đăng post, like post, bình luận post, gửi post dạng tin nhắn cho bạn bè, sửa post, xóa post,… Quản lý tin nhắn 95% Hồn thành chức năng: tạo trò chuyện, thêm thành viên, rời trị chuyện, gửi tin nhắn, xóa tin nhắn, chuyển tiếp tin nhắn, thả tim tin nhắn, gửi hình ảnh, video, emoji,… Tính video call chưa hồn chỉnh Quản lý follow 100% Hoàn thành chức năng: follow, unfollow người dùng, danh sách following/followers,… Quản lý thơng báo 95% Hồn thành chức năng: thơng báo realtime, lưu trữ thông báo database, di chuyển đến post/trang 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 Q 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 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 đă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 tính bảo mật và quyền riêng tư của người dùng - Thêm chức đăng tải video, gắn thẻ người dùng khác vào bài viết, lưu bài 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 ... í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... 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ã. .. IE213 – Kỹ thuật phát triển hệ thống Web - Tìm kiếm khám phá nhiều nội dung từ cộng đồng: Instagram ứng dụng mạng xã hội phát triển rộng rãi tồn giới Vì vậy, ứng dụng mạng xã hội khác, bạn dễ