Tìm hiểu spring boot và xây dựng trang web mạng xã hội

Phương pháp thực hiện

Chương 1 Cơ sở lý thuyết

Chương 2 Khảo sát và phân tích hiện trạng Chương 3 Mô hình hoá yêu cầu

Chương 4 Thiết kế phần mềm

Chương 5 Thiết kế giao diện xử lý

Chương 6 Cài đặt và kiểm thử ứng dụng

1 Những kết quả đạt được

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

- Tìm hiểu về Java Spring Boot, Reactjs

- Tham khảo các tài liệu về xây dựng trang thương mại điện tử

Bắt đầu tiểu luận chuyên ngành

- Thảo luận và đề ra các chức năng, giao diện chính của ứng dụng

- Từ đó, lên kế hoạch cho luận văn Tiến hành viết đề cương luận văn

- Khảo sát hiện trạng về nhu cầu sử dụng mạng xã hội

Tham khảo các trang mạng xã hội nổi tiếng như:

- Đánh giá mức độ khả thi của đồ án dựa theo khả năng của bản thân

- Từ đó xác định các yêu cầu của đề tài Viết khảo sát và yêu cầu

- Thực hiện mô hình hoá các yêu cầu, thiết kế các diagram, đặc tả chi tiết

- Từ đó xây dựng database phù hợp với các chức năng, liệt kê các giao diện chức năng, các API cần sử dụng

- Cài đặt database và tìm kiếm dữ liệu

- Thực hiện xây dựng bản thiết kế giao diện trang web một cách chi tiết Thiết kế các API cần sử dụng

+ Cài đặt các giao diện như đã thiết kế

+ Tạo liên kết giữa các trang với nhau

+ Thực hiện kết nối với database, xây dựng trang web theo mô hình MVC + Cài đặt các API

- Back-End: Tiếp tục cài đặt các API đã được liệt kê như thiết kế

- Front-End: Thực hiện gọi cái API để tạo web động

- Liên tục kiểm tra giao tiếp giữa Back-end và Front- end

- Kiểm tra về luồng hoạt động của trang web

- Tiến hành test toàn bộ hệ thống để hoàn thiện trang web

- Chỉnh sửa các tính năng đã cài đặt hoặc thêm các tính năng mới để tối ưu hơn

- Tiến hành viết báo cáo

- Hoàn thành báo cáo Kết thúc tiểu luận chuyên ngành

- Xem lại code và kiểm thử lại hệ thống, thảo luận xác định các phần cần chỉnh sửa, các chức năng còn thiếu

Bắt đầu khóa luận tốt nghiệp

- Bảo trì hệ thống, tối ưu hóa các API, điều chỉnh lại giao diện

- Tổ chức lại các thư mục, các tệp

- Thực hiện các chức năng còn thiếu Thiết kế và cài đặt các API, giao diện cho các chức năng đó

- Tìm hiểu thuật toán AI Collaborative filtering để xây dựng hệ thống gợi ý bạn bè và bài viết

- Tìm hiểu thư viện nhận diện hình ảnh để ràng buộc dữ liệu đầu vào

- Kiểm thử hệ thống và sữa lỗi

- Tìm hiểu Deploy hệ thống và tiến hành Deploy Tiến hành viết báo cáo

- Hoàn thành báo cáo Kết thúc khoá luận tốt nghiệp Ý kiến của giảng viên hướng dẫn

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

Nguyễn Tấn Kiệt Phạm Qui Tâm

1 Tính cấp thiết của đề tài: 17

2 Mục đích của đề tài: 18

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

CHƯƠNG 2: KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG 34

CHƯƠNG 3: MÔ HÌNH HOÁ YÊU CẦU 51

3.1 Mô hình kiến trúc hệ thống: 51

CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 79

4.3 Cơ sở dữ liệu trên Fire base: 99

CHƯƠNG 5: THIẾT KẾ GIAO DIỆN XỬ LÝ 102

5.1 Giao diện trang Đăng nhập: 102

5.2 Giao diện trang Đăng ký: 103

5.4 Giao diện trang chủ có Sidebar: 106

5.7 Giao diện chi tiết bài viết: 111

5.8 Giao diện thả cảm xúc: 113

5.10 Giao diện trang cá nhân: 115

5.11 Giao diện trang cá nhân không có bài viết: 117

5.12 Giao diện trang cá nhân private: 118

5.13 Giao diện trang chỉnh sửa thông tin: 119

5.14 Giao diện ảnh đại diện: 120

CHƯƠNG 6: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 126

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC: 142

2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM: 143

Hình 1.2: Kiến trúc Spring Framework 20

Hình 1.3: Spring boot flow architecture 21

Hình 1.8: Firebase real-time database 28

Hình 1.9: Firebase gửi dữ liệu tới client 29

Hình 1.11: Neighborhood-based collaborative Filtering 31

Hình 2.1: Trang đăng nhập Facebook 35

Hình 2.3: Đăng bài viết Facebook 36

Hình 2.4: Bài viết trên Facebook 37

Hình 2.5: Trang cá nhân Facebook 38

Hình 2.6: Trang đăng nhập Instagram 39

Hình 2.7: Trang đăng kí Instagram 40

Hình 2.10: Trang cá nhân Instagram 42

Hình 2.11: Trang người dùng Instagram 43

Hình 3.1: Kiến trúc hệ thống 51

Hình 4.1: Lược đồ tuần tự Đăng nhập 79

Hình 4.2: Lược đồ tuần tự đăng ký 80

Hình 4.3: Lược đồ tuần tự nhắn tin 81

Hình 4.4: Lược đồ tuần tự bình luận 82

Hình 4.5: Lược đồ tuần tự đổi ảnh đại diện 83

Hình 4.6: Lược đồ tuần tự chia sẻ bài viết 84

Hình 4.7: Lược đồ tuần tự đăng bài 85

Hình 4.8: Lược đồ tuần tự chỉnh sửa trang cá nhân 86

Hình 4.9: Lược đồ tuần tự tìm kiếm người dùng 87

Hình 4.10: Lược đồ tuần tự kết bạn 88

Hình 4.11: Cơ sở dữ liệu 89

Hình 4.12: Cơ sở dữ liệu trên Firebase 99

Hình 5.1: Giao diện trang đăng nhập 102

Hình 5.2: Giao diện trang đăng ký 103

Hình 5.3: Giao diện trang chủ 104

Hình 5.4: Giao diện trang chủ dark 105

Hình 5.5: Giao diện trang chủ có Sidebar 106

Hình 5.6: Giao diện trang chủ có sidebar dark 107

Hình 5.8: Giao diện bài viết 109

Hình 5.9: Giao diện chi tiết bài viết 111

Hình 5.10: Giao diện thả cảm xúc 113

Hình 5.11: Giao diện trả lời bình luận 113

Hình 5.12: Giao diện trang Story 114

Hình 5.13: Giao diện trang cá nhân 115

Hình 5.14: Giao diện trang cá nhân không có bài viết 117

Hình 5.15: Giao diện trang cá nhân riêng tư 118

Hình 5.16: Giao diện chỉnh sửa thông tin 119

Hình 5.17: Giao diện ảnh đại diện 120

Hình 5.18: Giao diện xem ảnh đại diện 121

Hình 5.19: Giao diện đổi ảnh đại diện 121

Hình 5.20: Giao diện tìm kiếm 122

Hình 5.21: Giao diện tìm kiếm không tìm thấy 123

Hình 5.22: Giao diện đăng bài 123

Hình 5.23: Giao diện nhắn tin 124 Hình 6.1: application.properties 126 Hình 6.2: Tạo database leaf_db 127

Bảng 2.1: Chức năng nghiệp vụ 44

Bảng 2.2: Chức năng hệ thống 46

Bảng 2.3: Yêu cầu phi chức năng 50

Bảng 3.1: Đặc tả Usecase Đăng ký 53

Bảng 3.2: Đặc tả Usecase Đăng nhập 54

Bảng 3.3: Đặc tả Uscase Đăng xuất 55

Bảng 3.4: Đặc tả Uscase quên mật khẩu 56

Bảng 3.5: Đặc tả Usecase Xem trang cá nhân người khác 58

Bảng 3.6: Đặc tả Usecase Chỉnh sửa trang cá nhân 59

Bảng 3.7: Đặc tả Usecase Đổi mật khẩu 60

Bảng 3.8: Đặc tả Usecase Tìm kiếm người khác 61

Bảng 3.9: Đặc tả Usecase Thả cảm xúc 62

Bảng 3.10: Đặc tả Usecase Gỡ cảm xúc 63

Bảng 3.11: Đặc tả Usecase Đăng bài viết 64

Bảng 3.12: Đặc tả Usecase Chỉnh sửa bài viết 65

Bảng 3.13: Đặc tả Usecase Chia sẻ bài viết 66

Bảng 3.14: Đặc tả Usecase Xoá bài viết 67

Bảng 3.15: Đặc tả Usecase Kết bạn 68

Bảng 3.16: Đặc tả Usecase Huỷ kết bạn 69

Bảng 3.17: Đặc tả Usecase Nhắn tin 70

Bảng 3.18: Đặc tả Usecase Gửi hình ảnh 71

Bảng 3.19: Đặc tả Usecase Gọi video 72

Bảng 3.20: Đặc tả Usecase Đăng bình luận 73

Bảng 3.21: Đặc tả Usecase Chỉnh sửa bình luận 74

Bảng 3.22: Đặc tả Usecase Xoá bình luận 75

Bảng 3.23: Đặc tả Usecase Quản lý 76

Bảng 3.24: Đặc tả Usecase Thống kê 77

Bảng 3.25: Đặc tả Usecase Phân quyền 78

Bảng 5.1: Mô tả giao diện đăng nhập 102

Bảng 5.2: Mô tả giao diện đăng ký 103

Bảng 5.3: Mô tả giao diện trang chủ 104

Bảng 5.4: Mô tả giao diện trang chủ có sidebar 106

Bảng 5.5: Mô tả giao diện navbar 108

Bảng 5.6: Mô tả giao diện bài viết 110

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

Bảng 5.8: Mô tả giao diện trang Story 114

Bảng 5.9: Mô tả giao diện trang cá nhân 115

Bảng 5.10: Mô tả giao diện trang cá nhân không có bài viết 117

Bảng 5.11: Mô tả giao diện trang cá nhân riêng tư 118

Bảng 5.12: Mô tả giao diện chỉnh sửa thông tin 119

Bảng 5.13: Mô tả giao diện ảnh đại diện 120

Bảng 5.14: Mô tả giao diện chỉnh sử ảnh đại diện 121

Bảng 5.15: Mô tả giao diện tìm kiếm 122

Bảng 5.16: Mô tả giao diện đăng bài 124

Bảng 5.17: Mô tả giao diện nhắn tin 125

Bảng 6.1: Kiểm thử các chức năng quản lý tài khoản 128

Bảng 6.2: Kiểm thử các chức năng quản lý bài viết 133

Bảng 6.3: Kiểm thử các chức năng quản lý quan hệ 138

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

Kết nối và giao lưu là nhu cầu thiết yếu của con người, đóng vai trò quan trọng trong việc trao đổi văn hóa và kiến thức toàn cầu Sự phát triển nhanh chóng của công nghệ đã làm tăng nhu cầu này, dẫn đến sự ra đời của các trang mạng xã hội, nơi mọi người có thể chia sẻ thông tin cá nhân và kết nối với bạn bè cũng như người lạ Theo thời gian, nhu cầu của người dùng đã mở ra những ý tưởng mới cho các tính năng mạng xã hội như video call và live stream Do đó, việc phát triển các trang mạng xã hội với những tính năng cơ bản và mới mẻ là rất cần thiết để đáp ứng nhu cầu ngày càng cao của người dùng.

Hiện nay, nhiều trang mạng xã hội như Instagram, Facebook và Twitter đã phát triển bền vững và thu hút đông đảo người dùng nhờ giao diện bắt mắt và đầy đủ tính năng Mỗi nền tảng có quy định và chính sách riêng để quản lý người dùng, tạo nên những đặc điểm nổi bật cho từng trang Tuy nhiên, việc sử dụng nhiều mạng xã hội cùng lúc để đáp ứng nhu cầu cá nhân gây ra sự bất tiện trong việc quản lý.

