1. Trang chủ
  2. » Luận Văn - Báo Cáo

đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng

56 0 0
Tài liệu đã được kiểm tra trùng lặp

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Mạng Xã Hội Kết Hợp Chatbot Cho Người Nuôi Thú Cưng
Tác giả Triệu Tuấn Tú
Người hướng dẫn Trần Anh Dũng
Trường học Đại Học Quốc Gia Thành Phố Hồ Chí Minh
Chuyên ngành Công Nghệ Thông Tin
Thể loại Đồ Án
Năm xuất bản 2023
Thành phố Thành Phố Hồ Chí Minh
Định dạng
Số trang 56
Dung lượng 5,08 MB

Cấu trúc

  • I. Giới thiệu tổng quan (6)
    • 1. Thành viên nhóm (6)
    • 2. Tổng quan đề tài (6)
  • II. Công cụ sử dụng (6)
  • III. Xây dựng ứng dụng (7)
    • 1. Tổng quan đề tài (7)
    • 2. Phân tích thiết kế hệ thống (8)
    • 3. Thiết kế dữ liệu (24)
    • 4. Thiết kế giao diện (28)
    • 5. Thiết kế các api (44)
    • 6. Cài đặt và kiểm thừ (51)
    • 7. Source Code (51)
  • IV. Tìm hiểu về NestJS (51)
    • 1. Giới thiệu (51)
    • 2. NestJS (52)
      • 2.1. Tính năng chính (52)
      • 2.2. Thành phần chính (52)
      • 2.3. Các bước xây dựng ứng dụng (52)
  • V. Tìm hiểu về ReactJS (53)
    • 2. ReactJS (53)
  • VI. Tìm hiểu về ViteJS (54)
    • 2. ViteJS (54)
  • VII. Tìm hiểu về socket.io (55)
    • 2.1. Giới thiệu (55)
    • 2.2. Socket.io (55)
  • VIII. Tài liệu tham khảo (55)

Nội dung

Trang web thông báo sửa thành côngLuồng sự kiện phụ:KhôngUse case: Like postTác nhân: UserMô tả ngắn gọn: Người dùng thích, bỏ thích 1 bài viết Điều kiện tiên quyết: Người dùng đã đăng n

Giới thiệu tổng quan

Thành viên nhóm

MSSV Họ tên Email Số điện thoại

20522103 Triệu Tuấn Tú 20522103@gmail.co m

Bảng 1: Thành viên nhóm

Tổng quan đề tài

Đề tài đồ án này tập trung vào việc xây dựng một ứng dụng mạng xã hội dành cho người nuôi thú cưng kèm chatbot Ứng dụng sẽ sử dụng các công nghệ chính sau:

- NestJS là một framework phát triển ứng dụng Node.js, cung cấp cho chúng ta các tính năng mạnh mẽ để xây dựng các ứng dụng web và dịch vụ web hiệu quả

- ReactJS là một thư viện JavaScript để xây dựng giao diện người dùng Được sử dụng với ViteJS

- ViteJS là một công cụ xây dựng ứng dụng web dựa trên Vite, cung cấp cho chúng ta một quy trình phát triển nhanh chóng và hiệu quả.

- MySQL là một hệ quản trị cơ sở dữ liệu quan hệ, sẽ được sử dụng để lưu trữ dữ liệu của ứng dụng

Mục tiêu của đồ án này là tạo ra một ứng dụng mạng xã hội dành cho người nuôi thú cưng đầy đủ tính năng, bao gồm các chức năng sau:

- Đăng ký, đăng nhập và xác thực người dùng.

- Tạo hồ sơ cá nhân và hồ sơ thú cưng.

- Chia sẻ ảnh, video và bài viết về thú cưng.

- Kết bạn, trò chuyện và tương tác với những người dùng khác.

- Tham gia các cộng đồng và nhóm thú cưng.

- Nhận thông báo về các sự kiện và hoạt động mới. Đề tài đồ án này sẽ giúp chúng ta rèn luyện các kỹ năng lập trình và phát triển ứng dụng web, cũng như làm quen với các công nghệ phổ biến hiện nay như NestJS, ViteJS, MySQL, Socket.IO và AWS Ngoài ra, nó cũng nhằm cung cấp cho chúng ta một cái nhìn tổng quan về quy trình phát triển ứng dụng mạng xã hội từ việc thiết kế cơ sở dữ liệu, triển khai backend, xây dựng giao diện người dùng và triển khai ứng dụng.

Công cụ sử dụng

Visual Studio Code: IDE chính để xây dựng ứng dụng

MySQL: Cơ sở dữ liệu lưu trữ thông tin của ứng dụng

Postman: Hỗ trợ test các API được tạo bởi Server

Xây dựng ứng dụng

Tổng quan đề tài

- Chức năng chính : Xem và đăng tải các hình ảnh, video của thú cưng

- Nền tảng phát triển: ViteJs, NestJs, MySQL

Lý do chọn đề tài

