Bối cảnh và vấn đề nghiên cứu

Khóa luận tốt nghiệp kỹ sư ngành Công nghệ Thông tin (chuyên ngành Công nghệ phần mềm) của nhóm sinh viên Trần Quang và Võ Thành Vinh, dưới sự hướng dẫn của ThS. Nguyễn Hữu Trung tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (thực hiện từ tháng 2/2023 đến tháng 7/2023), tập trung giải quyết nhu cầu chuyển dịch từ đọc sách báo truyền thống sang tiêu thụ nội dung số trên thiết bị di động.

Theo dữ liệu khảo sát thị trường được đề tài dẫn chứng:

  • Quy mô thị trường sách điện tử toàn cầu được dự báo đạt 29,43 tỷ USD vào năm 2024, trong đó thị phần truyện tranh số hóa (Comic and Graphic Novels) dự kiến chiếm 10% (tương đương khoảng 2,94 tỷ USD).
  • Tại thị trường quốc tế, hai mô hình tiêu biểu là Webtoon (Hàn Quốc) và Manhua (Trung Quốc) đạt mức tăng trưởng cao liên tục. Riêng tại Trung Quốc, lượng độc giả truyện tranh trực tuyến được dự báo vượt 200 triệu người.
  • Tại Việt Nam, số lượng thiết bị điện thoại thông minh đang hoạt động đạt 43,7 triệu máy; dân số sử dụng Internet đạt 64 triệu người (chiếm tỷ lệ 64% dân số) với 94% người dùng truy cập Internet hằng ngày. Thị trường truyện tranh trực tuyến trong nước ước tính có khoảng 2,5 triệu người đọc thường xuyên mỗi tháng, tương đương quy mô doanh thu 4 triệu USD mỗi năm.

Từ thực tiễn trên, nhóm tác giả xác định mục tiêu và nhiệm vụ nghiên cứu cụ thể:

  1. Xây dựng website cho quản trị viên để quản lý hệ thống truyện tranh, nội dung số và người dùng.
  2. Xây dựng ứng dụng di động trên hệ điều hành Android để người dùng có thể đọc truyện tranh, theo dõi thông tin, tương tác và thực hiện các giao dịch thanh toán.
  3. Vận dụng các công nghệ và mô hình phát triển phần mềm hiện đại vào việc xây dựng hệ thống website và ứng dụng di động.

Đối tượng nghiên cứu của đề tài là quy trình xây dựng ứng dụng đọc truyện tranh trực tuyến, kiến trúc quản lý trạng thái BloC trong Flutter, hệ thống dịch vụ giao diện lập trình ứng dụng (Web API) dựa trên ASP.NET Core, và cơ sở dữ liệu quan hệ SQL Server. Phạm vi nghiên cứu về mặt công nghệ giới hạn trong nền tảng di động Android (ứng dụng người dùng) và giao diện web (phân hệ quản trị); phạm vi thời gian triển khai từ ngày 01/02/2023 đến ngày 10/07/2023.


Cơ sở lý thuyết và phương pháp

Đề tài sử dụng các công nghệ, framework và mô hình kiến trúc phần mềm chuyên biệt cho từng phân hệ:

  1. Phân hệ Ứng dụng di động (Mobile App):

    • Ngôn ngữ lập trình Dart: Ngôn ngữ hướng đối tượng do Google phát triển, hỗ trợ biên dịch trực tiếp sang mã máy (ARM và x86) cho nền tảng di động hoặc chuyển đổi sang JavaScript cho nền tảng web.
    • Flutter Framework: Bộ công cụ giao diện đa nền tảng render trực tiếp từng pixel trên màn hình thay vì gọi các thành phần UI gốc của hệ điều hành.
    • Mô hình BloC (Business Logic Component): Mô hình quản lý trạng thái dựa trên thư viện RxDart, phân tách logic nghiệp vụ khỏi giao diện thông qua cơ chế tiếp nhận sự kiện (Event) và phát ra trạng thái (State) bằng các luồng dữ liệu (Stream).
  2. Phân hệ Dịch vụ phụ trợ (Web API) và Cơ sở dữ liệu:

    • ASP.NET Core: Framework mã nguồn mở, đa nền tảng dùng để xây dựng hệ thống backend và dịch vụ RESTful API.
    • Xác thực và phân quyền: Kết hợp JSON Web Token (JWT) và ASP.NET Identity Framework.
    • Truy cập dữ liệu và kiểm tra: Hệ quản trị cơ sở dữ liệu SQL Server, Entity Framework Core kết hợp Fluent API để thiết lập các quan hệ dữ liệu, và Fluent Validation để xác thực dữ liệu đầu vào của các yêu cầu HTTP.
    • Dịch vụ bên thứ ba: Firebase, giải pháp lưu trữ đệm (Caching), Cloudinary (lưu trữ hình ảnh), giao thức SMTP gửi thư điện tử và dịch vụ Twilio (gửi mã OTP qua SMS).
  3. Phân hệ Website quản trị (Web Management):

    • Xây dựng trên nền tảng ASP.NET Core MVC và Razor Pages, tích hợp công cụ Elfinder để quản lý tệp tin trực tiếp trên máy chủ.
