Công Nghệ Phần Mềm Mạng Xã Hội Chia Sẻ Anime Aninagori.pdf

Khoa Công nghệ thông tin

Đại học Công nghệ - Đại học Quốc gia Hà Nội

Công nghệ phần mềm INT2208 - 4

Mạng xã hội chia sẻ anime Aninagori

Người thực hiện

Lê Thanh Bình21020537@vnu.edu.vn Trần Tuấn Anh21020281@vnu.edu.vn Nguyễn Thành Dũng21020268@vnu.edu.vn

Hà Nội - 2023

3.2.6 Ca sử dụng “Xem bài viết” 18

3.3.3 Liên kết với tài khoản MyAnimeList (cho người dùng chưa connect) 23

Danh sách hình vẽ

Hình 3.3.1 Biểu đồ hoạt động chức năng đăng nhập, đăng ký tài khoản 19

Hình 3.3.2 Biểu đồ hoạt động chức năng tạo bài viết 20

Hình 3.3.3 Biểu đồ hoạt động chức năng liên kết với tài khoản MyAnimeList 21

Hình 3.3.4 Biểu đồ hoạt động chức năng trò chuyện với bạn bè 22

Hình 4.2.3 Biểu đồ tuần tự Liên kết tài khoản MyAnimeList 27

Hình 4.5.1a.1 Giao diện đăng nhập người dùng sử dụng tài khoản và mật khẩu 30

Hình 4.5.1a.2 Giao diện điều hướng khi người dùng bấm nút đăng nhập qua google 30

Hình 4.5.3 Giao diện trang xem thông tin bài viết (post) 34

Hình 4.5.4 Giao diện thống kê dữ liệu Anime của người dùng 35

Hình 4.5.5.1 Giao diện cài đặt phần thông tin cá nhân 36

Hình 4.5.5.2 Giao diện liên kết và đồng bộ hóa với tài khoản MyAnimeList 36

Danh sách bảng biểu

Bảng 3.2.1 Bảng mô tả ca sử dụng “Đăng ký tài khoản” 13

Bảng 3.2.2 Bảng mô tả ca sử dụng “Đăng nhập tài khoản” 13

Bảng 3.2.3 Bảng mô tả ca sử dụng “Đăng xuất tài khoản” 14

Bảng 3.2.4 Bảng mô tả ca sử dụng “Kết bạn” 14

Bảng 3.2.5 Bảng mô tả ca sử dụng “Tạo bài viết” 15

Bảng 3.2.6 Bảng mô tả ca sử dụng “Xem bài viết” 16

Bảng 3.2.7 Bảng mô tả ca sử dụng “Tương tác với bài viết” 16

Bảng 3.2.8 Bảng mô tả ca sử dụng “Trò chuyện” 17

Bảng 3.2.9 Bảng mô tả ca sử dụng “Liên kết với tài khoản MyAnimeList” 17

Bảng 3.2.10 Bảng mô tả ca sử dụng “Gợi ý anime” 18

Bảng 5.2 Danh sách các ca kiểm thử chức năng 39

Phân chia công việc

Mã sinh viên Họ và tên Công việc 21020537 Lê Thanh Bình - Teamlead

- Chức năng: - Sign up/ Sign in

- Add friend, view friend’s watch-status - Notification system

- Post comment, P2W function - Post/ Anime recommendation system - App settings

- Document: - Đặt vấn đề (1.*)

- Mô tả kiến thức nền tảng (2.1) - Phân tích và đặc tả yêu cầu (3.2…, 3.3…) - Phân tích thiết kế và xây dựng hệ thống (4.1,

4.2…, 4.4, 4.6)

- Cài đặt và kiểm thử (5.1, 5.2…, 5.3) 21020268 Nguyễn Thành

Dũng - Chức năng:- Connect account with MyAnimeList - View / Edit user profile

- Add posts’ details, edit post

- Upload multiple image / post image slider - Document:

- Phân tích và đặc tả yêu cầu (3.1, 3.2…, 3.3…) - Phân tích thiết kế và xây dựng hệ thống (4.2…,

4.3, 4.5)

- Kiểm thử hệ thống (5.2)

- Kết luận và định hướng phát triển (6) - Tài liệu tham khảo

