TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỒ ÁN 1: Ứng dụng Mạng Xã Hội

ĐẠ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.

Trang 1

ĐẠ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 thực hiện:

19520898 Lưu Ngọc Sáng

19520646 Võ Hoàng Đức Khoa

TPHCM, tháng 6 năm 2022

Trang 2

Mục lục

1.1 Tên đề tài : Ứng dụng mạng xã hội 5

1.2 Môi trường phát triển ứng dụng (dự kiến) : React Native, NodeJS 5

1.3 Thông tin nhóm 5

Chương 2: Phát biểu bài toán 6 1.1 Trình bày khảo sát hiện trạng 6

1.1.1 Nhu cầu thực tế của đề tài 6

1.1.2 Các yêu cầu của hệ thống 6

Chương 3: Mô hình use case 7 2.1 Sơ đồ Use-case 7

2.2 Danh sách các Actor 7

2.3 Danh sách các use-case 7

2.4 Đặc tả use-case 8

2.4.1 Đặc tả usecase “Đăng nhập” 8

2.4.2 Đặc tả usecase “Đăng xuất” 9

2.4.3 Đặc tả usecase “Đăng kí” 9

2.4.4 Đặc tả usecase “Thay đổi mật khẩu” 10

2.4.5 Đặc tả usecase “CRUD bài viết” 11

2.4.6 Đặc tả usecase “Chia sẻ bài 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 bài viết của người khác” 15

2.4.10 Đặc tả usecase “Bỏ theo dõi bà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 18 3.1 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 các lớp đối tượng và quan hệ 18

3.1.3 Mô tả chi tiết từng lớp đối tượng 19

Trang 3

3.1.3.2 Lớp “Profile” 19

4.1 Sơ đồ logic 22

4.2 Mô tả chi tiết các kiểu dữ kiệu trong 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 25 5.1 Kiến trúc hệ thống 25

Chương 7: Thiết kế giao diện 27 6.1 Danh sách các màn hình 27

6.1 Mô tả chi tiết mỗi màn 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 bài đăng 33

6.1.5 Comment bài đă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

Trang 4

7.1 Môi trường phát triển và 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 quả đạt được 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

Trang 5

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ị cơ sở dữ 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

Trang 6

Chương 2: Phát biểu bài toán

1.1 Trình bày khảo sát hiện trạng

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 các quốc gia trên thế giới, trong đó có Việt Nam

MXH góp phần tích cực vào sự phát triển nhận thức, tư duy và kỹ năng sống của con người MXH đang ngày càng trở thành nơi cung cấp tin tức, kiến thức về tất cả các lĩnh vực của đời sống xã hội Chỉ với một vài thao tác đơn giản, người dùng sẽ luôn nhận được những thông tin cập nhật kịp thời về lĩnh vực, vấn đề mà mình quan tâm theo dõi Qua đó giúp họ có thể nắm bắt được các xu thế của đời sống phục vụ cho công việc và cuộc sống của mình

MXH góp phần tích cực vào sự phát triển của văn hóa cộng đồng Văn hóa MXH là một

bộ phận của văn hóa cộng đồng và có ảnh hưởng ngày càng lớn đến văn hóa cộng đồng Nhờ áp dụng tiến bộ của khoa học kỹ thuật, MXH cho phép người dùng có thể kết nối, tương tác với bạn bè, gia đình, cộng đồng ngày một thuận tiện hơn

MXH góp phần thúc đẩy quá trình hội nhập quốc tế trên lĩnh vực văn hóa của Việt Nam Các MXH, nhất là MXH xuyên quốc gia như Facebook, Youtube… đã tạo ra những cơ hội, khả năng 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 nhau giữa dân tộc ta với các dân tộc khác trên thế giới

Nhận thấy điều đó, nhóm quyết định làm app mạng xã hội để mọi người kết nối chia sẻ, tiếp nhận thông tin một cách nhanh chóng và hiệu quả

1 Cho phép tạo, chia sẻ, bình luận và react bài đăng

2 Chức năng chat thời gian thực

3 Chức năng đăng nhập, đổi mật khẩu, xem và cập nhật thông tin cá nhân

4 Theo dõi người dùng khác

5 Gửi thông báo bài viết tới người dùng

6 Đáp ứng được lưu lượng truy xuất lớn

7 Giao diện trực quan, thân thiện với người dùng

Trang 7

Chương 3: Mô hình use case