- Tính thực tiễn: Theo thống kê của Hiệp hội Thú cưng Hoa Kỳ (American Pet Products Association), năm 2022, có khoảng 90,5 triệu hộ gia đình ở Hoa Kỳ nuôi ít nhất một con vật cưng Số lượng người nuôi thú cưng ở Việt Nam cũng đang tăng nhanh chóng Điều này cho thấy nhu cầu về các sản phẩm và dịch vụ dành cho người nuôi thú cưng là rất lớn.

- Tính ứng dụng: Ứng dụng mạng xã hội dành cho người nuôi thú cưng sẽ giúp người dùng kết nối với nhau, chia sẻ những khoảnh khắc đáng yêu của thú cưng, tìm kiếm thông tin và hỗ trợ nuôi dạy thú cưng Ứng dụng cũng có thể giúp người dùng tìm kiếm thú cưng thất lạc. Đối tượng hướng đến Đối tượng hướng đến của ứng dụng mạng xã hội dành cho người nuôi thú cưng kèm chatbot bao gồm:

- Người nuôi thú cưng: Ứng dụng sẽ giúp người nuôi thú cưng kết nối với nhau, chia sẻ những khoảnh khắc đáng yêu của thú cưng, tìm kiếm thông tin và hỗ trợ nuôi dạy thú cưng.

- Các doanh nghiệp kinh doanh sản phẩm và dịch vụ dành cho thú cưng: Ứng dụng sẽ giúp các doanh nghiệp tiếp cận khách hàng tiềm năng, quảng bá sản phẩm và dịch vụ của mình.

- Các tổ chức phi lợi nhuận hoạt động trong lĩnh vực bảo vệ động vật: Ứng dụng có thể được sử dụng để nâng cao nhận thức của cộng đồng về vấn đề bảo vệ động vật.

Cụ thể, ứng dụng có thể nhắm đến các nhóm đối tượng sau:

- Người trẻ: Người trẻ là đối tượng có nhu cầu nuôi thú cưng cao và thường xuyên sử dụng các ứng dụng mạng xã hội.

- Người có thu nhập trung bình và cao: Người có thu nhập trung bình và cao thường có điều kiện nuôi thú cưng và sẵn sàng chi trả cho các sản phẩm và dịch vụ dành cho thú cưng.

- Người sống ở các thành phố lớn: Người sống ở các thành phố lớn thường có ít thời gian và không gian để chăm sóc thú cưng, do đó họ cần sự hỗ trợ từ các ứng dụng mạng xã hội.

- Học được cách phát triển một ứng dụng web

- Triển khai, hoàn thành được sản phẩm

- Áp dụng được các kiến thức đã học vào phát triển đồ án

Phân tích thiết kế hệ thống

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

Các yêu cầu ứng dụng cần có như:

- Thay đổi thông tin cá nhân

- Thay đổi thông tin thú cưng

- Xem, tìm kiếm người dùng khác

- Xem, tìm kiếm các thú cưng khác

- Tham gia rời các group

- Xem, bình luận, thích bài viết

User Người sử dụng chính của website Có thể thực hiện các chức năng để đặt tour

Mô tả ngắn gọn: Người dùng đăng ký tài khoản Điều kiện tiên quyết:

Chưa có người dùng đăng nhập

Chọn “Sign up” tại form “Sign in”

1 Trang web hiển thị form đăng ký

2 Người dùng nhập tên, email, password và bấm đăng ký

3 Trang web gửi username, password cho Server kiểm tra

4 Người dùng đăng ký thành công và đăng nhập vào trang web

Thông báo mật khẩu nhập lại không trùng

Thông báo email đã đăng ký

Lỗi từ phía Server: Thông báo có lỗi từ phía Server

Mô tả ngắn gọn: Người dùng đăng nhập vào Trang web Điều kiện tiên quyết:

Chưa có người dùng đăng nhập

Người dùng chọn “Sign in”

1 Trang web hiển thị form đăng nhập

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

3 Trang web gửi username, password cho Server kiểm tra

4 Người dùng đăng nhập thành công vào trang web

Sai tài khoản hoặc mật khẩu: Thông báo sai tài khoản hoặc mật khẩuLỗi từ phía Server: Thông báo có lỗi từ phía Server

Mô tả ngắn gọn: Người dùng xem các bài viết tại trang chủ Điều kiện tiên quyết:

Người dùng truy cập trang chủ

1 Trang web gửi yêu cầu lấy dữ liệu đến server

2 Server trả về dữ liệu

3 Trang web hiển thị các bài viết lên trang chủ

Hình 2 Chi tiết use case PostAndCommentOnPosts

Mô tả ngắn gọn: Người dùng đăng bài viết lên trang web Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng chọn “Create post” tại navbar

1 Trang web hiển thị form tạo bài viết

2 Người dùng nhập thông tin bài viết và click “Create”

3 Trang web gửi thông tin lên server

4 Server kiểm tra thông tin, lưu bài viết mới

5 Trang web hiển thị bài viết đã đăng

Mô tả ngắn gọn: Người dùng sửa bài viết đã đăng lên trang web Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Bài viết do người dùng đăng tải

Người dùng chọn vào icon “Edit post” tại bài viết

1 Trang web hiển thị edit bài viết