Nhóm chúng em quyết định thực hiện đề tài "Xây dựng trang mạng xã hội cơ bản" với mục tiêu tạo ra một sản phẩm độc đáo, kết hợp các tính năng nổi bật từ các trang mạng xã hội lớn và bổ sung những tính năng sáng tạo mang dấu ấn riêng.

2 Mục đích của đề tài:

Mục đích chính của đề tài là xây dựng nên một trang mạng xã hội có đầy đủ những chức năng cơ bản của nó

Kết hợp các tính năng nổi bật từ các mạng xã hội lớn vào một sản phẩm duy nhất, tạo ra sự tiện lợi tối đa cho người dùng.

Ngoài ra còn cung cấp những tính năng mới, sáng tạo

Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:

● Các kỹ thuật phân tích thiết kế hệ thống

● Tìm hiểu các thư viện hỗ trợ cho đề tài ở Spring boot và Reactjs

● Cách upload file lên Firebase storage, sử dụng Firebase real-time database cho tính năng chat real-time.

CƠ SỞ LÝ THUYẾT

Java Spring boot

1.1.1 Giới thiệu về Java Spring Boot:

Spring là một framework phát triển ứng dụng Java phổ biến, giúp tạo ra các ứng dụng hiệu quả, đơn giản và nhanh chóng Nó bao gồm nhiều dự án con như Spring MVC cho ứng dụng web, Spring Data, và Spring Boot Để phát triển một ứng dụng web cơ bản với Spring framework, bạn cần thực hiện ít nhất 5 công đoạn.

● Tạo một project sử dụng Maven với các dependency cần thiết

● Tạo một tập tin web đuôi (.xml) để khai báo DispatcherServlet (thuộc Spring MVC)

● Một tập tin có cấu hình của Spring MVC

● Trả về một class Controller khi có request đến

● Cuối cùng là phải có một web server phục vụ triển khai ứng dụng lên chạy

Spring Framework được phát triển dựa trên hai nguyên tắc thiết kế chính: Dependency Injection và Aspect Oriented Programming Các tính năng cốt lõi của Spring có thể áp dụng cho việc phát triển ứng dụng Java Desktop, ứng dụng di động và Java Web Mục tiêu chính của Spring là đơn giản hóa quá trình phát triển các ứng dụng J2EE thông qua mô hình sử dụng POJO (Plain Old Java Object).

Hình 1.2: Kiến trúc Spring Framework [1]

Spring Boot là một module của Spring Framework, cung cấp các tính năng RAD (Rapid Application Development) – phát triển ứng dụng nhanh Nó giúp cho các lập trình

Spring Boot đơn giản hóa quá trình lập trình ứng dụng, giúp các nhà phát triển tập trung vào việc phát triển business cho ứng dụng Nó cho phép tạo ra các ứng dụng độc lập dựa trên Spring mà không cần cấu hình XML, đồng thời nâng cao năng suất cho developer nhờ vào các chuẩn cấu hình thiết kế phần mềm.

Hình 1.3: Spring boot flow architecture [1]

Các đặc điểm của Spring Boot:

● SpringApplication: SpringApplication là một class giúp khởi chạy các ứng dụng từ hàm main thuận tiện Để bắt đầu ứng dụng, bạn chỉ cần gọi các method run

Spring Boot Profiles cung cấp phương pháp phân chia cấu hình cho từng môi trường khác nhau Các annotation như @Component hoặc @Configuration có thể được gán với profiles để xác định thời điểm hoặc môi trường mà chúng sẽ được tải lên.

Externalized Configuration cho phép cấu hình ứng dụng từ bên ngoài, giúp ứng dụng hoạt động hiệu quả trên nhiều môi trường khác nhau Việc này mang lại sự linh hoạt và tiện lợi trong việc quản lý cấu hình, đảm bảo rằng ứng dụng có thể thích ứng nhanh chóng với các yêu cầu và điều kiện khác nhau.

Configuration bạn có thể sử dụng các file properties, YAML, các tham số command line hay các biến môi trường

Spring Boot sử dụng common logging cho tất cả các chức năng ghi log nội bộ, giúp quản lý các dependency logging một cách mặc định Người dùng không cần phải sửa đổi các dependency logging trừ khi có yêu cầu tùy biến thực sự cần thiết.

Spring có những ưu điểm sau:

● Hội tụ đầy đủ các tính năng của Spring framework

● Đơn giản hóa cấu hình và xây dựng được các ứng dụng độc lập có khả năng chạy bằng java-jar nhờ các dependency starter

Việc triển khai ứng dụng trở nên dễ dàng hơn nhờ vào việc nhúng trực tiếp các ứng dụng server vào trong ứng dụng, giúp tránh những khó khăn khi triển khai lên môi trường production mà không cần phải tải file WAR.

Cấu hình đơn giản và tự động hỗ trợ cho các chức năng của Spring giúp tăng năng suất, giảm thời gian viết code mà không cần sử dụng cấu hình XML.

● Cung cấp nhiều plugin, số liệu, cấu hình ứng dụng từ bên ngoài

Reactjs

ReactJS là thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt vào năm 2013 nhằm xây dựng giao diện người dùng Thư viện này phổ biến trong việc phát triển các ứng dụng web SPA (Single Page Application) và ứng dụng di động Với cú pháp đơn giản theo kiểu HTML, ReactJS giúp người dùng dễ dàng tạo ra các component UI có thể tái sử dụng, mang lại hiệu quả cao trong quá trình phát triển.

ReactJS có các tính năng hết sức nổi bật bao gồm:

JSX, viết tắt của JavaScript extension, là một phần mở rộng của React, giúp thay đổi cây DOM Một trang web được xây dựng bằng ReactJS bao gồm nhiều component kết hợp với nhau thay vì sử dụng một template duy nhất như thông thường Các component hoạt động giống như các hàm JavaScript, cho phép tách biệt logic thành các đoạn code độc lập có thể tái sử dụng Chúng ta có thể sử dụng component dưới dạng function hoặc class, và các component này còn có state và props.

ReactJS sử dụng Virtual DOM, một bản sao của DOM thực trên trang web, để xác định các phần tử cần cập nhật khi có sự kiện thay đổi Điều này giúp tối ưu hóa hiệu suất và cải thiện trải nghiệm người dùng bằng cách chỉ cập nhật những phần tử cần thiết.

● Javascript Expressions: Biểu thức JS có thể sử dụng trong file jsx hoặc js bằng cách sử dụng cặp dấu ngoặc nhọn “{}”

Reactjs có những ưu điểm sau:

ReactJS sử dụng DOM ảo để lưu trữ cấu trúc dữ liệu trong bộ nhớ, chỉ cập nhật những thay đổi cuối cùng vào DOM của trình duyệt, giúp tăng tốc độ ứng dụng.

Bạn có thể tạo các component theo chức năng mong muốn bằng tính năng react component Những component này có thể được tái sử dụng linh hoạt, đồng thời việc xây dựng chúng theo từng chức năng giúp việc bảo trì trở nên dễ dàng hơn trong tương lai.

● ReactJS là một opensource, vì vậy cũng rất dễ cho những bạn mới bắt đầu tìm hiểu nó

Trong những năm gần đây, ReactJS đã trở nên ngày càng phổ biến và được duy trì bởi Facebook và Instagram Bên cạnh đó, nhiều công ty nổi tiếng như Apple và Netflix cũng đang ứng dụng ReactJS trong phát triển sản phẩm của họ.

Facebook tiếp tục duy trì và phát triển ReactJS, đồng thời thường xuyên cập nhật những thay đổi mới Do đó, bạn có thể yên tâm sử dụng ReactJS cho các dự án cá nhân hoặc doanh nghiệp của mình.

● ReactJS có thể được sử dụng để xây dựng giao diện người dùng cho cả các ứng dụng dành cho máy tính và các ứng dụng di động

● Dễ dàng cho việc test và debug, vì hầu hết các code đều được thực hiện bằng JavaScript chứ không phải bằng HTML

Firebase

Firebase là nền tảng phát triển ứng dụng di động và website do Google phát triển, cung cấp các API mạnh mẽ và dễ sử dụng, cho phép xây dựng hệ thống mà không cần Backend.

Firebase là dịch vụ cơ sở dữ liệu hoạt động trên nền tảng đám mây – cloud cùng với hệ thống máy chủ vô cùng mạnh mẽ của Google

Firebase Realtime Database là một cơ sở dữ liệu NoSQL lưu trữ đám mây, cho phép lưu trữ và đồng bộ dữ liệu theo thời gian thực Dữ liệu được tổ chức dưới dạng cây JSON, giúp đồng bộ hóa nhanh chóng cho mọi kết nối Với độ trễ thấp, Firebase Realtime Database lý tưởng cho việc phát triển các ứng dụng yêu cầu tính năng thời gian thực như ứng dụng chat và game trực tuyến.

Hình 1.8: Firebase real-time database [3]

Các khả năng chính của Realtime Database:

Firebase Realtime Database cho phép đồng bộ dữ liệu ngay lập tức khi có sự thay đổi, giúp mọi thiết bị kết nối nhận được thông tin cập nhật chỉ trong vài mili giây.

Khi người dùng ở chế độ ngoại tuyến, dữ liệu sẽ được lưu trữ trên bộ nhớ cache của thiết bị và sẽ tự động đồng bộ khi kết nối internet được khôi phục Tính năng này hoạt động hoàn toàn tự động, giúp người dùng không phải lo lắng về việc mất dữ liệu.

The Firebase Realtime Database is accessible from mobile devices and web browsers without the need for a server application Data security and authentication are managed through Firebase's security rules, which are enforced during data read and write operations.

Hình 1.9: Firebase gửi dữ liệu tới client [3]

Firebase có những ưu điểm sau:

Firebase giúp triển khai ứng dụng nhanh chóng nhờ vào việc không cần lo lắng về phần backend và API, hỗ trợ đa nền tảng Nó tiết kiệm thời gian quản lý và đồng bộ dữ liệu cho người dùng, đồng thời cung cấp dịch vụ hosting và xác thực thông tin khách hàng, từ đó tăng tốc quá trình triển khai ứng dụng.

Firebase cung cấp một nền tảng đám mây an toàn với kết nối qua giao thức bảo mật SSL, cho phép phân quyền người dùng cơ sở dữ liệu bằng Javascript Những tính năng này giúp nâng cao độ bảo mật cho các ứng dụng.

Firebase đảm bảo sự ổn định cho các ứng dụng nhờ vào nền tảng cloud mạnh mẽ của Google Việc nâng cấp và bảo trì server trở nên dễ dàng và không làm gián đoạn hoạt động của ứng dụng.

Collaborative filtering

Collaborative filtering là một thuật toán lọc tương tác dựa trên hoạt động của người dùng để suy ra mức độ quan tâm của họ đối với các đối tượng hoặc lẫn nhau Thuật toán này sử dụng ma trận tiện ích (utility matrix) chứa giá trị rating của các cặp (user, item), trong đó mỗi cột đại diện cho các rating của một user và mỗi dòng là các rating của một item Hai phương pháp chính trong collaborative filtering là Neighborhood-based collaborative filtering và Matrix factorization.

Hình 1.11: Neighborhood-based collaborative Filtering [4]

Phương pháp gợi ý dựa trên Collaborative Filtering theo khu vực lân cận sử dụng sự tương quan giữa các người dùng và/hoặc các mục để đưa ra đề xuất Cách tiếp cận này cho phép gợi ý cho một người dùng dựa trên hành vi tương tự của những người dùng khác Phương pháp này được chia thành nhiều loại khác nhau.

2 hướng nhỏ, là User-User Collaborative Filtering (uuCF) và Item-Item Collaborative Filtering (iiCF)

Hướng tiếp cận uuCF tập trung vào việc xác định các nhóm người dùng có đặc điểm tương đồng Bằng cách này, chúng ta có thể dự đoán mức độ yêu thích của một người dùng dựa trên sở thích của những người dùng khác trong cùng nhóm.

Mỗi người dùng được biểu diễn bằng một vector thuộc tính, được xây dựng từ những phản hồi trong quá khứ của họ đối với các sản phẩm Từ đó, chúng ta có thể tính toán độ tương đồng giữa các người dùng.

