Đồ án tìm hiểu về mô hình mern và xây dựng website mạng xã hội

ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ 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 BÁO CÁO CUỐI KÌ ĐỒ ÁN ĐỀ TÀI: TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Giảng viên hướng dẫn: ThS THÁI THỤY HÀN UYỂN Sinh viên thực hiện: VÕ TRUNG TÍN 19522353 NGUYỄN MINH THI 19522257  Tp Hồ Chí Minh, 6/2022  ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……., ngày…… tháng……năm 2022 Người nhận xét (Ký tên ghi rõ họ tên) ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI LỜI CẢM ƠN Trước vào nội dung phần báo cáo đồ án, lời nói chúng em xin chân thành gửi lời cảm ơn đến ThS THÁI THỤY HÀN UYỂN – Giảng viên môn ĐỒ ÁN – người truyền đạt kiến thức lớp, hướng dẫn cung cấp yêu cầu hướng người dùng dựa thực tế, tạo điều kiện cho chúng em thực đồng thời nhận xét, góp ý để đồ án chúng em trở nên hoàn thiện Đây lời góp ý vơ sâu sắc, khơng liên quan kiến thức mà yêu cầu thực tế mà ứng dụng mạng xã hội cần phải có để nhóm em hồn thiện đồ án tốt Những lời chia sẻ, hướng dẫn đầy nhiệt tình động lực quý báu để nhóm chúng em vượt qua khó khăn tìm hiểu thực đề tài, mơ hình MERN (bao gồm MongoDB, ExpressJS, ReactJS NodeJS) kiến thức mẻ tụi em trình tìm hiểu tích lũy kiến thức Đồng thời, nhóm chúng em muốn gửi lời cảm ơn sâu sắc đến người hỗ trợ chúng em trình thực đồ án này, không người bạn tạo điều kiện thuận lợi động viên chúng em nhiều, mà đặc biệt anh chị khoa Cơng Nghệ Phần Mềm góp ý, chia sẻ kinh nghiệm quý báu môn học kiến thức khác có liên quan Trong trình thực hiện, kiến thức kinh nghiệm cịn nhiều hạn chế, khó tránh khỏi sai sót Vì vậy, chúng em mong nhận lời góp ý q báu từ để nhóm chúng em ngày hồn thiện khơng đồ án tại, đồ án môn học tới, đồng thời hành trang góp phần hồn thiện thân chúng em tương lai Một lần xin chân thành cám ơn cơ! Nhóm thực Trường Đại học Cơng nghệ Thơng tin, tháng năm 2022 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI MỤC LỤC NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN LỜI CẢM ƠN MỤC LỤC CHƯƠNG I: GIỚI THIỆU CHUNG I ĐỀ TÀI: II LÝ DO CHỌN ĐỀ TÀI: III TÓM TẮT ĐỀ TÀI: IV MỤC TIÊU CỦA ĐỀ TÀI: V PHƯƠNG PHÁP NGHIÊN CỨU: VI Ý NGHĨA VÀ KẾT QUẢ CỦA HƯỚNG ĐỀ TÀI: 10 Về mặt sản phẩm: 10 Về mặt tài liệu: 10 CHƯƠNG II: CÔNG NGHỆ LIÊN QUAN 11 I TÌM HIỂU VỀ MONGODB: 11 NoSQL gì: 11 MongoDB gì: 12 Ưu điểm MongoDB: 12 Nhược điểm MongoDB: 13 II TÌM HIỂU VỀ EXPRESSJS: 14 ExpressJS gì: 14 Tại nên sử dụng ExpressJS lập trình web: 15 2.1 Sự phổ biến Javasript: 15 2.2 Hỗ trợ xây dựng website cách nhanh chóng: 15 2.3 ExpressJS hồn tồn miễn phí: 15 Những tính ExpressJS gì? 16 III TÌM HIỂU VỀ REACTJS: 16 ReactJS gì: 16 Các thành phần ReactJS: 17 Lợi ích sử dụng ReactJS: 17 IV TÌM HIỂU VỀ NODEJS: 18 NodeJS gì: 18 Một số ứng dụng NodeJS: 18 Ưu điểm NodeJS: 18 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Nhược điểm NodeJS: 19 CHƯƠNG III: MƠ HÌNH USE CASE 20 I SƠ ĐỒ USE CASE MỨC TỔNG QUÁT: 20 II DANH SÁCH CÁC USE CASE: 21 III ĐẶC TẢ USE CASE: 22 Use case Đăng ký: 22 Use case Gửi email xác nhận: 23 Use case Đăng nhập: 23 Use case Nhớ mật khẩu: 24 Use case Quên mật khẩu: 25 Use case Thay đổi mật khẩu: 26 Use case Đăng xuất: 26 Use case Xem thông tin cá nhân: 27 Use case Thay đổi thông tin cá nhân: 28 10 Use case Xem danh sách đăng cá nhân: 28 11 Use case Chỉnh sửa viết đăng: 29 12 Use case Xóa viết: 30 13 Use case Đăng viết mới: 30 14 Use case Tìm kiếm người dùng: 31 15 Use case Theo dõi người dùng: 31 16 Use case Xem viết: 32 17 Use case Thích viết: 33 18 Use case Xem bình luận: 33 19 Use case Thêm bình luận: 34 20 Use case Sửa bình luận: 34 21 Use case Thích bình luận: 35 22 Use case Xóa bình luận: 35 23 Use case Phản hồi bình luận: 36 24 Use case Trò chuyện: 36 25 Use case Nhắn tin: 37 26 Use case Call: 38 CHƯƠNG IV: PHÂN TÍCH HỆ THỐNG 39 I SƠ ĐỒ LỚP: 39 Sơ đồ lớp mức phân tích: 39 Danh sách lớp đối tượng: 39 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Mô tả lớp đối tượng: 40 3.1 Lớp Province: 40 3.2 Lớp District: 40 3.3 Lớp Ward: 40 3.4 Lớp Address: 40 3.5 Lớp Users: 40 3.6 Lớp Post: 41 3.7 Lớp Comment: 42 3.8 Lớp Conversation: 42 3.9 Lớp Message: 42 II SƠ ĐỒ TUẦN TỰ: 43 Đăng ký / Gửi email xác nhận / Đăng nhập/ Nhớ mật khẩu/ Quên mật khẩu/ Thay đổi mật khẩu/ Đăng xuất: 43 Xem thông tin cá nhân/Thay đổi thông tin cá nhân: 45 Xem danh sách đăng cá nhân / Chỉnh sửa viết đăng/ Xóa viết/ Đăng viết mới: 45 Tìm kiếm người dùng – Theo dõi người dùng/Bỏ theo dõi người dùng: 47 Xem viết – Thích viết/Bỏ thích viết – Xem bình luận – Sửa bình luận viết – Thích bình luận/Bỏ thích bình luận – Xóa bình luận: 47 Nhắn tin – Gọi thường/video: 49 CHƯƠNG V: THIẾT KẾ GIAO DIỆN 50 I MÀN HÌNH GIỚI THIỆU: 50 II CÁC MÀN HÌNH QUẢN TRỊ TRUY CẬP: 51 Màn hình Đăng ký 51 Popup Gửi Email xác thực – Email xác thực 51 Màn hình Đăng nhập: 52 Popup Quên mật – Email Reset Password: 53 Màn hình Thay đổi mật khẩu: 54 III CÁC MÀN HÌNH CHỨC NĂNG: 54 Màn hình Trang chủ: 54 Màn hình Profile: 55 Màn hình Thay đổi thông tin cá nhân: 56 Màn hình Chi tiết viết: 57 Popup Thêm viết mới: 57 Giao diện Tìm kiếm người dùng: 58 Giao diện Bình luận: 58 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Giao diện thông báo: 59 Màn hình Tin nhắn: 59 10 Màn hình Discover – Khám phá viết người dùng khác: 60 CHƯƠNG VI: TỔNG KẾT 61 I CÔNG NGHỆ SỬ DỤNG: 61 II ĐỘ HOÀN THIỆN CHỨC NĂNG: 61 III KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN: 62 Kết đạt được: 62 1.1 Ưu điểm: 62 1.2 Nhược điểm: 62 Hướng phát triển: 62 CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC 63 CHƯƠNG VIII: TÀI LIỆU THAM KHẢO 64 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI CHƯƠNG I: GIỚI THIỆU CHUNG I ĐỀ TÀI: - Cơng nghệ tìm hiểu: MERN (MongoDB, ExpressJS, ReactJS, NodeJS) - Ứng dụng xây dựng: Website Social Butterfly (Website mạng xã hội) II LÝ DO CHỌN ĐỀ TÀI: Những năm gần đây, mạng xã hội (MXH) 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 MXH 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 Nói chung, mạng xã hội ảnh hưởng lớn (cả tích cực tiêu cực) đến hoạt động sinh hoạt người, giới trẻ Với đặc điểm trội tính kết nối nhanh, chia sẻ rộng, cần điện thoại hay máy tính kết nối Internet, truy cập tham gia vào nhiều trang mạng như: Facebook, Zalo, Youtube, Twitter… đó, phổ biến Facebook Mặc dù mục đích, cách thức, mức độ tham gia trang mạng xã hội người khác có điểm chung xem phần khơng thể thiếu đời sống tinh thần người Đặc biệt, giai đoạn phịng chống dịch Covid-19 vơ căng thẳng khó khăn nay, đạo Nhà nước quy định giãn cách xã hội, hạn chế tụ tập đông người, hạn chế hoạt động giao tiếp ngày người với người với nhau, điều ảnh hưởng nhiều đến trải nghiệm người dùng nhu cầu ngày, có nhu cầu giao tiếp với người thân, bạn bè, bạn đồng nghiệp mối quan hệ khác Nhận thấy điều đó, với vị trí vai trị thời đại cơng nghệ 5.0, nhóm chúng em định làm WEBSITE MẠNG XÃ HỘI – SOCIAL BUTTERFLY để trở thành phương tiện kết nối từ xa hỗ trợ trình giao tiếp người với người Ứng dụng khơng đảm bảo an toàn sức khỏe cho người dùng mà cịn đáp ứng nhu cầu cần thiết q trình giao tiếp trị chuyện, chia sẻ trải nghiệm sống thông qua viết, tương tác trực tiếp qua gọi ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI III TÓM TẮT ĐỀ TÀI: Website mạng xã hội cầu nối hỗ trợ việc giao tiếp người với người nhiều hình thức đa dạng nhắn tin, tương tác hay bình luận viết, trị chuyện qua gọi, vv… Trong bối cảnh công nghệ ngày chiếm ưu đóng vai trị to lớn hoạt động kinh tế lẫn sống người nay, đặc biệt tình hình dịch bệnh Covid, chủ trương hạn chế lây lan, bảo vệ sức khỏe tính mạng người, hoạt động giao tiếp ngày diễn trực tiếp với hoạt động tụ tập thành nhóm bị hạn chế, chí cấm Khi đó, tốn xã hội đặt làm để người với người giao tiếp với đảm bảo sức khỏe tuân theo chủ trương phòng chống dịch bệnh nhà nước Bên cạnh đó, số người mắc phải hội chứng ngại giao tiếp mặt đối mặt, hoạt động giao tiếp trực tiếp họ thường lúng túng giao tiếp cách trôi chảy người bình thường thường hay làm, ngược lại họ lại cảm thấy dễ dàng giao tiếp, bày tỏ thông qua phương tiện thứ ba khác Mặt khác, rào cản địa lý điều gây cản trở trình giao tiếp Vì vậy, mạng xã hội đời với mục tiêu giải vấn đề IV MỤC TIÊU CỦA ĐỀ TÀI: - Xây dựng Website mạng xã hội cung cấp chức hỗ trợ trình giao tiếp từ xa người với người với nhau, cụ thể việc nhắn tin trao đổi, chia sống ngày thông qua đăng, trò chuyện qua gọi, video call, tương tác bình luận nhiều người dùng với viết, vv… - Nghiên cứu công nghệ liên quan để phát triển ứng dụng - Đưa báo cáo tài liệu cho môn học V PHƯƠNG PHÁP NGHIÊN CỨU: - Nghiên cứu tài liệu nghiệp vụ liên quan cách xây dựng giao diện hoạt động trang mạng xã hội - Tiến hình khảo sát lấy yêu cầu thực tế từ người dùng - Tham khảo số website mạng xã hội như: Facebook, Instagram, Zalo, Twitter, vv… - Nghiên cứu tài liệu, video hướng dẫn liên quan cách sử dụng công nghệ vào trình xây dựng website, cụ thể cách xây dựng theo MERN ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI VI Ý NGHĨA VÀ KẾT QUẢ CỦA HƯỚNG ĐỀ TÀI: Về mặt sản phẩm: - Tạo website mạng xã hội, đảm bảo kết nối người dùng từ xa - Các chức hướng người dùng - Cung cấp chức website mạng xã hội cần có, đặc biệt vấn đề liên quan phản hồi, tương tác theo thời gian thực Về mặt tài liệu: - Các thông tin ghi tài liệu trở thành nguồn tham khảo, kiến thức cho việc áp dụng công nghệ sử dụng vào đồ án xây dựng ứng dụng có liên quan như: MongoDB, ExpressJS, ReactJS, NodeJS vv… 10 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI CHƯƠNG V: THIẾT KẾ GIAO DIỆN I MÀN HÌNH GIỚI THIỆU: * Mơ tả chung xử lí kiện hình: Màn hình Giới thiệu gồm phần - Phần 1: Hiển thị hình ảnh text giới thiệu website mạng xã hội - Phần 2: Bao gồm icon button chức năng: + Login: Chuyển sang hình Đăng nhập + Join now: Chuyển sang hình Đăng ký 50 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI II CÁC MÀN HÌNH QUẢN TRỊ TRUY CẬP: Màn hình Đăng ký * Mơ tả chung xử lí kiện hình: Màn hình Đăng ký gồm phần chính: - Phần 1: Label “Sign in” để chuyển sang hình Đăng nhập - Phần 2: Bao gồm Textfield, combobox checkbox để người dùng nhập thông tin tài khoản muốn đăng ký - Phần 3: Button Register để hoàn tất thủ tục đăng ký Popup Gửi Email xác thực – Email xác thực Popup Gửi email xác thực Email xác thực 51 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI * Mô tả chung xử lí kiện hình: - Popup Gửi email xác thực gồm phần chính: + Phần 1: Cancle button để tắt popup + Phần 2: Hiển thị hình ảnh nội dung thơng báo việc chuẩn bị gửi email + Phần 3: Button Submit thực việc gửi email đến địa email đăng ký đề cập thông báo - Email xác thực gồm phần chính: + Phần 1: Hiển thị hình ảnh nội dung email thơng báo + Phần 2: Button Xác thực email để tiến hành trình xác thực Màn hình Đăng nhập: * Mơ tả chung xử lí kiện hình: Màn hình Đăng nhập gồm phần chính: - Phần 1: Các label text hiển thị nội dung hình Đăng nhập - Phần 2: Bao gồm Textfield email password cho người dùng nhập, Text button Forgot a password để chuyển sang hình Quên mật khẩu, combobox Remember me để thực chức “Nhớ mật khẩu”, icon “Eye” để hiển thị ẩn thông tin mật - Phần 3: Button Log in để tiến hành chức đăng nhập thường button Continue with Google để thực chức đăng nhập tài khoản Google 52 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Popup Quên mật – Email Reset Password: Popup Quên mật Email Reset Password * Mô tả chung xử lí kiện hình: - Popup Quên mật gồm phần chính: + Phần 1: Cancle button để tắt popup + Phần 2: Hiển thị hình ảnh nội dung thơng báo việc chuẩn bị gửi email trước thực chức thay đổi mật quên + Phần 3: Button Send thực việc gửi email đến địa email nhập (nếu đăng ký trước đó) để thực chức thay đổi mật tài khoản quên mật - Email Reset Password gồm phần chính: + Phần 1: Hiển thị hình ảnh nội dung email thông báo + Phần 2: Button Đổi mật để mở hình thay đổi mật 53 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Màn hình Thay đổi mật khẩu: * Mơ tả chung xử lí kiện hình: Màn hình Thay đổi mật gồm phần chính: - Phần 1: Các label text hiển thị nội dung hình Thay đổi mật - Phần 2: Bao gồm Textfield new password re-enter new password cho người dùng nhập, icon “Eye” để hiển thị ẩn thông tin mật - Phần 3: Button Save để tiến hành chức thay đổi mật III CÁC MÀN HÌNH CHỨC NĂNG: Màn hình Trang chủ: * Mơ tả chung xử lí kiện hình: Màn hình Trang chủ gồm phần chính: - Phần 1: Header hiển thị icon dẫn tới hình tương ứng với tên icon hình Home, Message, Discover, vv… Trên Header có tìm kiếm để thực chức tìm kiếm người dùng - Phần 2: Textfield để mở popup Thêm viết 54 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI - Phần 3: Phần nội dung hình bên trái hiển thị danh sách viết người dùng theo dõi - Phần 4: Phần nội dung bên phải hiển thị danh sách người dùng gợi ý để theo dõi Màn hình Profile: Màn hình Profile thân Màn hình Profile người theo dõi Màn hình Profile người chưa theo dõi 55 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI * Mơ tả chung xử lí kiện hình: Màn hình Profile gồm phần chính: - Phần 1: Header hiển thị icon dẫn tới hình tương ứng với tên icon hình Home, Message, Discover, vv… Trên Header có tìm kiếm để thực chức tìm kiếm người dùng - Phần 2: Các text hình ảnh hiển thị thông tin người dùng xem - Phần 3: Tab Posts hiển thị danh sách viết chủ nhân Profile đăng Tab Saved hiển thị danh sách viết lưu (phần hiển thị vào trang thân người theo dõi) - Phần 4: Button Edit Post để thực chức thay đổi thông tin cá nhân (phần hiển thị vào trang thân) Màn hình Thay đổi thơng tin cá nhân: * Mơ tả chung xử lí kiện hình: Màn hình Thay đổi thơng tin cá nhân gồm phần chính: - Phần 1: Header hiển thị icon dẫn tới hình tương ứng với tên icon hình Home, Message, Discover, vv… Trên Header có tìm kiếm để thực chức tìm kiếm người dùng - Phần 2: Các textfield, combobox, hình ảnh để người dùng thực việc chỉnh sửa thông tin cá nhân trước cập nhật - Phần 4: Button Save để thực chức thay đổi thông tin cá nhân 56 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Màn hình Chi tiết viết: * Mơ tả chung xử lí kiện hình: Màn hình Chi tiết viết gồm phần chính: - Phần 1: Hình ảnh, tên chủ viết, thời gian đăng viết - Phần 2: Nội dung viết, hình ảnh viết, số button chức thích viết, chia sẻ viết, lưu viết, vv… - Phần 3: Text hiển thị lượt like viết, lượt bình luận viết - Phần 4: Danh sách bình luận viết, có biểu tượng trái tim bình luận để thực chức u thích có phần text “Reply” để thực chức phản hồi bình luận - Phần 5: Textfield nhập bình luận mới, có phần chọn icon button Thêm bình luận Popup Thêm viết mới: 57 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI * Mô tả chung xử lí kiện hình: Màn hình Thêm viết gồm phần chính: - Phần 1: Tên popup button Cancel để tắt popup - Phần 2: Textfield nhập nội dung viết, biểu tượng hình icon để chọn icon, biểu tượng camera để chụp ảnh biểu tượng hình ảnh để chọn ảnh từ máy - Phần 3: Button Post để thực chức thêm viết Giao diện Tìm kiếm người dùng: * Mơ tả chung xử lí kiện hình: Giao diện Tìm kiếm người dùng gồm phần chính: - Phần 1: Textfield để nhập chuỗi kí tự tìm kiếm - Phần 2: List card hiển thị danh sách users thỏa mãn chuỗi kí tự tìm kiếm Giao diện Bình luận: * Mơ tả chung xử lí kiện hình: Giao diện Bình luận gồm phần chính: - Phần 1: List Comment Card để hiển thị bình luận viết Mỗi bình luận chọn u thích thơng qua biểu tượng trái tim việc thực chức Reply thông qua text tương ứng - Phần 2: Phần textfield để nhập nội dung bình luận, có icon đính kèm button thực việc thêm bình luận 58 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Giao diện thơng báo: * Mơ tả chung xử lí kiện hình: Giao diện Thơng báo gồm phần chính: - Phần 1: Phần Top Bar để hiển thị tên giao diện, icon tắt âm lượng thông báo icon xóa thơng báo - Phần 2: Phần list card hiển thị danh sách thông báo nhận hiển thị trạng thái xem chưa xem thơng báo Màn hình Tin nhắn: * Mơ tả chung xử lí kiện hình: Giao diện Tin nhắn gồm phần chính: - Phần 1: Nửa bên trái hiển thị danh sách phịng chat tạo (đã có hội thoại hai người dùng với nhau) kèm search phòng chat người dùng - Phần 2: Nửa bên phải hiển thị thơng tin phịng chat mở bao gồm tên người nhắn tin cùng, danh sách tin nhắn, phần nhập nội dung tin nhắn để gửi button thực gọi thường/video button xóa tin nhắn 59 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI 10 Màn hình Discover – Khám phá viết người dùng khác: * Mô tả chung xử lí kiện hình: Giao diện Tin nhắn gồm phần chính: Hiển thị danh sách viết người dùng chưa theo dõi 60 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI CHƯƠNG VI: TỔNG KẾT I CÔNG NGHỆ SỬ DỤNG: - Áp dụng thành phần mơ hình lập trình website hoàn chỉnh: + MongoDB + ExpressJS + ReactJS + NodeJS - Các hỗ trợ kết nối realtime: socket.io II ĐỘ HOÀN THIỆN CHỨC NĂNG: Tên chức STT Mức độ hoàn thành Đăng ký 100% Gửi email xác nhận 100% Đăng nhập 100% Nhớ mật 100% Quên mật 100% Thay đổi mật 100% Đăng xuất 100% Xem thông tin cá nhân 100% Thay đổi thông tin cá nhân 100% 10 Xem danh sách viết 100% 11 Chỉnh sửa viết đăng 100% 12 Xóa viết 100% 13 Đăn viết 100% 14 Tìm kiếm người dùng 100% 15 Theo dõi người dùng 100% 16 Xem viết 100% 17 Thích viết 100% 18 Xem bình luận 100% 19 Thêm bình luận 100% 20 Sửa bình luận 100% 21 Thích bình luận 100% 22 Xóa bình luận 100% Ghi 61 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI 23 Phản hồi bình luận 100% 24 Trò chuyện 100% 25 Nhắn tin 100% 26 Call 100% III KẾT QUẢ ĐẠT ĐƯỢC VÀ HƯỚNG PHÁT TRIỂN: Kết đạt được: 1.1 Ưu điểm: - Hiểu cách thức lập trình dựa theo mơ hình MERN Stack - Cơ sở liệu tổ chức server, cụ thể MongoDB với cấu trúc NoSQL - Cung cấp đồng chức giúp người dùng tương tác theo thời gian thực với - Xây dựng luồng chức dễ hiểu, dễ sử dụng 1.2 Nhược điểm: - Ứng dụng cịn đơn giản, chưa tích hợp chức phức tạp - Một số tính chưa thể realtime tồn - Chưa có phiên dành cho phiên điện thoại, tablet Hướng phát triển: - Phát triển thêm việc xây dựng ứng dụng tảng mobile: iOS, Android - Tái cấu trúc lại sở liệu để cung cấp nhiều chức năng, linh động dịch vụ cung cấp cho người dùng - Xây dựng, phát triển theo hướng toàn diện dựa trang website mạng xã hội thịnh hình 62 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI CHƯƠNG VII: BẢNG PHÂN CÔNG CÔNG VIỆC STT Nội dung công việc Ngày bắt đầu Ngày kết thúc Người đảm nhận Trạng thái Chọn đề tài 21/02/2022 27/02/2022 Trung Tín, Minh Thi Hồn thành Phân tích u cầu 28/02/2022 06/03/2022 Trung Tín, Minh Thi Hồn thành Thiết lập actor, chức 07/03/2022 13/03/2022 Trung Tín, Minh Thi Hồn thành Vẽ sơ đồ Use case 14/03/2022 20/03/2022 Minh Thi Hoàn thành Viết SRD 14/03/2022 20/03/2022 Trung Tín Hồn thành Viết đặc tả Use case 14/03/2022 20/03/2022 Trung Tín, Minh Thi Hoàn thành Học ReactJS, Figma 21/02/2022 06/03/2022 Minh Thi Hoàn thành Học NodeJS, MongoDB, ExpressJS 21/02/2022 06/03/2022 Trung Tín Hồn thành Thiết kế giao diện Figma 14/03/2022 30/03/2022 Minh Thi Hoàn thành 10 Thiết kế CSDL 14/03/2022 30/03/2022 Trung Tín Hồn thành 11 Cài đặt MERN Stack 07/03/2022 14/03/2022 Trung Tín, Minh Thi Hồn thành 12 Xây dựng hình ReactJS 15/03/2022 30/04/2022 Minh Thi Hoàn thành 13 Xử lý kiện UI 15/03/2022 30/04/2022 Minh Thi Hoàn thành 14 Xử lý liệu 15/03/2022 30/04/2022 Trung Tín Hồn thành 15 Xử lý realtime 01/04/2022 30/04/2022 Trung Tín Hồn thành 16 Kiểm thử ứng dụng sửa lỗi 01/04/2022 01/06/2022 Trung Tín, Minh Thi Hồn thành 17 Viết báo cáo, clip demo, link thơng tin 02/06/2022 16/06/2022 Trung Tín, Minh Thi Hồn thành 63 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI CHƯƠNG VIII: TÀI LIỆU THAM KHẢO MongoDB gì? Cơ sở liệu phi quan hệ: https://viblo.asia/p/mongodb-la-gi-co-so-du-lieu-phi-quan-he-bJzKmgoPl9N Expressjs gì? Tại nên sử dụng Expressjs lập trình? https://itnavi.com.vn/blog/expressjs-la-gi/?amp Tìm hiểu Node Js bản: https://viblo.asia/p/tim-hieu-ve-node-js-co-ban-ojaqG0dGEKwZ Reactjs Là Gì - Những Lợi ích Khi Bạn Sử Dụng Reactjs: https://itnavi.com.vn/blog/reactjs-la-gi-can-ban-ve-reactjs React Node.js Social Media App Tutorial - MERN Stack App Full Course w/ Hooks - Context API: https://www.youtube.com/watch?v=pFHyZvVxce0 React Social Media App Design Tutorial | React.js UI Course Full: https://www.youtube.com/watch?v=zM93yZ_8SvE Socket.io + ReactJS Tutorial | Learn Socket.io For Beginners: https://www.youtube.com/watch?v=djMy4QsPWiI Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js): https://www.youtube.com/watch?v=khJlrj3Y6Ls 64 ... ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI CHƯƠNG III: MƠ HÌNH USE CASE I SƠ ĐỒ USE CASE MỨC TỔNG QUÁT: 20 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI... đăng 45 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Chỉnh sửa viết đăng Xóa viết đăng Đăng viết 46 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Tìm kiếm... ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI Nhắn tin – Gọi thường/video: Nhắn tin Gọi thường/video 49 ĐỒ ÁN – TÌM HIỂU VỀ MƠ HÌNH MERN VÀ XÂY DỰNG WEBSITE MẠNG XÃ HỘI CHƯƠNG