2 Người dùng nhập thông tin bài viết và click “Edit”

3 Trang web gửi thông tin lên server

4 Server kiểm tra thông tin, sửa thông tin bài viết

5 Trang web thông báo sửa thành công

Mô tả ngắn gọn: Người dùng thích, bỏ thích 1 bài viết Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng chọn vào icon “Like post” tại bài viết

1 Trang web gửi thông tin lên server

2 Server kiểm tra thông tin lưu thông tin like hoặc bỏ like của người dùng

3 Trang web hiển thị lại trang thái like bài viết

Mô tả ngắn gọn: Người dùng them bình luận về bài viết đã đăng lên trang web Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng chọn vào icon “Comment” tại bài viết

1 Trang web hiển thị danh sách comment Ô nhập comment mới

2 Người dùng nhập thông tin comment và gửi

3 Trang web gửi thông tin lên server

4 Server kiểm tra thông tin, thêm comment vào bài viết đó

5 Trang web hiển thị lại danh sách comment

Mô tả ngắn gọn: Người dùng gửi tin nhắn cho người dùng khác, group Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng truy trang gửi tin nhắn( chọn icon tại navbar, chọn chat tại profile ) Luồng sự kiện chính:

1 Trang web hiển thị danh sách các cuộc trò chuyện, tin nhắn

2 Người dùng chọn cuộc trò chuyện, nhập tin nhắn và nhấn gửi

3 Trang web gửi thông tin cho server

4 Server kiểm tra thông tin, lưu tin nhắn mới

5 Trang web hiển thị lại danh sách các tin nhắn

Mô tả ngắn gọn: Người dùng nhận tin nhắn từ người dùng khác, group Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng truy trang gửi tin nhắn( chọn icon tại navbar, chọn chat tại profile )

Có tin nhắn mới từ người dùng khác, group

1 Trang web hiển thị danh sách các cuộc trò chuyện, tin nhắn

2 Khi có tin nhắn mới server sẽ gửi tín hiệu đến trang web

3 Trang web hiển thị tin nhắn mới

Mô tả ngắn gọn: Người dùng tạo group mới Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng chọn “Create group” tại trang group

1 Trang web hiển thị form nhập thông tin

2 Người dùng nhập tên, chọn ảnh cho group và nhấn “Create”

3 Trang web gửi thông tin cho server

4 Server kiểm tra thông tin, lưu group mới

5 Trang web hiển thị lại các group

Mô tả ngắn gọn: Người dùng tham gia vào group Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng chưa ở trong group này

Người dùng chọn “Join” tại trang profile của group

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin, them người dùng vào danh sách thành viên

3 Trang web hiển thị thông báo tham gia thành công, hiẻn thị lại trang Luồng sự kiện phụ:

Mô tả ngắn gọn: Người dùng rời khỏi group Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng đang ở trong group này

Người dùng chọn “Leave” tại trang profile của group

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin, them người dùng vào danh sách thành viên

3 Trang web hiển thị thông báo rời thành công, hiẻn thị lại trang Luồng sự kiện phụ:

Hình 5 Use case relationships and friends

Mô tả ngắn gọn: Người dùng tìm kiếm các người dùng khác Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng truy cập trang seach friend

1 Người dùng nhập tên muốn tìm là click icon “Search”

2 Trang web gửi thông tin cho server

3 Server kiểm tra thông tin, gửi danh sách user theo tìm kiếm

4 Trang web hiển thị danh sách các user tìm được

Use case: Add friend request

Mô tả ngắn gọn: Người dùng gửi yêu cầu kết bạn cho người dùng khác Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng click “Add friend” tại trang “Search Friend”

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin, lưu yêu cầu add friend của người dùng

3 Trang web hiển thị thông báo

Mô tả ngắn gọn: Người dùng từ chối yêu cầu kết bạn của người khác Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Yêu cầu kết bạn giữa hai người chưa được “accept”

Người dùng click “Decline” tại trang “Friend Request”

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin xoá mối quan hệ giữa hai người dùng

3 Trang web hiển thị thông báo

Use case: Un friend request

Mô tả ngắn gọn: Người dùng gửi huỷ kết bạn cho người dùng khác Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Yêu cầu kết bạn giữa hai người đã được “accept”

Người dùng click “Un friend” tại trang “List Friend”

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin xoá mối quan hệ giữa hai người dùng

3 Trang web hiển thị thông báo

Mô tả ngắn gọn: Người dùng huỷ lời mời đã gửi Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Yêu cầu kết bạn giữa hai người chưa được “accept”

Người dùng click “Cancel” tại trang “Request Sent”

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin, xoá yêu cầu kết bạn

3 Trang web hiển thị thông báo

Mô tả ngắn gọn: Người dùng chấp nhận kết bạn của người dùng khác Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Yêu cầu kết bạn giữa hai người chưa được “accept”

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin xoá mối quan hệ giữa hai người dùng

3 Trang web hiển thị thông báo

Hình 6 Use case manage pets

Mô tả ngắn gọn: Người dùng thêm pet vào danh sách pet Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng click “Add pet” tại trang “My pets”

1 Trang web hiển thị form nhập thông tin pet

