Xây dựng website Đọc truyện tranh online sử dụng spring boot và react js

Lược đồ Usecase duyệt ảnh của chương truyện do người dùng đăng lên .... Lược đồ Sequence duyệt chương truyện của người dùng đăng tải chứa ảnh nhạy cảm .... Đặc tả Usecase duyệt ảnh của c

TỔNG QUAN VỀ ĐỀ TÀI

LÝ DO CHỌN ĐỀ TÀI

Truyện tranh là 1 phần tuổi thơ của mỗi người và là sở thích của rất nhiều người từ trẻ nhỏ cho tới những thanh niên Ngày nay, nhiều người thường có xu hướng thích sử dụng những eBook hay tài liệu thông qua Internet thay vì đọc những cuốn sách hay tài liệu truyền thống, truyện tranh cũng không ngoại lệ Việc xây dựng website đọc truyện tranh online giúp chúng ta không cần mua những cuốn sách truyền thống và mang lại sự linh hoạt, thuận tiện cho người đọc, cho phép họ trải nghiệm nội dung yêu thích mọi lúc mọi nơi

Ngoài ra, khi xây dựng website đọc truyện online này, nhóm còn muốn tạo ra một cộng đồng về truyện tranh, người dùng không chỉ lên đọc truyện đã có sẵn từ những tác giả trước mà còn có thể thỏa sức sáng tạo để đăng tải những bộ truyện do chính mình là tác giả và có thể nhận được những sự góp ý của cộng đồng thông qua bình luận và đánh giá để rút kinh nghiệm Điều này giúp những người ưu thích truyện tranh có thể thỏa mãn đam mê và biết đâu đó có thể phát hiện tài năng của bản thân

Với những lí do trên, nhóm quyết định lựa chọn đề tài xây dựng website đọc truyện tranh online với mục tiêu cung cấp nơi giải trí cho những người ưu thích truyện và là nơi đăng tải truyện cho những tác giả để có thể đưa những sản phẩm của mình ra với cộng đồng.

MỤC TIÊU ĐỀ TÀI

Website đọc truyện tranh online chỉ ra những mục tiêu mà nhóm sinh viên phải hoàn thành gồm:

－ Nghiên cứu và áp dụng các công nghệ, thư viện và kỹ thuật để phát triển website

－ Phát triển ứng dụng độc lập, dễ dàng triển khai trên nhiều môi trường khác nhau Website hướng đến nhiều người dùng

－ Ứng dụng đáp ứng được những chức năng cơ bản của một website đọc truyện Ứng dụng AI để hỗ trợ quản lý nội dung

－ Giao diện dễ tiếp cận và hấp dẫn

－ Có khả năng mở rộng và phát triển trong tương lai

PHẠM VI NGHIÊN CỨU

1.3.1 Nghiên cứu về công nghệ

Hình 1-1 Các công nghệ được nghiên cứu

－ Tìm hiểu về quy trình thực hiện 1 dự án phần mềm

－ Tìm hiểu về các công nghệ cần thiết để xây dựng ứng dụng web như React

JS, Spring Boot, Spring Security, MySQL.…

－ Tìm hiểu một số thư viện python để tích hợp mô hình học máy cho quản lý nội dung và xây dựng API như pandas, tensorflow, flask…

－ Tìm hiểu 1 số thư viện khác như JWT, Axios hay các API của bên thứ 3 như VNPAY, Azure, …

1.3.2 Phân tích những web đọc truyện trên internet

Tham khảo một số trang web như Webtoon, Tapas

Link website: https://www.webtoons.com/en

Hình 1-2 Trang web đọc truyện online Webtoon Điểm mạnh:

- Giao diện dễ nhìn, dễ sử dụng

- Có trang Webtoon Shop bán đồ liên quan tới những bộ truyện

- Số lượng truyện phong phú, đa dạng thể loại

- Có xây dựng app mobile

- Các chức năng đầy đủ, chi tiết Điểm yếu:

- Chỉ hỗ trợ ngôn ngữ tiếng anh

- Một số giao diện chưa bắt mắt lắm

Link Website: https://tapas.io/

Hình 1-3 Trang web đọc truyện online Tapas Điểm mạnh:

- Giao diện dễ nhìn, dễ sử dụng

- Ngoài truyện tranh ra còn có tiểu thuyết

- Số lượng truyện phong phú, đa dạng thể loại

- Xây dựng các cộng đồng trên Discord, Instagram, Tiktok

- Có trang Merch Shop bán đồ liên quan tới các bộ truyện

- Có xây dựng app mobile

- Các chức năng đầy đủ, chi tiết Điểm yếu:

- Chỉ hỗ trợ ngôn ngữ tiếng anh

- Khó tiếp cận cho người mới bắt đầu sử dụng

KẾT QUẢ DỰ KIẾN

Xây dựng website đọc truyện tranh với những vai trò và chức năng tương ứng như sau:

+ Quản lý truyện cá nhân (thêm, sửa, xóa truyện hay chương truyện) + Cập nhật thông tin cá nhân

+ Báo cáo truyện, báo cáo bình luận

+ Bình luận, đánh giá truyện

+ Xem lịch sử đọc truyện

+ Thêm truyện vào ưa thích

+ Xem thống kê cá nhân

+ Nhắn tin với người dùng khác

+ Theo dõi truyện, theo dõi người dùng

+ Nhận lợi nhuận từ lượt view đọc truyện của mình đăng tải

+ Tương tác với truyện Premium

+ Nâng cấp truyện cá nhân lên Premium

+ Quản lý thể loại truyện của hệ thống

+ Quản lý các gói Premium để cho người dùng đăng ký

+ Duyệt những truyện có chứa hình ảnh nhạy cảm cho người dùng yêu cầu + Quản lý về mức giá chi trả cho lượt đọc truyện cho tác giả

+ Xem thống kê dữ liệu chung của website

+ Xử lý báo cáo (báo cáo truyện, báo cáo bình luận)

CƠ SỞ LÝ THUYẾT LIÊN QUAN

JAVA

Java là một trong những ngôn ngữ lập trình hướng đối tượng Nó được sử dụng trong phát triển phần mềm, trang web, game hay ứng dụng trên các thiết bị di động

Java được khởi đầu bởi James Gosling và bạn đồng nghiệp ở Sun MicroSystem năm 1991 Ban đầu Java được tạo ra nhằm mục đích viết phần mềm cho các sản phẩm gia dụng, và có tên là Oak Java được phát hành năm 1994, đến năm 2010 được Oracle mua lại từ Sun MicroSystem

Java được tạo ra với tiêu chí “Viết (code) một lần, thực thi khắp nơi” (Write Once, Run Anywhere – WORA) Chương trình phần mềm viết bằng Java có thể chạy trên mọi nền tảng (platform) khác nhau thông qua một môi trường thực thi với điều kiện có môi trường thực thi thích hợp hỗ trợ nền tảng đó Ưu điểm:

Java là nền tảng độc lập vì chúng ta có thể chạy mã Java trên bất kỳ máy nào mà không cần cài đặt bất kỳ phần mềm đặc biệt nào, JVM thực hiện điều đó

Java là ngôn ngữ lập trình hướng đối tượng

Trong Java, chúng ta có thể thực thi nhiều chương trình đồng thời, do đó có thể đạt được đa luồng

Java mạnh mẽ vì nó có nhiều tính năng như thu gom rác, xử lý ngoại lệ

Java là một ngôn ngữ cấp cao dễ hiểu

Sử dụng bộ nhớ lớn hơn so với một số ngôn ngữ lập trình khác

Tốc độ chậm hơn so với các ngôn ngữ lập trình gần sát với phần cứng, chẳng hạn như C hoặc C++

Cú pháp phức tạp hơn so với một số ngôn ngữ lập trình khác

SPRING FRAMEWORK

Spring Boot và Spring Security là hai công nghệ quan trọng trong hệ sinh thái Spring Framework, được sử dụng rộng rãi trong phát triển ứng dụng web và dịch vụ web hiện đại Dưới đây là một giới thiệu về cả hai công nghệ này

Spring Boot là một framework phát triển ứng dụng Java, giúp đơn giản hóa quá trình xây dựng ứng dụng Spring Nó cung cấp một cấu hình mặc định và tự động cấu hình các thành phần Spring phổ biến như Spring MVC (Model-View-Controller), Spring Data, và Spring Security Mục tiêu chính của Spring Boot là tạo ra các ứng dụng độc lập và tự chạy, giảm bớt sự phức tạp trong cấu hình và triển khai ứng dụng