2.1 Sơ đồ Use-case

*Mọi usecase bên dưới đều yêu cầu đăng nhập hoặc đăng kí trước (quan hệ include)

CRUD bài viết

CRUD thông tin cá nhân

Theo dõi bài viết của người khác

Chia sẻ bài viết Gửi thông báo bài

viết tới người dùng

3 Cập nhật thông tin cá nhân

4 Thay đổi mật khẩu

5 Gửi thông báo bài viết tới

người dùng

Gửi thông báo mỗi khi có bài viết mới

6 Nhắn tin Nhắn tin realtime giữa 2 người

7 Theo dõi bài viết của người

Trang 8

11 Bỏ theo dõi bài viết Bỏ theo dõi người nào đó

2.4 Đặc tả use-case

2.4.1 Đặc tả usecase “Đăng nhập”

Tên chức năng Đăng nhập

Tóm tắt Chức năng đăng nhập vào ứng dụng

Dòng sự kiện chính 1 Ứng dụng hiển thị form đăng nhập

2 Người dùng nhập tài khoản và mật khẩu rồi bấm nút

“Đăng nhập”

3 Ứng dụng giao tiếp với server để kiểm tra thông tin đăng nhập

(Dòng sự kiện khác: Thông tin đăng nhập sai)

4.Ứng dụng chuyển sang màn hình chính (màn hình hiển thị bài viết)

Dòng sự kiện khác 1 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

khi thực thiện use case

Ứng dụng khởi động thành công Điều kiện: không có

Trạng thái hệ thống sau

khi thực hiện use case

Người dùng đăng nhập thành công và được chuyển đến trang chủ của ứng dụng (hiển thị danh sách bài viết) Điểm mở rộng Không có

Trang 9

2.4.2 Đặc tả usecase “Đăng xuất”

Tên chức năng Đăng xuất

Tóm tắt Đăng xuất khỏi ứng dụng

Dòng sự kiện chính 1 Người dùng bấm nút Đăng xuất

2 Ứng dụng xoá thông tin người dùng trên thiết bị và chuyển người dùng về trang đăng nhập

Dòng sự kiện khác Không có

Các yêu cầu đặc biệt Không có

Điều kiện: người dùng đã đăng nhập thành công

Người dùng đăng xuất thành công Ứng dụng chuyển về trang đăng nhập Thông tin người dùng được lưu ở thiết bị (nếu có) xoá thành công

Điểm mở rộng Không có

2.4.3 Đặc tả usecase “Đăng kí”

Tên chức năng Đăng kí

Tóm tắt

Dòng sự kiện chính 1 Người dùng nhấn vào nút Đăng kí

2 Ứng dụng hiển thị form Đăng kí

2 Người dùng nhập những thông tin cần thiết, sau đó bấm nút “Tạo tài khoản”

Trang 10

3 Hệ thống kiểm tra thông tin đăng kí và chuyển người dùng sang trang chủ của ứng dụng (trang hiển thị danh sách bài viết)

(Dòng sự kiện khác: Thông tin đăng kí không hợp lệ) Dòng sự kiện khác 1 Thông tin không hợp lệ:

Ứng dụng hiển thị thông báo lỗi ở trường dữ liệu được cho là không hợp lệ

Điều kiện: Không có

Tài khoản của người dùng dược tạo thành công trên hệ thống

2.4.4 Đặc tả usecase “Thay đổi mật khẩu”

Tên chức năng Thay đổi mật khẩu

Tóm tắt Thay đổi mật khẩu cho tài khoản người dùng

Dòng sự kiện chính 1 Người dùng nhấn tài khoản của mình và chọn “Thay

Trang 11

Actor: tất cả các actor Điều kiện: người dùng đã đăng nhập hệ thống Trạng thái hệ thống sau

Người dùng thay đổi mật khẩu

2.4.5 Đặc tả usecase “CRUD bài viết”

Tên chức năng CRUD bài viết

Tóm tắt Thêm, xoá, sửa bài viết của chính mình

Xem bài viết của mọi user trong hệ thống Dòng sự kiện chính ❖ Tạo bài viết:

1 Người dùng mở trang chủ của ứng dụng

2 Người dùng nhấn vào nút tạo bài viết

3 Nhập thông tin bài viết (ảnh, text)

4 Ứng dụng lưu dữ liệu đã được nhập vào, tạo bài viết và thêm vào hệ thống

(Dòng sự kiện khác: Thông tin không hợp lệ, lỗi upload ảnh)