2 Người dùng nhập thông tin và gửi

3 Trang web gửi thông tin cho server

4 Server kiểm tra thông tin, thêm pet vào danh sách pet

5 Trang web hiển thị lại danh sách

Mô tả ngắn gọn: Người dùng sửa thông tin pet Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng click icon “Edit” tại card hiển thị thông tin pet

1 Trang web hiển thị form nhập lại thông tin pet

2 Người dùng nhập thông tin và gửi

3 Trang web gửi thông tin cho server

4 Server kiểm tra thông tin, sửa thông tin pet

5 Trang web hiển thị sửa thành công

Mô tả ngắn gọn: Người dùng tìm kiếm pet Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng truy cập trang “Search pet”

1 Người dùng nhập thông tin pet muốn tìm và chọn icon “Search”

2 Trang web gửi thông tin cho server

3 Server kiểm tra thông tin, trả về các dữ liệu pet theo yêu cầu

4 Trang web hiển thị danh sách theo yêu cầu tìm kiếm

Mô tả ngắn gọn: Người dùng ghép đôi cho pet của mình Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng click icon “Pair” tại card hiển thị thông tin pet

1 Trang web gửi thông tin cho server

2 Server kiểm tra thông tin, gửi danh sách pet phù hợp với pet được chọn

3 Trang web hiển thị các dữ liệu được trả về

Hình 7 Use case manage account

Mô tả ngắn gọn: Người dùng sửa thông tin cá nhân Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng click icon “Edit” tại profile bản thân

1 Trang web hiển thị form nhập lại thông tin người dùng

2 Người dùng nhập thông tin và gửi

3 Trang web gửi thông tin cho server

4 Server kiểm tra thông tin, sửa thông tin người dùng

5 Trang web thông báo và hiển thị sửa thành công

Mô tả ngắn gọn: Người dùng đổi mật khẩu Điều kiện tiên quyết:

Người dùng đã đăng nhập vào trang web

Người dùng click “Change Password” tại form “Change information” Luồng sự kiện chính:

1 Trang web hiển thị form nhập mật khẩu cũ, mật khẩu mới

2 Người dùng nhập thông tin và gửi

3 Trang web gửi thông tin cho server

4 Server kiểm tra thông tin, sửa thông tin người dùng

5 Trang web thông báo và hiển thị sửa thành công

Thiết kế dữ liệu

Hình 8 Sơ đồ cơ sở dữ liệu

1 Comment Bảng chứa các bình luận của người dùng

3 Media Bảng media cho message, comment, post

4 Message Bảng lưu trữ tin nhắn của người dùng

5 Post Bảng lưu các bài viết người dùng đăng tải

6 Post_tags Bảng lưu các tag của bài viết

7 Tag Bảng lưu danh sách các tag

8 User Bảng lưu thông tin người dùng

9 User_friends Bảng lưu quan hệ các người dùng

10 User_groups Bảng lưu các người dùng trong group

11 User_history_tags Bảng lưu một số tag bài viết người dùng từng tương tác Chi tiết bảng

T Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(36) Khóa chính của bảng comment

2 Comment Varcha(255) Nội dung của comment

3 Post_id Varchar(36) Khóa phụ liên kết đến bảng post

Lưu id bài post comment thuộc về

4 User_id Varchar(36) Khóa phụ liên kết đến bảng user

Lưu id người dùng chủ comment

5 Media_id Varchar(36) Khóa phụ liên kết đến bảng media Lưu id media của comment

6 Replied_comment_i d Varchar(36) Khóa phụ liên kết đến bảng comment Lưu id comment cha

7 Create_at Datetime(6) Lưu thời gian comment được tạo

8 Update_at Datetime(6) Lưu thời gian comment sửa gần nhất

T Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(36) Khóa chính của bảng group

3 Avatar Varcha(255) Link đến ảnh đại diện của group

T Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(36) Khóa chính của bảng media

2 Link Varcha(255) Nội dung của media, link đến media

3 Type Enum(0,1) Lưu loại media 0 là ảnh, 1 là video

4 Post_id Varchar(36) Khóa phụ liên kết đến bảng post

Lưu id bài post chứa media này

5 Comment_id Varchar(36) Khóa phụ liên kết đến bảng comment Lưu id comment chứa media này

6 Message_id Varchar(36) Khóa phụ liên kết đến bảng media

Lưu id message chứa media này

T Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(36) Khóa chính của bảng message

2 Content Varcha(255) Nội dung của message

3 sender_id Varchar(36) Khóa phụ liên kết đến bảng user

Lưu id người gửi message

4 receiver_id Varchar(36) Khóa phụ liên kết đến bảng user

Lưu id người nhận message

5 group_id Varchar(36) Khóa phụ liên kết đến bảng group

Lưu id group nhận message

6 media_id Varchar(36) Khóa phụ liên kết đến bảng media

Lưu id media của message

7 Create_at Datetime(6) Lưu thời gian message được tạo

Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(36) Khóa chính của bảng post

2 Title Varcha(255) Tiêu đề của post

3 Description Varchar(36) Nội dung của post

4 User_id Varchar(36) Khóa phụ liên kết đến bảng user