Một số đặc điểm quan trọng của Spring Boot bao gồm:

- Tự động cấu hình: Spring Boot tự động cấu hình các thành phần Spring dựa trên quy ước và cấu hình mặc định, giảm bớt công việc cấu hình thủ công

- Nhúng máy chủ web: Spring Boot có thể nhúng các máy chủ web như Tomcat, Jetty hoặc Undertow trực tiếp vào ứng dụng, không cần cài đặt và cấu hình riêng biệt

- Quản lý phụ thuộc: Spring Boot cung cấp công cụ quản lý phụ thuộc Maven hoặc Gradle để dễ dàng quản lý các thư viện phụ thuộc của ứng dụng

- Kết hợp tốt với Spring: Spring Boot không chỉ đơn giản hóa việc phát triển, mà còn giữ được sức mạnh và linh hoạt của Spring Framework

Spring Security là một framework mạnh mẽ để xác thực và phân quyền trong ứng dụng Java Nó cung cấp các tính năng bảo mật như xác thực người dùng, quản lý phiên làm việc, phân quyền dựa trên vai trò và các cơ chế bảo mật khác để bảo vệ ứng dụng của bạn

Spring Security cho phép bạn xác thực và phân quyền dễ dàng thông qua các cấu hình XML hoặc các Java annotation Nó tích hợp tốt với Spring Framework và cung cấp tích hợp sẵn với các công nghệ như Spring MVC, Spring Boot và Spring Data

Một số tính năng quan trọng của Spring Security bao gồm:

- Xác thực và quản lý người dùng: Spring Security cung cấp cơ chế xác thực cho phép xác định người dùng là ai và xác thực thông tin đăng nhập Nó cũng hỗ trợ quản lý người dùng, bao gồm đăng ký, đăng nhập và quên mật khẩu

- Phân quyền và quản lý vai trò: Spring Security cho phép bạn xác định và kiểm soát quyền truy cập của người dùng dựa trên vai trò Bạn có thể xác định vai trò và quyền truy cập thông qua cấu hình hoặc các annotation

- Bảo vệ chống các cuộc tấn công phổ biến: Spring Security cung cấp bảo vệ chống Cross-Site Request Forgery (CSRF), SQL injection, cross-site scripting (XSS) và nhiều loại tấn công khác

Spring Boot và Spring Security là hai công nghệ mạnh mẽ và phổ biến trong phát triển ứng dụng Java Sử dụng chúng, bạn có thể nhanh chóng xây dựng ứng dụng an toàn và mạnh mẽ với sự giảm thiểu công sức cấu hình và mã lệnh.

REACT JS

React JS là một thư viện JavaScript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi Bình thường các lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute như Angular JS nhưng với React JS làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX Qua đó bạn có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn

Những đặc điểm quan trọng của React:

－ Components (thành phần): React cho phép bạn tạo ra các thành phần độc lập, dễ dàng quản lý và có thể tái sử dụng Mỗi component có thể chứa mã HTML, CSS và JavaScript riêng biệt Có 2 loại component chính là Class component và Function component

－ Virtual DOM (DOM ảo): React tạo ra một bản sao ảo của DOM và so sánh với trạng thái trong component của DOM thực (real DOM), sau đó cập nhật những phần khác biệt, thay vì phải cập nhật toàn bộ DOM thực mỗi khi có thay đổi

－ Single-Page Applications (SPA): React tích hợp tốt với các thư viện định tuyến (routing) và quản lý trạng thái của ứng dụng nên thích hợp với việc phát triển các SPA

－ Hệ sinh thái đa dạng: Với nhiều thư viện và công cụ bổ sung như React Router, Redux, Material-UI,

－ Phù hợp với đa dạng thể loại website: ReactJS khiến cho việc khởi tạo website dễ dàng hơn bởi vì không cần phải code nhiều như khi tạo trang web thuần chỉ dùng JavaScript, HTML

－ Tái sử dụng các Component: nếu xây dựng các Component đủ tốt, đủ linh hoạt để có thể thoả các yêu cầu của nhiều dự án khác nhau, chúng ta chỉ tốn thời gian xây dựng ban đầu và sử dụng lại hầu như toàn bộ ở các dự án sau

－ Có thể sử dụng cho cả Mobile application: chúng ta đều biết rằng ReactJS được sử dụng cho việc lập trình website, nhưng nếu cần phát triển thêm ứng dụng mobile thì có thể sử dụng thêm React Native – một framework khác được phát triển cũng chính Facebook

－ Debug dễ dàng: Facebook đã phát hành 1 Chrome extension dùng trong việc debug trong quá trình phát triển ứng dụng Điều đó giúp tăng tốc quá trình release sản phẩm cũng như quá trình coding

－ 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 Đây chỉ là thư viện của Facebook giúp render ra phần view Vì thế React sẽ không có phần Model và Controller, mà phải kết hợp với các thư viện khác React cũng sẽ không có 2-way binding hay là Ajax

－ Tích hợp React JS vào các framework MVC truyền thống yêu cầu cần phải cấu hình lại.

MYSQL

MySQL là một hệ thống quản trị cơ sở dữ liệu mã nguồn mở (gọi tắt là RDBMS) hoạt động theo mô hình client-server Với RDBMS là viết tắt của Relational Database Management System MySQL được tích hợp apache, PHP MySQL quản lý dữ liệu thông qua các cơ sở dữ liệu Mỗi cơ sở dữ liệu có thể có nhiều bảng quan hệ chứa dữ liệu MySQL cũng có cùng một cách truy xuất và mã lệnh tương tự với ngôn ngữ SQL MySQL được phát hành từ thập niên 90s

－ Linh hoạt và dễ dùng: Quá trình cài đặt tương đối đơn giản

－ Hiệu năng cao: Dù dữ liệu của bạn lớn như thế nào thì MySQL cũng đáp ứng với tốc độ cao, mượt mà kể cả big data của các trang thương mại điện tử hoặc những hoạt động kinh doanh nặng nề liên quan đến công nghệ thông tin

－ An toàn: Vấn đề an toàn luôn là vấn đề cực kì quan trọng trong ngành dữ liệu và MySQL đảm bảo được tiêu chuẩn bảo mật rất cao

－ MySQL có thể bị khai thác để chiếm quyền điều khiển

－ Dù có thể quản lí dữ liệu với số lượng lớn nhưng MySQL vẫn không đủ khả năng tích hợp quản lí dữ liệu khổng lồ và mang tính hệ thống cao như: hệ thống siêu thị trên toàn quốc, ngân hàng, quản lý thông tin dân số cả nước,…

PYTHON

Python là một ngôn ngữ lập trình đa năng, được Guido van Rossum giới thiệu lần đầu tiên vào năm 1991 Python nổi bật với cú pháp đơn giản và dễ hiểu, khiến nó trở thành lựa chọn phổ biến cho cả người mới học lập trình và các nhà phát triển chuyên nghiệp Ngôn ngữ này được sử dụng rộng rãi trong nhiều lĩnh vực, từ phát triển web, khoa học dữ liệu, học máy, đến tự động hóa và lập trình hệ thống Ưu điểm:

－ Thư viện phong phú: Python có một hệ thống thư viện rộng lớn và mạnh mẽ như NumPy, Pandas, Matplotlib, và TensorFlow, hỗ trợ tốt cho các dự án từ nhỏ đến lớn

－ Đa năng: Python có thể được sử dụng trong nhiều lĩnh vực khác nhau như phát triển web (Django, Flask), khoa học dữ liệu (Pandas, NumPy), học máy (Scikit- learn, TensorFlow), và nhiều lĩnh vực khác

－ Cộng đồng lớn: Python có một cộng đồng lập trình viên toàn cầu đông đảo và tích cực, cung cấp nhiều tài liệu, hướng dẫn và hỗ trợ

－ Tốc độ chậm: Python là ngôn ngữ thông dịch nên thường chậm hơn so với các ngôn ngữ biên dịch như C++ hoặc Java, đặc biệt là trong các ứng dụng yêu cầu hiệu suất cao

－ Tiêu tốn tài nguyên: Do tính chất động của ngôn ngữ, Python có thể tiêu tốn nhiều bộ nhớ và tài nguyên hệ thống hơn so với một số ngôn ngữ khác

PHÂN TÍCH YÊU CẦU ỨNG DỤNG

YÊU CẦU CHỨC NĂNG NGHIỆP VỤ

TT Công Việc Loại Công Việc

Biểu Mẫu Liên Quan Ghi Chú

1 Tìm kiếm truyện Tra Cứu

