Đồ án tốt nghiệp Công nghệ thông tin: Xây dựng ứng dụng mạng xã hội thú cưng

GIỚI THIỆU VỀ ĐỀ TÀI Trong thời đại mà công nghệ phát triển như hiện nay mọi người đều có cho mình nhu cầu kết nối, trao đổi với nhau và chia sẻ những thông tin của mình, ngoài ra nhờ c

GIỚI THIỆU VỀ ĐỀ TÀI

Trong thời đại mà công nghệ phát triển như hiện nay mọi người đều có cho mình nhu cầu kết nối, trao đổi với nhau và chia sẻ những thông tin của mình, ngoài ra nhờ có sự phát triển của công nghệ chúng ta có thể tìm kiếm thêm thông tin và các kiến thức hay các thú cưng mà mình yêu thích

Từ những vấn đề đặt ra như trên, nhóm chúng em đã quyết định xây dựng 1 ứng dụng mạng xã hội dành cho người yêu thích thú cưng trực tuyến giúp mọi người có thể kết nối được với nhau, chia sẻ các kiến thức của mình về việc chăm thú cưng, hay đơn giản như việc ghi lại khoảnh khắc của mình, cũng như tìm kiếm thêm thú cưng mà mình yêu thích với các thao tác cực kì đơn giản cũng như giao diện phù hợp với mọi người dùng, Giúp cho mọi người có thêm được nhiều khoảnh khắc để đăng tải chia sẻ cũng như để có thể kinh nghiệm trong việc chăm sóc pet của họ Đây là một ứng dụng giải quyết được hai vấn đề đặt ra của người dùng, kết nối với bạn bè, chia sẻ những khoảnh khắc và hỗ trợ tìm kiếm thêm thú cưng lạc Giúp cho thú cưng thất lạc sẽ có chủ mới hoặc tìm được về với chủ cũ.

MỤC TIÊU CỦA ĐỀ TÀI

Ứng dụng được xây dựng để kết nối ứng những người yêu thích thú cưng với nhau, nhắn tin với nhau, đăng các bài viết về thú cưng, chia sẻ về thú cưng của mình trong mục thú cưng cá nhân, tương tác các bài viết thú cưng của người dùng khác, có thể coi và tìm kiếm những thú cưng thất lạc hay không có chủ.

Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

Mục đích đề tài nhằm tạo ra một mạng xã hội thú cưng giúp những người yêu thú cưng có thể kết nối được với nhau, nhắn tin và có thể chia sẻ các thông tin về thú cưng của nhau qua ứng dụng có giao diện thân thiện và dễ sử dụng Người dùng có thể tìm kiếm và nhận nuôi các thú cưng thất lạc để giảm thiểu số lượng thú cưng bị bỏ hoang.

PHẦN NỘI DUNG - CHƯƠNG 1 CƠ SỞ LÝ THUYẾT

CƠ SỞ LÝ THUYẾT

Websocket

2 Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 2.1 Khảo sát hiện trạng

2.3 Mô hình hóa yêu cầu

3 Chương 3: THIẾT KẾ PHẦN MỀM

3.3 Thiết kế cơ sở dữ liệu

4 Chương 4: CÀI ĐẶT VÀ KIỂM THỬ

4.1 Công cụ dùng trong dự án

STT Thời gian Công việc Ghi chú

- Thiết kế usecase và mô hình hóa yêu cầu

- Thiết kế cơ sở dữ liệu

- Tìm hiểu về thư viện React Native

- Tìm hiểu về NestJS và TypeScript

- Tìm hiểu về PostgreSQL, Expo- Notification và Websocket

- Tiến hành phát triển API dựa trên các kiến thức đã tìm hiểu được và các tài liệu

- Tiến hành xây dựng giao diện người dùng cho hệ thống

Kết hợp các phần đã xây dựng lại với nhau (giao diện, API, cơ sở dữ liệu)

Kiểm thử chương trình và tiến hành sửa lỗi

12/07/2024 Viết và hoàn thiện báo cáo Ý kiến của giảng viên hướng dẫn

(Ký và ghi rõ họ tên)

Người viết đề cương (Ký và ghi rõ họ tên)

Nhóm thực hiện đồ án chúng em xin gửi lời cảm ơn đến giảng viên hướng dẫn là cô Trương Thị Ngọc Phượng – một người cô rất tận tình hỗ trợ, chỉ bảo, hướng dẫn và giải đáp các của nhóm chúng em trong suốt quá trình thực hiện đồ án môn học

Nhóm chúng em cũng xin chân thành cảm ơn các thầy cô khoa Chất Lượng Cao và các thầy cô trong chuyên ngành Công Nghệ Thông Tin đã dạy dỗ, chỉ bảo cho chúng em kiến thức về những môn học đại cương cũng như các môn học chuyên ngành, giúp đỡ chúng em có được nền tảng kiến thức vững vàng vào tạo điều kiện giúp đỡ cho chúng em trong quá trình học tập ở mái trường Đại học sư Phạm Kỹ Thuật TP.HCM

Vì điều kiện thời gian, kiến thức và kinh nghiệm còn nhiều hạn chế, vậy nên đồ án nhóm làm không thể tránh được những sai sót Nhóm chúng em mong rằng sẽ nhận được sự góp ý và nhận xét chân thành từ thầy cô Những ý kiến đóng góp của thầy cô là những ý kiến để nhóm chúng em tiếp thu kinh nghiệm để thực hiện cho những đề tài khác sau này Một lần nữa thì nhóm chúng em xin cảm ơn cô Trương Thị Ngọc Phượng, các thầy cô và các bạn

Cuối cùng, nhóm chúng em xin chân thành cảm ơn gia đình, bạn bè đã luôn quan tâm, tạo điều kiện, giúp đỡ, hỗ trợ và động viên chúng em trong suất quá trình theo học tại trường và hoàn thành được khóa luận

Nguyễn Minh Toàn – 20110577 Nông Quang Huy – 20110496

1 GIỚI THIỆU VỀ ĐỀ TÀI 9

4 MỤC TIÊU CỦA ĐỀ TÀI 11

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN 11

CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 12

1.1.1 Giới thiệu về React Native 12

1.1.3 Lý do chọn React Native 13

1.5.1 Giới thiệu về Expo-Notification 18

1.5.4 Lý do sử dụng Expo-Notification 19

CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG 22

2.3 Mô hình hóa hệ thống 28

2.3.3 Mô tả sơ đồ Usecase 30

2.4 Đặc tả một số usecase chính 34

CHƯƠNG 3 THIẾT KẾ PHẦN MỀM 55

CHƯƠNG 4 CÀI ĐẶT VÀ KIỂM THỬ 93

4.2 Các bước chạy hệ thống 93

Hình 2 Khảo sát hiện trạng Petfinder (1) 22

Hình 4 Khảo sát hiện trạng PetMD 24

Hình 5 Khảo sát hiện trạng Petcity (1) 25

Hình 7 Khảo sát hiện trạng Pet Me 26

Hình 8 Usecase tổng quát cho người dùng 28

Hình 9 Usecase tổng quát cho Admin 29

Hình 10 Lược đồ tuần tự chức năng Đăng ký 56

Hình 11 Lược đồ tuần tự chức năng Đăng nhập 56

Hình 12 Lược đồ tuần tự chức năng user xem danh sách bài viết 57 Hình 13 Lược đồ tuần tự chức năng User xem tin nhắn 57

Hình 14 Lược đồ tuần tự chức năng thêm bài viết 58

Hình 15 Lược đồ thực thể ERD 59

Hình 20 Trang chi tiết người dùng 72

Hình 21 Trang chi tiết bài viết 73

Hình 22 Trang tạo bài viết 75