Tiêu chí so sánh Flutter React Native
Ngôn ngữ / Framework Dart + Flutter JavaScript / React.js
Cơ chế biên dịch Biên dịch toàn bộ thành Native App Biên dịch một phần thành Native App, một phần chạy dạng JavaScript
Xây dựng thành phần UI Không dùng UIComponent của OS; kiểm soát từng pixel trên màn hình Biên dịch mã nguồn thành các UIComponent riêng biệt của Android hoặc iOS
Nền tảng hỗ trợ Di động, Web, Desktop Chủ yếu là ứng dụng di động (có bản mở rộng React Native Web)
Đơn vị phát triển Google Facebook

Phương pháp nghiên cứu thực tế gồm:

  • Khảo sát sản phẩm thực tế: Phân tích các tính năng và hạn chế của hai ứng dụng truyện tranh trực tuyến là MangaToon và Bilibili Comics.
  • Phân tích và thiết kế hệ thống hướng đối tượng: Xây dựng biểu đồ use-case, mô tả kịch bản use-case (luồng cơ bản, luồng phụ, luồng ngoại lệ), thiết kế lược đồ cơ sở dữ liệu.
  • Hiện thực hóa và kiểm thử phần mềm: Lập trình theo kiến trúc phân tầng, kết nối qua mạng nội bộ bằng công cụ dòng lệnh của Android Debug Bridge (ADB), thực hiện kiểm thử hộp đen (Black-box testing) đối với các chức năng nghiệp vụ.

Thiết kế và triển khai

Hệ thống được thiết kế theo cấu trúc phân tách giữa tầng giao diện người dùng và tầng dịch vụ backend, bảo đảm phân quyền truy cập và xử lý dữ liệu tập trung.

1. Kiến trúc hệ thống và phân quyền

Hệ thống Web API đóng vai trò trung tâm tiếp nhận yêu cầu từ ứng dụng di động HikiComic và trang quản trị ASP.NET Core MVC:

  • Người dùng ứng dụng di động (Reader): Thực hiện đăng ký, đăng nhập (bằng Email/mật khẩu, tài khoản Google hoặc Facebook), xác thực tài khoản qua OTP, quản lý thông tin cá nhân, liên kết số điện thoại, tìm kiếm và phân loại truyện, đọc truyện, chuyển chương, lưu lịch sử, theo dõi truyện, bình luận, đánh giá, nạp tiền mua Coin qua cổng thanh toán và dùng Coin để mở khóa chương truyện trả phí.
  • Hệ thống phân quyền trên Website quản trị gồm 3 nhóm người dùng:
    • Quản trị viên (Admin): Xem bảng thống kê doanh thu, tổng số truyện, chương, độc giả, tác giả, họa sĩ, thể loại, lượt theo dõi và lượt xem; theo dõi biểu đồ tăng trưởng người dùng mới, biểu đồ người dùng theo độ tuổi và giới tính; xem top độc giả nạp/dùng tiền theo ngày/tháng/năm; quản lý tài khoản người dùng, phân quyền (roles), cấu hình dịch vụ, thiết lập bảng giá (config prices), quản trị danh mục thể loại, tác giả, họa sĩ, truyện tranh, chương truyện, kiểm duyệt yêu cầu nâng cấp tài khoản lên Creator và sử dụng công cụ thu thập dữ liệu tự động (Tool crawl comics).
    • Thành viên nhóm vận hành (Team-members): Xem bảng thống kê truyện, chương, danh mục, tác giả, họa sĩ, top người dùng nạp tiền và biểu đồ tăng trưởng nội dung; quản lý các dữ liệu truyện, chương và danh mục.
    • Nhà sáng tạo nội dung (Creator): Theo dõi doanh thu cá nhân theo thời gian, danh sách các bộ truyện có lượt xem/lượt theo dõi cao nhất, danh sách độc giả mua nhiều chương truyện nhất và biểu đồ số lượng tác phẩm tạo mới hằng tháng.

