Xây dựng website đọc truyện tranh online sử dụng Spring Boot và React JS

Khóa luận xây dựng website đọc truyện tranh online bằng Spring Boot và ReactJS tại HCMUTE

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

Tóm tắt

I. Tổng quan website đọc truyện tranh bằng Spring Boot và ReactJS

Nhu cầu tiếp cận truyện tranh số ngày càng gia tăng mạnh mẽ. Sinh viên ngành Công nghệ Phần mềm tại HCMUTE đã nghiên cứu và phát triển đề tài website đọc truyện tranh online. Đề tài áp dụng mô hình kiến trúc phân tán hiện đại. Hệ thống giải quyết bài toán tải hình ảnh dung lượng lớn và giảm thiểu độ trễ mạng. Mã nguồn backend sử dụng Java Spring Boot cung cấp các API RESTful an toàn và ổn định. Phía client sử dụng ReactJS giúp giao diện người dùng mượt mà, trực quan. Người dùng dễ dàng theo dõi các bộ truyện tranh yêu thích trên nhiều thiết bị di động lẫn máy tính bàn. Dự án đáp ứng tiêu chuẩn đồ án tốt nghiệp kỹ sư tại Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh. Các tính năng cốt lõi bao gồm đọc truyện, tìm kiếm thông minh, tương tác cộng đồng và hệ thống ví điện tử. Nền tảng mang lại môi trường giải trí số lành mạnh và tiện ích cho độc giả. Mô hình phát triển mở ra hướng đi bền vững cho các dự án thương mại hóa nội dung số.

1.1. Bối cảnh nghiên cứu đề tài tại HCMUTE

Đề tài khóa luận tốt nghiệp xuất phát từ nhu cầu thực tiễn của thị trường giải trí trực tuyến. Khoa Công nghệ Thông tin tại HCMUTE luôn khuyến khích sinh viên xây dựng các ứng dụng có giá trị ứng dụng cao. Sinh viên đã khảo sát nhu cầu đọc truyện tranh trên nền tảng số của giới trẻ. Độc giả hiện nay yêu cầu tốc độ hiển thị trang truyện phải nhanh chóng. Độc giả cũng mong muốn giao diện phải thân thiện và không bị gián đoạn bởi lỗi kỹ thuật. Các nền tảng cũ thường gặp sự cố khi lưu lượng truy cập tăng vọt. Vì vậy, việc thiết kế một website truyện tranh hiện đại là yêu cầu cấp thiết. Đề tài khẳng định năng lực ứng dụng công nghệ của sinh viên HCMUTE.

1.2. Mục tiêu phát triển hệ thống đọc truyện

Hệ thống hướng tới việc cung cấp trải nghiệm đọc truyện kỹ thuật số hoàn chỉnh. Mục tiêu đầu tiên là tối ưu hóa tốc độ truyền tải hình ảnh dung lượng cao. Hệ thống cho phép người dùng đăng ký tài khoản, lưu lịch sử và đánh giá truyện. Mục tiêu thứ hai là xây dựng cơ chế phân quyền rõ ràng giữa người đọc và quản trị viên. Nền tảng còn tích hợp hệ thống tài khoản thành viên cao cấp thông qua ví cá nhân. Tác giả có thể đăng tải tác phẩm và nhận doanh thu minh bạch. Dự án kiểm soát chất lượng nội dung nhằm loại bỏ các thông tin độc hại. Kết quả nghiên cứu tạo nền tảng vững chắc cho mô hình xuất bản trực tuyến.

II. Phân tích thách thức kỹ thuật website đọc truyện tranh

Các website đọc truyện tranh truyền thống đối mặt nhiều vấn đề kỹ thuật nan giải. Đầu tiên là hiện tượng nghẽn băng thông khi hàng nghìn người cùng tải ảnh chương mới. Dữ liệu hình ảnh chiếm dung lượng bộ nhớ máy chủ rất lớn. Nếu không có giải pháp lưu trữ tối ưu, chi phí hạ tầng sẽ tăng phi mã. Tiếp theo là vấn đề đồng bộ trạng thái đọc của người dùng trên các thiết bị. Người đọc thường xuyên chuyển đổi giữa điện thoại và máy tính cá nhân. Hệ thống cơ sở dữ liệu quan hệ như MySQL dễ bị quá tải truy vấn khi xử lý đồng thời hàng loạt yêu cầu bình luận, đánh giá và giao dịch ví. Bên cạnh đó, tình trạng sao chép nội dung và bảo mật thông tin tài khoản luôn là mối đe dọa thường trực. Nhiều nền tảng thiếu cơ chế kiểm duyệt nội dung tự động dẫn đến vi phạm bản quyền và phân phối nội dung phản cảm. Báo cáo phản biện tại HCMUTE đã chỉ rõ nhu cầu cấp thiết về việc nâng cao khả năng lọc nội dung truyện. Việc phân tích rõ các bài toán này giúp định hình kiến trúc phần mềm chuẩn xác hơn.

2.1. Hạn chế về hiệu năng và quản lý dữ liệu lớn

Hệ thống cơ sở dữ liệu MySQL bộc lộ nhiều điểm nghẽn khi xử lý kho truyện tranh khổng lồ. Mỗi bộ truyện gồm hàng trăm chương truyện với hàng chục hình ảnh phân giải cao. Lưu lượng dữ liệu đọc ghi liên tục làm suy giảm tốc độ phản hồi máy chủ. Khi số lượng tài khoản đăng ký tăng cao, các bảng dữ liệu phát sinh tình trạng khóa bảng. Các truy vấn phức tạp phục vụ lọc truyện và xếp hạng tốn nhiều tài nguyên xử lý. Bên cạnh đó, việc lưu trữ hình ảnh trực tiếp trong cơ sở dữ liệu làm phình to dung lượng ổ cứng. Nhóm nghiên cứu nhận định MySQL cần giải pháp kết hợp phân tán để đáp ứng nhu cầu tăng trưởng.