Hình 25 Trang đoạn chat tin nhắn 78

Hình 27 Trang chỉnh sửa thông tin cá nhân 80

Hình 35 Trang Bảng điều khiển 90

Hình 38 Trang Người dùng báo cáo 92

Bảng 1 Mô tả sơ đồ Use case 33

Bảng 2 Mô tả Use case User Đăng nhập 35

Bảng 3 Mô tả Use case User Đăng ký 36

Bảng 4 Mô tả Use case User quên mật khẩu 37

Bảng 5 Mô tả Use case Người dùng sửa thông tin cá nhân 39

Bảng 6 Mô tả Use case Người dùng thêm pet 41

Bảng 7 Mô tả Use case Người dùng xem pet 42

Bảng 8 Mô tả Use case Gửi tin nhắn 43

Bảng 9 Mô tả Use case User kết bạn với người dùng khác 44

Bảng 10 Mô tả Use case User Tạo một bài viết 45

Bảng 11 Mô tả Use case User Chỉnh sửa và xóa bài viết 46

Bảng 12 Mô tả Use case User Xem bảng tin 47

Bảng 13 Mô tả Use case User Tìm kiếm 48

Bảng 14 Mô tả Use case User Yêu thích bài viết 49

Bảng 15 Mô tả Use case User Bình luận bài viết 50

Bảng 16 Mô tả Use case User Xem thông tin bài viết cá nhân 51

Bảng 17 Mô tả Use case User Xóa bài viết cá nhân 52

Bảng 18 Mô tả Use case Admin Đăng nhập 54

Bảng 19 Mô tả chi tiết bảng User 59

Bảng 20 Mô tả chi tiết bảng Post 61

Bảng 21 Mô tả chi tiết bảng Comment 62

Bảng 22 Mô tả chi tiết bảng Pet 62

Bảng 23 Mô tả chi tiết bảng Friend 63

Bảng 24 Mô tả chi tiết bảng Notifications 63

Bảng 25 Mô tả chi tiết bảng user_interacts 64

Bảng 26 Mô tả chi tiết bảng conversations 65

Bảng 27 Mô tả chi tiết bảng service_pet 65

Bảng 28 Mô tả chi tiết bảng user_service_pet 65

Bảng 29 Mô tả chi tiết bảng roles 66

Bảng 30 Mô tả Use case User Danh sách giao diện 67

Bảng 31 Mô tả giao diện trang đăng ký 69

Bảng 32 Mô tả giao diện trang đăng nhập 71

Bảng 33 Mô tả giao diện trang chủ 72

Bảng 34 Mô tả giao diện trang tìm kiếm 73

Bảng 35 Mô tả giao diện trang chi tiết người dùng 74

Bảng 36 Mô tả giao diện trang chi tiết bài viết 75

Bảng 37 Mô tả giao diện trang tạo bài viết 76

Bảng 38 Mô tả giao diện trang bạn bè 77

Bảng 39 Mô tả giao diện trang nhắn tin 78

Bảng 40 Mô tả giao diện trang đoạn chat tin nhắn 80

Bảng 41 Mô tả giao diện trang list menu 81

Bảng 42 Mô tả giao diện trang chỉnh sửa thông tin cá nhân 82

Bảng 43 Mô tả giao diện trang My Pet 83

Bảng 44 Mô tả giao diện trang tạo Pet 84

Bảng 45 Mô tả giao diện trang thông báo 85

Bảng 46 Mô tả trang video reels 86

Bảng 47 Mô tả trang group 88

Bảng 48 Mô tả trang policy 89

Bảng 49 Testcase User - Chức năng đăng nhập tài khoản 95 Bảng 50 Testcase User - Chức năng đăng ký tài khoản 97

Bảng 51 Testcase User - Chức năng xem bài viết 98

Bảng 52 Testcase User - Chức năng yêu thích bài viết 98 Bảng 53 Testcase User - Chức năng bình luận bài viết 98

Bảng 54 Testcase User - Chức năng thêm bài viết 99

Bảng 55 Testcase User - Chức năng gửi tin nhắn 99

Bảng 56 Testcase User - Chức năng kết bạn 99

1 GIỚI THIỆU VỀ ĐỀ TÀI

Từ những vấn đề đặt ra như trên, nhóm chúng em đã quyết định xây dựng 1 ứng dụng mạng xã hội dành cho người yêu thích thú cưng trực tuyến giúp mọi người có thể kết nối được với nhau, chia sẻ các kiến thức của mình về việc chăm thú cưng, hay đơn giản như việc ghi lại khoảnh khắc của mình, cũng như tìm kiếm thêm thú cưng mà mình yêu thích với các thao tác cực kì đơn giản cũng như giao diện phù hợp với mọi người dùng, Giúp cho mọi người có thêm được nhiều khoảnh khắc để đăng tải chia sẻ cũng như để có thể kinh nghiệm trong việc chăm sóc pet của họ Đây là một ứng dụng giải quyết được hai vấn đề đặt ra của người dùng, kết nối với bạn bè, chia sẻ những khoảnh khắc và hỗ trợ tìm kiếm thêm thú cưng lạc Giúp cho thú cưng thất lạc sẽ có chủ mới hoặc tìm được về với chủ cũ

2 ĐỐI TƯỢNG NGHIÊN CỨU Đề tài “Xây dựng mạng xã hội dành cho người yêu thú cưng”, đối tượng nghiên cứu dựa trên những người yêu thích thú cưng, những người có nhu cầu chia sẻ, tương tác với người khác để chia sẻ về thú cưng của họ Có thể nhắn tin trao đổi hay gọi điện Ngoài ra để có thể tìm kiếm thêm thông tin về các thú cưng để tránh việc có nhiều thú cưng bị bỏ hoang hay thất lạc ngoài môi trường Ngoài ra, đề tài còn có thể giúp cho người dùng thực hiện việc chia sẻ những thông tin, khoảnh khắc của mình với bạn bè và mọi người, mọi người có thể yêu

10 thích bài viết bình luận với bài viết Đồng thời kèm theo đó là các công nghệ áp dụng để tạo ra sản phẩm Cụ thể như sau:

- Sử dụng NestJs để xây dựng Backend, viết API cho các module trong hệ thống Tích hợp các module chính vào trong hệ thống như đăng bài, tạo thú cưng, tìm thú cưng, nhắn tin, kết bạn

- Sử dụng PostgreSQL để lưu trữ dữ liệu người dùng của hệ thống Thiết kế cơ sở dữ liệu sao cho phản ánh chính xác cấu trúc hệ thống Áp dụng phân tích, thiết kế bảng, phân luồng dữ liệu và sử dụng cấu trúc dữ liệu và thuật toán để tối ưu hóa thời gian và dung lượng của hệ thống

- Sử dụng JSON Web Token để xác thực và phân quyền cho hệ thống API Thiết kế quy trình xác thực và phân quyền an toàn Integrate JWT vào các API để đảm bảo mọi yêu cầu đều được xác thực và ủy quyền

- Sử dụng thư viện React Native để thiết kế và xử lý giao diện ứng dụng cho người dùng thao tác cho phần app Xây dựng các mô-đun giao diện cho người dùng Tối ưu hóa trải nghiệm người dùng trên nền tảng di động

- Sử dụng WebSocket cho tác vụ cần realtime là gửi tin nhắn Kích thích và triển khai tính năng realtime sử dụng WebSocket Xử lý tác vụ như gửi tin nhắn trong thời gian thực

- Sử dụng Expo-Notification để gửi thông báo realtime: Tích hợp Expo- Notification vào hệ thống để gửi thông báo, xử lý các sự kiện và kích thích thông báo từ phía server Đảm bảo rằng mọi thông báo đều được gửi ngay lập tức và hiệu quả