Tìm kiếm theo tên Tìm kiếm theo thể loại, số chương, trạng thái

Xem thông tin truyện Tra Cứu

Tìm kiếm người dùng Tra cứu Tìm kiếm theo tên

Bảng 3-1 Yêu cầu chức năng nghiệp vụ khách

Biểu Mẫu Liên Quan Ghi Chú

1 Tìm kiếm truyện Tra Cứu

Tìm kiếm theo tên Tìm kiếm theo thể loại, số chương, trạng thái

2 Xem thông tin truyện Tra cứu

4 Tìm kiếm người dùng Tra cứu Tìm kiếm theo tên

5 Đánh giá truyện Lưu trữ Đánh giá từ 1 đến 5 sao kèm nhận xét

6 Bình luận chương truyện Lưu trữ

7 Đổi mật khẩu Lưu trữ

8 Quản lý thông tin cá nhân Lưu trữ

9 Báo cáo truyện Lưu trữ

Báo cáo truyện với những lý do có sẵn trong hệ thống

10 Báo cáo bình luận Lưu trữ

Báo cáo bình luận với những lí do có sẵn trong hệ thống

Quản lý truyện cá nhân (thêm sửa xóa)

Người dùng chọn 1 trong những gói Premium có sẵn trong hệ thống để nâng cấp tài khoản

13 Gợi ý truyện cá nhân Phân tích

14 Xem lịch sử đọc truyện Tra cứu

Thêm truyện vào mục ưa thích

16 Ủng hộ tác giả Lưu trữ, tính toán

Người dùng có thể chuyển tiền từ ví của mình tới tác giả kèm theo lời nhắn

17 Theo dõi người dùng Lưu trữ

Bảng 3-2 Yêu cầu chức năng nghiệp vụ người dùng

Tương tác với truyện Premium

Nâng cấp truyện của mình lên

Bảng 3-3 Yêu cầu chức năng nghiệp vụ người dùng Premium

Thêm thể loại truyện Lưu Trữ

Sửa thể loại truyện Lưu Trữ

Xóa thể loại truyện Lưu Trữ

Xóa truyện vi phạm Lưu Trữ

Xóa bình luận vi phạm Lưu Trữ

Thống kê doanh thu Kết xuất

Khóa, mở tài khoản Lưu trữ

Duyệt/xóa ảnh người dùng đăng lên

10 Điều chỉnh mức giá lượt đọc Lưu trữ Điều chỉnh giá lợi nhuận cho tác giả dựa trên lượt đọc

Bảng 3-4 Yêu cầu chức năng nghiệp vụ Admin

YÊU CẦU PHI CHỨC NĂNG

STT Nội dung Tiêu chuẩn Mô tả chi tiết

1 Tốc độ xử lý quá trình tương tác của người dùng Hiệu quả Một lần có thể cho trực tuyến nhiều người dùng

2 Tốc độ tìm kiếm nhanh và chính xác Hiệu quả Tối đa 3s phải có kết quả tìm kiếm

Tiết kiệm được thời gian, tối ưu được cơ sở dữ liệu, thu hẹp không gian lưu trữ, tránh thất lạc dữ liệu.

Tiết kiệm thời gian so với quản lý thủ công Dữ liệu được sao lưu trên máy, có thể dễ dàng phục hồi

4 Cho phép thay đổi quy định, công thức tính toán Tiến hóa Quản lý có thể thay đổi công thức tính tiền.

5 Hình thức tra cứu dễ dàng, tiện dụng Tiện dụng Lọc, sắp xếp theo tên, loại truyện.

6 Giao diện thân thiện, đơn giản, dễ thao tác Tiện dụng Khách hàng ở mọi lứa tuổi đều có thể dễ dàng sử dụng

7 Dễ thao tác Tiện dụng Các thao tác nhập xuất chỉnh sửa đơn giản, gần gũi với người dùng

Bảng 3-5 Yêu cầu phi chức năng

LƯỢC ĐỒ CHỨC NĂNG

Hình 3-1 Lược đồ Usecase tổng quát

ĐẶC TẢ CHỨC NĂNG

3.4.1 Đặc tả chức năng khách

Hình 3-2 Lược đồ Usecase đăng ký

Description Đăng ký tài khoản mới

Pre-condition Chưa đăng nhập vào hệ thống

Basic Flow 1 Khách nhấn nút “Đăng ký”

2 Hệ thống hiện ra trang điền thông tin gồm tên đăng nhập, email, tên người dùng, mật khẩu, nhập lại mật khẩu

3 Khách điền các thông tin tương ứng rồi nhấn “Tạo tài khoản”

4 Hệ thống gửi mã OTP (có hiệu lực trong 5 phút) về email được nhập, đồng thời chuyển đến trang nhập OTP

5 Người dùng nhập mã OTP nhận được rồi ấn xác nhận

6 Hệ thống thông báo tạo tài khoản thành công và chuyển về trang đăng nhập

Exception Flow 4a Hệ thống thông báo email này đã có tài khoản trong hệ thống và focus vào ô email 4b Hệ thống thông báo mật khẩu không khớp 4c Hệ thống thông báo tên đăng nhập đã tồn tại 6a Hệ thống thông báo nhập sai OTP và yêu cầu nhập lại

6b Hệ thống thông báo OTP đã hết hạn và trở về trang chủ Bussiness rule

Bảng 3-6 Đặc tả Usecase đăng ký

Hình 3-3 Lược đồ Usecase lấy lại mật khẩu

Name Lấy lại mật khẩu

Description Khách sử dụng chức năng này để lấy lại mật khẩu thông qua email Actor Người dung,Người dùng Premium

Pre-condition Người dùng đã có tài khoản trong hệ thống

Basic Flow 1 Tại trang Đăng nhập, người dùng ấn vào Quên mật khẩu

2 Hệ thống chuyển đến trang lấy lại mật khẩu

3 Người dùng nhập tên đăng nhập và email rồi ấn Xác nhận

4 Hệ thống gửi mã OTP về email và chuyến đến trang nhập OTP

5 Người dùng nhập OTP và ấn Xác nhận

6 Hệ thống chuyển đến trang tạo mật khẩu mới

7 Người dùng nhập mật khẩu mới và nhập lại mật khẩu rồi ấn xác nhận

8 Hệ thống thông báo cập nhật mật khẩu thành công và quay về trang đăng nhập

Exception Flow 4a Hệ thống thông báo tên đăng nhập và email không khớp

6a Hệ thống thông báo OTP không đúng và yêu cầu nhập lại 6b Hệ thống thông báo OTP đã hết hạn và trở về trang đăng nhập 8a Hệ thống thông báo mật khẩu không khớp và yêu cầu nhập lại

Bảng 3-7 Đặc tả Usecase lấy lại mật khẩu

Hình 3-4 Lược đồ Usecase đăng nhập

Description Đăng nhập để trở thành Người dùng hoặc Admin của hệ thống

Pre-condition Đã đăng ký tài khoản

Basic Flow 1 Actor nhấn vào nút “Đăng nhập” trên giao diện

2 Actor nhập các thông tin như tên đăng nhập và mật khẩu

3 Nhấn xác nhận đăng nhập

4 Hệ thống xác thực thông tin đăng nhập hợp lệ

5 Đăng nhập thành công vào chuyển về trang chủ sau khi đăng nhập, hiện thị tên tài khoản đang đăng nhập ở nút Đăng nhập ban đầu

Exception Flow 4a Hệ thống xác thực thông tin đăng nhập không hợp lệ

5a Thông báo đăng nhập thất bại, tài khoản không hợp lệ

Bảng 3-8 Đặc tả Usecase đăng nhập

Hình 3-5 Lược đồ Usecase tìm kiếm truyện

Description Khách hoặc người dùng có thể tìm kiếm truyện theo tên truyện và các lựa chọn nâng cao

Basic Flow 1 Nhập từ khóa để thực hiện tìm kiếm

2 Hệ thống hiện thị kết quả tìm kiếm

Alternative flow 1a Actor nhấn vào Tìm kiếm nâng cao trên giao diện (biểu tượng kính lúp)

2a Nhập các tiêu chí như thể loại, tình trạng, số chương sau đó ấn tìm kiếm

Bảng 3-9 Đặc tả Usecase tìm kiếm truyện

Hình 3-6 Lược đồ Usecase tìm kiếm người dùng

Name Tìm kiếm người dùng

Description Khách hoặc người dùng có thể tìm kiếm người dùng theo tên người dùng Actor Người dùng, Khách

Basic Flow 1 Nhập từ khóa để thực hiện tìm kiếm