Để xác định độ yêu thích của người dùng U đối với một sản phẩm I, chúng ta sẽ chọn k người dùng đã từng đánh giá sản phẩm I và có độ tương đồng cao nhất với người dùng U Kết quả sẽ được tính toán dựa trên phản hồi của k người dùng đó về sản phẩm I.

+ Cuối cùng, lựa chọn những items được dự đoán user U yêu thích nhất để gợi ý cho U

Phương pháp iiCF tương tự như User-User , tập trung vào việc tìm kiếm các nhóm item tương đồng Sau đó, nó dự đoán mức độ yêu thích của người dùng đối với một item dựa trên sự ưa chuộng của họ đối với các item khác trong cùng loại Cách tiếp cận này giúp cải thiện độ chính xác trong việc gợi ý item cho người dùng.

+ Biểu diễn mỗi item bằng một vector thuộc tính Từ đó, tính toán độ tương đồng giữa các item

Để xác định độ yêu thích của người dùng U đối với một sản phẩm I, chúng ta sẽ chọn ra k sản phẩm mà U đã đánh giá và có độ tương đồng cao nhất với I Tiếp theo, dựa vào phản hồi của U về k sản phẩm này, chúng ta sẽ tính toán kết quả cuối cùng.

Cuối cùng, để gợi ý cho người dùng U, chúng ta lựa chọn những sản phẩm mà dự đoán họ sẽ yêu thích nhất Do số lượng sản phẩm thường ít hơn nhiều so với số lượng người dùng, nên phương pháp tính toán độ tương đồng của iiCF sẽ diễn ra nhanh hơn so với uuCF.

Matrix Factorization, hay còn gọi là Matrix Decomposition, là một phương pháp trong Collaborative Filtering, sử dụng kỹ thuật phân rã ma trận để tạo ra gợi ý Kỹ thuật này giúp chia một ma trận lớn X thành hai ma trận có kích thước nhỏ hơn, từ đó cải thiện khả năng dự đoán và tối ưu hóa trải nghiệm người dùng.

W và H, sao cho ta có thể xây dựng lại X từ hai ma trận nhỏ hơn này càng chính xác càng tốt

1.4.2 Thuật toán Neighborhood-based Collaborative filtering: [10] Ở phương pháp này sẽ cần xây dựng ma trận hệ số tương quan rating của các users để tìm ra nhóm users có cùng sở thích Hệ số tương quan giữa các users càng lớn thì sở thích của họ càng giống nhau và trái lại thì họ càng có sở thích khác biệt Thuật toán sẽ dự đoán giá trị rating tại một cặp (user, item) chưa được rate bằng cách tính tổng có trọng số các giá trị rating của users tương quan nhất với user đó mà đã rate item trên Trọng số thông thường sẽ bẳng chính hệ số tương quan Để xây dựng một thuật toán Neighborhood-based collaborative Filtering chúng ta cần trải qua các bước:

- Chuẩn hóa ma trận Utility Matrix

KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG

Khảo sát hiện trạng

Hiện nay, sự phát triển của công nghệ đã làm cho giao tiếp giữa mọi người trở nên dễ dàng và nhanh chóng hơn bao giờ hết, thúc đẩy sự ra đời của các trang mạng xã hội Qua nhiều năm phát triển, mạng xã hội đã trở thành nền tảng phổ biến với số lượng người dùng đông đảo, điển hình như Facebook, Twitter và Instagram Mặc dù không phải là một chủ đề mới, mạng xã hội vẫn mang đến nhiều khía cạnh thú vị để khai thác, khác biệt với các trang thương mại điện tử Các chức năng của mạng xã hội tập trung vào cá nhân, giúp người dùng kết nối bạn bè và thể hiện thông tin cá nhân một cách sáng tạo Hệ thống này không ngừng được cập nhật theo xu hướng, ưu tiên sự đổi mới và hứng thú cho người dùng hơn là tuân theo quy trình nghiệp vụ chặt chẽ.

Xây dựng các chức năng cho một trang mạng xã hội là một thách thức lớn, đặc biệt khi hầu hết các chức năng đều yêu cầu tính năng real-time Kết nối nhanh chóng giữa người dùng là yếu tố quan trọng hàng đầu Để thu hút người dùng, các chức năng cần có sự độc đáo và hấp dẫn Tính cá nhân hóa khiến mỗi người dùng có sở thích riêng, tạo ra khó khăn cho lập trình viên trong việc phát triển các tính năng phù hợp Bên cạnh đó, việc đảm bảo sự riêng tư và an toàn thông tin cá nhân cũng rất quan trọng, vì mạng xã hội là nơi người dùng chia sẻ nhiều thông tin nhạy cảm.

Bảo mật thông tin người dùng là yếu tố cực kỳ quan trọng trong việc phát triển mạng xã hội Để thành công, giao diện của trang mạng xã hội cần phải sáng tạo, bắt mắt và thu hút người dùng Sự chú trọng vào tính nghệ thuật và sáng tạo sẽ mang lại trải nghiệm tốt hơn so với chỉ tập trung vào tính đầy đủ và tiện dụng.

Mạng xã hội là một chủ đề hấp dẫn với nhiều khía cạnh mới để khai thác, đồng thời cũng đặt ra thách thức cho sự sáng tạo của lập trình viên.

Facebook là một trong những mạng xã hội phổ biến nhất tại Việt Nam, thu hút một lượng người dùng khổng lồ trên toàn cầu.

Facebook là một nền tảng đa dụng nổi bật, bao gồm cả website và ứng dụng di động, với giao diện hấp dẫn và thân thiện với người dùng Nền tảng này cung cấp nhiều chức năng hữu ích, phục vụ nhu cầu đa dạng của người dùng.

Trang chủ Facebook cho phép người dùng truy cập thông tin cá nhân, kết nối với bạn bè và khám phá các bài viết được gợi ý Ngoài ra, nền tảng này còn cung cấp nhiều tính năng hữu ích như tìm kiếm, bình luận, tương tác và nhắn tin.

Giao diện tạo bài viết trên Facebook cung cấp nhiều tính năng hữu ích, cho phép người dùng dễ dàng đăng tải nội dung, hình ảnh, video, cũng như sử dụng các biểu tượng và sticker được tích hợp sẵn.

Hình 2.3: Đăng bài viết Facebook [5]

Khi xem xét chi tiết một bài viết, người dùng có thể quan sát các tương tác liên quan, bao gồm bình luận, phản hồi và hoạt động của những người dùng khác trên bài viết đó.

Hình 2.4: Bài viết trên Facebook [5]

Trang cá nhân của người dùng nổi bật với khả năng tự do đăng tải bài viết, cho phép chia sẻ thông tin cá nhân mà họ muốn công khai với mọi người.

Hình 2.5: Trang cá nhân Facebook [5]

Sau khi khảo sát, có thể nhận thấy rằng Facebook cung cấp nhiều tính năng phong phú cho người dùng, không chỉ giới hạn ở những tính năng đã đề cập Dựa trên khảo sát, chúng ta có thể đánh giá những ưu điểm và nhược điểm của Facebook một cách rõ ràng.

+ Có thể dễ dàng đăng kí tài khoản người dùng và liên kết với nhiều tài khoản khác

+ Giao diện đẹp, thân thiện mới đa số người dùng, luôn được cập nhật liên tục

+ Người dùng có thể tự do chỉnh sửa trang cá nhân của bản thân theo sở thích + Tính bảo mật khá cao khi có nhiều lớp bảo mật

+ Tốc độ xử lý của các tính năng khá nhanh, độ trễ thấp

+ Mang lại sự kết nối với số lượng người dùng cực kì lớn

+ Có rất nhiều tính năng không được sử dụng hoặc không cần thiết cho người dùng

+ Thông tin của người dùng chưa được bảo mật hoàn toàn

+ Rất nhiều thông tin được đề xuất trên trang của người dùng có thể gây nhiễu thông tin

Instagram, cùng với Facebook, là một trong những nền tảng mạng xã hội được giới trẻ toàn cầu ưa chuộng Với giao diện đơn giản nhưng hấp dẫn, cùng tính năng cá nhân hóa và bảo mật thông tin người dùng, Instagram đang ngày càng khẳng định vị thế của mình trong lĩnh vực mạng xã hội hiện nay.

Trang đăng nhập của Instagram mang đến giao diện trẻ trung và tích cực, phù hợp với sở thích của giới trẻ ngày nay Ngoài ra, Instagram còn cung cấp tính năng liên kết tài khoản, giúp người dùng dễ dàng đăng ký và đăng nhập.

Trang đăng ký tài khoản Instagram yêu cầu người dùng cung cấp thông tin tối thiểu, và các thông tin bổ sung có thể được cập nhật sau khi tài khoản được khởi tạo.

Từ đó giúp cho người dùng có thể thuận tiện đăng kí hơn

Hình 2.7: Trang đăng kí Instagram [6]

Trang chủ của Instagram có giao diện đơn giản hơn Facebook, tránh thông tin thừa không cần thiết Instagram tập trung vào sự tương tác giữa người dùng, mang lại trải nghiệm dễ chịu và không bị làm phiền bởi thông tin nhiễu.

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

2.2.1.1 Yêu cầu chức năng nghiệp vụ:

Bảng 2.1: Chức năng nghiệp vụ

STT Nội dung Phân loại Mô tả chi tiết

1 Tạo người dùng Lưu trữ Người dùng tạo tài khoản để đăng nhập vào hệ thống, tài khoản được lưu trữ dưới cơ sở dữ liệu

2 Tìm kiếm người dùng Tìm kiếm Người dùng tìm kiếm các tài khoản người dùng khác được truy vấn từ cơ sở dữ liệu

3 Đăng bài viết Lưu trữ Người dùng đăng bài viết lên trang cá nhân, bài viết được lưu trữ dưới cơ sở dữ liệu

4 Tìm kiếm bài đăng Tìm kiếm Người dùng tìm kiếm các bài đăng được truy vấn từ cơ sở dữ liệu

5 Gửi file Lưu trữ Người dùng có thể gửi file cho người dùng khác, các file được lưu trữ trên cloud

6 Nhắn tin Lưu trữ Người dùng có thể nhắn tin với người dùng khác, các tin nhắn được lưu trữ dưới cơ sở dữ liệu

7 Bình luận Lưu trữ Người dùng có thể bình luận các bài viết, các bình luận được lưu trữ dưới cơ sở dữ liệu

8 Tương tác bài viết Lưu trữ Người dùng có thể thả các cảm xúc, thay đổi cảm xúc trong bài viết Và có thể gỡ cảm xúc khi muốn

9 Trả lời bình luận Lưu trữ Người dùng có thể trả lời các bình luận trong bài viết

10 Chỉnh sửa trang cá nhân

Lưu trữ Người dùng có thể thay đổi thông tin cá nhân của bản thân

11 Xem danh sách bạn bè

Tìm kiếm Người có thể xem danh sách bạn bè của mình cũng như của người khác

12 Gửi lời mời kết bạn Lưu trữ Người dùng có thể gửi lời mời kết bạn tới người dùng khác

13 Kết bạn Lưu trữ Người dùng có thể chấp nhận lời mời kết bạn hoặc từ chối

14 Xem thông báo tương tác

Người dùng có thể theo dõi thông báo về các tương tác như bình luận bài viết, thả cảm xúc, trả lời bình luận của chính mình, cũng như nhận tin nhắn và lời mời kết bạn.

15 Điều chỉnh thông tin bài viết

Lưu trữ Người dùng có thể thay đổi thông tin bài viết như các hình ảnh trong bài viết hoặc nội dung bài viết

16 Điều chỉnh chế độ tài khoản

Lưu trữ Người dùng có thể thay đổi trạng thái cá nhân thành công khai hoặc riêng tư để có thể bảo mật thông tin cá nhân

17 Điều chỉnh chế độ bài viết

Lưu trữ Người dùng có thể thay đổi trạng thái bài viết thành công khai hoặc riêng tư để người dùng khác không thể thấy

18 Lấy lại mật khẩu Lưu trữ Người dùng có thể lấy lại mật khẩu khi quên mật khẩu bằng cách xác thực email