3 PHẠM VI NGHIÊN CỨU Đề tài “Xây dựng mạng xã hội dành cho người yêu thú cưng” chủ yếu tập trung khai thác vào vấn đề thú cưng, đăng tin về thú cưng, và chia sẻ về thú cưng App được thiết kế cho người dùng như sau:

- Đăng nhập/ Đăng ký/ Quên mật khẩu

- Quản lý thông tin cá nhân / Thay đổi thông tin cá nhân

- Nhắn tin/ Thu hồi tin nhắn

- Kết bạn người dùng/ Xóa kết bạn người dùng

- Đăng bài viết về thú cưng / Quản lý bài viết / Xem các bài viết

- Thích bài viết/ Hủy thích bài viết /Bình luận/ Xóa bình luận bài viết

- Tìm kiếm người dùng và bài viết

- Tìm kiếm thú cưng, thông tin về thú cưng

- Thêm thông tin về thú cưng của mình

- Thống kê lượt truy cập

- Thống kê bài viết/ Thống kê nhóm

- Quản lý người dùng/ Quản lý người dùng báo cáo

- Quản lý nhóm/ Quản lý bài viết

Về phần cốt lõi xử lý, xây dựng đầy đủ các APIs phục vụ cho phần hiển thị cuối cùng

4 MỤC TIÊU CỦA ĐỀ TÀI Ứng dụng được xây dựng để kết nối ứng những người yêu thích thú cưng với nhau, nhắn tin với nhau, đăng các bài viết về thú cưng, chia sẻ về thú cưng của mình trong mục thú cưng cá nhân, tương tác các bài viết thú cưng của người dùng khác, có thể coi và tìm kiếm những thú cưng thất lạc hay không có chủ

5 Ý NGHĨA KHOA HỌC VÀ THỰC TIỄN

KHẢO SÁT HIỆN TRẠNG

Xác định yêu cầu

Mô hình hóa hệ thống

- Admin: Đăng nhập vào hệ thống, có các quyền quản lý người dùng

- User: người đã đăng nhập vào hệ thống, có các quyền của Guest

Hình 8 Usecase tổng quát cho người dùng

PHẦN NỘI DUNG - CHƯƠNG 2 KHẢO SÁT HIỆN TRẠNG

Hình 9 Usecase tổng quát cho Admin

2.3.3 Mô tả sơ đồ Usecase

Use Case Id Tên chức năng Mô tả

UC-U-1 Đăng nhập Chức năng người dùng đăng nhập để sử dụng ứng dụng

UC-U-2 Đăng ký Chức năng người dùng đăng ký tài khoản để sử dụng ứng dụng

UC-U-3 Quên mật khẩu Chức năng người dùng thay đổi mật khẩu khi quên

UC-U-4.1 Quản lý pet – Xem thông tin pet

Chức năng cho người dùng xem thông tin pet

UC-U-4.2 Quản lý pet – Thêm Pet Chức năng cho người dùng thêm pet mới

UC-U-4.3 Quản lý pet – Chỉnh sửa

Chức năng cho người dùng chỉnh sửa các thông tin của pet

UC-U-4.4 Quản lý pet – Xóa pet Chức năng người dùng xóa Pet đã tạo

UC-U-5 Thu hồi tin nhắn Chức năng người dùng thu hồi lại tin nhắn đã gửi

UC-U-6 Gửi tin nhắn Chức năng người dùng gửi tin nhắn đến người dùng khác UC-U-6.1 Trả lời tin nhắn Chức năng người dùng trả lời tin nhắn

UC-U-7 Tìm kiếm Chức năng người dùng tìm kiếm các bài đăng hoặc thú cưng UC-U-8 Tạo bài viết Chức năng người dùng thêm một bài viết mới

UC-U-9 Xem bảng tin Chức năng người dùng xem các bài đăng trên trang chủ UC-U-10.1 Kết bạn Chức năng người thêm bạn bè mới

UC-U-10.2 Xóa bạn bè Chức năng người dùng xóa bạn bè khỏi danh sách

UC-U-11.1 Quản lý thông tin – Xem thông tin

Chức năng người dùng xem thông tin trong trang cá nhân của mình

UC-U-11.2 Quản lý thông tin –

Chức năng người chỉnh sửa thông tin cá nhân

UC-U-12.1 Tương tác bình luận –

Chức năng người xem các bình luận trong bài đăng

Xem bình luận – bình luận

Chức năng người dùng được phép bình luận vào bài viết

Xem bình luận – xóa bình luận

Chức năng người dùng xóa bình luận

UC-U-12.2 Tương tác bình luận –

Chức năng người dùng xem các bài viết được đăng bởi bạn bè

Xem bài viết - Yêu thích bài viết

Chức năng người dùng bấm yêu thích bài viết

Tương tác bài viết - Hủy yêu thích bài viết

Chức năng người dùng bấm hủy yêu thích bài viết

UC-U-13.1 Quản lý bài viết các nhân

– Xem các bài viết đã đăng

Chức năng người dùng xem các bài viết đã đăng của mình

Chức năng người dùng chỉnh sử bài đăng

Chức năng người dùng xóa bài viết của mình

UC-A-1 Đăng nhập Đăng nhập vào bên trong hệ thống

UC-A-2.1 Bảng điều khiển – Thống kê nhóm

Chức năng Admin thống kê nhóm

UC-A-2.2 Bảng điều khiển – Thống kê lượt truy cập

Chức năng Admin thống kê lượt truy cập

UC-A-2.3 Bảng điều khiển – Thống kê người dùng

Chức năng Admin thống kê người dùng

UC-A-2.4 Bảng điều khiển – Thống kê bài viết

Chức năng Admin thống kê bài viết

UC-A-3.1 Bài viết – Thêm bài viết Chức năng Admin thêm bài viết

UC-A-3.2 Bài viết – Xoá bài viết Chức năng Admin xoá bài viết

UC-A-3.3 Bài viết – Sửa bài viết Chức năng Admin sửa bài viết

UC-A-3.4 Bài viết – Xem chi tiết bài viết

Chức năng Admin xem chi tiết bài viết

UC-A-3.5 Bài viết – Xem tất cả bài viết

Chức năng Admin xem tất cả bài viết

UC-A-4.1 Người dùng – thêm người dùng

Chức năng Admin thêm người dùng

UC-A-4.2 Người dùng – xoá người dùng

Chức năng Admin xoá người dùng

UC-A-4.3 Người dùng – sửa người dùng

Chức năng Admin sửa người dùng

UC-A-4.4 Người dùng – xem chi tiết người dùng

Chức năng Admin xem chi tiết người dùng

UC-A-4.5 Người dùng – xem tất cả người dùng

Chức năng Admin xem tất cả người dùng

UC-A-5.1 Nhóm – Thêm nhóm Chức năng Admin thêm nhóm

UC-A-5.2 Nhóm – Xoá nhóm Chức năng Admin xoá nhóm

UC-A.5.3 Nhóm – Sửa nhóm Chức năng Admin sửa nhóm

UC-A.5.4 Nhóm – Xem chi tiết nhóm

Chức năng Admin xem chi tiết nhóm

UC-A.5.5 Nhóm – Xem tất cả nhóm Chức năng Admin xem tất cả nhóm

UC-A-6.1 Người dùng báo cáo –

Thêm người dùng báo cáo

Chức năng Admin thêm người dùng báo cáo

Xoá người dùng báo cáo

Chức năng Admin xoá người dùng báo cáo

Sửa người dùng báo cáo

Chức năng Admin sửa người dùng báo cáo

Xem chi tiết người dùng báo cáo

Chức năng Admin xem chi tiết người dùng báo cáo

