1. Trang chủ
  2. » Luận Văn - Báo Cáo

Xây dựng ứng dụng đọc truyện tranh trên android

154 9 0

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề Xây Dựng Ứng Dụng Đọc Truyện Tranh Trên Android
Người hướng dẫn ThS. Nguyễn Hữu Trung, TS. Lê Vĩnh Thịnh
Trường học Trường Đại Học Sư Phạm Kỹ Thuật TP. Hồ Chí Minh
Chuyên ngành Công nghệ phần mềm
Thể loại khóa luận tốt nghiệp
Thành phố TP. Hồ Chí Minh
Định dạng
Số trang 154
Dung lượng 7,43 MB
File đính kèm HikiComic_Flutter_Application.rar (3 MB)

Cấu trúc

  • 1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI (9)
  • 2. MỤC TIÊU ĐỀ TÀI (23)
  • 3. PHƯƠNG PHÁP THỰC HIỆN (23)
  • CHƯƠNG 1. CƠ SỞ LÝ THUYẾT (22)
    • 1.1. Dart (24)
      • 1.1.1. Giới thiệu về Dart (24)
      • 1.1.2. Ưu điểm (24)
    • 1.2. Flutter (25)
      • 1.2.1. Giới thiệu về Flutter (25)
      • 1.2.2. Biên dịch trong Flutter (25)
      • 1.2.3. So sánh Flutter và các đối thủ (26)
      • 1.2.4. Ưu điểm của Flutter (0)
    • 1.3. BloC (27)
      • 1.3.1. Ưu điểm (27)
      • 1.3.2. Nhược điểm (27)
    • 1.4. ASP.NET Core (28)
      • 1.4.1. ASP.NET Core là gì (28)
      • 1.4.2. Ưu điểm (29)
      • 1.4.3. Một số cải tiến nổi bật của ASP.NET Core (0)
  • CHƯƠNG 2: KHẢO SÁT, PHÂN TÍCH, THIẾT KẾ (30)
    • 2.1. Phân tích hiện trạng (30)
    • 2.2. Khảo sát một số phần mềm (0)
      • 2.2.1. MangaToon (31)
      • 2.2.2. Bilibili Comics (36)
    • 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. Lược đồ Usecase (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 (0)
      • 3.1.3. Đăng nhập bằng tài khoản Facebook (0)
      • 3.1.4. Đăng ký (45)
      • 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.7. Đăng xuất (49)
      • 3.1.8. Đổi mật khẩu (50)
      • 3.1.9. Đổi thông tin cá nhân (51)
      • 3.1.10. Theo dõi truyện tranh (52)
      • 3.1.11. Tìm kiếm truyện tranh (52)
      • 3.1.12. Chuyển sang chương tiếp theo (0)
      • 3.1.13. Chuyển sang chương trước (0)
      • 3.1.14. Xem những truyện đang theo dõi (54)
      • 3.1.15. Nạp coin bằng PayPal (55)
      • 3.1.16. Nạp coin bằng ZaloPay (55)
      • 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)
      • 3.1.19. Mua chương truyện (57)
      • 3.1.20. Xem thông báo (58)
      • 3.1.21. Bình luận (58)
  • 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. Client (61)
      • 5.1.1. Trang chủ (61)
      • 5.1.2. Đăng nhập (63)
      • 5.1.3. Đăng ký (65)
      • 5.1.4. Màn hình xác thực OTP khi tạo tài khoản bằng email (0)
      • 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 (0)
      • 5.1.8. Tìm kiếm truyện tranh (75)
      • 5.1.9. Chi tiết truyện tranh (77)
      • 5.1.10. Màn hình bình luận (79)
      • 5.1.11. Thể loại (0)
      • 5.1.12. Màn hình đọc truyện (0)
      • 5.1.13. Màn hình cá nhân (85)
      • 5.1.14. Màn hình thay đổi thông tin cá nhân (0)
      • 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.17. Màn hình thư viện (93)
      • 5.1.18. Màn hình truyện theo dõi (95)
      • 5.1.19. Màn hình thanh toán (97)
      • 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.1.22. Màn hình thông báo (103)
    • 5.2. Website Management (104)
      • 5.2.1. Đăng nhập (104)
      • 5.2.2. Account Settings (role admin, team member, creator) (105)
      • 5.2.3. Dashboard (role admin) (109)
      • 5.2.4. Dashboard (112)
      • 5.2.5. Dashboard (role creator) (115)
      • 5.2.6. Quản lý Comics (0)
      • 5.2.7. Quản lý Chapters (0)
      • 5.2.8. Quản lý Genres (0)
      • 5.2.9. Quản lý Artists (0)
      • 5.2.10. Quản lý tác giả (0)
      • 5.2.11. Quản lý Notification (thông báo cấp hệ thống) (0)
      • 5.2.12. Quản lý Creator Request (0)
      • 5.2.13. Quản lý Config Services (0)
      • 5.2.14. Quản lý Config Prices (0)
      • 5.2.15. Quản lý Roles (0)
      • 5.2.16. Quản lý account (user accounts, role admin & team member) (0)
      • 5.2.17. Quản lý account (admin accounts, role admin) (0)
  • CHƯƠNG 6. CÀI ĐẶT VÀ KIỂM THỬ ỨNG DỤNG (141)
    • 6.1. Cài đặt (141)
      • 6.1.1. Back-end (API) (141)
      • 6.1.2. Mobile (143)
      • 6.1.3. Web Management (147)
    • 6.2. Kiểm thử ứng dụng (0)
      • 6.2.1. Các chức năng quản lý tài khoản (0)
      • 6.2.2. Các chức năng quản lý truyện tranh, chương truyện (0)
      • 6.2.3. Các chức năng quản lý danh mục, tác giả (0)
    • 1. NHỮNG KẾT QUẢ ĐẠT ĐƯỢC (9)
      • 1.1. Về kiến thức (151)
      • 1.2. Về đề tài (151)
      • 1.3. Về kinh nghiệm (152)
    • 2. ƯU ĐIỂM VÀ NHƯỢC ĐIỂM (152)
      • 2.1. Ưu điểm (152)
      • 2.2. Nhược điểm (152)
    • 3. THUẬN LỢI (152)
    • 4. KHÓ KHĂN (152)
    • 5. HƯỚNG PHÁT TRIỂN (152)
  • TÀI LIỆU THAM KHẢO (9)
    • CHƯƠNG 2 Hình 6. Màn hình trang chủ của MangaToon (0)
    • CHƯƠNG 3 Hình 23. Lược đồ Usecase (0)
    • CHƯƠNG 4 Hình 24. Lược đồ cơ sở dữ liệu (0)
    • CHƯƠNG 6 Hình 73. Cài đặt backend (0)
    • CHƯƠNG 5 Bảng 4. Mô tả màn hình trang chủ (0)

Nội dung

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.

Ngày đăng: 02/11/2023, 21:11

TỪ KHÓA LIÊN QUAN

TÀI LIỆU CÙNG NGƯỜI DÙNG

TÀI LIỆU LIÊN QUAN

w