Lưu id người dùng chủ post

5 Media_id Varchar(36) Khóa phụ liên kết đến bảng media

Lưu id media của post

7 Create_at Datetime(6) Lưu thời gian post được tạo

8 Update_at Datetime(6) Lưu thời gian post sửa gần nhất

Tên cột Kiểu dữ liệu Mô tả

1 Tag_id Varchar(36) Khóa phụ liên kết đến bảng tag

Lưu id tag của post

2 Post_id Varcha(36) Khóa phụ liên kết đến bảng post

T Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(36) Khóa chính của bảng tag

Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(36) Khóa chính của bảng user

2 First_name Varchar(255) Lưu họ người dùng

3 Last_name Varchar(255) Lưu tên người dùng

4 Email Varchar(255) Lưu email của người dùng

5 Password Varchar(255) Lưu mật khẩu của người dùng

6 Refresh_token Varchar(255) Lưu refresh_token

7 Avatar Varchar(255) Lưu link đến ảnh avatar của người dùng

8 Status Varchar(255) Lưu trạng thái của user

9 Create_at Datetime(6) Lưu thời gian user được tạo

10 Update_at Datetime(6) Lưu thời gian user sửa gần nhất

Tên cột Kiểu dữ liệu Mô tả

1 User_id Varchar(36) Khóa phụ liên kết đến bảng user

2 Friend_id Varchar(36) Khóa phụ liên kết đến bảng user

Tên cột Kiểu dữ liệu Mô tả

1 User_id Varchar(36) Khóa phụ liên kết đến bảng user

2 Group_id Varchar(36) Khóa phụ liên kết đến bảng group

Lưu id group user thuộc về

T Tên cột Kiểu dữ liệu Mô tả

1 User_id Varchar(36) Khóa phụ liên kết đến bảng user

2 Tag_id Varchar(36) Khóa phụ liên kết đến bảng tag

Thiết kế giao diện

Hình 9 Giao diện sign up

Hình 10 Giao diện sign in

Hình 11 Giao diện home page

Hình 12 Giao diện home page mobile

Hình 13 Giao diện create post

Hình 14 Giao diện create post mobile

Hình 15 Giao diện list friends

Hình 16 Giao diện list friends mobile

Hình 17 Giao diện srearch friends

Hình 18 Giao diện search friends mobile

Hình 19 Giao diện friends request

Hình 20 Giao diện friends request mobile

Hình 21 Giao diện friends sent

Hình 22 Giao diện friends sent mobile

Hình 23 Giao diện my pets

Hình 24 Giao diện my pets mobile

Hình 25 Giao diện thêm pet

Hình 26 Giao diện edit pet

Hình 27 Giao diện find pet

Hình 28 Giao diện pair pet

Hình 30 Giao diện newfeed mobile

Hình 31 Giao diện list my groups

Hình 32 Giao diện list my groups mobile

Hình 33 Giao diện search groups

Hình 34 Giao diện search group mobile

Hình 35 Giao diện group profile

Trang xem danh sách user trong group

Hình 36 Giao diện members in group

Thiết kế các api

- GET /api/v1/users: Lấy danh sách người dùng.

- POST /api/v1/users: Tạo người dùng mới.

- GET /api/v1/users/my-profile: Lấy hồ sơ của người dùng được xác thực.

- GET /api/v1/users/{id}: Lấy thông tin về một người dùng cụ thể bằng ID.

- PUT /api/v1/users/{id}: Cập nhật thông tin cho một người dùng cụ thể.

- DELETE /api/v1/users/{id}: Xóa một người dùng.

- POST /api/v1/users/upload-avatar: Tải lên hình đại diện cho người dùng được xác thực.

- PUT /api/v1/users/delete-history-tags: Xóa các nhãn lịch sử cho người dùng được xác thực. Auth API:

- POST /auth/register: Đăng ký người dùng mới.

- POST /auth/login: Đăng nhập và xác thực người dùng.

- POST /auth/refresh-token: Làm mới mã xác thực.

- POST /api/v1/posts: Tạo bài đăng mới.

- GET /api/v1/posts: Lấy danh sách bài đăng.

- PUT /api/v1/posts/{id}: Cập nhật một bài đăng cụ thể.

- DELETE /api/v1/posts/{id}: Xóa một bài đăng cụ thể.

- GET /api/v1/posts/{id}: Lấy thông tin về một bài đăng cụ thể.

- GET /api/v1/posts/user/group: Lấy bài đăng từ nhóm người dùng.

- GET /api/v1/posts/group/{id}: Lấy bài đăng từ một nhóm cụ thể.

- GET /api/v1/posts/user/{id}: Lấy bài đăng từ một người dùng cụ thể.

- GET /api/v1/posts/recommended: Lấy các bài đăng được đề xuất.

- POST /api/v1/posts/{id}/like: Thích một bài đăng cụ thể.

- GET /api/v1/comments: Lấy danh sách bình luận.

- POST /api/v1/comments: Thêm bình luận mới.

- GET /api/v1/comments/post/{post_id}: Lấy bình luận cho một bài đăng cụ thể.