Bảng 3-10 Đặc tả Usecase tìm kiếm người dùng

3.4.2 Đặc tả chức năng người dùng

Hình 3-7 Lược đồ Usecase đăng tải truyện

Description Người dùng tạo bộ truyện mới của mình trên trang

Actor Người dùng, người dùng premium

Pre-condition Đã đăng nhập vào hệ thống

Basic Flow 1 Người dùng ấn vào biểu tượng Account trên giao diện

2 Hệ thống chuyển đến trang thông tin tài khoản

3 Người dùng ấn vào Truyện của tôi

4 Người dùng ấn vào tạo bộ truyện mới

5 Hệ thống hiện ra form nhập thông tin truyện

6 Người dùng nhập đầy đủ các thông tin cần thiết và ấn Tạo

7 Hệ thông thông báo tạo bộ truyện mới thành công và đưa về trang truyện của tôi

Exception Flow 6a Người dùng ấn Hủy

7a Hệ thông thông báo tạo bộ truyện mới thất bại 7b Hệ thống thông báo ảnh đại diện là ảnh nhạy cảm, tạo truyện thất bại Bussiness rule Không có

Bảng 3-11 Đặc tả Usecase đăng tải truyện

3.4.2.2 Chỉnh sửa thông tin truyện

Hình 3-8 Lược đồ Usecase chỉnh sửa truyện

Name Chỉnh sửa thông tin truyện

Description Người dùng chỉnh sửa thông tin bộ truyện của mình trên trang

4 Người dùng ấn vào nút sửa tương ứng với truyện

5 Hệ thống hiện ra form nhập thông tin truyện

6 Người dùng chỉnh các thông tin cần thiết và ấn Cập nhật

7 Hệ thông thông báo cập nhật thành công và đưa về trang truyện của tôi

7a Hệ thông thông báo cập nhật thất bại 7b Hệ thống thông báo ảnh đại diện là ảnh nhạy cảm, tạo truyện thất bại Bussiness rule Không có

Bảng 3-12 Đặc tả Usecase chỉnh sửa thông tin truyện

Hình 3-9 Lược đồ usecase xóa truyện

Name Xóa truyện cá nhân

Description Người dùng xóa bộ truyện mới của mình trên trang

4 Người dùng ấn vào nút Xóa tương ứng với truyện

5 Hệ thống hiện ra yêu cầu xác nhận xóa

7 Hệ thống xóa bộ truyện và thông báo bộ truyện đã bị xóa Alternative flow

7a Hệ thông thông báo xóa truyện thất bại Bussiness rule Không có

Bảng 3-13 Đặc tả Usecase xóa truyện

Hình 3-10 Lược đồ Usecase thêm chương mới cho truyện

Name Thêm chương mới cho truyện

Description Người dùng thêm chương mới cho bộ truyện có sẵn

Pre-condition Đã đăng nhập vào hệ thống với role người dùng

4 Người dùng ấn vào Quản lý chương tương ứng với bộ truyện cần thêm chương

5 Hệ thống chuyển đến trang của bộ truyện

6 Người dùng ấn và nút Thêm chương mới

7 Hệ thống hiện ra trang nhập tên chương và tải ảnh lên

8 Người dùng nhập tên chương, tải ảnh lên từ hệ thống và sẵp xếp thứ tự cho ảnh, sau đó ấn Xác nhận

9 Hệ thống tiến hành kiểm duyệt ảnh

10 Hệ thống xác nhận tạo chương thành công Alternative flow

10a Hệ thống thông báo có ảnh không hợp lệ 11a Người dùng chọn Yêu cầu duyệt lại 12a Admin chấp thuận yêu cầu duyệt, tạo chương thành công Exception Flow 7b Người dùng ấn Hủy

8b Hệ thống thông báo Thêm chương không thành công 10c Hệ thống thông báo có ảnh không hợp lệ

11c Người dùng chọn Hủy 10d Hệ thống thông báo có ảnh không hợp lệ 11d Người dùng chọn Yêu cầu duyệt lại 12d Admin không chấp thuận yêu cầu duyệt Bussiness rule Không có

Bảng 3-14 Đặc tả Usecase thêm chương mới cho truyện

Hình 3-11 Lược đồ Usecase đánh giá truyện

Name Tương tác với bộ truyện

Description Actor có thể đánh giá bộ truyện

Basic Flow 1 Actor ấn chọn bộ truyện muốn tương tác

2 Hệ thống chuyển đến trang của bộ truyện tương ứng

3 Actor chọn số sao và nhập ý kiến đánh giá và ấn Xác nhận

4 Hệ thống hiện thị thông báo thành công và hiển thị đánh giá của người dùng

Exception Flow 3a Người dùng không chọn số sao hoặc nhập ý kiến

4a.Hệ thống yêu cầu chọn số sao hoặc hoặc nhập ý kiến Bussiness rule Không có

Bảng 3-15 Đặc tả Usecase đánh giá truyện

3.4.2.6 Chỉnh sửa hoặc xóa chương truyện

Name Quản lý chương truyện

Description Người dùng chỉnh sửa hoặc xóa chương có sẵn của bộ truyện

4 Người dùng ấn vào bộ truyện cần thao tác

5 Hệ thống chuyển đến trang của bộ truyện Lưa chọn giữa chỉnh sửa và xóa

6a1 Người dùng ấn vào nút sửa ở chương cần sửa 6a2 Hệ thống hiện ra trang thông tin chương (tên chương và ảnh) 6a3 Người dùng chỉnh sửa thông tin cần thiết, sau đó ấn Xác nhận 6a4 Hệ thống thông báo Cập nhật thành công

6b1 Người dùng ấn vào nút xóa ở chương cần xóa 6b2 Hệ thống hiện ra yêu cầu xác nhận xóa chương 6b3 Người dùng chọn Đồng ý

6b4 Hệ thống thông báo Xóa thành công

6a4.1 Hệ thống thông báo có ảnh không được duyệt 6a4.1.1 Người dùng chọn Yêu cầu duyệt lại

6a4.1.2 Admin chấp thuận yêu cầu duyệt, tạo chương thành công Exception Flow 6a3.1 Người dùng ấn Hủy

6a3.1.1 Hệ thống thông báo Cập nhật không thành công 6a4.2 Hệ thống thông báo có ảnh không được duyệt 6a4.2.1 Người dùng chọn Hủy

6a4.3 Hệ thống thông báo có ảnh không được duyệt 6a4.3.1 Hệ thống thông báo Cập nhật không thành công 6a4.3.2 Người dùng chọn Yêu cầu duyệt lại

6a4.3.3 Admin không chấp thuận yêu cầu duyệt 6b3.1 Người dùng ấn Hủy

6b3.1.1 Hệ thống thông báo xóa thất bại Bussiness rule Không có

Bảng 3-16 Đặc tả Usecase chỉnh sửa hoặc xóa chương truyện

Hình 3-12 Lược đồ Usecase bình luận chương truyện

Name Bình luận chương truyện

Description Actor có thể bình luận về chương truyện

Basic Flow 1 Actor ấn chọn bộ truyện muốn tương tác

3 Chọn chương truyện muốn bình luận

4 Hệ thống chuyển tới trang chương truyện tương ứng

5 Actor nhập nội dung bình luận và xác nhận

6 Hệ thống hiện thị bình luận của người dùng

Exception Flow 5a Người dùng không nhập nội dung mà ấn xác nhận

6a Hệ thống yêu cầu nhập nội dung để bình luận Bussiness rule Không có

Bảng 3-17 Đặc tả Usecase bình luận chương truyện

Hình 3-13 Lược đồ Usecase đăng ký ví

Description Người dùng có thể mở ví để sử dụng các dịch vụ trên hệ thống Actor Người dùng, người dùng premium

Pre-condition Đăng nhập bằng tài khoản người dùng, người dùng premium và người dùng chưa đăng ký ví Trigger Không có

Basic Flow 1 Ấn vào biểu tượng Account trên giao diện

3 Actor ấn chọn Ví của tôi

4 Actor ấn chọn Mở ví ngay

5 Hệ thống hiển thị yêu cầu xác nhận

6 Người dùng ấn xác nhận

7 Hệ thống thông báo đăng ký ví thành công và chuyển về trang Ví của tôi

Exception Flow 6a Người dùng ấn Hủy, use case kết thúc

Bảng 3-18 Đặc tả Usecase đăng ký ví

Hình 3-14 Lược đồ Usecase nạp tiền vào ví

Name Nạp tiền vào ví

Description Người dùng nạp thêm tiền vào ví

