Đồ án Công nghệ phần mềm | Đại học Kiến trúc Đà Nẵng

TRƯỜNG ĐẠI HỌC KIẾN TRÚC ĐÀ NẴNG
KHOA CÔNG NGHỆ THÔNG TIN
Đồ án Công nghệ phần mềm
Ngành Công nghệ thông tin
ĐỀ TÀI: Nghiên cứu công nghệ Framework
VueJS, xây dựng website đọc truyện tranh
SVTH: Hồ Xuân Đại – 2051220140
Hồ Phan Minh Tuấn – 1751030021 Lớp TC: 20CT3
GVHD: Ths. Nguyễn Tất Phú Cường
Đà Nẵng, Tháng 1 năm 2024 Mở đầu
I. Lý do chọn đề tài:
Với sự phát triển mạnh mẽ của Internet và sự phổ biến thiết bị di động, đọc
truyện tranh trên internet ngày càng trở thành một hình thức giải trí phổ biến, đặc
biệt là với các đối tượng trẻ.
Vậy nên, chúng em quyết định chọn đề tài xây dựng website truyện tranh để đáp
ứng nhu cầu giới trẻ hiện nay đồng thời nghiên cứu công nghệ Framework VueJS.
VueJS là Framework kết hợp các phương pháp tốt nhất để phát triển giao diện
người dùng từ Angular, Ember và React với các tính năng khác để viết ứng dụng
web nhanh hơn, dễ hơn. Mặt khác, Vuejs có nhiều tài liệu chi tiết, cộng đồng mạnh
mẽ giúp cho việc tìm hiểu dễ dàng và dễ phát triển ứng dụng cho dù là dự án nhỏ hay lớn.
II. Lịch sử nghiên cứu:
 https://www.nettruyenss.com/  https://truyenqqvn.com/  https://nettruyenco.vn/
 https://doctruyenonline.vn/truyen-tranh  …
Ưu điểm của những website trên:
 Slide bar cho biết những bộ truyện đang hot.  Đa dạng truyện.
 Hiển thị top danh sách truyện của website.
 Có thể lưu bộ truyện vào danh sách yêu thích để đọc sau.
 Bình luận về bộ truyện bất kỳ để người sau vào xem review.
Nhược điểm của những website trên: 1  Quảng cáo quá nhiều.
 Thiếu tính tương tác.
 Chất lượng hình ảnh không tốt.
 Tốc độ tải trang chậm. III.
Mục đích, mục tiêu, phạm vi: 1. Mục đích:
• Mục đích chính là cung cấp một không gian trực tuyến giải trí với truyện
tranh đa dạng và chất lượng.
• Hỗ trợ tác giả trong việc phổ biến và chia sẻ tác phẩm của họ, đồng thời
mang lại trải nghiệm đọc tốt nhất cho người đọc.
• Tạo ra một giao diện trực quan, dễ sử dụng để người đọc có thể thoải mái
thưởng thức truyện tranh.
• Hướng tới việc cung cấp đa dạng thể loại truyện để đáp ứng nhu cầu đa dạng của độc giả.
• Đảm bảo rằng nền tảng hoạt động mượt mà và thân thiện với thiết bị di động. 2. Mục tiêu:
• Xây dựng website có chức năng chính:
o Đăng nhập, đăng kí tài khoản cho đọc giả để thực hiện những chức năng có liên quan.
o Đọc truyện: Đọc được các bộ truyện hiện có trên website.
o Thêm bộ truyện vào danh sách yêu thích (Đã đăng nhập tài khoản).
o Xem lại lịch sử các bộ truyện đã đọc (Đã đăng nhập tài khoản).
o Bình luận về bộ truyện bất kỳ (Đã đăng nhập tài khoản).
o Phân loại truyện theo các danh sách thể loại khác nhau. 2
o Tìm kiếm truyện theo tên truyện, tag truyện.
o Top truyện được đọc nhiều nhất.
o Chuyển đổi giao diện Sáng – Tối ở giao diện.
• Nghiên cứu công nghệ và sử dụng thành thạo xây dựng website bằng framework VueJS. 3. Phạm vi:  Không gian: Trong nước
 Đối tượng: Mọi lứa tuổi, giới tính.  Nội dung nghiên cứu: o Công nghệ:
 Vue.js là một thư viện JavaScript mã nguồn mở được thiết
kế để xây dựng các giao diện người dùng hiện đại và tương tác trên trình duyệt web.
 Reactivity: Vue.js sử dụng hệ thống phản ứng để theo dõi và
tự động cập nhật DOM khi dữ liệu thay đổi và Dữ liệu và
DOM liên kết hai chiều, giúp tái sử dụng component và quản
lý trạng thái ứng dụng dễ dàng.
 Component-Base Archtecture: Phát triển ứng dụng Vue.js
theo mô hình component giúp tái sử dụng code và dễ quản lý
và Component có thể nhúng vào nhau, tạo thành cây
component, giúp tổ chức code rõ ràng và linh hoạt.
 Vue Router: Vue Router là một thư viện quản lý định tuyến