19 Thay đổi mật khẩu Lưu trữ Người dùng có thể thay đổi mật khẩu thành mật khẩu mới bằng cách xác thực email

2.2.1.2 Yêu cầu chức năng hệ thống

Bảng 2.2: Chức năng hệ thống

STT Quyền Nội dung Mô tả chi tiết Ghi chú

1 Admin Phân quyền sử dụng.

Quản lý và phân quyền cho các người dùng.

Chỉ có duy nhất một Admin để quản lý Tài khoản Admin sẽ được cấp từ server.

2 Admin Thống kê Xem các thống kê về người dùng, bài đăng, lượng truy cập.

Các thống kê sẽ tự cập nhật khi dữ liệu thay đổi.

3 Admin Quản lý các tài khoản người dùng.

Xem các thông tin về người dùng.

Admin chỉ có quyền khóa tài khoản người dùng khi có yêu cầu từ chính người dùng hoặc trong trường hợp người dùng vi phạm quy định Họ không có khả năng chỉnh sửa hay xóa thông tin cá nhân của người dùng.

4 Admin Quản lý các bài đăng.

Xem các thông tin về bài đăng.

Admin không có khả năng chỉnh sửa hay xóa bài đăng, chỉ có thể ẩn bài đăng nếu bài đăng có nội dung vi phạm.

5 Admin Quản lý các đoạn hội thoại.

Xem các thông tin về đoạn hội thoại.

Admin không có khả năng chỉnh sửa hay xóa đoạn hội thoại.

6 Admin Quản lý các bình luận.

Xem các thông tin về bình luận.

Admin không có khả năng chỉnh sửa hay xóa bình luận, chỉ có thể ẩn bình luận nếu vi phạm.

7 Admin Quản lý các file, hình ảnh, video.

Xem các thông tin về các file, hình ảnh, video.

Admin không có khả năng xóa các file,hình ảnh, video, chỉ có thể ẩn nếu nó vi phạm.

8 User Đăng ký, đăng nhập, đăng xuất.

Người dùng đăng ký tài khoản đăng nhập để có thể đăng nhập vào hệ thống Và có thể đăng

Mỗi email chỉ được đăng ký một tài khoản và phải được xác thực qua email Tên tài khoản

48 xuất khi không sử dụng. và mật khẩu phải đặt theo đúng các ràng buộc.

9 User Quản lý thông tin cá nhân.

Người dùng có thể xem thông tin cá nhân của mình, có thể chỉnh sửa lại các thông tin của mình.

Người dùng không thể thay đổi tên tài khoản, mật khẩu được thay đổi ở trang đổi mật khẩu.

10 User Kết bạn, huỷ kết bạn.

Người dùng có thể kết bạn với người khác và huỷ kết bạn.

12 User Tìm kiếm bạn, người lạ.

Người dùng có thể tra cứu những người dùng khác.

Người dùng chỉ có thể tìm kiếm theo tên của người dùng khác.

12 User Đăng bài viết, đăng tin.

Người dùng có thể tạo và đăng tải các bài viết, tin trên trang cá nhân của mình.

Nội dung của các bài viết phải đúng chuẩn mực, có thể đăng tải các video hoặc hình ảnh trên các bài viết.

13 User Bình luận bài viết.

Người dùng có thể bình luận trên các bài viết.

Nội dung của các bình luận phải đúng chuẩn mực.

14 User Thả cảm xúc bài viết, bình luận, tin nhắn.

Người dùng có thể thả cảm xúc các bài viết, bình luận và tin nhắn.

Người dùng chỉ có thể thả cảm xúc một lần duy nhất trên từng bài viết, bình luận, tin nhắn.

15 User Chia sẻ bài viết.

Người dùng có thể chia sẻ những bài viết của

49 người dùng khác lên trang cá nhân của mình.

16 User Chỉnh sửa, ẩn bài viết, tin.

Người dùng có thể chỉnh sửa bài viết, tin của mình hoặc ẩn nó đi.

17 User Chỉnh sửa, ẩn bình luận.

Người dùng có thể chỉnh sửa bình luận của mình trong các bài viết hoặc ẩn nó đi.

18 User Nhắn tin, gọi điện, gửi hình ảnh, file, video ngắn.

Người dùng có thể nhắn tin và gọi điện với nhau, có thể gửi hình ảnh, file, video ngắn trong khung chat.

Mỗi cuộc hội thoại chỉ có 2 người dùng.

19 User Xóa, ẩn các cuộc hội thoại.

Người dùng có thể xóa các cuộc hội thoại của mình, hoặc có thể ẩn nó đi.

Các cuộc hội thoại bị xóa sẽ mất đi nội dung tin nhắn cũ, còn các cuộc hội thoại bị ẩn sẽ vẫn còn tin nhắn cũ.

20 User Xem danh sách bạn bè.

Người dùng có thể xem danh sách bạn bè của mình.

21 User Xem trang cá nhân của người khác.

Người dùng có thể xem trang cá nhân của người khác.

22 User Xem danh sách các bài viết đã đăng.

Người dùng có thể xem lại các bài viết đã đăng.

23 User Xem danh sách các file, hình ảnh, video đã đăng.

Người dùng có thể xem lại các hình ảnh, file, video mình đã đăng.

2.2.2 Yêu cầu phi chức năng:

Bảng 2.3: Yêu cầu phi chức năng

Nhanh Các chức năng xử lý nhanh nhất có thể để tối ưu khả năng tương tác của các người dùng.

2 Giao diện Đẹp, sáng tạo

Giao diện được thiết kế gọn gàng, với thông tin và hình ảnh hài hòa, sáng tạo, giúp người dùng dễ dàng tiếp cận Các chức năng được sắp xếp hợp lý, phù hợp với thói quen sử dụng của người dùng.

Cao Đảm bảo các thông tin của người dùng không công khai khi người dùng không cho phép.

MÔ HÌNH HOÁ YÊU CẦU

Mô hình kiến trúc hệ thống

Hình 3.1: Kiến trúc hệ thống

Lược đồ Usecase

Đặc tả Usecase

Bảng 3.1: Đặc tả Usecase Đăng ký

Usecase ID: ID01 – Usecase – Name: Đăng ký

Description Người dùng đăng ký tài khoản đăng nhập

Pre-Condition(s) Người dùng đã truy cập vào trang đăng ký

Người dùng đã có email chưa đăng ký

Basic Flow 1 Người dùng nhập thông tin

3 Hệ thống gửi email verify cho người dùng

4 Người dùng xác nhận verify

5 Hệ thống thông báo tạo tài khoản thành công

Exception Flow (5) Thông tin không hợp lệ:

1 Hệ thống thông báo thông tin không hợp lệ

2 Người dùng có thể tiếp tục đăng ký lại hoặc rời khỏi trang đăng ký

Bảng 3.2: Đặc tả Usecase Đăng nhập

Usecase ID: ID02 – Usecase – Name: Đăng nhập

Description Người dùng đăng nhập

Pre-Condition(s) Người dùng đã truy cập vào trang đăng nhập

Người dùng đã có tài khoản

Post-Condition(s) Hệ thống chuyển màn hình tới trang chủ

2 Người dùng nhấp “Log In”

3 Hệ thống kiểm tra thông tin đăng nhập của người dùng

4 Hệ thống đổi trạng thái người dùng sang “online”

Alternative Flow (1) Người dùng chọn phương thức khác:

1 Người dùng chọn đăng nhập bằng Google

2 Hệ thống chuyển sang màn hình đăng nhập Google

3 Người dùng nhập tài khoản Google

5 Hệ thống kiểm tra thông tin đăng nhập của người dùng

6 Hệ thống đổi trạng thái người dùng sang “online”

Exception Flow (3) Thông tin không hợp lệ, đăng nhập không thành công:

2 Người dùng có thể tiếp tục đăng nhập lại hoặc rời khỏi trang đăng ký, hệ thống chỉ cho phép đăng nhập 5 lần

Bảng 3.3: Đặc tả Uscase Đăng xuất

Usecase ID: ID03 – Usecase – Name: Đăng xuất

Description Người dùng đăng xuất khỏi ứng dụng

Pre-Condition(s) Người dùng đã đăng nhập

Post-Condition(s) Hệ thống chuyển sang trang đăng nhập

Basic Flow 1 Người dùng chọn vào biểu tượng cá nhân

2 Người dùng chọn “Log out”

3 Thông báo đăng xuất thành công

4 Hệ thống chuyển về trang login

5 Hệ thống chuyển trạng thái người dùng sang “offline” Alternative Flow Không có

Bảng 3.4: Đặc tả Uscase quên mật khẩu

Usecase ID: ID04 – Usecase – Name: Quên mật khẩu

Description Người dùng lấy lại mật khẩu mới

Pre-Condition(s) Người dùng đã có tài khoản

Người dùng đã vào trang quên mật khẩu

2 Hệ thống kiểm tra thông tin và chuyển đến trang Reset Password

4 Hệ thống gửi email verify cho người dùng

5 Người dùng xác nhận verify

6 Hệ thống chuyển sang trang tạo mật khẩu mới

7 Người dùng nhập mật khẩu mới

8 Người dùng nhấn tạo mật khẩu mới

9 Hệ thống kiểm tra và thông báo cập nhật thành công

Alternative Flow (2) Nếu không tìm thấy người dùng:

1 Hệ thống sẽ thông báo người dùng không tồn tại

2 Cho phép người dùng nhập lại thông tin

Exception Flow (9) Nếu cập nhật thất bại:

1 Hệ thống thông báo cập nhật thất bại

2 Cho phép người dùng nhập lại

3.3.5 Xem trang cá nhân người khác:

Bảng 3.5: Đặc tả Usecase Xem trang cá nhân người khác

Usecase ID: ID05 – Usecase – Name: Xem trang cá nhân người khác

Description Người dùng xem trang cá nhân người khác

Pre-Condition(s) Người dùng đã có đường dẫn vào trang cá nhân người khác

Người dùng đã có tên của người khác

Basic Flow 1 Người truy cập vào đường dẫn của trang cá nhân người khác

2 Hệ thống chuyển sang trang cá nhân người dùng đã truy cập

Alternative Flow (1) Người dùng tìm kiếm bằng tên:

1 Người đăng nhập vào ứng dụng

2 Hệ thống chuyển sang trang chủ

3 Người dùng nhập tên người cần tìm vào ô tìm kiếm

5 Hệ thống hiển thị danh sách gợi ý

6 Người dùng chọn người cần xem

7 Hệ thống chuyển sang trang cá nhân người đã chọn Exception Flow (2) Hệ thống không tìm thấy:

1 Hệ thống thông báo không tìm thấy

3.3.6 Chỉnh sửa trang cá nhân:

Bảng 3.6: Đặc tả Usecase Chỉnh sửa trang cá nhân

Usecase ID: ID06 – Usecase – Name: Chỉnh sửa trang cá nhân

Description Người dùng có thể xem và chỉnh sửa trang cá nhân

Basic Flow 1 Người dùng nhấp vào biểu tượng cá nhân

2 Hệ thống hiển thị trang cá nhân

3 Người dùng nhấp vào “Edit Profile”

4 Người nhập thông tin cần chỉnh sửa, chọn file ảnh (nếu cần)

5 Người dùng xác nhận chỉnh sửa

6 Hệ thống kiểm tra và thông báo chỉnh sửa thành công, reload lại trang

Exception Flow (6) Hệ thống kiểm tra thông tin không hợp lệ:

Bảng 3.7: Đặc tả Usecase Đổi mật khẩu

Usecase ID: ID07 – Usecase – Name: Đổi mật khẩu

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

Basic Flow 1 Người dùng nhấp vào biểu tượng cá nhân

2 Hệ thống hiển thị trang cá nhân

3 Người dùng nhấp vào “Change Password”

4 Người nhập mật khẩu mới

5 Người dùng xác nhận chỉnh sửa

Exception Flow (6) Thông tin không hợp lệ:

1 Hệ thống thông báo mật khẩu không hợp lệ

Bảng 3.8: Đặc tả Usecase Tìm kiếm người khác

Usecase ID: ID08 – Usecase – Name: Tìm kiếm người khác

Description Người dùng tìm kiếm bạn bè và người lạ