Xem tất cả người dùng báo cáo

Chức năng Admin xem tất cả người dùng báo cáo

Bảng 1 Mô tả sơ đồ Use case

Đặc tả một số usecase chính

Use Case Name Đăng nhập

Description Người dùng thì phải đăng nhập vào ứng dụng để sử dụng các tính năng của ứng dụng

Trigger Người dùng có nhu cầu đăng nhập vào app và sử dụng ứng dụng

Pre-Condition(s) Tài khoản người dùng đã được tạo sẵn

Thiết bị sử dụng ứng dụng phải được kết nối với Internet

Post-Condition(s) Người dùng đăng nhập ứng dụng thành công

Basic Flow 1 Người dùng truy cập vào ứng dụng

2 Người dùng chọn đăng nhập

3 Người dùng nhập vào form hệ thống hiển thị Email, Password

4 Người dùng bấm vào nút “log in”

5 Hệ thống thực hiện kiểm tra định dạng email và mật khẩu, kiểm tra xem người dùng đã nhập đúng tài khoản hay chưa (E 5.1)

6 Hệ thống xác thực thông tin đăng nhập và cho phép người dùng truy cập vào ứng dụng

Exception Flow 5.1: Nếu như người dùng không nhập đúng định dạng email hoặc mật khẩu (6 ký tự trở lên) thì hệ thống sẽ thông báo lỗi và quay lại bước 3 Nếu như người dùng nhập sai tài khoản thì hệ thống thông báo cho người dùng nhập không đúng và quay lại bước 3 Người dùng nhập lại email và password và đăng nhập lại Business Rules

Bảng 2 Mô tả Use case User Đăng nhập

Use Case Name Đăng ký tài khoản

Description Người dùng muốn đăng nhập vào hệ thống thì phải đăng ký tài khoản sử dụng thông qua email, username, password

Trigger Người dùng sử dụng tài khoản nên đăng ký để được đăng nhập vào ứng dụng

Pre-Condition Tài khoản người dùng chưa được tạo sẵn

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng đăng ký tài khoản ứng dụng thành công

Hệ thống ghi nhận lại hoạt động đăng nhập thành công

Basic Flow 1 Người dùng truy cập vào ứng dụng

2 Người dùng chọn đăng ký tài khoản

3 Hệ thống hiển thị form đăng ký và người dùng nhập các thông tin sau

4 Người dùng ấn vào nút “sign up”

5 Hệ thống thực hiện kiểm tra định dạng Email, Username và Password (E 5.1)

6 Hệ thống xác nhận thông tin đăng ký đã được kích hoạt

7 Hệ thống chuyển người dùng đến trang đăng nhập Alternative Flow

Exception Flow 5.1: Nếu như người dùng không nhập đúng định dạng email hoặc username và password (6 ký tự trở lên) thì hệ thống sẽ thông báo lỗi và quay lại bước 3

Hệ thống xác thực thông tin đăng ký không thành công Business Rules

Bảng 3 Mô tả Use case User Đăng ký

Use Case Name Quên mật khẩu

Description Người dùng quên mật khẩu, muốn đặt lại mật khẩu

Trigger Người dùng quên mật khẩu, muốn đặt lại mật khẩu

Pre-Condition Người dùng chọn chức năng quên mật khẩu, nhập vào email

Post-Condition Hệ thống gửi mã OTP đến email hoặc số điện thoại người dùng đã đăng ký

Basic Flow 1 Chọn quên mật khẩu và nhập email

2 Hệ thống gửi mã OTP

3 Người dùng nhập mã OTP

4 Hệ thống xác minh mã OTP

5 Mã OTP hợp lệ và người dùng nhập mật khẩu mới

6 Hệ thống thông báo đổi mật khẩu thành công và chuyển hướng về trang đăng nhập

Exception Flow Email không có trong hệ thống: Hệ thống thông báo tài khoản không tồn tại

Mã OTP không hợp lệ: Hệ thống thông báo mã OTP không hợp lệ

Bảng 4 Mô tả Use case User quên mật khẩu

2.4.1.4 Xem thông tin cá nhân

Use Case Name Xem thông tin cá nhân và chỉnh sửa thông tin cá nhân Description Người dùng xem và sửa thông tin cá nhân của mình

Trigger Người dùng có nhu cầu muốn xem và sửa thông tin cá nhân của mình

Pre-Condition Người dùng đăng nhập ứng dụng thành công

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Hệ thống hiển thị các trường thông tin

Basic Flow 1 Từ trang chủ người dùng bấm vào nút “Menu”

2 Hệ thống đưa người dùng tới danh sách menu

3 Người dùng bấm vào nút “Profile”

4 Hệ thống đưa tới trang Profile và hệ thống hiển thị ra các trường thông tin sau:

+ Email + FirstName + LastName + Phone + DoB + Gender

- Change Password + Current password + New password

5 Nếu người dùng chỉ xem về thông tin thì sau khi xem xong người dùng ấn vào biểu tượng quay lại trang danh sách menu

Nếu người dùng đổi thông tin thì người dùng sẽ edit các thông tin ở các trường và sau đó bấm nút

6 Sau khi người dùng bấm “Change” hệ thống sẽ thực hiện kiểm tra thông tin và chuyển đến trang danh sách Menu (E 6.1)

Exception Flow 5.1: Với trường email khi thay đổi sẽ đưa đến trang nhập

OTP để xác thực email Ở đây OTP sẽ được hệ thống gửi về Email chúng ta sẽ nhập mã này vào trang OTP Sent sau đó bấm “verify” Hệ thống sẽ thực hiện kiểm tra OTP xem có trùng khớp hay không Nếu trùng khớp thì sẽ xác nhận thành công và đưa tới trang danh sách Menu Nếu không trùng khớp sẽ thông báo mã OTP không hợp lệ và bắt chúng ta nhập lại OTP

6.1: Khi bấm change nếu có trường thông tin nào đó hệ thống cho là không hợp lệ thì sẽ quay lại bước 5 nhập thông tin Business Rules

Bảng 5 Mô tả Use case Người dùng xem thông tin cá nhân

2.4.1.5.1 Quản lý pet – thêm pet

Use Case Name Đến trang thú cưng

Description Người dùng muốn đến trang thú cưng

Trigger Người dùng có nhu cầu tới trang thú cưng

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng tới trang thú cưng

Basic Flow 1 Ở trang chủ người dùng bấm vào menu

2 Người dùng bấm vào nút “My Pet” trong list menu

3 Sau đó hệ thống đưa tới trang giới thiệu My Pets

4 Người dùng ấn vào nút “Continue”

5 Hệ thống đưa người dùng tới trang “Create Pet”

6 Người dùng thêm các trường thông tin sau cho Pet của mình:

7 Nhập đầy đủ các trường thông tin và ấn nút

“Continue” để tạo thú cưng (E 7.1)

8 Hệ thống tạo thông tin về thú cưng và hiển thị thú cưng

Exception Flow 7.1: Người dùng khi không nhập đủ các trường mà bấm nút

“Continue” thì sẽ trở lại trường chưa nhập thông tin ở bước

Bảng 6 Mô tả Use case Người dùng thêm pet

2.4.1.5.2 Quản lý pet – xem pet

Use Case Name Đến trang thú cưng

Description Người dùng muốn đến trang thú cưng

Trigger Người dùng có nhu cầu tới trang thú cưng

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition

2 Người dùng bấm vào nút “My Pet” trong list menu

3 Sau đó hệ thống đưa tới trang giới thiệu My Pets

4 Người dùng ấn vào nút “Continue”

5 Hệ thống đưa tới trang Danh sách thú cưng của người dùng

Bảng 7 Mô tả Use case Người dùng xem pet