- GET /api/v1/comments/user/{user_id}: Lấy bình luận từ một người dùng cụ thể.

- GET /api/v1/comments/{id}: Lấy thông tin về một bình luận cụ thể.

- PUT /api/v1/comments/{id}: Cập nhật một bình luận cụ thể.

- DELETE /api/v1/comments/{id}: Xóa một bình luận cụ thể.

- GET /api/v1/messages: Lấy danh sách tin nhắn.

- POST /api/v1/messages: Gửi tin nhắn mới.

- GET /api/v1/messages/{id}: Lấy thông tin về một tin nhắn cụ thể.

- DELETE /api/v1/messages/{id}: Xóa một tin nhắn cụ thể.

- GET /api/v1/messages/conversations/all: Lấy tất cả các cuộc trò chuyện.

- GET /api/v1/messages/sender/{sender_id}: Lấy tin nhắn được gửi bởi một người gửi cụ thể.

- GET /api/v1/messages/receiver/{receiver_id}: Lấy tin nhắn nhận được bởi một người nhận cụ thể.

- GET /api/v1/messages/my-messages-to/{receiver_id}: Lấy tin nhắn được gửi bởi người dùng được xác thực đến một người nhận cụ thể.

- GET /api/v1/messages/conversation/user/{user_id}: Lấy tin nhắn trong một cuộc trò chuyện với một người dùng cụ thể.

- GET /api/v1/messages/conversation/group/{group_id}: Lấy tin nhắn trong một cuộc trò chuyện nhóm cụ thể.

- GET /api/v1/groups: Lấy danh sách nhóm.

- POST /api/v1/groups: Tạo một nhóm mới.

- GET /api/v1/groups/my-groups: Lấy các nhóm mà người dùng được xác thực là một phần của.

- GET /api/v1/groups/{id}: Lấy thông tin về một nhóm cụ thể.

- PUT /api/v1/groups/{id}: Cập nhật thông tin cho một nhóm cụ thể.

- DELETE /api/v1/groups/{id}: Xóa một nhóm cụ thể.

- GET /api/v1/groups/user/{user_id}: Lấy các nhóm mà một người dùng cụ thể là một phần của.

- POST /api/v1/groups/{id}/join: Tham gia một nhóm cụ thể.

- POST /api/v1/groups/{id}/leave: Rời khỏi một nhóm cụ thể.

- GET /api/v1/relationships: Lấy danh sách mối quan hệ.

- GET /api/v1/relationships/recommended: Lấy mối quan hệ được đề xuất.

- GET /api/v1/relationships/user/{id}: Lấy mối quan hệ của một người dùng cụ thể.

- GET /api/v1/relationships/my-friends: Lấy mối quan hệ của bạn bè cho người dùng được xác thực.

- GET /api/v1/relationships/{id}: Lấy thông tin về một mối quan hệ cụ thể.

- GET /api/v1/relationships/add-friend/{id}: Gửi yêu cầu kết bạn.

- GET /api/v1/relationships/accept-friend/{id}: Chấp nhận yêu cầu kết bạn.

- GET /api/v1/relationships/cancel-friend/{id}: Hủy yêu cầu kết bạn.

- GET /api/v1/relationships/reject-friend/{id}: Từ chối yêu cầu kết bạn.

- GET /api/v1/relationships/block-friend/{id}: Chặn một người bạn.

- GET /api/v1/relationships/unblock-friend/{id}: Bỏ chặn một người bạn.

- GET /api/v1/relationships/unfriend/{id}: Hủy kết bạn với một người dùng.

- GET /api/v1/relationships/follow/{id}: Theo dõi một người dùng.

- GET /api/v1/relationships/unfollow/{id}: Hủy theo dõi một người dùng.

- GET /api/v1/pets: Lấy danh sách thú cưng.

- POST /api/v1/pets: Tạo một thú cưng mới.

- GET /api/v1/pets/my-pets: Lấy thú cưng của người dùng được xác thực.

- GET /api/v1/pets/user/{id}: Lấy thú cưng của một người dùng cụ thể.

- GET /api/v1/pets/{id}: Lấy thông tin về một thú cưng cụ thể.

- PUT /api/v1/pets/{id}: Cập nhật thông tin cho một thú cưng cụ thể.

- DELETE /api/v1/pets/{id}: Xóa một thú cưng cụ thể.

- GET /api/v1/pets/pairing/{id}: Lấy thông tin ghép đôi cho một thú cưng cụ thể.

Cài đặt và kiểm thừ

T Chức năng Độ hoàn thành Ghi chú

Source Code

BackEnd: https://github.com/Vippro67/backend-project2

FrontEnd: https://github.com/Vippro67/frontend-project2

Tìm hiểu về NestJS

Giới thiệu

NestJS là một framework Node.js mã nguồn mở được phát triển bởi Nest Labs Nó được xây dựng dựa trên TypeScript và các tính năng mạnh mẽ của Node.js, cung cấp một nền tảng vững chắc để phát triển các ứng dụng server-side hiệu quả và dễ bảo trì.

NestJS được thiết kế dựa trên các nguyên tắc của OOP (Object-Oriented Programming),