2.2. Khó khăn trong giao dịch ví và lọc nội dung

Quản lý dòng tiền và rút tiền là nghiệp vụ có độ rủi ro bảo mật rất cao. Trường hợp người dùng yêu cầu rút tiền đòi hỏi hệ thống phải xác thực đa tầng. Lỗi sai lệch số dư ví có thể gây tổn thất tài chính nghiêm trọng cho đơn vị vận hành. Do đó, các ca sử dụng như rút tiền khỏi ví cần xử lý giao dịch nguyên tử chặt chẽ. Ngoài ra, việc kiểm soát nội dung truyện đăng tải còn nhiều kẽ hở. Nhóm sinh viên phải giải quyết phản hồi từ hội đồng phản biện về năng lực lọc nội dung. Nếu không lọc tự động, hệ thống dễ chứa truyện vi phạm bản quyền hoặc tiêu chuẩn cộng đồng.

III. Giải pháp xây dựng website bằng Spring Boot và ReactJS

Giải pháp kiến trúc phân tách frontend và backend giải quyết triệt để vấn đề quá tải. Phía backend triển khai Spring Boot với khả năng xử lý đa luồng mạnh mẽ. Khung làm việc Java Spring Boot tạo ra các RESTful API an toàn và chuẩn hóa. Hệ thống xác thực bằng JSON Web Token giúp bảo mật phiên truy cập của độc giả. Phía client sử dụng ReactJS kết hợp kỹ thuật Single Page Application. Cơ chế Virtual DOM của ReactJS giúp tải hình ảnh truyện tranh nhanh và mượt mà. Độc giả có thể lật trang truyện mà không cần tải lại toàn bộ trang web. Ngoài ra, giải pháp tích hợp thêm Python nhằm hỗ trợ phân tích dữ liệu và lọc nội dung độc hại. Hệ quản trị MySQL được tối ưu hóa cấu trúc chỉ mục cho các bảng thông tin truyện và lịch sử đọc. Quy trình rút tiền ví điện tử áp dụng mô hình kiểm soát hai bước nghiêm ngặt. Kiến trúc này mang lại tính linh hoạt cao và khả năng mở rộng dịch vụ dễ dàng.

3.1. Thiết kế tầng backend Spring Boot và cơ sở dữ liệu

Backend đóng vai trò xương sống cho toàn bộ hoạt động của website đọc truyện tranh. Nhóm phát triển sử dụng Spring Boot để xây dựng hệ thống vi dịch vụ độc lập. Công nghệ Spring Data JPA giúp quản lý dữ liệu truy vấn trực tiếp vào MySQL hiệu quả. Cơ chế bộ nhớ đệm được áp dụng cho các danh mục truyện thịnh hành. Việc này giúp giảm tải áp lực kết nối trực tiếp đến cơ sở dữ liệu gốc. Mô-đun bảo mật Spring Security kiểm soát chặt chẽ quyền truy cập của từng đối tượng người dùng. Hệ thống hỗ trợ xử lý giao dịch nạp tiền và rút tiền với tính nhất quán cao. Cơ sở dữ liệu thiết lập quan hệ liên kết bảng rõ ràng, tránh trùng lặp thông tin.

3.2. Xây dựng giao diện tương tác người dùng với ReactJS

Giao diện người dùng được xây dựng hoàn toàn bằng thư viện ReactJS tân tiến. Khung giao diện thiết kế theo phong cách hiện đại, trực quan và chuẩn responsive. Người đọc dễ dàng điều hướng các thể loại truyện tranh yêu thích. Công nghệ Lazy Loading cho phép chỉ tải các khung hình truyện khi người dùng cuộn đến. Nhờ đó, băng thông mạng giảm đáng kể và thời gian tải trang rút ngắn rõ rệt. Trạng thái đọc của từng người dùng được quản lý tập trung bằng Redux Toolkit. Các tính năng tương tác như viết bình luận, nhấn yêu thích và chấm điểm truyện phản hồi tức thì. Trải nghiệm người dùng đạt chất lượng tương đương các nền tảng thương mại quốc tế.

IV. Kết luận và ứng dụng đề tài đọc truyện tranh tại HCMUTE

Đề tài tốt nghiệp tại Trường Đại học Sư phạm Kỹ thuật TPHCM hoàn thành trọn vẹn mục tiêu đề ra. Sự kết hợp giữa Spring Boot và ReactJS chứng minh tính hiệu quả vượt trội trong phát triển phần mềm hiện đại. Ứng dụng không chỉ thỏa mãn yêu cầu học thuật mà còn sở hữu giá trị thương mại cao. Nhóm sinh viên đã kiểm thử thực tế toàn diện các luồng nghiệp vụ. Kết quả cho thấy hệ thống hoạt động ổn định, bảo mật và đáp ứng hàng nghìn yêu cầu đồng thời. Cơ chế ví cá nhân và rút tiền hoạt động chính xác, đảm bảo quyền lợi cho người sáng tạo nội dung. Đồ án nhận được đánh giá loại Giỏi từ giảng viên hướng dẫn TS. Lê Vĩnh Thịnh. Mô hình đề tài trở thành tài liệu tham khảo giá trị cho sinh viên các khóa sau tại HCMUTE. Hướng phát triển tiếp theo tập trung vào việc ứng dụng trí tuệ nhân tạo để lọc ảnh tự động và cá nhân hóa trải nghiệm đọc truyện.