Basic Flow 1 Người dùng nhập tên người cần tìm vào ô tìm kiếm

3 Hệ thống hiển thị danh sách gợi ý

4 Người dùng chọn người cần xem

5 Hệ thống chuyển sang trang cá nhân người đã chọn Alternative Flow Không có

Exception Flow (3) Hệ thống không tìm thấy:

Bảng 3.9: Đặc tả Usecase Thả cảm xúc

Usecase ID: ID09 – Usecase – Name: Thả cảm xúc

Description Người dùng thả cảm xúc vào bài viết, bình luận hoặc tin nhắn

Post-Condition(s) Hệ thống gửi thông báo tới các người dùng liên quan

Basic Flow 1 Người truy cập bài viết, bình luận hoặc tin nhắn cần thả cảm xúc

2 Người dùng nhấp vào biểu tượng cảm xúc

3 Hệ thống nhận yêu cầu và hiển thị cảm xúc trên bài viết, bình luận, tin nhắn đã chọn

Bảng 3.10: Đặc tả Usecase Gỡ cảm xúc

Usecase ID: ID010 – Usecase – Name: Gỡ cảm xúc

Description Người dùng gỡ bỏ cảm xúc trên bài viết, bình luận hoặc tin nhắn

Người dùng đã thả cảm xúc

Basic Flow 1 Người truy cập bài viết, bình luận hoặc tin nhắn cần thả cảm xúc

2 Người dùng nhấp vào biểu tượng cảm xúc lần nữa

3 Hệ thống nhận yêu cầu và ẩn cảm xúc trên bài viết, bình luận, tin nhắn đã chọn

Bảng 3.11: Đặc tả Usecase Đăng bài viết

Usecase ID: ID011 – Usecase – Name: Đăng bài viết

Description Người dùng đăng bài viết lên trang cá nhân

Basic Flow 1 Người dùng chọn biểu tượng đăng bài

2 Người dùng nhập nội dung bài viết và hình ảnh hoặc video đi kèm

4 Hệ thống kiểm tra và hiển thị thông báo đăng bài thành công, reload lại trang

Exception Flow (2) File quá lớn:

1 Hệ thống thông báo file quá lớn

2 Người dùng chọn lại file hoặc bỏ file

Bảng 3.12: Đặc tả Usecase Chỉnh sửa bài viết

Usecase ID: ID012 – Usecase – Name: Chỉnh sửa bài viết

Description Người dùng chỉnh sửa nội dung bài viết đã đăng

Bài viết đã được đăng

Basic Flow 1 Người dùng chọn bài viết cần chỉnh sửa

2 Người dùng nhấp chọn “Edit”

3 Người dùng nhập nội dung cần chỉnh sửa, upload các file cần đăng

4 Người dùng nhấp chọn “Save”

Bảng 3.13: Đặc tả Usecase Chia sẻ bài viết

Usecase ID: ID013 – Usecase – Name: Chia sẻ bài viết

Description Người dùng chia sẻ bài viết của người khác lên trang cá nhân

Basic Flow 1 Người dùng chọn bài viết muốn chia sẻ

2 Người dùng nhấp chọn “Share”

3 Người dùng nhập nội dung của bài đăng mới

4 Người dùng nhấp chọn “Save”

5 Hệ thống kiểm tra và thông báo chia sẽ thành công, reload lại trang

Bảng 3.14: Đặc tả Usecase Xoá bài viết

Usecase ID: ID014 – Usecase – Name: Xóa bài viết

Description Người dùng xóa bài viết đã đăng

Basic Flow 1 Người dùng chọn bài viết muốn xóa

2 Người dùng nhấp chọn “Delete”

3 Hệ thống hiện thông báo xác nhận xóa

4 Người dùng nhấp chọn “Yes”

5 Hệ thống kiểm tra và thông báo xóa thành công, reload lại trang

Bảng 3.15: Đặc tả Usecase Kết bạn

Usecase ID: ID015 – Usecase – Name: Kết bạn

Description Người dùng kết bạn với người dùng khác

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

2 Người dùng nhấp chọn “Add Friend”

3 Hệ thống gửi yêu cầu tới người dùng đã chọn

4 Người dùng đợi được xác nhận kết bạn từ người khác

Bảng 3.16: Đặc tả Usecase Huỷ kết bạn

Usecase ID: ID016 – Usecase – Name: Hủy kết bạn

Description Người dùng hủy kết bạn với người khác

2 người dùng đã kết bạn với nhau

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

2 Người dùng nhấp chọn “Unfriend”

3 Hệ thống xác nhận và reload lại trang Alternative Flow Không có

Bảng 3.17: Đặc tả Usecase Nhắn tin

Usecase ID: ID017 – Usecase – Name: Nhắn tin

Description Người dùng nhắn tin với người dùng khác

Basic Flow 1 Người dùng tìm người muốn nhắn tin trong danh sách bạn bè

2 Người dùng nhấn chọn vào người dùng muốn nhắn tin

3 Hệ thống hiển thị khung chat

4 Người dùng nhập nội dung tin nhắn và gửi

5 Hệ thống kiểm tra và gửi nội dung sang người dùng còn lại

6 Hệ thống hiển thị tin nhắn vừa gửi

Bảng 3.18: Đặc tả Usecase Gửi hình ảnh

Usecase ID: ID018 – Usecase – Name: Gửi hình ảnh

Description Người dùng gửi hình ảnh qua tin nhắn

4 Người dùng chọn biểu tượng gửi hình ảnh

5 Chọn file hình ảnh muốn gửi

6 Hệ thống kiểm tra và gửi hình ảnh sang người dùng còn lại

7 Hệ thống hiển thị hình ảnh vừa gửi

Bảng 3.19: Đặc tả Usecase Gọi video

Usecase ID: ID019 – Usecase – Name: Gọi video

Description Người dùng đăng ký tài khoản đăng nhập

Post-Condition(s) Hệ thống hiển thị thông báo trong khung chat khi cuộc gọi kết thúc

4 Người dùng chọn biểu tượng gọi video

5 Hệ thống kết nối với người dùng còn lại

Exception Flow (5) Kết nối thất bại:

1 Hệ thống thông báo gọi thất bại trong khung chat

2 Người dùng có thể tiếp tục gọi lại

Bảng 3.20: Đặc tả Usecase Đăng bình luận

Usecase ID: ID020 – Usecase – Name: Đăng bình luận

Description Người dùng bình luận vào các bài viết

Post-Condition(s) Hệ thống gửi thông báo tới các người dùng liên quan

Basic Flow 1 Người dùng chọn bài viết muốn bình luận

2 Người dùng nhấp biểu tượng bình luận

3 Viết nội dung bình luận và đăng

4 Hệ thống kiểm tra và hiển thị bình luận lên bài viết Alternative Flow Không có

Bảng 3.21: Đặc tả Usecase Chỉnh sửa bình luận

Usecase ID: ID021 – Usecase – Name: Chỉnh sửa bình luận

Description Người dùng chỉnh sửa nội dung bình luận của mình

Bình luận đã được đăng

3 Chọn bình luận muốn chỉnh sửa

4 Viết nội dung bình luận và lưu

5 Hệ thống kiểm tra và hiển thị bình luận lên bài viết Alternative Flow Không có

Bảng 3.22: Đặc tả Usecase Xoá bình luận

Usecase ID: ID022 – Usecase – Name: Xóa bình luận

Description Người dùng xóa bình luận của mình

Bình luận đã được đăng

3 Chọn bình luận muốn xóa

4 Hệ thống hiển thị thông báo xác nhận

5 Người dùng nhấp chọn “Yes”

6 Hệ thống kiểm tra và ẩn bình luận đã bị xóa Alternative Flow Không có

Bảng 3.23: Đặc tả Usecase Quản lý

Usecase ID: ID023 – Usecase – Name: Quản lý

Description Admin quản lý các bảng trong cơ sở dữ liệu

Pre-Condition(s) Admin đã đăng nhập

Post-Condition(s) Hệ thống cập nhật thay đổi ở phân hệ người dùng Basic Flow 1 Admin chọn bảng dữ liệu bất kỳ

2 Hệ thống hiển thị bảng dữ liệu

3 Admin có thể xem và ẩn các dữ liệu

4 Hệ thống reload lại trang nếu có thay đổi Alternative Flow Không có

Bảng 3.24: Đặc tả Usecase Thống kê

Usecase ID: ID024 – Usecase – Name: Thống kê

Description Admin thống kê số lượng người dùng, số lần truy cập của người dùng

Admin đã truy cập vào trang thống kê

Basic Flow 1 Admin chọn dữ liệu muốn thống kê

2 Hệ thống hiển đồ thị và bảng dữ liệu

Bảng 3.25: Đặc tả Usecase Phân quyền

Usecase ID: ID025 – Usecase – Name: Phân quyền

Description Admin thống kê số lượng người dùng, số lần truy cập của người dùng

Admin đã truy cập vào trang phân quyền

Post-Condition(s) Hệ thống cập nhật thay đổi trên phân hệ người dùng

Basic Flow 1 Admin các quyền muốn thay đổi

2 Hệ thống hiển thị danh sách các quyền

3 Admin có thể bật/tắt các quyền của người dùng

5 Hệ thống thông báo xác nhận

7 Hệ thống kiểm tra và thông báo thay đổi thành công, reload lại trang

THIẾT KẾ PHẦN MỀM

Lược đồ tuần tự

Hình 4.1: Lược đồ tuần tự Đăng nhập

Hình 4.2: Lược đồ tuần tự đăng ký

Hình 4.3: Lược đồ tuần tự nhắn tin

Hình 4.4: Lược đồ tuần tự bình luận

Hình 4.5: Lược đồ tuần tự đổi ảnh đại diện

Hình 4.6: Lược đồ tuần tự chia sẻ bài viết

Hình 4.7: Lược đồ tuần tự đăng bài

4.1.8 Chỉnh sửa trang cá nhân:

Hình 4.8: Lược đồ tuần tự chỉnh sửa trang cá nhân

Hình 4.9: Lược đồ tuần tự tìm kiếm người dùng

Hình 4.10: Lược đồ tuần tự kết bạn

Cơ sở dữ liệu

Hình 4.11: Cơ sở dữ liệu

4.2.1 Mô tả bảng dữ liệu:

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

1 username VARCHAR(45) Tên đăng nhập người dùng

2 avatar VARCHAR(255) Đường dẫn tới nơi lưu trữ ảnh đại diện của người dùng trên Firebase

3 bio VARCHAR(255) Thông tin giới thiệu của người dùng

6 create_date DATETIME(6) Ngày khởi tạo người dùng

8 phone VARCHAR(12) Số điện thoại

9 name VARCHAR(45) Tên người dùng

10 enabled BIT(1) Tài khoản được kích hoạt

13 enabled BOOLEAN Tài khoản được kích hoạt

14 address VARCHAR(255) Địa chỉ Khóa ngoại

91 tham chiếu tới id bảng Address

15 role_id VARCHAR(45) Quyền người dùng

Khóa ngoại tham chiếu tới id bảng role

1 id VARCHAR(255) Mã định danh địa chỉ

2 address_detail VARCHAR(255) Chi tiết địa chỉ

5 province VARCHAR(255) Tỉnh/thành phố

7 status VARCHAR(255) Trạng thái địa chỉ

1 user_from VARCHAR(255) Người dùng gửi Thành phần khóa chính được tham chiếu từ username bảng User

2 user_to VARCHAR(255) Người dùng nhận Thành phần khóa chính được tham chiếu từ username bảng User

3 create_date DATETIME(6) Ngày khởi tạo quan hệ

4 status VARCHAR(255) Trạng thái quan hệ

1 id VARCHAR(255) Mã định danh thông báo

2 value VARCHAR(255) Nội dung bình luận

3 user VARCHAR(45) Người dùng nhận thông báo

Khóa ngoại thang chiếu tới username bảng User

4 create_date DATETIME(6) Ngày khởi tạo thông báo

5 status VARCHAR(255) Trạng thái thông báo

1 id VARCHAR(255) Mã định danh bài viết

2 value VARCHAR(255) Nội dung bình bài viết

3 father_id VARCHAR(255) Bài viết được chia sẽ lại