Use Case Name Gửi tin nhắn

Description Người dùng muốn gửi tin nhắn tới người dùng khác

Trigger Người dùng có nhu cầu gửi tin nhắn

Post-Condition Người dùng xem được danh mục muốn xem

Basic Flow 1 Truy cập vào phần tin “Messenger” trong list Menu

2 Hệ thống hiển thị danh sách người dùng khác mà bạn nhắn tin gần đây

3 Người dùng chọn một một người dùng mà mình muốn gửi tin nhắn

4 Người dùng nhập tin nhắn và có thể gửi kèm File, hình ảnh (E 4.1)

6 Hệ thống thông báo đã gửi (E 6.1) Alternative Flow

Exception Flow 6.1: Khi gửi tin nhắn xong người dùng có thể thu hồi lại tin nhắn đã gửi và quay lại bước 4 Business Rules

Bảng 8 Mô tả Use case Gửi tin nhắn

2.4.1.7 Kết bạn người dùng khác

Use Case Name Kết bạn người dùng

Description Người dùng muốn kết bạn một người dùng khác

Trigger Người dùng có nhu cầu kết bạn người dùng khác

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng kết bạn người dùng khác thành công

Basic Flow 1 Người dùng chọn người mình muốn kết bạn

3 Hệ thống hiển thị đã kết bạn

Bảng 9 Mô tả Use case User kết bạn với người dùng khác

Use Case Name Tạo bài viết

Description Người dùng muốn tạo bài viết mới

Trigger Người dùng có tạo bài viết

Pre-Condition Người dùng đăng nhập vào ứng dụng

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng tạo được bài viết mới

Basic Flow 1 Ở màn hình trang chủ có “Create Post” và “Add”

2 Người dùng sẽ bấm vào 1 trong 2 nút này để tạo bài viết mới

3 Người dùng ấn nhập nội dung mô tả cho bài viết, lựa chọn hình ảnh mình muốn đăng

4 Người dùng nhấp vào nút “Post” để đăng bài

5 Hệ thống thông báo bài viết đã được tạo

6 Hệ thống hiển thị bài viết lên trang chủ Alternative Flow

Bảng 10 Mô tả Use case User Tạo một bài viết

2.4.1.9 Chỉnh sửa và xóa bài viết

Use Case Name Chỉnh sửa và xóa bài viết

Description Người dùng chỉnh sửa và xóa bài viết của mình

Trigger Người dùng có nhu cầu chỉnh sửa và xóa bài viết khi muốn chỉnh sửa hoặc không còn nhu cầu sử dụng nữa

Pre-Condition(s) Người dùng đăng nhập vào ứng dụng

Người dùng đã tạo bài viết Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition(s)

Basic Flow 1 Người dùng bấm vào nút “ba chấm” trên bài viết

2 Ở đây người dùng chọn 2 lựa chọn

- Edit (để chỉnh sửa bài viết)

- Delete (để xóa bài viết)

3 Sau khi chọn lựa chọn:

- Chọn edit người dùng có thể thêm hoặc xóa hình ảnh và chỉnh sửa lại nội dung cho bài viết

- Khi bấm vào nút Delete sẽ hiện ra:

+ Delete để xác nhận xóa bài viết + Cancel hủy không xóa bài viết nữa (E 3.1)

4 Sau khi edit xong bấm nút Change hệ thống thông báo bài viết đã được chỉnh sửa

5 Hệ thống hiển thị bài viết trên trang chủ Alternative Flow

Exception Flow 3.1: Sau khi bấm cancel hệ thống quay trở lại bước 1

Bảng 11 Mô tả Use case User Chỉnh sửa và xóa bài viết

Use Case Name Xem bảng tin

Description Người dùng muốn xem bảng tin gồm các bài viết của các tài khoản mà mình đã kết bạn

Trigger Người dùng xem bảng tin

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng xem được chi tiết bảng tin

Basic Flow 1 Truy cập vào tab Trang chủ

2 Hệ thống hiển thị danh sách các tin từ các tài khoản mà mình đã theo dõi

Bảng 12 Mô tả Use case User Xem bảng tin

Use Case Name Tìm kiếm

Description Người dùng muốn tìm kiếm bài viết, hoặc người dùng

Trigger Người dùng có nhu cầu tìm kiếm các bài viết và người dùng khác

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng xem được các bài viết và người dùng cần tìm

Basic Flow 1 Người dùng nhấn vào thanh tìm kiếm và nhập thông tin, sau đó nhấn đi

2 Hệ thống trả ra danh sách người dùng bài viết ở các tab khác nhau

Bảng 13 Mô tả Use case User Tìm kiếm

2.4.1.12 Tương tác với bài viết

2.4.1.12.1 Tương tác với bài viết – Yêu thích bài viết

Use Case Name Tương tác với bài viết – Yêu thích bài viết

Description Người dùng muốn thả tim cho bài viết

Trigger Người dùng có nhu cầu yêu thích bài viết

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng xem được thông tin trong giỏ hàng

Basic Flow 1 Truy cập vào ứng dụng, hệ thống hiển thị Trang chủ

2 Hệ thống hiển thị các bài viết

3 Người dùng bấm vào nút trái trái tim trên mỗi bài viết để yêu thích bài viết (E 3.1)

4 Sau khi yêu thích bài viết thì biểu tượng trái tim sẽ có màu hồng

5 Hệ thống ghi nhận người dùng đã yêu thích bài viết (E 5.1)

Exception Flow 3.1: Với những bài viết đã có bấm yêu thích và nút trái tim đã có màu hồng thì khi bấm vào nút một lần nữa thì sẽ bỏ yêu thích bài viết

5.1: Tổng số lượng yêu thích sẽ được tăng lên khi có người dùng bấm yêu thích bài viết

Bảng 14 Mô tả Use case User Yêu thích bài viết

2.4.1.12.2 Tương tác với bài viết - Bình luận bài viết

Use Case Name Tương tác với bài viết – Bình luận bài viết

Description Người dùng muốn bình luận bài viết

Trigger Người dùng có nhu cầu bình luận bài viết

Basic Flow 1 Truy cập vào ứng dụng, hệ thống hiển thị Trang chủ

2 Hệ thống hiển thị các bài viết lên trang chủ

3 Người dùng bấm một bài viết muốn bình luận

4 Hệ thống hiển thị chi tiết bài viết

5 Người dùng nhập bình luận dạng văn bản hoặc hình ảnh và nhấn nút bình luận

6 Hệ thống ghi nhận bình luận và hiển thị trong phần bình luận của bài viết (E 6.1)

Exception Flow 6.1: Tổng số lượng bình luận sẽ được tăng lên sau khi người dùng bình luận Business Rules

Bảng 15 Mô tả Use case User Bình luận bài viết

2.4.1.13.1 Xem thông tin các bài viết cá nhân

Use Case Name Xem các bài viết cá nhân

Description Người dùng muốn xem các bài viết cá nhân

Trigger Người dùng có nhu cầu xem các bài viết cá nhân của mình

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng xem được thông tin cá nhân

2 Người dùng biểu tượng người dùng cá nhân

3 Hệ thống hiển thị các thông tin cá nhân của người dùng và các bài viết đã đăng

Bảng 16 Mô tả Use case User Xem thông tin bài viết cá nhân

2.4.1.13.2 Xóa bài viết ở trang cá nhân

Use Case Name Xóa các bài viết cá nhân

Description Người dùng muốn xóa các bài viết cá nhân

Trigger Người dùng có nhu cầu xóa các bài viết cá nhân của mình

Thiết bị sử dụng ứng dụng phải được kết nối với Internet Post-Condition Người dùng xem được thông tin cá nhân