4.1. Đánh giá kết quả thực nghiệm từ hội đồng HCMUTE

Hội đồng chấm luận văn ghi nhận sự nỗ lực và tính thực tiễn cao của đề tài. Nhóm sinh viên đã xây dựng thành công đầy đủ các chức năng từ quản lý tài khoản đến tương tác truyện. Sản phẩm hoàn thiện có giao diện mượt mà và tốc độ phản hồi nhanh chóng. Hệ thống phân quyền chặt chẽ giữa các vai trò người dùng bình thường, người dùng cao cấp và ban quản trị. Giảng viên hướng dẫn ghi nhận sự chuyên cần và tinh thần chủ động sáng tạo của nhóm nghiên cứu. Tuy nhiên, nhóm cũng tiếp thu phản hồi về việc hoàn thiện thuật toán lọc nội dung tự động. Báo cáo đồ án đạt mức đánh giá xuất sắc tại Khoa Công nghệ Thông tin.

4.2. Tiềm năng triển khai và hướng mở rộng tương lai

Kiến trúc hệ thống mở ra nhiều cơ hội thương mại hóa trong thực tế. Đề tài có thể chuyển giao cho các nhà xuất bản truyện tranh điện tử. Nền tảng hỗ trợ tích hợp cổng thanh toán trực tuyến đa quốc gia cho cộng đồng độc giả. Hướng mở rộng tiếp theo bao gồm việc xây dựng mô hình trí tuệ nhân tạo bằng Python. Mô hình này giúp nhận diện và kiểm duyệt tự động các hình ảnh nhạy cảm trước khi xuất bản. Ngoài ra, giải pháp gợi ý truyện dựa trên sở thích độc giả sẽ được tích hợp. Điều này gia tăng tương tác và giữ chân người đọc lâu hơn trên trang web. Dự án là tiền đề vững chắc cho việc phát triển các nền tảng phân phối số quy mô lớn.

Nội dung chính

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

Khóa luận tốt nghiệp với đề tài "Xây dựng website đọc truyện tranh online sử dụng Spring Boot và React JS" được thực hiện bởi hai sinh viên Lê Đình Bảo (MSSV: 20110613) và Lại Văn Quý (MSSV: 20110708), dưới sự hướng dẫn khoa học của TS. Lê Vĩnh Thịnh tại Khoa Công nghệ Thông tin, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh, hoàn thành vào tháng 7 năm 2024. Đề tài thuộc chuyên ngành Công nghệ Phần mềm.

Theo trình bày của nhóm tác giả, truyện tranh là một hình thức giải trí phổ biến đối với nhiều lứa tuổi từ trẻ em đến thanh thiếu niên. Cùng với sự phát triển của Internet, thói quen tiếp cận tài liệu số và sách điện tử (eBook) dần thay thế phương thức đọc sách giấy truyền thống. Việc xây dựng một website đọc truyện tranh trực tuyến không chỉ giúp người đọc tiết kiệm chi phí mua sách giấy mà còn mang lại tính linh hoạt cao, cho phép tiếp cận nội dung giải trí mọi lúc, mọi nơi. Bên cạnh đó, các hệ thống đọc truyện thông thường chủ yếu phân phối nội dung một chiều từ ban biên tập. Nhóm tác giả hướng đến việc xây dựng một nền tảng mở kết hợp cộng đồng: nơi người dùng không chỉ đọc truyện mà còn có thể tự do sáng tạo, đăng tải các tác phẩm do chính mình sáng tác, nhận phản hồi, góp ý từ cộng đồng qua bình luận, đánh giá và nhận hỗ trợ tài chính từ độc giả.

Nhóm tác giả xác định 5 mục tiêu nghiên cứu cụ thể cần hoàn thành bao gồm:

1. Nghiên cứu và áp dụng các công nghệ, thư viện và kỹ thuật hiện đại để phát triển website.
2. Phát triển ứng dụng độc lập, dễ dàng triển khai trên nhiều môi trường khác nhau, hướng đến phục vụ lượng lớn người dùng.
3. Ứng dụng đáp ứng được đầy đủ các chức năng cơ bản của một website đọc truyện trực tuyến, đồng thời ứng dụng trí tuệ nhân tạo (AI) để hỗ trợ công tác quản lý và kiểm duyệt nội dung.
4. Xây dựng giao diện người dùng dễ tiếp cận và có tính thẩm mỹ.
5. Đảm bảo hệ thống có khả năng mở rộng và phát triển các tính năng mới trong tương lai.

Phạm vi nghiên cứu của đề tài được giới hạn trong việc phân tích quy trình phát triển phần mềm ứng dụng web; khảo sát, đối sánh hai nền tảng đọc truyện trực tuyến quốc tế là Webtoon và Tapas; ứng dụng hệ sinh thái Java (Spring Boot, Spring Security), React JS, hệ quản trị cơ sở dữ liệu MySQL, các thư viện Python (TensorFlow, Pandas, Flask) cho tác vụ học máy, cùng các giải pháp tích hợp giao tiếp dữ liệu (JWT, Axios) và dịch vụ bên thứ ba (cổng thanh toán VNPAY, dịch vụ lưu trữ đám mây Azure).

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

