Xã hội con người ngày càng phát triển và nhu cầu giải trí của con người ngày càng tăng cao. Cách ngày nay khoảng 20 năm, thời kỳ mà internet chưa hoàn toàn phổ biến. Nhu cầu giải trí của con người vô cùng cao và để giải quyết cho vấn đề này thì hàng loạt sách, báo, truyện tranh, ảnh ra đời, phù hợp với mọi độ tuổi. Và đặc biệt trong thời đại ngày nay, công nghệ phát triển, thay vì những hình thức in ấn truyền thống thì truyện tranh thông qua internet đã ngày càng được nhiều người biết đến và đón nhận. Truyện tranh online dần dần có vị thế trên bảng xếp hạng từ khóa tìm kiếm của Google. Rất nhiều nước trên thế giới có nền kinh tế phát triển dựa vào truyện tranh như Nhật Bản, Hàn Quốc. Nắm bắt xu thế chúng em đã quyết định thực hiện đề tài: “Xây dựng ứng dụng đọc truyện tranh trên Android”.
TÍNH CẤP THIẾT CỦA ĐỀ TÀI
2 Mục đích của đề tài
3 Cách tiếp cận và phương pháp nghiên cứu
4 Phân tích những công trình có liên quan
5 Kết quả dự kiến đạt được
Chương 1 Cơ sở lý thuyết
Chương 2 Khảo sát, phân tích, thiết kế
Chương 3 Mô hình hóa yêu cầu
Chương 4 Thiết kế phần mềm
Chương 5 Thiết kế giao diện xử lý
Chương 6 Cài đặt và kiểm thử ứng dụng
1 Những kết quả đạt được
CÔNG VIỆC CÔNG VIỆC NGƯỜI
Tìm hiểu Flutter (UI Framwork), BloC pattern
Tìm hiểu ASP.NET Core (JWT, Entity Framework, Identity, Fluent API), ASP.NET MVC
Phân tích hiện trạng nhu cầu đọc truyện trên mobile
Xác định yêu cầu, chức năng, use- case…
01/03/2023 Thiết kế giao diện management và client
Xây dựng API cho người dùng và phần quản lý
Xây dựn ứng dụng android
Xây dựng giao diện trang chủ 07/03/2023
Xây dựng giao diện tìm kiếm truyện 13/03/2023
16/03/2023 Xây dựng giao diện đăng ký, đăng nhập
17/03/2023 25/03/2023 Xây dựng giao diện thông tin người dùng
26/03/2023 30/03/2023 Xây dựng giao diện xem lịch sử đọc truyện
01/04/2023 05/04/2023 Xây dựng giao diện chi tiết bộ truyện 06/04/2023
Xây dựng giao diện đọc truyện 13/04/2023
18/04/2023 Xây dụng giao diện truyện đang theo dõi.
Xây dựng giao diện bình luận 24/04/2023
Xây dựng giao diện thanh toán 05/05/2023
Xây dựng giao diện lịch sử thanh toán 10/05/2023
Xây dụng giao diện thông báo 16/05/2023
19/05/2023 Xây dựng controller xử lý việc đăng nhập, đăng ký
20/05/2023 24/05/2023 Xây dựng controller xử lý việc tìm truyện, chi tiết truyện, đọc truyện
25/05/2023 31/05/2023 Xây dựng controller xử lý việc thay đổi thông tin cá nhân, xem lịch sử đọc truyện, truyện đang theo dõi
Xây dựng controller xử lí bình luận 10/06/2023
Xây dựng controller xử lý thanh toán 16/06/2023
21/06/2023 Xây dựng controller xử lí lịch sử thanh toán
Xây dựng controller xử lý thông báo 25/06/2023
30/06/2023 Test và fix bug phía người dùng
Testing và fix bug còn tồn tại phía người dùng
Xây dựng website phía quản lý
Xây dựng giao diện Đăng nhập cho trang quản lý
15/05/2023 17/05/2023 Xây dựng giao diện quản lý comics, chapters, genres, authors, artists, roles, service config, service price
Xây dựng giao diện quản lý các tài khoản người dùng và assign role, theo dõi lịch sử sử dụng
Xây dựng các controller cho việc quản lý comics, chapters, genres, authors, artists, roles, service config, service price
Xây dựng controller xử lý các thao tác đối với tài khoản người dùng
21/06/2023 30/06/2023 Test và fix bug phía quản lý
Testing và fix bug còn tồn tại phía quản lý
Deployment Triển khai API và Web Management lên hosting và cloud
06/07/2023 07/07/2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương
LỜI CẢM ƠN 4 ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP 5
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 23
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 24
1.2.3 So sánh Flutter và các đối thủ 26
1.4.1 ASP.NET Core là gì 28
1.4.3 Một số cải tiến nổi bật của ASP.NET Core 29
CHƯƠNG 2: KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 30
2.2 Khảo sát một số phần mềm 31
2.3 Phân tích yêu cầu của dự án 39
2.4 Danh sách yêu cầu chức năng nghiệp vụ 41
2.5 Danh sách yêu cầu chức năng hệ thống 41
2.6 Danh sách yêu cầu phi chức năng 41
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 42
3.1.1 Đăng nhập bằng email và mật khẩu 43
3.1.2 Đăng nhập bằng tài khoản Google 43
3.1.3 Đăng nhập bằng tài khoản Facebook 44
3.1.5 Thêm số điện thoại vào tài khoản 47
3.1.6 Xóa số điện thoại khỏi tài khoản 48
3.1.9 Đổi thông tin cá nhân 51
3.1.12 Chuyển sang chương tiếp theo 53
3.1.14 Xem những truyện đang theo dõi 54
3.1.17 Xem lịch sử nạp của tài khản 56
3.1.18 Xem lịch sử mua truyện 57
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 60
4.1 Lược đồ Cơ sở dữ liệu 60
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 61
5.1.4 Màn hình xác thực OTP khi tạo tài khoản bằng email 67
5.1.5 Màn hình quên mật khẩu 69
5.1.6 Màn hình xác thực OTP khi đổi mật khẩu 71
5.1.7 Màn hình đổi mật khẩu 73
5.1.14 Màn hình thay đổi thông tin cá nhân 87
5.1.15 Màn hình thêm số điện thoại người dùng 89
5.1.16 Màn hình xác thực OTP khi thêm số điện thoại 91
5.1.18 Màn hình truyện theo dõi 95
5.1.20 Màn hình lịch sử thanh toán 99
5.1.21 Màn hình lịch sử mua truyện 101
5.2.2 Account Settings (role admin, team member, creator) 105
5.2.11 Quản lý Notification (thông báo cấp hệ thống) 127
5.2.16 Quản lý account (user accounts, role admin & team member) 136
5.2.17 Quản lý account (admin accounts, role admin) 138
CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 141
6.2.1 Các chức năng quản lý tài khoản 147
6.2.2 Các chức năng quản lý truyện tranh, chương truyện 148
6.2.3 Các chức năng quản lý danh mục, tác giả 149
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 151
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 152
Hình 1 Logo của ngôn ngữ lập trình Dart 24
Hình 3 Cách biên dịch thành Native App [3] 25
CHƯƠNG 2 Hình 6 Màn hình trang chủ của MangaToon 31
Hình 7 Màn hình tìm kiếm của MangaToon 31
Hình 8 Màn hình tài khoản của MangaToon 32
Hình 9 Màn hình đăng nhập của MangaToon 32
Hình 10 Màn hình thông tin cá nhân của MangaToon 33
Hình 11 Màn hình chi tiết truyện của MangaToon 33
Hình 12 Màn hình đọc truyện của MangaToon 34
Hình 13 Màn hình kênh của MangaToon 34
Hình 14 Màn hình tủ sách của MangaToon 35
Hình 15 Màn hình chinh của Bilibili Comics 36
Hình 16 Màn hình chi tiết truyện của Bilibili Comics 36
Hình 17 Màn hình đọc truyện của Bilibili Comics 37
Hình 18 Màn hình tủ sách của Bilibili Comics 37
Hình 19 Màn hình cá nhân của Bilibili Comics 38
Hình 20 Màn hình thông tin cá nhân của Bilibili Comics 38
Hình 21 Màn hình thể loại của Bilibili Comics 39
Hình 22 Màn hình chinh của Bilibili Comics 39
CHƯƠNG 3 Hình 23 Lược đồ Usecase 42
CHƯƠNG 4 Hình 24 Lược đồ cơ sở dữ liệu 60
Hình 25 Màn hình trang chủ 61
Hình 26 Màn hình trang đăng nhập 63
Hình 27 Màn hình trang đăng ký 65
Hình 28 Màn hình xác thực OTP khi tạo tài khoản bằng email 67
Hình 29 Màn hình quên mật khẩu 69
Hình 30 Màn hình xác thực OTP khi đổi mật khẩu 71
Hình 31 Màn hình đổi mật khẩu 73
Hình 32 Tìm kiếm truyện tranh 75
Hình 33 Màn hình chi tiết truyện 77
Hình 34 Màn hình bình luận 79
Hình 35 Màn hình thể loại 81
Hình 36 Màn hình đọc truyện 83
Hình 37 Màn hình cá nhân 85
Hình 38 Màn hình thay đổi thông tin cá nhân 87
Hình 39 Màn hình thêm số điện thoại người dùng 89
Hình 40 Màn hình xác thực OTP khi thêm số điện thoại 91
Hình 41 Màn hình thư viện 93
Hình 42 Màn hình truyện theo dõi 95
Hình 43 Màn hình thanh toán 97
Hình 44 Màn hình lịch sử thanh toán 99
Hình 45 Màn hình lịch sử mua truyện 101
Hình 46 Màn hình thông báo 103
Hình 47 Màn hình đăng nhập 104
Hình 48 Màn hình Account Settings 105
Hình 49 Màn hình Account Settings (Modal Change Avatar) 106
Hình 50 Màn hình Account Settings (Modal Change Personal Info) 107
Hình 51 Màn hình Account Settings (Modal Change Password) 108
Hình 52 Màn hình Dashboard (Phần 1) 109
Hình 53 Màn hình Dashboard (Phần 2) 109
Hình 54 Màn hình Dashboard (Phần 3) 110
Hình 55 Màn hình Dashboard (Phần 4) 110
Hình 56 Màn hình Dashboard (Phần 1) 112
Hình 57 Màn hình Dashboard (Phần 2) 113
Hình 58 Màn hình Dashboard (Phần 3) 113
Hình 59 Màn hình Dashboard (Phần 1) 115
Hình 60 Màn hình Dashboard (Phần 2) 115
Hình 61 Màn hình quản lý truyện tranh 116
Hình 62 Màn hình quản lý chương 119
Hình 63 Màn hình quản lý danh mục 121
Hình 64 Màn hình quản lý artist 123
Hình 65 Màn hình quản lý tác giả 125
Hình 66 Màn hình quản lý thông báo 127
Hình 67 Màn hình quản lý creator request 129
Hình 68 Màn hình quản lý service config 131
Hình 69 Màn hình quản lý config prices 132
Hình 70 Màn hình quản lý roles 134
Hình 71 Màn hình quản lý user accounts 136
Hình 72 Màn hình quản lý admin accounts 138
CHƯƠNG 6 Hình 73 Cài đặt backend 141
Hình 75 Màn hình trang tải Flutter cho Windows 143
Hình 76 Tạo biến môi trường 144
Hình 77 Cài trình biên dịch Visual Studio Code 144
Hình 78 Cài các extension cho Flutter 145
Hình 80 Chạy lệnh “adb reverse tcp:7068 tcp:7068” 146
Hình 81 Chạy ứng dụng HikiComic 147
Bảng 1 So sánh giữa Flutter và React Native Error! Bookmark not defined
Bảng 2 Chức năng và hạn chế của MangaToon 35
Bảng 3 Chức năng và hạn chế của Bilibili Comics 39
CHƯƠNG 5 Bảng 4 Mô tả màn hình trang chủ 62
Bảng 5 Mô tả màn hình trang đăng nhập 64
Bảng 6 Mô tả màn hình trang đăng ký 66
Bảng 7 Mô tả màn hình xác nhận OTP 68
Bảng 8 Mô tả màn hình quên mật khẩu 70
Bảng 9 Mô tả màn hình xác thực OTP để cài lại mật khẩu 72
Bảng 10 Mô tả màn hình trang cài lại mật khẩu 74
Bảng 11 Mô tả màn hình trang tìm kiếm truyện tranh 76
Bảng 12 Mô tả màn hình chi tiết truyện tranh 78
Bảng 13 Mô tả màn hình bình luận 80
Bảng 14 Mô tả màn hình thể loại 82
Bảng 15 Mô tả màn hình đọc truyện 84
Bảng 16 Mô tả màn hình cá nhân 86
Bảng 17 Mô tả màn hình thay đổi thông tin cá nhân 88
Bảng 18 Mô tả màn hình thêm số điện thoại người dùng 90
Bảng 19 Mô tả màn hình xác thực OTP để thêm số điện thoại 92
Bảng 20 Mô tả màn hình tủ sách 94
Bảng 21 Mô tả màn hình truyện theo dõi 96
Bảng 22 Mô tả màn hình thanh toán 98
Bảng 23 Mô tả màn hình lịch sử thanh toán 100
Bảng 24 Mô tả màn hình lịch sử mua truyện 102
Bảng 25 Mô tả màn hình thông báo 104
Bảng 26 Mô tả màn hình trang đăng nhập 105
Bảng 27 Mô tả màn hình trang Account Settings 106
This article provides a detailed description of various screens within the Account Settings and Dashboard sections, including the Modal for changing avatars, personal information, and passwords It also outlines the management screens for comic stories, chapters, categories, artists, authors, notifications, creator requests, service configurations, pricing configurations, user roles, user accounts, and admin accounts Each section is meticulously documented to enhance user understanding and navigation within the platform.
Bảng 46 trình bày các kiểm thử liên quan đến chức năng quản lý tài khoản, trong khi Bảng 47 tập trung vào việc kiểm thử các chức năng quản lý truyện tranh và chương truyện Cuối cùng, Bảng 48 đề cập đến kiểm thử các chức năng quản lý danh mục và tác giả.
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Xã hội con người ngày càng phát triển, kéo theo nhu cầu giải trí ngày càng tăng cao Khoảng 20 năm trước, khi internet chưa phổ biến, nhu cầu này được đáp ứng qua sách, báo và truyện tranh in Tuy nhiên, với sự phát triển của công nghệ, truyện tranh online đã trở nên phổ biến và được nhiều người đón nhận Hiện nay, truyện tranh trực tuyến đang chiếm ưu thế trong bảng xếp hạng tìm kiếm của Google và nhiều quốc gia như Nhật Bản, Hàn Quốc đã phát triển kinh tế dựa vào ngành công nghiệp truyện tranh Nhận thấy xu thế này, chúng tôi quyết định thực hiện đề tài: “Xây dựng ứng dụng đọc truyện tranh trên Android”.
MỤC TIÊU ĐỀ TÀI
● Xây dựng website cho quản trị viên để quản lý truyện tranh và người dùng
● Xây dựng app cho người dùng để có thể đọc truyện tranh và theo dõi thông tin trên đó
● Vận dụng thành công các công nghệ mới, ngôn ngữ lập trình hiện đại vào đề tài để xây dựng website và app.
CƠ SỞ LÝ THUYẾT
Dart
Hình 1 Logo của ngôn ngữ lập trình Dart
Dart là ngôn ngữ lập trình mã nguồn mở miễn phí do Google phát triển, nhằm cung cấp một công cụ hiệu quả cho việc phát triển ứng dụng đa nền tảng Ngôn ngữ này nổi bật với khả năng thực thi linh hoạt trên các nền tảng khác nhau.
Dart là một ngôn ngữ lập trình hướng đối tượng, được sử dụng để phát triển ứng dụng web, server, ứng dụng máy tính và thiết bị di động Nền tảng Flutter dựa trên Dart, cung cấp một ngôn ngữ mạnh mẽ cho việc phát triển ứng dụng Flutter, đồng thời hỗ trợ định dạng, phân tích và kiểm thử mã lệnh.
Dart là ngôn ngữ lập trình lý tưởng để phát triển ứng dụng chất lượng cao cho nhiều nền tảng như iOS, Android và web Với Dart, bạn có thể tạo ra những trải nghiệm đẹp mắt và chất lượng trên mọi thiết bị, đảm bảo sự đồng nhất và hiệu suất tối ưu.
● Một ngôn ngữ được tối ưu hóa cho client
● Cú pháp dễ làm quen, rõ ràng, súc tích, sớm xác định được các lỗi
● Tối ưu hóa việc biên dịch trước thời hạn để có được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web
Dart biên dịch thành mã ARM và x86, cho phép các ứng dụng di động chạy tự nhiên trên iOS và Android Đối với ứng dụng web, Dart chuyển mã sang JavaScript để đảm bảo tính tương thích và hiệu suất tối ưu.
Flutter
Hình 2 Logo Flutter framework [2]
Là một công cụ cho phép chúng ta xây dựng một native cross-platform (iOS,
Android) apps với duy nhất một ngôn ngữ lập trình (Dart) và một mã nguồn gốc Bao gồm:
● SDK: Công cụ để biên dịch các dòng lệnh thành native machine code giúp lập trình đơn giản hơn
● Framework/ Widget Library: Cung cấp các UI building blocks có thể tái sử dụng (Widgets), các hàm tiện ích (utility function), và các packages
Sau đây là hình minh họa cho cách Flutter/Dart biên dịch thành Native App:
Hình 3 Cách biên dịch thành Native App [3]
Ta có thể thấy chỉ với một codebase nhờ vào Flutter SDK sẽ giúp chúng ta có thể build thành các Native App trên nhiều nền tảng khác nhau
Flutter render giao diện người dùng bằng cách kiểm soát từng pixel trên màn hình thiết bị mà không phụ thuộc vào các thành phần UI cụ thể của iOS hay Android Điều này mang lại khả năng tùy biến cao và không bị giới hạn bởi nền tảng thiết bị.
1.2.3 So sánh Flutter và các đối thủ
Khi so sánh Flutter, một trong những framework nổi bật, với React Native, có nhiều yếu tố cần cân nhắc Dưới đây là một số điểm khác biệt giữa hai framework này.
Bảng 1 So sánh giữa Flutter và React Native
Dart + Flutter Java Script/React.js
Biên dịch thành các Native App Biên dịch một phần thành Native
App vẫn còn một phần trong App được chạy dưới dạng JavaScript
Xây dựng các thành phần UI
Không biên dịch code thành các UIComponent của riêng Android hay iOS mà Flutter kiểm soát từng pixel trên màn hình
Biên dịch code thành các UIComponent của riêng Android hay iOS
Nền tảng ứng dụng Ứng dụng di động, web, desktop Hầu như là ứng dụng di động (Có thể có React Native Web)
Nhà phát triển Google Facebook
Sau đây là các ưu điểm của Flutter:
● Phát triển ứng dụng nhanh chóng nhờ có hot reload
● Giao diện người dùng đẹp và thu hút và không bị giới hạn bởi nền tảng thiết bị
● Hiệu suất cao nhờ vào việc biên dịch ra các native app dựa trên nhiều nền tảng
BloC
Bloc is a state management library for Flutter applications, standing for Business Logic Component It takes 'Events' as input and produces 'States' as output Bloc is built on the RxDart framework.
• Dễ hiểu và dễ sử dụng
• Dễ dàng khi mở rộng ứng dụng
• Dễ dàng tái sử dụng code
• Việc tổ chức cấu trúc project sẽ cực kỳ clear, phần code logic được tách hẳn hoàn toàn so với UI
Mô hình BloC bổ sung các lớp trừu tượng và phức tạp vào kiến trúc ứng dụng, điều này có thể khiến mã nguồn trở nên khó hiểu, đặc biệt đối với người mới bắt đầu và các nhà phát triển mới làm quen với Flutter.
Mô hình BloC yêu cầu viết mã bổ sung để thiết lập các stream, sink và xử lý sự kiện, điều này có thể tạo ra một khối lượng mã mẫu đáng kể Hệ quả là, việc này không chỉ tốn thời gian mà còn làm tăng nguy cơ phát sinh lỗi trong quá trình phát triển.
Mô hình BLoC có thể ảnh hưởng đến hiệu suất ứng dụng nếu không được triển khai hiệu quả, do việc đăng ký stream và xử lý sự kiện liên tục tiêu tốn tài nguyên hệ thống Tuy nhiên, bằng cách áp dụng các kỹ thuật tối ưu hóa phù hợp, chúng ta có thể giảm thiểu tải trọng này và cải thiện hiệu suất tổng thể của ứng dụng.
ASP.NET Core
1.4.1 ASP.NET Core là gì
Hình 5 ASP NET Core [5]
ASP.NET Core là một framework mã nguồn mở và đa nền tảng, lý tưởng cho việc phát triển các ứng dụng hiện đại như web apps, IoT và backend cho mobile Ứng dụng ASP.NET Core có thể hoạt động trên NET Core hoặc phiên bản đầy đủ của NET Framework Framework này được thiết kế để tối ưu hóa quá trình phát triển cho các ứng dụng triển khai trên đám mây hoặc chạy trên môi trường tại chỗ (on-premise).
ASP.NET Core được thiết kế với các thành phần theo hướng module, giúp tối thiểu hóa tài nguyên và chi phí phát triển, mang lại sự linh hoạt trong việc xây dựng giải pháp Nó cho phép phát triển và chạy ứng dụng đa nền tảng trên Windows, Mac và Linux Sự chuyển đổi sang mã nguồn mở là một bước tiến quan trọng, mở ra cơ hội cho lập trình viên, điều mà trước đây ít ai có thể tưởng tượng Đây cũng là xu hướng chung của các ngôn ngữ lập trình hiện nay.
▪ ASP.NET Core được thay đổi một số kiến trúc nên dẫn đến Modular Framework nhỏ hơn
▪ ASP.NET Core không còn phụ thuộc vào nền tảng system.web.dll, Framework này dựa trên một tập hợp nhiều yếu tố của Nuget Packages
▪ Bạn có thể tối ưu ứng dụng của mình dễ dàng thông qua những Nuget Packages cần thiết
Các ứng dụng web được phát triển trên nền tảng ASP.NET Core có ưu điểm tiêu tốn ít dung lượng bộ nhớ, đảm bảo bảo mật cao, tốc độ thực thi nhanh chóng, hiệu suất hoạt động tốt và ổn định.
▪ ASP.NET Core giúp giảm dịch vụ, dễ bảo trì ứng dụng và tiết kiệm chi phí
1.4.3 Một số cải tiến nổi bật của ASP.NET Core
▪ Các ứng dụng ASP.NET Core được xây dựng và khởi tạo ở đa dạng các nền tảng như Windows, Mac và Linux
▪ Được phát triển từ NET Core, ASP.NET Core hỗ trợ chất lượng App Versioning
▪ Mang đến những công cụ và hàng loạt tính năng hiện đại, đơn giản hóa quy trình phát triển web
▪ Tương thích với hệ thống xây dựng web UI và web APIs
▪ Có thể tích hợp những client – side Frameworks hiện đại và những luồng phát triển
▪ Cấu hình dựa trên mô hình đám mây có sẵn
▪ Dependency Injection (DI) được xây dựng sẵn
▪ Đa dạng cấu hình, thân thiện với nhiều môi trường
▪ Có tính năng host trên IIS hoặc self-host trong Process của riêng mình
▪ Chuyển thực thể, các thành phần module, dùng chung toàn bộ Nuget Package
▪ Mã nguồn mở và tập trung vào cộng đồng
KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ
Phân tích hiện trạng
Theo dự báo, thị trường sách điện tử toàn cầu sẽ tiếp tục mở rộng, dự kiến đạt 29,43 tỷ USD vào năm 2024 Trong đó, thị phần của truyện tranh số hóa được ước tính sẽ chiếm 10%, tương đương khoảng 2,94 tỷ USD.
Thị trường Webcomics đang chứng kiến sự bùng nổ với hai đại diện nổi bật là Webtoon từ Hàn Quốc và Manhua từ Trung Quốc, cả hai đều ghi nhận tốc độ tăng trưởng mạnh mẽ và bền vững trong những năm gần đây.
- Trung Quốc: Số người đọc truyện tranh online dự kiến vượt 200 triệu người, tương đương doanh thu 3.35 tỷ NDT (~437 triệu USD)
- Hàn Quốc: Quốc gia có nền Webtoon phát triển vượt bậc dự kiến đạt 1000 tỷ Won (~785 triệu USD) Ở Việt Nam:
+ Tổng dân số 100 triệu người, dân số thành thị chiếm 36%
+ Số thiết bị Smartphone (điện thoại thông minh) có 43.7 triệu thiết bị
+ Số người sử dụng Internet 64 triệu người, chiếm 64% dân số
+ Tỷ lệ sử dụng Internet hằng ngày 94%
Với 64% dân số sử dụng Internet và 43.7 triệu người sở hữu smartphone, Việt Nam đang trở thành một thị trường tiềm năng cho nội dung số, đặc biệt là truyện tranh online.
Thị trường truyện tranh online tại Việt Nam hiện có khoảng 2.5 triệu người đọc hàng tháng, tương đương 4 triệu USD mỗi năm Dự báo, thị trường này sẽ tiếp tục tăng trưởng theo xu hướng chung của châu Á và thế giới Nhằm đáp ứng nhu cầu đọc truyện tranh online, nhóm chúng tôi sẽ phát triển một ứng dụng trên smartphone, không chỉ phục vụ thị trường mà còn tạo ra giá trị cho xã hội, góp phần thúc đẩy sự phát triển của thị trường truyện tranh online tại Việt Nam.
Khảo sát một số phần mềm
2.2 Khảo sát một số phần mềm
Hình 6 Màn hình trang chủ của MangaToon Hình 7 Màn hình tìm kiếm của MangaToon
Hình 8 Màn hình tài khoản của MangaToon Hình 9 Màn hình đăng nhập của
Hình 10 Màn hình thông tin cá nhân của
Hình 11 Màn hình chi tiết truyện của
Hình 12 Màn hình đọc truyện của
Hình 13 Màn hình kênh của MangaToon
Hình 14 Màn hình tủ sách của MangaToon
Các chức năng Hạn chế
- Đa dạng về thể loại truyện
- Giao diện đơn giản, dễ dùng
- Có chức năng hội viên, bình luận
- Có chức năng viết truyện
- Truyện được cập nhật liên tục, có thông báo đến người dùng khi có chương mới
- Chỉ hỗ trợ ngôn ngữ Tiếng Việt
- Giao diện chưa đẹp, chưa ấn ấn tượng
Bảng 2 Chức năng và hạn chế của MangaToon
Hình 15 Màn hình chinh của Bilibili Comics Hình 16 Màn hình chi tiết truyện của Bilibili
Hình 17 Màn hình đọc truyện của Bilibili
Hình 18 Màn hình tủ sách của Bilibili
Hình 19 Màn hình cá nhân của Bilibili Comics Hình 20 Màn hình thông tin cá nhân của
Các chức năng Hạn chế
- Giao diện đẹp, ấn tượng
- Tính điểm dựa trên mức độ đọc của người dùng
- Số lượng truyện đồ sộ
Hỗ trợ nhiều ngôn ngữ như Tiếng Anh, Tiếng Trung, Tiếng Indonesia, Tiếng Tây Ban Nha, Tiếng Pháp
Bảng 3 Chức năng và hạn chế của Bilibili Comics
Phân tích yêu cầu của dự án
Xây dựng ứng dụng cho phép người dùng đọc truyện tranh trực tuyến thay vì sử dụng hình thức in ấn truyền thống Điều này mang lại nhiều quyền lựa chọn cho độc giả, với đa dạng thể loại phù hợp cho nhiều độ tuổi Người dùng có thể dễ dàng đăng ký thành viên để trải nghiệm dịch vụ.
Hình 21 Màn hình thể loại của Bilibili Comics Hình 22 Màn hình chinh của Bilibili Comics
Hệ thống cung cấp sự hỗ trợ tối ưu cho người dùng, cho phép quản trị hiệu quả thông qua website với quyền Quản trị viên Chương trình bao gồm các chức năng chính giúp quản lý và điều phối hệ thống một cách linh hoạt và hiệu quả.
- Quản lý tài khoản, thông tin cá nhân
- Danh sách những truyện đang theo dõi
- Lịch sử đọc truyện tranh
- Tìm kiếm truyện tranh theo: từ khóa tìm kiếm, danh mục,
- Thanh toán bằng PayPal và ZaloPay
- Xem lịch sử thanh toán
- Xem lịch sử mua chương truyện
- Nhận và xem thông báo
- Đổi thông tin cá nhân, avatar
- Thống kê truyện tranh mới theo tháng (năm)
- Thống kê người dùng mới theo tháng (năm)
- Thống kê số lượng truyện, chương truyện, tác giả, danh mục, người dùng
Danh sách yêu cầu chức năng nghiệp vụ
● Hiển thị truyện tranh theo danh mục (thể loại)
● Sắp xếp truyện tranh (ngày tạo, tên, tình trạng…)
● Thông tin chi tiết của truyện tranh
● Sắp xếp truyện tranh (ngày tạo, tên, trình trạng…)
- Quản lý danh mục (thể loại)
Danh sách yêu cầu chức năng hệ thống
- Thống kê lượt đọc truyện của từng bộ truyện
- Thống kê lượt đọc truyện của từng chương truyện
- Thống kê lượt theo dõi của từng bộ truyện
- Thêm, cập nhật, xóa, khôi phục truyện tranh
- Thêm, cập nhật, xóa, khôi phục chương truyện
- Thêm, cập nhật, xóa, khôi phục danh mục
- Thêm, cập nhật, xóa, khôi phục tác giả
Danh sách yêu cầu phi chức năng
- Hệ thống có chức năng bảo mật và phân quyền
- Mật khẩu, thông tin nhạy cảm của người dùng được mã hóa trước khi ghi vào cơ sở dữ liệu
MÔ HÌNH HÓA YÊU CẦU
Lược đồ Usecase
Hình 23 Lược đồ Usecase
3.1.1 Đăng nhập bằng email và mật khẩu
3.1.2 Đăng nhập bằng tài khoản Google
Name Đăng nhập bằng email và mật khẩu
Brief description Người dùng đăng nhập vào ứng dụng bàng email và mật khẩu
Pre- conditions Người dùng đã có tài khoản trong hệ thống
Nếu đăng nhập thành công người dùng được thực hiện các chức năng theo phân quyền
Basic flow 1 Người dùng nhập Email và Mật khẩu
2 Hệ thống kiểm tra định dạng Email và Mật khẩu
3 Hệ thống xác thực Email và Mật khẩu của người dùng
4 Hệ thống xác định roles và thông tin của người dùng
5 Người dùng đăng nhập thành công vào hệ thống Alternative flow
2.1 Hệ thống thông báo sai định dạng Email hoặc định dạng Mật khẩu không đúng
2.2 Quay trở lại bước 1 của luồng hoạt động 3.1 Hệ thống thông báo đăng nhập thất bại vì đăng nhập sai thông tin
3.2 Quay trở lại bước 1 của luồng hoạt động
Exception flow Thoát ‘Đăng nhập’
Người dùng thoát khỏi giao diện ‘Đăng nhập’
Quay lại bước 1 của luồng hoạt động
Name Đăng nhập bằng Google
3.1.3 Đăng nhập bằng tài khoản Facebook
Brief description Người dùng đăng nhập vào ứng dụng bằng tài khoản Google
Nếu đăng nhập thành công người dùng được thực hiện các chức năng theo phân quyền
Basic flow 1 Người dùng nhấn vào Icon Google ở Dialog đăng nhập
2 Người dùng chọn tài khoản Google muốn sử dụng để đăng nhập
3 Hệ thống nhận access token trong response từ Google và gửi lên server
4 Hệ thống nhận token từ server và nhận thông tin của người dùng
5 Người dùng đăng nhập thành công vào hệ thống Alternative flow
Exception flow 2.1 Người dùng quay lại và không chọn tài khoản Google
2.2 Quay lại bước 1 của luồng hoạt động
Name Đăng nhập bằng Facebook
Brief description Người dùng đăng nhập vào ứng dụng bằng tài khoản Facebook
Nếu đăng nhập thành công người dùng được thực hiện các chức năng theo phân quyền
Basic flow 1 Người dùng nhấn vào Icon Facebook ở Dialog đăng nhập
2 Người dùng chọn tài khoản Facebook muốn sử dụng để đăng nhập
3 Hệ thống nhận access token trong response từ Facebook và gửi lên server
4 Hệ thống nhận token từ server và nhận thông tin của người dùng
5 Người dùng đăng nhập thành công vào hệ thống Alternative flow
Exception flow 2.1 Quay lại và không chọn tài khoản Facebook
2.2 Quay lại bước 1 của luồng hoạt động
UseCase này cho phép người dùng đăng ký tài khoản bằng email và mật khẩu
+ Không có tài khoản nào đang đăng nhập ở thiết bị của người dùng + Email đăng ký chưa tồn tại trong hệ thống
+ Nếu đăng ký thành công, hệ thống tạo tài khoản mới và người dùng được chuyển về trang đăng nhập
+ Nếu đăng ký thất bại, hệ thống hiện thông báo và yêu cầu người dùng thực hiện lại thao tác đăng nhập
Basic flow 1 Người dùng nhập email, mật khẩu và xác nhận mật khẩu
2 Hệ thống kiểm tra format của email và mật khẩu
3 Hệ thống kiểm tra sự trùng khớp giữa mật khẩu và mật khẩu xác nhận
4 Hệ thống gửi email, mật khẩu, mật khẩu xác nhận lên server và chuyển đến màn hình nhập OTP được gửi qua email
5 Người dùng nhập OTP được gửi qua email
6 Hệ thống gửi OTP lên server
7 Hệ thống tạo tài khoản cho người dùng
8 Hệ thống chuyển hướng người dùng đến trang đăng nhập Alternative flow
2.1 Hệ thống thông báo lỗi vì email hoặc mật khẩu không hợp lệ 2.2 Quay lại bước 1 của luồng hoạt động
3.1 Hệ thống thông báo lỗi vì mật khẩu và xác nhận mật khẩu không trùng khớp
3.2 Quay lại bước 1 của luồng hoạt động 4.1 Hệ thống thông báo lỗi vì Email đã tồn tại trong hệ thống 4.2 Quay lại bước 1 của luồng hoạt động
6.1 Hệ thống thông báo lỗi khi người dùng nhập sai OTP 6.2 Quay lại bước 5 của luồng hoạt động
3.1.5 Thêm số điện thoại vào tài khoản
Exception flow Thoát ‘Đăng ký’
Người dùng thoát khỏi màn hình đăng ký Quay lại bước 1 của luồng hoạt động
3.1.6 Xóa số điện thoại khỏi tài khoản
Name Thêm số điện thoại vào tài khoản
Người dùng thêm số điện thoại vào tài khoản
Người dùng đã đăng nhập thành công
Thêm số điện thoại vào ứng dụng thành công
Basic flow 1 Người dùng nhấn vào icon “Menu” ở thanh Appbar ở màn hình chính
2 Người dùng nhấn vào avatar ở thanh sidebar
3 Hệ thống điều hướng đến màn hình “Profile”
4 Người dùng nhấn vào button “Add” ở field Number Phone
5 Hệ thống điều hướng đến màn hình nhập số điện thoại
6 Người dùng chọn quốc gia và nhập số điện thoại và xác nhận
7 Hệ thống điều hướng đến màn hình nhập mã OTP
8 Người dùng nhập mã OTP được gửi qua số điện thoại vừa nhập
9 Hệ thống xác thực mã OTP và đăng kí số điện thoại vào tài khoản Alternative flow
6.1 Hệ thống hiển thị lỗi nếu số điện thoại không hợp lệ 6.2 Quay lại bước 6 của luồng hoạt động
9.1 Hệ thống hiển thị thông báo lỗi nếu mã OTP không đúng 9.2 Quay lại bước 8 của luồng hoạt động
UseCase này cho phép người dùng đăng xuất tài khoản khỏi thiết bị
Name Xóa số điện thoại khoỉ tài khoản
Người dùng xóa số điện thoại khỏi tài khoản
Người dùng đã đăng nhập thành công Người dùng đã thêm số điện thoại thành công
Xóa số điện thoại khỏi tài khoản thành công
Basic flow 1 Người dùng nhấn vào icon “Menu” ở thanh Appbar ở màn hình chính
2 Người dùng nhấn vào avatar ở thanh sidebar
3 Hệ thống điều hướng đến màn hình “Profile”
4 Người dùng nhấn vào button “Delete” ở field Number Phone
7 Hệ thống điều hướng đến màn hình nhập mã OTP
8 Người dùng nhập mã OTP được gửi qua số điện thoại vừa nhập
9 Hệ thống xác thực mã OTP và đăng kí số điện thoại vào tài khoản Alternative flow
6.1 Hệ thống hiển thị lỗi nếu số điện thoại không hợp lệ 6.2 Quay lại bước 6 của luồng hoạt động
9.1 Hệ thống hiển thị thông báo lỗi nếu mã OTP không đúng 9.2 Quay lại bước 8 của luồng hoạt động
Người dùng đã đăng nhập tài khoản vào hệ thống
Người dùng đăng xuất khỏi ứng dụng
Basic flow Người dùng chọn nút đăng xuất
Tài khoản được đăng xuất khỏi hệ thống và thiết bị Alternative flow
UseCase này cho phép người dùng đổi mật khẩu của tài khoản
Người dùng đổi mật khẩu thành công
Basic flow 1 Người dùng nhập email của tài khoản cần đồi mật khẩu
2 Hệ thống chuyển hướng đến màn hình nhập OTP
3 Người dùng nhập mã OTP được gửi qua email
4 Hệ thống chuyển hướng đến màn hình đổi mật khẩu
5 Người dùng nhập mật khẩu mới và xác nhận mật khẩu mới
6 Hệ thống đổi mật khẩu thành công
1.1 Hệ thống thông báo lỗi nếu email người dùng nhập không có trong hệ thống
1.2 Quay lại bước 1 của luồng hoạt động 3.1 Hệ thống thông báo nếu người dùng nhập sai mã OTP 3.2 Quay lại bước 3 của luồng hoạt động
5.1 Hệ thống thông báo nếu mật khẩu mới và xác nhận mật khẩu mới không trùng khớp
5.1.2 Quay lại bước 5 của luồng hoạt động Exception flow
1 Người dùng thoát khỏi màn hình đổi mật khẩu
2 Quay lại bước 1 của luồng hoạt động
3.1.9 Đổi thông tin cá nhân
Name Đổi thông tin cá nhân
UseCase này cho phép người dùng đổi thông tin cá nhân
Người dùng đã đăng nhập tài khoản vào hệ thống
Basic flow 1 Hiển thị màn hình đổi thông tin cá nhân
2 Người dùng nhập First Name, Last Name, chọn Ngày sinh và Giới tính
3 Hệ thống cập nhật thông tin cá nhân mới cho tài khoản Alternative flow
2.2 Quay lại bước 1 của luồng hoạt động
Name Theo dõi truyện tranh
UseCase này cho phép người dùng theo dõi một bộ truyện
Pre-conditions Người dùng đã đăng nhập tài khoản vào hệ thống
Post-conditions Người dùng theo dõi truyện thành công và thêm bộ truyện vừa theo dõi vào thư viện
Basic flow 1 Người dùng chọn vào bộ truyện
2 Hiển thị màn hình chi tiết truyện
3 Hệ thống kiểm tra người dùng đã theo dõi bộ truyện hay chưa
4 Người dùng nhập nhấn vào button “Follow”
5 Hệ thống thêm bộ truyện vào danh sách các bộ truyện đã theo dõi Alternative flow 3.1 Hệ thống hiển thị button “Following” thay vì button “Follow” khi người dùng đã theo dõi bộ truyện 3.2 Quay lại bước 2 của luồng hoạt động 4.1 Hiển thị dialog “Sign In” khi người dùng chưa đăng nhập vào hệ thống
4.2 Quay lại bước 4 của luồng hoạt dộng Exception flow 1 Thoát màn hình “Chi tiết truyện”
2 Quay lại bước 1 của luồng hoạt động
Name Tìm kiếm truyện tranh
UseCase này cho phép người dùng tìm kiếm bộ truyện
Post-conditions Hiển thị tất cả bộ truyện có tên chứa dữ liệu người dùng nhập vào
Basic flow 1 Người dùng chọn vào icon “Search” ở bên phải thanh Appbar ở màn hình “Home”
2 Chuyển đến màn hình tìm kiếm truyện tranh
3 Người dùng nhập tên truyện cần tìm kiếm
4 Hệ thống tìm kiếm trong cơ sở dữ liệu và hiển thị những bộ truyện phù hợp với dữ liệu người dùng vừa nhập
Khi hệ thống không tìm thấy bộ truyện nào phù hợp với tên mà người dùng đã nhập, sẽ hiển thị thông báo "Không tìm thấy kết quả" Người dùng có thể quay lại bước 3 của luồng hoạt động để thực hiện tìm kiếm lại Nếu cần, người dùng cũng có thể thoát khỏi màn hình "Tìm kiếm Truyện".
1 Người dùng thoát khỏi màn hình “Search Comic”
2 Quay lại bước 1 của luồng hoạt động
3.1.12 Chuyển sang chương tiếp theo
Name Chuyển sang chương tiếp theo
UseCase này cho phép người dùng chuyển sang chương tiếp theo khi đọc truyện
Post-conditions Chuyển sang chương tiếp theo
Basic flow 1 Người dùng nhấn button “→” để chuyển đến chương tiếp theo
2 Hệ thống chuyển đến màn hình đọc truyện chương tiếp theo Alternative flow 2.1.1 Hệ thống sẽ hiển thị Dialog thông báo “This is the lastest chapter” khi không còn chương tiếp theo 2.1.2 Quay lại bước 1
2.2.1 Hệ thống hiển thị dialog Sign In khi người dùng chưa đăng nhập và muốn đọc chap bị khóa 2.2.1 Quay lại bước 1
Exception flow Thoát màn hình “Read Comic”
1 Người dùng thoát khỏi màn hình “Comic”
2 Quay lại bước 1 của luồng hoạt động
Name Chuyển sang chương trước
UseCase này cho phép người dùng chuyển sang chương khi đọc truyện
Post-conditions Chuyển sang chương trước
Basic flow 1 Người dùng nhấn button “” để chuyển đến chương tiếp theo
2 Hệ thống chuyển đến màn hình đọc truyện chương tiếp theo Alternative flow 2.1 Hệ thống sẽ hiển thị Dialog thông báo “No previous chapter available” khi không còn chương tiếp theo 2.2 Quay lại bước 1
Exception flow Thoát màn hình “Read Comic”
1 Người dùng thoát khỏi màn hình “Comic”
2 Quay lại bước 1 của luồng hoạt động
3.1.14 Xem những truyện đang theo dõi
Name Xem những truyện đang theo dõi
UseCase này cho phép người dùng xem những bộ truyện đang theo dõi
Pre-conditions Người dùng đã đăng nhập hệ thống
Post-conditions Hệ thống cung cấp tất cả các bộ truyện người dùng đang theo dõi
Basic flow 1 Người dùng nhấn vào Icon “Library” ở trang thanh Appbar ở màn hình chính
2 Người dùng nhấn vào tab “Following”
3 Hệ thống hiển thị tất cả những bộ truyện người dùng đã theo dõi Alternative flow 1.1 Hiển thị dialog Sign In nếu người dùng chưa đăng nhập
1.2 Quay lại bước 1 Exception flow
Name Nạp coin bằng PayPal
Người dùng nạp coin vào ứng dụng bằng PayPal
Pre-conditions Người dùng đã đăng nhập ứng dụng
Có tài khoản Paypal SandBox
Post-conditions Nạp tiền thành công vào ứng dụng và đổi thành coin tương ứng
Basic flow 1 Người dùng nhấn vào icon “Payment” trên thanh Appbar ở màn hình chính
2 Hệ thống chuyển hướng đến màn hình “Payment” và hiển thị tất cá mức nạp
3 Người dùng chọn mức muốn nạp
4 Hệ thống hiển thị phương pháp thanh toán
5 Người dùng chọn Icon PayPal
6 Hệ thống điều hướng đến màn hình đăng nhập PayPal
7 Người dùng đăng nhập PayPal bằng tài khoản SandBox
8 Hệ thống chuyển hướng đến màn hình thanh toán bằng PayPal
9 Người dùng xác nhận thanh toán
10 Hệ thống xác nhận thanh toán và chuyển mức tiền thanh toán thành coin
Alternative flow 9.1 Người dùng hủy thanh toán
9.2 Hệ thống hủy thanh toán và quay lại bước 4 của luồng hoạt động Exception flow Có lỗi khi thanh toán bằng PayPal
Hệ thống hiển thị lỗi
Name Nạp coin bằng ZaloPay
Người dùng nạp coin vào ứng dụng bằng ZaloPay
Pre-conditions Người dùng đã đăng nhập ứng dụng Đã đăng nhập ứng dụng ZaloPay SandBox thành công
Post-conditions Nạp tiền thành công vào ứng dụng và đổi thành coin tương ứng
Basic flow 1 Người dùng nhấn vào icon “Payment” trên thanh Appbar ở màn hình chính
2 Hệ thống chuyển hướng đến màn hình “Payment” và hiển thị tất cá mức nạp
3 Người dùng chọn mức muốn nạp
4 Hệ thống hiển thị phương pháp thanh toán
5 Người dùng chọn Icon ZaloPay
6 Hệ thống điều hướng đến ứng dụng ZaloPay
7 Người dùng xác nhận thanh toán
8 Hệ thống xác nhận thanh toán và chuyển mức tiền thanh toán thành coin
Alternative flow 7.1 Người dùng hủy thanh toán
7.2 Hệ thống hủy thanh toán và quay lại bước 4 của luồng hoạt động Exception flow Có lỗi khi thanh toán ZaloPay
Hệ thống hiển thị thông báo lỗi
3.1.17 Xem lịch sử nạp của tài khản
Name Lịch sử nạp tiền
Xem lịch sử nạp tiền của tài khoản
Pre-conditions Người dùng đã đăng nhập ứng dụng
Người dùng đã nạp tiền
Post-conditions Xem tất cả lịch sử nạp tiền và thông tin nạp tiền của tài khoản
Basic flow 1 Người dùng nhấn vào icon “Menu” trên thanh Appbar ở màn hình chính
2 Người dùng nhấn vào icon “Coin” ở thanh SideBar
3 Hệ thống chuyển hướng đến màn hình “My Coin”
4 Hệ thống hiển thị tất cả lịch sử nạp tiền của tài khoản Alternative flow
3.1.18 Xem lịch sử mua truyện
Name Lịch sử mua truyện
Xem lịch sử mua truyện của tài khoản
Pre-conditions Người dùng đã đăng nhập ứng dụng
Người dùng đã mua truyện
Post-conditions Xem tất cả lịch sử nạp tiền và thông tin nạp tiền của tài khoản
Basic flow 1 Người dùng nhấn vào icon “Menu” trên thanh Appbar ở màn hình chính
2 Người dùng nhấn vào icon “Coin” ở thanh SideBar
3 Hệ thống chuyển hướng đến màn hình “My Coin”
4 Người dùng nhấn vào tab “Purchase”
4 Hệ thống hiển thị tất cả lịch sử mua truyện của tài khoản Alternative flow
Người dùng mua truyện bằng coin
Pre-conditions Người dùng đã đăng nhập ứng dụng
Post-conditions Người dùng mua chương truyện thành công
Basic flow 1 Người dùng nhấn vào bộ truyện muốn đọc
2 Người dùng chọn chương muốn mua
3 Người dùng xác nhận mua chương truyện
4 Hệ thống mở khóa chương truyện Alternative flow 3.1 Hiển thị thông báo “There is not enough COINS left in your account to use this service” khi tài khoản của người dùng không đủ coin Exception flow 3.2 Quay lại bước 3 của luồng hoạt động
Người dùng xem thông báo
Pre-conditions Người dùng đã đăng nhập ứng dụng
Post-conditions Người dùng mua chương truyện thành công
Basic flow 1 Người dùng nhấn vào icon “Notification” trên thanh Appbar ở màn hình chính
2 Hệ thống hiển thị danh sách thông báo Alternative flow
Người dùng bình luận về bộ truyện
Pre-conditions Người dùng đã đăng nhập ứng dụng
Basic flow 1 Người dùng chọn bộ truyện muốn bình luận
2 Người dùng nhấn vào button “Show all”
3 Hệ thống điều hướng đến màn hình “Comment”
4 Người dùng nhập nội dung muốn bình luận
5 Người dùng nhấn vào button “Send” để gửi bình luận
6 Hệ thống hiển thị bình luận của người dùng Alternative flow
THIẾT KẾ PHẦN MỀM
Lược đồ Cơ sở dữ liệu
Hình 24 Lược đồ cơ sở dữ liệu
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Client
Hình 25 Màn hình trang chủ
STT Tên Loại Ghi chú
1 Logo ứng dụng Image Logo của ứng dụng
2 Đăng nhập Button Nhấn vào để mởi dialog đăng nhập
3 Thanh toán Button Nhấn vào để tới màn hình thanh toán
4 Thư viện Button Nhấn vào để tới màn hình thư viện
5 Tìm kiếm Button Nhấn vào để tìm truyện
6 Menu Button Nhấn vào để mở thanh sidebar
7 Truyện đang tiến hành Card Nhấn vào để xem những truyện đang tiến hành
8 Truyện mới Card Nhấn vào để xem những truyện mới cập nhật
9 Truyện đã hoàn thành Card Nhấn vào để xem những truyện đã hoàn thành
10 Xếp hạng truyện Card Nhấn vào để xem xếp hạng của những truyện đang có
Nhấn vào để xem những thể loại đang có và các bộ truyện thuộc những thể loại tương ứng
Bảng 4 Mô tả màn hình trang chủ
Hình 26 Màn hình trang đăng nhập
STT Tên Loại Ghi chú
1 Đăng nhập bằng Google Button Người dùng nhấn vào để đăng nhập bằng tài khoản Google
Button Người dùng nhấn vào để đăng nhập bằng tài khoản Facebook
1 Nhập email đăng nhập TextFormFi eld Nhập email đăng nhập
2 Nhập mật khẩu đăng nhập
TextFormFi eld Nhập mật khẩu
3 Hiển thị mật khẩu Icon Button Nhấn vào để hiển thị mât khẩu
4 Ghi nhớ đăng nhập Check box Ghi nhớ đăng nhập
Quên mật khẩu Text Người dùng nhấn vào đề chuyển đến màn hình cài lại mật khẩu
Nhấn vào để kiểm tra xem các trường đã đáp ứng yêu cầu hay chưa Nếu đăng nhập thành công, bạn sẽ được chuyển đến màn hình cá nhân của hệ thống.
6 Đăng kí Link Text Chuyển đến màn hình đăng kí tài khoản
7 Đóng Button Nhấn để đóng dialog đăng nhập
Bảng 5 Mô tả màn hình trang đăng nhập
Hình 27 Màn hình trang đăng ký
STT Tên Loại Ghi chú
1 Quay lại Button Nhấn để quay lại
2 Nhập email đăng kí TextFormFi eld Nhập email để đăng kí
3 Nhập mật khẩu đăng kí TextFormFi eld Nhập mật khẩu để đăng kí
4 Nhập lại mật khẩu đăng kí
TextFormFi eld Nhập lại mật khẩu
Khi nhấn vào sẽ thực hiện kiểm tra các trường được điền, nếu hợp lệ thì tiến hành đăng ký
6 Đăng nhâp Text Quay lại màn hình đăng nhập
Bảng 6 Mô tả màn hình trang đăng ký
5.1.4 Màn hình xác thực OTP khi tạo tài khoản bằng email
Hình 28 Màn hình xác thực OTP khi tạo tài khoản bằng email
STT Tên Loại Ghi chú
1 Nhập mã OTP TextFormFi eld
Nhập mã OTP đã được gửi qua email đã đăng kí
2 Gửi lại mã OTP Button Nhấn để gửi lại mã OTP qua email đã đăng kí
3 Xác nhận Button Xác nhận khi đã nhập mã OTP dể tạo tài khoản
Bảng 7 Mô tả màn hình xác nhận OTP
5.1.5 Màn hình quên mật khẩu
Hình 29 Màn hình quên mật khẩu
STT Tên Loại Ghi chú
Nhập email của tài khoản cần lấy lại mật khẩu
2 Xác nhận Button Nhấn để gửi mã OTP qua email đã nhập
Bảng 8 Mô tả màn hình quên mật khẩu
5.1.6 Màn hình xác thực OTP khi đổi mật khẩu
Hình 30 Màn hình xác thực OTP khi đổi mật khẩu
STT Tên Loại Ghi chú
1 Nhập mã OTP TextFormFi eld
Nhâp mã OTP đã được gửi đến email
2 Xác nhận Button Nhấn để chuyển đến màn hình cài lại mật khẩu
Bảng 9 Mô tả màn hình xác thực OTP để cài lại mật khẩu
5.1.7 Màn hình đổi mật khẩu
Hình 31 Màn hình đổi mật khẩu
STT Tên Loại Ghi chú
1 Mật khẩu mới TextFormFi eld Người dùng nhập mật khẩu mới
2 Nhập lại mật khẩu mới TextFormFi eld Người dùng nhập lại mật khẩu mới
3 Xác nhận cài lại mật khẩu Button Người dùng nhấn để cài lại mật khẩu
Bảng 10 Mô tả màn hình trang cài lại mật khẩu
Hình 32 Tìm kiếm truyện tranh
STT Tên Loại Ghi chú
1 Quay lại Button Quay lại màn hình trước
2 Tìm kiếm TextFormFi eld Nhập tên truyện cần tìm kiếm
3 Xóa Button Xóa tất cả những kí tự người dùng đã nhập để tìm truyện
4 Tổng số truyện tìm được Text Tổng truyện tìm được dựa theo dữ liệu người dùng nhập vào
5 Những truyện đã tìm được Card Tất cả những bộ truyện đã tìm được và thông tin của chúng
Bảng 11 Mô tả màn hình trang tìm kiếm truyện tranh
Hình 33 Màn hình chi tiết truyện
STT Tên Loại Ghi chú
1 Trở về Button Trở về trang trước
2 Tên truyện Text Tên của truyện
3 Home Button Quay lại trang chủ
4 Ảnh bìa truyện Image Ảnh bìa của truyện
5 Tên truyện Text Tên của truyện
6 Số lượt xem, lượt đánh giá, lượt theo dõi
Text Số lượng lượt xem, lượt đánh giá, lượt theo dõi của bộ truyện
7 Đánh giá RatingBar Đánh giá bộ truyện
8 Tên khác Text Các tên khác của truyện
9 Tác giả Text Các tác giả của truyện
10 Nghệ sĩ Text Các nghệ sĩ của bộ truyện
11 Người đănng Text Người đăng truyện lên ứng dụng
Chip Danh sách các thể loại của truyện, nhấn vào tên thể loại để xem những bộ truyện thuộc thể loại đó
13 Giới thiệu nội dung Text Giới thiệu nội dung của truyện
14 Đọc chương mới nhất Button Nhấn vào để đọc chương mới nhất
15 Theo dõi truyện Button Nhấn vào để theo dõi truyện
List Các chương của bộ truyện, thông tin của từng chương (tên chương, ngày đăng, lượt xem, đã khóa hay miễn phí),
17 Mở khóa chương Text Nhấn vào để mua truyện
Bảng 12 Mô tả màn hình chi tiết truyện tranh
Hình 34 Màn hình bình luận
STT Tên Loại Ghi chú
1 Quay lại Button Nhấn vào để quay lại trang chi tiết truyện
2 Avatar của tài khoản bình luận Image Hiển thị avatar của tài khoản bình luận
3 Nickname, email của tài khoản bình luận Text Hiển thị email hoặc nickname của tài khoản bình luận
4 Nội dung bình luận Text Nội dung cỉa bình luận
5 Thời điểm bình luận Text Thời điểm người dùng đăng bình luận
6 Like comment Button Like bình luận
7 Dislike comment Button Dislike bình luận
8 Reply Button Phản hồi bình luận
9 Bình luận phản hồi Card Bình luận phản hồi
Bảng 13 Mô tả màn hình bình luận
Hình 35 Màn hình thể loại
STT Tên Loại Ghi chú
1 Danh sách các thể loại Tab Hiển thị tên thể loại, nhấn vào tab để hiển thị các bộ truyện thuộc thể loại đó
2 Hiển thị tất cả thể loại Text Nhấn vào để hiển thị tất cả
Danh sách các bộ truyện của thể loại đang chọn
Hiển thị ảnh bìa, tên, số lượt xem, đánh giá của các bộ truyện trong thể loại đang chọn
Bảng 14 Mô tả màn hình thể loại
5.1.12 Màn hình đọc truyện
Hình 36 Màn hình đọc truyện
STT Tên Loại Ghi chú
1 Quay lại Button Khi nhấn vào sẽ quay lại trang chi tiết truyện
2 Tên chương Text Tên chương đang đọc
3 Quay lại trang home Button Nhấn vào để quay lại màn hình chính
4 Hình ảnh trong chương Image Danh sách hình ảnh của chương truyện
5 Chương trước Button Chuyển đến chương trước
6 Bình luận Button Hiển thị bình luận của chương truyện
7 Danh sách chương truyện Button Hiển thị danh sách các chương của bộ truyện đang đọc
8 Chương tiếp theo Button Nhấn vào đê đến chương tiếp theo
Bảng 15 Mô tả màn hình đọc truyện
Hình 37 Màn hình cá nhân
STT Tên Loại Ghi chú
1 Avatar Image Avatar của tài khoản
2 Số coin Button Số coin còn lại
3 Email Text Email của người dùng
4 Tên Text Tên của người dùng
5 Họ Text Họ của người dùng
6 Số điện thoại Text Số điện thoại của người dùng
7 Giới tính Text Giới tính của người dùng
8 Ngày sinh Text Ngày sinh của người dùng
9 Nickname Text Nicknamecủa người dùng
10 Nâng cấp tài khoản lên creator Button Nâng cấp tài khoản lên quyền creator
Bảng 16 Mô tả màn hình cá nhân
5.1.14 Màn hình thay đổi thông tin cá nhân
Hình 38 Màn hình thay đổi thông tin cá nhân
STT Tên Loại Ghi chú
3 Ngày sinh Datepicker Chọn ngày sinh
4 Giới tính Dropdownb utton Chọn giới tính
5 Xác nhận Button Xác nhận thay đổi thông tin cá nhân
6 Hủy Button Hủy thay đổi thông tin cá nhân
Bảng 17 Mô tả màn hình thay đổi thông tin cá nhân
5.1.15 Màn hình thêm số điện thoại người dùng
Hình 39 Màn hình thêm số điện thoại người dùng
STT Tên Loại Ghi chú
1 Chọn quốc gia DropdownB utton Chọn quốc gia
2 Nhập số điện thoại TextField Người dùng nhập số điện thoại
3 Xác nhận Button Xác nhận số điện thoại để nhận OTP
Bảng 18 Mô tả màn hình thêm số điện thoại người dùng
5.1.16 Màn hình xác thực OTP khi thêm số điện thoại
Hình 40 Màn hình xác thực OTP khi thêm số điện thoại
STT Tên Loại Ghi chú
1 Nhập mã OTP TextFormFi eld
Nhâp mã OTP đã được gửi đến số điện thoại
2 Xác nhận Button Nhấn để thêm số điện thoại
Bảng 19 Mô tả màn hình xác thực OTP để thêm số điện thoại
Hình 41 Màn hình thư viện
STT Tên Loại Ghi chú
1 Tab lịch sử đọc truyện Tab Tab hiển thị lịch sử đọc truyện
2 Bộ truyện vừa đọc Card Hình của truyện vừa đọc
Bảng 20 Mô tả màn hình tủ sách
5.1.18 Màn hình truyện theo dõi
Hình 42 Màn hình truyện theo dõi
STT Tên Loại Ghi chú
1 Tab lịch sử Tab Tab hiển thị lịch sử đọc truyện
2 Tab truyện đang theo dõi Tab Tab hiển thị những truyện đang theo dõi
3 Truyện đang theo dõi Card Bộ truyện đang theo dõi
Bảng 21 Mô tả màn hình truyện theo dõi
Hình 43 Màn hình thanh toán
STT Tên Loại Ghi chú
1 Mức nạp Card Mức nạp tiền và coin tương ứng
2 Thanh toán bằng PayPal Button Nạp tiền bằng PayPal
ZaloPay Button Nạp tiền bằng ZaloPay
Bảng 22 Mô tả màn hình thanh toán
5.1.20 Màn hình lịch sử thanh toán
Hình 44 Màn hình lịch sử thanh toán
STT Tên Loại Ghi chú
1 Số lượng coin Text Số lượng coin còn lại của người dùng
2 Mua coin Button Nhấn vào để đến màn hình mua coin
3 Tab lịch sử thanh toán Tab Nhấn để chuyển sang tab lịch sử thanh toán
4 Tab lịch sử mua truyện Tab Nhấn để chuyển sang tab lịch sử mua truyện
Card Thông tin về những lần thanh toán bao gồm tình trạng thanh toán, phương thức thanh toán, số lượng thanh toán, thời điểm thanh toán
Bảng 23 Mô tả màn hình lịch sử thanh toán
5.1.21 Màn hình lịch sử mua truyện
Hình 45 Màn hình lịch sử mua truyện
STT Tên Loại Ghi chú
1 Tab lịch sử mua truyện Tab Nhấn để chuyển sang tab lịch sử mua truyện
2 Tên truyện Text Tên truyện đã mua
3 Tên chương Text Tên chương đã mua
4 Số coin Text Số coin đã dùng để mua truyện
Bảng 24 Mô tả màn hình lịch sử mua truyện
Hình 46 Màn hình thông báo
STT Tên Loại Ghi chú
1 Thông báo đã nhận Card Danh sách những thông báo đã nhận
2 Tiêu đề thông báo Text Tiêu đề của thông báo
3 Nội dung thông báo Text Nội dung của thông báo
4 Thời điểm thông báo Text Thời điểm nhận thông báo
Bảng 25 Mô tả màn hình thông báo
Website Management
Hình 47 Màn hình đăng nhập
STT Tên Loại Ghi chú
1 Nhập Email đăng nhập Input text Nhập thông tin email đăng nhập
2 Nhập mật khẩu đăng nhập Password Nhập mật khẩu
3 Hiển thị mật khẩu Button Khi nhấn vào, để hiển thị mât khẩu và ngược lại
4 Lưu thông tin đăng nhập Checkbox Lưu thông tin đăng nhập vào browser
5 Đăng nhập Button Đăng nhập vào hệ thống
Bảng 26 Mô tả màn hình trang đăng nhập
5.2.2 Account Settings (role admin, team member, creator)
Hình 48 Màn hình Account Settings
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Thông tin của user đang đăng nhập
Thông tin của tài khoản mà user đang đăng nhập vào hệ thống
3, 8 Avatar Image Ảnh đại diện của Admin
4 Đổi avatar Link Khi nhấn vào modal change avatar sẽ hiển thị ra để user đổi avatar
Khi nhấn vào, thì form đổi thông tin tài khoản sẽ xuất hiện để user có thể thay đổi thông tin tài khoản của mình
Khi nhấn vào, thì form đổi mật khẩu của tài khoản sẽ xuất hiện để user có thể thay đổi mật khẩu tài khoản của mình
Bảng 27 Mô tả màn hình trang Account Settings
Hình 49 Màn hình Account Settings (Modal Change Avatar)
STT Tên Loại Ghi chú
1 Nút đóng modal Button Khi nhấn vào, thì modal đổi avatar sẽ đóng lại và reset dữ liệu trong modal
2 Upload ảnh từ thiết bị Button
Khi nhấn vào, hộp thoại chọn ảnh từ thiết bị sẽ xuất hiện và user sẽ chọn ảnh mình mong muốn
3 Cập nhật (lưu) avatar Button Khi nhấn vào, hệ thống sẽ cập nhật avatar cho tài khoản
4 Hủy bỏ thay đổi avatar Button Khi nhấn vào, thì modal đổi avatar sẽ đóng lại và reset dữ liệu trong modal
Bảng 28 Mô tả màn hình trang Account Settings (Modal Change Avatar)
Hình 50 Màn hình Account Settings (Modal Change Personal Info)
STT Tên Loại Ghi chú
1 Hiển thị / đóng form cập nhật thông tin tài khoản
Khi nhấn vào, thì form đổi thông tin tài khoản sẽ hiển thị để user cập nhật
2 Nhập First Name (tên) Input text Nhập tên
3 Nhập Last Name (họ) Input text Nhập họ
4 Nhập Phone Number (số điện thoại) Input text Nhập số điện thoại
(tháng/ngày/năm sinh) Date picker Nhập tháng/ngày/năm sinh
6 Nhập giới tính Select box Chọn giới tính
7 Cập nhật (lưu) thông tin của tài khoản Button Khi nhấn vào, hệ thống sẽ ghi nhận và cập nhật thông tin của tài khoản
8 Hủy bỏ thay đổi thông tin tài khoản Button
Khi nhấn vào, thì form thay đổi thông tin tài khoản sẽ đóng lại, đồng thời dữ liệu trong form sẽ quay về lúc trước cập nhật
Bảng 29 Mô tả màn hình trang Account Settings (Modal Change Personal Info)
Hình 51 Màn hình Account Settings (Modal Change Password)
STT Tên Loại Ghi chú
1 Hiển thị / đóng form đổi mật khẩu
Khi nhấn vào, thì form đổi thông tin tài khoản sẽ hiển thị để admin cập nhật
(mật khẩu hiện tại) Password Nhập mật khẩu hiển tại
(mật khẩu mới) Password Nhập mật khẩu mới
(xác nhận mật khẩu mới) Password Nhập xác nhận mật khẩu mới
5 Cập nhật (lưu) đổi mật khẩu Button
Khi nhấn vào, hệ thống sẽ xác nhận mật khẩu và nếu thành công thì hệ thống sẽ cập nhật lại mật khẩu mới cho tài khoản
6 Hủy bỏ thay đổi thông tin tài khoản Button
Khi nhấn vào, thì form thay đổi mật khẩu sẽ đóng lại, đồng thời dữ liệu trong form được cập nhật thành trống
Bảng 30 Mô tả màn hình trang Account Settings (Model Change Password)
Hình 52 Màn hình Dashboard (Phần 1)
Hình 53 Màn hình Dashboard (Phần 2)
Hình 54 Màn hình Dashboard (Phần 3)
Hình 55 Màn hình Dashboard (Phần 4)
STT Tên Loại Ghi chú
Hiển thị revenue, comics, chapters, readers, creator, genres, authors, artists, followed, viewed
Nút bấm để chuyển sang trái, phải để di chuyển slide card
Button Dùng để di chuyển sang trái, phải để xem được toàn bộ những card thông tin
Danh sách thống kê top những người dùng
COIN nhất theo [ngày, tháng, năm]
Hiển thị những người dùng (reader) sử dụng nhiều COIN nhất, sẽ có 3 option để xem là: theo ngày, theo tháng hoặc theo năm
Danh sách thống kê top những người dùng
COIN nhất theo [ngày, tháng, năm]
Hiển thị những người dùng (reader) đã nạp nhiều COIN nhất, sẽ có 3 option để xem là: theo ngày, theo tháng hoặc theo năm
12 Biểu đồ thống kê số người dùng mới / tháng Biểu đồ Thể hiện số lượng người dùng mới theo từng tháng
Năm mà biểu đồ thống kê người số dùng mới / tháng hiển thị
Nhấn vào để chọn năm Biểu đồ thống kê số người dùng mới / tháng dựa vào năm đó mà hiển thị dữ liệu tương ứng
14 Biểu đồ thể hiện độ tuổi người dùng Biểu đồ Thể hiện từng nhóm tuổi và số lượng người dùng tương ứng có trong hệ thống
15 Biểu đồ thống kê số truyện tranh mới / tháng Biểu đồ Thể hiện số truyện tranh mới được thêm vào hệ theo từng tháng
Năm mà biểu đồ thống kê số truyện tranh mới / tháng hiển thị
Nhấn vào để chọn năm Biểu đồ thống kê số truyện tranh mới / tháng dựa vào năm đó mà hiển thị dữ liệu tương ứng
17 Biểu đồ thể hiện độ giới tính người dùng Biểu đồ Thể hiện từng giới tính và số lượng người dùng tương ứng có trong hệ thống
Danh sách thống kê top những người sáng tạo nội dung (creator) đã có nhiều lượt view truyện
List Hiển thị những người sáng tạo nội dung
(creator) đã có nhiều lượt view
112 tranh của mình nhiều nhất
Danh sách thống kê top những người sáng tạo nội dung (creator) đã có nhiều lượt mua chương truyện của mình nhất theo [ngày, tháng, năm]
Những người sáng tạo nội dung (creator) có số lượt mua chương truyện cao nhất sẽ được hiển thị, với ba tùy chọn để xem: theo ngày, theo tháng hoặc theo năm.
Bảng 31 Mô tả màn hình trang Dashboard
Hình 56 Màn hình Dashboard (Phần 1)
Hình 57 Màn hình Dashboard (Phần 2)
Hình 58 Màn hình Dashboard (Phần 3)
1 Thanh slide card Hiển thị comics, chapters, genres, authors, artists
Danh sách thống kê top những người dùng
Hiển thị những người dùng (reader) sử dụng nhiều COIN nhất, sẽ có 3 option để xem là: theo ngày, theo tháng hoặc theo năm
Danh sách thống kê top những người dùng
COIN nhất theo [ngày, tháng, năm]
Hiển thị những người dùng (reader) đã nạp nhiều COIN nhất, sẽ có 3 option để xem là: theo ngày, theo tháng hoặc theo năm
9 Biểu đồ thống kê số người dùng mới / tháng Biểu đồ Thể hiện số lượng người dùng mới theo từng tháng
Năm mà biểu đồ thống kê người số dùng mới / tháng hiển thị
Nhấn vào để chọn năm Biểu đồ thống kê số người dùng mới / tháng dựa vào năm đó mà hiển thị dữ liệu tương ứng
11 Biểu đồ thống kê số truyện tranh mới / tháng Biểu đồ Thể hiện số truyện tranh mới được thêm vào hệ theo từng tháng
Năm mà biểu đồ thống kê số truyện tranh mới / tháng hiển thị
Nhấn vào để chọn năm Biểu đồ thống kê số truyện tranh mới / tháng dựa vào năm đó mà hiển thị dữ liệu tương ứng
Danh sách thống kê top những người sáng tạo nội dung (creator) đã có nhiều lượt view truyện tranh của mình nhiều nhất
List Hiển thị những người sáng tạo nội dung
(creator) đã có nhiều lượt view
Bảng 32 Mô tả màn hình trang Dashboard
Hình 59 Màn hình Dashboard (Phần 1)
Hình 60 Màn hình Dashboard (Phần 2)
STT Tên Loại Ghi chú
1 Thanh slide card Hiển thị comics, chapters, followed, viewed, revenue
2,3,4,5 Đồ thị tổng doanh cho cho user (creator) theo
Biểu đồ Hiển thị doanh thu theo ngày, tháng, năm
Danh sách thống kê top những bộ truyện có nhiều lượt view nhất của user (creator)
List Hiển thị những bộ truyện có nhiều view nhất của user đó (role creator)
Danh sách thống kê top những bộ truyện có nhiều lượt theo dõi nhất của user (creator)
Biểu đồ Hiển thị những bộ truyện có nhiều lượt theo dõi nhất của user đó (role creator)
Danh sách thống kê top những người dùng đã mua nhiều chương truyện nhất của user
Select Hiển thị những người dùng đã mua chiều truyện nhất của user (role creator)
9 Đồ thị hiển thị số lượng truyện tranh được tạo ra / tháng
Biểu đồ Thể hiện số truyện tranh mới được thêm vào hệ theo từng tháng
Bảng 33 Mô tả màn hình trang Dashboard
Hình 61 Màn hình quản lý truyện tranh
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên truyện tranh cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo mới truyện tranh Button Khi nhấn vào, hệ thống chuyển hướng đến trang thêm truyện tranh mới
4 Xóa tất cả truyện tranh được chọn trên page Button Khi nhấn vào, xóa toàn bộ những bộ truyện tranh được chọn trên page
5 Bảng danh sách truyện tranh Table Hiển thị truyện tranh theo page
6 Chọn tất cả các bộ truyện Checkbox
Khi nhấn vào, những bộ truyện tranh chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Sắp xếp truyện tranh theo tên truyện
Khi nhấn vào, truyện tranh sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay đổi
8 Chọn bộ truyện Checkbox Khi nhấn vào, bộ truyện tranh sẽ được chọn để thực hiện những thao tác kế tiếp
Thể hiện tên bộ truyện Khi nhấn vào, chuyển hướng đến trang quản lý chương truyện
10 Ngày khởi tạo Text Ngày thêm truyện tranh vào hệ thống
11 Lượt xem Text Thể hiện số lượng lượt xem bộ truyện
12 Đánh giá Text Thể hiện mức độ hài lòng của người đọc
118 truyện đối với bộ truyện
13 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động của bộ truyện
Khi nhấn vào, hệ thống chuyển hướng đến trang danh sách những comments của bộ truyện
15 Thông tin chi tiết truyện tranh Link Khi nhấn vào, hệ thống chuyển hướng đến trang chi tiết của bộ truyện
16 Chỉnh sửa thông tin truyện tranh Link Khi nhấn vào, hệ thống chuyển hướng đến trang chỉnh sửa thông tin bộ truyện
17 Xóa truyện tranh Link Khi nhấn vào, xuất hiện modal xóa truyện tranh
18 Số lượng truyện tranh hiển thị và được chọn Text Hiển thị số lượng truyện tranh được hiển thị và số truyện tranh được chọn
19 Phân trang Button Khi nhấn vào, truyện tranh sẽ được phân theo trang (page) để hiển thị
19 Khôi phục truyện tranh Link Khi nhấn vào, xuất hiện modal khôi phục truyện tranh
Bảng 34 Mô tả màn hình trang quản lý truyện tranh
Hình 62 Màn hình quản lý chương
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên chương truyện cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo mới chương truyện Button Khi nhấn vào, hệ thống chuyển hướng đến trang thêm chương truyện mới
Xóa tất cả các chương truyện được chọn trên page
Button Khi nhấn vào, xóa toàn bộ những chương truyện tranh được chọn trên page
5 Bảng danh sách chương truyện Table Hiển thị chương truyện theo page
6 Chọn tất cả các chương truyện Checkbox
Khi nhấn vào, những chương truyện chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Chọn chương truyện Checkbox Khi nhấn vào, chương truyện sẽ được
120 chọn để thực hiện những thao tác kế tiếp
8 Tên chương truyện Text Thể hiện tên chương truyện
9 Lượt xem Text Thể hiện số lượng lượt xem chương truyện
10 Ngày khởi tạo Text Ngày thêm chương truyện vào hệ thống
11 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động của bộ truyện
12 Thông tin chi tiết chương truyện Link Khi nhấn vào, hệ thống chuyển hướng đến trang chi tiết của chương truyện
13 Chỉnh sửa thông tin chương truyện Link
Khi nhấn vào, hệ thống chuyển hướng đến trang chỉnh sửa thông tin chương truyện
14 Xóa chương truyện Link Khi nhấn vào, xuất hiện modal xóa chương truyện
15 Số lượng truyện tranh hiển thị và được chọn Text Hiển thị số lượng chương truyện được hiển thị và số chương truyện được chọn
16 Phân trang Button Khi nhấn vào, chương truyện sẽ được phân theo trang (page) để hiển thị
Bảng 35 Mô tả màn hình trang quản lý chương truyện
Hình 63 Màn hình quản lý danh mục
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên danh mục cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo mới danh mục Button Khi nhấn vào, hệ thống chuyển hướng đến trang thêm danh mục mới
4 Xóa tất cả danh mục được chọn trên page Button Khi nhấn vào, xóa toàn bộ những danh mục được chọn trên page
5 Bảng danh sách danh mục Table Hiển thị danh mục theo page
6 Chọn tất cả các danh mục Checkbox
Khi nhấn vào, những danh mục chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Sắp xếp danh mục theo tên danh mục
Khi nhấn vào, danh mục sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn
122 vào sẽ sắp xếp từ Z – A, luân phiên thay đổi
8 Chọn danh mục Checkbox Khi nhấn vào, danh mục sẽ được chọn để thực hiện những thao tác kế tiếp
9 Tên danh mục Text Thể hiện tên của danh mục
10 SEO Alias Text Được sử dụng để SEO trên Google
11 Summary Text Giới thiệu về danh mục
12 Trạng thái Text Trạng thái hoạt động
13 Thông tin chi tiết danh mục Link Khi nhấn vào, xuất hiện modal thể hiện thông tin chi tiết danh mục
14 Chỉnh sửa thông tin danh mục Link Khi nhấn vào, modal chỉnh sửa thông tin danh mục xuất hiện để chỉnh sửa
15 Xóa danh mục Link Khi nhấn vào, xuất hiện modal xóa danh mục
16 Số lượng danh mục hiển thị và được chọn Text Hiển thị số lượng danh mục được hiển thị và số danh mục được chọn
17 Phân trang Button Khi nhấn vào, danh mục sẽ được phân theo trang (page) để hiển thị
Bảng 36 Mô tả màn hình trang quản lý danh mục
Hình 64 Màn hình quản lý artist
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên nghệ sĩ cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo mới nghệ sĩ Button Khi nhấn vào, hệ thống chuyển hướng đến trang thêm nghệ sĩ mới
4 Xóa tất cả nghệ sĩ được chọn trên page Button Khi nhấn vào, xóa toàn bộ những nghệ sĩ được chọn trên page
5 Bảng danh sách nghệ sĩ Table Hiển thị nghệ sĩ theo page
6 Chọn tất cả các nghệ sĩ Checkbox
Khi nhấn vào, những nghệ sĩ chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Sắp xếp nghệ sĩ theo tên nghệ sĩ
Khi nhấn vào, nghệ sĩ sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay
8 Chọn nghệ sĩ Checkbox Khi nhấn vào, nghệ sĩ sẽ được chọn để thực hiện những thao tác kế tiếp
9 Tên nghệ sĩ Text Thể hiện tên của nghệ sĩ
10 Alternative Text Tên khác của nghệ sĩ
11 SEO Alias Text Được sử dụng để SEO trên Google
12 Ngày tạo Text Hiển thị ngày tạo nghệ sĩ
13 Trạng thái Text Trạng thái hoạt động
14 Thông tin chi tiết danh mục Link Khi nhấn vào, xuất hiện modal thể hiện thông tin chi tiết danh mục
15 Chỉnh sửa thông tin danh mục Link Khi nhấn vào, modal chỉnh sửa thông tin danh mục xuất hiện để chỉnh sửa
16 Xóa danh mục Link Khi nhấn vào, xuất hiện modal xóa danh mục
17 Số lượng danh mục hiển thị và được chọn Text Hiển thị số lượng danh mục được hiển thị và số danh mục được chọn
18 Phân trang Button Khi nhấn vào, danh mục sẽ được phân theo trang (page) để hiển thị
Bảng 37 Mô tả màn hình trang quản lý artist
Hình 65 Màn hình quản lý tác giả
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên tác giả cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo mới tác giả Button Khi nhấn vào, hệ thống chuyển hướng đến trang thêm tác giả mới
4 Xóa tất cả tác giả được chọn trên page Button Khi nhấn vào, xóa toàn bộ những tác giả được chọn trên page
5 Bảng danh sách tác giả Table Hiển thị tác giả theo page
6 Chọn tất cả các tác giả Checkbox
Khi nhấn vào, những tác giả chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Sắp xếp tác giả theo tên tác giả
Khi nhấn vào, tác giả sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay
8 Chọn tác giả Checkbox Khi nhấn vào, tác giả sẽ được chọn để thực hiện những thao tác kế tiếp
9 Tên tác giả Text Thể hiện tên của tác giả
10 Tên khác Text Tên khác của tác giả
11 SEO Alias Text Được sử dụng để SEO trên Google
12 Ngày khởi tạo Text Thể hiện ngày tác giả được tạo
13 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động của tác giả
14 Chỉnh sửa thông tin tác giả Link Khi nhấn vào, modal chỉnh sửa thông tin tác giả xuất hiện để chỉnh sửa
15 Xóa tác giả Link Khi nhấn vào, xuất hiện modal xóa tác giả
16 Khôi phục tác giả Link Khi nhấn vào, xuất hiện modal khôi phục tác giả
17 Số lượng tác giả hiển thị và được chọn Text Hiển thị số lượng tác giả được hiển thị và số tác giả được chọn
18 Phân trang Button Khi nhấn vào, tác giả sẽ được phân theo trang (page) để hiển thị
Bảng 38 Mô tả màn hình trang quản lý tác giả
5.2.11 Quản lý Notification (thông báo cấp hệ thống)
Hình 66 Màn hình quản lý thông báo
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên tác giả cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo mới thông báo Button Khi nhấn vào, hệ thống hiển thị modal thêm mới thông báo
4 Xóa tất cả thông báo được chọn trên page Button Khi nhấn vào, xóa toàn bộ những thông báo được chọn trên page
5 Bảng danh sách thông báo Table Hiển thị tác giả theo page
6 Chọn tất cả các thông báo Checkbox
Khi nhấn vào, những thông báo chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Sắp xếp thông báo theo tiêu đề
Khi nhấn vào, thông báo sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn
128 vào sẽ sắp xếp từ Z – A, luân phiên thay đổi
8 Chọn thông báo Checkbox Khi nhấn vào, thông báo sẽ được chọn để thực hiện những thao tác kế tiếp
9 Tiêu đề Text Thể hiện tiêu đề của thông báo
10 Mesage Text Nội dung chi tiết của thông báo
11 Priority Text Thể hiện mức độ ưu tiên của thông báo
12 Ngày khởi tạo Text Thể hiện ngày thông báo được tạo
13 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động thông báo
14 Chỉnh sửa thông tin thông báo Link Khi nhấn vào, modal chỉnh sửa thông tin thông báo xuất hiện để chỉnh sửa
15 Xóa thông báo Link Khi nhấn vào, xuất hiện modal xóa thông báo
16 Khôi phục thông báo Link Khi nhấn vào, xuất hiện modal khôi phục thông báo
17 Số lượng thông báo hiển thị và được chọn Text Hiển thị số lượng thông báo được hiển thị và số thông báo được chọn
18 Phân trang Button Khi nhấn vào, thông báo sẽ được phân theo trang (page) để hiển thị
Bảng 39 Mô tả màn hình trang quản lý thông báo
Hình 67 Màn hình quản lý creator request
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập email user cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
Bảng danh sách người người dùng (role reader) muốn upgrade lên role creator
Table Hiển thị yêu cầu upgrade role theo page
4 Chọn tất cả các yêu cầu upgrade role Checkbox
Khi nhấn vào, những yêu cầu upgrade role chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
5 Sắp xếp upgrade role theo email
Khi nhấn vào, yêu cầu upgrade role sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay đổi
6 Chọn yêu cầu upgrade role Checkbox
Khi nhấn vào, yêu cầu upgrade role sẽ được chọn để thực hiện những thao tác kế tiếp
7 Email Text Thể hiện email của người dùng muốn upgrade role
8 Phone Number Text Thể hiện số điện thoại của người dùng
9 Status Text Thể hiện tình trạng của yêu cầu upgrade role (sent, discustion, approved, reject)
10 Ngày khởi tạo Text Thể hiện yêu cầu upgrade role được tạo
11 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động của yêu cầu upgrade role
12 Approve yêu cầu upgrade role Link Khi nhấn vào, modal approved yêu cầu upgrade role xuất hiện
Trao đổi với người dùng (role reader) để xác nhận thông tin để approved hoặc reject yêu cầu upgrade role
13 Reject yêu cầu upgrade role Link Khi nhấn vào, xuất hiện modal reject yêu cầu upgrade role
14 Số lượng thông báo hiển thị và được chọn Text Hiển thị số lượng thông báo được hiển thị và số thông báo được chọn
15 Thông tin upgrade role Link Khi nhấn vào, modal thông tin yêu cầu upgrade role xuất hiện
Số lượng yêu cầu upgrade role hiển thị và được chọn
Text Hiển thị số lượng yêu cầu upgrade role được hiển thị và số thông báo được chọn
17 Phân trang Button Khi nhấn vào, yêu cầu upgrade role sẽ
131 được phân theo trang (page) để hiển thị
Bảng 40 Mô tả màn hình trang quản lý creator request
Hình 68 Màn hình quản lý service config
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên service cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Bảng danh những service để config Table Hiển thị serive config
4 Sắp xếp service theo tên
Khi nhấn vào, service config name sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay đổi
5 Service Config Name Text Tên service
6 Service Config Value Text Giá trị của service
7 Description Text Mô tả chi tiết của service
8 Note Text Hiển thị note
9 Chỉnh sửa service config Link Khi nhấn vào, modal chỉnh sửa service config hiển thị lên
10 Thông tin chi tiết của service Link Thông tin chi tiết của service config
11 Số lượng service config hiển thị Text Hiển thị số lượng service config
12 Phân trang Button Khi nhấn vào, service config sẽ được phân theo trang (page) để hiển thị
Bảng 41 Mô tả màn hình trang quản lý service config
Hình 69 Màn hình quản lý config prices
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập tên service price cần tìm, và hệ
133 thống sẽ trả ra kết quả mong muốn
3 Bảng danh sách những service price để config Table Hiển thị serive price config
4 Sắp xếp service pricee theo tên
Khi nhấn vào, service config price name sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z –
5 Service Config Name Text Tên service
6 Price Text Giá trị của service
7 Description Text Mô tả chi tiết của service
8 Chỉnh sửa service config Link Khi nhấn vào, modal chỉnh sửa service config hiển thị lên
9 Thông tin chi tiết của service Link Thông tin chi tiết của service config
10 Số lượng service config hiển thị Text Hiển thị số lượng service config
11 Phân trang Button Khi nhấn vào, service config sẽ được phân theo trang (page) để hiển thị
Bảng 42 Mô tả màn hình trang quản lý config prices
Hình 70 Màn hình quản lý roles
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập role cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo role mới Link Khi nhấn vào, modal tạo role xuất hiện để tạo role mới
4 Xóa tất cả roles được chọn trên page Button Khi nhấn vào, xóa toàn bộ những role được chọn trên page
5 Bảng danh các roles Table Hiển thị các role có trong hệ thống
6 Chọn tất cả các role Checkbox
Khi nhấn vào, những role chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Sắp xếp role theo tên
Khi nhấn vào, tên role sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay
8 Chọn role Checkbox Khi nhấn vào, role sẽ được chọn để thực hiện những thao tác kế tiếp
9 Role name Text Tên role
10 Description Text Mô tả role
11 Priority Text Thể hiện độ ưu tiên của role (none, low, medium, high)
12 Ngày khởi tạo Text Thể hiện ngày role được tạo
13 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động của role
14 Thông tin role Link Khi nhấn vào, modal thông tin chi tiết của role xuất hiện
15 Chỉnh sửa role Link Khi nhấn vào, modal chỉnh sửa thông tin của role xuất hiện
16 Xóa role Link Khi nhấn vào, xuất hiện modal xóa role
17 Số lượng role hiển thị và được chọn Text Hiển thị số lượng role được hiển thị và số role được chọn
18 Phân trang Button Khi nhấn vào, role sẽ được phân theo trang (page) để hiển thị
Bảng 43 Mô tả màn hình trang quản lý roles
5.2.16 Quản lý account (user accounts, role admin & team member)
Hình 71 Màn hình quản lý user accounts
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập email người dùng cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Xóa tất cả người dùng được chọn trên page Button Khi nhấn vào, xóa toàn bộ những người dùng được chọn trên page
4 Bảng danh sách người dùng Table Hiển thị người dùng theo page
5 Chọn tất cả các người dùng Checkbox
Khi nhấn vào, những người dùng chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
6 Sắp xếp người dùng theo email
Khi nhấn vào, email người dùng sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay đổi
7 Chọn người dùng Checkbox Khi nhấn vào, người dùng sẽ được chọn để thực hiện những thao tác kế tiếp
8 Email người dùng Text Thể hiện Email của người dùng
9 Phone Number Text Số điện thoại của người dùng
10 First Name Text Tên của người dùng
11 Last Name Text Họ của người dùng
12 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động của người dùng
13 Lịch sử nạp tiền vào account Link Khi nhấn vào, hệ thống chuyển hướng đến trang lịch sử nạp tiền của người dùng
14 Lịch sử dùng tiền của người dùng Link
Khi nhấn vào, hệ thống chuyển hướng đến trang lịch sử sử dụng tiền (COIN) trong hệ thống
Lịch sử comment, review truyện của người dùng
Khi nhấn vào, hệ thống chuyển hướng đến trang chứa đầy đủ lịch sử comment, review truyện tranh
16 Thông tin chi tiết của người dùng Link Khi nhấn vào, modal thông tin chi tiết của người dùng xuất hiện
17 Khóa người dùng Link Khi nhấn vào, modal khóa người dùng xuất hiện
18 Xóa người dùng Link Khi nhấn vào, modal xóa người dùng xuất hiện
19 Mở khóa người dùng Link Khi nhấn vào, modal mở khóa người dùng xuất hiện
20 Khôi phục người dùng Link Khi nhấn vào, modal khôi phục người
21 Số lượng người dùng hiển thị và được chọn Text Hiển thị số lượng người dùng được hiển thị và số người dùng được chọn
22 Phân trang Button Khi nhấn vào, người dùng sẽ được phân theo trang (page) để hiển thị
Bảng 44 Mô tả màn hình quản lý user accounts
5.2.17 Quản lý account (admin accounts, role admin)
Hình 72 Màn hình quản lý admin accounts
STT Tên Loại Ghi chú
1 Thanh điều hướng Navigation bar
2 Tìm kiếm Input text Nhập email cần tìm, và hệ thống sẽ trả ra kết quả mong muốn
3 Tạo mới admin hoặc team member Link Khi nhấn vào, modal tạo admin và team member hiển thị lên để tạo account
Xóa tất cả admin và team member được chọn trên page
Button Khi nhấn vào, xóa toàn bộ những admin và team member được chọn trên page
5 Bảng danh sách admin và team member Table Hiển thị admin và team member theo page
6 Chọn tất cả các admin và team member Checkbox
Khi nhấn vào, những admin và team member chưa xóa trên page sẽ được chọn để thực hiện những thao tác tiếp theo
7 Sắp xếp admin và team member theo email
Khi nhấn vào, email sẽ được sắp xếp theo bảng chữ cái từ A – Z, tiếp tục nhấn vào sẽ sắp xếp từ Z – A, luân phiên thay đổi
8 Chọn admin hoặc team member Checkbox
Khi nhấn vào, admin và team member sẽ được chọn để thực hiện những thao tác kế tiếp
9 Email Text Thể hiện Email
10 Email Confirmed Text Thể hiện Email đã được confirm chưa
11 Trạng thái Text Thể hiện trạng thái còn hoạt động hay hết hoạt động
12 Roles Text Thể hiện những role của account
13 Thông tin chi tiết của account Link Khi nhấn vào, modal thông tin chi tiết của account xuất hiện
14 Khóa account của admin và team member Link Khi nhấn vào, modal khóa account xuất hiện
15 Xóa team member Link Khi nhấn vào, modal xóa account xuất hiện
Số lượng admin và team member hiển thị và được chọn
Hiển thị số lượng admin và team member được hiển thị và số người dùng được chọn
17 Phân trang Button Khi nhấn vào, người dùng sẽ được phân theo trang (page) để hiển thị
Bảng 45 Mô tả màn hình quản lý admin accounts
CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG
Kiểm thử ứng dụng
1 Tính cấp thiết của đề tài
2 Mục đích của đề tài
3 Cách tiếp cận và phương pháp nghiên cứu
4 Phân tích những công trình có liên quan
5 Kết quả dự kiến đạt được
Chương 1 Cơ sở lý thuyết
Chương 2 Khảo sát, phân tích, thiết kế
Chương 3 Mô hình hóa yêu cầu
Chương 4 Thiết kế phần mềm
Chương 5 Thiết kế giao diện xử lý
Chương 6 Cài đặt và kiểm thử ứng dụng
NHỮNG KẾT QUẢ ĐẠT ĐƯỢC
CÔNG VIỆC CÔNG VIỆC NGƯỜI
Tìm hiểu Flutter (UI Framwork), BloC pattern
Tìm hiểu ASP.NET Core (JWT, Entity Framework, Identity, Fluent API), ASP.NET MVC
Phân tích hiện trạng nhu cầu đọc truyện trên mobile
Xác định yêu cầu, chức năng, use- case…
01/03/2023 Thiết kế giao diện management và client
Xây dựng API cho người dùng và phần quản lý
Xây dựn ứng dụng android
Xây dựng giao diện trang chủ 07/03/2023
Xây dựng giao diện tìm kiếm truyện 13/03/2023
16/03/2023 Xây dựng giao diện đăng ký, đăng nhập
17/03/2023 25/03/2023 Xây dựng giao diện thông tin người dùng
26/03/2023 30/03/2023 Xây dựng giao diện xem lịch sử đọc truyện
01/04/2023 05/04/2023 Xây dựng giao diện chi tiết bộ truyện 06/04/2023
Xây dựng giao diện đọc truyện 13/04/2023
18/04/2023 Xây dụng giao diện truyện đang theo dõi.
Xây dựng giao diện bình luận 24/04/2023
Xây dựng giao diện thanh toán 05/05/2023
Xây dựng giao diện lịch sử thanh toán 10/05/2023
Xây dụng giao diện thông báo 16/05/2023
19/05/2023 Xây dựng controller xử lý việc đăng nhập, đăng ký
20/05/2023 24/05/2023 Xây dựng controller xử lý việc tìm truyện, chi tiết truyện, đọc truyện
25/05/2023 31/05/2023 Xây dựng controller xử lý việc thay đổi thông tin cá nhân, xem lịch sử đọc truyện, truyện đang theo dõi
Xây dựng controller xử lí bình luận 10/06/2023
Xây dựng controller xử lý thanh toán 16/06/2023
21/06/2023 Xây dựng controller xử lí lịch sử thanh toán
Xây dựng controller xử lý thông báo 25/06/2023
30/06/2023 Test và fix bug phía người dùng
Testing và fix bug còn tồn tại phía người dùng
Xây dựng website phía quản lý
Xây dựng giao diện Đăng nhập cho trang quản lý
15/05/2023 17/05/2023 Xây dựng giao diện quản lý comics, chapters, genres, authors, artists, roles, service config, service price
Xây dựng giao diện quản lý các tài khoản người dùng và assign role, theo dõi lịch sử sử dụng
Xây dựng các controller cho việc quản lý comics, chapters, genres, authors, artists, roles, service config, service price
Xây dựng controller xử lý các thao tác đối với tài khoản người dùng
21/06/2023 30/06/2023 Test và fix bug phía quản lý
Testing và fix bug còn tồn tại phía quản lý
Deployment Triển khai API và Web Management lên hosting và cloud
06/07/2023 07/07/2023 Ý kiến của giáo viên hướng dẫn Người viết đề cương
LỜI CẢM ƠN 4 ĐỀ CƯƠNG KHÓA LUẬN TỐT NGHIỆP 5
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI 23
CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 24
1.2.3 So sánh Flutter và các đối thủ 26
1.4.1 ASP.NET Core là gì 28
1.4.3 Một số cải tiến nổi bật của ASP.NET Core 29
CHƯƠNG 2: KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ 30
2.2 Khảo sát một số phần mềm 31
2.3 Phân tích yêu cầu của dự án 39
2.4 Danh sách yêu cầu chức năng nghiệp vụ 41
2.5 Danh sách yêu cầu chức năng hệ thống 41
2.6 Danh sách yêu cầu phi chức năng 41
CHƯƠNG 3 MÔ HÌNH HÓA YÊU CẦU 42
3.1.1 Đăng nhập bằng email và mật khẩu 43
3.1.2 Đăng nhập bằng tài khoản Google 43
3.1.3 Đăng nhập bằng tài khoản Facebook 44
3.1.5 Thêm số điện thoại vào tài khoản 47
3.1.6 Xóa số điện thoại khỏi tài khoản 48
3.1.9 Đổi thông tin cá nhân 51
3.1.12 Chuyển sang chương tiếp theo 53
3.1.14 Xem những truyện đang theo dõi 54
3.1.17 Xem lịch sử nạp của tài khản 56
3.1.18 Xem lịch sử mua truyện 57
CHƯƠNG 4 THIẾT KẾ PHẦN MỀM 60
4.1 Lược đồ Cơ sở dữ liệu 60
CHƯƠNG 5 THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ 61
5.1.4 Màn hình xác thực OTP khi tạo tài khoản bằng email 67
5.1.5 Màn hình quên mật khẩu 69
5.1.6 Màn hình xác thực OTP khi đổi mật khẩu 71
5.1.7 Màn hình đổi mật khẩu 73
5.1.14 Màn hình thay đổi thông tin cá nhân 87
5.1.15 Màn hình thêm số điện thoại người dùng 89
5.1.16 Màn hình xác thực OTP khi thêm số điện thoại 91
5.1.18 Màn hình truyện theo dõi 95
5.1.20 Màn hình lịch sử thanh toán 99
5.1.21 Màn hình lịch sử mua truyện 101
5.2.2 Account Settings (role admin, team member, creator) 105
5.2.11 Quản lý Notification (thông báo cấp hệ thống) 127
5.2.16 Quản lý account (user accounts, role admin & team member) 136
5.2.17 Quản lý account (admin accounts, role admin) 138
CHƯƠNG 6 CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG 141
6.2.1 Các chức năng quản lý tài khoản 147
6.2.2 Các chức năng quản lý truyện tranh, chương truyện 148
6.2.3 Các chức năng quản lý danh mục, tác giả 149
1 NHỮNG KẾT QUẢ ĐẠT ĐƯỢC 151
2 ƯU ĐIỂM VÀ NHƯỢC ĐIỂM 152
Hình 1 Logo của ngôn ngữ lập trình Dart 24
Hình 3 Cách biên dịch thành Native App [3] 25
CHƯƠNG 2 Hình 6 Màn hình trang chủ của MangaToon 31
Hình 7 Màn hình tìm kiếm của MangaToon 31
Hình 8 Màn hình tài khoản của MangaToon 32
Hình 9 Màn hình đăng nhập của MangaToon 32
Hình 10 Màn hình thông tin cá nhân của MangaToon 33
Hình 11 Màn hình chi tiết truyện của MangaToon 33
Hình 12 Màn hình đọc truyện của MangaToon 34
Hình 13 Màn hình kênh của MangaToon 34
Hình 14 Màn hình tủ sách của MangaToon 35
Hình 15 Màn hình chinh của Bilibili Comics 36
Hình 16 Màn hình chi tiết truyện của Bilibili Comics 36
Hình 17 Màn hình đọc truyện của Bilibili Comics 37
Hình 18 Màn hình tủ sách của Bilibili Comics 37
Hình 19 Màn hình cá nhân của Bilibili Comics 38
Hình 20 Màn hình thông tin cá nhân của Bilibili Comics 38
Hình 21 Màn hình thể loại của Bilibili Comics 39
Hình 22 Màn hình chinh của Bilibili Comics 39
CHƯƠNG 3 Hình 23 Lược đồ Usecase 42
CHƯƠNG 4 Hình 24 Lược đồ cơ sở dữ liệu 60
Hình 25 Màn hình trang chủ 61
Hình 26 Màn hình trang đăng nhập 63
Hình 27 Màn hình trang đăng ký 65
Hình 28 Màn hình xác thực OTP khi tạo tài khoản bằng email 67
Hình 29 Màn hình quên mật khẩu 69
Hình 30 Màn hình xác thực OTP khi đổi mật khẩu 71
Hình 31 Màn hình đổi mật khẩu 73
Hình 32 Tìm kiếm truyện tranh 75
Hình 33 Màn hình chi tiết truyện 77
Hình 34 Màn hình bình luận 79
Hình 35 Màn hình thể loại 81
Hình 36 Màn hình đọc truyện 83
Hình 37 Màn hình cá nhân 85
Hình 38 Màn hình thay đổi thông tin cá nhân 87
Hình 39 Màn hình thêm số điện thoại người dùng 89
Hình 40 Màn hình xác thực OTP khi thêm số điện thoại 91
Hình 41 Màn hình thư viện 93
Hình 42 Màn hình truyện theo dõi 95
Hình 43 Màn hình thanh toán 97
Hình 44 Màn hình lịch sử thanh toán 99
Hình 45 Màn hình lịch sử mua truyện 101
Hình 46 Màn hình thông báo 103
Hình 47 Màn hình đăng nhập 104
Hình 48 Màn hình Account Settings 105
Hình 49 Màn hình Account Settings (Modal Change Avatar) 106
Hình 50 Màn hình Account Settings (Modal Change Personal Info) 107
Hình 51 Màn hình Account Settings (Modal Change Password) 108
Hình 52 Màn hình Dashboard (Phần 1) 109
Hình 53 Màn hình Dashboard (Phần 2) 109
Hình 54 Màn hình Dashboard (Phần 3) 110
Hình 55 Màn hình Dashboard (Phần 4) 110
Hình 56 Màn hình Dashboard (Phần 1) 112
Hình 57 Màn hình Dashboard (Phần 2) 113
Hình 58 Màn hình Dashboard (Phần 3) 113
Hình 59 Màn hình Dashboard (Phần 1) 115
Hình 60 Màn hình Dashboard (Phần 2) 115
Hình 61 Màn hình quản lý truyện tranh 116
Hình 62 Màn hình quản lý chương 119
Hình 63 Màn hình quản lý danh mục 121
Hình 64 Màn hình quản lý artist 123
Hình 65 Màn hình quản lý tác giả 125
Hình 66 Màn hình quản lý thông báo 127
Hình 67 Màn hình quản lý creator request 129
Hình 68 Màn hình quản lý service config 131
Hình 69 Màn hình quản lý config prices 132
Hình 70 Màn hình quản lý roles 134
Hình 71 Màn hình quản lý user accounts 136
Hình 72 Màn hình quản lý admin accounts 138
CHƯƠNG 6 Hình 73 Cài đặt backend 141
Hình 75 Màn hình trang tải Flutter cho Windows 143
Hình 76 Tạo biến môi trường 144
Hình 77 Cài trình biên dịch Visual Studio Code 144
Hình 78 Cài các extension cho Flutter 145
Hình 80 Chạy lệnh “adb reverse tcp:7068 tcp:7068” 146
Hình 81 Chạy ứng dụng HikiComic 147
Bảng 1 So sánh giữa Flutter và React Native Error! Bookmark not defined
Bảng 2 Chức năng và hạn chế của MangaToon 35
Bảng 3 Chức năng và hạn chế của Bilibili Comics 39
CHƯƠNG 5 Bảng 4 Mô tả màn hình trang chủ 62
Bảng 5 Mô tả màn hình trang đăng nhập 64
Bảng 6 Mô tả màn hình trang đăng ký 66
Bảng 7 Mô tả màn hình xác nhận OTP 68
Bảng 8 Mô tả màn hình quên mật khẩu 70
Bảng 9 Mô tả màn hình xác thực OTP để cài lại mật khẩu 72
Bảng 10 Mô tả màn hình trang cài lại mật khẩu 74
Bảng 11 Mô tả màn hình trang tìm kiếm truyện tranh 76
Bảng 12 Mô tả màn hình chi tiết truyện tranh 78
Bảng 13 Mô tả màn hình bình luận 80
Bảng 14 Mô tả màn hình thể loại 82
Bảng 15 Mô tả màn hình đọc truyện 84
Bảng 16 Mô tả màn hình cá nhân 86
Bảng 17 Mô tả màn hình thay đổi thông tin cá nhân 88
Bảng 18 Mô tả màn hình thêm số điện thoại người dùng 90
Bảng 19 Mô tả màn hình xác thực OTP để thêm số điện thoại 92
Bảng 20 Mô tả màn hình tủ sách 94
Bảng 21 Mô tả màn hình truyện theo dõi 96
Bảng 22 Mô tả màn hình thanh toán 98
Bảng 23 Mô tả màn hình lịch sử thanh toán 100
Bảng 24 Mô tả màn hình lịch sử mua truyện 102
Bảng 25 Mô tả màn hình thông báo 104
Bảng 26 Mô tả màn hình trang đăng nhập 105
Bảng 27 Mô tả màn hình trang Account Settings 106
This article provides a comprehensive overview of various account settings and management screens, including the Modal Change Avatar, Modal Change Personal Info, and Model Change Password Additionally, it details the Dashboard interface and various management screens for comic administration, chapter management, category oversight, artist and author management, notification handling, creator requests, service configuration, pricing configuration, role management, user accounts, and admin accounts Each section is meticulously described to enhance user understanding and navigation within the platform.
Bảng 46 trình bày kết quả kiểm thử các chức năng quản lý tài khoản, trong khi Bảng 47 tập trung vào kiểm thử các chức năng quản lý truyện tranh và chương truyện Cuối cùng, Bảng 48 giới thiệu kiểm thử các chức năng quản lý danh mục và tác giả.
1 TÍNH CẤP THIẾT CỦA ĐỀ TÀI
Xã hội ngày càng phát triển, kéo theo nhu cầu giải trí của con người ngày càng tăng cao Khoảng 20 năm trước, khi internet chưa phổ biến, nhu cầu này được đáp ứng chủ yếu qua sách, báo và truyện tranh Tuy nhiên, với sự phát triển của công nghệ hiện đại, truyện tranh trực tuyến đã trở nên phổ biến hơn bao giờ hết, chiếm lĩnh các bảng xếp hạng tìm kiếm trên Google Nhiều quốc gia có nền kinh tế phát triển, như Nhật Bản và Hàn Quốc, đã dựa vào ngành công nghiệp truyện tranh Nhận thấy xu hướng này, chúng tôi quyết định thực hiện dự án “Xây dựng ứng dụng đọc truyện tranh trên Android”.
● Xây dựng website cho quản trị viên để quản lý truyện tranh và người dùng
● Xây dựng app cho người dùng để có thể đọc truyện tranh và theo dõi thông tin trên đó
● Vận dụng thành công các công nghệ mới, ngôn ngữ lập trình hiện đại vào đề tài để xây dựng website và app
Tìm hiểu các kiến thức cần thiết để thực hiện đề tài:
● Các kỹ thuật phân tích thiết kế hệ thống
● Tìm hiểu những công nghệ mới phù hợp với đề tài
● Tìm hiểu các thư viện hỗ trợ cho đề tài ở Flutter và NET
PHẦN NỘI DUNG CHƯƠNG 1 CƠ SỞ LÝ THUYẾT 1.1 Dart
Hình 1 Logo của ngôn ngữ lập trình Dart
Dart là ngôn ngữ lập trình mã nguồn mở miễn phí do Google phát triển, nhằm cung cấp một công cụ hiệu quả cho việc phát triển ứng dụng đa nền tảng Ngôn ngữ này nổi bật với khả năng thực thi linh hoạt trên nhiều nền tảng khác nhau.
Dart là một ngôn ngữ lập trình hướng đối tượng, được sử dụng để phát triển các ứng dụng web, server, ứng dụng máy tính và thiết bị di động Nó là nền tảng cho Flutter, cung cấp một ngôn ngữ mạnh mẽ cho việc xây dựng ứng dụng Flutter, đồng thời hỗ trợ định dạng, phân tích và kiểm thử câu lệnh.
Dart là ngôn ngữ lập trình lý tưởng để phát triển ứng dụng chất lượng cao cho nhiều nền tảng khác nhau như iOS, Android và web Với Dart, bạn có thể tạo ra những trải nghiệm đẹp mắt và chất lượng trên mọi loại màn hình.
● Một ngôn ngữ được tối ưu hóa cho client
● Cú pháp dễ làm quen, rõ ràng, súc tích, sớm xác định được các lỗi
● Tối ưu hóa việc biên dịch trước thời hạn để có được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web
Dart biên dịch mã thành ARM và x86, cho phép các ứng dụng di động chạy mượt mà trên iOS, Android và nhiều nền tảng khác Đối với ứng dụng web, Dart chuyển đổi mã sang JavaScript để đảm bảo tính tương thích.
Hình 2 Logo Flutter framework [2]
Là một công cụ cho phép chúng ta xây dựng một native cross-platform (iOS,
Android) apps với duy nhất một ngôn ngữ lập trình (Dart) và một mã nguồn gốc Bao gồm:
● SDK: Công cụ để biên dịch các dòng lệnh thành native machine code giúp lập trình đơn giản hơn
● Framework/ Widget Library: Cung cấp các UI building blocks có thể tái sử dụng (Widgets), các hàm tiện ích (utility function), và các packages
Sau đây là hình minh họa cho cách Flutter/Dart biên dịch thành Native App:
Hình 3 Cách biên dịch thành Native App [3]
Ta có thể thấy chỉ với một codebase nhờ vào Flutter SDK sẽ giúp chúng ta có thể build thành các Native App trên nhiều nền tảng khác nhau
Flutter render giao diện người dùng bằng cách kiểm soát từng pixel trên màn hình thiết bị mà không phụ thuộc vào các thành phần UI cụ thể của iOS hay Android Điều này mang lại khả năng tùy biến cao, giúp người phát triển không bị giới hạn bởi nền tảng thiết bị.
1.2.3 So sánh Flutter và các đối thủ
Khi so sánh các framework phát triển ứng dụng di động, Flutter và React Native thường được đặt lên bàn cân Dưới đây là một số điểm khác biệt giữa hai framework này.
Bảng 1 So sánh giữa Flutter và React Native
Dart + Flutter Java Script/React.js
Biên dịch thành các Native App Biên dịch một phần thành Native
App vẫn còn một phần trong App được chạy dưới dạng JavaScript
Xây dựng các thành phần UI
Không biên dịch code thành các UIComponent của riêng Android hay iOS mà Flutter kiểm soát từng pixel trên màn hình
Biên dịch code thành các UIComponent của riêng Android hay iOS
Nền tảng ứng dụng Ứng dụng di động, web, desktop Hầu như là ứng dụng di động (Có thể có React Native Web)
Nhà phát triển Google Facebook
Sau đây là các ưu điểm của Flutter:
● Phát triển ứng dụng nhanh chóng nhờ có hot reload
● Giao diện người dùng đẹp và thu hút và không bị giới hạn bởi nền tảng thiết bị
● Hiệu suất cao nhờ vào việc biên dịch ra các native app dựa trên nhiều nền tảng
Bloc is a state management library for Flutter applications, standing for Business Logic Component It processes 'Events' as input and produces 'States' as output Built on RxDart, Bloc provides a reactive programming approach to managing application state effectively.
• Dễ hiểu và dễ sử dụng
• Dễ dàng khi mở rộng ứng dụng
• Dễ dàng tái sử dụng code
• Việc tổ chức cấu trúc project sẽ cực kỳ clear, phần code logic được tách hẳn hoàn toàn so với UI
Mô hình BloC bổ sung các lớp trừu tượng và phức tạp vào kiến trúc ứng dụng, điều này có thể khiến mã nguồn trở nên khó hiểu, đặc biệt đối với người mới bắt đầu hoặc các nhà phát triển chưa quen thuộc với Flutter.
Mô hình BloC thường đòi hỏi việc viết thêm mã để thiết lập các stream, sink và xử lý sự kiện, điều này có thể tạo ra một lượng mã mẫu đáng kể Kết quả là tốn thời gian và có khả năng gia tăng nguy cơ xảy ra lỗi trong quá trình phát triển.
Mô hình BLoC có thể làm giảm hiệu suất ứng dụng nếu không được triển khai hiệu quả, do việc đăng ký stream và xử lý sự kiện liên tục tiêu thụ tài nguyên hệ thống Tuy nhiên, bằng cách áp dụng các kỹ thuật tối ưu hóa phù hợp, chúng ta có thể giảm thiểu tác động này và cải thiện hiệu suất tổng thể của ứng dụng.
1.4.1 ASP.NET Core là gì
Hình 5 ASP NET Core [5]
ASP.NET Core là một framework mã nguồn mở đa nền tảng, lý tưởng cho việc phát triển ứng dụng hiện đại như web apps, IoT và backend cho di động Ứng dụng ASP.NET Core có thể hoạt động trên NET Core hoặc phiên bản đầy đủ của NET Framework Framework này được thiết kế nhằm tối ưu hóa quá trình phát triển cho các ứng dụng triển khai trên đám mây hoặc chạy tại chỗ.
ASP.NET Core được thiết kế với các thành phần theo hướng module, giúp tối thiểu hóa tài nguyên và chi phí phát triển, đồng thời duy trì sự linh hoạt trong việc xây dựng giải pháp Nó cho phép phát triển và chạy các ứng dụng đa nền tảng trên Windows, Mac và Linux, và đã trở thành mã nguồn mở, đánh dấu một bước tiến lớn trong lịch sử phát triển của ASP.NET Core Sự chuyển mình này phản ánh xu hướng hiện đại của các ngôn ngữ lập trình ngày nay.
▪ ASP.NET Core được thay đổi một số kiến trúc nên dẫn đến Modular Framework nhỏ hơn
▪ ASP.NET Core không còn phụ thuộc vào nền tảng system.web.dll, Framework này dựa trên một tập hợp nhiều yếu tố của Nuget Packages
▪ Bạn có thể tối ưu ứng dụng của mình dễ dàng thông qua những Nuget Packages cần thiết
ƯU ĐIỂM VÀ NHƯỢC ĐIỂM
● Hệ thống FE được viết trong một source code nhờ có sự hổ trợ của Flutter khiến cho việc cài đặt cũng dễ dàng hơn
Flutter, mặc dù là một công nghệ mới nổi, vẫn còn nhiều tính năng chưa được tối ưu hóa, và các package cũng như thư viện hiện tại vẫn còn hạn chế và chưa phổ biến rộng rãi.
● Vẫn còn chưa đầy đủ các tính năng để tăng trải nghiệm của người dùng.
THUẬN LỢI
● Dễ dàng tiếp cận và phát triển phần mềm do đã có kinh nghiệm lập trình ASP .NET Core và SQL Server.
KHÓ KHĂN
Flutter là một công nghệ mới, do đó, việc tìm kiếm giải pháp và lời giải cho các vấn đề phát sinh trong quá trình phát triển phần mềm không gặp nhiều khó khăn cho nhóm.
Nhóm còn thiếu sót về kinh nghiệm và kỹ năng, dẫn đến cách thức làm việc hạn chế Điều này gây ra không ít khó khăn trong việc giải quyết các vấn đề phát sinh trong quá trình thực hiện đề tài.