Basic Flow 1 Actor ấn vào biểu tượng Account trên giao diện

3 Người dùng ấn chọn ví của tôi

4 Người dùng ấn chọn nạp tiền vào ví

5 Hệ thống chuyển đến trang nạp tiền

6 Người dùng chọn phương thức thanh toán và mệnh giá nạp và ấn tiếp tục

7 Người dùng hoàn tất các bước nạp theo phương thức tương ứng

8 Hệ thống thông báo giao dịch thành công và cộng thêm tiền vào tài khoản người dùng

Exception Flow 5a Người dùng ấn Hủy và hệ thống đưa về trang thông tin tài khoản

7a Hệ thống thông báo giao dịch thất bại Bussiness rule Không có

Bảng 3-19 Đặc tả Usecase nạp tiền vào ví

Hình 3-15 Lược đồ Usecase ủng hộ tác giả

Name Ủng hộ tác giả

Description Người dùng có thể ủng hộ tiền cho tác giả mình muốn

Pre-condition Người dùng đã đăng nhập vào hệ thống

Basic Flow 1 Ấn chọn vào tác giả muốn ủng hộ

2 Hệ thống chuyển đến trang thông tin của tác giả

3 Người dùng ấn chọn Ủng hộ

4 Hệ thống hiện ra hộp thoại để nhập số tiền và lời nhắn

5 Người dùng nhập các thông tin tương ứng và ấn xác nhận

6 Hệ thống yêu cầu nhập mật khẩu tài khoản

7 Người dùng nhập mật khẩu của tài khoản và ấn xác nhận

8 Hệ thống thông báo Donate thành công, trừ tiền trong tài khoản Actor và cộng tiền cho tài khoản của tác giả

7a Người dùng ấn Hủy 7b Hệ thống thông báo nhập sai mật khẩu 8a Hệ thông thông báo Donate thất bại do không có đủ số tiền trong tài khoản

8b Hệ thống thông báo Donate thất bại do lỗi không xác định

Bảng 3-20 Đặc tả Usecase ủng hộ tác giả

Hình 3-16 Lược đồ Usecase nâng cấp tài khoản

Name Nâng cấp tài khoản

Description Người dùng chưa đăng ký premium có thể đăng ký để trở thành người dùng premium

Pre-condition Đã đăng nhập vào hệ thống và tài khoản hiện chưa đăng ký premium Trigger Không có

3 Người dùng ấn chọn nâng cấp thành premium

4 Hệ thống đưa ra các gói premium

5 Người dùng ấn chọn nút đăng ký tại gói mong muốn

6 Hệ thống yêu cầu nhập mật khẩu

7 Người dùng nhập mật khẩu và ấn xác nhận

8 Hệ thống trừ tiền trong ví, thông báo đăng ký thành công Alternative flow Không có

7a Người dùng ấn Hủy 8a Hệ thống thông báo nhập sai mât khẩu và yêu cầu nhập lại 8b Hệ thống thông báo đăng ký thất bại do ví không đủ tiền Bussiness rule Không có

Bảng 3-21 Đặc tả Usecase nâng cấp tài khoản

3.4.2.12 Tương tác với bộ truyện premium

Hình 3-17 Lược đồ Usecase tương tác với truyện Premium

Name Tương tác với bộ truyện premium

Description Người dùng premium có thể bình luận về chương truyện hoặc đánh giá bộ truyện được giới hạn dành cho tài khoản premium Actor Người dùng premium

Basic Flow 1 Actor ấn chọn bộ truyện Premium muốn tương tác

3 Actor đọc truyện và tương tác với truyện Premium như bình luận, đánh giá

Bussiness rule Chỉ người dùng Premium mới có thể tương tác với truyện Premium

Bảng 3-22 Đặc tả Usecase tương tác với truyện Premium

Hình 3-18 Lược đồ Usecase báo cáo truyện

Description Người dùng có thể báo cáo các bộ truyện vi phạm quy định của web Actor Người dùng, người dùng premium

Pre-condition Đăng nhập bằng tài khoản người dùng, người dùng premium

Basic Flow 1 Actor ấn chọn bộ truyện muốn báo cáo

2 Hệt thống chuyển đến trang của bộ truyện đó

3 Actor ấn vào nút Báo cáo

4 Hệ thống hiển thị dialog để chọn mục vi phạm

5 Người dùng chọn các mục vi phạm tương ứng và ấn Xác nhận

6 Hệ thống thông báo Báo cáo thành công Alternative flow

Bảng 3-23 Đặc tả Usecase báo cáo truyện

Hình 3-19 Lược đồ Usecase báo cáo bình luận

Name Báo cáo bình luận

Description Người dùng có thể báo cáo các bình luận vi phạm quy định của web Actor Người dùng, người dùng premium

Basic Flow 1 Tại bình luận muốn báo cáo, Actor ấn vào nút ba chấm dọc và chọn báo cáo

2 Hệ thống hiển thị dialog để chọn mục vi phạm

3 Actor chọn các mục vi phạm tương ứng và ấn Xác nhận

4 Hệ thống thông báo Báo cáo thành công Alternative flow

Bảng 3-24 Đặc tả Usecase báo cáo bình luận

Hình 3-20 Lược đồ Usecase theo dõi người dùng

Name Theo dõi/ bỏ theo dõi người dùng

Description Người dùng có thể theo dõi hoặc bỏ theo dõi người dùng khác để nhận hoặc ngưng nhận thông báo về người dùng đó Actor Người dùng, người dùng premium

Basic Flow 1 Actor ấn chọn vào biểu tượng người dùng muốn theo dõi/ bỏ theo dõi

2 Hệ thống chuyển đến trang profile của người dùng đó

3 Actor ấn vào nút Theo dõi/Đang theo dõi

4 Hệ thống cập nhật trạng thái mới Alternative flow

Bảng 3-25 Đặc tả Usecase theo dõi người dùng

3.4.2.16 Xem thống kê dữ liệu cá nhân

Hình 3-21 Lược đồ Usecase xem thống kê dữ liệu cá nhân

Name Xem thống kê dữ liệu cá nhân

Description Người dùng có thể xem thống kê dữ liệu cá nhân như số lượt xem theo truyện, thu nhập trong tuần, số lượt đăng ký mới

Basic Flow 1 Ấn vào biểu tượng Account trên giao diện

2 Hệ thống chuyển đến trang thông tin người dùng

3 Actor ấn vào xem thống kê

4 Hệ thống hiển thị thống kê của người dùng Alternative flow

Bảng 3-26 Đặc tả Usecase xem thống kê dữ liệu cá nhân

Hình 3-22 Lược đồ Usecase rút tiền khỏi ví

Name Rút tiền khỏi ví

Description Người dùng có thể rút tiền trong tài khoản trên web về tài khoản ngân hàng Actor Người dùng, người dùng premium

Pre-condition Đã đăng nhập vào hệ thống, đã đăng kí ví

Basic Flow 1 Ấn chọn biểu tượng Account trên giao diện

2 Hệ thống chuyển đến trang thông tin người dùng

3 Actor ấn chọn Ví của tôi

4 Actor ấn chọn rút tiền khỏi tài khoản

5 Hệ thống chuyển đến trang rút tiền

6 Người dùng nhập số tiền muốn rút

7 Hệ thống hiển thị giá trị thực khi rút và yêu cầu xác nhận

8 Người dùng Ấn xác nhận

9 Hệ thống trừ tiền của người dùng, đồng thời chuyển tiền từ tài khoản ngân hàng của hệ thống sang cho tài khoản ngân hàng của người dùng

8a Người dùng ấn Hủy, use case kết thúc 9a Hệ thống thông báo có sự cố xảy ra, use case kết thúc Bussiness rule Không có

Bảng 3-27 Đặc tả Usecase rút tiền khỏi ví

3.4.2.18 Xem và chỉnh sửa thông tin tài khoản cá nhân

Hình 3-23 Lược đồ Usecase xem và chỉnh sửa thông tin cá nhân

Xem thông tin tài khoản cá nhân

Name Xem thông tin tài khoản cá nhân

Description Người dùng hay admin có thể xem thông tin tài khoản của mình

Basic Flow 1 Actor nhấn vào biểu tượng Account trên giao diện

2 Actor xem các thông tin tài khoản cá nhân của mình như tên, số điện thoại, email, v.v

Bảng 3-28 Đặc tả Usecase xem thông tin cá nhân

Chỉnh sửa thông tin tài khoản cá nhân

Name Chỉnh sửa thông tin tài khoản cá nhân