Basic Flow 1 Truy cập vào trang Cá nhân

2 Hệ thống hiển thị thông tin của người dùng, và các bài viết đã đăng

3 Bấm vào dấu ba chấm của mỗi bài viết và nhấn xóa bài viết

4 Hệ thống ghi nhận bài viết đã bị xóa

Bảng 17 Mô tả Use case User Xóa bài viết cá nhân

Use Case Name Admin đăng nhập

Description Admin phải đăng nhập vào ứng dụng để sử dụng các tính năng của ứng dụng

Trigger Admin sử dụng quản lý người dùng

Pre-Condition(s) Tài khoản admin đã được tạo sẵn

Post-Condition(s) Admin đăng nhập ứng dụng thành công

Basic Flow 1 Admin truy cập vào ứng dụng

3 Admin nhập vào form hệ thống hiển thị Email, Password

4 Admin bấm vào nút “log in”

5 Hệ thống thực hiện kiểm tra định dạng email và mật khẩu, kiểm tra xem Admin đã nhập đúng tài khoản hay chưa (E 5.1)

Hệ thống xác thực thông tin đăng nhập và cho phép Admin truy cập vào ứng dụng

Bảng 18 Mô tả Use case User Đăng nhập

PHẦN NỘI DUNG - CHƯƠNG 3 THIẾT KẾ PHẦN MỀM

THIẾT KẾ PHẦN MỀM

Thiết kế hệ thống

3.1.2.1 Lược đồ tuần tự chức năng Đăng ký

Hình 10 Lược đồ tuần tự chức năng Đăng ký

3.1.2.2 Lược đồ tuần tự chức năng Đăng nhập

Hình 11 Lược đồ tuần tự chức năng Đăng nhập

3.1.2.3 Lược đồ tuần tự chức năng user xem danh sách bài viết

Hình 12 Lược đồ tuần tự chức năng user xem danh sách bài viết

3.1.2.4 Lược đồ tuần tự chức năng user xem tin nhắn

Hình 13 Lược đồ tuần tự chức năng User xem tin nhắn

3.1.2.5 Lược đồ tuần tự chức năng thêm bài viết

Hình 14 Lược đồ tuần tự chức năng thêm bài viết

Hình 15 Lược đồ thực thể ERD

Chi tiết các thiết kế dữ liệu chính:

STT Thuộc tính Kiểu dữ liệu Ý nghĩa Ghi chú

1 id Int Id của người dùng

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

3 zipcode String Mã vùng người dùng

4 Password String Mật khẩu của người dùng Cơ sở dữ liệu lưu mật khẩu đã hash

5 s3_profile string Url ảnh đại diện

6 First_name string Tên đầu của người dùng

7 Last_name string Tên đuôi của người dùng

String Số điện thoại người dùng

9 address String Địa chỉ của người dùng

Boolean Kiểm tra người dung đã xác minh email chưa

11 gender string Giới tính của người dùng

12 dob Date Ngày tháng năm sinh của người dùng

13 role_id Int Xác định role của user

14 Created_at TimeStamp Thời gian tạo

15 Created_by Int Người tạo

16 Updated_at TimeStamp Thời gian cập nhật

17 Updated_by Int Người cập nhật

18 Deleted_at TimeStamp Thời gian xóa

19 Deleted_by Int Người xóa

20 Email String Email của người dùng

Bảng 19 Mô tả chi tiết bảng User

- Mô tả chi tiết bảng posts

1 id Int Id của bài viết

2 Content String Nội dung bài đăng

3 Total_love String Tổng số lượng yêu thích của bài

10 tag String Loại thẻ của bài viết

11 address String Địa chỉ người đề cập đến mục đích bài viết

String Tổng số lượng không yêu thích của bài

13 Total_com ment String Tổng số lượng bình luận

14 New_s3_lin ks String Url ảnh

Bảng 20 Mô tả chi tiết bảng Post

- Mô tả chi tiết bảng comments

1 id Int Id của bình luận

2 Content String Nội dung bình luận

3 Comment_id String Id của bình luận để phản hồi

15 Total_love String Tổng số lượng yêu thích bình luận

16 Total_dis_love String Tổng số lượng không thích bình luận

17 Total_commen t String Tổng số lượng bình luận

18 Post_id Int Id bài viết

Bảng 21 Mô tả chi tiết bảng Comment

- Mô tả chi tiết bảng pets

1 id Int Id của phòng nhắn tin

String Tên của phòng chat

3 species String Danh sách Id của thành viên

4 decscription String Danh sách các quản trị viên của phòng

TimeStamp Ngày sinh của thú cưng

12 gender String Giới tính của thú cưng

13 Fur_color String Màu long của thú cưng

14 name String Tên của thú cưng

Bảng 22 Mô tả chi tiết bảng Pet

1 id Int Id của bạn bè

2 Sender_id Int Người dung thứ 1

3 Receiver_id Int Người dung thứ 2

Bảng 23 Mô tả chi tiết bảng Friend

1 id Int Id của thông báo

2 type Int Kiểu thông báo

3 data Int Dữ liệu thông báo

4 Is_readed Boolean Kiểm tra xem người dùng đã đọc chưa

5 User_id Int Id người dùng

6 Action_user_id TimeStamp Hành động của người dùng

7 Additional_data Int Dữ liệu bổ sung

Bảng 24 Mô tả chi tiết bảng Notifications

- Chi tiết bảng user_interacts

1 id Int Id của người dùng tương tác

2 Entity_id Int Id của thực thể

3 Entity_name String Tên của thực thể

4 Interact_id Boolean Id của tương tác

5 User_id Int Id người dùng

Bảng 25 Mô tả chi tiết bảng user_interacts

1 id Int Id của tin nhắn

2 Sender_id Int Id của người gửi

3 Receiverer_id Int Id của người nhận

4 Conversation_id Int Id của tin nhắn cần phản hồi

5 Content String Nội dung cần gửi

12 Is_ghim Boolean Ghim tin nhắn

13 Is_hide Boolean Ẩn tin nhắn

14 Total_love String Tổng số lượt yêu yếu thích tin nhắn

15 Total_dis_love String Tổng số lượt không yếu thích tin nhắn

16 Is_mark Boolean Đánh dấu lần đầu cuộc trò chuyện bắt đầu giữa 2 người dùng

Bảng 26 Mô tả chi tiết bảng conversations

- Chi tiết bảng service_pet

1 id Int Id của dịch vụ

2 name String Tên dịch vụ

3 url String Đường dẫn link ảnh

Bảng 27 Mô tả chi tiết bảng user_service_pet

- Chi tiết bảng user_service_pet

2 user_id Int Id của người dùng

3 service_pet_id Int Id của dịch vụ

Bảng 28 Mô tả chi tiết bảng user_service_pet

2 name String Tên vai trò

3 description String Mô tả vai trò

Bảng 29 Mô tả chi tiết bảng roles

Thiết kế giao diện

Mã giao diện Tên Trang Mô tả

MO-1 Đăng ký Khi chưa có tài khoản, trang này sẽ hiển thị

MO-2 Đăng nhập Khi đăng nhập thì trang này sẽ hiển thị

Khi đăng nhập thành công người dùng sẽ được chuyển hướng đến trang này, nó sẽ hiển thị các bài viết của người dùng và bạn bè

MO-4 Trang tìm kiếm Tìm kiếm các bài viết và người dùng

MO-5 Trang chi tiết người dùng Trang để hiển thị chi tiết trang cá nhân của người dùng MO-6 Trang chi tiết bài viết Trang hiển thị các thông tin chi tiết bài viết

MO-7 Trang tạo bài viết Trang hiển thị phần cho người dùng tạo bài viết mới MO-8 Trang bạn bè Trang hiển thị danh sách bạn bè