FP (Functional Programming) và FRP (Functional Reactive Programming) Nó cung cấp một bộ các thư viện và công cụ giúp các nhà phát triển xây dựng các ứng dụng server- side một cách nhanh chóng và dễ dàng, với các tính năng như:

- Kiến trúc microservices: NestJS hỗ trợ kiến trúc microservices, giúp bạn xây dựng các ứng dụng lớn và phức tạp một cách dễ dàng.

- Hỗ trợ TypeScript: NestJS sử dụng TypeScript để cung cấp hỗ trợ mạnh mẽ cho kiểu dữ liệu, giúp bạn viết mã rõ ràng và dễ bảo trì hơn.

- Dependency injection: NestJS sử dụng dependency injection để giúp bạn quản lý các phụ thuộc của ứng dụng, giúp bạn viết mã linh hoạt và dễ test hơn.

- Tích hợp sẵn với các công nghệ phổ biến: NestJS tích hợp sẵn với các công nghệ phổ biến, chẳng hạn như MongoDB, MySQL và PostgreSQL, giúp bạn dễ dàng tích hợp các ứng dụng của mình với các nguồn dữ liệu.

NestJS

NestJS cung cấp một số tính năng chính, bao gồm:

- Kiến trúc microservices: NestJS hỗ trợ kiến trúc microservices, giúp bạn xây dựng các ứng dụng lớn và phức tạp một cách dễ dàng.

- Hỗ trợ TypeScript: NestJS sử dụng TypeScript để cung cấp hỗ trợ mạnh mẽ cho kiểu dữ liệu, giúp bạn viết mã rõ ràng và dễ bảo trì hơn.

- Dependency injection: NestJS sử dụng dependency injection để giúp bạn quản lý các phụ thuộc của ứng dụng, giúp bạn viết mã linh hoạt và dễ test hơn.

- Tích hợp sẵn với các công nghệ phổ biến: NestJS tích hợp sẵn với các công nghệ phổ biến, chẳng hạn như MongoDB, MySQL và PostgreSQL, giúp bạn dễ dàng tích hợp các ứng dụng của mình với các nguồn dữ liệu.

Các thành phần chính trong NestJS

- Module: Module là đơn vị cơ bản của ứng dụng NestJS Mỗi module là một tập hợp các services, providers và controllers.

- Service: Service là một lớp chứa logic nghiệp vụ của ứng dụng.

- Provider: Provider là một lớp cung cấp các dịch vụ cho ứng dụng.

- Controller: Controller là một lớp xử lý các yêu cầu HTTP của ứng dụng.

- Pipe: Pipe là một lớp được sử dụng để chuyển đổi dữ liệu.

- Interceptor: Interceptor là một lớp được sử dụng để chặn và sửa đổi các yêu cầu HTTP của ứng dụng.

- Guard: Guard là một lớp được sử dụng để kiểm tra quyền truy cập của người dùng vào ứng dụng.

2.3 Các bước xây dựng ứng dụng Để xây dựng ứng dụng NestJS, bạn cần thực hiện các bước sau:

- Khởi tạo ứng dụng NestJS.

- Tạo các modules, controllers, services và providers.

- Gọi các services từ controllers.

Tìm hiểu về ReactJS

ReactJS

Các tính năng chính của ReactJS bao gồm:

- Components: ReactJS cho phép phát triển ứng dụng web theo mô hình component Các component là các phần tử UI độc lập có thể được tái sử dụng trong nhiều phần khác nhau của ứng dụng Điều này giúp cho việc phát triển ứng dụng trở nên dễ dàng hơn, hiệu quả hơn và dễ bảo trì hơn.

- Virtual DOM: ReactJS sử dụng Virtual DOM để tối ưu hóa hiệu suất của ứng dụng Virtual DOM là một bản sao ảo của DOM thực tế Khi dữ liệu thay đổi, ReactJS sẽ chỉ cập nhật các phần của Virtual DOM bị ảnh hưởng Điều này giúp giảm thiểu số lượng thay đổi cần thực hiện trên DOM thực tế, dẫn đến cải thiện hiệu suất.

- JSX: JSX là một ngôn ngữ lập trình phân biệt được sử dụng trong ReactJS để mô tả các thành phần UI JSX kết hợp HTML, CSS và JavaScript, giúp cho việc tạo giao diện người dùng trở nên dễ dàng hơn.

Các thành phần chính của ReactJS bao gồm:

- App: Thành phần gốc của ứng dụng ReactJS Nó chứa tất cả các thành phần khác của ứng dụng.

- Component: Thành phần cơ bản của ReactJS Nó đại diện cho một phần tử UI độc lập.

- State: Dữ liệu trạng thái của một component.

- Props: Dữ liệu được truyền từ component cha sang component con.

- Event handler: Hàm xử lý các sự kiện của một component.

- React Router: Thư viện giúp quản lý điều hướng trong ứng dụng ReactJS.

- Redux: Thư viện giúp quản lý trạng thái toàn ứng dụng ReactJS.

- React Native: Thư viện giúp phát triển ứng dụng di động với ReactJS.