Description Người dùng hay admin có thể chỉnh sửa thông tin tài khoản của mình Actor Người dùng, Admin

Basic Flow 1 Actor ấn Button cập nhật trên giao diện

2 Actor sửa đổi các thông tin cá nhân được hiển thị là ấn Lưu để lưu thay đổi

3 Hệ thống yêu cầu xác thực hành động

4 Người dùng ấn xác nhận hành động

5 Thông báo cập nhật thông tin thành công và tải lại trang hiện thị thông tin mới được cập nhật

Exception Flow 2a Actor nhấn nút Quay lại, Usecase kết thúc

4a Người dùng xác nhận hủy hành động,quay lại bước 2

Bảng 3-29 Đặc tả Usecase chỉnh sửa thông tin cá nhân

Hình 3-24 Lược đồ Usecase chức năng nhắn tin

Description Người dùng có thể nhắn tin cho người dùng khác

Basic Flow 1 Actor ấn vào profile của người dùng muốn nhắn tin

2 Hệ thống chuyển đến trang profile của người dùng

3 Actor ấn vào biểu tượng tin nhắn

4 Hệ thống hiển thị khung thoại nhắn tin

5 Actor nhập tin nhắn vào ô chat và ấn gửi

6 Hệ thống gửi nội dung tin nhắn đến người nhận Alternative flow 1a Actor nhấn vào biểu tượng tin nhắn trên header

1a.1 Hệ thống hiển thị các đoạn chat 1a.2 Người dùng chọn đoạn chat muốn tiếp tục 1a.3 Quay lại bước 4

Bảng 3-30 Đặc tả Usecase nhắn tin

3.4.3 Đặc tả chức năng Admin

3.4.3.1 Quản lý tài khoản hệ thống

Hình 3-25 Lược đồ Usecase quản lý tài khoản hệ thống

Name Tìm kiếm tài khoản trong hệ thống

Description Admin có thể tìm kiếm tài khoản đang có trong hệ thống

Pre-condition Đã đăng nhập hệ thống với tài khoản admin

Basic Flow 1 Actor nhấn vào “Quản lý người dùng trong giao diện Admin”

2 Hệ thống hiện thị danh sách tất cả người dùng đang có trong hệ thống

3 Actor nhập thông tin tìm kiếm

Bảng 3-31 Đặc tả Usecase tìm kiếm tài khoản Admin

Khóa và mở khóa tài khoản

Name Khóa và mở khóa tài khoản

Description Admin có thể khóa tài khoản và mở khóa tài khoản khi phát hiện vi phạm

Pre-condition Đăng nhập tài khoản

Basic Flow 1 Actor nhấn vào “Quản lý người dùng” trong giao diện Admin

2 Actor nhấn vào Người dùng muốn khóa (hoặc mở khóa)

3 Actor thực hiện khóa (mở khóa) người dùng đó

4 Hệ thống yêu cầu xác nhận hành động

5 Actor xác nhận và hệ thống cập nhật kết quả

Alternative flow 1a Actor thực hiện tìm kiếm người dùng

2a Hệ thống hiện thị danh sách kết quả tìm kiếm Tiếp tục bước 2

Exception Flow 5a Actor hủy thao tác, usecase kết thúc

Bussiness rule Admin khóa tài khoản khi tài khoản đó bị báo cáo vì vi phạm chính sách hệ thống

Bảng 3-32 Đặc tả Usecase khóa, mở tài khoản

Hình 3-26 Lược đồ Usecase xóa truyện vi phạm

Name Xóa truyện vi phạm

Description Admin có thể xóa truyện được đăng tải trong hệ thống khi phát hiện truyện vi phạm chính sách

Pre-condition Đăng nhập bằng tài khoản Admin

Basic Flow 1 Admin nhấn vào “Truyện bị báo cáo”

2 Hệ thống hiện thị danh sách truyện đang bị báo cáo

3 Admin chọn truyện bị báo cáo mà có phát hiện vi phạm

4 Admin thực hiện thao tác xóa truyện

5 Hệ thống yêu cầu xác nhận thao tác

6 Admin xác nhận và hệ thống thực hiện xóa truyện và thông báo lý do cho người đăng truyện bị xóa

Exception Flow 6a Admin hủy thao tác, usecase kết thúc

Bảng 3-33 Đặc tả Usecase xóa truyện vi phạm

Hình 3-27 Lược đồ Usecase quản lý thể loại

Name Thêm thể loại truyện

Description Admin có thể thêm thể loại truyện vào hệ thống

Basic Flow 1.Ở trang quản lý thể loại truyện, Actor chọn thao tác thêm

2 Hệ thống hiện thị dialog để actor nhập thông tin

3 Actor nhấn nút xác nhận thêm

4 Thông báo thêm thành công và tải lại dữ liệu mới

Bảng 3-34 Đặc tả Usecase thêm thể loại truyện

Name Thêm thể loại truyện

Description Admin có thể sửa thể loại truyện trong hệ thống

Basic Flow 1 Ở trang quản lý thể loại truyện, Actor chọn thao tác sửa tương ứng với thể loại muốn sửa

2 Hệ thống hiện thị dialog để actor chỉnh sửa thông tin

3 Actor nhấn nút xác nhận

4 Thông báo sửa thành công và tải lại dữ liệu mới

Bảng 3-35 Đặc tả Usecase sửa thể loại truyện

Name Xóa thể loại truyện

Description Admin có thể xóa thể loại truyện trong hệ thống

Basic Flow 1 Ở trang quản lý thể loại truyện, Actor chọn thao tác xóa tương ứng với thể loại muôn xóa

2 Hệ thống yêu cầu xác nhận hành động

4 Thông báo xóa thành công và tải lại dữ liệu mới

Bảng 3-36 Đặc tả Usecase xóa thể loại truyện

Hình 3-28 Lược đồ Usecase xem thống kê dữ liệu Web

Name Xem thống kê dữ liệu web

Description Admin có thể xem thống kê dữ liệu chung của web như số người dùng, số người đăng ký premium, doanh thu

Basic Flow 1 Ở giao diện Admin sau khi đăng nhập, hệ thống hiển thị thống kê các nội dung web tại trang mặc định Alternative flow Không có

Bảng 3-37 Đặc tả Usecase xem thống kê dữ liệu Web

Hình 3-29 Lược đồ Usecase điều chỉnh giá trên hệ thống

Name Điều chỉnh gói premium

Description Admin có thể điều chỉnh giá trong hệ thống

Basic Flow 1 Ở giao diện Admin sau khi đăng nhập, Admin nhấn “ Gói premium”

2 Hệ thống hiện thị trang thông tin các gói premium

3 Admin nhấn nút Chỉnh sửa tương ứng với gói muốn điều chỉnh

4 Hệ thống hiện thị dialog để Admin có thể chỉnh sửa

5 Admin chỉnh sửa và xác nhận hành động

6 Hệ thống thông báo điều chỉnh thành công và tải lại dữ liệu mới Alternative flow Không có

Exception Flow 5a Admin hủy thao tác, Usecase kết thúc

Bảng 3-38.Đặc tả Usecase điều chỉnh giá hệ thống

3.4.3.6 Điều chỉnh giá tiền cho lượt xem

Hình 3-30 Lược đồ Usecase điều chỉnh giá tiền cho lượt xem

Name Điều chỉnh gía tiền cho lượt xem

Description Admin có thể điều chỉnh giá trong hệ thống

Basic Flow 1 Ở giao diện Admin sau khi đăng nhập, Admin nhấn “ Giá”

2 Hệ thống hiện thị trang thông tin giá trị lượt view

3 Admin nhấn nút Chỉnh sửa tương ứng với mục muốn điều chỉnh

4 Hệ thống hiện thị dialog để Admin có thể chỉnh sửa

5 Admin chỉnh sửa và xác nhận hành động

6 Hệ thống thông báo điều chỉnh thành công và tải lại dữ liệu mới Alternative flow

Bảng 3-39 Đặc tả Usecase điều chỉnh giá tiền lợi nhuận cho lượt xem

3.4.3.7 Duyệt ảnh của chương truyện do người dùng đăng lên

Hình 3-31 Lược đồ Usecase duyệt ảnh của chương truyện do người dùng đăng lên

Name Duyệt ảnh của chương truyện do người dùng đăng lên

Description Admin có thể duyệt ảnh của chương truyện do người dùng đăng lên mà hệ thống nhận diện có ảnh nhạy cảm

Basic Flow 1 Ở giao diện Dashboard, admin kéo xuống mục Yêu cầu duyệt chương

2 Hệ thống hiện thị danh sách các chương chờ duyệt