21020281 Trần Tuấn Anh - Chức năng: - Phân tích và đặc tả yêu cầu (3.2…, 3.3…) - Phân tích thiết kế và xây dựng hệ thống (4.2…,

- Cài đặt và kiểm thử (5.2…) - Tài liệu tham khảo

Chương 1 Đặt vấn đề

1.1 Thực trạng

1.1.1 Bối cảnh bài toán

Anime là từ mượn của Animation, có nghĩa là “phim hoạt hình” bằng tiếng Nhật, đa phần được chuyển thể từ những tác phẩm truyện tranh manga, light novel Anime đã xuất hiện từ rất lâu, nhưng cho đến gần đây nó mới được quan tâm nhiều và chứng minh được sức hút qua hàng loạt các bộ phim bom tấn với doanh thu khủng.

Tuy nhiên, với số lượng anime khổng lồ hiện nay(~ 12,000 series), việc tìm kiếm bộ phim phù hợp với sở thích cá nhân có thể trở nên khó khăn Đồng thời, nhu cầu kết nối cộng đồng người yêu anime lại với nhau, hay tạo ra một mạng xã hội nơi người xem có thể lưu trữ và chia sẻ các kỉ niệm về các bộ Anime đã và đang xem của họ với những người bạn của mình, cũng trở nên cấp thiết hơn bao giờ hết.

1.1.2 Các giải pháp đã có cho bài toán

- Nói chuyện trực tiếp: Trao đổi về anime với những người cùng sở thích, hoặc xin gợi ý

- Short video/ images: Tạo ra các video ngắn, hình ảnh từ anime để đăng lên các mạng xã hội (YouTube, Facebook, Reddit, …)

- Anime list management (Anilist, Myanimelist): Quản lý tiến độ xem những bộ Anime của người dùng

1.1.3 Hạn chế của các giải pháp đã có cho bài toán

- Nói chuyện trực tiếp: Đây là cách chia sẻ anime đơn giản và phổ biến nhất trong các nhóm bạn Bạn có thể bàn luận về anime ở bất cứ nơi nào và xin gợi ý thú vị từ bạn bè Tuy nhiên, cách này có thể thiếu thông tin, khó miêu tả được nhiều chi tiết trong anime, và chỉ có thể chia sẻ với một số ít người.

- Anime review: Đây là cách chia sẻ anime chuyên nghiệp hơn, thường được dùng bởi những người viết blog, làm video YouTube, … Bạn có thể cung cấp nhiều thông tin, hình ảnh hơn, và chia sẻ được với nhiều người hơn Tuy nhiên, cách này cũng tốn nhiều công

sức để review một bộ anime hoàn chỉnh và ít mang lại lợi ích cho người làm, vì vậy không nhiều người chọn chia sẻ anime qua cách này.

- Anime ranking (Myanimelist): Đây là cách chia sẻ anime thông qua điểm số và bình luận của cộng đồng Bạn có thể biết được thông tin đầy đủ về một bộ anime, cũng như độ nổi tiếng, yêu thích của nó Tuy nhiên, với cách này, người dùng có thể để ý quá nhiều về điểm số, độ nổi tiếng mà bỏ qua nhiều bộ anime thú vị.

- Short video/ images: Đây là cách chia sẻ anime mới mẻ và hấp dẫn, đang rất được ưa chuộng hiện nay Bạn chỉ cần cắt video, hình ảnh từ anime ra và đăng lên các mạng xã hội (YouTube, Facebook, Reddit, …) Cách này dễ thực hiện cho người chia sẻ và tạo ra sự hứng thú ngay lập tức cho người xem Tuy nhiên, nếu sau khi hứng thú rồi mà không có hành động tiếp theo thì khả năng bộ anime đó sẽ không được xem và hứng thú sẽ bị lãng phí.

- Anime list management (Anilist, Myanimelist): Đây là cách lưu trữ tiến trình các bộ Anime phổ biến Bạn điền những thông tin cần thiết về bộ Anime bạn đã và đang xem và hệ thống sẽ tự động lưu vào database cho bạn Tuy nhiên, khi bạn cần chia sẻ 1 số khoảnh khắc hay cảm nhận liên quan đến 1 tập hay Anime vừa xem thì sẽ khó vì các trang web sẽ thường không cung cấp dịch vụ như thế này

1.2 Mục tiêu

Để giải quyết các hạn chế trên, dự án Aninagori đã xây dựng hệ thống mạng xã hội với mục tiêu trở thành nền tảng chia sẻ anime tốt nhất trên Internet Dưới đây là cách mà hệ thống giải quyết mỗi hạn chế cụ thể:

- Hạn chế về thông tin: Hệ thống giải quyết bằng cách cung cấp đường dẫn tới trang thông tin chi tiết về anime cho mỗi bài đăng Người xem có thể nhấp vào đường dẫn này để tìm hiểu thêm về anime đó nếu cần.

- Hạn chế về phạm vi chia sẻ: Hệ thống giải quyết bằng cách đặt mọi bài đăng ở chế độ công khai Điều này có nghĩa là mọi người dùng đều có thể xem và chia sẻ các bài đăng của nhau Điều này giúp mở rộng phạm vi chia sẻ và tạo ra một cộng đồng anime đa dạng và phong phú.

- Hạn chế về công sức chia sẻ: Hệ thống được thiết kế với giao diện đơn giản và dễ sử dụng Người dùng có thể nhanh chóng chọn anime mà họ muốn chia sẻ và viết nội dung đăng bài Quá trình chia sẻ anime trở nên thuận tiện và tiết kiệm thời gian, đồng thời khuyến khích người dùng thường xuyên chia sẻ thông tin về anime yêu thích của mình - Hạn chế về độ phổ biến của một số anime: Hệ thống giải quyết bằng cách sử dụng tính

năng gợi ý bài viết và gợi ý anime Tuy nhiên, việc gợi ý không dựa trên thông số về

điểm hay độ nổi tiếng của anime mà xem xét dựa vào sự tương tác của người dùng với các bài viết để đề xuất những bộ anime phù hợp và độc đáo hơn.

- Hạn chế về thiếu hành động tiếp theo: Hệ thống giải quyết bằng tính năng "thêm vào danh sách Plan to Watch" Tính năng này cho phép người dùng lưu lại những bộ anime mà họ đang có hứng thú và muốn xem trong tương lai Điều này giúp người dùng không quên và có thể truy cập lại sau này.

1.3 Phương pháp

Hệ thống được xây dựng bằng cách sử dụng Framework NextJS và ReactJS cho frontend, cùng với sự hỗ trợ của Tailwind CSS và SCSS để thiết kế giao diện hấp dẫn Đối với phần backend, công nghệ Firebase và NextJS API routes được sử dụng, cơ sở dữ liệu được lưu trữ trong Firestore Ngoài ra, API của Myanimelist cũng được sử dụng để cập nhật thông tin anime mới nhất và đồng bộ lịch sử xem của người dùng với nền tảng Myanimelist.

1.4 Bố cục báo cáo

Phần còn lại của báo cáo được trình bày như sau.

- Chương 2: Mô tả kiến thức nền tảng, đưa ra kiến thức tổng quan về chia sẻ anime và các công nghệ được sử dụng trong hệ thống.

- Chương 3: Phân tích và đặc tả các yêu cầu chung, các ca sử dụng chính và các biểu đồ hoạt động quan trọng.

- Chương 4: Phân tích thiết kế và xây dựng hệ thống, gồm thiết kế chung, các biểu đồ tuần tự cho ca sử dụng chính, thiết kế API, cơ sở dữ liệu, giao diện người dùng.

- Chương 5: Các phương pháp cài đặt và kiểm thử hệ thống - Chương 6: Kết luận và định hướng phát triển của dự án

Chương 2 Mô tả kiến thức nền tảng

2.1 Tổng quan về chia sẻ anime

2.1.1 Khái niệm chia sẻ anime

Chia sẻ anime là một hoạt động có ý nghĩa, cho phép người chia sẻ thể hiện tình yêu và đam mê của mình đối với một bộ anime cụ thể Trong quá trình chia sẻ, người này sẽ truyền đạt thông tin về nội dung, cốt truyện, nhân vật, đặc điểm độc đáo và những điểm thu hút của anime đó Nhờ đó, những người nghe có thể hiểu rõ hơn về bộ anime và có thể đưa ra quyết định xem hoặc không xem dựa trên những thông tin được chia sẻ.

2.1.2 Các mô hình chia sẻ anime

- Nói chuyện trực tiếp: Bàn luận anime trong các nhóm bạn, hỏi gợi ý.

- Anime review: Viết blogs, làm video YouTube, … sau khi xem xong một bộ anime - Anime ranking (Myanimelist): Đánh giá, bình luận anime cho tất cả mọi người - Short video/ images: Cắt video, hình ảnh từ anime ra để đăng lên các nền tảng mạng xã

hội (YouTube, Facebook, Reddit, …)

2.1.3 Lợi ích của việc sử dụng mạng xã hội chia sẻ anime

Với những điểm mạnh của việc chia sẻ short video, images, một mạng xã hội chia sẻ anime sẽ giúp lan tỏa sự yêu thích của anime đến với nhiều người hơn, cũng như cung cấp các chức năng cần thiết tích hợp ngay trong ứng dụng Ví dụ, người dùng khi hứng thú về một bộ anime qua bài viết chia sẻ, sẽ có thể tìm thêm thông tin về bộ đó, hoặc thêm bộ đó vào trong danh sách Plan To Watch của mình.

2.2 Trình bày tổng quan về công nghệ

2.2.1 Giới thiệu

Dự án của nhóm đã sử dụng một bộ công nghệ (hay còn gọi là stack) hiện đại để tạo ra một ứng dụng web mạnh mẽ và hiệu quả, đảm bảo chất lượng phần mềm cũng như tối ưu hóa trải nghiệm của người dùng ở mức tốt nhất.

Ở trung tâm của nó, ReactJS hình thành nền tảng, cung cấp một phương pháp linh hoạt và dựa trên thành phần để xây dựng giao diện người dùng Điều này cho phép sử dụng lại các thành

phần giao diện người dùng và một cấu trúc modular, giúp tối ưu quá trình phát triển Để tăng cường hiệu suất và cải thiện tối ưu hóa công cụ tìm kiếm, nhóm áp dụng NextJS, một framework được xây dựng trên nền tảng React TypeScript, một phiên bản mở rộng của JavaScript với kiểu dữ liệu tĩnh, được sử dụng để mang lại tính an toàn và khả năng mở rộng cho dự án Các thiết kế giao diện người dùng của trang web sử dụng framework TailwindCSS và SCSS cho phép tạo nguyên mẫu nhanh chóng và mô hình thiết kế nhất quán giữa các trang, đem lại trải nghiệm tốt cho người dùng về mặt hình thức Firebase được sử dụng như cơ sở hạ tầng backend và giải pháp cơ sở dữ liệu, cung cấp nhiều tính năng như xác thực, cơ sở dữ liệu thời gian thực, lưu trữ đám mây và hosting Nó tích hợp mượt mà với phía frontend, cho phép quản lý và đồng bộ dữ liệu hiệu quả.

Bằng cách tận dụng sức mạnh của ReactJS, NextJS, TypeScript, TailwindCSS, SCSS và Firebase, dự án mang đến một ứng dụng web hiện đại, mở rộng và đa chức năng, đảm bảo trải nghiệm người dùng tối ưu và quá trình phát triển hiệu quả.

2.2.2 ReactJS

ReactJS là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng Được phát triển bởi Facebook, ReactJS cung cấp một cách tiếp cận dựa trên các thành phần cho phép nhà phát triển tạo ra các thành phần UI có thể tái sử dụng và cập nhật hiệu quả chỉ các phần cần thiết khi dữ liệu thay đổi Nó sử dụng một DOM ảo (Document Object Model) để tối ưu hóa hiệu suất và cung cấp trải nghiệm người dùng liền mạch ReactJS đã thu hút sự quan tâm lớn từ các nhà phát triển nhờ cú pháp rõ ràng, khả năng mở rộng và hệ sinh thái phong phú các thư viện và công cụ.

2.2.3 NextJS

NextJS là một framework được xây dựng trên nền tảng của ReactJS, cho phép render phía máy chủ (SSR) và tạo trang tĩnh (SSG) cho các ứng dụng React Nó cung cấp một môi trường phát triển mạnh mẽ với các tính năng như tách mã tự động, prefetching và triển khai không cần máy chủ NextJS giúp đơn giản hóa quá trình xây dựng ứng dụng web nhanh, tốt cho SEO và có khả năng mở rộng thông qua hệ thống định tuyến tích hợp sẵn, khả năng truy xuất dữ liệu và hỗ trợ các giải pháp CSS-in-JS Nó đã trở thành sự lựa chọn phổ biến để xây dựng ứng dụng web động và có hiệu suất cao.

2.2.4 Firebase

Firebase là một nền tảng phát triển toàn diện do Google cung cấp để tạo ra ứng dụng web và di động Nó cung cấp một bộ dịch vụ dựa trên đám mây để xử lý các khía cạnh khác nhau của

phát triển ứng dụng, chẳng hạn như xác thực, cơ sở dữ liệu thời gian thực, lưu trữ đám mây, lưu trữ và phân tích dữ liệu Với Firebase, nhà phát triển có thể nhanh chóng xây dựng và triển khai ứng dụng mà không cần quản lý cơ sở hạ tầng máy chủ phức tạp Nó cung cấp các SDK và API mạnh mẽ cho các nền tảng phổ biến và tích hợp tốt với các framework frontend như React.

2.2.5 TailwindCSS

TailwindCSS là một framework CSS dựa trên tiện ích (utility-first) nhằm cung cấp cho nhà phát triển cách tiếp cận tùy chỉnh và hiệu quả để xây dựng giao diện người dùng hiện đại Khác với các framework CSS truyền thống, TailwindCSS cung cấp một tập hợp lớn các lớp tiện ích được định nghĩa trước có thể áp dụng trực tiếp vào các phần tử HTML Phương pháp này cho phép nhà phát triển nhanh chóng tạo ra giao diện người dùng nguyên mẫu và tùy chỉnh bằng cách kết hợp các lớp tiện ích thay vì viết CSS tùy chỉnh TailwindCSS cung cấp một hệ thống thiết kế đáp ứng và nhất quán trong khi vẫn duy trì tính linh hoạt và hiệu suất.

2.2.6 SCSS

SCSS, viết tắt của "Sassy CSS," là một phiên bản mở rộng của CSS giúp cải thiện trải nghiệm viết mã SCSS tuân thủ cú pháp tương tự CSS nhưng thêm các tính năng như biến, lồng ghép, mixin và hàm Nó cho phép nhà phát triển viết các bộ mã CSS dễ bảo trì và có thể tái sử dụng bằng cách cung cấp một cách tiếp cận modul và có cấu trúc hơn Mã SCSS được biên dịch thành CSS thông thường trước khi được gửi đến trình duyệt, giúp nhà phát triển tận dụng các tính năng CSS nâng cao trong khi duy trì khả năng tương thích với các trình duyệt.

2.2.7 Typescript

TypeScript là một phiên bản JavaScript có kiểu dữ liệu mạnh mẽ, được sử dụng rộng rãi để phát triển ứng dụng Nó cho phép nhà phát triển viết các ứng dụng mạnh mẽ và có khả năng mở rộng hơn bằng cách phát hiện các lỗi thông thường trong quá trình biên dịch và cung cấp hỗ trợ công cụ tốt hơn TypeScript giới thiệu các tính năng như kiểu dữ liệu tĩnh, giao diện, generics và modules, giúp tổ chức mã, cải thiện chất lượng mã và tăng năng suất phát triển Nó có thể được sử dụng với bất kỳ dự án JavaScript nào và được biên dịch thành JavaScript thuần, giúp cho phù hợp với mã nguồn JavaScript hiện có.

2.3 Tổng kết chương

Phần này đã trình bày tổng quan về hoạt động chia sẻ anime và tổng quan về các công nghệ được nhóm sử dụng trong dự án Nhóm đã phân tích về hoạt động chia sẻ anime và các mô

hình chia sẻ anime hiện nay, từ đó nêu lên sự cần thiết của một mạng xã hội chia sẻ anime Dựa vào đó, nhằm cung cấp một mạng xã hội chia sẻ anime giúp lan tỏa sự yêu thích của anime đến với nhiều người hơn, nhóm đã tiến hành thực hiện phần cài đặt của dự án, sử dụng một bộ công nghệ đại gồm ReactJS, NextJS, Firebase, TailwindCSS, SCSS, Typescript để tạo ra một ứng dụng web mạnh mẽ và hiệu quả, đáp ứng đầy đủ các yêu cầu cần thiết của một mạng xã hội chia sẻ anime.

Chương 3 Phân tích và đặc tả yêu cầu

3.1 Phân tích yêu cầu

3.1.1 Phân tích yêu cầu chung của hệ thống

Hệ thống đảm bảo những yêu cầu chung của 1 hệ thống như yêu cầu chức năng, yêu cầu phi chức năng và yêu cầu miền.

1 Yêu cầu chức năng

- Người dùng có thể đăng nhập và đăng ký tài khoản mới bằng 2 phương thức: google và tài khoản + mật khẩu

- Người dùng có thể cập nhật thông tin cá nhân

- Người dùng có thể đăng bài với nội dung / ảnh hoặc video / trạng thái bộ Anime đang xem / cho điểm / thêm các thông tin phụ như ngày xem, số lần xem, tag, - Người dùng có thể chỉnh sửa / xóa / ẩn bài viết

- Người dùng có thể connect tài khoản với tài khoản của MyAnimeList và đồng bộ dữ liệu về trạng thái xem các bộ Anime ở cả 2 bên

- Admin có thể thực hiện các chức năng như 1 người dùng và xóa / ẩn bài viết, ban các người dùng khác

2 Yêu cầu phi chức năng

- Hệ thống phải có tính năng bảo mật cao để đảm bảo an toàn thông tin người dùng - Hệ thống có thiết kế đơn giản và dễ sử dụng để tạo trải nghiệm người dùng tốt

- Hệ thống phải luôn đảm bảo tốc độ xử lý giữa việc điều hướng các trang web - Hệ thống phải luôn gia hạn token của tài khoản MyAnimeList của người dùng

trước khi hết hạn 3 Yêu cầu miền

- Hệ thống phải được thiết kế để phục vụ người dùng với sở thích về Anime - Hệ thống phải cung cấp cho người dùng thông tin về Anime bao gồm tên, số tập,

trạng thái công chiếu cũng như hình ảnh

- Hệ thống phải có tính năng gợi ý Anime cũng như các bài viết liên quan dựa trên sở thích của người dùng

3.1.2 Thu thập yêu cầu

Để thu thập yêu cầu cho hệ thống, chúng tôi đã áp dụng các phương pháp sau: 1 Thảo luận với những người dùng là fan anime: tổ chức các buổi thảo luận trong

nhóm và với các học sinh cùng lớp để hiểu rõ nhu cầu của họ Trong các buổi

phỏng vấn này, nhom đã đưa ra các câu hỏi liên quan đến tính năng, giao diện người dùng, hiệu suất cũng như bảo mật

2 Tìm hiểu về các hệ thống Anime và mạng xã hội khác: tìm hiểu về mô hình tổ chức của các mạng xã hội khác đã từng làm về Anime như MyAnimeList hay AniList để tìm ra ưu điểm, nhược điểm hay những gì người dùng ở các trang web này yêu cầu cũng như mong muốn

Dựa trên các phương pháp thu cập yêu cầu đã áp dụng, nhóm phát triển đã rút ra được yêu cầu chính của hệ thống từ yêu cầu chức năng, phi chức năng hay yêu cầu miền như đã viết ở phần trên

3.2 Phân tích và đặc tả ca sử dụng

3.2.1 Ca sử dụng “Đăng ký tài khoản”

Bảng 3.2.1 Bảng mô tả ca sử dụng “Đăng ký tài khoản”

Mô tả Người dùng đăng ký tạo tài khoản bằng email để sử dụng các chức năng trên hệ thống.

Tác nhân Người dùng là người muốn tham gia nền tảng với vai trò thành viên.

Tiền điều kiện Người dùng có tài khoản email, username không trùng với tài khoản sẵn có và phải truy cập vào trang đăng ký tài khoản trên hệ thống.

Luồng sự kiện chính 1 Người dùng nhập các trường thông tin trên màn hình đăng ký tài khoản.

2 Người dùng gửi biểu mẫu đăng ký khi điền đầy đủ thông tin 3 Hệ thống xử lý yêu cầu hoàn tất và điều hướng sang màn hình đăng nhập.

Luồng sự kiện rẽ nhánh 1a Người dùng chọn “Continue with Google” để đăng ký với tài khoản Google và nhập username.

2a Nếu đăng ký với tài khoản Google, hệ thống điều hướng sang màn hình trang chủ.

3a Nếu thông tin đăng ký không hợp lệ hoặc không đầy đủ, hệ thống sẽ yêu cầu người dùng nhập lại thông tin.

3.2.2 Ca sử dụng “Đăng nhập tài khoản”

Bảng 3.2.2 Bảng mô tả ca sử dụng “Đăng nhập tài khoản” Mô tả Người dùng đăng nhập tài khoản bằng email/ username và mật

khẩu để sử dụng các chức năng trên hệ thống.

Tác nhân Người dùng là thành viên có tài khoản muốn sử dụng các chức năng trên hệ thống.

Tiền điều kiện Người dùng có tài khoản, mật khẩu hợp lệ và phải truy cập vào trang đăng nhập tài khoản trên hệ thống.

Luồng sự kiện chính 1 Người dùng nhập các trường thông tin trên màn hình đăng nhập 2 Người dùng gửi biểu mẫu đăng nhập khi điền đầy đủ thông tin 3 Hệ thống xử lý yêu cầu hoàn tất và điều hướng sang màn hình trang chủ.

Luồng sự kiện rẽ nhánh 3a Nếu thông tin đăng ký không hợp lệ hoặc không đầy đủ, hệ thống sẽ yêu cầu người dùng nhập lại thông tin.

3.2.3 Ca sử dụng “Đăng xuất tài khoản”

Bảng 3.2.3 Bảng mô tả ca sử dụng “Đăng xuất tài khoản” Mô tả Người dùng đã đăng nhập vào hệ thống chọn đăng xuất để hủy

quyền truy cập vào tài khoản đối với trình duyệt.

Tác nhân Người dùng là người đã đăng nhập vào hệ thống muốn đăng xuất

Tác nhân Người dùng là người đã đăng nhập vào hệ thống và muốn kết bạn Tiền điều kiện Cả 2 người dùng chưa là bạn bè và có tài khoản trên hệ thống Luồng sự kiện chính 1 Người dùng A truy cập vào trang cá nhân của người muốn kết

bạn (người dùng B).

2 Người dùng A ấn nút “Add friend”.

3 Hệ thống xử lý yêu cầu và gửi thông báo tới người dùng B 4 Người dùng B ấn vào “Accept” trên giao diện thông báo hoặc trong trang cá nhân người dùng A, thông báo biến mất 5 Hệ thống xử lý yêu cầu và 2 người dùng là bạn bè của nhau Luồng sự kiện rẽ nhánh 4a Nếu người dùng B từ chối kết bạn, ấn vào “Decline” và kết thúc.

3.2.5 Ca sử dụng “Tạo bài viết”

Người dùng muốn tạo một bài viết mới trên trang web Việc tạo một bài viết bao gồm nhập nội dung bài viết, chọn những thông tin liên quan đến bộ Anime đang xem (tiến trình xem, số tập, tên Anime, số điểm), thêm hình ảnh, video và tag Ngoài ra người dùng có thể thêm 1 số thông tin phụ như ngày xem, ngày hoàn thành, Sau khi hoàn thành, bài viết sẽ được đăng trên trang chủ và có thể được chia sẻ cho những người khác

3.2.5 Bảng mô tả ca sử dụng “Tạo bài viết” Mô tả Người dùng đăng bài viết để chia sẻ với bạn bè

Tác nhân Người dùng muốn chia sẻ tiến trình xem các bộ Anime của bản thân cũng như các khoảnh khắc trong phim

Tiền điều kiện Người dùng có tài khoản, đã đăng nhập vào hệ thống và không bị ban

Luồng sự kiện chính 1 Người dùng nhập tiêu đề cho bài viết

2 Người dùng nhập các thông tin liên quan đến bộ Anime đang xem như tên Anime, số tập, số điểm, tiến trình xem, 3 Người dùng xác nhận hoàn thành tạo bài viết

4 Hệ thống xử lý yêu cầu tạo bài viết và hiển thị bài viết đó lên đầu trang chủ cho người dùng xem

Luồng sự kiện rẽ nhánh 2a Người dùng tải thêm ảnh / video lên 2b Người dùng thêm tag cho bài viết

2c Người dùng thêm 1 số thông tin phụ như ngày xem, ngày kết thúc, số lần xem,

3a Nếu người dùng không điền đủ 2 thông tin bắt buộc ở bước 1 và bước 2 sẽ được hệ thống yêu cầu hoàn thành

3b Nếu người dùng reload hay chuyển hướng trang, bài viết sẽ không lưu nháp

3c Nếu người dùng tắt form nhập thông tin bài viết, những thông tin đã điền vẫn sẽ lưu và người dùng chỉ cần mở lại form đó

3.2.8 Ca sử dụng “Trò chuyện”

Khi người dùng muốn gửi tin nhắn cho một người dùng khác, họ có thể sử dụng tính năng chat để tương tác với nhau trên nền tảng website

Bảng 3.2.8 Bảng mô tả ca sử dụng “Trò chuyện”

Tác nhân Người dùng muốn gửi tin nhắn đến bạn bè

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống và người được gửi tin nhắn phải là bạn bè của người dùng

Luồng sự kiện chính 1 Người dùng truy cập vào chức năng chat bằng cách bấm biểu tượng trên thanh header, hệ thống sau đó sẽ hiển thị ra danh sách các cuộc trò chuyện

2 Người dùng chọn cuộc trò chuyện

3 Hệ thống hiển thị lịch sử tin nhắn của cuộc trò chuyện 4 Người dùng nhập nội dung tin nhắn vào ô nhập liệu 5 Người dùng bấm “Enter” để gửi tin nhắn

Luồng sự kiện rẽ nhánh 1a Người dùng mở cuộc trò chuyện với 1 bạn bè bất kỳ bằng cách bấm vào avatar người đó trong danh sách bạn bè ở Right sidebar

3.2.9 Ca sử dụng “Liên kết với tài khoản MyAnimeList”

Người dùng muốn liên kết tài khoản MyAnimeList của mình với hệ thống hiện tại để dễ dàng quản lý danh sách các bộ Anime cũng như cập nhật 1 cách nhanh chóng và đồng bộ cơ sở dữ liệu Anime của 2 bên Với điều kiện người dùng chưa liên kết với tài khoản MyAnimeList trước đó.

Bảng 3.2.9 Bảng mô tả ca sử dụng “Liên kết với tài khoản MyAnimeList” Mô tả Người dùng liên kết tài khoản trên hệ thống với tài khoản đã có bên

Tác nhân Người dùng muốn quản lý danh sách Anime bên MyAnimeList 1 cách trực tiếp

Tiền điều kiện Người dùng đã đăng nhập vào hệ thống bằng tài khoản , chưa kết nối tài khoản với MyAnimeList và có tài khoản MyAnimeList Luồng sự kiện chính 1 Người dùng vào trang cá nhân và bấm vào nút “Connect with

2 Hệ thống đưa người dùng đến trang xác nhận liên kết của MyAnimeList

3 Người dùng bấm xác nhận liên kết

4 Hệ thống điều hướng người dùng về trang chủ và có thể xem các thống kê về Anime, lịch sử xem của người dùng đồng bộ với bên MyAnimeList ở trang cá nhân

Luồng sự kiện rẽ nhánh 1a Người dùng vào trong cài đặt và vào phần App setting để liên kết với MyAnimeList

3a Người dùng bấm hủy xác nhận và sẽ bị điều hướng trở lại trang cá nhân

3.2.10 Ca sử dụng “Gợi ý anime”

Bảng 3.2.10 Bảng mô tả ca sử dụng “Gợi ý anime”

Mô tả Hệ thống gợi ý anime cho người dùng dựa trên tương tác của người dùng với các bài viết trong trang chủ.

Tác nhân Người dùng là người đã đăng nhập.

Tiền điều kiện Người dùng đã tương tác với các bài viết trong trang chủ một thời gian, qua “Reaction” hoặc không “Reaction”, anime chưa có trong danh sách của người dùng.

Luồng sự kiện chính 1 Người dùng mở trang chủ hệ thống và xem các bài viết 2 Người dùng tương tác với các bài viết (hoặc không) 3 Hệ thống tính điểm tương tác người dùng đối với anime của các bài viết.

4 Hệ thống hiển thị các anime với điểm tương tác cao nhất, chưa có trong danh sách của người dùng.

5 Người dùng tương tác với giao diện “Gợi ý anime” để thêm vào danh sách “Plan to Watch”.

Luồng sự kiện rẽ nhánh 5a Nếu người dùng không thích anime có thể xóa khỏi danh sách “Gợi ý anime” bằng ấn vào nút X.

3.3 Mô tả các biểu đồ hoạt động

3.3.1 Quản lý xác thực tài khoản

Hình3.3.1.Biểuđồhoạtđộngchứcnăngđăngnhập,đăngkýtàikhoản Hình 3.3.1 mô tả hoạt động chức năng đăng nhập, đăng ký tài khoản trên hệ thống như sau:

- Bước 1: Người dùng truy cập vào màn hình đăng nhập tài khoản, kiểm tra đã có tài khoản đăng nhập hay chưa.

- Nếu đã có tài khoản thì người dùng tiến hành nhập thông tin tài khoản, mật khẩu - Nếu chưa có tài khoản, người dùng chọn “Signup” để đăng ký thông tin - Bước 2: Người dùng nhập tài khoản (email/ username) và mật khẩu để đăng nhập.

- Nếu thông tin hợp lệ, hệ thống chuyển hướng người dùng sang trang chủ - Nếu thông tin sai hoặc không đầy đủ, hệ thống hiển thị lại biểu mẫu đăng nhập.

3.3.2 Tạo bài viết

Hình 3.3.2 miêu tả chức năng tạo bài viết khi người dùng ở trang chủ như sau: ● Bước 1: Người dùng ở trang chủ click vào form đăng bài viết ở trên cùng, hệ

thống sau đó sẽ hiển thị giao diện đăng bài

● Bước 2: Người dùng điền các thông tin của bài viết song song như điền nội dung bài viết / chọn thông tin liên quan đến bộ Anime đang xem

- Người dùng có thể lựa chọn thêm 1 số option để đăng bài như Thêm ảnh / video hay thêm thông tin phụ Anime như ngày xem, ngày kết thúc hay số lần xem

- Nếu thông tin hợp lệ: Người dùng sẽ được chuyển đến bước 3 - Nếu thông tin không hợp lệ: Hệ thống báo lỗi và người dùng quay lại

chỉnh sửa thông tin để hợp lệ

● Bước 3: Người dùng bấm đăng bài và trang chủ sẽ refresh với bài viết người dùng mới tạo ở ngay đầu trang chủ với mục đích cho người dùng preview

3.3.3 Liên kết với tài khoản MyAnimeList (cho người dùng chưa connect)

Hình 3.3.3 miêu tả chức năng liên kết với tài khoản MyAnimeList khi người dùng ở trang cá nhân hoặc trong trang cài đặt

● Bước 1: Người dùng bấm nút “Connect with MAL” ở trang cá nhân hoặc trong trang cài đặt

● Bước 2: Hệ thống điều hướng người dùng đến trang xác thực của MyAnimeList ● Bước 3: Người dùng chấp nhận / hủy liên kết

- Nếu người dùng đồng ý liên kết: đến bước 5

- Nếu người dùng không đồng ý: quay lại trang cá nhân / trang cài đặt ● Bước 4: Hệ thống điều hướng người dùng về trang cá nhân và hiển thị các thông

số về anime, lịch sử xem, theo dữ liệu của tài khoản MyAnimeList mà người dùng đã liên kết vừa nãy