141327 20204515 nguyenhoangbao
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.01 MB, 28 trang )
ĐẠI HỌC BÁCH KHOA HÀ NỘI
TRƯỜNG CÔNG NGHỆ THÔNG TIN VÀ TRÙN THƠNG
BÁO CÁO
Cơng nghệ Web và dịch vụ trực tuyến
Web blog
Giảng viên hướng dẫn
: Phạm Huy Hoàng
Lớp
: Khoa học máy tính 06 – K65
Sinh viên thực hiện
: Nguyễn Hoàng Bảo
MSSV
: 20204515
Hà Nội, 7/2023
Muc lục
A.Mơ tả bài tốn ............................................................................................................................. 1
B. Phân tích các yêu cầu chức năng cho bài toán (case study) ....................................................... 1
I. Yêu cầu chức năng ................................................................................................................... 1
II. Yêu cầu phi chức năng ............................................................................................................ 1
C. Các công nghệ sử dụng ............................................................................................................... 2
I.Vue 3(Front-end)....................................................................................................................... 2
II. Vite 4 (Front-end).................................................................................................................... 2
III. PrimeVue (Front-end) ............................................................................................................ 2
IV, NestJs(Back-end).................................................................................................................... 3
V, PostgreSQL (Database) ........................................................................................................... 3
VI, Oauth2 google (Login Oauth2) .............................................................................................. 3
VII, Storage Firebase (Storage) ................................................................................................... 4
D. Cơ sở dữ liệu ............................................................................................................................... 4
I. Bảng User ................................................................................................................................. 4
II. Bảng Post................................................................................................................................. 5
III. Bảng Comment....................................................................................................................... 5
E. Phân tích cơ bản cho nghiệp vụ bài toán .................................................................................... 7
I, Biểu đồ Use case: ..................................................................................................................... 7
1.Thông tin đăng nhập thông thường: ................................................................................... 7
2. Thông tin đăng nhập bằng gmail: ....................................................................................... 7
3. Thông tin đăng xuất ............................................................................................................ 8
4. Quản lý bài viết ................................................................................................................... 8
5. Quản lý bình luận ................................................................................................................ 8
F. Biểu đồ usecase chi tiết............................................................................................................. 10
I. UseCase Đăng nhập/ Đăng ký ................................................................................................ 10
II. Usecase bài đăng .................................................................................................................. 11
1, Đặc tả usecase “Đăng bài” ................................................................................................ 11
2, Đặc tả usecase “Thay đổi bài đăng”.................................................................................. 13
II.Usecase Xem bài đăng /Thả cảm xúc..................................................................................... 15
1, Đặc tả usecase “xem danh sách bài đăng” ....................................................................... 15
2, Đặc tả usecase “Thả tym bài đăng” .................................................................................. 16
III. Usecase Bình luận ................................................................................................................ 18
1, Đặc tả usecase “Thêm bình ln/bình luận” .................................................................... 18
2, Đặc tả usecase “xóa bình luận”......................................................................................... 20
G. Phân rã các chức năng của hệ thống ........................................................................................ 21
I.Use case phân rã “Tạo bài đăng.” ........................................................................................... 21
II. Usecase phân rã “Xem bài đăng”.......................................................................................... 22
III. UseCase phân rã “Chỉnh sửa bài viết” ................................................................................. 22
IV. Usecase phân rã “Thêm/hủy cảm xúc tym” ........................................................................ 23
IV. UseCase phân rã “Thêm bình luận” ..................................................................................... 23
V.UseCase phân rã “Xóa bình luận” .......................................................................................... 24
H. Kho lưu trữ mà nguồn của dự án ............................................................................................. 24
I, Kết luận ...................................................................................................................................... 24
I. Thành quả thu được .............................................................................................................. 24
II. Khó khăn và hạn chế ............................................................................................................. 24
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
A.Mơ tả bài tốn
Xây dựng trang web blog với các chức năng sau:
•
•
•
•
•
Sử dụng tài khoản gmail để login
User sau khi login có thể viết blog của mình. Nội dung blog yêu cầu tối thiểu phải chấp
nhận text, hình ảnh, âm thanh. Text có thể được format (đậm, nghiêng, font to/nhỏ,
v.v..).
Các user khác khi vào blog có thể bình luận và xem các bình luận của người khác
User sở hữu bài blog có thể nhìn được tất cả các bình luận và xóa bình luận
Yêu cầu giao diện thiết kế đẹp mắt, các chức năng chạy khơng lỗi.
B. Phân tích các u cầu chức năng cho bài tốn (case study)
I. u cầu chức năng
•
•
•
•
•
Đăng nhập và đăng ký: Cho phép người dùng đăng nhập vào trang web bằng tài khoản
đã đăng ký hoặc tạo một tài khoản mới hoặc sử dụng tài khoản gmail để login.
Viết bài blog: Cung cấp giao diện cho phép người dùng tạo và đăng bài blog. Người dùng
có thể nhập nội dung, thêm ảnh,video,audio,… và định dạng văn bản.
Hiển thị bài viết: Hiển thị danh sách các bài viết mới nhất hoặc theo danh mục. Cung cấp
một trang đọc bài viết chi tiết khi người dùng nhấp vào một bài viết.
Quản lý bài viết: Cho phép người dùng chỉnh sửa, xóa và lưu trữ bài viết của mình.
Bình luận: Cho phép người dùng bình luận về các bài viết. Hiển thị bình luận và phản hồi
cho người dùng khác. Người sở hữu bài viết có thể nhìn được tất cả các bình luận và xóa
bình luận
II. u cầu phi chức năng
•
•
•
Giao diện người dùng thân thiện: Thiết kế giao diện đơn giản, dễ sử dụng và hấp dẫn
cho người dùng.
Tính bảo mật: Bảo vệ thơng tin người dùng và các dữ liệu bài viết bằng cách sử dụng mã
hóa và các biện pháp bảo mật khác.
Tốc độ tải trang: Đảm bảo thời gian tải trang nhanh để cung cấp trải nghiệm tốt cho
người dùng.
1
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
C. Các cơng nghệ sử dụng
I.Vue 3(Front-end)
Vue 3 là một framework JavaScript mã nguồn mở được thiết kế để xây dựng giao diện người
dùng (UI) linh hoạt và hiệu suất cao. Phiên bản này đem lại nhiều cải tiến so với phiên bản trước
đó, với tối ưu hóa hiệu suất, kích thước gọn nhẹ và khả năng xử lý tốt hơn. Vue 3 sử dụng
Composition API, một cơ chế "Reactivity" mới, cho phép phân tách logic thành các module độc
lập và tái sử dụng dễ dàng. Điều này giúp tăng tính linh hoạt và hiệu quả trong việc phát triển
ứng dụng. Vue 3 cũng cải tiến việc hỗ trợ TypeScript và cung cấp các kiểu dữ liệu mạnh mẽ, giúp
phát triển ứng dụng với tính tồn vẹn dữ liệu cao. Với tính năng tải lại chỉ các phần tử cần thiết,
Vue 3 giúp xây dựng ứng dụng đơn trang mượt mà và nhanh chóng.
II. Vite 4 (Front-end)
Vite 4 là một công cụ phát triển web nhanh chóng được thiết kế cho việc xây dựng ứng dụng
hiệu suất cao. Nó giúp tối ưu q trình phát triển và xây dựng ứng dụng web thông qua việc sử
dụng các module một cách hiệu quả và khả năng tải lại nhanh chóng. Vite 4 tạo ra một quy trình
phát triển mượt mà và trải nghiệm phát triển tốt nhờ vào khả năng hot module replacement
(HMR) cho phép xem ngay lập tức sự thay đổi trong quá trình phát triển. Nó cung cấp một mơi
trường phát triển đơn giản và dễ sử dụng, giúp bạn tập trung vào việc viết mã thay vì cấu hình.
Vite 4 tích hợp tốt với Vue 3, tận dụng lợi ích của Composition API và cung cấp hiệu suất tải
trang tối ưu. Nó cũng hỗ trợ TypeScript và tạo ra các bundle nhỏ gọn giúp giảm thời gian tải
trang và tăng trải nghiệm người dùng. Với Vite 4, việc xây dựng ứng dụng web hiệu suất cao trở
nên dễ dàng và nhanh chóng.
III. PrimeVue (Front-end)
Là một utility-first CSS framework, nó cũng giống như Bootstrap, nó có những class built-in.
Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng,có thể dễ
dàng mở rộng tạo mới ra những class bằng chính những class của nó. PrimeVue là một thư viện
UI mã nguồn mở dựa trên Vue.js, mang đến hơn 80+ thành phần giao diện người dùng (UI
components) đẹp mắt và mạnh mẽ. Với PrimeVue, bạn có thể dễ dàng xây dựng các ứng dụng
web chuyên nghiệp và tùy chỉnh theo nhu cầu của bạn. Thư viện này tích hợp tốt với Vue.js và
sử dụng cú pháp gần gũi, giúp việc tích hợp và sử dụng thành phần trở nên dễ dàng. PrimeVue
cung cấp các tính năng như xử lý sự kiện, ràng buộc dữ liệu, kiểm soát trạng thái và tương tác
động. Nó cũng hỗ trợ tùy chỉnh để phù hợp với yêu cầu của ứng dụng của bạn. Thư viện có một
cộng đồng lớn và năng động, cung cấp tài liệu phong phú, hướng dẫn và ví dụ minh họa. Với
PrimeVue, bạn có thể xây dựng các ứng dụng web đẹp, tương tác và mạnh mẽ một cách dễ
dàng.
2
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
IV, NestJs(Back-end)
NestJS là một framework Node.js mã nguồn mở, sử dụng TypeScript và kiến trúc tương tự
Angular để phát triển ứng dụng back-end. Với NestJS, bạn có thể xây dựng các ứng dụng backend mạnh mẽ và dễ bảo trì. Framework này hỗ trợ kiến trúc phân lớp, dependency injection, và
sử dụng Express hoặc Fastify làm khung sườn. NestJS tận dụng tính năng của TypeScript cho
kiểm tra lỗi tại thời điểm biên dịch và cung cấp một cộng đồng phát triển lớn. Với NestJS, bạn
có thể phát triển ứng dụng back-end hiệu quả và linh hoạt.
V, PostgreSQL (Database)
PostgreSQL là một hệ thống quản trị cơ sở dữ liệu quan hệ và đối tượng (object-relational
database management system) miễn phí và nguồn mở (RDBMS) tiên tiến nhất hiện nay. khả
năng mở rộng cao và tuân thủ các tiêu chuẩn kỹ thuật. Nó được thiết kế để xử lý một loạt các
khối lượng công việc lớn, từ các máy tính cá nhân đến kho dữ liệu hoặc dịch vụ Web có nhiều
người dùng đồng thời.
VI, Oauth2 google (Login Oauth2)
1. Người dùng truy cập vào trang web và chọn phương thức đăng nhập bằng tài khoản
Google.
2. Trang web chuyển hướng người dùng đến URL xác thực của Google (chẳng hạn:
/>3. Tại trang xác thực của Google, người dùng được yêu cầu đăng nhập vào tài khoản
Google của họ (nếu chưa đăng nhập trước đó).
4. Người dùng cung cấp thông tin đăng nhập (địa chỉ email và mật khẩu) và xác thực tài
khoản của mình.
5. Sau khi người dùng xác thực thành công, Google cấp cho trang web một mã xác thực
(authorization code).
6. Trang web sử dụng mã xác thực này để yêu cầu thông tin truy cập từ Google. Yêu cầu
này bao gồm thông tin như mã xác thực, Client ID và Client Secret của trang web.
7. Google xác minh thông tin yêu cầu và nếu hợp lệ, cung cấp cho trang web một mã truy
cập (access token) và một mã làm mới (refresh token).
8. Trang web sử dụng mã truy cập này để truy cập các dịch vụ của Google mà người dùng
đã cho phép.
9. Trang web có thể lưu trữ mã làm mới để cung cấp quyền truy cập liên tục cho người
dùng mà không cần hỏi lại thông tin đăng nhập.
3
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
10. Người dùng đã đăng nhập thành cơng vào trang web và có thể truy cập các tính năng
hoặc dịch vụ mà tài khoản Google của họ đã cho phép.
VII, Storage Firebase (Storage)
Firebase là một nền tảng phát triển ứng dụng di động và web của Google. Firebase Realtime
Database là một dịch vụ lưu trữ dữ liệu thời gian thực, sử dụng định dạng JSON. Nó cung cấp
tính năng đồng bộ dữ liệu ngay lập tức trên nhiều thiết bị và cho phép quản lý quyền truy cập
dữ liệu. Firebase Realtime Database tích hợp tốt với các nền tảng phát triển và cho phép mở
rộng dữ liệu một cách linh hoạt.
D. Cơ sở dữ liệu
I. Bảng User
Tên
trường
Kiểu dữ
liệu
Ràng buộc tồn
vẹn
Khn dạng
id
integer
Khố chính
Số ngun
dương
createdAt
datetime
Not null
Ngày
Ngày thêm vào
updatedAt
datetime
Not null
Ngày
Ngày cập nhật gần nhất
name
text
Not null
Văn bản
username
text
Not null
Văn bản
Tên đăng nhập
password
text
Văn bản
Được hash và lưu vào
text
Not null
Văn bản
4
Ghi chú
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
phone
int
Số nguyên
dương
avatar
json
json
ảnh đại diện của người
dùng
II. Bảng Post
Tên
trường
Kiểu dữ
liệu
Ràng buộc
tồn vẹn
Khn dạng
Ghi chú
id
integer
Khố chính,
not null
Số nguyên
dương
createdAt
datetime
Not null
Ngày
Ngày thêm vào
updatedAt
datetime
Not null
Ngày
Ngày cập nhật gần nhất
limit
text
Not null
Văn bản
Trạng thái bài viết
ownerId
int
Not null
Số nguyên
dương
Id của chính chủ bài viết
file
json
json
Mảng path của ảnh, video, …
content
json
json
Lưu nội dung text dưới dạng object
chứa css cho chữ
III. Bảng Comment
Tên trường
Kiểu dữ liệu
Ràng buộc tồn
vẹn
5
Khn dạng
Ghi chú
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
id
int
Khố chính, not
null
Số ngun dương
createdAt
datetime
Not null
Ngày
Ngày thêm vào
updatedAt
datetime
Not null
Ngày
Ngày cập nhật gần nhất
contentComm text
ent
Văn bản
file
json
json
Mảng path của ảnh, video,
…
owner
int
Not null
Số nguyên dương
Liên kết với bảng người
dùng
postId
int
Not null
Số nguyên dương
Liên kết với bảng bài đăng
6
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
E. Phân tích cơ bản cho nghiệp vụ bài tốn
I, Biểu đồ Use case:
1.Thơng tin đăng nhập thơng thường:
input
process
output
usename
Kiểm tra/ lưu trữ/ tìm kiếm Đăng nhập thành công hay không
password
2. Thông tin đăng nhập bằng gmail:
input
process
output
Tuân thủ trình tự đăng nhập theo Đăng nhập thành công hay không
Oauth2 Google
password
7
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
3. Thơng tin đăng xuất
Input
process
output
Yêu cầu đăng xuất Kiểm tra Đăng xuất thành công hay khơng
4. Quản lý bài viết
•
Với các chức năng thêm bài viết, thêm người cần gắn thẻ vào bài viết, sửa
các thông tin của bài viết
Input
process
output
Các thông tin, yêu cầu
của người yêu cầu và
những người liên quan
Kiểm tra/ tìm
kiếm/ lưu trữ
Kiểm tra, tìm kiếm các u cầu,
thơng tin có hợp lệ không rồi thực
hiện các thay đổi theo yêu cầu về
bài viết
Các thơng tin về bài viết
•
Với các chức năng xem bài viết công khai và xem bài viết của một người
dùng
Input
process
output
Nhấn xem danh sách bài
viết
Kiểm tra/
tìm kiếm/
hiển thị
Kiểm tra, tìm kiếm các u cầu, thơng
tin có hợp lệ khơng rồi thực hiện hiển
thị thông tin mà người dung yêu cầu
tùy vào trường hợp
Người dùng cần xem danh
sách bài viết của họ
5. Quản lý bình luận
•
Thực hiện các chức năng thêm bình luận
8
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
Input
process
output
Nhập nội
dung bình
luận
-Nếu có file thì gửi file
lên kho lưu trữ firebase
-Kiểm tra/ Lưu trữ
Kiểm tra các u cầu, thơng tin có hợp
lệ khơng rồi thực hiện lưu trữ vào
database
Gửi kèm file
ảnh
•
Thực hiện các chức năng xóa bình luận
Input
process
output
Nhấn nút xóa bình
luận
Kiểm tra tính hợp
lệ và thực hiện
xóa dữ liệu
Kiểm tra các yêu cầu, thơng tin có hợp
lệ khơng rồi thực hiện xóa bình luận
trong database
9
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
F. Biểu đồ usecase chi tiết
I. UseCase Đăng nhập/ Đăng ký
10
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
II. Usecase bài đăng
1, Đặc tả usecase “Đăng bài”
Tác nhân
Người dùng
Mô tả
Thêm đăng bài viết
11
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
Tiền điều
kiện
Khơng
Luồng sự
kiện chính
STT Thực
hiện bởi
Luồng sự
kiện thay thế
Hành động
1
Người
dùng
Chọn chức năng tạo bài viết
2
Hệ thống
Hiện giao diện để người dùng nhập thông tin
3
Người
dùng
Nhập thông tin và nhấn thêm bài viết
4
Hệ thống
Kiểm tra các thơng tin có hợp lệ khơng
5
Hệ thống
Thơng báo đã nhập thành công
STT Thực
hiện bởi
Hành động
12
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
1
Hậu điều
kiện
Hệ thống
Thơng báo lỗi khi xuất hiện nội dung không hợp lệ,
kết quả không hợp lệ không thể hiển thị kết quả
hoặc lỗi hệ thống
Không
2, Đặc tả usecase “Thay đổi bài đăng”
Tác nhân
Người dùng
Mô tả
Thay đổi nội dung của bài đăng
Tiền điều
kiện
Không
Luồng sự
kiện chính
STT Thực
hiện bởi
Hành động
1
Người
dùng
Chọn chức năng thay đổi bài đăng
2
Hệ thống
Hiện giao diện để người dùng nhập thông tin
3
Người
dùng
Nhập thông tin và nhấn thay đổi bài đăng
13
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
Luồng sự
kiện thay thế
Hậu điều
kiện
4
Hệ thống
Kiểm tra các thơng tin có hợp lệ khơng
5
Hệ thống
Thông báo đã nhập thành công
STT Thực
hiện bởi
Hành động
1
Thông báo lỗi khi xuất hiện nội dung không hợp lệ,
kết quả không hợp lệ không thể hiển thị kết quả
hoặc lỗi hệ thống
Hệ thống
Không
14
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
II.Usecase Xem bài đăng /Thả cảm xúc
1, Đặc tả usecase “xem danh sách bài đăng”
Tác nhân
Người dùng
Mô tả
Xem danh sách bài đăng theo tùy chọn của bản thân , bài đăng công
khai của một người khác hay bài đăng công khai của tất cả mọi người
Tiền điều
kiện
Khơng
Luồng sự
kiện chính
STT Thực
hiện bởi
1
Người
dùng
Hành động
Chọn chức năng home page hoặc nhấn vào người dung
khác hoặc personal page
15
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
2
Hệ thống
Kiểm tra các thơng tin có hợp lệ khơng
3
Hệ thống
Lấy dữ liệu từ database và hiển thị ra danh sách bài viết
cho người dùng
Luồng sự
STT Thực
kiện thay thế
hiện bởi
1
Hậu điều
kiện
Hệ thống
Hành động
Thông báo lỗi khi xuất hiện nội dung không hợp lệ,
kết quả không hợp lệ không thể hiển thị kết quả hoặc
lỗi hệ thống
Không
2, Đặc tả usecase “Thả tym bài đăng”
Tác nhân
Người dùng
Mơ tả
Thả icon tym cho bài đăng nào đó
Tiền điều
kiện
Khơng
Luồng sự
kiện chính
STT Thực
hiện bởi
Hành động
16
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
Luồng sự
kiện thay thế
1
Người
dùng
Nhấn nút thả tym trong mỗi bài viết
2
Hệ thống
Lưu trữ hành động thả tym và bỏ thả tym của người dùng
và lưu lại
3
Người
dùng
Khi người dung truy cập sang trang khác
4
Hệ thống
Gửi dữ liệu thu thập dược về server để lưu trữ
5
Hệ thống
Kiểm tra các thơng tin có hợp lệ khơng
6
Hệ thống
Lưu trữ và cập nhật lại dữ liệu
STT Thực
hiện bởi
Hành động
1
Thông báo lỗi khi xuất hiện nội dung không hợp lệ,
kết quả không hợp lệ không thể hiển thị kết quả
hoặc lỗi hệ thống
Hệ thống
17
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
Hậu điều
kiện
Khơng
III. Usecase Bình luận
1, Đặc tả usecase “Thêm bình luân/bình luận”
Tác nhân
Người dùng
18
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
Mơ tả
Thêm bình luận
Tiền điều
kiện
Khơng
Luồng sự
kiện chính
STT Thực
hiện bởi
Luồng sự
kiện thay thế
Hành động
1
Người
dùng
Chọn chức năng tạo bình luận
2
Hệ thống
Hiện giao diện để người dùng nhập thơng tin
3
Người
dùng
Nhập thơng tin và nhấn thêm bình luận
4
Hệ thống
Kiểm tra các thơng tin có hợp lệ khơng
5
Hệ thống
Thơng báo đã nhập thành công
STT Thực
hiện bởi
Hành động
19
Nguyễn Hồng Bảo-20204515- Đề tài: Website Blog
1
Hậu điều
kiện
Hệ thống
Thơng báo lỗi khi xuất hiện nội dung không hợp lệ,
kết quả không hợp lệ không thể hiển thị kết quả
hoặc lỗi hệ thống
Khơng
2, Đặc tả usecase “xóa bình luận”
Tác nhân
Người dùng
Mơ tả
Xóa bình luận của người khác trong bài viết của mình hoặc bình luận
của chính người dùng đó
Tiền điều
kiện
Khơng
Luồng sự
kiện chính
STT Thực
hiện bởi
Hành động
1
Người
dùng
2
Hệ thống Kiểm tra các thơng tin có hợp lệ khơng
3
Hệ thống Xóa bình luận theo u cầu trong database
Chọn chức năng xóa bình luận
20
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
Luồng sự
kiện thay thế
STT Thực
hiện bởi
1
Hậu điều
kiện
Hành động
Hệ thống Thông báo lỗi khi xuất hiện nội dung không hợp lệ,
kết quả không hợp lệ không thể hiển thị kết quả hoặc
lỗi hệ thống
Không
G. Phân rã các chức năng của hệ thống
I.Use case phân rã “Tạo bài đăng.”
21
Nguyễn Hoàng Bảo-20204515- Đề tài: Website Blog
II. Usecase phân rã “Xem bài đăng”
III. UseCase phân rã “Chỉnh sửa bài viết”
22