2. Tích hợp thanh toán và dịch vụ ngoài

  • Tích hợp cổng thanh toán PayPal và ZaloPay để độc giả nạp Coin vào ví hệ thống.
  • Sử dụng Twilio để gửi tin nhắn OTP khi thực hiện thao tác liên kết hoặc xóa số điện thoại.
  • Sử dụng SMTP Mail để gửi mã OTP khi đăng ký tài khoản mới và thiết lập lại mật khẩu khi quên.
  • Quản lý và lưu trữ tệp hình ảnh các trang truyện thông qua Cloudinary và Elfinder.

3. Quy trình triển khai và kiểm thử

  • Thiết lập máy chủ IIS, cấu hình hệ thống phân giải tên miền (DNS), trỏ Domain, cấu hình địa chỉ IP Public và tường lửa (Firewall).
  • Triển khai môi trường phát triển cục bộ với Visual Studio Code, Flutter SDK cho hệ điều hành Windows, thiết lập biến môi trường và chạy câu lệnh adb reverse tcp:7068 tcp:7068 nhằm định tuyến cổng kết nối giữa thiết bị Android và máy chủ API cục bộ.
  • Tiến hành các ca kiểm thử chức năng cho từng module: quản lý tài khoản, quản lý truyện tranh, chương truyện, danh mục và tác giả.

Nội dung chính theo từng chương

Chương 1. Cơ sở lý thuyết

Chương này trình bày nền tảng công nghệ sử dụng trong đề tài. Nội dung bao gồm định nghĩa ngôn ngữ lập trình Dart, cơ chế biên dịch trước thời hạn (AOT) ra mã ARM và x86 trên di động, đặc điểm của Flutter framework trong việc xây dựng ứng dụng native đa nền tảng không phụ thuộc vào thành phần UI của hệ điều hành, và bảng so sánh kỹ thuật giữa Flutter và React Native. Tác giả đi sâu phân tích kiến trúc BloC Pattern (khái niệm, ưu điểm trong việc phân tách code logic và UI, nhược điểm về phát sinh mã mẫu và tiêu tốn tài nguyên stream nếu không tối ưu). Đồng thời, chương 1 giới thiệu ASP.NET Core, các cải tiến về tính module hóa, hỗ trợ Dependency Injection tích hợp sẵn và khả năng triển khai linh hoạt trên đám mây hoặc máy chủ on-premise.

Chương 2: Khảo sát, phân tích, thiết kế

Chương 2 phân tích các số liệu thực trạng về thị trường sách điện tử, webcomics quốc tế (MangaToon, Bilibili Comics) và tiềm năng tại Việt Nam (43,7 triệu smartphone, 64 triệu người dùng Internet). Tác giả tiến hành khảo sát giao diện và tính năng của MangaToon và Bilibili Comics, tổng hợp ưu điểm và hạn chế của từng phần mềm. Dựa trên kết quả khảo sát, chương này thiết lập danh sách yêu cầu phần mềm cho dự án, bao gồm:

  • Danh sách yêu cầu chức năng nghiệp vụ: Quản lý truyện, quản lý chương, quản lý tác giả, quản lý danh mục, quản lý người dùng.
  • Danh sách yêu cầu chức năng hệ thống: Thống kê lượt đọc truyện, lượt đọc từng chương, lượt theo dõi, các thao tác thêm/cập nhật/xóa/khôi phục dữ liệu truyện, chương, danh mục, tác giả.
  • Danh sách yêu cầu phi chức năng: Bảo mật hệ thống, cơ chế phân quyền, mã hóa mật khẩu và các thông tin nhạy cảm trước khi lưu vào cơ sở dữ liệu.
