đồ án 1 xây dựng website đọc truyện tranh

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

ĐẠI HỌC QUỐC GIA TP.HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

LỜI CẢM ƠN

Trong suốt quá trình thực hiện đồ án 1 với đề tài “Xây dựng website đọc truyện tranh”, em đã nhận được rất nhiều sự giúp đỡ, hỗ trợ và sự chỉ bảo nhiệt tình của cô Th.S Trần Thị Hồng Yến, giảng viên hướng dẫn của em

Cô Yến đã dành rất nhiều thời gian để hướng dẫn em trong suốt quá trình thực hiện đồ án Cô giúp em định hướng đề tài, xây dựng kế hoạch phát triển đồ án cũng như góp ý cho em những gì còn thiết sót để cải thiện việc phát triển phần mềm của mình

Em xin chân thành gửi lời cảm ơn đến cô Yến vì đã đồng hành cùng em trong suốt quá trình thực hiện đồ án Em cũng xin gửi lời cảm ơn đến các thầy cô trường Đại học Công nghệ Thông tin đã giảng dạy và truyền đạt cho em rất nhiều kiến thức và kinh nghiệm quý giá cho em để giúp em phát triển hơn trên con đường trở thành một kỹ sư phần mềm giỏi

Trong quá trình thực hiện đồ án có thể có một số sai sót nhất định, em kính mong nhận được sự hỗ trợ, hướng dẫn của cô để hoàn thiện sản phẩm này, và em cũng mong muốn được đồng hành cùng cô trong những đồ án tiếp theo

Em trân thành gửi lời cảm ơn sâu sắc đến cô

TP.HCM, ngày 30 tháng 12 năm 2023 Sinh viên thực hiện

Lâm Gia Bảo

1.4 Đối tượng nghiên cứu 2

1.5 Phương pháp nghiên cứu 2

Chương 3 THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG 16

3.1 Tổng quan sơ đồ Use-case 16

3.4.3 Đặc tả Use-case quên mật khẩu 20

3.4.4 Đặc tả Use-case danh sách truyện 21

3.4.5 Đặc tả Use-case tìm kiếm và lọc 21

3.4.6 Đặc tả Use-case xem chi tiết truyện 22

3.4.7 Đặc tả Use-case đọc truyện 22

3.4.8 Đặc tả Use-case thêm truyện vào danh sách theo dõi 23

3.4.9 Đặc tả Use-case thích, bình luận, đánh giá truyện 23

3.4.10 Đặc tả Use-case truyện phổ biến 24

3.4.11 Đặc tả Use-case quản lý tài khoản 25

3.4.12 Đặc tả Use-case quản lý truyện đã đăng 25

3.4.13 Đặc tả Use-case nhận tiền dựa vào lượt xem 26

3.4.14 Đặc tả Use-case cấm người dùng 27

Chương 4 XÂY DỰNG VÀ PHÁT TRIỂN ỨNG DỤNG 46

4.1 Thiết kế giao cơ sở dữ liệu 28

4.2 Thiết kế giao diện người dùng 29

4.2.1 Màn hình yêu cầu đăng nhập 29

4.2.7 Màn hình nội dung truyện 35

4.2.8 Màn hình tìm kiếm nâng cao 36

4.2.9 Màn hình kết quả tìm kiếm nâng cao 37

4.2.10 Màn hình thông tin người dùng 38

Hình 4.8: Nội dung truyện 35

Hình 4.9: Màn hình tìm kiếm nâng cao 36

Hình 4.10: Màn hình kết quả tìm kiếm nâng cao 37

Hình 4.11: Màn hình thông tin người dùng 38

Hình 4.12: Màn hình danh sách truyện đã đăng 39

Hình 4.13: Màn hình thêm mới truyện 40

Bảng 3.5: Đặc tả Use-case quên mật khẩu 20

Bảng 3.6: Đặc tả Use-case danh sách truyện 21

Bảng 3.12: Đặc tả Use-case bình luận truyện 24

Bảng 3.12: Đặc tả Use-case đánh giá truyện 24

Bảng 3.13: Đặc tả Use-case truyện phổ biến 24

Bảng 3.13: Đặc tả Use-case quản lý tài khoản 25

Bảng 3.14: Đặc tả Use-case quản lý truyện đã đăng 25

Bảng 3.15: Đặc tả Use-case nhận tiền dựa theo lượt xem 26