Khóa luận áp dụng các cơ sở lý thuyết công nghệ và mô hình phát triển phần mềm bao gồm:

• Ngôn ngữ lập trình Java: Khai thác các đặc tính hướng đối tượng, kiến trúc máy ảo Java (JVM) với triết lý "Viết một lần, thực thi khắp nơi" (Write Once, Run Anywhere - WORA), cơ chế quản lý bộ nhớ thông qua bộ thu gom rác tự động (Garbage Collection), khả năng xử lý đa luồng (multi-threading) và xử lý ngoại lệ an toàn.
• Hệ sinh thái Spring Framework: Trọng tâm là Spring Boot với tính năng tự động cấu hình (auto-configuration), máy chủ nhúng (embedded server) như Tomcat/Jetty và công cụ quản lý thư viện Maven/Gradle; kết hợp cùng Spring Security nhằm thực hiện xác thực người dùng (Authentication), phân quyền (Authorization) theo vai trò và ngăn ngừa các lỗ hổng bảo mật như CSRF, SQL Injection, XSS.
• Thư viện React JS: Ứng dụng mô hình lập trình giao diện dựa trên các thành phần (Component-based architecture), cú pháp JSX, cơ chế DOM ảo (Virtual DOM) giúp tối ưu hiệu năng hiển thị và mô hình ứng dụng trang đơn (Single-Page Application - SPA) kết hợp thư viện điều hướng React Router và giao tiếp API qua Axios.
• Hệ quản trị cơ sở dữ liệu MySQL: Sử dụng hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) chuẩn SQL, vận hành theo mô hình Client-Server phục vụ lưu trữ, truy xuất dữ liệu có cấu trúc.
• Ngôn ngữ Python và các thư viện học máy: Sử dụng Python kết hợp các thư viện Flask, TensorFlow và Pandas nhằm xây dựng dịch vụ API độc lập, phục vụ huấn luyện và thực thi mô hình phân loại, phát hiện hình ảnh nhạy cảm tải lên hệ thống.

Phương pháp nghiên cứu thực tế được triển khai:

• Phương pháp phân tích và khảo sát thực nghiệm: Khảo sát chi tiết tính năng, ưu điểm và nhược điểm trên hai hệ thống truyện tranh trực tuyến đang hoạt động thực tế là Webtoon và Tapas.
• Phương pháp phân tích và mô hình hóa hướng đối tượng: Sử dụng ngôn ngữ mô hình hóa thống nhất (UML) để phân tích yêu cầu nghiệp vụ, xây dựng lược đồ Use Case tổng quát và chi tiết, lược đồ lớp (Class Diagram), lược đồ tuần tự (Sequence Diagram).
• Phương pháp thiết kế dữ liệu quan hệ: Chuẩn hóa dữ liệu và xây dựng lược đồ cơ sở dữ liệu quan hệ gồm 28 bảng thực thể.
• Phương pháp kiểm thử phần mềm: Áp dụng kỹ thuật kiểm thử chức năng (Functional Testing) dựa trên các ca kiểm thử (Test Cases) xác định, ghi nhận lỗi bằng báo cáo lỗi (Bug Report).

Thiết kế và triển khai

Hệ thống được thiết kế theo kiến trúc phân tầng độc lập giữa giao diện người dùng và máy chủ xử lý logic, giao tiếp thông qua giao thức RESTful API:

• Phân hệ Frontend: Xây dựng bằng React JS, tổ chức thành các component độc lập, tái sử dụng cao. Giao diện xử lý hiển thị danh sách truyện, trình đọc truyện, trang cá nhân, giao diện quản lý tác giả và bảng điều khiển của quản trị viên. Việc gọi API máy chủ được thực hiện qua thư viện Axios, kết hợp kiểm soát trạng thái phiên làm việc.
• Phân hệ Backend: Phát triển trên nền Spring Boot (Java), đóng vai trò cung cấp API dịch vụ, kiểm soát logic nghiệp vụ và xác thực phân quyền qua Spring Security bằng mã thông báo JSON Web Token (JWT). Các yêu cầu từ máy khách được lọc và xác thực quyền hạn dựa trên vai trò trước khi chuyển đến tầng xử lý dịch vụ (Service) và tương tác dữ liệu (Repository).
• Phân hệ Trí tuệ nhân tạo (AI Service): Tách biệt thành một microservice viết bằng Python sử dụng Flask framework. Khi người dùng tải ảnh chương truyện mới lên hệ thống, dịch vụ này sử dụng mô hình học máy xây dựng từ TensorFlow để quét và phân tích xem hình ảnh có chứa nội dung nhạy cảm hay không. Nếu phát hiện vi phạm, hệ thống tự động cảnh báo và chuyển sang trạng thái chờ phê duyệt thủ công từ Admin.
• Hạ tầng lưu trữ và Dịch vụ ngoài: Toàn bộ dữ liệu quan hệ được lưu trữ trong hệ quản trị CSDL MySQL. Dữ liệu tệp hình ảnh chương truyện được lưu trữ thông qua dịch vụ đám mây Azure Blob Storage. Nghiệp vụ nạp tiền vào ví điện tử được tích hợp trực tiếp với cổng thanh toán VNPAY Sandbox.
• Kiểm thử và ghi nhận lỗi hệ thống: Quá trình kiểm thử chức năng đã xây dựng danh sách các ca kiểm thử cho từng nghiệp vụ. Kết quả kiểm thử phát hiện các lỗi giao diện và xử lý dữ liệu logic, điển hình như: không giới hạn số ký tự tiêu đề truyện, lỗi ô tìm kiếm trong danh mục cá nhân, cho phép nhập ký tự chữ vào trường nhập số chương, không hiển thị hộp thoại xác nhận khi xóa thể loại, tạo trùng lặp gói tài khoản Premium và thanh chân trang (footer) hiển thị lệch vị trí.

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

