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

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ó

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ình 21020537@vnu.edu.vn Trần Tuấn Anh 21020281@vnu.edu.vn Nguyễn Thành Dũng 21020268@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…,4.4)

- 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ấtlâ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àngloạ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 ýnhững bộ anime hay

- Anime review: Chia sẻ cảm nhận của mình về một bộ anime qua các kênh như blog,YouTube, …

- Anime ranking (Myanimelist): Đưa ra đánh giá, bình luận về anime cho cộng đồng ngườiyêu anime

- 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ộ Animecủ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ácnhó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ởinhữ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ậykhô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ìnhluậ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 ưachuộ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ảnhkhắ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ớimụ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ốnggiả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 trangthô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 đăngcủ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ờikhuyế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ínhnă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ớicá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àodanh 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ôngquê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ầnbackend, 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 animemớ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áccô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 đạtthô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 xemhoặ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ácchứ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 trongdanh 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 ramộ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óatrả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ăngcườ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ạonguyê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ốtcho 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ữ đámmâ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ệuhiệ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ảinghiệ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 Đượcphá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épnhà 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ầnthiết khi dữ liệu thay đổi Nó sử dụng một DOM ảo (Document Object Model) để tối ưu hóa hiệusuấ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ácnhà 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 renderphí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ôitrườ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 khaikhô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 choSEO 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 ứngdụ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ưutrữ 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à APImạ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 chonhà 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 chophé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ằngcá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ốngthiế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ảinghiệ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ồngghé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ịchthà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áctí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úpcho 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ôngnghệ đượ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ựavà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 đếnvớ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ôngnghệ đại gồm ReactJS, NextJS, Firebase, TailwindCSS, SCSS, Typescript để tạo ra một ứngdụ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ầuphi 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, bancá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ốtnhấ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ùngtrướ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 trongnhó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ệnngườ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 hayAniList để tìm ra ưu điểm, nhược điểm hay những gì người dùng ở các trang webnà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 đượcyê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 sangmà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ìnhtrang 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

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ặctrong 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ồmnhậ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êntrang 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 phimTiề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ị

banLuồ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 đangxem 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ết2c Người dùng thêm 1 số thông tin phụ như ngày xem, ngày kếtthú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ành3b 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ôngtin đã đ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ínhnă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ùngLuồ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áchcá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ắnLuồ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 MyAnimeListtrướ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

MyAnimeListTá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ếpTiề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 MyAnimeListLuồ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

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 MyAnimeList3a 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ó trongdanh 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ácbà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àodanh 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ình3.3.2.BiểuđồhoạtđộngchứcnăngtạobàiviếtHì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 dungbà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ạichỉ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ùngmớ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ình3.3.3.BiểuđồhoạtđộngchứcnăngliênkếtvớitàikhoảnMyAnimeList

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 trongtrang 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ườidùng đã liên kết vừa nãy