3 Admin nhấn chọn chương đang chờ duyệt

4 Hệ thống hiện thị các hình ảnh được xác định là vi phạm

5 Admin đóng ảnh, sau đó chọn duyệt hoặc từ chối

6 Hệ thống thông báo tác vụ thành công

Bảng 3-40 Đặc tả Usecase duyệt ảnh của chương truyện do người dùng đăng lên

3.4.4 Đặc tả chức năng chung

Hình 3-32 Lược đồ Usecase đăng xuất

Description Người dùng hay admin đăng xuất khỏi hệ thống

Pre-condition Đã đăng nhập thành công

Basic Flow 1 Actor nhấn vào nút “Đăng xuất” trên giao diện

2 Hệ thống thoát tài khoản, tải lại trang và trở lại về trang chủ ban đầu Alternative flow Không có

Bảng 3-41 Đặc tả Usecase đăng xuất

PHÂN TÍCH, THIẾT KẾ HỆ THỐNG

THIẾT KẾ CLASS DIAGRAM

THIẾT KẾ CƠ SỞ DỮ LIỆU

4.2.1 Lược đồ cơ sở dữ liệu

Hình 4-2 Lược đồ cơ sở dữ liệu

4.2.2 Mô tả cơ sở dữ liệu

STT Tên cột Kiểu dữ liệu Mô tả

1 Id Varchar(20) Id của truyện

3 isPremium Tinyint(1) Truyện chỉ dành cho người dùng Premium?

4 Actor Id Varchar(20) Id tác giả

5 Image Text Ảnh bìa của truyện

6 View int Số lượt đọc

7 Rate Decimal(2,1) Điểm đánh giá của truyện (thang điểm 5)

8 Publish Date Date Ngày phát hành truyện

9 Update Date Date Ngày cập nhật truyện

10 Status int Trạng thái truyện (đang tiến hành, tạm ngưng, đã hoàn thành)

Bảng 4-1 Mô tả dữ liệu bảng ComicBooks

1 Id Varchar(20) Id của thể loại

2 Name Nvarchar(128) Tên thể loại

Bảng 4-2 Mô tả dữ liệu bảng Genres

1 Comic ID Varchar(20) Id của truyện

2 Genre ID Varchar(20) Id thể loại

Bảng 4-3 Mô tả dữ liệu bảng ComicBooks_Genres

1 Id Varchar(20) Id của người dùng

2 Name Nvarchar(128) Tên người dùng

3 Avatar Varchar(200) Ảnh đại diện

4 Email Varchar(128) Email người dùng

5 Phone Number Varchar(20) Số điện thoại người dùng

6 User Name Varchar(128) Tên đăng nhập người dùng

7 Password Varchar(20) Mật khẩu người dùng

8 isLocked Tinyint(1) Tài khoản có bị khóa hay không?

10 Intro Text Tiểu sử, lời giới thiệu bản thân

11 lastActiveTime Timestamp(6) Thời gian lần hoạt động gần nhất

12 createdAt Date Ngày đăng ký tài khoản

Bảng 4-4 Mô tả dữ liệu bảng Users

1 Id int Id của Admin

Varchar(20) Số điện thoại Admin

5 User Name Varchar(128) Tên đăng nhập người dùng

6 Password Varchar(20) Mật khẩu người dùng

Bảng 4-5 Mô tả dữ liệu bảng Admin

1 Id int Id của chương truyện

4 Publish Date Date Ngày đăng tải chương truyện

Number int Thứ tự của chương trong bộ truyện

6 isPublic Tinyint(1) Chương truyện có được tác giả public hay không

7 IsAccepted Tinyint(1) Chương truyện liệu không chứa hình nhạy cảm hoặc đã được admin duyệt (true), chứa hình nhạy cảm và chưa được duyệt(false)

Bảng 4-6 Mô tả dữ liệu bảng Chapters

1 Id int Id của ảnh

2 Chapter ID Varchar(20) Id chương truyện

3 Link Varchar(200) Đường dẫn hình ảnh

Number int Thứ tự của ảnh trong chương truyện

Bảng 4-7 Mô tả dữ liệu bảng ChapterImages

1 Id int Id của ảnh

2 User ID Varchar(20) Id người dùng

4 Created At Timestamp(6) Thời gian bình luận

5 Content Text Nội dung bình luận

Bảng 4-8 Mô tả dũ liệu bảng Comments

2 Comic ID Varchar(20) Id truyện

3 Score Int Số điểm đánh giá (thang 5)

5 Content Text Nội dung đánh giá

Bảng 4-9 Mô tả dữ liệu bảng Ratings

1 Id Int Id lí do báo cáo

2 Reason Varchar(100) Lí do báo cáo

3 Type int Loại báo cáo (báo cáo truyện hay báo cáo bình luận)

Bảng 4-10 Mô tả dữ liệu bảng ReportReason

1 Id Int Id báo cáo

3 Report Date Date Ngày báo cáo

4 Status Int Trạng thái báo cáo

Bảng 4-11 Mô tả dữ liệu bảng ComicReport

1 Id Int Id báo cáo

2 Comment ID Int Id bình luận

3 Report Date Date Ngày báo cáo

4 Status Int Trạng thái báo cáo

Bảng 4-12 Mô tả dữ liệu bảng CommentReport

1 Report ID Int Id báo cáo

2 Reason ID Int Id lí do báo cáo

Bảng 4-13 Mô tả dữ liệu bảng ComicReportReasons

1 Report ID Int Id báo cáo

2 Reason ID Int Id lí do báo cáo

Bảng 4-14 Mô tả dữ liệu bảng CommentReportReasons

Bảng 4-15 Mô tả dữ liệu bảng FavoritrComic

3 Reading Time Timestamp(6) Thời gian đọc

Bảng 4-16 Mô tả dữ liệu bảng HistoryReading

Balance Int Số dư trong ví

Varchar(20) Tài khoản ngân hàng liên kết

4 Bank Name NvarChar(20) Tên ngân hàng

5 Created At Timestamp(6) Thời điểm đăng ký ví

Bảng 4-17 Mô tả dữ liệu bảng Wallets

1 Id Int Id giao dịch

2 Wallet ID Int Id ví

3 Type Int Loại giao dịch

4 Title Text Tiêu đề giao dịch

5 Amount Int Số tiền giao dịch

6 Created At Timestamp(6) Thời điểm giao dịch

7 Balance Int Số dư ngay sau giao dịch

Bảng 4-18 Mô tả dữ liệu bảng Transactions

1 Id Int Id gói Premium

2 Cost Int Giá của gói Premium

3 Duration Int Số ngày hiệu lực Premium

Bảng 4-19 Mô tả dữ liệu bảng PackagePremium

1 User Id Varchar(20) Id người dùng

2 Package Id Int Id của gói Premium

3 Start Date Date Ngày bắt đầu đăng ký gói Premium

Bảng 4-20 Mô tả dữ liệu bảng UserPremium

1 Id Int Id thông báo

2 Receiver_id Varchar(20) Id người nhận

3 Content Text Nội dung thông báo

4 Create at Date Thời gian thông báo

5 Type Varchar(15) Loại thông báo

6 isRead TinyInt(1) Trạng thái đã đọc hoặc chưa

7 Link to Varchar(40) Đường dẫn đến nội dung được thông báo

Bảng 4-21.Mô tả dữ liệu bảng annouce

1 Id Int Id thông báo

2 User Varchar(20) Id người đọc

3 Chapter Varchar(20) Id chương truyện

4 Current page Int Trang hiện tại đang đọc

Bảng 4-22 Mô tả dữ liệu bảng Bookmark

1 Follower_id Varchar(20) Id người theo dõi

4 User_id Varchar(20) Id người được theo dõi

Bảng 4-23 Bảng mô tả dữ liệu bảng Follow

2 Donater_id Varchar(20) Id người gửi

4 Title Text Nội dung giao dịch

5 Message Text Nội dung tin nhắn

6 Amount Int Số tiền ủng hộ

Bảng 4-24 Mô tả dữ liệu bảng Donate

1 Id Int Id lịch sử

2 Comic_id Varchar(20) Id truyện

3 Date increase Date Ngày cập nhật

Bảng 4-25 Mô tả dữ liệu bảng HistoryIncreaseView

1 Id Varchar(40) Token Id của những Access token người dùng thực hiện đăng xuất

2 Expire time Date Thời gian hết hạn của token

Bảng 4-26 Mô tả dữ liệu bảng InvalidToken

1 Id Int Id tin nhắn

2 Sender Varchar(20) Id người gửi