MO-9 Trang nhắn tin Trang hiện danh sách những người mình nhắn tin

MO-10 Trang đoạn chat tin nhắn

Trang hiển thị nội dung, thông tin chi tiết tin nhắn với người dùng

MO-11 Trang list menu Trang hiển thị các chức năng của menu

MO-12 Trang chỉnh sửa thông tin cá nhân

Trang chỉnh sửa tất cả các thông tin cá nhân của người dùng

MO-13 Trang My Pet Trang hiển thị các Pet của người dùng đã đượ ctaoj MO-14 Trang tạo Pet Trang tạo thông tin cho Pet mới

MO-15 Trang thông báo Trang hiển thị tất cả những thông báo của người dùng MO-16 Trang video reels Trang hiển thị các video thú cưng

MO-17 Trang Group Trang hiển thị các nhóm

Bảng 30 Mô tả Use case Use danh sách giao diện

STT Tên đối tượng Loại đối tượng Mô tả

1 Username Input Nhập username để đăng ký

2 Email Input Nhập email để đăng ký

3 Password Input Nhập mật khẩu để đăng ký

Input Xác nhận lại mật khẩu

Link Điều hướng tới trang quên mật khẩu

6 Nút Sign Up Button Để đăng ký tài khoản theo các thông tin đã nhập

7 Button Sign up Button Chuyển tới trang đăng nhập

8 Login now Link Chuyển hướng tới trang đăng nhập

Bảng 31 Mô tả giao diện trang đăng ký

1 Email Input Nhập email để đăng nhập

2 Mật khẩu Input Nhập mật khẩu vào để đăng nhập

3 Nút quên mật khẩu Button Bấm để chuyển sang trang quên mật khẩu

4 Nút đăng nhập dưới dạng các trang liên kết

Button Chọn đăng nhập bằng các trang liên kết khác

5 Nút Đăng nhập Button Sau khi nhập email và password thì chuyển ấn sẽ đưa đến trang chủ

6 Link Sign up Button Chuyển lại sang trang đăng ký nếu người dùng chưa có tài khoản

Bảng 32 Mô tả giao diện trang đăng nhập

2 Tìm kiếm Input Tìm kiếm thông tin

3 Thông báo Button Hiển thị các thông báo

4 Video reels Video Bấm vào để xem video thú cưng

5 Nick người dùng khác Button, image, text

Hiển thị ảnh, tên của người dùng khác

6 Mở rộng Button Nhấn vào sẽ có “Hidden post” và “Report”

Hiển thị nội dung bài viết

Icon Điều hướng tới trang khác

Bảng 33 Mô tả giao diện trang chủ

1 Thanh tìm kiếm Input Nhập thông tin tìm kiếm

3 Thông tin tìm kiếm Text,

Image Hiển thị danh sách tìm kiếm được

Bảng 34 Mô tả giao diện trang tìm kiếm

3.2.2.1.5 Trang chi tiết người dùng

Hình 20 Trang chi tiết người dùng

Loại đối tượng Mô tả

1 Thông tin Image text Avatar và tên người dùng

2 Thông tin khác Text Số lượng bạn bè

Số lượng người theo dõi

3 Pets Button Bấm vào sẽ hiển thị danh sách thú cưng của người dùng

4 Số điện thoại Text Hiển thị nội dung của số điện thoại

5 See more Button Hiển thị các thông tin mở rộng khác của người dùng

Bảng 35 Mô tả giao diện chi tiết người dùng

3.2.2.1.6 Trang chi tiết bài viết

Hình 21 Trang chi tiết bài viết

Image, text Hiển thị tên và ảnh đại diện người dùng

Image, text Nội dung của bài viết

3 Tim Icon Yêu thích bài viết

4 Comments Icon Chứa các bình luận

5 Send Icon Gửi bài viết tới người khác

6 Share Icon Chia sẻ bài viết

Text, image Hiển thị nội dung được bình luận

8 Reply Text, icon Trả lời bình luận và tim bình luận

9 Ô bình luận Input Nhập nội dung bình luận

10 Hình ảnh Icon Chọn hình ảnh để bình luận

11 Enter Icon Nhấn gửi bình luận

Bảng 36 Mô tả giao diện chi tiết bài viết

Hình 22 Trang tạo bài viết

1 Nội dung bài đăng Text Hiển thị nội dung của bài đăng

2 Thêm hình ảnh Icon Thêm nội dung hình ảnh của bài đăng

3 Tag Icon CHọn thẻ phù hợp với bài đăng

4 Nội dung hình ảnh Image Hình ảnh của bài đăng

5 Upload Button Nút đăng tải

Bảng 37 Mô tả giao diện tạo bài viết

1 Đề xuất bạn bè Button Gợi ý bạn bè

Button Những bạn bè có trong danh sách

3 List Text, Image Hiển thị danh sách

4 Friend Button Những bạn bè của mình

Bảng 38 Mô tả giao diện trang bạn bè

1 Ảnh Image Ảnh đại diện tin nhắn

2 Ô tìm kiếm Input Tìm kiếm tên bạn bè

3 Thông báo Icon Thông báo

4 Danh sách bạn đã nhắn tin

List Hiển thị danh sách người dùng đã nhắn tin

Bảng 39 Mô tả giao diện trang nhắn tin

3.2.2.1.10 Trang đoạn chat tin nhắn

Hình 25 Trang đoạn chat tin nhắn

STT Tên đối tượng Loại đối tượng

1 Back Icon Trở về trang trước

2 Tên, ảnh đại diện Button Hiển thị tên người dùng

3 Danh sách tin nhắn List Danh sách các tin nhắn

4 Tin nhắn hình ảnh Image Hiển thị tin nhắn bằng hình ảnh

5 Chọn ảnh Icon Chọn hình ảnh trong thư viện để gửi

6 Ô nội dung Input Nhập nội dung vào đây để gửi

7 Send Icon Nhấn để gửi nội dung

Bảng 40 Mô tả giao diện đoạn chat tin nhắn

1 Ảnh đại diện Image, text Hiển thị ảnh đại diện và tên tài khoản

2 Home Button Đưa tới trang chủ

3 Information Button Đưa tới trang chỉnh sửa thông tin

4 Profile Button Đưa tới Profile

5 Log out Button Đăng xuất tài khoản

Bảng 41 Mô tả giao diện list menu

3.2.2.1.12 Trang chỉnh sửa thông tin cá nhân

Hình 27 Trang chỉnh sửa thông tin cá nhân

STT Tên đối tượng Loại đối tượng

1 Exit Icon Thoát khỏi chỉnh sửa thông tin cá nhân

2 Avatar Image Thêm ảnh đại diện cho tài khoản

3 Background Image Thêm ảnh bìa cho tài khoản

4 Username Input Hiển thị thông tin username

5 First name Input Nhập thông tin tên

6 Last Name Input Nhập thông tin tên

7 Phone Number Input Nhập thông tin số điện thoại

8 Birthday Date Hiển thị ngày sinh của tài khoản

9 Gender Option Lựa chọn giới tính

10 Address Input Hiển thị địa chỉ của tài khoản

11 Zipcode Input Hiển thị khu vực

12 Save Button Lưu chỉnh sửa

Bảng 42 Mô tả trang chỉnh sửa thông tin cá nhân

1 Back Icon Thoát khỏi trang Pet

2 List Pets Button Danh sách Pet

3 Pet Button Thông tin Pet, để coi chi tiết thì bấm vào

4 Avatar pet Image Ảnh đại diện của pet

5 Thông tin Pet Text Thông tin của Pet: tên, mô tả, màu Pet, sinh nhật, loại, giới tính

