Đang tải... (xem toàn văn)
ĐẠI HỌC QUỐC QIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN 1 Lớp SE121 M21 PMCL Đề tài Ứng dụng Mạng Xã Hội Giảng viên hướng dẫn Thầy Mai Trọng Khang Nhóm.
ĐẠI HỌC QUỐC QIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN Lớp: SE121.M21.PMCL Đề tài: Ứng dụng Mạng Xã Hội Giảng viên hướng dẫn: Thầy Mai Trọng Khang Nhóm thực hiện: 19520898 Lưu Ngọc Sáng 19520646 Võ Hoàng Đức Khoa TPHCM, tháng năm 2022 Mục lục Chương 1: Thông tin chung 1.1 Tên đề tài : Ứng dụng mạng xã hội 1.2 Môi trường phát triển ứng dụng (dự kiến) : React Native, NodeJS 1.3 Thơng tin nhóm Chương 2: Phát biểu tốn 1.1 Trình bày khảo sát trạng 1.1.1 Nhu cầu thực tế đề tài 1.1.2 Các yêu cầu hệ thống Chương 3: Mơ hình use case 2.1 Sơ đồ Use-case 2.2 Danh sách Actor 2.3 Danh sách use-case 2.4 Đặc tả use-case 2.4.1 Đặc tả usecase “Đăng nhập” 2.4.2 Đặc tả usecase “Đăng xuất” 2.4.3 Đặc tả usecase “Đăng kí” 2.4.4 Đặc tả usecase “Thay đổi mật khẩu” 10 2.4.5 Đặc tả usecase “CRUD viết” 11 2.4.6 Đặc tả usecase “Chia sẻ viết” 12 2.4.7 Đặc tả usecase “CRUD thông tin cá nhân” 13 2.4.7.1 Xem thông tin cá nhân 13 2.4.7.2 Sửa thông tin cá nhân 13 2.4.8 Đặc tả usecase “Gửi tin nhắn” 14 2.4.9 Đặc tả usecase “Theo dõi viết người khác” 15 2.4.10 Đặc tả usecase “Bỏ theo dõi viết” 16 2.4.11 Đặc tả use case “Tìm kiếm người dùng” 16 Chương 4: Phân tích 3.1 18 Sơ đồ lớp (mức phân tích) 18 3.1.1 Sơ đồ lớp (mức phân tích) 18 3.1.2 Danh sách lớp đối tượng quan hệ 18 3.1.3 Mô tả chi tiết lớp đối tượng 19 3.1.3.1 Lớp “User” 19 3.1.3.2 Lớp “Profile” 19 3.1.3.3 Lớp “Post” 19 3.1.3.4 Lớp “Comment” 20 3.1.3.5 Lớp “Conversation” 20 3.1.3.6 Lớp “Message” 20 Chương 5: Thiết kế liệu 22 4.1 Sơ đồ logic 22 4.2 Mô tả chi tiết kiểu kiệu sơ đồ logic 23 4.2.1 Bảng “Account” 23 4.2.2 Bảng “Profile” 23 4.2.3 Bảng “Product” 23 4.2.4 Bảng “ProductProperties” 24 4.2.5 Bảng “Category” 24 4.2.6 Bảng “CategoryProperties” 24 4.2.7 Bảng “Image” 25 Chương 6: Thiết kế kiến trúc 5.1 25 Kiến trúc hệ thống 25 Chương 7: Thiết kế giao diện 27 6.1 Danh sách hình 27 6.1 Mô tả chi tiết hình 28 6.1.1 Đăng nhập 28 6.1.2 Đăng ký 29 6.1.3 Trang chủ 31 6.1.4 Tạo đăng 33 6.1.5 Comment đăng 34 6.1.6 Thông báo 35 6.1.7 Thông tin người dùng đăng nhập 36 6.1.8 Chỉnh sửa thông tin người dùng 37 6.1.9 Danh sách following 39 6.1.10 Thông tin người dùng khác 41 6.1.11 Chat 42 6.1.12 Chat room 43 Chương 8: Kết luận 45 7.1 Môi trường phát triển môi trường triển khai 45 7.1.1 Môi trường phát triển ứng dụng 45 7.1.2 Môi trường triển khai ứng dụng 45 7.2 Kết đạt 45 7.3 Khó khăn gặp phải 45 7.4 Hướng phát triển 45 7.5 Bảng phân công công việc 47 Chương 1: Thông tin chung 1.1 Tên đề tài : Ứng dụng mạng xã hội 1.2 Môi trường phát triển ứng dụng (dự kiến) : React Native, NodeJS - Hệ điều hành: Microsoft Windows, Linux - Hệ quản trị sở liệu: Firebase - Cơng cụ phân tích thiết kế: Draw.io, Figma - Công cụ xây dựng ứng dụng: Visual Studio Code, Postman 1.3 Thơng tin nhóm STT MSSV Họ tên Email 19520898 Lưu Ngọc Sáng 19520898@gm.uit.edu.vn 19520646 Võ Hoàng Đức Khoa 19520646@gm.uit.edu.vn Chương 2: Phát biểu tốn 1.1 Trình bày khảo sát trạng 1.1.1 Nhu cầu thực tế đề 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 góp phần tích cực vào phát triển nhận thức, tư kỹ sống người MXH ngày trở thành nơi cung cấp tin tức, kiến thức tất lĩnh vực đời sống xã hội Chỉ với vài thao tác đơn giản, người dùng nhận thông tin cập nhật kịp thời lĩnh vực, vấn đề mà quan tâm theo dõi Qua giúp họ nắm bắt xu đời sống phục vụ cho cơng việc sống MXH góp phần tích cực vào phát triển văn hóa cộng đồng Văn hóa MXH phận văn hóa cộng đồng có ảnh hưởng ngày lớn đến văn hóa cộng đồng Nhờ áp dụng tiến khoa học kỹ thuật, MXH cho phép người dùng kết nối, tương tác với bạn bè, gia đình, cộng đồng ngày thuận tiện MXH 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 Các MXH, MXH xuyên quốc gia Facebook, Youtube… tạo hội, khả tiếp xúc, giao lưu văn hóa, thúc đẩy xích lại gần nhau, hiểu biết lẫn dân tộc ta với dân tộc khác giới Nhận thấy điều đó, nhóm định làm app mạng xã hội để người kết nối chia sẻ, tiếp nhận thông tin cách nhanh chóng hiệu 1.1.2 Các yêu cầu hệ thống Cho phép tạo, chia sẻ, bình luận react đăng Chức chat thời gian thực Chức đăng nhập, đổi mật khẩu, xem cập nhật thông tin cá nhân Theo dõi người dùng khác Gửi thông báo viết tới người dùng Đáp ứng lưu lượng truy xuất lớn Giao diện trực quan, thân thiện với người dùng Chương 3: Mơ hình use case 2.1 Sơ đồ Use-case *Mọi usecase bên yêu cầu đăng nhập đăng kí trước (quan hệ include) CRUD thơng tin cá nhân Chia sẻ viết Gửi thông báo viết tới người dùng Nhắn tin nhóm CRUD viết CRUD bình luận Nhắn tin Bỏ theo dõi viết Theo dõi viết người khác Tìm kiếm người dùng 2.2 Danh sách Actor STT Tên Actor Người dùng Ý nghĩa/Ghi Người sử dụng phần mềm 2.3 Danh sách use-case STT Tên Use-case Ý nghĩa/Ghi Đăng nhập Đăng kí Cập nhật thông tin cá nhân Thay đổi mật Gửi thông báo viết tới người dùng Gửi thơng báo có viết Nhắn tin Nhắn tin realtime người Theo dõi viết người khác CRUD viết Tìm kiếm người dùng 10 Nhắn tin nhóm Thêm/Xóa/Sửa viết Nhắn tin nhiều người lúc 11 Bỏ theo dõi viết Bỏ theo dõi người 2.4 Đặc tả use-case 2.4.1 Đặc tả usecase “Đăng nhập” Tên chức Đăng nhập Tóm tắt Chức đăng nhập vào ứng dụng Dịng kiện Ứng dụng hiển thị form đăng nhập Người dùng nhập tài khoản mật bấm nút “Đăng nhập” Ứng dụng giao tiếp với server để kiểm tra thơng tin đăng nhập (Dịng kiện khác: Thơng tin đăng nhập sai) 4.Ứng dụng chuyển sang hình (màn hình hiển thị viết) Dịng kiện khác Thông tin đăng nhập sai: Ứng dụng hiển thị thông báo “Thông tin đăng nhập sai” Các yêu cầu đặc biệt Khơng có Trạng thái hệ thống trước Ứng dụng khởi động thành công thực thiện use case Điều kiện: khơng có Trạng thái hệ thống sau Người dùng đăng nhập thành công chuyển đến thực use case trang chủ ứng dụng (hiển thị danh sách viết) Điểm mở rộng Khơng có 2.4.2 Đặc tả usecase “Đăng xuất” Tên chức Đăng xuất Tóm tắt Đăng xuất khỏi ứng dụng Dịng kiện Người dùng bấm nút Đăng xuất Ứng dụng xố thơng tin người dùng thiết bị chuyển người dùng trang đăng nhập Dòng kiện khác Khơng có Các u cầu đặc biệt Khơng có Trạng thái hệ thống trước Điều kiện: người dùng đăng nhập thành công thực use case Trạng thái hệ thống sau Người dùng đăng xuất thành công thực use case Ứng dụng chuyển trang đăng nhập Thông tin người dùng lưu thiết bị (nếu có) xố thành cơng Điểm mở rộng Khơng có 2.4.3 Đặc tả usecase “Đăng kí” Tên chức Đăng kí Tóm tắt Dịng kiện Người dùng nhấn vào nút Đăng kí Ứng dụng hiển thị form Đăng kí Người dùng nhập thơng tin cần thiết, sau bấm nút “Tạo tài khoản” Hệ thống kiểm tra thơng tin đăng kí chuyển người dùng sang trang chủ ứng dụng (trang hiển thị danh sách viết) (Dòng kiện khác: Thơng tin đăng kí khơng hợp lệ) Dịng kiện khác Thông tin không hợp lệ: Ứng dụng hiển thị thông báo lỗi trường liệu cho không hợp lệ Các yêu cầu đặc biệt Khơng có Trạng thái hệ thống trước Điều kiện: Khơng có thực use case Trạng thái hệ thống sau Tài khoản người dùng dược tạo thành công hệ thực use case thống Điểm mở rộng Khơng có 2.4.4 Đặc tả usecase “Thay đổi mật khẩu” Tên chức Thay đổi mật Tóm tắt Thay đổi mật cho tài khoản người dùng Dòng kiện Người dùng nhấn tài khoản chọn “Thay đổi mật khẩu” Người dùng nhập mật cũ, mật xác nhận mật Dịng kiện khác Khơng có Các yêu cầu đặc biệt Mật phải trùng với mật xác nhận người dùng hình thơng tin người biểu tượng người đăng nhập dùng đăng nhập điện thoại 6.1.4 Tạo đăng STT Tên xử lí Ý nghĩa Điều kiện gọi Trở lại hình Khi người dùng click trước vào “x” Thoát Tạo Chuyển sang Khi người dùng click đăng hình trước vào nút “Create thêm post” đăng Ghi Mở bảng option cho đăng Hiển thị thêm Khi người dùng vuốt nhiều option cho từ hình lên đăng “Check in”, “Photo” 6.1.5 Comment đăng STT Tên xử lí Ý nghĩa Thốt Điều kiện gọi Trở lại hình Khi người dùng click trước vào “←” Ghi React React comment comment Thêm Comment comment đăng 6.1.6 Thông báo Khi người dùng click Đang phát triển vào nút hình trái tim chữ “Likes” Khi người dùng nhập vào textbox “Add a comment ” sau nhắn nút biểu tượng mũi tên 6.1.7 Thông tin người dùng đăng nhập STT Tên xử lí Ý nghĩa Điều kiện gọi Chỉnh sửa Chuyển sang Khi người dùng click hình chỉnh vào biểu tượng bút sửa góc phải Follow Chuyển sang hình thể người follow Bài đăng Thêm đăng, Ghi Khi người dùng click vào chữ số “follow” kế bên thông số post Xử lý tương tự chức đăng bên trang chủ react, comment Trở Chuyển sang trang hình trước 6.1.8 Chỉnh sửa thơng tin người dùng STT Tên xử lí Ý nghĩa Điều kiện gọi Kiểm tra Số Kiểm tra Số Khi hành Ghi động Kiểm tra “Số điện thoại” rỗng điện thoại điện thoại onblur xảy báo lỗi Kiểm tra “Số điện thoại” khơng hớp lệ báo lỗi Xác nhận cập Xác nhận cập Từ người dùng, nhật thông tin nhật thông người dùng click vào tin biểu tượng check nút phải Trở Chuyển sang Khi người dùng click hình vào “←” thơng tin người dùng đăng nhập 6.1.9 Danh sách following STT Tên xử lí Ý nghĩa Điều kiện gọi Tìm kiếm Follow người Follow dùng người dùng Khi nút “follow” màu xanh dương follow người dùng Unfollow người dùng Khi nút “follow” màu trắng unfollow người dùng Ghi Tìm kiếm Khi nhập kí tự vào Khi rỗng trả tất user mà theo tên tìm kiếm người dùng follow Unfollow người dùng Xem trang thông tin cá nhân người dùng khác Chuyển sang Click vào tên trang thông avatar người tin cá nhân dùng người dùng khác Trở Chuyển sang Khi người dùng click trang thông vào “←” tin người dùng đăng nhập 6.1.10 Thông tin người dùng khác STT Tên xử lí Ý nghĩa Điều kiện gọi Following unfollow người dùng Nhấn nút follow thông tin người dùng Followed Ghi Message Chuyển sang Nhấn biểu tượng tin hình nhắn kế bên nút nhắn tin follow Follow Chuyển sang hình thể người follow Bài đăng Thêm đăng, react, comment 6.1.11 Chat Khi người dùng click Đang phát triển vào chữ số “follow” kế bên thông số post Xử lý tương tự chức đăng bên trang chủ STT Tên xử lí Tìm kiếm Ý nghĩa Điều kiện gọi Ghi Tìm kiếm Nhập vào textbox bạn nhắn “Find your friends" tin 6.1.12 Chat room STT Tên xử lí Nhắn tin Ý nghĩa Điều kiện gọi Nhắn tin Nhập vào textbox “Message” nhấn Ghi enter tượng mũi tên biểu Lựa chọn Hiển thị Nhấn vào nút cộng lựa chọn màu xanh dương khác Chọn file Chọn file Nhấn vào chữ “File” biểu tượng kế bên Chọn location Chọn location Nhấn vào chữ Đang phát triển “Location” biểu tượng kế bên Chọn Contract Chọn Contract Nhấn vào chữ Đang phát triển “Contract” biểu tượng kế bên Gọi thường Gọi thường Nhấn vào biểu tượng Đang phát triển hình điện thoại Gọi video Gọi video Nhấn vào biểu tượng Đang phát triển kế bên biểu tượng hình điện thoại Chương 8: Kết luận 7.1 Môi trường phát triển môi trường triển khai 7.1.1 Môi trường phát triển ứng dụng ● ● ● ● Hệ điều hành: Android, IOS Hệ quản trị CSDL: Firebase Storage Công cụ xây dựng ứng dụng: Visual Studio Code, Expo Các thư viện sử dụng: Redux, React Native, Expo 7.1.2 Môi trường triển khai ứng dụng ● Hệ điều hành: Android, iOS ● Cần có server cài đặt Docker 7.2 Kết đạt Sau thời gian thực đề tài, chương trình hồn thành đạt số kết sau: - Hiểu nắm cách xây dựng ứng dụng di động React Native - Nắm rõ React, React Native, Redux, thiết kế giao diện ứng dụng di động - Sử dụng ứng dụng Firebase lập trình thiết bị di động 7.3 Khó khăn gặp phải Khó khăn việc lựa chọn giao thức giao tiếp client server - GraphQL + MySQL: Ngôn ngữ thao tác truy vấn liệu API, công nghệ coi thời điểm tại, gặp khó khăn việc ứng dụng (là ngơn ngữ phải training) nên nhóm định khơng lựa chọn chuyển sang Firebase - Firebase: Với đặc thù giao tiếp với server nhận cập nhật CSDL với thời gian thực mà khơng phải xử lí thao tác phức tạp sử dụng socket.io (emit event, xác thực người dùng), ưu điểm giúp Firebase trở thành lựa chọn cho nhóm phát triển Với chủ đề nghiên cứu phát triển ứng dụng mạng xã hội, nhóm nhận thấy chủ đề thú vị với yêu cầu chức đặc biệt Có tiềm ứng dụng nhiều tương lai Tuy nhiên, hạn chế mặt kinh nghiệm nên ứng dụng đáp ứng vừa đủ yêu cầu ứng dụng mạng xã hội nhóm nghiên cứu đặt 7.4 Hướng phát triển - Hiện tại, nhóm dự định sử dụng ứng dụng tảng chia sẻ thông tin nội (cập nhật thông báo cách thụ động công ty, đội nhóm) - Trong tương lai, ứng dụng sử dụng tảng thông báo nội ứng dụng Q&A có chức diễn đàn hỏi đáp cung cấp thông tin tổ chức, cá nhân Một số module ứng dụng (chat) tái sử dụng trở thành tảng để phát triển chức hỗ trợ người dùng, ví dụ: Giao cơng việc, nhắc lịch họp,… Trên khó khăn định hướng nhóm việc phát triển ứng dụng với đề tài: Xây dựng ứng dụng mạng xã hội 7.5 Bảng phân công công việc ST T Tên công việc Thành viên Khoa Sáng x x Xác định yêu cầu toán Xác định danh sách actor, use-case, vẽ sơ đồ x Xác định danh sách đối tượng có phần mềm & vẽ sơ đồ lớp x Phân tích liệu để vẽ sơ đồ liệu x x Tạo project, set up môi trường làm việc x x Xác định danh sách hình x Vẽ phác thảo hình ghi chức x Tạo giao diện ứng dụng dựa phác thảo x x Xử lí luồng thơng tin ứng dụng x x 10 Kiểm tra sửa lỗi x x Tỷ lệ công việc phân cơng 50% 50% Mức độ hồn thành 100% 100% ... tiết thông tin cá nhân Post Thông tin đăng Comment Thông tin comment React Thông tin reaction PostContent Thông tin chi tiết nội dung đăng Conversation Thông tin đoạn chat Message Thông tin tin... nhóm dự định sử dụng ứng dụng tảng chia sẻ thông tin nội (cập nhật thông báo cách thụ động công ty, đội nhóm) - Trong tương lai, ứng dụng sử dụng tảng thông báo nội ứng dụng Q&A có chức diễn... triển 45 7.5 Bảng phân công công việc 47 Chương 1: Thông tin chung 1.1 Tên đề tài : Ứng dụng mạng xã hội 1.2 Môi trường phát triển ứng dụng (dự kiến) : React Native, NodeJS