Ứng dụng khảo sát Chức năng chính ghi nhận Hạn chế ghi nhận
MangaToon Đa dạng thể loại, giao diện đơn giản dễ dùng, có tính năng hội viên, bình luận, viết truyện, cập nhật liên tục kèm thông báo Chỉ hỗ trợ tiếng Việt; giao diện chưa đẹp, chưa tạo được ấn tượng
Bilibili Comics Giao diện đẹp, thể loại đa dạng, tính điểm dựa trên mức độ đọc của người dùng, số lượng truyện lớn Phải hỗ trợ nhiều ngôn ngữ (Tiếng Anh, Tiếng Trung, Tiếng Indonesia, Tiếng Tây Ban Nha, Tiếng Pháp) dẫn đến quy mô phức tạp

Chương 3. Mô hình hóa yêu cầu

Chương 3 tập trung xây dựng biểu đồ use-case tổng quát và chi tiết hóa các kịch bản hoạt động (Use-case Specifications) của hệ thống. Từng ca sử dụng được cấu trúc đầy đủ thành các mục: Tên, Mô tả tóm tắt (Brief description), Tác nhân (Actor), Điều kiện tiên quyết (Pre-conditions), Điều kiện sau (Post-conditions), Luồng sự kiện chính (Basic flow), Luồng rẽ nhánh (Alternative flow), Luồng ngoại lệ (Exception flow) và Điểm mở rộng (Extension points). Các use-case được tài liệu hóa chi tiết bao gồm:

  • Đăng nhập bằng email và mật khẩu;
  • Đăng nhập bằng tài khoản Google (xác thực qua access token);
  • Đăng nhập bằng tài khoản Facebook;
  • Đăng ký tài khoản (xác thực mã OTP gửi qua email);
  • Thêm số điện thoại vào tài khoản (xác thực mã OTP gửi qua SMS);
  • Xóa số điện thoại khỏi tài khoản;
  • Đăng xuất; Đổi mật khẩu; Đổi thông tin cá nhân;
  • Tìm kiếm truyện tranh; Theo dõi truyện tranh; Xem truyện đang theo dõi;
  • Đọc truyện (chuyển sang chương tiếp theo, chuyển sang chương trước);
  • Nạp coin bằng PayPal và ZaloPay;
  • Mua chương truyện; Xem lịch sử nạp của tài khoản; Xem lịch sử mua truyện.

Chương 4. Thiết kế phần mềm

Chương này cung cấp lược đồ cơ sở dữ liệu (Database Schema) được thiết kế cho hệ thống quản trị và ứng dụng đọc truyện, bao gồm các bảng lưu trữ thông tin về người dùng, vai trò (roles), truyện tranh (comics), chương truyện (chapters), thể loại (genres), tác giả (authors), họa sĩ (artists), bình luận, giao dịch nạp coin, lịch sử mua chương truyện và cấu hình giá dịch vụ.

Chương 5. Thiết kế giao diện và xử lý

Chương 5 mô tả chi tiết các màn hình giao diện của cả hai phân hệ:

  • Phân hệ di động: Màn hình trang chủ, đăng ký, đăng nhập, xác thực OTP đăng ký/quên mật khẩu/thay đổi mật khẩu, tìm kiếm truyện, chi tiết truyện, bình luận, danh mục thể loại, đọc truyện, thông tin cá nhân, thêm/xác thực số điện thoại, tủ sách, truyện theo dõi, thanh toán nạp coin, lịch sử thanh toán, lịch sử mua truyện và màn hình thông báo.
  • Phân hệ website quản trị: Màn hình đăng nhập, cài đặt tài khoản (đổi avatar, thông tin cá nhân, mật khẩu), các bảng điều khiển Dashboard dành cho Admin, Team-members và Creator, các màn hình quản trị danh mục truyện, chương, thể loại, artist, tác giả, thông báo, yêu cầu nâng cấp Creator (Creator Request), cấu hình dịch vụ (Service Config), cấu hình giá (Config Prices), quản lý vai trò và quản lý tài khoản người dùng/quản trị viên.

Chương 6. Cài đặt và kiểm thử ứng dụng