Chương 1: Tổng quan về đề tài

Chương này trình bày lý do lựa chọn đề tài xuất phát từ nhu cầu giải trí và xu hướng chuyển dịch từ truyện giấy sang nền tảng số. Tác giả xác định 5 mục tiêu phát triển hệ thống và phạm vi nghiên cứu liên quan đến các công nghệ phần mềm hiện đại. Nội dung chương tập trung phân tích, so sánh ưu và nhược điểm của hai nền tảng truyện tranh trực tuyến tiêu biểu:

Tên website	Địa chỉ liên kết	Điểm mạnh	Điểm yếu
Webtoon	https://www.com/en	Giao diện dễ nhìn, dễ sử dụng; có Webtoon Shop bán đồ lưu niệm; số lượng truyện phong phú, đa dạng thể loại; có ứng dụng di động; chức năng đầy đủ, chi tiết.	Chỉ hỗ trợ ngôn ngữ tiếng Anh; một số thành phần giao diện chưa thực sự bắt mắt.
Tapas	https://tapas.io/	Giao diện dễ nhìn, dễ sử dụng; cung cấp cả truyện tranh và tiểu thuyết; số lượng phong phú, đa dạng; xây dựng cộng đồng trên Discord, Instagram, Tiktok; có Merch Shop; có ứng dụng di động; chức năng đầy đủ, chi tiết.	Chỉ hỗ trợ ngôn ngữ tiếng Anh; tương đối khó tiếp cận đối với người dùng mới bắt đầu.

Từ kết quả khảo sát, tác giả xây dựng kết quả dự kiến của đề tài với 4 nhóm vai trò tương tác: Khách vãng lai, Người dùng thông thường, Người dùng Premium và Quản trị viên (Admin).

Chương 2: Cơ sở lý thuyết liên quan

Chương 2 tổng hợp các kiến thức lý thuyết nền tảng làm cơ sở triển khai hệ thống:

• Phân tích ngôn ngữ lập trình Java với các ưu điểm về tính độc lập nền tảng, mô hình đa luồng, cơ chế thu gom rác tự động, đồng thời nêu rõ nhược điểm về tốc độ thực thi và mức độ chiếm dụng bộ nhớ lớn hơn các ngôn ngữ bậc thấp.
• Trình bày kiến trúc Spring Boot và Spring Security, nhấn mạnh khả năng giảm thiểu mã cấu hình, nhúng máy chủ trực tiếp và cơ chế bảo vệ hệ thống trước các cuộc tấn công mạng.
• Trình bày thư viện React JS với cơ chế Virtual DOM, kiến trúc thành phần (Class component và Function component), ưu điểm hỗ trợ xây dựng SPA và nhược điểm chỉ đóng vai trò tầng hiển thị (View), không tích hợp sẵn kiến trúc MVC hoàn chỉnh.
• Khái quát hệ quản trị cơ sở dữ liệu quan hệ MySQL về tính năng an toàn, hiệu năng truy vấn, cùng đặc điểm của ngôn ngữ Python và hệ thống thư viện phục vụ khoa học dữ liệu, học máy (Pandas, TensorFlow).

Chương 3: Phân tích yêu cầu ứng dụng

Chương 3 thiết lập các bảng đặc tả yêu cầu kỹ thuật và nghiệp vụ của toàn bộ dự án:

• Yêu cầu chức năng: Phân định rõ trách nhiệm cho 4 nhóm tác nhân. Khách có quyền tra cứu, đọc truyện, tìm kiếm truyện và tìm kiếm tác giả. Người dùng có thêm các quyền quản lý truyện cá nhân, bình luận, đánh giá từ 1 đến 5 sao, quản lý ví điện tử, nạp/rút tiền, donate cho tác giả, theo dõi tài khoản, xem thống kê cá nhân và báo cáo nội dung vi phạm. Người dùng Premium có quyền đọc, tương tác với truyện giới hạn và nâng cấp tác phẩm của mình lên hạng mục Premium. Quản trị viên chịu trách nhiệm quản lý thể loại, kiểm duyệt/xóa ảnh nhạy cảm, khóa/mở tài khoản, quản lý giá bản quyền lượt đọc và thống kê doanh thu hệ thống.
• Yêu cầu phi chức năng: Hệ thống phải đáp ứng thời gian tìm kiếm tối đa dưới 3 giây; hỗ trợ nhiều phiên truy cập đồng thời; giao diện thân thiện với mọi lứa tuổi; bảo đảm an toàn dữ liệu, sao lưu định kỳ; và cho phép linh hoạt điều chỉnh quy định, công thức tính tiền lợi nhuận.
• Đặc tả Use Case chi tiết: Trình bày lược đồ Use Case tổng quát và đặc tả chi tiết 22 ca sử dụng (từ UC01 đến UC22). Đáng chú ý, ca sử dụng Đăng ký tài khoản (UC01) và Lấy lại mật khẩu (UC02) bắt buộc xác thực qua mã OTP gửi về email với thời gian hết hạn nghiêm ngặt là 5 phút. Quy trình nạp/rút tiền ví điện tử và donate tác giả yêu cầu nhập mật khẩu xác thực tài khoản nhằm đảm bảo an toàn giao dịch.