❖ Chỉnh sửa bài viết:

1 Người dùng bấm vào bài viết muốn chỉnh sửa

2 Chọn tuỳ chọn chỉnh sửa => hệ thống hiển thị giao diện chỉnh sửa bài viết

3 Người dùng chỉnh sửa bài viết và bấm lưu

Trang 12

(Dòng sự kiện khác: Cập nhật lỗi )

❖ Xoá bài viết: (chỉ xoá bài viết của bản thân)

1 Người dùng bấm vào nút xoá bài viết tại menu tuỳ chọn bài viết

2 Hệ thống xoá bài viết và ứng dụng cập nhật lại giao diện

❖ Xem bài viết:

1 Người dùng chuyển sang trang chính của ứng dụng

=> ứng dụng hiển thị danh sách bài viết Dòng sự kiện khác 1,3 Thông tin không hợp lệ, Cập nhật lỗi:

Ứng dụng hiển thị thông báo lỗi tại vị trí dữ liệu được cho

Điều kiện: Người dùng đã đăng nhập vào hệ thống

Ứng dụng thực hiện chức năng được định nghĩa

2.4.6 Đặc tả usecase “Chia sẻ bài viết”

Tên chức năng Chia sẻ bài viết

Tóm tắt

Trang 13

Dòng sự kiện chính 1 Người dùng bấm vào chia sẻ bài viết

2 Hệ thống lưu thông tin và cập nhật lại giao diện Dòng sự kiện khác Không có

Thông tin được lưu thành công

2.4.7 Đặc tả usecase “CRUD thông tin cá nhân”

2.4.7.1 Xem thông tin cá nhân

Tên chức năng Xem thông tin cá nhân

Tóm tắt

Dòng sự kiện chính 1 Người dùng chuyển tới trang cá nhân

2 Người dùng bấm vào nút xem thông tin Dòng sự kiện khác Không có

Hệ thống không thay đổi

2.4.7.2 Sửa thông tin cá nhân

Tên chức năng Sửa thông tin cá nhân

Trang 14

Tóm tắt

Dòng sự kiện chính 1 Người dùng chuyển tới trang cá nhân

2 Người dùng bấm vào nút xem thông tin

3 Người dùng bấm nút sửa thông tin

4 Người dùng nhập thông tin muốn sửa sau đó bấm nút

“Cập nhật”

(Dòng sự kiện khác: Thông tin cập nhật không hợp lệ)

5 Hệ thống lưu thông tin Dòng sự kiện khác 1 Thông tin không hợp lệ:

Ứng dụng hiển thị thông báo lỗi ở trường dữ liệu được cho là không hợp lệ

Điều kiện: Người dùng đăng nhập thành công vào ứng dụng

Người dùng cập nhật thông tin người dùng thành công vào

hệ thống

2.4.8 Đặc tả usecase “Gửi tin nhắn”

Tên chức năng Gửi tin nhắn

Tóm tắt Gửi và nhận tin nhắn (ảnh, text) realtime đến/ từ người

khác Dòng sự kiện chính 1 Người dùng bấm vào icon tin nhắn ở thanh điều hướng

tại trang chủ của ứng dụng

Trang 15

2 Ứng dụng hiển thị màn hình “danh sách tin nhắn” chứa các cuộc hội thoại của người dùng được trả về từ server

3 Người dùng chọn cuộc hội thoại muốn gửi tin nhắn

4 Ứng dụng hiển thị các tin nhắn gần đây của người dùng

5 Người dùng nhập nội dung tin nhắn (ảnh, text) và bấm gửi

6 Ứng dụng thực hiện giao tiếp với server gửi tin nhắn của người dùng đi và cập nhật lại giao diện

Dòng sự kiện khác

Điều kiện: Người dùng đã đăng nhập thành công vào ứng dụng

Hệ thống không thay đổi

Điểm mở rộng Tin nhắn nhóm:

Tại giao diện “danh sách tin nhắn”, người dùng chọn thẻ

“room chat” để chuyển đến trang tin nhắn

* Giống flow chính từ bước số 3

2.4.9 Đặc tả usecase “Theo dõi bài viết của người khác”

Tên chức năng Theo dõi bài viết của người khác

Tóm tắt Ứng dụng hiển thị bài viết của người được theo dõi Dòng sự kiện chính 1 Người dùng chọn hoặc tìm kiếm người muốn theo dõi

