Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.22 MB, 56 trang )
<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">
<small>Đối tượng hướng đến...7</small>
<small>Kết quả mong đợi...8</small>
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5"><small>Hình 1 Sơ đồ use case tổng quát...9</small>
<small>Hình 2 Chi tiết use case PostAndCommentOnPosts...12</small>
<small>Hình 3 Use case message...14</small>
<small>Hình 4 Use case groups...16</small>
<small>Hình 5 Use case relationships and friends...18</small>
<small>Hình 6 Use case manage pets...21</small>
<small>Hình 7 Use case manage account...23</small>
<small>Hình 8 Sơ đồ cơ sở dữ liệu...25</small>
<small>Hình 9 Giao diện sign up...29</small>
<small>Hình 10 Giao diện sign in...30</small>
<small>Hình 11 Giao diện home page...31</small>
<small>Hình 12 Giao diện home page mobile...31</small>
<small>Hình 13 Giao diện create post...32</small>
<small>Hình 14 Giao diện create post mobile...32</small>
<small>Hình 15 Giao diện list friends...33</small>
<small>Hình 16 Giao diện list friends mobile...33</small>
<small>Hình 17 Giao diện srearch friends...34</small>
<small>Hình 18 Giao diện search friends mobile...34</small>
<small>Hình 19 Giao diện friends request...35</small>
<small>Hình 20 Giao diện friends request mobile...35</small>
<small>Hình 21 Giao diện friends sent...36</small>
<small>Hình 22 Giao diện friends sent mobile...36</small>
<small>Hình 23 Giao diện my pets...37</small>
<small>Hình 24 Giao diện my pets mobile...37</small>
<small>Hình 25 Giao diện thêm pet...38</small>
<small>Hình 26 Giao diện edit pet...38</small>
<small>Hình 27 Giao diện find pet...39</small>
<small>Hình 28 Giao diện pair pet...39</small>
<small>Hình 29 Giao diện newfeed...40</small>
<small>Hình 30 Giao diện newfeed mobile...40</small>
<small>Hình 31 Giao diện list my groups...41</small>
<small>Hình 32 Giao diện list my groups mobile...41</small>
<small>Hình 33 Giao diện search groups...42</small>
<small>Hình 34 Giao diện search group mobile...42</small>
<small>Hình 35 Giao diện group profile...43</small>
<small>Hình 36 Giao diện members in group...43</small>
<small>Hình 37 Giao diện message...44</small>
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">20522103 Triệu Tuấn Tú
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 ni 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 ứngdụ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. Ngồi ra, nó cũng nhằm cung cấp cho chúngta 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.
Visual Studio Code: IDE chính để xây dựng ứng dụng
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">MySQL: Cơ sở dữ liệu lưu trữ thông tin của ứng dụngPostman: Hỗ trợ test các API được tạo bởi Server
1. Tổng quan đề tài
- Tên website : PetMe
- 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
- Mơ hình Client Server- Kiến trúc 3 lớp
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 ProductsAssociation), năm 2022, có khoảng 90,5 triệu hộ gia đình ở Hoa Kỳ ni í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 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 ni thú cưng cao và thường xuyên sử dụng các ứng dụng mạng xã hội.
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">- 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 ni 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.
Kết quả mong đợ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
- Xem, bình luận, thích bài viết
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">Use case diagram
<i><small>Hình 1 Sơ đồ use case tổng quát</small></i>
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">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 tra4. Người dùng đăng ký thành công và đăng nhập vào trang webLuồng sự kiện phụ:
Thông báo mật khẩu nhập lại không trùngThông báo email đã đăng ký
Lỗi từ phía Server: Thơng báo có lỗi từ phía Server
1. Trang web hiển thị form đăng nhập
2. Người dùng nhập email password và chọn đăng nhập3. Trang web gửi username, password cho Server kiểm tra4. Người dùng đăng nhập thành công vào trang webLuồng sự kiện phụ:
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
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12"><i><small>Hình 2 Chi tiết use case PostAndCommentOnPosts</small></i>
Use case: Create postTác nhân: User
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 webSự kiện kích hoạt:
Người dùng chọn “Create post” tại navbarLuồng sự kiện chính:
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ới5. Trang web hiển thị bài viết đã đăng
Luồng sự kiện phụ:
</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">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ết5. Trang web thông báo sửa thành công
Luồng sự kiện phụ:Không
Use case: Like postTác nhân: User
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 webSự kiện kích hoạt:
Người dùng chọn vào icon “Like post” tại bài viếtLuồng sự kiện chính:
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ùng3. Trang web hiển thị lại trang thái like bài viết
Luồng sự kiện phụ:Không
<b>Use case: Add comment</b>
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">Người dùng chọn vào icon “Comment” tại bài viếtLuồng sự kiện chính:
1. Trang web hiển thị danh sách comment. Ơ nhập comment mới2. 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
Luồng sự kiện phụ:Khơng
<i><small>Hình 3 Use case message</small></i>
Use case: Send messageTác nhân: User
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 webSự kiện kích hoạt:
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ắn2. Người dùng chọn cuộc trò chuyện, nhập tin nhắn và nhấn gửi3. Trang web gửi thông tin cho server
4. Server kiểm tra thông tin, lưu tin nhắn mới5. Trang web hiển thị lại danh sách các tin nhắnLuồng sự kiện phụ:
Không
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">Use case: Recive messageTác nhân: User
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 webSự kiện kích hoạt:
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
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ắn2. Khi có tin nhắn mới server sẽ gửi tín hiệu đến trang web3. Trang web hiển thị tin nhắn mới
Luồng sự kiện phụ:Khơng
<i><small>Hình 4 Use case groups</small></i>
Use case: Create groupTác nhân: User
Mô tả ngắn gọn: Người dùng tạo group mới Điều kiện tiên quyết:
</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">Người dùng đã đăng nhập vào trang webSự kiện kích hoạt:
Người dùng chọn “Create group” tại trang groupLuồng sự kiện chính:
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ới5. Trang web hiển thị lại các group
Luồng sự kiện phụ:Không
Use case: Join groupTác nhân: User
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 webNgười dùng chưa ở trong group nàySự kiện kích hoạt:
Người dùng chọn “Join” tại trang profile của groupLuồng sự kiện chính:
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ên3. Trang web hiển thị thông báo tham gia thành công, hiẻn thị lại trangLuồng sự kiện phụ:
Người dùng chọn “Leave” tại trang profile của groupLuồng sự kiện chính:
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
</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">3. Trang web hiển thị thông báo rời thành công, hiẻn thị lại trangLuồng sự kiện phụ:
<i><small>Hình 5 Use case relationships and friends</small></i>
Use case: Find userTác nhân: User
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
</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">Use case: Add friend requestTác nhân: User
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 Sự kiện kích hoạt:
Người dùng click “Add friend” tại trang “Search Friend”Luồng sự kiện chính:
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ùng3. Trang web hiển thị thông báo
Luồng sự kiện phụ:Không
Use case: Decline requestTác nhân: User
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”Sự kiện kích hoạt:
Người dùng click “Decline” tại trang “Friend Request”Luồng sự kiện chính:
1. Trang web gửi thơng tin cho server
2. Server kiểm tra thơng tin xố mối quan hệ giữa hai người dùng3. Trang web hiển thị thông báo
Luồng sự kiện phụ:Không
</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">Use case: Un friend requestTác nhân: User
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”Sự kiện kích hoạt:
Người dùng click “Un friend” tại trang “List Friend”Luồng sự kiện chính:
1. Trang web gửi thơng tin cho server
2. Server kiểm tra thơng tin xố mối quan hệ giữa hai người dùng3. Trang web hiển thị thông báo
Luồng sự kiện phụ:Không
Use case: Cancel requestTác nhân: User
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”Sự kiện kích hoạt:
Người dùng click “Cancel” tại trang “Request Sent”Luồng sự kiện chính:
1. Trang web gửi thơng tin cho server
2. Server kiểm tra thơng tin, xố u cầu kết bạn 3. Trang web hiển thị thông báo
Luồng sự kiện phụ:Không
Use case: Acccept requestTác nhân: User
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”Sự kiện kích hoạt:
Người dùng click “Accept”
</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">Luồng sự kiện chính:
1. Trang web gửi thơng tin cho server
2. Server kiểm tra thơng tin xố mối quan hệ giữa hai người dùng3. Trang web hiển thị thông báo
Luồng sự kiện phụ:Khơng
<i><small>Hình 6 Use case manage pets</small></i>
Use case: Add petTác nhân: User
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 Sự kiện kích hoạt:
Người dùng click “Add pet” tại trang “My pets”Luồng sự kiện chính:
1. Trang web hiển thị form nhập thông tin pet2. Người dùng nhập thông tin và gửi
</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">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 pet5. Trang web hiển thị lại danh sách
Luồng sự kiện phụ:Không
Use case: Edit petTác nhân: User
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 Sự kiện kích hoạt:
Người dùng click icon “Edit” tại card hiển thị thơng tin petLuồng sự kiện chính:
1. Trang web hiển thị form nhập lại thông tin pet2. 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
Luồng sự kiện phụ:Không
Use case: Search petTác nhân: User
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 Sự kiện kích hoạt:
Người dùng truy cập trang “Search pet” Luồng sự kiện chính:
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ầu4. Trang web hiển thị danh sách theo yêu cầu tìm kiếm
Luồng sự kiện phụ:Không
Use case: Pair petTác nhân: User
</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">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 Sự kiện kích hoạt:
Người dùng click icon “Pair” tại card hiển thị thông tin petLuồng sự kiện chính:
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ề
Luồng sự kiện phụ:Khơng
<i><small>Hình 7 Use case manage account</small></i>
Use case: Change informationTác nhân: User
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 Sự kiện kích hoạt:
Người dùng click icon “Edit” tại profile bản thânLuồng sự kiện chính:
1. Trang web hiển thị form nhập lại thông tin người dùng2. 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 Luồng sự kiện phụ:
Không
</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">Use case: Change passwordTác nhân: User
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 Sự kiện kích hoạt:
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ới2. 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 Luồng sự kiện phụ:
Không
</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">4 Message Bảng lưu trữ tin nhắn của người dùng5 Post Bảng lưu các bài viết người dùng đăng tải6 Post_tags Bảng lưu các tag của bài viết
9 User_friends Bảng lưu quan hệ các người dùng10 User_groups Bảng lưu các người dùng trong group
</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">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
Lưu id bài post comment thuộc về
Lưu id người dùng chủ comment
MediaST
</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">Lưu id bài post chứa media này5 Comment_id Varchar(36) Khóa phụ liên kết đến bảng
3 sender_id Varchar(36) Khóa phụ liên kết đến bảng userLưu id người gửi message4 receiver_id Varchar(36) Khóa phụ liên kết đến bảng user
Lưu id người nhận message5 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 mediaLưu id media của message
7 Create_at Datetime(6) Lưu thời gian message được tạoPost
4 User_id Varchar(36) Khóa phụ liên kết đến bảng userLưu id người dùng chủ post5 Media_id Varchar(36) Khóa phụ liên kết đến bảng media
Lưu id media của post7 Create_at Datetime(6) Lưu thời gian post được tạo8 Update_at Datetime(6) Lưu thời gian post sửa gần nhấtPost_tags
STT
</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">1 Tag_id Varchar(36) Khóa phụ liên kết đến bảng tagLưu id tag của post
Lưu id postTag
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
9 Create_at Datetime(6) Lưu thời gian user được tạo10 Update_at Datetime(6) Lưu thời gian user sửa gần nhấtUser_friends
1 User_id Varchar(36) Khóa phụ liên kết đến bảng userLưu id user
2 Friend_id Varchar(36) Khóa phụ liên kết đến bảng userLưu id bạn user
T
</div><span class="text_page_counter">Trang 28</span><div class="page_container" data-page="28">1 User_id Varchar(36) Khóa phụ liên kết đến bảng userLưu id user
2 Group_id Varchar(36) Khóa phụ liên kết đến bảng groupLưu id group user thuộc về User_history_tags
1 User_id Varchar(36) Khóa phụ liên kết đến bảng userLưu id user
Lưu tag bài viết
4. Thiết kế giao diện
<small>Trang sign up</small>
<i><small>Hình 9 Giao diện sign up</small></i>
<small>Trang sign in</small>
</div>