Chương 4: Phân tích, thiết kế hệ thống

Chương 4 tập trung vào việc mô hình hóa hệ thống phần mềm:

• Xây dựng lược đồ lớp (Class Diagram) tổng thể phản ánh mối quan hệ giữa các đối tượng thực thể trong ứng dụng.
• Thiết kế chi tiết cơ sở dữ liệu quan hệ bao gồm lược đồ quan hệ và mô tả thuộc tính của 28 bảng dữ liệu: ComicBooks, Genres, ComicBooks_Genres, Users, Admin, Chapters, ChapterImages, Comments, Ratings, ReportReason, ComicReport, CommentReport, ComicReportReasons, CommentReportReasons, FavoritrComic, HistoryReading, Wallets, Transactions, PackagePremium, UserPremium, annouce, Bookmark, Follow, Donate, HistoryIncreaseView, InvalidToken, message, và Price.
• Xây dựng hệ thống lược đồ tuần tự (Sequence Diagram) mô tả chi tiết tương tác thông điệp giữa các tầng đối tượng cho các luồng nghiệp vụ: Đăng nhập, Đăng ký, Lấy lại mật khẩu, Đổi mật khẩu, Tìm kiếm nâng cao, Quản lý truyện và chương truyện, Đánh giá, Bình luận, Đăng ký và nạp tiền ví, Báo cáo vi phạm, Nhắn tin, Phê duyệt ảnh nhạy cảm do AI phát hiện, Khóa/mở tài khoản và Quản lý đơn giá chia sẻ lợi nhuận theo lượt xem.

Chương 5: Kiểm thử ứng dụng

Chương 5 trình bày toàn bộ quy trình đánh giá chất lượng phần mềm thông qua việc lập danh sách ca kiểm thử và báo cáo lỗi (Bug Report). Các biên bản ghi nhận lỗi được nhóm tác giả lập chi tiết bao gồm:

• Lỗi không giới hạn số lượng ký tự cho tiêu đề truyện.
• Thanh tìm kiếm trong mục quản lý "Truyện của tôi" không phản hồi thao tác.
• Lỗi không cập nhật được thông tin truyện đã lưu.
• Hiển thị thông báo thất bại trong khi hệ thống đã xóa truyện thành công.
• Trường nhập số chương cho phép nhập ký tự chữ ("e").
• Chức năng xóa thể loại không hiển thị hộp thoại cảnh báo xác thực thao tác.
• Cho phép đăng ký tài khoản với tên đăng nhập (username) chứa khoảng trắng.
• Lỗi không hiển thị thông báo phản hồi khi cập nhật ảnh đại diện (cả khi thành công lẫn thất bại).
• Thanh hiển thị chân trang (footer) xuất hiện sai vị trí giao diện.
• Lỗi logic cho phép tạo 2 gói tài khoản Premium có thông số hoàn toàn giống nhau.
• Cho phép người dùng gửi nhiều lần báo cáo vi phạm với cùng một lý do. Các lỗi trên được phân loại rõ ràng thành hai danh mục: danh sách lỗi đã khắc phục và danh sách lỗi còn tồn đọng cần xử lý.

Chương 6: Kết luận

Chương cuối tổng kết toàn bộ kết quả triển khai hệ thống so với mục tiêu đề ra ban đầu, đánh giá mức độ hoàn thiện các phân hệ chức năng, đồng thời chỉ rõ những điểm hạn chế về mặt công nghệ và đề xuất hướng phát triển tiếp theo cho sản phẩm.

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

Khóa luận đã hoàn thành các kết quả kỹ thuật và đóng góp thực tiễn sau:

• Kết quả chức năng: Xây dựng thành công website đọc truyện tranh trực tuyến với đầy đủ 4 nhóm vai trò (Khách, Người dùng, Người dùng Premium, Admin). Hệ thống hỗ trợ hoàn chỉnh các luồng nghiệp vụ xuất bản nội dung (đăng tải truyện, phân chia chương, tải và sắp xếp ảnh), đọc truyện, tìm kiếm đa tiêu chí, tương tác bình luận, đánh giá từ 1 đến 5 sao và theo dõi tác giả.
• Tích hợp thanh toán và ví điện tử: Triển khai thành công phân hệ ví điện tử nội bộ, cho phép nạp tiền qua cổng thanh toán VNPAY, rút tiền về tài khoản ngân hàng và chuyển tiền ủng hộ (donate) trực tiếp đến tác giả cùng lời nhắn xác thực bằng mật khẩu.
• Tích hợp trí tuệ nhân tạo: Tích hợp mô hình học máy xử lý ảnh bằng TensorFlow, hỗ trợ phát hiện tự động các hình ảnh nhạy cảm do người dùng đăng tải trong chương truyện, kết hợp quy trình phê duyệt thủ công của Admin khi nhận được khiếu nại hoặc yêu cầu duyệt lại.
• Đóng góp so với các nghiên cứu và website hiện hành: Nhóm tác giả đã giải quyết được hạn chế lớn của các nền tảng truyện tranh hiện nay vốn chỉ đóng vai trò phân phối một chiều. Đề tài xây dựng một mô hình cộng đồng mở, hỗ trợ cá nhân tự sáng tác và xuất bản tác phẩm độc lập, đồng thời thiết lập cơ chế kinh tế hóa nội dung (monetization) thông qua việc phân chia lợi nhuận theo lượt xem (lượt view) và nguồn tài trợ trực tiếp từ độc giả.

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