Tìm hiểu về ViteJS

ViteJS

Các tính năng chính của ViteJS bao gồm:

- Tốc độ: ViteJS được thiết kế để nhanh chóng khởi động và xây dựng ứng dụng Nó sử dụng Rollup để biên dịch mã JavaScript và CSS, và tạo ra các tệp tối ưu hóa cho hiệu suất.

- Sự đơn giản: ViteJS có giao diện người dùng trực quan và dễ sử dụng Nó không yêu cầu cấu hình phức tạp và cung cấp hỗ trợ cho các tính năng phổ biến như hot reload và live code editing.

- Tính mở: ViteJS là một framework JavaScript mã nguồn mở Nó có một cộng đồng lớn và tích cực phát triển các tính năng và plugin mới.

Các thành phần chính của ViteJS bao gồm:

- CLI: ViteJS cung cấp một giao diện dòng lệnh (CLI) để khởi động và xây dựng ứng dụng CLI có thể được sử dụng để thực hiện các tác vụ như tạo dự án mới, cài đặt thư viện và chạy ứng dụng.

- Rollup: Rollup là một công cụ biên dịch JavaScript được sử dụng bởi ViteJS để tạo ra các tệp tối ưu hóa cho hiệu suất Rollup có thể biên dịch các tệp JavaScript, CSS và TypeScript.

- HMR: Hot Module Reload (HMR) là một tính năng cho phép bạn cập nhật các mô- đun JavaScript trong ứng dụng đang chạy mà không cần tải lại trang HMR được hỗ trợ bởi ViteJS và có thể được sử dụng để nhanh chóng sửa lỗi hoặc triển khai các tính năng mới.

- Live Code Editing: Live Code Editing là một tính năng cho phép bạn xem thay đổi mã của mình trong ứng dụng đang chạy mà không cần tải lại trang Live Code Editing được hỗ trợ bởi ViteJS và có thể được sử dụng để thử nghiệm mã mới hoặc debug ứng dụng của bạn.

Tìm hiểu về socket.io

Giới thiệu

Socket.io là một thư viện JavaScript mã nguồn mở được sử dụng để xây dựng các ứng dụng web thời gian thực Nó cung cấp một API đơn giản và dễ sử dụng để giao tiếp giữa máy khách và máy chủ.

Socket.io sử dụng WebSocket, một giao thức mạng hai chiều, để giao tiếp giữa máy khách và máy chủ WebSocket cho phép các ứng dụng web gửi và nhận dữ liệu một cách đồng bộ và hiệu quả.

Socket.io

Các tính năng chính của Socket.io

- Giao tiếp hai chiều: Socket.io cho phép các ứng dụng web gửi và nhận dữ liệu một cách đồng bộ và hiệu quả.

- Tính thời gian thực: Socket.io cung cấp khả năng giao tiếp thời gian thực giữa máy khách và máy chủ.

- Cấu hình linh hoạt: Socket.io có thể được cấu hình để đáp ứng các nhu cầu cụ thể của ứng dụng.

- Hỗ trợ nhiều trình duyệt: Socket.io hỗ trợ tất cả các trình duyệt hiện đại.

Các thành phần chính của Socket.io:

- Server: Socket.io cung cấp một lớp server để xử lý các kết nối từ máy khách.

- Client: Socket.io cung cấp một lớp client để kết nối với máy chủ và gửi nhận dữ liệu.

- Events: Socket.io cung cấp một hệ thống event để xử lý các sự kiện được gửi từ máy khách hoặc máy chủ.

Ngày đăng: 15/05/2024, 09:29

HÌNH ẢNH LIÊN QUAN

Hình  2 Chi tiết use case PostAndCommentOnPosts - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 2 Chi tiết use case PostAndCommentOnPosts (Trang 12)
Hình  3 Use case message - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 3 Use case message (Trang 14)
Hình  4 Use case groups - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 4 Use case groups (Trang 15)
Hình  5 Use case relationships and friends - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 5 Use case relationships and friends (Trang 17)
Hình  7 Use case manage account - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 7 Use case manage account (Trang 22)
Hình  8 Sơ đồ cơ sở dữ liệu - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 8 Sơ đồ cơ sở dữ liệu (Trang 24)
Hình  9 Giao diện sign up - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 9 Giao diện sign up (Trang 28)
Hình  10 Giao diện sign in - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 10 Giao diện sign in (Trang 29)
Hình  12 Giao diện home page mobile - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 12 Giao diện home page mobile (Trang 30)
Hình  11 Giao diện home page - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 11 Giao diện home page (Trang 30)
Hình  13 Giao diện create post - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 13 Giao diện create post (Trang 31)
Hình  15 Giao diện list friends - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 15 Giao diện list friends (Trang 32)
Hình  17 Giao diện srearch friends - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 17 Giao diện srearch friends (Trang 33)
Hình  18 Giao diện search friends mobile - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 18 Giao diện search friends mobile (Trang 33)
Hình  19 Giao diện friends request - đồ án 2 mạng xã hội kết hợp chatbot cho người nuôi thú cưng
nh 19 Giao diện friends request (Trang 34)

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w