giúp xây dựng ứng dụng đơn trang (SPA) với các trang và
định tuyến và Hỗ trợ định tuyến linh hoạt, tạo ra các ứng
dụng có trải nghiệm người dùng mượt mà. 3
 Vuex (Quản lý trạng thái ứng dụng): Vuex là một thư viện
quản lý trạng thái giúp theo dõi trạng thái của ứng dụng một
cách hiệu quả và Sử dụng kiến trúc Flux, Vuex giúp duy trì
một trạng thái chung cho toàn bộ ứng dụng.
 Directive System: Vue.js có hệ thống chỉ thị mạnh mẽ như
v-bind, v-for, giúp quản lý DOM và dữ liệu một cách thuận
tiện. và Cho phép lập trình viên tương tác trực tiếp với DOM
mà không cần phải viết nhiều mã JavaScript.
 Watchers và Computer Properties: Vue.js cung cấp Watchers
để theo dõi sự thay đổi trong dữ liệu và thực hiện các hành
động tương ứng và Computed Properties giúp tính toán dữ
liệu dựa trên các thuộc tính theo dõi và tự động cập nhật khi cần thiết.
 LifeCycle hook: Vue.js cung cấp một loạt các lifecycle
hooks như beforeCreate, created, mounted,... giúp kiểm soát
quá trình khởi tạo và tuần tự hóa các hành động.
 Vue CLI: Vue CLI giúp tạo ra các dự án Vue.js một cách
nhanh chóng và dễ dàng và Hỗ trợ quản lý dependencies, dev
server, và triển khai ứng dụng một cách thuận tiện.
 Server-side Rendering: Vue.js hỗ trợ Server-Side Rendering,
giúp cải thiện hiệu suất và tăng khả năng tìm kiếm cho ứng dụng Vue.js.
 Active Community: Vue.js có một cộng đồng đông đảo và
nhiệt huyết, cung cấp tài liệu chi tiết và sẵn sàng hỗ trợ trên
các diễn đàn và trang web chia sẻ kiến thức. o
Thiết kế hệ thống: phân tích, thiết kế website truyện tranh có các chức năng:
 Thêm, sửa, xóa đọc giả (Admin). 4
 Thêm, sửa, xóa truyện (Admin).
 Thêm, sửa, xóa bình luận (Admin).
 Thêm, sửa, xóa danh sách truyện (Admin).
 Đọc truyện (Admin, User).
 Tìm kiếm truyện (Admin, User).
 Bình luận truyện (Admin, User).
 Thêm truyện vào yêu thích (Admin, User).
 Xem lại truyện đã đọc (Admin, User).
 Chuyển đổi giao diện Sáng – Tối (Admin, User). IV.
Phương pháp nghiên cứu:
1. Phân tích thị trường:
 Nghiên cứu thị trường truyện tranh trực tuyến để hiểu rõ về đặc điểm
cạnh tranh, nhu cầu của độc giả, và xu hướng tiêu dùng.
 Tiến hành khảo sát trực tuyến và offline để thu thập ý kiến, ý định sử
dụng và đánh giá của độc giả về các trang web truyện tranh hiện tại.
2. Phân tích yêu cầu độc giả:
 Tiến hành cuộc phỏng vấn và thăm dò ý kiến để đánh giá mong muốn
và nhu cầu của độc giả đối với một nền tảng đọc truyện tranh trực tuyến mới.
 Phân tích dữ liệu từ các cuộc thảo luận trong cộng đồng trực tuyến để
hiểu rõ hơn về ý kiến và góp ý của cộng đồng đọc truyện.
3. Thiết kế nguyên mẫu và thử nghiệm người dùng:
 Phát triển nguyên mẫu giao diện người dùng dựa trên các phản hồi và
yêu cầu thu được từ phần trước.
 Tiến hành các buổi thử nghiệm người dùng để đánh giá sự thuận tiện,
hiệu quả và sự hài lòng của người sử dụng với giao diện người dùng.
4. Phát triển, duy trì nền tảng: 5
 Xây dựng nền tảng dựa trên kết quả của các phần nghiên cứu và thử nghiệm.
 Liên tục cập nhật và phát triển nền tảng dựa trên phản hồi từ người
đọc và tác giả, đồng thời theo dõi xu hướng mới trong lĩnh vực truyện tranh.
5. Đánh giá, phản hồi liên tục:
 Thực hiện đánh giá định kỳ về hiệu suất của nền tảng, bao gồm thời
gian tải trang, trải nghiệm người dùng, và chất lượng nội dung.
 Tổ chức các cuộc khảo sát và thu phản hồi định kỳ từ cộng đồng đọc