Khóa luận thẳng thắn chỉ ra các hạn chế và đề ra phương hướng nghiên cứu mở rộng:

• Hạn chế:
  • Khả năng lọc và phân loại nội dung truyện tranh tự động vẫn cần được nâng cao và tối ưu độ chính xác hơn (đây cũng là điểm lưu ý chính được TS. Lê Vĩnh Thịnh nêu trong Phiếu nhận xét của Giáo viên hướng dẫn).
  • Quá trình kiểm thử ở Chương 5 vẫn còn một số lỗi phần mềm nằm trong "Danh sách lỗi chưa xử lý" chưa được khắc phục triệt để trước thời điểm nghiệm thu.
  • Ứng dụng hiện mới chỉ phát triển trên nền tảng trình duyệt web máy tính/di động, chưa xây dựng ứng dụng độc lập trên các hệ điều hành di động (Android/iOS).
• Hướng nghiên cứu tiếp:
  • Nâng cao năng lực và độ chính xác của mô hình trí tuệ nhân tạo trong việc lọc nội dung hình ảnh và văn bản của truyện.
  • Khắc phục toàn diện các lỗi phần mềm còn tồn đọng trong danh sách kiểm thử.
  • Phát triển thuật toán gợi ý truyện cá nhân hóa (Recommendation System) dựa trên lịch sử đọc và sở thích của từng người dùng.
  • Mở rộng phát triển ứng dụng di động hoàn chỉnh bằng các công nghệ như React Native nhằm tối ưu hóa trải nghiệm đọc truyện trên thiết bị cầm tay.

Giá trị tham khảo

Báo cáo khóa luận là tài liệu tham khảo có giá trị học thuật và ứng dụng thực tiễn đối với:

• Sinh viên chuyên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Là tài liệu mẫu hữu ích trong việc thực hiện đồ án tốt nghiệp, cung cấp quy trình phát triển phần mềm chuẩn mực từ bước khảo sát hiện trạng, phân tích yêu cầu, thiết kế hệ thống hướng đối tượng cho đến lập tài liệu kiểm thử.
• Các lập trình viên phát triển ứng dụng web toàn diện (Full-stack): Tham khảo kiến trúc tích hợp giữa Spring Boot (Backend) và React JS (Frontend), giải pháp bảo mật với Spring Security và JWT, cũng như phương thức tích hợp thanh toán VNPAY và triển khai dịch vụ học máy Python độc lập.
• Phần nội dung đáng giá nhất để tham khảo: Chương 3 (với bảng đặc tả chi tiết 22 Use Case, chỉ rõ các luồng cơ bản, luồng phụ và luồng ngoại lệ) và Chương 4 (với thiết kế CSDL hoàn chỉnh gồm 28 bảng có quan hệ chặt chẽ, hỗ trợ xử lý đầy đủ các nghiệp vụ truyện tranh và ví điện tử).

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

1. Hệ thống xử lý quy trình kiểm duyệt hình ảnh tải lên như thế nào khi người dùng thêm chương truyện mới? Khi người dùng tải danh sách hình ảnh của chương truyện lên, hệ thống sẽ tự động kích hoạt dịch vụ AI (sử dụng thư viện Python/TensorFlow) để kiểm tra nội dung nhạy cảm. Nếu ảnh hợp lệ, chương truyện sẽ được xuất bản thành công. Trường hợp phát hiện ảnh không hợp lệ, hệ thống sẽ cảnh báo lỗi; người dùng có quyền hủy bỏ hoặc gửi "Yêu cầu duyệt lại". Khi đó, quản trị viên (Admin) sẽ truy cập chức năng duyệt ảnh để xem xét phê duyệt thủ công hoặc từ chối xuất bản.

2. Phân hệ ví điện tử trên website hỗ trợ những luồng giao dịch tài chính cụ thể nào? Ví điện tử cho phép người dùng mở ví cá nhân, nạp tiền vào ví qua cổng thanh toán VNPAY, rút tiền từ ví về tài khoản ngân hàng, nâng cấp tài khoản lên gói Premium, và thực hiện donate (ủng hộ tiền kèm lời nhắn) cho tác giả bộ truyện với yêu cầu xác thực mật khẩu. Ngoài ra, hệ thống còn hỗ trợ tự động cộng tiền lợi nhuận cho tác giả dựa trên số lượt đọc (view) truyện theo bảng giá do Admin thiết lập.

3. Tài khoản Premium mang lại những đặc quyền gì khác biệt so với tài khoản thông thường? Tài khoản Người dùng Premium có đặc quyền tương tác trực tiếp với các bộ truyện thuộc danh mục Premium (bao gồm quyền đọc nội dung giới hạn, bình luận và đánh giá bộ truyện đó). Ngoài ra, tác giả sở hữu tài khoản Premium còn có quyền đăng tải hoặc nâng cấp các bộ truyện cá nhân của mình lên trạng thái truyện Premium để tiếp cận phân khúc độc giả trả phí.

4. Cơ chế bảo mật và xác thực tài khoản được thiết kế như thế nào trong các ca sử dụng đăng ký và quên mật khẩu? Trong ca sử dụng Đăng ký tài khoản (UC01) và Lấy lại mật khẩu (UC02), hệ thống áp dụng cơ chế xác thực hai lớp qua thư điện tử. Sau khi người dùng cung cấp thông tin hợp lệ, hệ thống sẽ gửi một mã OTP về email đã đăng ký. Mã OTP này có thời hạn hiệu lực chính xác trong vòng 5 phút. Nếu người dùng nhập sai hoặc để quá thời gian quy định, phiên giao dịch sẽ bị hủy và hệ thống yêu cầu thao tác lại từ đầu.

