Sau khi đã nắm được cách sử dụng các công nghệ cần thiết, em bắt tay vào việc tìm hiểu và đặc các yêu cầu, xây dựng diagram, luồng và database cho ứng dụng, sau đó thiết kế giao diện cho
GIỚI THIỆU CHUNG
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
- Ngôn ngữ lập trình: Typescript
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
CÔNG NGHỆ SỬ DỤNG
Plant UML
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
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
• 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ó.
AntDesign
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
• 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.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ó.
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
7 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
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ợ
• Kiểu Union và Intersection: TypeScript hỗ trợ kiểu union và intersection, cho phép bạn kết hợp hoặc tạo ra các kiểu phức tạp từ các kiểu đơn giản, giúp mô hình hóa các loại dữ liệu phức tạp trong ứng dụng
• Generics: Generics là một tính năng mạnh mẽ cho phép bạn viết code linh hoạt hơn bằng cách làm cho các hàm và các lớp có thể hoạt động với nhiều loại dữ liệu khác nhau mà không cần phải lặp code
• Cộng Đồng và Ecosystem Lớn: TypeScript có một cộng đồng lớn và tích cực, và nó được sử dụng rộng rãi trong nhiều dự án lớn Nhiều thư viện và framework nổi tiếng như Angular, React, và Vue cung cấp hỗ trợ chính thức cho TypeScript
• Môi Trường Phát Triển Tốt: TypeScript tích hợp tốt với nhiều môi trường phát triển và các công cụ như Visual Studio Code, Sublime Text, và WebStorm Nó cung cấp trải nghiệm phát triển mạnh mẽ và thông minh
• Mã nguồn mở: TypeScript là một dự án mã nguồn mở, cho phép mọi người có thể đóng góp vào phát triển của nó và sử dụng nó miễn phí
TypeScript đã trở thành một lựa chọn hàng đầu cho các dự án lớn khi đòi hỏi sự kiểm soát mã nguồn thay cho JavaScript.
ReactJS
ReactJS là một opensource được phát triển bởi Facebook, ra mắt vào năm 2013, bản thân nó là một thư viện Javascript được dùng để để xây dựng các tương tác với các thành phần trên website Một trong những điểm nổi bật nhất của ReactJS đó là việc render dữ liệu không chỉ thực hiện được trên tầng Server mà còn ở dưới Client Một trong những điểm hấp dẫn của React là thư viện này không chỉ hoạt động trên phía client, mà còn được render trên server và có thể kết nối với nhau React so sánh sự thay đổi giữa các
10 giá trị của lần render này với lần render trước và cập nhật ít thay đổi nhất trên DOM Trước khi đến cài đặt và cấu hình, chúng ta sẽ đi đến một số khái niệm cơ bản:
Công nghệ DOM ảo giúp tăng hiệu năng cho ứng dụng Việc chỉ node gốc mới có trạng thái và khi nó thay đổi sẽ tái cấu trúc lại toàn bộ, đồng nghĩa với việc DOM tree cũng sẽ phải thay đổi một phần, điều này sẽ ảnh hưởng đến tốc độ xử lý React JS sử dụng Virtual DOM (DOM ảo) để cải thiện vấn đề này Virtual DOM là một object Javascript, mỗi object chứa đầy đủ thông tin cần thiết để tạo ra một DOM, khi dữ liệu thay đổi nó sẽ tính toán sự thay đổi giữa object và tree thật, điều này sẽ giúp tối ưu hoá việc re-render DOM tree thật React sử dụng cơ chế one-way data binding – luồng dữ liệu 1 chiều Dữ liệu được truyền từ parent đến child thông qua props Luồng dữ liệu đơn giản giúp chúng ta dễ dàng kiểm soát cũng như sửa lỗi
JSX là một dạng ngôn ngữ cho phép viết các mã HTML trong Javascript Đặc điểm: Faster: Nhanh hơn JSX thực hiện tối ưu hóa trong khi biên dịch sang mã Javascript Các mã này cho thời gian thực hiện nhanh hơn nhiều so với một mã tương đương viết trực tiếp bằng Javascript Safer: an toàn hơn Ngược với Javascript, JSX là kiểu statically- typed, nghĩa là nó được biên dịch trước khi chạy, giống như Java, C++ Vì thế các lỗi sẽ được phát hiện ngay trong quá trình biên dịch Ngoài ra, nó cũng cung cấp tính năng gỡ lỗi khi biên dịch rất tốt Easier: Dễ dàng hơn JSX kế thừa dựa trên Javascript, vì vậy rất dễ dàng để cho các lập trình viên Javascript có thể sử dụng (tham khảo tại https://jsx.github.io/)
React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần
(component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo
Props: giúp các component tương tác với nhau, component nhận input gọi là props, và trả thuộc tính mô tả những gì component con sẽ render Prop là bất biến State: thể hiện trạng thái của ứng dụng, khi state thay đồi thì component đồng thời render lại để cập nhật UI.
PostgreSQL
PostgreSQL là một hệ quản trị cơ sở dữ liệu quan hệ mã nguồn mở (RDBMS - Relational Database Management System) với khả năng mở rộng và tính năng mạnh mẽ
Nó được thiết kế để cung cấp hiệu suất, độ tin cậy và tính năng tiên tiến cho các ứng dụng dữ liệu lớn và yêu cầu phức tạp Dưới đây là một số điểm chính về PostgreSQL:
• Mã Nguồn Mở và Miễn Phí: PostgreSQL là một dự án mã nguồn mở và có sẵn miễn phí để sử dụng, phát triển và phân phối Điều này tạo điều kiện thuận lợi cho cộng đồng phát triển và sử dụng
• Quản Lý Đối Tượng: PostgreSQL hỗ trợ quản lý đối tượng, giúp tổ chức dữ liệu trong các bảng, quan hệ, và đối tượng, theo mô hình quan hệ
• Khả Năng Mở Rộng: PostgreSQL có khả năng mở rộng tốt, cho phép nó mở rộng từ các ứng dụng nhỏ đến các hệ thống dữ liệu lớn, với khả năng xử lý hàng nghìn kết nối đồng thời
• Tiêu Chuẩn SQL: PostgreSQL tuân theo nhiều tiêu chuẩn SQL, bao gồm SQL-
92, SQL-99, và SQL-2003 Điều này đảm bảo tính tương thích với các ứng dụng sử dụng ngôn ngữ truy vấn chuẩn
• Phong Cách ACID: PostgreSQL hỗ trợ các tính chất ACID (Atomicity, Consistency, Isolation, Durability), đảm bảo tính nhất quán và an toàn cho dữ liệu trong mọi trường hợp
• Triggers và Rules: PostgreSQL hỗ trợ các trigger và rules, cho phép người phát triển định nghĩa các hành động tự động khi có sự thay đổi trong dữ liệu
• Index và Optimizer Mạnh Mẽ: Cơ sở dữ liệu này cung cấp một bộ chỉ mục và trình tối ưu mạnh mẽ, giúp tối ưu hóa câu truy vấn và tăng cường hiệu suất truy xuất dữ liệu
• Hỗ Trợ Đa Ngôn Ngữ và Đa Ký Tự: PostgreSQL hỗ trợ nhiều ngôn ngữ lập trình như PL/pgSQL, PL/Tcl, PL/Perl, PL/Python, và nhiều ngôn ngữ khác Nó cũng hỗ trợ nhiều bảng mã và tập ký tự
• Community và Hỗ Trợ: Cộng đồng PostgreSQL là một cộng đồng lớn và tích cực
Có sẵn nhiều tài liệu, diễn đàn, và nguồn thông tin hỗ trợ từ cộng đồng
PostgreSQL là một lựa chọn mạnh mẽ cho các dự án yêu cầu tính linh hoạt, khả năng mở rộng, và độ bền cao trong việc quản lý cơ sở dữ liệu
Github
GitHub là một dịch vụ lưu trữ mã nguồn và hợp tác trực tuyến, cho phép các nhà phát triển làm việc cùng nhau trên các dự án phần mềm Nó đã trở thành một trong những nền tảng quản lý mã nguồn phổ biến nhất trên thế giới và được sử dụng rộng rãi trong cộng đồng phần mềm mã nguồn mở và doanh nghiệp Dưới đây là một số điểm chính về GitHub:
• Lưu Trữ Mã Nguồn: GitHub cung cấp nơi lưu trữ an toàn cho mã nguồn của bạn Bạn có thể tạo ra các kho mã nguồn (repositories) để theo dõi và quản lý các phiên bản của mã nguồn của dự án
• Hợp Tác Trực Tuyến: GitHub cho phép nhiều nhà phát triển làm việc cùng nhau trên cùng một dự án một cách hiệu quả Bạn có thể tạo nhánh (branch), thực hiện thay đổi, và sau đó hợp nhất (merge) chúng trở lại nhánh chính một cách dễ dàng
• Quản Lý Phiên Bản: GitHub giúp theo dõi và quản lý các phiên bản của mã nguồn thông qua hệ thống kiểm soát phiên bản (version control system) Git Bạn có thể xem lịch sử thay đổi, so sánh giữa các phiên bản, và quay lại các phiên bản trước đó
• Issue Tracking và Pull Requests: GitHub cung cấp tính năng theo dõi vấn đề (issue tracking) để theo dõi công việc, vấn đề, và tính năng trong dự án Pull requests
14 giúp tạo ra quá trình đánh giá và thảo luận về các thay đổi trước khi hợp nhất vào mã nguồn chính
• Trang Web Tương Tác và Wiki: Mỗi kho mã nguồn trên GitHub đều có một trang web tương tác (GitHub Pages) để giới thiệu dự án, và bạn có thể sử dụng wiki để tạo tài liệu cho dự án của mình
• Hỗ Trợ Cộng Đồng và Xã Hội: GitHub là một cộng đồng lớn, nơi bạn có thể tìm thấy và đóng góp vào các dự án mã nguồn mở Bạn cũng có thể theo dõi, đánh giá, và đánh dấu (star) các dự án mà bạn quan tâm
• Tích Hợp Công Cụ Phát Triển: GitHub tích hợp nhiều công cụ phát triển phổ biến như CI/CD (Continuous Integration/Continuous Deployment) và các dịch vụ tích hợp để tối ưu hóa quy trình phát triển
• Dịch Vụ Trả Phí và Cá Nhân: GitHub cung cấp dịch vụ trả phí cho các tổ chức và dự án lớn, cũng như gói dịch vụ cá nhân cho các nhà phát triển cá nhân
GitHub đã trở thành một phần quan trọng trong nền văn hóa phát triển phần mềm hiện đại và đóng vai trò quan trọng trong việc kích thích sự hợp tác và chia sẻ trong cộng đồng lập trình toàn cầu.
ChatGPT
ChatGPT là một mô hình ngôn ngữ tự nhiên dựa trên kiến trúc GPT (Generative Pre-trained Transformer) của OpenAI Mô hình này được huấn luyện để hiểu và tạo ra
15 văn bản tiếng Anh một cách tự nhiên, có khả năng thực hiện nhiều nhiệm vụ liên quan đến xử lý ngôn ngữ tự nhiên Dưới đây là một số đặc điểm và điểm mạnh của ChatGPT:
• Kiến Trúc GPT: ChatGPT là một biến thể của mô hình GPT (Generative Pre- trained Transformer) GPT là một mô hình học sâu dựa trên kiến trúc Transformer, có khả năng xử lý và tạo ra văn bản dựa trên bối cảnh lớn của dữ liệu huấn luyện
• Tính Tự Nhiên và Linh Hoạt: Mô hình được thiết kế để tạo ra văn bản có chất lượng cao và tự nhiên, giúp nó linh hoạt trong nhiều tình huống sử dụng như trả lời câu hỏi, viết văn bản, hoặc thậm chí là tương tác như một trò chơi đối thoại
• Đa Dạng và Phong Phú: ChatGPT có khả năng đáp ứng với một loạt các loại câu hỏi và yêu cầu Nó có thể thảo luận về nhiều chủ đề, cung cấp thông tin, giải quyết vấn đề, và thậm chí là sáng tạo văn bản
• Khả Năng Tương Tác: Mô hình này được tối ưu hóa để tương tác với người sử dụng thông qua các câu hỏi và yêu cầu Điều này làm cho nó hữu ích trong nhiều tình huống như trò chơi với máy, tìm kiếm thông tin, hoặc đơn giản là để thực hiện cuộc trò chuyện
• Khả Năng Học Từ Dữ Liệu Mới: ChatGPT có khả năng học từ dữ liệu mới và được cập nhật định kỳ Điều này giúp cập nhật thông tin và sự hiểu biết của mô hình về các xu hướng và sự thay đổi trong ngôn ngữ và kiến thức mới
• Quy Mô Lớn và Tiến Bộ Tính Toán: Mô hình ChatGPT được huấn luyện trên một lượng lớn dữ liệu và sử dụng quy trình tính toán tiên tiến Điều này giúp cải thiện khả năng hiểu và tạo ra văn bản chất lượng
THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG
Tổng quan sơ đồ Use-case
Hình 3.1: Sơ đồ Use-case
Danh sách các actor
1 Reader Người đọc truyện của app
2 Translator/Editor Người dịch/Người chỉnh sửa truyện từ ngôn ngữ khác sang tiếng Việt
3 Admin Quản trị viên quản lý tài khoản người dùng
Danh sách Use-case
Bảng 3.2: Danh sách Use-case
STT Tên chức năng Actor Mô tả
1 Đăng ký User Người dùng có thể đăng ký tài khoản
2 Đăng nhập User Người dùng có thể đăng nhập vào hệ thống bằng tài khoản đã được đăng ký hoặc Facebook/Gmail
3 Quên mật khẩu User Người dùng có thể đổi mật khẩu khi quên bằng email đã đăng ký
Reader Người đọc có thể xem danh sách truyện đã được đăng lên hệ thống
5 Tìm kiếm và lọc Reader Người đọc có thể tìm kiếm và lọc truyện theo các tiêu
18 chí như tên, thể loại, đánh giá, v.v
6 Xem chi tiết truyện Reader Người đọc có thể xem thông tin chi tiết của một bộ truyện cụ thể (số chương, nội dung, thể loại, đánh giá, v.v)
7 Đọc truyện Reader Người đọc có thể chọn chương truyện mình muốn và đọc
8 Thêm vào danh sách theo dõi
Reader Người đọc có thể thêm bộ truyện ưa thích của mình vào danh sách theo dõi
9 Thích, bình luận, đánh giá truyện
Reader Người đọc có thể thích, bình luận truyện theo chương hoặc theo toàn bộ truyện, đánh giá truyện
10 Truyện phổ biến Reader Người đọc có thể xem danh sách truyện được xem nhiều nhất
11 Quản lý tài khoản User Người dùng có thể quản lý thông tin cá nhân, mật khẩu và cập nhật tài khoản
12 Quản lý truyện đã đăng
Translator/Editor Dịch giả có thể thêm mới, cập nhật, xóa chương truyện/bộ truyện mình đã đăng
13 Nhận tiền dựa vào lượt xem
Translator/Editor Dịch giả có thể nhận tiền dựa và số lượt xem của chương truyện mình đã đăng
14 Cấm người dùng Admin Quản trị viên có thể cấm tài khoản người dùng vi phạm
Đặt tả Use-case
3.4.1 Đặc tả usecase đăng ký
Bảng 3.3: Đặc tả Use-case đăng ký
Goal Đăng ký tài khoản mới
Main flow 1 Hiển thị màn hình đăng ký
2 Nhập đầy đủ thông tin, sau đó bấm “Đăng ký”
3 Hệ thống thông báo đăng nhập thành công
4 Chuyển sang màn hình chính
Post-condition Tài khoản mới được tạo trong hệ thống
Exception 2a Hệ thống xác nhận thông tin không hợp lệ và hiển thị thông báo
2b Người dùng bấm “Quay về đăng nhập”
3.4.2 Đặc tả usecase đăng nhập
Bảng 3.4: Đặc tả Use-case đăng nhập
Goal Đăng nhập vào hệ thống
Pre-Condition Tài khoản người dùng đã được tạo
Main flow 1 Hiển thị màn hình đăng nhập
2 Người dùng chọn phương thức đăng nhập bằng tài khoản web
3 Nhập username, password sau đó bấm “Đăng nhập”
4 Hệ thống xác nhận đăng nhập thành công và chuyển sang màn hình chính
Alternative flow 2a Người dùng chọn phương thức đăng nhập bằng tài khoản
2a1 Hệ thống chuyển sang màn hình đăng nhập Google 3a Người dùng đăng nhập bằng Google
4a Google xác nhận đăng nhập thành công và chuyển sang màn hình chính
Exception 4c Hệ thống xác nhận đăng nhập không thành công và hiển thị thông báo
4c1 Người dùng bấm nút “Đăng ký”
4c1 Người dùng bấm nút “Quên mật khẩu”
3.4.3 Đặc tả usecase quên mật khẩu
Bảng 3.5: Đặc tả Use-case quên mật khẩu
Goal Đổi mật khẩu mới khi không nhớ mật khẩu
Main flow 1 Hiển thị màn hình quên mật khẩu
2 Nhập email đã liên kết với tài khoản hoặc username
3 Hệ thống gửi mã xác nhận vào email
4 Hiển thị màn hình nhập mã
5 Người dùng nhập mã xác nhận thành công
6 Hệ thống cho phép người dùng đổi mật khẩu mới
Exception 2a Người dùng bấm nút “Trở lại đăng nhập”
3b Hệ thống xác nhận email hoặc username không tồn tại và hiển thị thông báo
5c Hệ thống xác nhận người dùng nhập sai mã xác nhận và thông báo
3.4.4 Đặc tả usecase xem danh sách truyện
Bảng 3.6: Đặc tả Use-case danh sách truyện
Name Xem danh sách truyện
Goal Xem danh sách truyện
Main flow 1 Người đọc truy cập vào trang chủ web
2 Hệ thống hiển thị danh sách tất cả các truyện vừa được đăng tải
3.4.5 Đặc tả usecase tìm kiếm và lọc
Bảng 3.7: Đặc tả Use-case tìm kiếm và lọc
Name Tìm kiếm và lọc
Goal Tìm truyện theo tên hoặc tiêu chí nào đó
Main flow 1 Tìm kiếm truyện theo tên bằng thanh tìm kiếm có sẵn
2 Hiển thị danh sách truyện phù hợp
Alternative flow 1a1 Bấm “Tìm kiếm nâng cao”
1a2 Nhập tên bộ truyện cần tìm
1a4 Điền tên tác giả, tên họa sĩ, chọn thể loại muốn tìm, chọn thứ tự sắp xếp
3.4.6 Đặc tả usecase xem chi tiết truyện
Bảng 3.8: Đặc tả Use-case xem chi tiết truyện
Name Xem chi tiết truyện
Goal Xem chi tiết truyện
Main flow 1 Người đọc chọn hình ảnh hoặc tên truyện
2 Hệ thống hiển thị thông tin chi tiết truyện
3 Người đọc xem chi tiết truyện như thể loại, nội dung, tác giả, lượt xem, bình luận v.v
4 Người đọc có thể thao tác tại trang chi tiết truyện hoặc quay lại trang trước đó
3.4.7 Đặc tả usecase đọc truyện
Bảng 3.9: Đặc tả Use-case đọc truyện
Goal Đọc truyện theo chương
Pre-Condition Phải tồn tại chương truyện muốn đọc
Main flow 1 Người đọc bấm vào chương truyện muốn đọc
2 Hệ thống hiển thị hình ảnh của chương truyện đó
3 Người đọc bắt đầu đọc truyện
4 Sau khi đã đọc hết chương truyện, nếu chương sau, người đọc có thể ấn nút mũi tên đển tiếp tục đọc chương tiếp theo Alternative flow 4a Người đọc quay lại trang chủ
3.4.8 Đặc tả usecase thêm truyện vào danh sách theo dõi
Bảng 3.10: Đặc tả Use-case thêm vào danh sách theo dõi
Name Thêm vào danh sách theo dõi
Goal Thêm truyện vào danh sách theo dõi
Pre-Condition Reader đã đăng nhập vào hệ thống
Main flow 1 Người đọc truy cập vào trang chi tiết truyện hoặc danh sách truyện
2 Người đọc chọn nút theo dõi truyện
3 Hệ thống thêm truyện vào danh sách theo dõi
Post-condition Truyện được thêm vào danh sách theo dõi
Exception 2b Nếu truyện đã được theo dõi, người đọc chọn nút bỏ theo dõi
3b Truyện được xóa khỏi danh sách theo dõi
3.4.9 Đặc tả usecase thích, bình luận, đánh giá truyện
Bảng 3.11: Đặc tả Use-case thích truyện
Pre-Condition Reader đã đăng nhập vào hệ thống
Main flow 1 Người đọc truy cập vào trang chi tiết truyện
2 Người đọc chọn yêu thích truyện
3 Hệ thống tăng số lượng người yêu thích truyện lên 1 Alternative flow 2b Nếu truyện đã được người đọc đó thích, bấm bỏ thích
3b Hệ thống giảm số lượng người thích truyện đi 1
Bảng 3.12: Đặc tả Use-case bình luận truyện
Pre-Condition Reader đã đăng nhập vào hệ thống
Main flow 1 Người đọc truy cập vào trang chi tiết truyện
2 Người đọc bình luận truyện
3 Hệ thống lưu bình luận truyện và hiển thị tại danh sách bình luận
Post-condition Hệ thống hiển thị bình luận mới trên trang chi tiết truyện Exception 2a Hệ thống xác nhật bình luận là khoảng trống thì sẽ không ghi lại bình luận
Bảng 3.13: Đặc tả Use-case đánh giá truyện
Pre-Condition Reader đã đăng nhập vào hệ thống
Main flow 1 Người đọc truy cập vào trang chi tiết truyện
2 Người đọc đánh giá truyện bằng cách chọn biểu tượng hình ngôi sao
3 Người đọc đánh giá truyện theo sao
Post-condition Hệ thống ghi lại kết quả đánh giá và hiển thị đánh giá trung bình lên trang chi tiết truyện
3.4.10 Đặc tả usecase truyện phổ biến
Bảng 3.14: Đặc tả Use-case truyện phổ biến
Goal Hiển thị top 10 truyện xem nhiều nhất
Main flow 1 Người đọc truy cập vào trang chủ web
2 Hệ thống hiển thị 10 truyện được xem nhiều nhất lên đầu trang
3 Người đọc có thể nhấn mũi tên để chuyển sang các truyện được xem nhiều nhất khác
3.4.11 Đặc tả usecase quản lý tài khoản
Bảng 3.15: Đặc tả Use-case quản lý tài khoản
Name Quản lý tài khoản
Goal Quản lý thông tin cá nhân của tài khoản
Pre-Condition User đã đăng nhập vào hệ thống
Main flow 1 Người dùng truy cập vào trang cá nhân
2 Hệ thống hiển thị các thông tin cá nhân của người dùng
3 Người dùng sửa đổi thông tin cá nhân của mình
4 Người dùng bấm nút “Cập nhật” để cập nhật thông tin cá nhân
Alternative flow 4a Người dùng hủy bỏ cập nhật thông tin cá nhân
Post-condition Thông tin mới của tài khoản được cập nhật
Exception Hệ thống xác nhận thông tin cá nhân không hợp lệ và thông báo đến người dùng
3.4.12 Đặc tả usecase quản lý truyện đã đăng
Bảng 3.16: Đặc tả Use-case quản lý truyện đã đăng
Name Quản lý truyện đã đăng
Goal Quản lý truyện đã đăng
Pre-Condition Translator/Editor đã đăng nhập vào hệ thống
Main flow 1 Dịch giả truy cập vào trang quản lý truyện
2 Hệ thống hiển thị các truyện do người đó tạo ra
3 Dịch giả chọn truyện đã đăng
4 Hệ thống hiển thị danh sách các chương truyện đã đăng
5 Dịch giả chọn thêm mới chương truyện
6 Hệ thống chuyển sang màn hình thêm mới chương truyện
7 Dịch giả cung cấp thông tin đầy đủ và hình ảnh của chương truyện và chọn “đăng truyện”
8 Hệ thống thông báo đăng truyện thành công
Alternative flow 3a Dịch giả chọn thêm mới truyện
4a Hệ thống chuyển sang trang thêm mới truyện
5a Dịch giả cung cấp các thông tin của truyện theo yêu cầu và nhấn “Tạo truyện”
5b1 Dịch giả chọn chọn chương truyện cần xóa
5b2 Dịch giả chọn xóa truyện
5c1 Dịch giả chọn chương truyện cần sửa
5c2 Dịch giả sửa thông tin truyện
5c3 Dịch giả xác nhận chỉnh sửa thông tin truyện
Post-condition Các thay đổi trong quản lý truyện được cập nhật vào hệ thống Exception 5d Hệ thống xác nhận thiếu thông tin truyện cần thiết và thông báo
3.4.13 Đặc tả usecase nhận tiền dựa vào lượt xem
Bảng 3.17: Đặc tả Use-case nhận tiền dựa theo lượt xem
Name Nhận tiền dựa vào lượt xem
Goal Dùng số lượt xem để rút tiền
Pre-Condition Translator/Editor đã đăng nhập vào hệ thống
Tài khoản đã được cung cấp thông tin tài khoản ngân hàng Main flow 1 Dịch giả truy cập vào trang “điểm thưởng của tôi”
2 Hệ thống hiển thị số điểm dịch giả nhận được (dựa vào lượt xem)
3 Dịch giả chọn “Rút tiền”
4 Số điểm được quy đổi ra tiền và chuyển vào tài khoản dịch giả
Post-condition Điềm lượt xem trừ theo số tiền đã rút, tiền chuyển vào tài khoản
Exception 4a Hệ thống xác nhận số điểm thưởng không đủ quy đổi ra tiền mặt và thông báo
4b Hệ thống xác nhận số tài khoản ngân hàng chưa được cung cấp và thông báo
3.4.14 Đặc tả usecase cấm người dùng
Bảng 3.18: Đặc tả Use-case cấm người dùng
Goal Cấm người dùng vi phạm
Pre-Condition Admin đã đăng nhập vào hệ thống
Main flow 1 Quản trị viên truy cập vào trang quản lý tài khoản
2 Hệ thống hiển thị trang quản lý người dùng
3 Quản trị viên nhập ID tài khoản người dùng vi phạm
4 Hệ thống xác nhận người muốn cấm người dùng
5 Quản trị viên chọn nút “Xác nhận”
6 Hệ thống thông báo người dùng đã bị cấm
Alternative flow 3a1 Quản trị viên chọn “Danh sách người dùng bị cấm”
3a2 Hệ thống hiển thị danh sách người dùng bị cấm
3a3 Quản trị viên chọn người dùng bị cấm và chọn “Hủy cấm” 4a Hệ thống thông báo xác nhận muốn hủy cấm người dùng 5a Quản trị viên chọn nút xác nhận
6a Hệ thống thông báo người dùng đã được hủy cấm
Post-condition Cập nhật trạng thái tài khoản người dùng
Exception 5b Quản trị viên nhấn nút “Hủy bỏ”
XÂY DỰNG VÀ PHÁT TRIỂN ỨNG DỤNG
Thiết kế giao diện người dùng
4.2.1 Màn hình yêu cầu đăng nhập
- Khi người dùng truy cập các tính năng cần phải có quyền đăng nhập, hệ thống sẽ hiển thị màn hình yêu cầu người dùng đăng nhập
Hình 4.2: Màn hình yêu cầu đăng nhập
- Người dùng có thể thông qua màn hình này và chọn nút “Đăng nhập” nếu đã có tài khoản hoặc “Đăng ký” nếu chưa có tài khoản
- Khi người dùng sửa dụng button “Đăng nhập”, hệ thống sẽ hiển thị màn hình đăng nhập như hình dưới đây
Hình 4.3: Màn hình đăng nhập
- Người dùng sẽ sử dụng tên đăng nhập và mật khẩu đã được đăng ký trước đó để đăng nhập
- Ngoài ra người dùng có thể đăng nhập thông qua tài khoản Google
- Màn hình đăng nhập còn hiển thị các nút “Đăng ký” để người dùng có thể đăng ký nếu chưa có tài khoản, “Quên mật khẩu?” giúp người dùng khôi phục tài khoản thông qua mail đã được đăng ký
- Sau khi người dùng chọn chức năng đăng ký, hệ thống sẽ hiển thị màn hình đăng ký như hình sau
Hình 4.4: Màn hình đăng ký
- Màn hình đăng ký sẽ có 4 trường dữ liệu cho người dùng nhập vào “Tên đăng nhập” và “Mật khẩu” sau khi đăng ký thì công sẽ lưu vào hệ thống, và sẽ được sử dụng cho các lần đăng nhập tiếp theo “Xác nhận mật khẩu” giúp giảm thiểu rủi ro người dùng tạo mật khẩu nhưng gõ phím sai dẫn đến mật khẩu không như ý Email sẽ được liên kết trực tiếp với tài khoản, người dùng có thể sử dụng mail này khi quên mật khẩu
- Ngoài ra còn có các nút “Sign up” để xác nhận muốn tạo tài khoản, quay lại đăng nhập nếu người dùng không muốn tạo tài khoản nữa mà muốn đăng ký với tài khoản hiện có
4.2.4 Màn hình quên mật khẩu
- Sau khi người dùng sử dụng chức năng quên mật khẩu, Hệ thống sẽ hiển thị màn hình quên mật khẩu dưới đây
Hình 4.5: Màn hình quên mật khẩu
- Người dùng có thể thông qua gmail đã đăng ký để lấy lại mật khẩu của mình Sau khi người dùng đã nhập email, hệ thống sẽ gửi link đến mail người dùng, người dùng thông qua link này sẽ được di chuyển tới trang đổi mật khẩu và tạo mật khẩu mới
- Màn hình này sẽ hiển thị đầu tiên khi người dùng truy cập vào trang web
Hình 4.6: Màn hình trang chủ
- Sau khi người dùng chọn nút có biểu tượng ba gạch, hệ thống sẽ hiện một slide bar menu như hình dưới đây
- Người dùng có thể chọn các thành phần trên Slidebar menu để truy cập các chức năng mình muốn Ngoài ra, khi hiển thị Slidebar menu, hệ thống sẽ tự làm mờ các thành phần khác, làm nổi bật Slidebar hơn
4.2.7 Màn hình nội dung truyện
- Khi người dùng chọn truyện muốn đọc, hệ thống sẽ hiển thị màn hình nội dung truyện với các thông tin truyện như hình dưới đây
Hình 4.8: Màn hình nội dung truyện
- Người dùng có thể thông qua đây xem chi tiết truyện mình muốn, cũng như bắt đầu đọc truyện bằng cách chọn chương truyện mình muốn đọc
4.2.8 Màn hình tìm kiếm nâng cao
- Khi người dùng mới tìm truyện thông qua nhiều tiêu chí khác nhau, người dùng có thể truy cập chức năng tìm kiếm nâng cao Màn hình tìm kiếm nâng cao sẽ có giao diện như hình dưới đây
Hình 4.9: Màn hình tìm kiếm nâng cao
- Người dùng có thể tìm truyện thông qua thể loại, tên tác giả, tên truyện, họa sĩ mình thích cũng như sắp xếp truyện mình vừa tìm
4.2.9 Màn hình kết quả tìm kiếm nâng cao
- Sau khi người dùng xác nhận tìm truyện, hệ thống sẽ trả về danh sách truyện phù hợp như hình dưới đây
Hình 4.10: Màn hình kết quả tìm kiếm nâng cao
- Người dùng có thể xem được thông tin các truyện mình vừa tìm, và chọn truyện yêu thích để đọc
4.2.10 Màn hình thông tin người dùng
- Người dùng có thể xem chi tiết thông tin tài khoản của mình, cũng như thay đổi những thông tin đó
Hình 4.11: Màn hình thông tin người dùng
4.2.11 Màn hình truyện đã đăng
- Màn hình truyện đã đăng được hiển thị như ảnh dưới đây
Hình 4.12: Màn hình danh sách truyện đã đăng
- Người dịch có thể thông qua màn hình này để quản lý thông tin truyện của mình, quản lý danh sách các truyện đã đăng cũng như truy cập chức năng quản lý chương của truyện đã đăng
4.2.12 Màn hình thêm mới truyện
- Sau khi sử dụng chức năng thêm truyện ở màn hình quản lý truyện, hệ thống sẽ hiển thị màn hình đăng ký truyện như ảnh dưới đây
Hình 4.13: Màn hình thêm mới truyện
- Người dịch có thể nhập thông tin cho truyện và thêm mới
4.2.13 Màn hình quản lý chương
- Sau khi người dùng truy cập chức năng quản lý chương, hệ thống sẽ hiển thị màn hình quản lý chương như hình dưới đây
Hình 4.14: Màn hình quản lý chương
- Qua màn hình này, người dùng có thể quản lý danh sách các chương truyện đã đăng của mình, cũng như nội dung các chương chưa đó
4.2.14 Màn hình thêm mới chương
- Khi người dùng chọn thêm mới chương, hệ thống sẽ tải màn hình thêm mới chương như hình dưới đây
Hình 4.15: Màn hình thêm mới chương
- Người dùng có thể nhập tên chương mình muốn thêm, cũng như nội dung là hình ảnh của các trang truyện được chọn
4.2.15 Màn hình điểm dịch truyện
- Màn hình điểm dịch truyện sẽ hiển thị như hình dưới đây
Hình 4.16: Màn hình điểm dịch truyện
- Người dùng có thể quy đổi điểm ra tiền bằng cách chọn rút tiền cũng như cung cấp số tài khoản để tiền được chuyển vào
4.2.16 Màn hình đổi mật khẩu
- Khi người dùng truy cập chức năng đổi mật khẩu, hệ thống sẽ hiển màn hình đổi mật khẩu như hình dưới đây
Hình 4.17: Màn hình đổi mật khẩu
- Người dùng sẽ nhập mật khẩu cũ và mật khẩu mới mình muốn đổi
4.2.17 Màn hình truyện theo dõi trong trang cá nhân
- Màn hình truyện theo dõi trong trang cá nhân được hiển thị như hình dưới đây
Hình 4.18: Truyện theo dõi trong trang cá nhân
- Màn hình này tương tự truyện theo dõi, tuy nhiên sẽ khiến người dùng dễ truy xuất hơn khi ở trang cá nhân cũng như không có bất cứ thông tin nào khác không cần thiết mà chỉ có truyện theo dõi
- Sau khi người dùng chọn chương truyện muốn đọc, hệ thống sẽ hiển thị màn hình đọc truyện như hình dưới đây
Hình 4.19: Màn hình đọc truyện
- Màn hình đoc truyện sẽ có hình ảnh của các trang truyện muốn đọc, chapter bar cho phép người dùng di chuyển từ trang đọc truyện về trang chủ, cũng như
2 button backward, forward cho phép người dùng xem chương trước hoặc sau của truyện, select cho phép người dùng chọn chương truyện muốn đọc và nút theo dõi để người dùng thêm vào danh sách theo dõi truyện nếu đang đọc mà cảm thấy truyện hay