2 Chọn nút theo dõi ở trang cá nhân của đối tượng

Trang 16

Đối tượng được thêm vào danh sách theo dõi của người dùng

Điểm mở rộng Bỏ theo dõi bài viết

2.4.10 Đặc tả usecase “Bỏ theo dõi bài viết”

Tên chức năng Bỏ theo dõi bài viết của người khác

Tóm tắt

Dòng sự kiện chính 1 Người dùng chọn hoặc tìm kiếm người muốn theo dõi

2 Chọn nút bỏ theo dõi ở trang cá nhân của đối tượng Dòng sự kiện khác

Không có

Đối tượng được xoá khỏi danh sách theo dõi của người dùng

Điểm mở rộng

2.4.11 Đặc tả use case “Tìm kiếm người dùng”

Tên chức năng Tìm kiếm người dùng

Trang 17

Hệ thống hiển thị danh sách người dùng tìm thấy

Trang 18

Chương 4: Phân tích

3.1 Sơ đồ lớp (mức phân tích)

3.1.1 Sơ đồ lớp (mức phân tích)

3.1.2 Danh sách các lớp đối tượng và quan hệ

STT Tên lớp/quan hệ Loại Ý nghĩa/Ghi chú

2 Profile Lớp Lớp Thông tin cá nhân

Trang 19

6 Conversation Lớp Lớp cuộc trò chuyện

Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

2 username String Public Tên người dùng

3 email String Public Email người dùng

4 profile Profile Public Profile người dùng

b) Danh sách phương thức

STT Tên thuộc tính Loại Ràng buộc Ý nghĩa/ghi chú

1 createUser void Public Tạo người dùng

2 updateUser void Public Cập nhật người dùng

3 deleteUser void Public Xóa người dùng

3.1.3.2 Lớp “Profile”

a) Danh sách thuộc tính

1 name String Public Tên người dùng

2 surname String Public Họ người dùng

1 createProfile void Public Tạo thông tin người dùng

2 updateProfile void Public Cập nhật thông tin người

dùng

3.1.3.3 Lớp “Post”

Trang 20

2 author User Public Tác giả bài post

3 comment Comment[] Public Danh sách comment

1 createPost void Public Tạo bài post

2 updatePost void Public Cập nhật bài post

3 deletePost void Public Xóa bài post

3.1.3.4 Lớp “Comment”

2 content String Public Nội dung comment

1 postComment void Public Tạo comment

2 updateComment void Public Cập nhật comment

3 deleteComment void Public Xóa comment

3.1.3.5 Lớp “Conversation”

1 id String Public Id consersation

2 userIds String[] Public Consersation user ids

3 messages Message[] Public Danh sách tin nhắn

3.1.3.6 Lớp “Message”

Trang 21

2 userId String Public Tác giả tin nhắn

3 content String Public Nội dung tin nhắn

4 image String Public Đường dẫn đến ảnh đính

kèm

1 sendMessage void Public Tạo tin nhắn

2 updateMessage void Public Cập nhật tin nhắn

3 sendImage void Public Gửi tin nhắn hình ảnh

Trang 22

Chương 5: Thiết kế dữ liệu

4.1 Sơ đồ logic

STT Tên bảng dữ liệu Diễn giải

1 User Thông tin tài khoản người dùng

2 Profile Chi tiết thông tin cá nhân

3 Post Thông tin bài đăng

4 Comment Thông tin comment

5 React Thông tin reaction

6 PostContent Thông tin chi tiết nội dung bài đăng

Trang 23

7 Conversation Thông tin đoạn chat

8 Message Thông tin 1 tin nhắn

4.2 Mô tả chi tiết các kiểu dữ kiệu trong sơ đồ logic

4.2.1 Bảng “User”

STT Tên thuộc tính Kiểu Ràng buộc Ý nghĩa/Ghi chú

1 id string Khóa chính, Not null,

Tạo tự động

Mã tài khoản

2 username string Không null Tên đăng nhập

4 profile string Không null, khóa

ngoại

Mã profile

4.2.2 Bảng “Profile”

Tạo tự động

Mã tài khoản

2 name string Not null Tên người dùng

dùng

6 posts string[] Khóa ngoại Mã bài post

4.2.3 Bảng “Post”

Tạo tự động

Mã bài đăng

2 author string Not null, khóa ngoại Mã người đăng bài

Định dạng
Số trang	47
Dung lượng	1,52 MB