5. Những lỗi giao diện và logic dữ liệu tiêu biểu nào đã được phát hiện trong quá trình kiểm thử hệ thống? Biên bản Bug Report ở Chương 5 đã ghi nhận nhiều lỗi thực tế như: hệ thống không giới hạn độ dài ký tự của tiêu đề truyện; thanh tìm kiếm trong giao diện "Truyện của tôi" không hoạt động; trường nhập số thứ tự chương chấp nhận ký tự chữ ("e"); chức năng xóa thể loại thiếu hộp thoại xác nhận; cho phép tạo username có khoảng trắng; và lỗi logic cho phép quản trị viên khởi tạo hai gói Premium có cấu hình giống hệt nhau.

Kết luận

Khóa luận tốt nghiệp của hai sinh viên Lê Đình Bảo và Lại Văn Quý đã hoàn thành việc xây dựng website đọc truyện tranh trực tuyến độc lập, kết hợp hiệu quả giữa Spring Boot, React JS và dịch vụ AI hỗ trợ kiểm duyệt. Hệ thống giải quyết tốt bài toán tương tác hai chiều trong cộng đồng truyện tranh thông qua các tính năng đăng tải tác phẩm cá nhân, ví điện tử nội bộ và cơ chế chia sẻ lợi nhuận theo lượt xem. Toàn bộ báo cáo được trình bày khoa học với hệ thống lược đồ UML chi tiết, thiết kế CSDL 28 bảng hoàn chỉnh và biên bản kiểm thử phản ánh trung thực kết quả thực nghiệm. Công trình đáp ứng tốt các chuẩn mực kỹ thuật của một đồ án tốt nghiệp chuyên ngành Công nghệ Phần mềm và có giá trị tham khảo ứng dụng thực tế cao.

Trích đoạn nội dung tài liệu

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

Ngoài ra, khi xây dựng website đọc truyện online này, nhóm còn muốn tạo ra một cộng đồng về truyện tranh, người dùng không chỉ lên đọc truyện đã có sẵn từ những tác giả trước mà còn có thể thỏa sức sáng tạo để đăng tải những bộ truyện do chính mình là tác giả và có thể nhận được những sự góp ý của cộng đồng thông qua bình luận và đánh giá để rút kinh nghiệm. Điều này giúp những người ưu thích truyện tranh có thể thỏa mãn đam mê và biết đâu đó có thể phát hiện tài năng của bản thân. Với những lí do trên, nhóm quyết định lựa chọn đề tài xây dựng website đọc truyện tranh online với mục tiêu cung cấp nơi giải trí cho những người ưu thích truyện và là nơi đăng tải truyện cho những tác giả để có thể đưa những sản phẩm của mình ra với cộng đồng. MỤC TIÊU ĐỀ TÀI Website đọc truyện tranh online chỉ ra những mục tiêu mà nhóm sinh viên phải hoàn thành gồm: － Nghiên cứu và áp dụng các công nghệ, thư viện và kỹ thuật để phát triển website.

－ Phát triển ứng dụng độc lập, dễ dàng triển khai trên nhiều môi trường khác nhau. Website hướng đến nhiều người dùng. － Ứng dụng đáp ứng được những chức năng cơ bản của một website đọc truyện. Ứng dụng AI để hỗ trợ quản lý nội dung.

－ Giao diện dễ tiếp cận và hấp dẫn. － Có khả năng mở rộng và phát triển trong tương lai. PHẠM VI NGHIÊN CỨU 1. Nghiên cứu về công nghệ Hình 1-1.

Các công nghệ được nghiên cứu － Tìm hiểu về quy trình thực hiện 1 dự án phần mềm. － Tìm hiểu về các công nghệ cần thiết để xây dựng ứng dụng web như React JS, Spring Boot, Spring Security, MySQL.… － Tìm hiểu một số thư viện python để tích hợp mô hình học máy cho quản lý nội dung và xây dựng API như pandas, tensorflow, flask… － Tìm hiểu 1 số thư viện khác như JWT, Axios hay các API của bên thứ 3 như VNPAY, Azure, … 2 1. Phân tích những web đọc truyện trên internet Tham khảo một số trang web như Webtoon, Tapas. Webtoon Link website: https://www.com/en Hình 1-2.

Trang web đọc truyện online Webtoon Điểm mạnh: - Giao diện dễ nhìn, dễ sử dụng - Có trang Webtoon Shop bán đồ liên quan tới những bộ truyện. - Số lượng truyện phong phú, đa dạng thể loại - Có xây dựng app mobile - Các chức năng đầy đủ, chi tiết Điểm yếu: - Chỉ hỗ trợ ngôn ngữ tiếng anh - Một số giao diện chưa bắt mắt lắm. Tapas Link Website: https://tapas.io/ Hình 1-3. Trang web đọc truyện online Tapas Điểm mạnh: - Giao diện dễ nhìn, dễ sử dụng - Ngoài truyện tranh ra còn có tiểu thuyết.

- Số lượng truyện phong phú, đa dạng thể loại - Xây dựng các cộng đồng trên Discord, Instagram, Tiktok - Có trang Merch Shop bán đồ liên quan tới các bộ truyện. - Có xây dựng app mobile - Các chức năng đầy đủ, chi tiết Điểm yếu: - Chỉ hỗ trợ ngôn ngữ tiếng anh. - Khó tiếp cận cho người mới bắt đầu sử dụng 1.