CHƯƠNG 1: GIỚI THIỆU CHUNG 1. Lý do chọn đề tài - Truyện tranh, phim ảnh đã không còn xa lạ gì với chúng ta, những thập niên trước đây, chúng ta phải ra tận nhà sách để mua được quyển truyện mình yêu thích, đọc đi đọc lại nó. Tuy nhiên, với sự phát triển của công nghệ, hiện nay, ta có thể đọc truyện trực tuyến tại nhà và cập nhật các chương truyện mới được sáng tác từ tác giả một cách nhanh chóng cũng như giao tiếp giữa những người có cùng sở thích đọc truyện với nhau. - Một trang web đọc truyện tranh sẽ cung cấp một nơi cho mọi người trò truyện, thảo luận về bộ truyện yêu thích cũng như dễ dàng tìm kiếm được truyện mình muốn hơn.
Là một nơi để mọi người có thể giải trí sau những giờ học tập, làm việc căng thẳng. Mục tiêu - Cung cấp cho độc giả một nền tảng để chọn và đọc online bộ truyện mình thích. - Giúp người dịch có thể đăng tải chương truyện mình đã dịch cho mọi người xem và quản lý những chương truyện đó. - Chọn phép người dùng biết được mức độ yêu thích của từng bộ truyện - Cho phép độc giả tìm truyện theo thể loại yêu thích.
- Cung cấp một trải nghiệm trực tuyến tốt hơn cho người dùng. Phạm vi nghiên cứu - Các bài toán về tìm kiếm, quản lý. - Giao diện website được xây dựng dựa trên công nghệ React JS cho phần giao diện và Supabase cho phần Backend. - Hệ thống tài khoản và phân quyền.
- Hệ thống cơ sở dữ liệu. - Lưu trữ hình ảnh bằng Supabase Storage. Đối tượng nghiên cứu - Các website đọc truyện tranh hiện có. - Thói quen của người dùng khi đọc truyện tranh và những khó khăn họ gặp phải khi sử dụng những website đọc truyện khác.
- Tất cả những gì cần thiết để xây dựng một website đọc truyện tranh đáp ứng yêu cầu người dùng. Các công nghệ: - Ngôn ngữ lập trình: Typescript. - Framework: ReactJS, AntDesign. - Thiết kế UI: Figma.
- Vẽ UML: PlantUML, WondershareEdrawMax. - Quản lý code: Github. - Hỗ trợ code: ChatGPT. Phương pháp nghiên cứu - Tìm kiếm các sản phẩm tương tự trên thị trường để rút ra ưu, nhược điểm của các ứng dụng đó (MangaDex, MangaRaw, Mangakakalot,…).
- Tìm hiểu các công nghệ liên quan đến quản lý, tìm kiếm. - Thiết kế giao diện dựa vào các yêu cầu đã chắt lọc, từ đó tìm hiểu các công nghệ, thuật toán cần thiết để xây dựng ứng dụng dựa trên thiết kế đó. - Tham khảo ý kiến giảng viên hướng dẫn và chỉnh sửa lại sao cho phù hợp để đạt kết quả tốt nhất cho sản phẩm. 2 CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG 2.1: Logo PlantUML PlantUML là một công cụ sử dụng ngôn ngữ XML giúp ta tạo ra các biểu đồ UML (Unified Modeling Language) một cách dễ dàng.
Người sử dụng có thể viết các đoạn mã XML để vẽ nhiều sơ đồ UML khác nhau, chẳng hạn như sơ đồ lớp, sơ đồ use case, sequence diagram, activity diagram, và nhiều loại biểu đồ khác. PlantUML sau đó chuyển các đoạn mã này thành các sơ đồ UML tương ứng. PlantUML có thể được tích hợp vào nhiều môi trường phát triển và hỗ trợ xuất nhiều định dạng ảnh khác nhau như PNG, SVG, và PDF. Việc sử dụng PlantUML giúp tiết kiệm thời gian và giảm thiểu các lỗi khi vẽ các biểu đồ bằng tay.2: Logo Figma Figma là một công cụ thiết kế dùng trong lĩnh vực thiết kế giao diện (UI) và trải nghiệm người dùng (UX).
Ứng dụng hỗ trợ ta trong việc cùng nhau để phối hợp thiết kế trong một dự án. Dưới đây là một số điểm nổi bật về Figma: • Trực tuyến và Đa Nền Tảng: Figma là một ứng dụng trực tuyến, không yêu cầu cài đặt và có thể sử dụng trên nhiều nền tảng như Windows, macOS, và Linux. Ta có thể truy cập dự án từ bất kỳ máy tính nào chỉ cần có kết nối internet. • Hợp Tác Trực Tuyến: Figma cho phép nhiều người cùng làm việc trên cùng một bản thiết kế cùng một lúc, điều này giúp tăng cường sự hợp tác và giảm thiểu các vấn đề liên quan đến việc đồng bộ thông tin giữa các thành viên trong nhóm.
• Chia Sẻ Dễ Dàng: Ta có thể chia sẻ thiết kế của mình bằng cách tạo liên kết chia sẻ có thời hạn hoặc liên kết có quyền truy cập chỉ xem. Điều này tao điều kiện cho nhà thiết kế trong việc thu thập phản hồi từ đồng nghiệp hoặc khách hàng. • Tích hợp API: Figma có API mạnh mẽ, cho phép tích hợp với các công cụ và dịch vụ khác trong quy trình làm việc. • Tích Hợp Dễ Dàng: Figma có thể tích hợp với nhiều công cụ khác nhau như Slack, Jira, Confluence, và nhiều ứng dụng khác.
4 • Tính năng thiết kế đa dạng: Figma cung cấp các công cụ mạnh mẽ để thiết kế giao diện người dùng, từ việc tạo các thành phần (components) tái sử dụng đến việc vẽ và các hiệu ứng. • Thư Viện và component: Ta có thể tạo thư viện và components để giữ cho thiết kế của bạn có tính nhất quán và dễ bảo trì. Figma đã trở thành một trong những công cụ quan trọng trong cộng đồng thiết kế và phát triển phần mền bời tính linh hoạt, khả năng hợp tác với nhau, và sự tiện lợi của nó.3: Logo Ant Design Ant Design là một bộ công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) được phát triển và duy trì bởi đội ngũ tại Ant Financial, một phần của tập đoàn Alibaba. Được giới thiệu lần đầu tiên vào năm 2015, Ant Design đã trở thành một trong những bộ công cụ thiết kế UI/UX phổ biến và được ưa chuộng trong cộng đồng phát triển web.
Dưới đây là một số điểm chính về Ant Design: • Tính Nguyên Tắc và Hướng Dẫn Thiết Kế: Ant Design tuân theo một số nguyên tắc và hướng dẫn thiết kế cụ thể để tạo ra giao diện người dùng hiệu quả và dễ sử dụng. Điều này giúp đảm bảo sự nhất quán trong trải nghiệm người dùng trên nhiều ứng dụng và dự án. 5 • Tính Chất Responsive: Ant Design được hỗ trợ thiết kế responsive và thân thiện với ứng dụng di động, giúp đảm bảo rằng ứng dụng được thiết kế sẽ hoạt động mượt mà trên nhiều loại thiết bị và màn hình có kích thước khác nhau. • Thư Viện Component Phong Phú: Ant Design cung cấp một bộ sưu tập phong phú các components giao diện như nút, ô nhập liệu, bảng, menu, đồng thời còn có các components nâng cao khác như DatePicker, Carousel, v.
Điều này giúp giảm thời gian phát triển và đồng thời đảm bảo sự đồng nhất trong giao diện của ứng dụng. • Hỗ Trợ Theming và Tùy Chỉnh: Ant Design hỗ trợ theming, cho phép dễ dàng thay đổi màu sắc và phong cách của ứng dụng để phản ánh thương hiệu hoặc yêu cầu thiết kế cụ thể. • Tương Tác và Hiệu Ứng Mượt: Các components của Ant Design đi kèm với tương tác và hiệu ứng mượt, giúp tăng cường trải nghiệm người dùng và tạo ra giao diện sáng tạo và thú vị. • Hỗ Trợ Đa Ngôn Ngữ: AntDesign hỗ trợ đa ngôn ngữ, điều này làm cho nó phù hợp với các dự án với sự tham gia của nhiều quốc gia khác nhau.
Ant Design không chỉ là một bộ công cụ thiết kế giao diện, mà còn là một cộng đồng lớn với tài liệu phong phú và sự hỗ trợ từ cộng đồng, giúp người phát triển tận dụng được tối đa tiềm năng của nó.4: Logo Supabase Supabase là một nền tảng phát triển ứng dụng dựa trên cơ sở dữ liệu SQL mà không cần quản lý cơ sở dữ liệu của bạn. Được xây dựng trên PostgreSQL, Supabase cung cấp 6 một số dịch vụ chủ chốt để giúp xây dựng ứng dụng web và di động một cách nhanh chóng và dễ dàng. Dưới đây là một số điểm chính về Supabase: • Database-as-a-Service (DaaS): Supabase cung cấp một cơ sở dữ liệu PostgreSQL đầy đủ chức năng dưới dạng dịch vụ. Ta có thể tận hưởng sức mạnh và linh hoạt của PostgreSQL mà không phải lo lắng về việc quản lý và duy trì cơ sở dữ liệu.
• Realtime Database: Supabase hỗ trợ cập nhật realtime cho dữ liệu, cho phép ứng dụng của bạn tự động cập nhật khi có thay đổi trong cơ sở dữ liệu, giúp tạo ra trải nghiệm người dùng động và nhanh nhạy. • Authentication và Authorization: Nền tảng này cung cấp các dịch vụ xác thực và phân quyền, giúp quản lý người dùng, đảm bảo tính bảo mật và quyền riêng tư trong ứng dụng. • Serverless Functions: Supabase hỗ trợ việc triển khai các hàm serverless, cho phép thực thi code backend mà không cần phải quản lý cơ sở hạ tầng. • RESTful API và GraphQL: Cung cấp RESTful API và GraphQL cho phép ứng dụng của giao tiếp với cơ sở một cách linh hoạt.
• Storage: Supabase cung cấp dịch vụ lưu trữ cho các tệp và hình ảnh, hỗ trợ quản lý và lưu trữ các tài nguyên đa phương tiện của ứng dụng. • Developer-Friendly: Supabase được thiết kế để làm cho việc phát triển ứng dụng dễ dàng và linh hoạt. Nó có tài liệu rất phong phú, và cộng đồng người dùng tích cực và hỗ trợ. • Open Source: Supabase là một dự án mã nguồn mở, cho phép kiểm soát hoặc tùy chỉnh mã nguồn theo nhu cầu người dùng.
Supabase thường được xem là một giải pháp chắc chắc và mạnh mẽ cho việc phát triển ứng dụng web và di động mà không cần phải lo lắng về việc quản lý cơ sở dữ liệu cũng như cơ sở hạ tầng backend.5: Logo TypeScript TypeScript là một ngôn ngữ lập trình mã nguồn mở phát triển bởi Microsoft, có thể được ví như là một siêu JavaScript. TypeScript khá giống JavaScript nhưng thêm vào đó là các tính năng và khả năng kiểm soát kiểu dữ liệu để giúp phát triển ứng dụng lớn, dễ bảo trì và dễ mở rộng hơn. Dưới đây là một số điểm chính về TypeScript: • Kiểu Dữ Liệu Tĩnh: TypeScript hỗ trợ kiểu dữ liệu tĩnh, giúp xác định kiểu dữ liệu của biến, tham số hàm, và giá trị trả về từ hàm. Điều này giúp phát hiện lỗi kiểu tại thời điểm biên dịch thay vì tại thời điểm chạy, tăng tính ổn định và dễ bảo trì của mã nguồn.
• OOP (Object-Oriented Programming): TypeScript hỗ trợ các tính năng của lập trình hướng đối tượng như classes, interfaces, inheritance, và encapsulation, giúp tổ chức mã nguồn một cách cấu trúc và dễ quản lý. • ES6 và Các Tính Năng Mới: TypeScript được xây dựng dựa trên chuẩn ECMAScript (ES), đặc biệt là ES6 (ECMAScript 2015) và các phiên bản mới hơn. Bạn có thể sử dụng các tính năng mới như arrow functions, destructuring, và template literals mà không cần phải đợi đến khi các trình duyệt hỗ trợ.