Bảng 3.16: Đặc tả Use-case cấm người dùng 27

TÓM TẮT ĐỒ ÁN

Đồ án với đề tài “Xây dựng website đọc truyện tranh” tập trung vào việc nghiên cứu các công nghệ và ứng dụng những công nghệ này để xây dựng một nền tảng truyện tranh trực tuyến cho mọi người trên khắp cả nước Từ đó, cung cấp một nền tảng giải trí sau những giờ học tập và làm việc căng thẳng, đồng thời giúp cộng đồng những người yêu thích truyện tranh phát triển hơn

Đề tài được bắt đầu bằng việc tìm hiểu ReactJS Đây là một thư viện phổ biến trong việc phát triển Front-end cho ứng dụng web Về phần Back-end, em tìm hiểu về Supabase để lưu trữ và quản lý thông tin người dùng, phiên đăng nhập cũng như dữ liệu trên đây 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 ứng dụng, phát triển và cuối cùng là kiểm thử ứng dụng có hoạt động đúng và đem lại trải nghiệm tốt với người dùng

Sản phẩm hoàn thiện sau khi thực hiện đồ án là một website đọc truyện với giao diện bắt mắt, phù hợp với mọi người dùng cũng như có nhiều tính năng để trải nghiệm đọc truyện thoải mái nhất

Phần cuối cùng của đồ án là trình bày kết quả đã thực hiện lên báo cáo, đưa kết luận và hướng phát triển cho hệ thống trong tương lai

CHƯƠNG 1: GIỚI THIỆU CHUNG 1.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

- 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

1.4 Đố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 - Database: PostgreSQL

- Backend: Supabase - Thiết kế UI: Figma

- Vẽ UML: PlantUML, WondershareEdrawMax - Quản lý code: Github

- Hỗ trợ code: ChatGPT

1.5 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

CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG 2.1 PlantUML

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.2 Figma

Hình 2.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

• 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ó

2.3 AntDesign

Hình 2.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

• 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ó

2.4 Supabase

Hình 2.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

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

2.5 TypeScript

Hình 2.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ợ

• 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

2.6 ReactJS

Hình 2.6: Logo 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

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:

- Virtual DOM:

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

- Giới thiệu về JSX:

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/)

- Giới thiệu về Components:

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 và State:

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

2.7 PostgreSQL

Hình 2.7: Logo 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 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

SQL-• 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

2.8 Github

Hình 2.8: Logo 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

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

2.9 ChatGPT

Hình 2.9: Logo 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

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 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

Pre-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

CHƯƠNG 3: THIẾT KẾ VÀ TRIỂN KHAI HỆ THỐNG 3.1 Tổng quan sơ đồ Use-case

Hình 3.1: Sơ đồ Use-case

3.2 Danh sách các actor

Bảng 3.1: Danh sách actor

STT Tên Actor Ý nghĩa

ngôn ngữ khác sang tiếng Việt

3.3 Danh sách Use-case

Bảng 3.2: Danh sách Use-case

STT Tên chức năng Actor Mô tả

tài khoản

nhập vào hệ thống bằng tài khoản đã được đăng ký hoặc Facebook/Gmail

khẩu khi quên bằng email đã đăng ký

truyện

sách truyện đã được đăng lên hệ thống

và lọc truyện theo các tiêu

chí như tên, thể loại, đánh giá, v.v

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)

chương truyện mình muốn và đọc

sách theo dõi

truyện ưa thích của mình vào danh sách theo dõi

sách truyện được xem nhiều nhất

thông tin cá nhân, mật khẩu và cập nhật tài khoả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

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

khoản người dùng vi phạm

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

Alternative flow Không có

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

Usecase quay về bước 1

2b Người dùng bấm “Quay về đăng nhập”

Usecase tiếp tục UC_02

Alternative flow 2a Người dùng chọn phương thức đăng nhập bằng tài khoản Google

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

Post-condition Không có

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ý”

Usecase tiếp tục UC_01

4c1 Người dùng bấm nút “Quên mật khẩu”

Usecase tiếp tục UC_03

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

User Case ID UC_03

Goal Đổi mật khẩu mới khi không nhớ mật khẩu

Pre-Condition Không có

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

Exception 2a Người dùng bấm nút “Trở lại đăng nhập”

Usecase tiếp tục UC_02

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