Trình bày hướng dẫn cài đặt backend, cấu hình API, thiết lập môi trường Flutter trên Windows, sử dụng Visual Studio Code cùng các tiện ích mở rộng, thao tác kết nối qua lệnh adb reverse và vận hành ứng dụng HikiComic. Chương này tổng kết các bảng kịch bản kiểm thử (Test cases) chức năng dành cho quản lý tài khoản, quản lý truyện tranh, chương truyện, danh mục và tác giả.


Kết quả và đóng góp

1. Kết quả đạt được

Khóa luận đã hoàn thành các sản phẩm kỹ thuật theo đề cương đăng ký ban đầu:

  • Xây dựng thành công ứng dụng di động HikiComic chạy trên hệ điều hành Android bằng Flutter và mô hình BLoC, đáp ứng đầy đủ các chức năng nghiệp vụ đọc truyện, tìm kiếm, đánh giá, bình luận và thanh toán nạp coin qua PayPal và ZaloPay.
  • Xây dựng hệ thống Web API bằng ASP.NET Core kết hợp Entity Framework Core, SQL Server, hỗ trợ xác thực qua JWT và Identity Framework, tích hợp gửi OTP qua SMTP và Twilio.
  • Xây dựng trang web quản trị đa cấp bậc (Admin, Team-members, Creator) với các biểu đồ thống kê trực quan về doanh thu, tương tác độc giả và số lượng phát triển nội dung.

2. Đóng góp của đề tài

  • Ứng dụng thành công mô hình BLoC Pattern vào một dự án phần mềm di động thực tế, giúp cấu trúc mã nguồn được phân tách rõ ràng giữa tầng giao diện hiển thị và tầng xử lý logic.
  • Thiết lập giải pháp tích hợp song song hai cổng thanh toán trực tuyến (quốc tế với PayPal và nội địa với ZaloPay) vào quy trình mua nội dung số trên thiết bị di động.
  • Cung cấp mô hình quản lý nội dung đa quyền, hỗ trợ kiểm duyệt và phân cấp rõ ràng giữa ban quản trị hệ thống, đội ngũ vận hành nội dung và các nhà sáng tạo nội dung tự do.

Hạn chế và hướng nghiên cứu tiếp

1. Hạn chế

  • Mô hình BLoC đưa thêm các lớp trừu tượng vào kiến trúc, đòi hỏi phải viết thêm nhiều đoạn mã thiết lập luồng dữ liệu (Stream, Sink) và xử lý sự kiện, dẫn đến lượng mã mẫu lớn.
  • Việc xử lý và lắng nghe sự kiện liên tục trên các stream nếu không được giải phóng bộ nhớ và tối ưu hóa chặt chẽ có thể làm tiêu hao tài nguyên hệ thống, ảnh hưởng đến hiệu suất ứng dụng.
  • Khóa luận mới chỉ tập trung đóng gói và chạy thực nghiệm trên hệ điều hành Android, chưa mở rộng phát hành chính thức trên nền tảng iOS dù Flutter hỗ trợ đa nền tảng.

2. Hướng phát triển

  • Tối ưu hóa việc quản lý vòng đời của các stream và sự kiện trong BLoC để giảm tải tài nguyên hệ thống.
  • Biên dịch và triển khai ứng dụng trên hệ điều hành iOS để tận dụng thế mạnh đa nền tảng của Flutter.
  • Tiếp tục bổ sung và nâng cấp các tính năng mạng xã hội, tương tác cộng đồng giữa người đọc và tác giả truyện tranh trên nền tảng.

Giá trị tham khảo

Tài liệu khóa luận có giá trị tham khảo thiết thực cho sinh viên các ngành Công nghệ phần mềm, Công nghệ Thông tin hoặc các lập trình viên đang nghiên cứu phát triển ứng dụng di động:

  • Tham khảo về mô hình kiến trúc: Tài liệu cung cấp cách thức triển khai chi tiết mô hình BLoC trong Flutter kết hợp với dịch vụ Web API ASP.NET Core.
  • Tham khảo về phân tích yêu cầu: Các kịch bản đặc tả use-case chi tiết tại Chương 3 (bao gồm luồng cơ bản, rẽ nhánh, luồng ngoại lệ cho các tác vụ đăng nhập mạng xã hội, xác thực OTP đa kênh) là tài liệu mẫu trực quan cho việc làm đồ án chuyên ngành phần mềm.
  • Tham khảo về tích hợp thanh toán: Quy trình tích hợp ví ZaloPay và cổng thanh toán PayPal vào ứng dụng di động và cơ chế nạp Coin mở khóa nội dung.