Khóa ngoại tham chiếu tới id bảng Post

4 user VARCHAR(45) Người dùng tạo bài viết

Khóa ngoại thang chiếu tới username bảng User

5 create_date DATETIME(6) Ngày khởi tạo bài viết

6 status VARCHAR(255) Trạng thái bài viết

1 id VARCHAR(255) Mã định danh file Khóa chính

2 value VARCHAR(255) Đường dẫn tới nơi lưu trữ file trên Firebase

4 post VARCHAR(255) Bài viết chưa file Khóa ngoại tham chiếu tới id bảng Post

5 create_date DATETIME(6) Ngày khởi tạo file

6 status VARCHAR(255) Trạng thái file

1 id VARCHAR(255) Mã định danh story

2 link VARCHAR(255) Đường dẫn tới nơi lưu trữ file trên Firebase

3 value VARCHAR(255) Nội dung Story

4 father_id VARCHAR(255) Story được chia sẻ lại

Khóa ngoại tham chiếu tới id bảng Story

5 user VARCHAR(45) Người dùng đăng

Khóa ngoại tham chiếu tới username bảng User

6 create_date DATETIME(6) Ngày khởi tạo

7 status VARCHAR(255) Trạng thái Story

1 name VARCHAR(45) Tên quyền Khóa chính

1 name VARCHAR(255) Tên Reaction Khóa chính

1 id VARCHAR(255) Mã định danh bình luận

2 type INT Loại bình luận:

3 value VARCHAR(255) Nội dung bình luận

4 father_id VARCHAR(255) Bình luận được trả lời lại

Khóa ngoại tham chiếu tới id bảng Comment

5 user VARCHAR(45) Người dùng đăng bình luận

Khóa ngoại tham chiếu tới username bảng User

6 create_date DATETIME(6) Ngày khởi tạo bình luận

7 status VARCHAR(255) Trạng thái bình luận

1 post VARCHAR(255) Bài viết được reaction

Thành phần khóa chính tham chiếu từ id bảng Post

2 reaction VARCHAR(255) Kiểu Reaction Khóa ngoại tham chiếu từ

3 user VARCHAR(45) Người dùng thả

Thàn phần khóa chính tham chiếu tới username bảng User

1 comment VARCHAR(255) Bình luận được reaction

Thành phần khóa chính tham chiếu từ id bảng Comment

2 reaction VARCHAR(255) Kiểu Reaction Khóa ngoại tham chiếu từ name bảng Reaction

3 user VARCHAR(45) Người dùng thả

Thàn phần khóa chính tham chiếu tới username bảng User

Cơ sở dữ liệu trên Fire base

Hình 4.12: Cơ sở dữ liệu trên Firebase

4.2.2 Mô tả bảng dữ liệu:

1 username String Tên đăng nhập người dùng

Giống với tên đăng nhập ở database chính

2 name String Tên người dùng Giống với tên ở database chính

3 uid String Mã định danh trên

4 isOnline Boolean Trạng thái online của người dùng

1 id String Mã định danh trên firebase

2 members List Danh sách người dùng trong room

List username tham chiếu từ username bảng User

1 id String Mã định danh trên firebase

2 content String Nội dung tin nhắn

3 room String Room chứa tin nhắn

Khóa ngoại tham chiếu từ id bảng Room

4 status String Trạng thái tin nhắn

5 date Datetime Ngày khởi tạo tin nhắn

6 user String Người dùng gửi tin nhắn

Khóa ngoại tham chiếu từ username bảng User

THIẾT KẾ GIAO DIỆN XỬ LÝ

Giao diện trang Đăng nhập

Hình 5.1: Giao diện trang đăng nhập

Bảng 5.1: Mô tả giao diện đăng nhập

STT Tên Loại Ghi chú

1 Nhập username, email, phone, đăng nhập

Input text Nhập thông tin username, email, phone đăng nhập

2 Nhập mật khẩu đăng nhập Password Nhập mật khẩu

3 Đăng nhập Button Khi nhấn vào sẽ thực hiện đăng nhập

4 Quên mật khẩu Link text Khi nhấn vào sẽ mở trang quên mật khẩu

5 Đăng ký tài khoản mới Link text Khi nhấn vào sẽ mở trang đăng ký

6 Đăng nhập bằng Google Button Nhấn vào sẽ đăng nhập bằng Google

7 Đăng nhập bằng Github Button Nhấn vào sẽ đăng nhập bằng Github

Giao diện trang Đăng ký

Hình 5.2: Giao diện trang đăng ký

Bảng 5.2: Mô tả giao diện đăng ký

1 Nhập fullname Input text Nhập thông tin fullname

2 Nhập username Input text Nhập thông tin username

3 Nhập email Email Nhập thông tin email

4 Nhập phone Input text Nhập thông tin phone

5 Nhập mật khẩu Password Nhập thông tin password

6 Nhập lại mật khẩu Password Nhập thông tin confirm password

7 Đăng ký Button Khi nhấn vào sẽ thực hiện đăng ký

8 Đăng nhập Link text Khi nhấn vào sẽ sang trang đăng nhập

Giao diện trang chủ

Hình 5.3: Giao diện trang chủ

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

1 Tìm kiếm người dùng Input text Tìm kiếm người dùng bằng tên

2 Trang chủ Button Khi nhấn vào sẽ chuyển sang trang chủ

3 Tin nhắn Button Khi nhấn vào sẽ chuyển sang trang nhắn tin

4 Bạn bè Button Khi nhấn vào sẽ chuyển sang trang bạn nè

5 Đăng bài Button Khi nhấn vào sẽ hiển thị form đăng bài

6 Trang cá nhân Image Hover vào sẽ hiển thị menu

7 Tin Slider Hiển thị các tin liên quan

8 Thông tin cá nhân Widget Hiển thị thông tin cá nhân của người dùng và bạn bè

9 Bài viết Widget Hiển thị bài viết

10 Dark/light mode Button Chuyển trạng thái trang web sang sáng tối

Hình 5.4: Giao diện trang chủ dark

Giao diện trang chủ có Sidebar

Hình 5.5: Giao diện trang chủ có Sidebar

Bảng 5.4: Mô tả giao diện trang chủ có sidebar

7 Tin Slider Hiển thị các tin liên quan

8 Thông tin cá nhân Widget Hiển thị thông tin cá nhân của người dùng và bạn bè

9 Bài viết Widget Hiển thị bài viết

10 Dark/light mode Button Chuyển trạng thái trang web sang sáng tối

Hình 5.6: Giao diện trang chủ có sidebar dark

Giao diện navbar

Bảng 5.5: Mô tả giao diện navbar

1 Ảnh đại diện Image Khi hover vào sẽ hiển thị menu

2 Trang cá nhân Button Khi nhấn vào sẽ chuyển sang trang cá nhân

3 Đổi layout Button Khi nhấn vào sẽ chuyển sang giao diện sidebar

4 Đăng xuất Button Khi nhấn vào sẽ thực hiện đăng xuất

Giao diện bài viết

Hình 5.8: Giao diện bài viết

Bảng 5.6: Mô tả giao diện bài viết

1 Ảnh bài viết Image Hiển thị ảnh bài viết

2 Nội dung bài viết Text Hiển thị nội dung bài viết

3 Thả cảm xúc Button Khi hover vào sẽ hiển thị cảm biểu tượng cảm xúc

4 Bình luận Button Khi nhấn vào sẽ chuyển xuống khung bình luận

5 Chia sẻ bài viết Button Khi nhấn vào sẽ thực hiện chia sẻ bài viết

6 Xem bình luận Button Hiển thị các bình luận của bài viết

7 Icon Button Khi nhấn vào sẽ hiển thị bảng icon

8 Nhập bình luận Input text Nhập nội dung bình luận

9 Đăng bình luận Button Khi nhấn vào sẽ thực hiện đăng bình luận

Giao diện chi tiết bài viết

Hình 5.9: Giao diện chi tiết bài viết

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

1 Thoát bài viết Button Thoát khỏi bài viết

2 Thông tin người đăng Widget Hiển thị thông tin và ảnh đại diện người đăng bài viết

3 Ảnh, video của bài viết Widget Hiển thị danh sách các ảnh video được đăng trong bài

4 Chuyển ảnh bài viết Button Khi nhấn vào sẽ chuyển sang ảnh, video tiếp theo

5 Thông tin bình luận Widget Hiển thị danh sách các bình luận của bài viết

6 Trả lời bình luận Button Khi nhấn sẽ chuyển vào ô input để trả lời bình luận

7 Nội dung bài viết Text Hiển thị nội dung bài viết

8 Trạng thái cảm xúc người dùng đã thả

Icon Hiển thị trạng thái cảm xúc người dùng đã thả vào bài viết

9 Chia sẻ bài viết Button Khi nhấn vào sẽ thực hiện chia sẻ bài viết

10 Thông tin tương tác cảm xúc bài viết

Text Hiển thị thông tin các tương tác cảm xúc trong bài viết

11 Thả cảm xúc bài viết Button Khi nhấn thực hiện thả cảm xúc bài viết

12 Nội dung bình luận Input Nhập nội dung bình luận

13 Đăng bình luận Button Khi nhấn thực hiện đăng bình luận

Giao diện thả cảm xúc

Hình 5.10: Giao diện thả cảm xúc

Hình 5.11: Giao diện trả lời bình luận

Giao diện trang Story

Hình 5.12: Giao diện trang Story

Bảng 5.8: Mô tả giao diện trang Story

1 Thoát Story Button Thoát khỏi story

2 Chuyển Story Button Khi nhấn thực hiện chuyển sang story tiếp theo

3 Nội dung Story Widget Hiển thị nội dung của Story

4 Thông tin người đăng Story Widget Hiển thị thông tin và ảnh đại diện người đăng story

5 Ảnh của story Widget Hiển thị ảnh của Story

Giao diện trang cá nhân

Hình 5.13: Giao diện trang cá nhân

Bảng 5.9: Mô tả giao diện trang cá nhân

8 Tên người dùng Text Hiển thị tên người dùng

9 Chỉnh sửa thông tin Button Khi nhấn vào sẽ hiển thị form chỉnh sửa thông tin

10 Cài đặt tài khoản Button Khi nhấn vào sẽ chuyển tới trang cài đặt tài khoản

11 Thông tin bạn bè Text Hiển thị thông tin bạn bè

12 Thông tin cá nhân Text Hiển thị thông tin cá nhân

13 Danh sách bài viết Image Hiển thị danh sách bài viết của người dùng

Giao diện trang cá nhân không có bài viết

Hình 5.14: Giao diện trang cá nhân không có bài viết Bảng 5.10: Mô tả giao diện trang cá nhân không có bài viết

3 Hiển thị quan hệ Button Khi nhấn vào sẽ thành unfriend

5 Tất cả bài viết Text Hiển thị tổng số bài viết người dùng đã đăng

6 Tất cả bạn bè Text Hiển thị tổng số bạn bè của người dùng

8 Hiển thị bài viết của người dùng

Widget Hiển thị thông báo không có bài viết

Giao diện trang cá nhân private

Hình 5.15: Giao diện trang cá nhân riêng tư

Bảng 5.11: Mô tả giao diện trang cá nhân riêng tư

3 Hiển thị quan hệ Button Khi nhấn vào sẽ thành unfriend

5 Tất cả bài viết Text Hiển thị tổng số bài viết người dùng đã đăng

6 Tất cả bạn bè Text Hiển thị tổng số bạn bè của người dùng

8 Hiển thị bài viết của người dùng

Widget Hiển thị thông báo tài khoản riêng tư

Giao diện trang chỉnh sửa thông tin

Hình 5.16: Giao diện chỉnh sửa thông tin Bảng 5.12: Mô tả giao diện chỉnh sửa thông tin

1 Đóng form Button Khi nhấn vào sẽ đóng form

2 Tên thông tin Label Hiển thị tên của các thông tin

3 Fullname Input text Cho phép chỉnh sửa fullname

4 Username Text Hiển thị username

5 Bio Input text Cho phép chỉnh sửa bio

6 Email Text Hiển thị email

7 Phone Input text Cho phép chỉnh sửa phone

8 Ngày sinh Calendar Cho phép chỉnh sửa ngày sinh