Bảng 43 Mô tả trang My Pet

1 Loại Pet Image, text Chọn loại Pet phù hợp

2 Nút tiếp tục Button Bấm để sang bước tạo Pet

3 Avatar Pet Image Ảnh đại diện của thú cưng

4 Tên thú cưng Input Tên của thú cưng

5 Mô tả thú cưng Input Mô tả chi tiết thú cưng

6 Màu thú cưng Input Màu lông của thú cưng

7 Ngày sinh Date Thông tin ngày sinh thú cưng

8 Giới tính Button Giới tính của thú cưng

9 Nút Tạo thú cưng Button Bấm sẽ tạo thú cưng thành công

Bảng 44 Mô tả trang tạo Pet

1 Back Icon Thoát khỏi trang thông báo

2 Thông báo mới Icon, text Mô tả thông báo gần nhất

3 Thông báo cũ Icon, text Mô tả thông báo cũ

Bảng 45 Mô tả trang thông báo

1 Upload Icon Để đăng tải video mới

2 Thông báo cũ Image, text Mô tả thông báo cũ

Bảng 46 Mô tả trang video reels

1 Back Icon Thoát khỏi trang group

Image Ảnh đại diện và ảnh bìa của group

3 Tên Group Text Hiển thị tên của group

4 Joined Button Hiển thị bạn đã tham gia group hay chưa

5 Invite Button Mời bạn bè tham gia group

6 Out Icon Rời khỏi group

7 New Post Input Đăng tải bài viết lên group

8 Bài viết Text, image Hiển thị bài viết của thành viên

9 Back Icon Thoát khỏi mời bạn bè

10 Mời bạn bè Button Mời bạn bè tham gia group

11 Bạn bè đã tham gia

Button Hiển thị bạn bè đã tham gia

Bảng 47 Mô tả trang group

1 Back Icon Thoát khỏi trang Policy

2 Policy Text Nội dung của chính sách

3 Agree Button Đồng ý với các chính sách

Bảng 48 Mô tả trang policy

90 3.2.2.1.20 Trang Bảng điều khiển (Admin)

Hình 35 Trang Bảng điều khiển

3.2.2.1.23 Trang Người dùng báo cáo (Admin)

Hình 38 Trang Người dùng báo cáo

PHẦN NỘI DUNG - CHƯƠNG 4 CÀI ĐẶT KIỂM THỬ

CÀI ĐẶT VÀ KIỂM THỬ

Cài đặt

− Cài đặt môi trường Backend:

− Cài đặt NodeJS (https://nodejs.org/en/download/)

− Cài đặt yarn : npm install –global yarn

− Cài đặt Visual Studio Code (https://code.visualstudio.com/download)

− Clone project tại: https://gitlab.com/daonm/social-media-be

− Chạy : yarn (để tạo node_modules chứa các thư viện hỗ trợ chạy chương trình)

− Chạy yarn start:dev (để chạy chương trình )

Kiểm thử

ƯU ĐIỂM

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 202

Giáo viên hướng dẫn (Ký & ghi rõ họ tên) ĐH SƯ PHẠM KỸ THUẬT TP HCM

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự do – Hạnh Phúc

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN

Họ và tên Sinh viên 1: Nguyễn Minh Toàn MSSV 1: 20110577

Họ và tên Sinh viên 2: Nông Quang Huy MSSV 2: 20110496 Ngành: Công nghệ thông tin Tên đề tài: Mạng xã hội thú cưng

Họ và tên Giáo viên phản biện: Th.S Lê Thị Minh Châu

1 Về nội dung đề tài & khối lượng thực hiện: :

4 Đề nghị cho bảo vệ hay không?

Tp Hồ Chí Minh, ngày tháng năm 202

Giáo viên phản biện (Ký & ghi rõ họ tên)

Trường Đại học Sư phạm Kỹ thuật TP.HCM

Khoa Đào tạo chất lượng cao ĐỀ CƯƠNG LUẬN VĂN TỐT NGHIỆP

Họ và Tên SV thực hiện 1: Nguyễn Minh Toàn Mã Số SV: 20110577

Họ và Tên SV thực hiện 2: Nông Quang Huy Mã Số SV: 20110496

Thời gian làm khoá luận: Từ 29/02/2024 đến 10/07/2024

Chuyên ngành: Công nghệ phần mềm

Giảng viên hướng dẫn: ThS Trương Thị Ngọc Phượng

Nhiệm vụ của tiểu luận:

Tìm hiểu sâu rộng về NestJs, Typescript PostgreSQL, ReactJS, React Native,

- Dùng NestJs để xây dựng hệ thống Backend và viết các API cho module của hệ thống

- Dùng PostgreSQL để lưu trữ dữ liệu của hệ thống

- Dùng JSON Web Token để phân quyền, xác thực lại hệ thống

- Dùng thư viện React Native để thiết kế và xây dựng giao diện ứng dụng cho người dùng thao tác cho phần app

- Dùng React để thiết kế xà xây dựng giao diện web admin

- Dùng WebSocket cho tác vụ cần realtime là gửi tin nhắn

- Dùng Expo-Notification để gửi thông báo realtime trong khi user đang dùng app hoặc tắt app Đề cương viết luận văn:

1.1 Tính cấp thiết của đề tài

1.4 Mục tiêu của đề tài

1.5 Ý nghĩa khoa học và thực tiễn

1 Chương 1: CƠ SỞ LÝ THUYẾT

2 Chương 2: KHẢO SÁT HIỆN TRẠNG VÀ MÔ HÌNH HÓA YÊU CẦU 2.1 Khảo sát hiện trạng

NHƯỢC ĐIỂM

− Hệ thống vẫn chưa được triển khai cho người dùng thực tế

− Tính năng hiển thị của bài viết và tìm kiếm bạn bè chưa được linh hoạt

− UI vẫn chưa hoàn thiện so với bản thiết kế, một số trang chưa đúng bố cục thiết kế

HƯỚNG PHÁT TRIỂN

Phát triển thêm các tính năng:

− Chỉnh sửa và khắc phục các nhược điểm đã nêu bên trên

− Thêm tính năng gọi audio, gọi video

- Thêm các model về thú cưng

[2] Học React Native từ cơ bản đến nâng cao

Link: https://viblo.asia/p/hoc-react-native-tu-co-ban-den-nang-cao-phan-1- huong-dan-cai-dat-va-chay-hello-world-tai-lieu-viet-tu-2018-nen-gio-khong- con-phu-hop-voi-version-moi-cua-react-native-hien-nay-RQqKLYW0Z7z

[3] Tìm hiểu TypeScript và kiến thức cơ bản

Link: https://viblo.asia/p/tim-hieu-typescript-va-kien-thuc-co-ban-

[4] Tìm hiểu hệ quản trị cơ sở dữ liệu PostgreSQL

Link: https://viblo.asia/p/tim-hieu-he-quan-tri-co-so-du-lieu-postgresql- m68Z0eLdlkG

[5] PostgreSQL là gì? 6 lý do nên sử dụng PostgreSQL?

Link: https://tenten.vn/tin-tuc/postgresql-la-gi/

[6] Expo-Notification là gì ? Tại sao chúng ta nên dùng Expo-Notification ? Link: https://docs.expo.dev/versions/latest/sdk/notifications/

[7] WebSocket là gì? Lý do sử dụng WebSocket

Link: https://200lab.io/blog/websocket-la-gi/

Tiêu đề	Xây dựng ứng dụng mạng xã hội thú cưng
Tác giả	Nguyễn Minh Toàn, Nông Quang Huy
Người hướng dẫn	ThS. Trương Thị Ngọc Phượng
Trường học	Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	113
Dung lượng	18,06 MB