3 Receiver Varchar(20) Id người nhận

4 Content Text Nội dung tin nhắn

5 Time Timestamp(6) Thời gian gửi

6 isRead Tinyint(1) Trạng thái đã đọc hay chưa

Bảng 4-27 Mô tả dữ liệu bảng message

2 View Int Số lượt xem tăng để nhận được số tiền (cost)

3 Cost Int Số tiền nhận được khi đạt mốc lượt xem

4 Type Boolean Loại truyện được áp dụng (bình thường hoặc premium)

Bảng 4-28 Mô tả dữ liệu bảng Price

THIẾT KẾ SEQUENCE DIAGRAM

Hình 4-3 Lược đồ Sequence đăng nhập

Hình 4-4 Lược đồ Sequence đăng ký

Hình 4-5 Lược đồ Sequence lấy lại mật khẩu

Hình 4-6 Lược đồ Sequence tìm kiếm

Hình 4-7 Lược đồ Sequence tìm kiếm nâng cao

Hình 4-8 Lược đồ Sequence đổi mật khẩu

4.3.2.2 Quản lý truyện cá nhân

Hình 4-9 Lược đồ Sequece quản lý truyện cá nhân

Hình 4-10 Lược đồ Sequence quản lý chương truyện

Hình 4-11 Lược đồ Sequence bình luận chương truyện

Hình 4-12 Lược đồ Sequence đánh giá truyện

Hình 4-13 Lược đồ Sequence đăng ký ví

Hình 4-14 Lược đồ Sequence nạp tiền vào ví

Hình 4-15 Lược đồ Sequence nâng cấp tài khoản

Hình 4-16 Lược đồ Sequence báo cáo bình luận

Hình 4-17 Lược đồ Sequence báo cáo truyện

Hình 4-18 Lược đồ Sequence theo dõi người dùng

4.3.2.12 Cập nhật thông tin tài khoản

Hình 4-19 Lược đồ Sequence cập nhật thông tin tài khoản

Hình 4-20 Lược đồ Sequence nhắn tin

Hình 4-21 Lược đồ Sequence khóa, mở tài khoản

Hình 4-22 Lược đồ Sequence quản lý thể loại

Hình 4-23 Lược đồ Sequence xứ lý báo cáo truyện

Hình 4-24 Lược đồ Sequence xứ lý báo cáo bình luận

4.3.3.4 Duyệt chương truyện của người dùng

Hình 4-25 Lược đồ Sequence duyệt chương truyện của người dùng đăng tải chứa ảnh nhạy cảm

Hình 4-26 Lược đồ Sequence quản lý các gói Premium

4.3.3.6 Quản lý giá lượt theo lượt view

Hình 4-27 Lược đồ Sequence quản lý giá lợi nhuận theo lượt view

KIỂM THỬ ỨNG DỤNG

DANH SÁCH TEST CASE

Xem chi tiết file TLCN_Testcase.xlsx

DANH SÁCH LỖI

5.2.1 DANH SÁCH LỖI ĐÃ XỬ LÝ

5.2.1.1 Không có giới hạn ký tự cho tên truyện

Kiểm tra thêm một truyện mới vào truyện của tôi với nhập tên truyện trên 1000 ký tự

Khi nhập tên truyện với độ dài hơn 1000 ký tự không xuất hiện thông báo giới hạn số ký tự cho phép được nhập

URL http://localhost:3000/comic-manage

Bảng 5-1 Bug Report lỗi không giới hạn kí tự cho tên truyện

5.2.1.2 Thanh tìm kiếm trong Truyện của tôi không hoạt động

Name Kiểm tra chức năng của thanh tìm kiếm trong trang truyện của tôi

Nhập nội dung vào thanh tìm kiếm là “Chàng rể mạnh nhất” và nhấn tìm kiếm nhưng không có gì xảy ra

Bảng 5-2 Bug Report thanh tìm kiếm trong truyện của tôi không hoạt động

5.2.1.3 Không cập nhật được thông tin truyện khi sửa truyện

Name Kiểm tra chức năng sửa truyện trong truyện của tôi

Vào sửa truyện cập nhật lại tên truyện , mô tả , ảnh đại diện , thể loại , trạng thái Sau khi nhấn sửa các trường trên không được cập nhật URL http://localhost:3000/comic-manage

Bảng 5-3 Bug Report không cập nhật được thông tin truyện

5.2.1.4 Thông báo thất bại khi xóa truyện thành công

Name Kiểm tra xóa một truyện trong truyện của tôi

Vào truyện của tôi và chọn xóa một truyện , xóa thành công nhưng thông báo lại là thất bại

Bảng 5-4 Bug Report thông báo thất bại khi xóa truyện thành công

5.2.1.5 Số chương cho phép nhập ký tự “e”

Kiểm tra chức năng sửa một chương truyện với nhập số chương bằng chữ

Chức năng sửa một chương truyện khi nhập số chương là chữ “e” thì vẫn được , còn nhập những ký tự chữ khác không được phép nhập URL http://localhost:3000/chapter-manage/54dad7ca-2e2f-4

Bảng 5-5 Bug report số chương cho phép nhập ký tự "e"

5.2.1.6 Khi xóa thể loại truyện không hiện hộp thoại để xác thực hành động

Name Khi xóa thể loại truyện không hiện hộp thoại để xác thực hành động

Khi xóa thể loại truyện không hiện thị hộp thoại để Admin xác thực hành động xóa, thay vào đó xóa trực tiếp và tải lại dữ liệu mới

Bảng 5-6 Bug Report khi xóa thể loại không hiện hộp thoại để xác thực hành động

5.2.1.7 Đăng ký tài khoản với username có khoảng trắng được cho phép

Name Đăng ký tài khoản với username có khoảng trắng được cho phép

Khi đăng ký tài khoản mới với tên người dùng có khoảng trắng, hệ thống vẫn chấp nhận cho đăng ký

Bảng 5-7 Bug Report đăng ký tài khoản với username chứa khoảng trắng

5.2.1.8 Không hiển thị thông báo khi cập nhật ảnh đại diện profile thành công

Không hiển thị thông báo khi cập nhật ảnh đại diện profile thành công

Khi cập nhật hình ảnh đại diện thành công, trang profile hiển thị ảnh mới mà không có thông báo thành công

Bảng 5-8 Bug Report không hiện thị thông báo khi cập nhật ảnh đại diện thành công

5.2.1.9 Cập nhật ảnh đại diện thất bại nhưng không có thông báo

Name Cập nhật ảnh đại diện thất bại nhưng không có thông báo

Khi cập nhật hình ảnh đại diện thất bại, trang profile không có phản hồi

Bảng 5-9 Bug Report cập nhật ảnh đại diện thất bại nhưng không hiện thị thông báo

5.2.1.10 Thanh footer trong trang Truyện của tôi hiện không đúng vị trí

Name Kiểm tra thanh footer của Trang truyện của tôi

Quan sát thanh footer trong trang truyện của tôi khi chưa có truyện nào không đúng vị trí

Bảng 5-10 Bug Report thanh footer không hiện đúng vị trí

5.2.2 DANH SÁCH LỖI CHƯA XỬ LÝ

5.2.2.1 Tạo được hai gói premium giống hệt nhau

Name Kiểm thử khi Admin thêm 1 gói Premium đã tồn tại

Khi Admin thêm 1 gói Premium đã tồn tại thì hệ thống không thông báo “gói Premium đã tồn tại” mà thêm 1 gói Premium mới dẫn tới có 2 gói giống nhau trong hệ thống URL http://localhost:3030/package-premium

Hệ thống thêm dẫn tới 2 gói Premium giống nhau

Bảng 5-11 Bug Report tạo được 2 gói premium giống nhau

5.2.2.2 Người dùng báo cáo nội dung lặp lại

Name Trang người dùng – Người dùng báo cáo nội dung lặp lại nhiều lần

Summary Người dùng chỉ được báo cáo 1 lần / truyện trong khoảng thời gian nhất định URL http://localhost:3000/comic-detail/B_002

Bảng 5-12 Bug Report người dùng có thể báo cáo cùng 1 lí do nhiều lần

Tiêu đề	Xây dựng website đọc truyện tranh online sử dụng Spring Boot và React JS
Tác giả	Lê Đình Bảo, Lại Văn Quý
Người hướng dẫn	TS. Lê Vĩnh Thịnh
Trường học	Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
Chuyên ngành	Công nghệ thông tin
Thể loại	Đồ án tốt nghiệp
Năm xuất bản	2024
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	103
Dung lượng	9,98 MB