9 Giới tính Radio Cho phép chỉnh sửa giới tin

10 Cập nhật Button Khi nhấn vào sẽ thực hiện cập nhật

Giao diện ảnh đại diện

Hình 5.17: Giao diện ảnh đại diện

Bảng 5.13: Mô tả giao diện ảnh đại diện

1 Ảnh đại diện Image Ảnh đại diện người dùng

2 Xem ảnh đại diện Button Khi nhấn vào sẽ show ảnh đại diện toàn màn hình

3 Đổi ảnh đại diện Button Khi nhấn vào sẽ mở chức năng đổi ảnh đại diện

Hình 5.18: Giao diện xem ảnh đại diện

Hình 5.19: Giao diện đổi ảnh đại diện

Bảng 5.14: Mô tả giao diện chỉnh sử ảnh đại diện

1 Thoát Button Nhập tên người dung

2 Ảnh đại diện mới Widget Khi nhấn sẽ clear toàn bộ nội dung trong input

3 Lưu thay đổi Button Khi nhấn vào sẽ thực hiện lưu ảnh đại diện mới

Giao diện tìm kiếm

Hình 5.20: Giao diện tìm kiếm

Bảng 5.15: Mô tả giao diện tìm kiếm

1 Nhập tên người dùng Input text Nhập tên người dùng

2 Clear text Icon Khi nhấn và sẽ clear toàn bộ nội dung trong input

3 Tìm kiếm Icon Khi nhấn vào sẽ thực hiện tìm kiếm

4 Kết quả tìm kiếm Widget Hiển thị kết quả tìm kiếm

5 Người dùng Widget Hiển thị thông tin người dùng

Hình 5.21: Giao diện tìm kiếm không tìm thấy

Giao diện đăng bài

Hình 5.22: Giao diện đăng bài

Bảng 5.16: Mô tả giao diện đăng bài

1 Đóng form Button Khi nhấn vào sẽ đóng form

2 Thông tin người dùng Widget Hiển thị thông tin người dùng

3 Nhập nội dung bài viết Input text Nhập nội dung bài viết

4 Đăng Button Khi nhấn vào sẽ thực hiện đăng bài

5 Upload file Button Khi nhấn vào sẽ hiển thị giao diện upload file

Giao diện nhắn tin

Hình 5.23: Giao diện nhắn tin

Bảng 5.17: Mô tả giao diện nhắn tin

1 Tính năng mở rộng Icon Khi nhấn vào sẽ mở menu

2 Tìm kiếm bạn bè Input text Nhập tên bạn bè

3 Danh sách bạn bè Widget Hiển thị danh sách bạn bè đã nhắn tin

4 Tính năng cài đặt Icon Khi nhấn vào sẽ mở setting menu

5 Hiển thị tin nhắn Widget Hiển thị các tin nhắn cũ

6 Tính năng nâng cao Button Khi nhấn vào sẽ mở menu các tính năng nâng cao

7 Nhập nội dung tin nhắn Input text Nhập nội dung tin nhắn

8 Gửi tin nhắn Button Khi nhấn vào sẽ thực hiện gửi tin nhắn

CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG

Kiểm thử ứng dụng

MỤC LỤC PHẦN MỞ ĐẦU

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

2 Mục đích của đề tài

Chương 1 Cơ sở lý thuyết

Chương 2 Khảo sát và phân tích hiện trạng Chương 3 Mô hình hoá yêu cầu

Chương 4 Thiết kế phần mềm

Chương 5 Thiết kế giao diện xử lý

Chương 6 Cài đặt và kiểm thử ứng dụng

NHỮNG KẾT QUẢ ĐẠT ĐƯỢC

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

- Tìm hiểu về Java Spring Boot, Reactjs

- Tham khảo các tài liệu về xây dựng trang thương mại điện tử

Bắt đầu tiểu luận chuyên ngành

- Thảo luận và đề ra các chức năng, giao diện chính của ứng dụng

- Từ đó, lên kế hoạch cho luận văn Tiến hành viết đề cương luận văn

- Khảo sát hiện trạng về nhu cầu sử dụng mạng xã hội

Tham khảo các trang mạng xã hội nổi tiếng như:

- Đánh giá mức độ khả thi của đồ án dựa theo khả năng của bản thân

- Từ đó xác định các yêu cầu của đề tài Viết khảo sát và yêu cầu

- Thực hiện mô hình hoá các yêu cầu, thiết kế các diagram, đặc tả chi tiết

- Từ đó xây dựng database phù hợp với các chức năng, liệt kê các giao diện chức năng, các API cần sử dụng

- Cài đặt database và tìm kiếm dữ liệu

- Thực hiện xây dựng bản thiết kế giao diện trang web một cách chi tiết Thiết kế các API cần sử dụng

+ Cài đặt các giao diện như đã thiết kế

+ Tạo liên kết giữa các trang với nhau

+ Thực hiện kết nối với database, xây dựng trang web theo mô hình MVC + Cài đặt các API

- Back-End: Tiếp tục cài đặt các API đã được liệt kê như thiết kế

- Front-End: Thực hiện gọi cái API để tạo web động

- Liên tục kiểm tra giao tiếp giữa Back-end và Front- end

- Kiểm tra về luồng hoạt động của trang web

- Tiến hành test toàn bộ hệ thống để hoàn thiện trang web

- Chỉnh sửa các tính năng đã cài đặt hoặc thêm các tính năng mới để tối ưu hơn

- Tiến hành viết báo cáo

- Hoàn thành báo cáo Kết thúc tiểu luận chuyên ngành

- Xem lại code và kiểm thử lại hệ thống, thảo luận xác định các phần cần chỉnh sửa, các chức năng còn thiếu

Bắt đầu khóa luận tốt nghiệp

- Bảo trì hệ thống, tối ưu hóa các API, điều chỉnh lại giao diện

- Tổ chức lại các thư mục, các tệp

- Thực hiện các chức năng còn thiếu Thiết kế và cài đặt các API, giao diện cho các chức năng đó

- Tìm hiểu thuật toán AI Collaborative filtering để xây dựng hệ thống gợi ý bạn bè và bài viết

- Tìm hiểu thư viện nhận diện hình ảnh để ràng buộc dữ liệu đầu vào

- Kiểm thử hệ thống và sữa lỗi

- Tìm hiểu Deploy hệ thống và tiến hành Deploy Tiến hành viết báo cáo

- Hoàn thành báo cáo Kết thúc khoá luận tốt nghiệp Ý kiến của giảng viên hướng dẫn

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

Nguyễn Tấn Kiệt Phạm Qui Tâm

1 Tính cấp thiết của đề tài: 17

2 Mục đích của đề tài: 18

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

CHƯƠNG 2: KHẢO SÁT VÀ PHÂN TÍCH HIỆN TRẠNG 34

CHƯƠNG 3: MÔ HÌNH HOÁ YÊU CẦU 51

3.1 Mô hình kiến trúc hệ thống: 51

CHƯƠNG 4: THIẾT KẾ PHẦN MỀM 79

4.3 Cơ sở dữ liệu trên Fire base: 99

CHƯƠNG 5: THIẾT KẾ GIAO DIỆN XỬ LÝ 102

5.1 Giao diện trang Đăng nhập: 102

5.2 Giao diện trang Đăng ký: 103

5.4 Giao diện trang chủ có Sidebar: 106

5.7 Giao diện chi tiết bài viết: 111

5.8 Giao diện thả cảm xúc: 113

5.10 Giao diện trang cá nhân: 115

5.11 Giao diện trang cá nhân không có bài viết: 117

5.12 Giao diện trang cá nhân private: 118

5.13 Giao diện trang chỉnh sửa thông tin: 119

5.14 Giao diện ảnh đại diện: 120

CHƯƠNG 6: CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 126

1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC: 142

2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM: 143

Hình 1.2: Kiến trúc Spring Framework 20

Hình 1.3: Spring boot flow architecture 21

Hình 1.8: Firebase real-time database 28

Hình 1.9: Firebase gửi dữ liệu tới client 29

Hình 1.11: Neighborhood-based collaborative Filtering 31

Hình 2.1: Trang đăng nhập Facebook 35

Hình 2.3: Đăng bài viết Facebook 36

Hình 2.4: Bài viết trên Facebook 37

Hình 2.5: Trang cá nhân Facebook 38

Hình 2.6: Trang đăng nhập Instagram 39

Hình 2.7: Trang đăng kí Instagram 40

Hình 2.10: Trang cá nhân Instagram 42

Hình 2.11: Trang người dùng Instagram 43

Hình 3.1: Kiến trúc hệ thống 51

Hình 4.1: Lược đồ tuần tự Đăng nhập 79

Hình 4.2: Lược đồ tuần tự đăng ký 80

Hình 4.3: Lược đồ tuần tự nhắn tin 81

Hình 4.4: Lược đồ tuần tự bình luận 82

Hình 4.5: Lược đồ tuần tự đổi ảnh đại diện 83

Hình 4.6: Lược đồ tuần tự chia sẻ bài viết 84

Hình 4.7: Lược đồ tuần tự đăng bài 85

Hình 4.8: Lược đồ tuần tự chỉnh sửa trang cá nhân 86

Hình 4.9: Lược đồ tuần tự tìm kiếm người dùng 87

Hình 4.10: Lược đồ tuần tự kết bạn 88

Hình 4.11: Cơ sở dữ liệu 89

Hình 4.12: Cơ sở dữ liệu trên Firebase 99

Hình 5.1: Giao diện trang đăng nhập 102

Hình 5.2: Giao diện trang đăng ký 103

Hình 5.3: Giao diện trang chủ 104

Hình 5.4: Giao diện trang chủ dark 105

Hình 5.5: Giao diện trang chủ có Sidebar 106

Hình 5.6: Giao diện trang chủ có sidebar dark 107

Hình 5.8: Giao diện bài viết 109

Hình 5.9: Giao diện chi tiết bài viết 111

Hình 5.10: Giao diện thả cảm xúc 113

Hình 5.11: Giao diện trả lời bình luận 113

Hình 5.12: Giao diện trang Story 114

Hình 5.13: Giao diện trang cá nhân 115

Hình 5.14: Giao diện trang cá nhân không có bài viết 117

Hình 5.15: Giao diện trang cá nhân riêng tư 118

Hình 5.16: Giao diện chỉnh sửa thông tin 119

Hình 5.17: Giao diện ảnh đại diện 120

Hình 5.18: Giao diện xem ảnh đại diện 121

Hình 5.19: Giao diện đổi ảnh đại diện 121

Hình 5.20: Giao diện tìm kiếm 122

Hình 5.21: Giao diện tìm kiếm không tìm thấy 123

Hình 5.22: Giao diện đăng bài 123

Hình 5.23: Giao diện nhắn tin 124 Hình 6.1: application.properties 126 Hình 6.2: Tạo database leaf_db 127

Bảng 2.1: Chức năng nghiệp vụ 44

Bảng 2.2: Chức năng hệ thống 46

Bảng 2.3: Yêu cầu phi chức năng 50

Bảng 3.1: Đặc tả Usecase Đăng ký 53

Bảng 3.2: Đặc tả Usecase Đăng nhập 54

Bảng 3.3: Đặc tả Uscase Đăng xuất 55

Bảng 3.4: Đặc tả Uscase quên mật khẩu 56

Bảng 3.5: Đặc tả Usecase Xem trang cá nhân người khác 58

Bảng 3.6: Đặc tả Usecase Chỉnh sửa trang cá nhân 59

Bảng 3.7: Đặc tả Usecase Đổi mật khẩu 60

Bảng 3.8: Đặc tả Usecase Tìm kiếm người khác 61

Bảng 3.9: Đặc tả Usecase Thả cảm xúc 62

Bảng 3.10: Đặc tả Usecase Gỡ cảm xúc 63

Bảng 3.11: Đặc tả Usecase Đăng bài viết 64

Bảng 3.12: Đặc tả Usecase Chỉnh sửa bài viết 65

Bảng 3.13: Đặc tả Usecase Chia sẻ bài viết 66

Bảng 3.14: Đặc tả Usecase Xoá bài viết 67

Bảng 3.15: Đặc tả Usecase Kết bạn 68