truyện và cộng đồng tác giả để nắm bắt ý kiến và đề xuất cải tiến. 6
Chương 1: Phân tích thiết kế hệ thống 1.1. Đặc tả:
1.1.1. Mục đích và tổng quan:
- Mục đích: Xây dựng một nền tảng trực tuyến cho việc đọc truyện,
cung cấp trải nghiệm người dùng thuận lợi và thoải mái.
- Tổng quan: Hệ thống sẽ hỗ trợ người đọc truyện trực tuyến thông
qua giao diện web, cung cấp các tính năng đa dạng và tối ưu hóa trải
nghiệm người dùng. Hệ thống sẽ phân quyền gồm “Admin” và “Người dùng”.
1.1.2. Các chức năng chính của Admin:
a. Đăng nhập và đăng xuất:
- Admin chỉ có 1 tài khoản để quản lý trang web và phải đăng
nhập bằng tài khoản đó.
- Nhập đúng thông tin tài khoản thì sẽ đăng nhập vào web với tư
cách là “Admin”, không đúng sẽ báo lỗi.
- Admin có thể đăng xuất khỏi hệ thống bất cứ lúc nào. b. Đăng truyện:
- Admin có thể thêm mới 1 bộ truyện: thêm hình ảnh minh hoạ
cho bộ truyện đó, ghi tên truyện, ghi tên tác giả của truyện đó,
gắn thẻ truyện đó thuộc thể loại nào, ghi mô tả tóm tắt nội dung
truyện, thêm danh sách chương của bộ truyện đó, thêm hình ảnh
cho từng chương truyện, thêm trạng thái cập nhật của từng chương truyện.
c. Chỉnh sửa truyện: 7
- Admin có thể chỉnh sửa 1 bộ truyện bát kỳ: cập nhật hình ảnh
minh hoạ cho bộ truyện đó, cập nhật lại mô tả truyện, cập nhật
lại thể loại truyện, cập nhật thêm chương mới cho truyện và
hình ảnh trong từng chương. d. Xoá truyện:
- Admin có thể xoá 1 chương truyện bất kỳ trong bộ truyện đó,
và có thể xoá hẳn luôn bộ truyện đó khỏi hệ thống.
1.1.3. Các chức năng chính của người dùng:
a. Đăng nhập, đăng ký và đăng xuất:
- Người dùng có thể tạo tài khoản mới hoặc đăng nhập bằng tài
khoản đã có. Nhập thông tin đúng thì sẽ đăng nhập thành công, nếu sai sẽ báo lỗi.
- Người dùng có thể đăng xuất khỏi hệ thống bất cứ lúc nào
nhưng vẫn có thể đọc truyện trên trang web, chỉ là không thể sử
dụng các tính năng mà phải đăng nhập mới có thể dùng được.
b. Quản lý thông tin:
- Người dùng có thể quản lý thông tin cá nhân của mình: chỉnh
sửa avatar, tên biệt danh, mật khẩu.
- Người dùng có thể quản lý thông tin về truyện của mình: có
thể thêm 1 bộ truyện bất kỳ vào danh sách yêu thích, và hiển thị
lịch sử đọc truyện của bản thân.
1.1.4. Các chức năng chính của trang web:
a. Giao diện trang web: 8
- Giao diện thân thiện, dễ sử dụng, có hiển thị các truyện đề
xuất và top truyện đọc nhiều nhất cho người dùng dễ tiếp cận hơn.
- Có hiển thị thanh menu gồm logo truyện, thanh tìm kiếm, danh
sách thể loại truyện và thông tin cá nhân của người dùng.
- Khi bấm vào 1 bộ truyện bất kỳ sẽ hiển thị trang thông tin chi
tiết của bộ truyện đó, bao gồm: ảnh minh hoạ của truyện đó, tên
truyện, tên tác giả, các tag thể loại của truyện, mô tả tóm tắt nội
dung của truyện, nút “Bắt đầu đọc” và nút “Theo dõi”, danh
sách chương truyện và ngày tháng ngập nhật của từng chương truyện đó.
- Khi bấm vào chương bất kỳ hoặc nút “Bắt đầu đọc” sẽ hiển thị
các hình ảnh các trang truyện của chương truyện tương ứng đó.
Đồng thời ở đầu chương và cuối chương sẽ hiển thị các nút
dùng để: “Thông tin chi tiết truyện”, “Hiển thị danh sách
chương”, “Lùi về chương trước”, “Chương tiếp theo”, “Trở về trang chủ”
b. Danh mục và tìm kiếm:
- Danh mục truyện phong phú, đa dạng, có nhiều thể loại cho người dùng lựa chọn.
- 1 truyện có thể có chứa nhiều tag thể loại trong đó.
- Hệ thống tìm kiếm mạnh mẽ với khả năng lọc kết quả.
1.1.5. Các chức năng thêm
(có thể phát triển) :
- Tính năng xã hội: người dùng sau khi đăng nhập có thể comment và
đánh giá dưới từng bộ truyện, có thể xoá comment của mình. Admin 9
có thể xoá comment bất kỳ nếu cảm thấy nó không hợp lệ. Các người
dùng khác (kể cả khi không đăng nhập) đều có thể thấy được các bình
luận trong trang thông tin chi tiết của bộ truyện đó, từ đó họ có 1 cái
nhìn khách quan hơn về chất lượng của bộ truyện này.
- Người dùng sau khi click vào 1 chương bất kỳ trong danh sách
chương của 1 bộ truyện, thì dòng chữ chương trong danh sách đó sẽ bị
làm mờ, biểu thị cho việc đã click vào đọc chương truyện này rồi. 1.2. thiet ke HT So do luong du lieu So do tuan tu 10