Mục đích của đề tài
1.3 Cách tiếp cận và phương pháp nghiên cứu
1.4 Kết quả dự kiến đạt được
1.1 Tổng quan về công nghệ thực hiện
Chương 2: Khảo sát hiện trạng và xác định yêu cầu
Chương 3: Thiết kế ứng dụng
Chương 4: Cài đặt và kiểm thử ứng dụng
STT Mô tả công việc
Ngày bắt đầu-Ngày kết thúc
1 Khảo sát hiện trạng, lên ý tưởng, viết mô tả đồ án; tìm hiểu, lựa chọn và chuẩn bị môi trường làm việc
2 Thiết kế giao diện bằng prototypes 15/09/2020 – 25/09/2020
4 Code chức năng trang đăng nhập, đăng ký
5 Code chức năng thay đổi thông tin người dùng
6 Code trang đăng nhập,đăng kí trên reactjs
7 Code trang home với danh sách ảnh trên reactjs
Code thêm,sửa,xoá ảnh
8 Báo cáo tiến độ lần 1 (Online) 07/10/2020 – 07/10/2020
9 Code chức năng tìm theo ảnh theo chủ đề
Call API lên Front-end 07/10/2020 – 07/10/2020
10 Code chức năng gợi ý ảnh theo cùng chủ đề khi xem chi tiết ảnh
Call API lên Front-end
12 Code chức năng thêm,sửa,xoá bình luận trong bình luận cha đồng thời thả cảm xúc 20/10/2020 – 21/10/2020
13 Code chức năng khi người dùng mơi đăng nhập vào yêu cầu chọn chủ đề yêu thích từ đó filter theo các chủ đề đã chọn
14 Code chức năng chuyển đến chủ đề đã chọn khi click vào các tag ở chi tiết mỗi hình 18/10/2020 – 18/10/2020
15 Code chức năng thay đổi thông tin ngươi dùng 19/10/2020 – 22/10/2020
16 Code chưc năng hiện thị trạng thái người dùng đang online trực tuyến 22/10/2020 – 31/10/2020
17 Code chức năng chat căn bản giữa các user 31/10/2020 – 08/11/2020
18 Cải thiện chức năng chat thêm emoji 08/11/2020 – 10/11/2020
20 Code chức năng đăng ảnh kèm chủ đề 11/11/2020 – 25/11/2020
21 Cải thiện chức năng đăng ảnh kèm caption 25/11/2020 – 27/11/2020
22 Cải thiện realtime giữa những lần chat giữa các user cũng như là bình luận 28/11/2020 – 10/12/2020
23 Báo cáo tiến độ lần 2(Online) 29/11/2020 – 29/11/2020
24 Code chức năng căn bản cho admin 1/12/2020 – 10/12/2020
25 Kiểm thử các chức năng,cải thiện một số chức năng còn thiếu sót 11/12/2020 – 15/12/2020
26 Nghiên cứu package kiểm soát nội dung ảnh đăng lên bằng microsoft computer vison 15/12/2020 -20/12/2020
27 Tổng hợp,bổ sung nội dung báo cáo 15/12/2020 – 22/12/2020
28 Tiếp tục bổ sung dữ liệu,sửa đổi và fixbug 15/12/2020 – 25/12/2020
29 Báo cáo tiến độ lần 3 20/12/2020 – 20/12/2020
Hình 3.4 Use case tìm kiếm ảnh “Search Image” 22
Hình 3.5 Use case chọn topic hình yêu thích khi vừa tạo tài khoản 24
Hình 3.6 Use case xem hình và thông tin chi tiết của hình 25
Hình 3.7 Use case xem bình lận và lượt thích 27
Hình 3.8 Use case chức năng bình luận/thả cảm xúc cho hình ảnh 28
Hình 3.9 Use case trả lời bình luận 30
Hình 3.10 Use case đăng/xóa/sửa ảnh 32
Hình 3.11 Use case tìm kiếm hình ảnh bằng chủ đề 33
Hình 3.12 Use case tải hình với nhiều kích thước 34
Hình 3.13 Use case xem thông tin cá nhân 35
Hình 3.15 Use case nhận thông báo 37
Hình 3.16 Use case xem trang cá nhân 38
Hình 3.17 Use case đăng kí/đăng nhập 39
Hình 3.18 Use case các chức năng của admin 40
Hình 4.1 Sơ đồ ERD cơ sở dữ liệu 42
Hình 4.2 Sequence tìm kiếm theo chủ đề 47
Hình 4.3 Sequence tìm kiếm theo nhiều chủ đề 48
Hình 4.4 Sequence chọn chủ đè ảnh khi vừa đăng nhập 49
Hình 4.5 Sequence xem danh sách ảnh theo chủ đề đã chọn 50
Hình 4.6 Sequence xem chi tiết ảnh 51
Hình 4.7 Sequence hiển thị bình luận,reaction mỗi bài post 52
Hình 4.8 Sequence cập nhật bình luận hoặc reaction 53
Hình 4.9 Sequence xóa bình luận hoặc reaction 54
Hình 4.10 Sequence thêm bình luận hoặc reaction 55
Hình 4.11 Sequence cập nhật bình luận con 56
Hình 4.12 Sequence xóa bình luận con 57
Hình 4.13 Sequence thêm bình luận con 58
Hình 4.14 Sequence tạo bài post mới 59
Hình 4.15 Sequence xóa bài post 60
Hình 4.16 Sequence cập nhật bài post 61
Hình 4.17 Sequence tìm kiếm ảnh theo chủ đề khi click vào tag ở mỗi bài post 62
Hình 4.18 Sequence tải ảnh với nhiều kích thước khác nhau 63
Hình 4.19 Sequence xem ảnh đại diên người dùng 64
Hình 4.20 Sequence xem thông tin chi tiết của người dùng 65
Hình 4.21 Sequence chat với emoji 66
Hình 4.22 Sequence nhận thông báo bới bình luận 67
Hình 4.23 Sequence nhận thông báo bởi reaction 68
Hình 4.24 Sequence thay đổi avatar cá nhân 69
Hình 4.25 Sequence xem những bài post mình đã từng post 70
Hình 4.26 Sequence thay đổi thông tin cá nhân 71
Hình 4.27 Sequence đăng kí tài khoản người dùng 72
Hình 4.28 Sequence đăng nhạp tài khoản người dùng 73
Hình 4.29 Sequence hiển thị danh sách người dùng 74
Hình 4.30 Sequence thay đổi trạng thái người dùng 75
Hình 4.31 Sequence hiện thị tất cả bài post 76
Hình 4.32 Sequence sửa, xóa bài post 77
Hình 4.35 Registerde_Client Home Screen 81
Hình 4.36 First Time Login Screen 82
Hình 4.39 Photo’s comment and post comment screen 85
Hình 5.1 Hình folder chứ project pitogram 97
Hình 5.2 Hình 2 folder back và fornt end 98
Bảng 1: Bảng requirement dành cho use case 22
Bảng 2: Use case tìm kiếm theo một chủ để 23
Bảng 3: Use case tìm kiếm theo nhiều chủ đề 23
Bảng 4: Use case chọn topic hình yêu thích khi vừa tạo tài khoản 24
Bảng 5: Use case xem hình và thông tin chi tiết của hình 26
Bảng 6: Use case xem bình lận và lượt thích 27
Bảng 7 Use case chức năng bình luận/thả cảm xúc cho hình ảnh 29
Bảng 8: Use case trả lời bình luận 31
Bảng 9: Use case đăng/xóa/sửa ảnh 33
Bảng 10: Use case tìm kiếm hình ảnh bằng chủ đề 34
Bảng 11: Use case tải hình với nhiều kích thước 35
Bảng 12: Use case xem thông tin cá nhân 36
Bảng 14 Use case nhận thông báo 38
Bảng 15 Use case xem trang cá nhân 39
Bảng 16: Use case đăng kí/đăng nhập 40
Bảng 17: Use case các chức năng của admin 41
Bảng 29 Registerde_Client Home Screen 82
Bảng 30 First Time Login Screen 82
Bảng 33 Photo’s comment and post comment screen 86
Bảng 43 Test case chức năng đăng kí 100
Bảng 44 Test case chức năng đăng nhập 101
Bảng 45 Test case chức năng tìm kiếm 102
Bảng 46: Test case chức năng thông báo tương tác 102
Bảng 47: Test case chức năng kiểm soát nội dung ảnh post lên 103
1.1 Tính cấp thiết của đề tài
Mạng xã hội hiện nay có thể cho rằng là một phần không thể thiếu đối với mọi người trong chúng ta hiện nay
Mạng xã hội ngày càng trở nên phổ biến, không chỉ với trẻ em mà còn với người lớn tuổi, trở thành nơi giải trí và bày tỏ cảm xúc của mọi người Đây là không gian cho những người có cùng đam mê chia sẻ những hình ảnh đẹp và kiến thức mà họ đã tìm hiểu, giúp kết nối mọi người dù chưa quen biết Nhóm chúng tôi quyết định thử sức xây dựng một trang web mạng xã hội chuyên về hình ảnh, nhằm tạo ra một cộng đồng nơi mọi người có thể giao lưu và chia sẻ những điều đẹp đẽ.
Đề tài “XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ HÌNH ẢNH” nhằm mục tiêu nghiên cứu và ứng dụng các công nghệ hiện đại trong xây dựng website Đầu tiên, sinh viên cần nắm vững lý thuyết và hiểu rõ các công nghệ như NodeJS, Angular, ReactJS, và MongoDB, qua đó nâng cao kiến thức và kỹ năng xử lý vấn đề Thứ hai, đề tài thách thức sinh viên trong việc kết hợp các công nghệ mới, không chỉ dựa vào các mô hình phổ biến như MEAN STACK hay MERN STACK, để phát triển một ứng dụng web hoàn chỉnh Sản phẩm cuối cùng sẽ là một nền tảng kết nối những người đam mê hình ảnh, với nhiều tính năng thực tiễn và khả năng mở rộng trong tương lai, tương tự như Facebook.
Kết quả dự kiến đạt được
1.1 Tổng quan về công nghệ thực hiện
Chương 2: Khảo sát hiện trạng và xác định yêu cầu
Chương 3: Thiết kế ứng dụng
Chương 4: Cài đặt và kiểm thử ứng dụng
STT Mô tả công việc
Ngày bắt đầu-Ngày kết thúc
1 Khảo sát hiện trạng, lên ý tưởng, viết mô tả đồ án; tìm hiểu, lựa chọn và chuẩn bị môi trường làm việc
2 Thiết kế giao diện bằng prototypes 15/09/2020 – 25/09/2020
4 Code chức năng trang đăng nhập, đăng ký
5 Code chức năng thay đổi thông tin người dùng
6 Code trang đăng nhập,đăng kí trên reactjs
7 Code trang home với danh sách ảnh trên reactjs
Code thêm,sửa,xoá ảnh
8 Báo cáo tiến độ lần 1 (Online) 07/10/2020 – 07/10/2020
9 Code chức năng tìm theo ảnh theo chủ đề
Call API lên Front-end 07/10/2020 – 07/10/2020
10 Code chức năng gợi ý ảnh theo cùng chủ đề khi xem chi tiết ảnh
Call API lên Front-end
12 Code chức năng thêm,sửa,xoá bình luận trong bình luận cha đồng thời thả cảm xúc 20/10/2020 – 21/10/2020
13 Code chức năng khi người dùng mơi đăng nhập vào yêu cầu chọn chủ đề yêu thích từ đó filter theo các chủ đề đã chọn
14 Code chức năng chuyển đến chủ đề đã chọn khi click vào các tag ở chi tiết mỗi hình 18/10/2020 – 18/10/2020
15 Code chức năng thay đổi thông tin ngươi dùng 19/10/2020 – 22/10/2020
16 Code chưc năng hiện thị trạng thái người dùng đang online trực tuyến 22/10/2020 – 31/10/2020
17 Code chức năng chat căn bản giữa các user 31/10/2020 – 08/11/2020
18 Cải thiện chức năng chat thêm emoji 08/11/2020 – 10/11/2020
20 Code chức năng đăng ảnh kèm chủ đề 11/11/2020 – 25/11/2020
21 Cải thiện chức năng đăng ảnh kèm caption 25/11/2020 – 27/11/2020
22 Cải thiện realtime giữa những lần chat giữa các user cũng như là bình luận 28/11/2020 – 10/12/2020
23 Báo cáo tiến độ lần 2(Online) 29/11/2020 – 29/11/2020
24 Code chức năng căn bản cho admin 1/12/2020 – 10/12/2020
25 Kiểm thử các chức năng,cải thiện một số chức năng còn thiếu sót 11/12/2020 – 15/12/2020
26 Nghiên cứu package kiểm soát nội dung ảnh đăng lên bằng microsoft computer vison 15/12/2020 -20/12/2020
27 Tổng hợp,bổ sung nội dung báo cáo 15/12/2020 – 22/12/2020
28 Tiếp tục bổ sung dữ liệu,sửa đổi và fixbug 15/12/2020 – 25/12/2020
29 Báo cáo tiến độ lần 3 20/12/2020 – 20/12/2020
Hình 3.4 Use case tìm kiếm ảnh “Search Image” 22
Hình 3.5 Use case chọn topic hình yêu thích khi vừa tạo tài khoản 24
Hình 3.6 Use case xem hình và thông tin chi tiết của hình 25
Hình 3.7 Use case xem bình lận và lượt thích 27
Hình 3.8 Use case chức năng bình luận/thả cảm xúc cho hình ảnh 28
Hình 3.9 Use case trả lời bình luận 30
Hình 3.10 Use case đăng/xóa/sửa ảnh 32
Hình 3.11 Use case tìm kiếm hình ảnh bằng chủ đề 33
Hình 3.12 Use case tải hình với nhiều kích thước 34
Hình 3.13 Use case xem thông tin cá nhân 35
Hình 3.15 Use case nhận thông báo 37
Hình 3.16 Use case xem trang cá nhân 38
Hình 3.17 Use case đăng kí/đăng nhập 39
Hình 3.18 Use case các chức năng của admin 40
Hình 4.1 Sơ đồ ERD cơ sở dữ liệu 42
Hình 4.2 Sequence tìm kiếm theo chủ đề 47
Hình 4.3 Sequence tìm kiếm theo nhiều chủ đề 48
Hình 4.4 Sequence chọn chủ đè ảnh khi vừa đăng nhập 49
Hình 4.5 Sequence xem danh sách ảnh theo chủ đề đã chọn 50
Hình 4.6 Sequence xem chi tiết ảnh 51
Hình 4.7 Sequence hiển thị bình luận,reaction mỗi bài post 52
Hình 4.8 Sequence cập nhật bình luận hoặc reaction 53
Hình 4.9 Sequence xóa bình luận hoặc reaction 54
Hình 4.10 Sequence thêm bình luận hoặc reaction 55
Hình 4.11 Sequence cập nhật bình luận con 56
Hình 4.12 Sequence xóa bình luận con 57
Hình 4.13 Sequence thêm bình luận con 58
Hình 4.14 Sequence tạo bài post mới 59
Hình 4.15 Sequence xóa bài post 60
Hình 4.16 Sequence cập nhật bài post 61
Hình 4.17 Sequence tìm kiếm ảnh theo chủ đề khi click vào tag ở mỗi bài post 62
Hình 4.18 Sequence tải ảnh với nhiều kích thước khác nhau 63
Hình 4.19 Sequence xem ảnh đại diên người dùng 64
Hình 4.20 Sequence xem thông tin chi tiết của người dùng 65
Hình 4.21 Sequence chat với emoji 66
Hình 4.22 Sequence nhận thông báo bới bình luận 67
Hình 4.23 Sequence nhận thông báo bởi reaction 68
Hình 4.24 Sequence thay đổi avatar cá nhân 69
Hình 4.25 Sequence xem những bài post mình đã từng post 70
Hình 4.26 Sequence thay đổi thông tin cá nhân 71
Hình 4.27 Sequence đăng kí tài khoản người dùng 72
Hình 4.28 Sequence đăng nhạp tài khoản người dùng 73
Hình 4.29 Sequence hiển thị danh sách người dùng 74
Hình 4.30 Sequence thay đổi trạng thái người dùng 75
Hình 4.31 Sequence hiện thị tất cả bài post 76
Hình 4.32 Sequence sửa, xóa bài post 77
Hình 4.35 Registerde_Client Home Screen 81
Hình 4.36 First Time Login Screen 82
Hình 4.39 Photo’s comment and post comment screen 85
Hình 5.1 Hình folder chứ project pitogram 97
Hình 5.2 Hình 2 folder back và fornt end 98
Bảng 1: Bảng requirement dành cho use case 22
Bảng 2: Use case tìm kiếm theo một chủ để 23
Bảng 3: Use case tìm kiếm theo nhiều chủ đề 23
Bảng 4: Use case chọn topic hình yêu thích khi vừa tạo tài khoản 24
Bảng 5: Use case xem hình và thông tin chi tiết của hình 26
Bảng 6: Use case xem bình lận và lượt thích 27
Bảng 7 Use case chức năng bình luận/thả cảm xúc cho hình ảnh 29
Bảng 8: Use case trả lời bình luận 31
Bảng 9: Use case đăng/xóa/sửa ảnh 33
Bảng 10: Use case tìm kiếm hình ảnh bằng chủ đề 34
Bảng 11: Use case tải hình với nhiều kích thước 35
Bảng 12: Use case xem thông tin cá nhân 36
Bảng 14 Use case nhận thông báo 38
Bảng 15 Use case xem trang cá nhân 39
Bảng 16: Use case đăng kí/đăng nhập 40
Bảng 17: Use case các chức năng của admin 41
Bảng 29 Registerde_Client Home Screen 82
Bảng 30 First Time Login Screen 82
Bảng 33 Photo’s comment and post comment screen 86
Bảng 43 Test case chức năng đăng kí 100
Bảng 44 Test case chức năng đăng nhập 101
Bảng 45 Test case chức năng tìm kiếm 102
Bảng 46: Test case chức năng thông báo tương tác 102
Bảng 47: Test case chức năng kiểm soát nội dung ảnh post lên 103
1.1 Tính cấp thiết của đề tài
Mạng xã hội hiện nay có thể cho rằng là một phần không thể thiếu đối với mọi người trong chúng ta hiện nay
Mạng xã hội ngày càng trở nên phổ biến, từ trẻ em đến người lớn tuổi, là nơi mọi người giải khuây và bày tỏ cảm xúc mà khó có thể diễn đạt bằng lời Đây cũng là không gian cho những người cùng đam mê chia sẻ những hình ảnh đẹp và kiến thức họ thu thập được, giúp kết nối mọi người dù chưa quen biết Nhận thấy tiềm năng này, nhóm chúng tôi quyết định xây dựng một trang web mạng xã hội tập trung vào hình ảnh.
Đề tài “XÂY DỰNG WEBSITE MẠNG XÃ HỘI VỀ HÌNH ẢNH” tập trung vào hai vấn đề chính Thứ nhất, sinh viên cần nghiên cứu và hiểu rõ các công nghệ xây dựng website, đặc biệt là các thư viện và framework phổ biến dựa trên Javascript như NodeJS, Angular, ReactJS và MongoDB, nhằm nâng cao kiến thức và kỹ năng xử lý vấn đề trong quá trình phát triển Thứ hai, đề tài đặt ra thách thức trong việc kết hợp các công nghệ mới, không sử dụng các mô hình phổ biến như MEAN STACK hay MERN STACK, để tạo ra một ứng dụng web đáp ứng nhu cầu kết nối những người đam mê hình ảnh, đồng thời có khả năng nâng cấp và phát triển tính năng tương lai giống như Facebook.
Đối tượng nghiên cứu của đề tài này tập trung vào hai nhóm chính: những người đam mê sưu tầm ảnh nghệ thuật và những người yêu thích thưởng thức những bức ảnh đẹp Phạm vi nghiên cứu sẽ khám phá sở thích và thói quen của hai nhóm này trong việc tương tác với nghệ thuật nhiếp ảnh.
Nhóm người sưu tầm ảnh sử dụng những bức ảnh của mình để chia sẻ với cộng đồng, qua đó nhận được lượt thích và bình luận đánh giá về các tác phẩm ghi lại những khoảnh khắc đặc biệt trong cuộc sống.
Những người yêu thích ngắm nhìn hình ảnh đẹp thường mong muốn trải nghiệm những điều tuyệt vời, giải tỏa áp lực trong cuộc sống, thể hiện cảm xúc cá nhân và kết nối sâu sắc hơn với những người xung quanh.
Phạm vi nghiên cứu được xác định một cách tổng quát, cho phép người thực hiện nắm bắt kiến thức chung và áp dụng vào sản phẩm thực tế Nội dung nghiên cứu không chú trọng vào các lý thuyết phức tạp mà thiếu tính ứng dụng.
1.4 Kết quả dự kiến đạt được
Hiểu được các kiến thức các công nghệ áp dụng thực hiện
Có kiến thức về microsoft computer vision kiểm soát nội dung ảnh tải lên
Xây dựng một website mạng xã hội về hình ảnh với những kiến thức đã tìm hiểu
Tổng quan về các công nghệ thực hiện
Các thành phần công nghệ thực hiện
Website được xây dựng dựa trên các công nghệ được sử dụng phổ biến hiện nay
Hệ thống được phát triển với công nghệ hiện đại, trong đó phía back-end sử dụng NestJS và GraphQL, trong khi phía front-end áp dụng thư viện JavaScript ReactJS cùng với Ant-design để thiết kế giao diện website Ngoài ra, các công nghệ bổ sung như Webpack và Eslint cũng được sử dụng Cơ sở dữ liệu được quản lý bằng MongoDB, và hệ thống được triển khai thông qua Docker và Nginx.
NestJS là một framework để xây dựng các ứng dụng server-side được phát triển bằng nodejs và sử dụng ngôn ngữ bật cao của JavaScript là TypeScript
MongoDB là một cơ sở dữ liệu NoSQL nổi bật với tính năng không ràng buộc quan hệ, khả năng phân tán và mã nguồn mở Nó có khả năng lưu trữ và xử lý từ những lượng dữ liệu nhỏ đến cực lớn, đáp ứng nhu cầu đa dạng của người dùng.
GraphQL là một syntax mô tả việc yêu cầu lấy dữ liệu được sử dụng để load data từ server-side cho client Đối với front-end:
ReactJS là thư viện UI do Facebook phát triển, cho phép xây dựng giao diện bằng các component Theo xu hướng SPA (Single Page Application), cấu trúc của trang web sẽ được tải lần đầu khi người dùng truy cập, và trong các lần yêu cầu sau, chỉ cần lấy những dữ liệu cần thiết mà không cần tải lại trang Điều này giúp tiết kiệm băng thông và cải thiện trải nghiệm người dùng.
Ant-design là một React UI Component Library, sử dung các components có sẵn tương tự như boostrap, material UI,…
GraphQL là một syntax mô tả việc yêu cầu lấy dữ liệu được sử dụng để load data từ server-side cho client
Webpack is a powerful tool that bundles various file types such as JavaScript, CSS, SCSS, and SASS, allowing for an organized file structure that aligns with the project's architecture.
ESLint là một công cụ phân tích mã nguồn giúp lập trình viên phát hiện các vấn đề như biến khai báo không sử dụng hay mã dư thừa Mục tiêu của ESLint là hỗ trợ lập trình viên trong việc viết mã sạch, dễ đọc và dễ bảo trì hơn.
Docker là một nên tảng để deploy và run application với container
Nginx là một máy chủ web mã nguồn mở mạnh mẽ, nổi bật với kiến trúc đơn luồng và hướng sự kiện, giúp nó hoạt động hiệu quả hơn so với Apache server Ngoài việc phục vụ nội dung web, Nginx còn có khả năng thực hiện các chức năng quan trọng khác như cân bằng tải.
NestJS
Tổng quan
NestJS is an efficient framework for building scalable server-side applications with Node.js It supports both TypeScript and plain JavaScript, incorporating full object-oriented programming (OOP), functional programming (FP), and functional reactive programming (FRP) capabilities.
Về bản chất thì Nest JS sử dụng framework máy chủ HTTP mạnh mẻ như Express (mặc định) và có thể tùy chọn cấu hình để sử dụng Fastify
Nest cung cấp một lớp trừu tượng trên các framework Node.js phổ biến như Express và Fastify, đồng thời hỗ trợ API trực tiếp cho các nhà phát triển Điều này cho phép họ tự do sử dụng nhiều module bên thứ ba có sẵn cho nền tảng cơ bản Tất cả các package được cài đặt khi sử dụng Express hoặc Fastify đều có thể dễ dàng tích hợp vào NestJS.
Nest hỗ trợ Express và đồng thời tương thích với nhiều thư viện khác, chẳng hạn như Fastify, giúp người dùng dễ dàng tích hợp và sử dụng nhiều plugin bên thứ ba có sẵn.
Ưu điểm
NestJS tương thích với cả Typescript và Javascript thuần, default là Typescript
The core design pattern of NestJS is Dependency Injection, and its syntax closely resembles that of Angular Therefore, if you have prior knowledge of Angular, getting started with NestJS will be quite straightforward.
NestJS có rất nhiều module có thể hỗ trợ bạn từ việc hot reload, logger cho đến GraphQL, Websocket, cqrs pattern, microservices, NestJS làm như mọi thứ
NodeJS cung cấp các công cụ tích hợp sẵn giúp lập trình viên dễ dàng kiểm tra mã nguồn với Jasmine để tạo unit test Bên cạnh đó, khi cài đặt thư viện mới cho dự án, node package manager (npm) cũng là một công cụ hỗ trợ hiệu quả.
Số lượng người dùng hiện tại khá ít Hạn chế về mặt hộ trỡ những vấn đế trên Stackoverflow
Quá nhiều thay đổi trong một bản update
GraphQL
Tổng quan
GraphQL là một ngôn ngữ truy vấn đồ thị dành cho API, được phát triển bởi Facebook và hiện được duy trì bởi nhiều công ty lớn cùng cộng đồng toàn cầu Kể từ khi ra đời, GraphQL đã gần như thay thế hoàn toàn REST nhờ vào hiệu quả, sức mạnh và tính linh hoạt vượt trội Nó được xây dựng bằng cách định nghĩa các loại và trường, đồng thời cung cấp chức năng cho từng trường trong mỗi loại.
Khi GraphQL hoạt động trên một URL web, nó có khả năng nhận và thực hiện các truy vấn GraphQL Các truy vấn này sẽ được kiểm tra để đảm bảo chỉ sử dụng các loại và trường đã được định nghĩa, sau đó sẽ tiến hành chạy các hàm để tạo ra kết quả.
GraphQL chia thành 3 phần chính :
Query: Các câu lệnh lấy dữ liệu (tương tự method GET trong REST API)
Mutation: Các câu lệnh để thêm/sửa dữ liệu (tuơng tự method POST/PUT/DELETE trong REST API)
Subscription là câu lệnh dùng để lắng nghe sự kiện trên server, cho phép cập nhật dữ liệu theo thời gian thực khi có thay đổi Nhờ vào tính năng này, GraphQL vượt trội hơn hẳn so với REST API trong việc cung cấp dữ liệu cho client.
Tính năng
Hierarchical : các truy vấn chính xác như dữ liệu mà chúng trả về
Các truy vấn do khách hàng chỉ định : khách hàng có quyền tự do quyết định lấy gì từ máy chủ
GraphQL cho phép xác thực truy vấn theo cú pháp và kiểu trước khi thực thi, điều này không chỉ đảm bảo tính chính xác mà còn hỗ trợ các công cụ phát triển mạnh mẽ như GraphiQL, nâng cao trải nghiệm lập trình viên.
Introspective cho phép bạn truy vấn hệ thống thông qua cú pháp GraphQL, mang lại lợi ích lớn cho việc phân tích cú pháp dữ liệu vào các giao diện strongly-typed Điều này giúp loại bỏ nhu cầu phân tích và chuyển đổi thủ công từ JSON sang các đối tượng.
Tại sao phải dùng GraphQL
Sử dụng được trên cả Front-end lẫn Back-end giúp việc call API trở nên dễ dàng
Một trong những thách thức lớn của các REST call truyền thống là khách hàng không thể yêu cầu một bộ dữ liệu tùy chỉnh, dẫn đến việc nhận toàn bộ thông tin hoặc không có gì Điều này gây khó khăn trong việc tối ưu hóa dữ liệu được truyền tải, ảnh hưởng đến hiệu suất và trải nghiệm người dùng.
Một thách thức phổ biến là quản lý và duy trì nhiều điểm cuối khi nền tảng phát triển, dẫn đến việc khách hàng phải yêu cầu dữ liệu từ các endpoint khác nhau Tuy nhiên, GraphQL API tổ chức dữ liệu theo loại và trường, cho phép người dùng truy cập toàn bộ tính năng của dữ liệu từ chỉ một điểm cuối duy nhất.
Khi phát triển một máy chủ GraphQL, chỉ cần một URL duy nhất để truy xuất và biến đổi tất cả dữ liệu Khách hàng có thể dễ dàng yêu cầu một tập hợp dữ liệu bằng cách gửi một chuỗi truy vấn, mô tả rõ ràng những thông tin họ cần từ máy chủ.
Nhược Điểm
Hệ sinh thái vẫn còn đang phát triển nhanh chóng nên việc cập nhật đòi hỏi phải học tập thường xuyên
Phức tạp hơn so với việc sử dụng Restfull API.
MongoDB
Mô hình
MongoDB hệ quản trị cơ sở dữ liệu mã nguồn mở (open-source) thuộc họ cơ sở dữ liệu phi quan hệ (NoSQL)
MongoDB là một cơ sở dữ liệu phân tán, mang lại nhiều đặc điểm nổi bật như tính sẵn sàng cao và khả năng mở rộng theo chiều ngang, giúp tối ưu hóa hiệu suất và linh hoạt trong việc quản lý dữ liệu.
MongoDB là một cơ sở dữ liệu hướng đối tượng, cho phép lưu trữ dữ liệu linh hoạt mà không bị ràng buộc toàn vẹn như các cơ sở dữ liệu quan hệ Điều này có nghĩa là nhiều loại dữ liệu khác nhau có thể được lưu trữ trong cùng một Collection, tương đương với Table trong SQL Nhờ vào đặc điểm này, MongoDB phù hợp để lưu trữ các dữ liệu đa dạng và phức tạp, dễ dàng thích ứng với những thay đổi về cấu trúc lưu trữ.
MongoDB, được phát triển bởi MongoDB Inc tại New York từ năm 2007, ban đầu được thiết kế như một nền tảng dịch vụ (Platform as a Service - PAAS) Đến năm 2009, MongoDB chính thức ra mắt thị trường với vai trò là một máy chủ cơ sở dữ liệu mã nguồn mở (open-source database server), được duy trì và phát triển bởi MongoDB Inc Nhiều tổ chức lớn và vừa như SourceForge, Foursquare và eBay đã áp dụng MongoDB để xây dựng cơ sở dữ liệu của họ.
Đặc trưng
MongoDB là cơ sở dữ liệu No-SQL loại Document Database với nhiều yếu tố được bổ sung để nâng cao hiệu suất sử dụng như Index, Schema,
MongoDB được lập trình bằng ngôn ngữ C++ và hỗ trợ tốt với các Javascript Framework
Các khái niệm tiêu biểu khi sử dụng MongoDB:
Document trong MongoDB là đơn vị cơ bản của dữ liệu, tương đương với một dòng trong bảng SQL Mỗi document có cấu trúc độc lập dưới dạng một đoạn chuỗi JSON.
Collection là một tập hợp các tài liệu có thuộc tính tương tự, tương đương với bảng trong SQL Sự khác biệt lớn nhất là bảng SQL có cấu trúc cố định, trong khi Collection cho phép nhập liệu tự do với các tài liệu có thuộc tính khác nhau mà không gặp lỗi.
Database trong MongoDB là các cơ sở dữ liệu độc lập, bao gồm một hoặc nhiều Collection cùng với các cài đặt và phân quyền liên quan.
_id là một khóa định danh tự động do MongoDB tạo ra khi thêm một Document vào Collection Mỗi _id của Document luôn đảm bảo tính duy nhất trong Collection mà nó thuộc về.
Chỉ mục (Index) là cấu trúc dữ liệu thu thập thông tin về các trường trong tài liệu của bộ sưu tập (Collection), giúp tăng tốc độ truy vấn đến các trường này Tuy nhiên, việc tạo thêm chỉ mục cũng có thể làm tăng đáng kể chi phí lưu trữ.
MongoDB hỗ trợ truy vấn dữ liệu hiệu quả, cung cấp nhiều câu lệnh bổ trợ giúp đơn giản hóa quá trình truy vấn so với các ngôn ngữ truyền thống, đồng thời đảm bảo tốc độ truy vấn nhanh chóng.
Ưu điểm
Lược đồ dữ liệu linh hoạt của cơ sở dữ liệu No-SQL cho phép tổ chức dữ liệu theo kiểu Document Database, giúp người dùng lưu trữ các Document với thuộc tính và kích thước khác nhau trong cùng một Collection của MongoDB.
Để tăng tốc độ truy vấn dữ liệu, việc khởi tạo Index cho các trường thông thường là rất quan trọng, giúp cải thiện hiệu suất truy vấn một cách đáng kể.
Khả năng mở rộng cơ sở dữ liệu lớn
Phù hợp với xu hướng Big Data toàn cầu, công nghệ này dễ dàng tích hợp vào các ứng dụng thời gian thực Nó được hỗ trợ bởi nhiều thư viện Javascript và có thể áp dụng cho nhiều nền tảng và ngôn ngữ khác nhau.
Nhược điểm
MongoDB là một cơ sở dữ liệu không có cấu trúc, không áp dụng các ràng buộc khóa ngoại và khóa chính như trong cơ sở dữ liệu quan hệ Điều này dẫn đến việc toàn vẹn dữ liệu phải được quản lý bởi Server ứng dụng Do không có ràng buộc, MongoDB thường không cảnh báo về các vấn đề sai sót trong dữ liệu đầu vào.
Tiêu tốn nhiều tài nguyên trong quá trình xử lý cũng như tiêu tốn bộ nhớ cho việc khởi tạo thêm các Index tăng tốc độ truy vấn.
ReactJS
Tổng Quan
React là thư viện JavaScript phổ biến nhất để xây dựng giao diện người dùng (UI)
Phương pháp mới trong việc render trang web mang lại tốc độ phản hồi xuất sắc khi người dùng nhập liệu Giao diện người dùng (UI) được áp dụng trên cả nền tảng Web và Mobile, với React Js trong lĩnh vực web giúp nâng cao trải nghiệm người dùng Ngoài ra, tính năng Hot Reload cũng hỗ trợ lập trình viên làm việc hiệu quả hơn.
ReactJS là một thư viện mã nguồn mở do Facebook phát triển, nhằm tạo ra các ứng dụng web hấp dẫn với tốc độ nhanh và hiệu quả cao Mục tiêu chính của ReactJS là đảm bảo rằng các website sử dụng thư viện này hoạt động mượt mà, nhanh chóng, có khả năng mở rộng cao và dễ dàng triển khai.
ReactJS là một thư viện JavaScript giúp chia nhỏ các giao diện người dùng phức tạp thành các thành phần nhỏ hơn, dễ quản lý Được phát triển bởi Jordan Walke, một kỹ sư phần mềm tại Facebook, ReactJS không chỉ được Facebook duy trì mà còn được áp dụng trong nhiều sản phẩm nổi bật như WhatsApp và Instagram.
ReactJS được dùng để xây dựng các ứng dụng single page application (SPA)/
Một trong những điểm hấp dẫn của ReacJS là nó không chỉ được xây dựng bên phía clients mà còn sử dụng được bên phía server
Virtual DOM giúp cải thiện hiệu suất cho ứng dụng bằng cách chỉ thay đổi node gốc khi có sự thay đổi trạng thái Điều này dẫn đến việc tái cấu trúc toàn bộ, ảnh hưởng đến cây DOM và tốc độ xử lý của ứng dụng.
React JS sử dụng Virtual DOM để tối ưu hóa việc re-render, giúp cải thiện hiệu suất ứng dụng Virtual DOM là một đối tượng JavaScript chứa thông tin cần thiết để tạo ra DOM Khi dữ liệu thay đổi, React JS sẽ tính toán sự khác biệt giữa Virtual DOM và DOM thật, từ đó tối ưu hóa quá trình cập nhật giao diện người dùng.
React sử dụng cơ chế one-way data binding, cho phép dữ liệu được truyền từ component cha (parent) đến component con (child) thông qua props Luồng dữ liệu một chiều này giúp dễ dàng kiểm soát và sửa lỗi Nhờ vào các đặc điểm này, React rất phù hợp để xây dựng các ứng dụng lớn có dữ liệu thay đổi liên tục theo thời gian, đồng thời sự thay đổi dữ liệu thường đi kèm với sự thay đổi về giao diện.
Props là một yếu tố quan trọng giúp các component trong ứng dụng tương tác với nhau Chúng cho phép component nhận dữ liệu đầu vào, từ đó cung cấp các thuộc tính mô tả cách mà component con sẽ được hiển thị Đặc biệt, props là bất biến, nghĩa là chúng không thể thay đổi sau khi được truyền vào component.
In React, the state represents the application's current condition, and when it changes, the component re-renders to update the UI The `componentWillMount` method is executed before a component renders on both the server and client sides, while `componentDidMount` runs after the component renders on the client side, making it suitable for AJAX requests, DOM manipulation, or state updates This method can also connect with other JS frameworks and functions that require delayed execution, such as `setTimeout` or `setInterval` The `componentWillReceiveProps` method is triggered when props are updated, allowing for state updates before the component re-renders The `shouldComponentUpdate` method returns true or false to determine if a component should update; by default, it returns true, but it can be set to false to prevent re-rendering The `componentWillUpdate` method is called before a component re-renders after state updates, followed by `componentDidUpdate`, which executes afterward Finally, `componentWillUnmount` is invoked when a component is removed from the React tree.
ReactJS là một thư viện mạnh mẽ, sử dụng DOM ảo để quản lý các component hiệu quả Bằng cách tính toán các thay đổi cần thiết, ReactJS chỉ cập nhật những phần cần thiết trên DOM, giúp giảm thiểu chi phí thao tác và tối ưu hóa hiệu suất.
Việc viết mã JavaScript trở nên dễ dàng hơn với cú pháp JSX, cho phép kết hợp mã HTML và JavaScript một cách linh hoạt Chúng ta có thể thêm các đoạn HTML vào trong hàm render mà không cần phải sử dụng phép nối chuỗi.
Làm việc với vấn đề test giao diện: Nó cực kì dễ để viết các test case giao diện vì virtual DOM được cài đặt hoàn toàn bằng JS
Hiệu năng cao đối với các ứng dụng có dữ liệu thay đổi liên tục, dễ dàng cho bảo trì và sửa lỗi.
Nhược điểm
Reactjs chỉ phục vụ cho tầng View React chỉ là View Library nó không phải là một MVC framework như những framework khác
Tích hợp Reactjs vào các framework MVC truyền thống yêu cầu cần cấu hình lại
React is relatively heavier compared to other frameworks because it is a UI library that requires installation for various functionalities, while Angular is a complete framework.
Khó tiếp cận cho người mới học Web.
Ant Design
Tổng Quan Về Ant Design
Ant Design là bộ công cụ các components React được phát triển theo tiêu chuẩn thiết kế của Ant UED Team, tương tự như Material Design Nó cung cấp hầu hết các components phổ biến cho ứng dụng web hiện đại, bao gồm Layout, Button, Icon và DatePicker Đặc biệt, Ant Design còn có các components độc đáo như LocaleProvider, cho phép người dùng thay đổi ngôn ngữ trên toàn bộ ứng dụng.
Ant Design là bộ công cụ thiết kế hoàn chỉnh cho React, cung cấp hầu hết các thư viện cần thiết cho dự án của bạn Với Ant Design, bạn không cần cài đặt thêm bất kỳ thư viện nào khác, tương tự như việc sử dụng Bootstrap.
Webpack
Tổng Quan Về Webpack
Webpack là công cụ mạnh mẽ giúp gói gọn các file JavaScript và CSS, bao gồm cả SCSS và SASS, theo cấu trúc dự án Nó không chỉ đơn thuần là việc gói gọn mà còn tổ chức một cách hợp lý giữa các module Ngoài ra, Webpack còn cung cấp nhiều tính năng hữu ích như tối ưu hóa, hỗ trợ chạy trên các môi trường khác nhau (như dev và production), và theo dõi file Với sự hỗ trợ từ một cộng đồng phát triển lớn, Webpack trở thành công cụ lý tưởng cho các nhà phát triển trong việc quản lý các dự án lớn.
Eslint
Tổng Quan Về Eslint
ESLint là công cụ phân tích mã nguồn giúp phát hiện lỗi về phong cách lập trình và quy ước do người dùng hoặc nhóm tự định nghĩa Nó không chỉ tìm ra các lỗi cú pháp mà còn phát hiện những bug tiềm ẩn như biến chưa khai báo hoặc việc import function không tồn tại ESLint được xem là công cụ hỗ trợ cú pháp ES6 và JSX tốt nhất hiện nay, đồng thời là công cụ duy nhất hỗ trợ JSX.
Eslint dùng để check các mã CSS dành cho front-end/
Docker
Tổng Quan Về Docker
Docker is a platform designed for developers and sysadmins to deploy and run applications using containers It enables the creation of isolated and separate environments, known as containers, for launching and developing applications When deploying to any server, simply running the Docker container will instantly start your application.
Các thức hoạt động của Docker
Docker là một hệ điều hành dành cho container, cung cấp phương thức tiêu chuẩn để chạy mã của bạn Tương tự như máy ảo, Docker ảo hóa hệ điều hành của máy chủ, giúp loại bỏ nhu cầu quản lý trực tiếp phần cứng Được cài đặt trên từng máy chủ, Docker cho phép bạn sử dụng các lệnh đơn giản để dựng, khởi động hoặc dừng container.
Các dịch vụ AWS như AWS Fargate, Amazon ECS, Amazon EKS và AWS
Batch giúp bạn dễ dàng chạy các container Docker ở quy mô lớn.
Lý do nên sử dụng Docker
Vận chuyển phần mềm nhiều hơn và nhanh hơn trung bình 7 lần so với người không sử dụng docker
Tiêu chuẩn hóa quy trình vận hành trong các container nhỏ giúp dễ dàng triển khai, xác định vấn đề và thực hiện các biện pháp khắc phục hiệu quả.
Di chuyển trơn tru từ các máy phát triển cục bộ đến đơn vị triển khai sản xuất.
Nginx
Tổng quan về Nginx
NGINX là một web server mã nguồn mở mạnh mẽ, nổi bật với kiến trúc đơn luồng và hướng sự kiện, mang lại hiệu suất vượt trội so với Apache Ngoài vai trò là web server, NGINX còn hỗ trợ các chức năng quan trọng như load balancing, HTTP caching và hoạt động như một reverse proxy Kiến thức về NGINX là cần thiết cho web developer, system administrator và devops.
NGINX được phát hành chính thức vào tháng 10 năm 2004 bởi nhà sáng lập Igor Sysoev, người đã bắt đầu dự án từ năm 2002 nhằm giải quyết vấn đề C10k, tức là giới hạn xử lý 10.000 kết nối đồng thời Hiện nay, nhiều máy chủ web còn phải xử lý số lượng kết nối lớn hơn Với kiến trúc hướng sự kiện không đồng bộ, NGINX mang lại độ tin cậy, tốc độ và khả năng mở rộng vượt trội.
Với khả năng xử lý hàng ngàn kết nối đồng thời, NGINX đã trở thành lựa chọn hàng đầu cho nhiều website có lượng truy cập lớn Các công ty công nghệ hàng đầu như Google, Netflix, Adobe, Cloudflare và WordPress đều tin tưởng sử dụng dịch vụ này.
Microsoft Computer vision
Sơ nét về Microsoft Computer Vision
Là một lĩnh vực trong Artificial Intelligence và Computer Science nhằm giúp máy tính có được khả nng nhìn và hiểu giống như con người
Giống như Face API, Computer Vision của Microsoft xử lý nhận dạng hình ảnh nhưng ở quy mô lớn hơn, nhận diện nhiều đối tượng khác nhau trong một bức ảnh và cố gắng mô tả các hoạt động đang diễn ra để cung cấp thông tin cho người dùng.
KHẢO SÁT HIỆN TRẠNG VÀ XÁC ĐỊNH YÊU CẦU
Khảo sát hiện trạng
Hình 3.1Trang facekbook Ưu điểm:
- Cách phối màu, bố cục gọn ràng, hợp lí
- Giao diện thân thiện với người dùng
- Giao diên cài đặt được thiết kế rất chỉnh chu
- Đầy đủ lựa chọn, thanh tìm kiếm trong menubar
- Có Dark mode thay đổi màu giao diện theo ý người dùng
- Giao diện facebook mới nhật hiện nay có phần giống với twitter
- Giao diện chưa có sự đồng bộ sáng tạo cũng như về mặt ổn được của giảo diện.
Hình 3.2 Trang Instagram Ưu điểm:
- Giao diện thân thiện người dùng
- Bố cục đơn giản, hợp lí, dễ sử dụng
- Tôn màu trắng đên làm chủ đạo toát lên vẻ sang trọng,lịch lãm
- Có phần hơi trống ở 2 bên
- Thanh tìm kiếm nhỏ, mò gây khó nhìn.
Hình 3.3 Trang pinterest Ưu điểm:
- Giao diện đơn giản,dễ sử dụng
- Bố cục hợp lí không quá trống trải trong giao diện
- Thanh menubar hiện thị đầy chức năng ,màu sắc dễ nhìn
- Bố cục rõ ràng, thể hiện đầy đủ các nội dung
- Thanh menu không gây ấn tượng vì chưa đầy đủ lắm
- Trang chủ quá nhiều nội dung nên rút ngắn lại.
Xác định yêu cầu
Website hướng đến những đối tượng có đam mê về ảnh nghệ thuật, nơi để mọi người có thể chia sẻ những tấm ảnh của mình với mọi người
Website sẽ cung cấp các chức năng cần thiết cho mạng xã hội ảnh, bao gồm đăng nhập, đăng ký, lựa chọn nội dung muốn xem, thả cảm xúc và bình luận bài viết.
Sau khi hoàn tất việc tạo tài khoản, người dùng sẽ được đưa đến trang mở đầu, nơi họ có thể lựa chọn nội dung mà mình muốn xem Ngoài ra, người dùng cũng có thể chỉnh sửa các tùy chọn nội dung trong phần hồ sơ cá nhân của mình.
- Trang chủ hiện thị nội dung ảnh có thể được lọc theo chủ đề khi được nhập trên thanh tìm kiếm
- Xem chi tiết ảnh, thả cảm xúc, bình luận về ảnh
- Tải ảnh với nhiều kích thước khác nhau
- Nhận thông báo khi có người dùng tương tác ảnh
- Kiểm soát nội dung ảnh tải lên bằng microsoft computer vision
- Trò chuyện, thả cảm xúc với mọi người
- Đăng hình ảnh kèm với trạng thái
Đặc tả chức năng
Bảng requirement dành cho use case
1 Search image Guest,Admin,Registered_Client
1.1 Search image by tag Guest,Admin,Registered_Client
1.2 Search image by multi tag Guest,Admin,Registered_
2 Choose topic’s image what to see when account just register completely
3 View Image List Guest,Admin,Registered_
Client 3.1 View Image List by chose topic Registered_Client
3.2 View Image Detail Guest,Admin,Registered_
4 See comment,reaction in each image
5 Type comment or add reaction in image
6 Reponse with a parent comment Registered_Client
6.1 Update child comment Registered_Client
6.2 Delete child comment Registered_Client
7 Create a new post with image Registered_Client
7.2 Update caption in a post Registered_Client
8 Search topic when click topic’s tag in each a post
9 Dowload image with other size Guest,Admin,Registered_
10 View user when click them Guest,Register Client
10.1 View user‘images when click them
10.2 View user’s personal information when click them
11 Chat between users Registered_Client
11.1 Chat with emoji Registered_Client
12 Receive notifications when someone comment or add reaction in your post
13 See personal imformation Registered_Client
13.1 Can change your avatar Registered_Client
13.2 Can see your posts what you posted
13.3 Update your information Registered_Client
14 Register an new account Guest
15 Login with an account Registered_Client
16.1 Can update status with account Admin
17.1 Can update,delete with post Admin
Bảng 1: Bảng requirement dành cho use case
Liệt kê các actor
- Registered _Client(Guest sau khi đăng nhập)
Bảng use case
3.3.3.1 Use case tìm kiếm ảnh “Search Image”
Hình 3.4 Use case tìm kiếm ảnh “Search Image”
3.3.3.1.1 Use case tìm kiếm theo một chủ đề “Search image by tag”
Name Search image by tag
Description Tìm ảnh theo một chủ đề
Actor Guest, Admin, Registered_Client
Basic Flow 1 Actor nhấn vào thanh tìm kiếm trên thanh header
2 Actor nhập một cái gì đó cần tìm kiếm ví dụ cat
4.Trang chủ hiển thị những ảnh có chủ đề là cat Alternative flow Hiển thị thông báo không có kết quả tìm kiếm
Bảng 2: Use case tìm kiếm theo một chủ để
3.3.3.1.2 Use case tìm kiếm theo nhiều chủ đề “Search image by multi tag”
Name Search image by multi tag
Description Tìm ảnh theo nhiều chủ đề
Actor Guest, Admin, Registered_Client
Basic Flow 1 Actor nhấn vào thanh tìm kiếm trên thanh header
2 Actor nhập một cái gì đó cần tìm kiếm ví dụ cat
4.Trang chủ hiển thị những ảnh có chủ đề là cat Alternative flow Hiển thị thông báo không có kết quả tìm kiếm
Bảng 3: Use case tìm kiếm theo nhiều chủ đề
3.3.3.2 Use case chọn topic hình yêu thích khi vừa tạo tài khoản
Hình 3.5 Use case chọn topic hình yêu thích khi vừa tạo tài khoản
Name Search image by tag
Description Chọn chủ đề ưa thích muốn xem
Basic Flow 1 Sau khi đăng nhập 1 popup sẽ hiện ra và người dùng có thể chọn chủ đề mà mình thích
2 Grid photo sẽ tự động lọc lại hình dựa theo các mục mà người dùng đã chọn
Alternative flow Hiển thị ảnh random
Bảng 4: Use case chọn topic hình yêu thích khi vừa tạo tài khoản
3.3.3.3 Use case xem hình và thông tin chi tiết của hình
Hình 3.6 Use case xem hình và thông tin chi tiết của hình
Name Xem hình và thông tin chi tiết của hình
Description Xem hình và thông tin chi tiết của hình
Actor Registered_Client, Guest, Admin
Basic Flow 1 Sau khi truy cập trang web thì người dùng đồng thời cũng sẽ xem được danh sách các hình ảnh
2 Nếu người dùng là Registered_client thì danh sách hình sẽ hiện theo các topic mà họ đã chọn
Bảng 5: Use case xem hình và thông tin chi tiết của hình
3.3.3.4 Use case xem bình luận và lượt thích
Hình 3.7 Use case xem bình lận và lượt thích
Name Xem lượt bình luận/reaction
Description Xem lượt bình luận/reaction
Actor Registered_Client, Guest, Admin
Basic Flow 1 Sau khi truy cập trang web thì người dùng đồng thời cũng sẽ xem được các bình luận/reaction của từng hình ảnh
Bảng 6: Use case xem bình lận và lượt thích
3.3.3.5 Use case chức năng bình luận/thả cảm xúc cho hình ảnh
Hình 3.8 Use case chức năng bình luận/thả cảm xúc cho hình ảnh
Name React/bình luận về 1 ảnh
Description React/bình luận về 1 ảnh
Basic Flow Đối với reaction:
1 Sau khi đăng nhập thì người dùng có thể đưa chuột vào biểu tượng trái tim ở mỗi ảnh để hiện các biểu tượng cảm xúc
2 Chọn biểu tượng cảm xúc mong muốn
3 Click lần nữa để xoá Đối với bình luận:
1.Sau khi đăng nhập người dùng có thể sử dụng được chức năng bình luận ở mỗi hình ảnh
2 Viết bình luận vào ô input rồi enter để đăng bình luận
3 Chọn biểu tượng ba chấm ở mỗi bình luận để có thể update hoặc xoá
Bảng 7 Use case chức năng bình luận/thả cảm xúc cho hình ảnh
3.3.3.6 Use case trả lời bình luận
Hình 3.9 Use case trả lời bình luận
Name Trả lời một bình luận
Description Trả lời một bình luận của mình hoặc người khác
Basic Flow 1 Sau khi đăng nhập thì người dùng có thể click vào biểu tượng reply ở một comment bất kì
Bảng 8: Use case trả lời bình luận
3.3.3.7 Use case đăng/xoá/sửa ảnh
Hình 3.10 Use case đăng/xóa/sửa ảnh
Name Đăng/xoá/sửa hình ảnh
Description Đăng/xoá/sửa hình ảnh
Basic Flow 1 Chọn nút đăng ảnh trên thanh công cụ
2 Chọn 1 hoặc nhiều ảnh muốn đăng
3 Ấn “Đăng” để hoàn tất
4 Sửa nội dung hoặc xoá ảnh có thể tìm trong menu của mỗi ảnh Alternative flow Không có
Bảng 9: Use case đăng/xóa/sửa ảnh
3.3.3.8 Use case tìm kiếm hình ảnh bằng tag
Hình 3.11 Use case tìm kiếm hình ảnh bằng chủ đề
Name Tìm kiếm bằng cách click vào tag
Description Tìm kiếm bằng cách click vào tag
Basic Flow Click vào tag bất kì để xem cách hình ảnh có tag tương tự
Bảng 10 : Use case tìm kiếm hình ảnh bằng chủ đề
3.3.3.9 Use case Tải hình với nhiều kích thước
Hình 3.12 Use case tải hình với nhiều kích thước
Name Tải hình với nhiều kích thước
Description Tải hình với nhiều kích thước
Basic Flow Chọn kích thước muốn tải về tại menu của mỗi tấm hình
Bảng 11: Use case tải hình với nhiều kích thước
3.3.3.10 Use case Xem thông tin cá nhân
Hình 3.13 Use case xem thông tin cá nhân
Name Xem thông tin cá nhân và các ảnh đã đăng của một tài khoản
Description Xem thông tin cá nhân và các ảnh đã đăng của một tài khoản
Basic Flow Click vào tên hoặc ảnh đại diện để vào trang cá nhân của một người bất kì
Bảng 12: Use case xem thông tin cá nhân
Name Chat với người khác
Description Chat với người khác
Basic Flow 1 Chọn icon message ở thanh công cụ
2 Chọn user muốn trò chuyện cùng
3.3.3.12 Use case nhận thông báo
Hình 3.15 Use case nhận thông báo
Bảng 14 Use case nhận thông báo
3.3.3.13 Use case Xem trang cá nhân
Hình 3.16 Use case xem trang cá nhân
Name Xem/thay đổi thông tin cá nhân
Description Xem/thay đổi thông tin cá nhân
Basic Flow 1 Click vào icon trang cá nhân trên thanh công cụ
2 Xem và thay đổi các thông tin/ảnh đại diện của bản thân Alternative flow Không có
Bảng 15 Use case xem trang cá nhân
3.3.3.14 Use case Đăng kí/Đăng nhập
Hình 3.17 Use case đăng kí/đăng nhập
Name Đăng kí/Đăng nhập
Description Đăng kí/Đăng nhập
Actor Registered_Client, Admin, Guest
Basic Flow 1 Truy cập trang web
2 Đăng nhập hoặc đăng kí
Bảng 16: Use case đăng kí/đăng nhập
3.3.3.15 Use case các chức năng của admin
Hình 3.18 Use case các chức năng của admin
Name Các chức năng của admin
Description Các chức năng của admin
Bảng 17: Use case các chức năng của admin
Thiết kế dữ liệu
Sơ đồ thiết kế dữ liệu
Hình 4.1 Sơ đồ ERD cơ sở dữ liệu
Mô tả sơ đồ thiết kế dữ liệu
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 email String Email của người dùng
3 password String Password của người dùng
4 firstName String Tên của người dùng
5 lastName String Họ của người dùng
6 avatar String Ảnh đại diện của người dùng
7 coverPhoto String Ảnh bìa của người dùng
8 bio String Mô tả bản thân của người dùng
9 dob String Ngày sinh của người dùng
10 gender String Giới tính của người dùng
11 relationship String Tình trạng mối quan hệ người dùng
12 phone String Số điện thoại người dùng
13 schools String Trình độ học vấn người dùng
14 Permission Array Quyền hạn người dùng
15 lastSeen Number Lần cuối online của người dùng
16 unReadFrom Array Danh sách tin nhắn người chưa đọc
17 interestList Array Danh sách chủ đề yêu thích
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 postID String ID bài post
3 pathID String Password của người dùng
4 height String Chiều cao của ảnh
5 width String Chiều rộng của ảnh
6 artist String Tên người chụp
9 focalLength String Tiêu cự ống kính
10 iso String Độ nhạy sáng
12 make String Tên máy ảnh
13 model String Model của mỗi loại máy
14 createDate Array Thời gian chụp
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 tagName String Tên nội dung ảnh
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 secretString String Chuỗi ID người gửi với ID người nhận
3 Text String Nội dung đoạn chat
4 RecevieID String ID người nhận gửi
5 SendID String ID người gửi
6 time Number Thời gian gửi
7 seen Boolean Người nhận đọc tin nhắn hay chưa
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 userID String Chuỗi ID người gửi với ID người nhận
3 PostID String Nội dung đoạn chat
4 Thumb Array Ảnh đại diện người bình luận,thả cảm xúc
5 whoInteractive Number Người tương tác với bài post đó
6 timeStamp Boolean Thời gian người dùng tương tác bài post
7 Seen Boolean Người nhận được thông báo đã xác nhận hay chưa
8 Text String Nội dung thông báo
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 Text String Nội dung bình luận
3 time String Thời điểm bình luận vào bài post
4 likes Array Thả cảm xúc
5 UserID String ID người dùng bình luận
6 ParentID String ID comment cha
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 idWho String ID người đăng bài
3 Tags Array Nội dung của bài đăng
4 Description String Mô tả bài đăng
5 Time Number Thời gian đăng bài post
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 ParentID String ID bình luận root
3 react Array Reaction của bình luận root
4 idWho String ID người thả cảm xúc
STT Tên Thuộc tính Kiểu dữ liệu Ý nghĩa
1 _id ObjectId Giá trị ID được tạo tự động
2 ReportID String ID người đã báo cáo bài đăng
3 PostID String ID bài post bị báo cáo
4 posterName String Tên chủ bài đăng
5 reporterName String Tên người báo cáo bài viết
6 reportCount Number Số lượng bị báo cáo của bài viết
7 Tags Array Chủ đề bài viết
8 createDate Double Thời gian tạo bài viết