Bảng 3.16: Đặc tả Usecase Huỷ kết bạn 69

Bảng 3.17: Đặc tả Usecase Nhắn tin 70

Bảng 3.18: Đặc tả Usecase Gửi hình ảnh 71

Bảng 3.19: Đặc tả Usecase Gọi video 72

Bảng 3.20: Đặc tả Usecase Đăng bình luận 73

Bảng 3.21: Đặc tả Usecase Chỉnh sửa bình luận 74

Bảng 3.22: Đặc tả Usecase Xoá bình luận 75

Bảng 3.23: Đặc tả Usecase Quản lý 76

Bảng 3.24: Đặc tả Usecase Thống kê 77

Bảng 3.25: Đặc tả Usecase Phân quyền 78

Bảng 5.1: Mô tả giao diện đăng nhập 102

Bảng 5.2: Mô tả giao diện đăng ký 103

Bảng 5.3: Mô tả giao diện trang chủ 104

Bảng 5.4: Mô tả giao diện trang chủ có sidebar 106

Bảng 5.5: Mô tả giao diện navbar 108

Bảng 5.6: Mô tả giao diện bài viết 110

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

Bảng 5.8: Mô tả giao diện trang Story 114

Bảng 5.9: Mô tả giao diện trang cá nhân 115

Bảng 5.10: Mô tả giao diện trang cá nhân không có bài viết 117

Bảng 5.11: Mô tả giao diện trang cá nhân riêng tư 118

Bảng 5.12: Mô tả giao diện chỉnh sửa thông tin 119

Bảng 5.13: Mô tả giao diện ảnh đại diện 120

Bảng 5.14: Mô tả giao diện chỉnh sử ảnh đại diện 121

Bảng 5.15: Mô tả giao diện tìm kiếm 122

Bảng 5.16: Mô tả giao diện đăng bài 124

Bảng 5.17: Mô tả giao diện nhắn tin 125

Bảng 6.1: Kiểm thử các chức năng quản lý tài khoản 128

Bảng 6.2: Kiểm thử các chức năng quản lý bài viết 133

Bảng 6.3: Kiểm thử các chức năng quản lý quan hệ 138

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

Kết nối và giao lưu là nhu cầu thiết yếu của con người, giúp trao đổi văn hóa và kiến thức toàn cầu Sự phát triển nhanh chóng của khoa học công nghệ đã làm tăng nhu cầu này, dẫn đến sự ra đời của các trang mạng xã hội, nơi mọi người có thể chia sẻ thông tin cá nhân và giao lưu với bạn bè cũng như người lạ Theo thời gian, nhu cầu của người dùng đã mở ra những ý tưởng mới cho các tính năng mạng xã hội như video call và live stream Do đó, việc phát triển các trang mạng xã hội với cả tính năng cơ bản và mới mẻ là rất cần thiết để đáp ứng nhu cầu ngày càng cao của người dùng.

Hiện nay, nhiều trang mạng xã hội như Instagram, Facebook và Twitter đã ra đời và phát triển bền vững nhờ giao diện bắt mắt, sáng tạo cùng với các tính năng cơ bản và nâng cấp liên tục Mỗi nền tảng có quy định và chính sách riêng để kiểm soát người dùng, điều này khiến nhiều người phải sử dụng đồng thời nhiều trang mạng xã hội khác nhau, gây ra sự bất tiện trong việc quản lý.

Nhóm chúng em quyết định thực hiện đề tài "Xây dựng trang mạng xã hội cơ bản" với mục tiêu tạo ra một sản phẩm kết hợp từ các mạng xã hội lớn, đồng thời tích hợp những tính năng sáng tạo mang đậm dấu ấn riêng.

2 Mục đích của đề tài:

Mục đích chính của đề tài là xây dựng nên một trang mạng xã hội có đầy đủ những chức năng cơ bản của nó

Sản phẩm này kết hợp những tính năng nổi bật của các mạng xã hội lớn, mang đến sự tiện lợi tối đa cho người dùng.

Ngoài ra còn cung cấp những tính năng mới, sáng tạo

Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:

● Các kỹ thuật phân tích thiết kế hệ thống

● Tìm hiểu các thư viện hỗ trợ cho đề tài ở Spring boot và Reactjs

● Cách upload file lên Firebase storage, sử dụng Firebase real-time database cho tính năng chat real-time.

CHƯƠNG 1: CƠ SỞ LÝ THUYẾT 1.1 Java Spring boot:

1.1.1 Giới thiệu về Java Spring Boot:

Spring là một framework phát triển ứng dụng Java phổ biến, giúp tạo ra các ứng dụng đơn giản, nhanh chóng và hiệu năng cao Nó bao gồm nhiều dự án nhỏ như Spring MVC cho ứng dụng web, Spring Data và Spring Boot Để phát triển một ứng dụng web cơ bản với Spring framework, bạn cần thực hiện ít nhất 5 công đoạn.

● Tạo một project sử dụng Maven với các dependency cần thiết

● Tạo một tập tin web đuôi (.xml) để khai báo DispatcherServlet (thuộc Spring MVC)

● Một tập tin có cấu hình của Spring MVC

● Trả về một class Controller khi có request đến

● Cuối cùng là phải có một web server phục vụ triển khai ứng dụng lên chạy

Spring Framework được phát triển dựa trên hai nguyên tắc thiết kế chính là Dependency Injection và Aspect Oriented Programming Các tính năng cốt lõi của Spring có thể được áp dụng để phát triển ứng dụng Java Desktop, ứng dụng di động và Java Web Mục tiêu chính của Spring là đơn giản hóa quá trình phát triển các ứng dụng J2EE thông qua mô hình sử dụng POJO (Plain Old Java Object).

Hình 1.2: Kiến trúc Spring Framework [1]

Spring Boot là một module của Spring Framework, cung cấp các tính năng RAD (Rapid Application Development) – phát triển ứng dụng nhanh Nó giúp cho các lập trình

Spring Boot giúp đơn giản hóa quá trình lập trình ứng dụng bằng cách tập trung vào phát triển nghiệp vụ, cho phép tạo ra các ứng dụng độc lập mà không cần cấu hình XML Đây là một chuẩn thiết kế phần mềm giúp tăng năng suất cho lập trình viên.

Hình 1.3: Spring boot flow architecture [1]

Các đặc điểm của Spring Boot:

● SpringApplication: SpringApplication là một class giúp khởi chạy các ứng dụng từ hàm main thuận tiện Để bắt đầu ứng dụng, bạn chỉ cần gọi các method run

Spring Boot Profiles cung cấp phương pháp phân chia cấu hình cho từng môi trường Các annotation như @Component hoặc @Configuration có thể được gán với profiles để xác định thời điểm hoặc môi trường nào sẽ được tải lên.

Externalized Configuration cho phép cấu hình ứng dụng từ bên ngoài, giúp ứng dụng hoạt động hiệu quả trên nhiều môi trường khác nhau Việc này mang lại tính linh hoạt cao cho quy trình phát triển và triển khai ứng dụng.

Configuration bạn có thể sử dụng các file properties, YAML, các tham số command line hay các biến môi trường

Spring Boot sử dụng common logging cho tất cả các chức năng ghi log nội bộ, giúp quản lý các dependency logging một cách mặc định Việc sửa đổi dependency logging chỉ nên thực hiện khi có yêu cầu tùy biến thực sự cần thiết.

Spring có những ưu điểm sau:

● Hội tụ đầy đủ các tính năng của Spring framework

● Đơn giản hóa cấu hình và xây dựng được các ứng dụng độc lập có khả năng chạy bằng java-jar nhờ các dependency starter

Việc triển khai ứng dụng trở nên dễ dàng hơn khi các ứng dụng server được nhúng trực tiếp vào, giúp tránh những khó khăn khi đưa lên môi trường production mà không cần tải file WAR.

Cấu hình tối giản và tự động hỗ trợ cho chức năng Spring giúp tăng năng suất, giảm thời gian viết code và không cần cấu hình XML.

● Cung cấp nhiều plugin, số liệu, cấu hình ứng dụng từ bên ngoài

ReactJS là thư viện JavaScript mã nguồn mở do Facebook phát triển, ra mắt năm 2013, nhằm xây dựng giao diện người dùng Thư viện này được ưa chuộng để phát triển các trang web SPA (Single Page Application) và ứng dụng di động Với cú pháp đơn giản theo phong cách HTML, ReactJS giúp người dùng dễ dàng tạo ra các component UI tái sử dụng, mang lại hiệu quả cao trong quá trình phát triển.

ReactJS có các tính năng hết sức nổi bật bao gồm:

JSX, viết tắt của JavaScript extension, là một phần mở rộng của React, giúp thay đổi cấu trúc DOM Một trang web được xây dựng bằng ReactJS bao gồm nhiều component kết hợp với nhau, thay vì sử dụng một template duy nhất như thông thường Các component hoạt động giống như các hàm JavaScript, cho phép tạo mã dễ dàng bằng cách tách logic thành các đoạn mã độc lập có thể tái sử dụng Chúng ta có thể sử dụng component dưới dạng hàm hoặc lớp, và các component còn có state và props để quản lý dữ liệu.

ReactJS sử dụng Virtual DOM, một bản sao của DOM thật trên trang web, để tối ưu hóa quá trình cập nhật Khi có sự kiện làm thay đổi các thành phần, ReactJS sẽ xác định chính xác những DOM thật cần được cập nhật, từ đó cải thiện hiệu suất và trải nghiệm người dùng.

● Javascript Expressions: Biểu thức JS có thể sử dụng trong file jsx hoặc js bằng cách sử dụng cặp dấu ngoặc nhọn “{}”

Reactjs có những ưu điểm sau:

ƯU ĐIỂM VÀ NHƯỢC ĐIỂM

● Ý tưởng sáng tạo, có khả năng mở rộng và phát triển cao trong tương lai

● Ứng dụng có thể hoạt động ổn định với các tính năng cơ bản

● Sử dụng các thư viện, framework mạnh trong việc phát triển sau này

● Sử dụng thuật toán AI trong hệ thống

● Giao diện còn chưa được bắt mắt, sáng tạo

● Còn thiếu nhiều chức năng của các trang mạng xã hội hiện nay

● Các chức năng chi tiết bên trong các chức năng cơ bản vẫn chưa được hoàn thiện tỉ mỉ, chỉnh chu

● Database bị chia nhỏ, gây khó khăn cho việc lưu trữ

● Các tính năng chưa được xử lý tối ưu về mặt logic và hiệu năng.

THUẬN LỢI

● Nhóm được trang bị những kiến thức cơ bản trong việc phát triển một dữ án phần mềm và kĩ năng chuyên môn

● Nhận được nhiều sự hỗ trỡ tận tình của thầy Nguyễn Hữu Trung trong quá trình thực hiện đề tài

KHÓ KHĂN

● Tiếp xúc và tìm hiểu những công nghệ mới, ngôn ngữ mới trong quá trình thực hiện đề tài

● Những thay đổi chính sách về Firebase của Google cũng gây ra những trở ngại cho nhóm trong quá trình lưu trữ

Đề tài này còn khá mới mẻ đối với nhóm, dẫn đến việc thiết kế cơ sở dữ liệu gặp nhiều khó khăn Nhóm đã phải thực hiện nhiều lần cập nhật để hoàn thiện cơ sở dữ liệu một cách tốt nhất.

● Việc chia nhỏ database cũng là một trở ngại trong việc quản lý và lưu trữ dữ liệu người dùng

● Việc ứng dụng AI vào hệ thống cũng là một khó khăn khi việc lưu trữ dữ lợi không thuận tiện

● Có nhiều chức năng mới và các chi tiết bên trong mà nhóm chúng em không thể phân tích và đưa ra hướng giải quyết hợp lí.

Tiêu đề	Tìm Hiểu Spring Boot Và Xây Dựng Trang Web Mạng Xã Hội
Tác giả	Nguyễn Tấn Kiệt, Phạm Qui Tâm
Người hướng dẫn	ThS. Nguyễn Hữu Trung, ThS. Nguyễn Minh Đạo
Trường học	Đạ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	2023
Thành phố	TP. Hồ Chí Minh

Định dạng
Số trang	150
Dung lượng	8,37 MB