Câu hỏi thường gặp

1. Ứng dụng di động trong khóa luận được xây dựng bằng công nghệ và kiến trúc nào?

Ứng dụng di động (HikiComic) được lập trình bằng ngôn ngữ Dart trên nền tảng Flutter framework của Google, áp dụng kiến trúc quản lý trạng thái BloC Pattern (dựa trên RxDart) để phân tách hoàn toàn tầng giao diện (UI) và tầng logic nghiệp vụ thông qua cơ chế Event - State.

2. Hệ thống quản trị trên Website phân chia những vai trò nào và chức năng của từng vai trò là gì?

Website quản trị phân chia 3 vai trò:

  • Admin: Xem toàn bộ bảng thống kê doanh thu, người dùng, truyện, chương; biểu đồ phân tích độ tuổi, giới tính, người dùng mới; quản lý tài khoản người dùng, phân quyền, cấu hình giá, dịch vụ, duyệt yêu cầu Creator và sử dụng tool crawl truyện.
  • Team-members: Xem các thống kê về nội dung (truyện, chương, danh mục, tác giả) và độc giả nạp tiền; quản lý dữ liệu truyện tranh và chương truyện.
  • Creator: Theo dõi doanh thu cá nhân, các bộ truyện có lượt xem/lượt theo dõi cao nhất của mình, danh sách người dùng mua chương và biểu đồ truyện mới tạo mỗi tháng.

3. Người dùng trên ứng dụng di động có thể thanh toán nạp coin qua những hình thức nào?

Hệ thống tích hợp hai cổng thanh toán cho người dùng trên ứng dụng Android gồm: cổng thanh toán quốc tế PayPal và cổng thanh toán nội địa ZaloPay. Sau khi thanh toán thành công, số coin tương ứng được cộng vào tài khoản để độc giả mua các chương truyện trả phí.

4. Quy trình xác thực khi đăng ký và liên kết số điện thoại được thực hiện ra sao?

  • Khi đăng ký tài khoản bằng email, hệ thống gửi mã OTP xác thực qua giao thức SMTP Mail; người dùng nhập đúng OTP thì hệ thống mới tạo tài khoản và chuyển về trang đăng nhập.
  • Khi thêm hoặc xóa số điện thoại trong mục thông tin cá nhân, hệ thống gửi mã xác thực OTP qua tin nhắn SMS thông qua dịch vụ Twilio để bảo đảm tính chính xác của số thuê bao.

5. Nhóm tác giả căn cứ vào những số liệu thị trường nào để chứng minh tính cấp thiết của đề tài?

Nhóm tác giả dẫn chứng các số liệu: thị trường sách điện tử toàn cầu dự báo đạt 29,43 tỷ USD vào năm 2024 (truyện tranh số chiếm 10%); tại Trung Quốc lượng độc giả trực tuyến vượt 200 triệu người; tại Việt Nam có 43,7 triệu smartphone, 64 triệu người dùng Internet (64% dân số), khoảng 2,5 triệu người đọc truyện tranh trực tuyến thường xuyên hằng tháng với quy mô doanh thu ước tính đạt 4 triệu USD/năm.


Kết luận

Khóa luận tốt nghiệp của sinh viên Trần Quang và Võ Thành Vinh đã hoàn thành mục tiêu xây dựng hệ thống phần mềm đọc truyện tranh trực tuyến toàn diện gồm ứng dụng di động Android (HikiComic) và cổng quản trị web đa vai trò. Đề tài vận dụng hiệu quả các công nghệ hiện đại như Flutter, kiến trúc BloC, ASP.NET Core Web API, Entity Framework cùng hệ thống xác thực và thanh toán đa dạng (PayPal, ZaloPay, Twilio, SMTP). Đây là công trình thực hành công nghệ phần mềm hoàn chỉnh, cung cấp tài liệu tham khảo chi tiết về quy trình phân tích, thiết kế và cài đặt hệ thống ứng dụng di động kết nối backend trong thực tế.