ĐỒ án tìm HIỂU REACTJS và xây DỰNG BLOG CHIA sẻ KIẾN THỨC (đồ án SE121 l21 PMCL)

VIETNAM NATIONAL UNIVERSITY HO CHI MINH CITY
INFORMATION TECHNOLOGY UNIVERSITY
SOFTWARE ENGINEERING FACULTY

BÁO CÁO CUỐI KỲ
ĐỒ ÁN 1 - SE121.L21.PMCL

TÌM HIỂU REACTJS VÀ XÂY DỰNG BLOG
CHIA SẺ KIẾN THỨC

GVHD: Thái Thụy Hàn Uyển
Nhóm thực hiện:
Dương Minh Sang
Lê Hồng Thiện

18520144
18521426

TPHCM, Tháng 6 năm 2021
1


NHẬN XÉT
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………

………………………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
………………………………………………………………………………………………………………………………………..
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………
…………………………………………………………………………………………………………………………………………

2

LỜI CẢM ƠN
Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường
Đại học Công nghệ Thông tin chúng em đã được trang bị các kiến thức cơ
bản, các kỹ năng thực tế để có thể hồn thành đồ án mơn học của mình.
Chúng em xin gửi lời cảm ơn chân thành đến cô Thái Thụy Hàn Uyển đã
quan tâm, hướng dẫn, truyền đạt những kiến thức và kinh nghiệm cho
chúng em trong suốt thời gian học tập môn Nhập môn ứng dụng di động.
Trong quá trình làm đồ án mơn khơng tránh khỏi được những sai sót,
chúng em mong nhận được sự góp ý của quý thầy và các bạn để được hoàn
thiện hơn.
TP. Hồ Chí Minh, tháng 6, năm 2021.

3


MỤC LỤC
NHẬN XÉT ......................................................................................................................... 2
LỜI CẢM ƠN ...................................................................................................................... 3
1. GIỚI THIỆU ĐỀ TÀI ...................................................................................................... 6
1.1 Hiện trạng. ................................................................................................................. 6
1.2 Mục đích và yêu cầu của đề tài ................................................................................. 6
1.2.1 Mục đích ............................................................................................................. 6
1.2.2 Yêu cầu ............................................................................................................... 7
1.2.3 Người dùng ......................................................................................................... 7
1.3 Phương pháp phát triển ứng dụng ............................................................................. 7
1.3.1 Quy trình phát triển ứng dụng ............................................................................ 7
1.3.2 Kiến trúc ứng dụng: Client -Server .................................................................... 8
1.4 Các chức năng chính.................................................................................................. 8

2. PHÂN TÍCH YÊU CẦU ................................................................................................. 9
2.1 Danh sách tác nhân .................................................................................................. 10
2.2 Danh sách use case .................................................................................................. 10
2.3 Đặc tả: ...................................................................................................................... 11
2.3.1. Đặc tả Use-case “Login” ................................................................................. 11
2.3.2. Đặc tả Use-case “Logout” ............................................................................... 12
2.3.3. Đặc tả Use-case “Sign Up”.............................................................................. 13
2.3.4. Đặc tả Use-case “Xem bài viết” ...................................................................... 14
2.3.5

Đặc tả Use-case “Sửa bài viết” ..................................................................... 15

2.3.6

Đặc tả Use-case “Thêm bài viết” .................................................................. 16

2.3.7

Đặc tả Use-case “Xóa bài viết” ..................................................................... 17

2.3.8

Đặc tả Use-case “Like bài viết” .................................................................... 18

2.3.9

Đặc tả Use-case “Share bài viết” .................................................................. 19

2.3.10 Đặc tả Use-case “Comment bài viết” ............................................................. 20
2.3.11

Đặc tả Use-case “Tìm kiếm bài viết” ........................................................ 21

3.THIẾT KẾ ...................................................................................................................... 22
3.1. Thiết kế dữ liệu ....................................................................................................... 22
3.1.1 Cơ sở dữ liệu..................................................................................................... 22
3.1.2 Mô tả chi tiết ..................................................................................................... 22
4


3.2 Thiết kế kiến trúc chương trình ............................................................................... 24
3.2.1 Tổng quát kiến trúc của hệ thống ..................................................................... 24
3.2.2 Chi tiết mô tả kiến trúc của hệ thống ................................................................ 26
3.2. Thiết kế giao diện ................................................................................................. 31
3.2.1.

Danh sách các màn hình ............................................................................ 31

3.2.2.

Mơ tả các màn hình .................................................................................... 37

4.

CÀI ĐẶT VÀ KIỂM THỬ........................................................................................ 46

5.

KẾT LUẬN VÀ HƯỚNG MỞ RỘNG ..................................................................... 47
5.1. Kết luận................................................................................................................... 47

5.2. Hướng mở rộng ...................................................................................................... 48

6.

TÀI LIỆU THAM KHẢO: ........................................................................................ 48

5


1. GIỚI THIỆU ĐỀ TÀI
1.1 Hiện trạng.
Hiện nay,mỗi cá nhân có động lực riêng để viết blog. Nhiều người trong số họ sử
dụng nó như là một thay thế để giữ một cuốn nhật ký hoặc tạp chí. Viết blog cung
cấp cho họ một địa điểm để chia sẻ sự sáng tạo và ý tưởng của họ cho nhiều đối
tượng hơn.
Các thương hiệu và doanh nghiệp hàng đầu tạo ra các blog để giáo dục khách
hàng của họ, chia sẻ tin tức và tiếp cận đối tượng rộng hơn. Viết blog là một phần
thiết yếu của chiến lược tiếp thị trực tuyến cho nhiều doanh nghiệp.
Sau đây chỉ là một vài lợi ích của Blog:
●
●
●
●
●
●
●
●

Cung cấp một đại lộ để sắp xếp những suy nghĩ và ý tưởng của bạn
Cho phép bạn thể hiện kỹ năng, sáng tạo và tài năng của mình

Giúp các cá nhân trở thành một người có thẩm quyền trong ngành cơng
nghiệp của họ
Giúp bạn giao lưu với những người cùng chí hướng thú vị trên mạng
Nhiều blogger kiếm tiền từ blog của họ bằng nhiều phương pháp kiếm
tiền khác nhau
Các doanh nghiệp sử dụng blog để đưa nhiều khách hàng tiềm năng hơn
đến trang web của họ
Phi lợi nhuận có thể sử dụng blog để nâng cao nhận thức, chạy các chiến
dịch truyền thông xã hội và gây
Ảnh hưởng đến dư luận

1.2 Mục đích và yêu cầu của đề tài
1.2.1 Mục đích
- Chia sẻ kiến thức cá nhân .
- Giao lưu học hỏi nhiều kinh nghiệm cũng như kiến thức từ mọi người.
- Tạo một mơi trường để có thể giúp các lập trình viên, sinh viên học công
nghệ thông tin giao lưu, chia sẻ.

6


1.2.2 Yêu cầu
- Tính tiện dụng: Ứng dụng phải dễ học, dễ dùng. Thiết kế phải mới
(modern), tuy nhiên không quá cầu kỳ phức tạp gây khó chịu cho người
dùng.
- Tính đúng đắn: Ứng dụng chạy khơng lỗi.
- Tính thích nghi: Ứng dụng có thể chạy tốt trên nhiều thiết bị với cấu hình
phần cứng khác nhau và thiết kế kiến trúc thiết bị khác nhau.
- Tính tiến hố: Ứng dụng phải dễ dàng được phát triển thêm tính năng mà
khơng gây ảnh hưởng đến những tính năng đã phát triển trước đó.

1.2.3 Người dùng
- Dành cho những lập trình viên có nhu cầu đọc các bài blog để mở rộng
thêm kiến thức.
- Nhưng bạn mới bắt đầu tìm hiểu về lập trình
- Những bạn làm trái ngành, muốn chuyển sang làm developer

1.3 Phương pháp phát triển ứng dụng
1.3.1 Quy trình phát triển ứng dụng
Nhóm phát triển tn theo quy chuẩn thiết kế ứng dụng hiện hành. Nhóm đã
thực hiện bài tốn bài bản từng bước sau trong q trình phát triển ứng dụng:
● Bước 1: Nhóm tiến hành nghiên cứu các ứng dụng sẵn có (với chức năng
gần giống, vì chưa có một ứng dụng nào hỗ trợ được điều này) trên thị
trường để bắt kịp xu hướng.
● Bước 2: Nhóm tiến hành vẽ Usecase Diagram để mơ hình hố u cầu của
người dùng.
● Bước 3: Nhóm tiến hành vẽ Activity Diagram để mơ hình hố sự tương tác
giữa các thành phần trong hệ thống.
● Bước 4: Nhóm thực hiện chỉnh sửa lại mơ hình hố u cầu người dùng
theo những gì đã thu thập được.
● Bước 5: Nhóm thực hiện thiết kế CSDL
● Bước 6: Nhóm tiến hành nghiên cứu các cơng nghệ sẵn có để lựa chọn một
mơi trường phù hợp phát triển ứng dụng của mình. Nhóm đã chọn ReactJS
7


(JavaScript library for building user interfaces) để phát triển front-end cho
ứng dụng vì đây đang là library được các cơng ty cũng như lập trình viên ưu
tiên và cũng vì đây là cơng nghệ nhóm sẽ chia sẻ qua đồ án này.
● Bước 7: Nhóm tiến hành thiết kế giao diện Prototype cho ứng dụng.

● Bước 8: Nhóm tiến hành cơng đoạn cài đặt cho ứng dụng.
● Bước 9: Nhóm tiến hành cơng việc bảo trì (sửa chữa lỗi và phát triển thêm
những tính năng chưa được đề ra ban đầu).
● Bước 10: Nhóm hồn thành đồ án.

1.3.2 Kiến trúc ứng dụng: Client -Server

1.4 Các chức năng chính
•
•
•
•
•
•
•
•

Xác thực người dùng.
Xem các bài viết.
Tạo bài viết mới, publish và quản lí các bài viết đó (chỉnh sửa và xóa).
Tương tác với một bài viết bằng cách Like, Share và Comment.
Đề xuất các bài viết có liên quan.
Xem lại các bài viết đã Like.
Tìm kiếm các bài viết thơng qua từ khóa tìm kiếm.
Đề xuất Top các bài viết được xem nhiều nhất.

8


2. PHÂN TÍCH YÊU CẦU

9


2.1 Danh sách tác nhân
STT Tác nhân

Ý nghĩa

1

Là người xem nội dung bài viết. Nếu User đã đăng nhập sẽ có
quyền quản lí bài viết của bản thân, like share comment bài viết
khác.

User

2.2 Danh sách use case
STT Use case

Ý nghĩa

1

Login

Đăng nhập

2

Sign up

Đăng ký

3

Log out

Đăng xuất

4

Xem bài viết

Xem bài viết

5

Sửa bài viết

Sửa bài viết đã tạo

6

Thêm bài viết

Thêm bài viết mới

7

Xóa bài viết

Xố bài viết đã tạo

8

Like bài viết

Thích một bài viết khác

9

Share bài viết

Chia sẻ một bài viết

10

Comment bài viết

Comment 1 bài viết

11

Tìm kiếm bài viết

Tìm kiếm bài viết theo tag name của bài viết

12

Lưu bài viết

Lưu lại những bài viết đã thích .

10


2.3 Đặc tả:
2.3.1. Đặc tả Use-case “Login”
2.3.1.1 Tóm tắt
Tên chức năng
Mơ tả

Authentication(Login)
Người dùng có thể đăng nhập tài
khoản cho trang web
User
Người dùng đã có tài khoản
Khơng có
Khơng có
Khơng có

Tác nhân
Điều kiện trước
Điều kiện sau
Ngoại lệ
Các yêu cầu đặc biệt

2.3.1.2 Dòng sự kiện
Dịng sự kiện chính

1. User truy cập vào trang chủ bấm vào nút Sign in.
2. User được chuyển sang trang đăng nhập.
3. User nhập thông tin tài khoản, mật khẩu.
4. Hệ thống xác thực thông tin trên database.
5. Đăng nhập thành công chuyển người dùng trở về trang chủ.

Các dòng sự kiện khác
1. Khi đăng nhập nếu người dùng nhập sai tên tài khoản hoặc mật khẩu hệ
thống sẽ thông báo và yêu cầu người dùng nhập lại.
2. Khi đăng ký nếu người dùng nhập một tên tài khoản đã tồn tại hoặc
nhập lại mật khẩu sai thì hệ thống sẽ thông báo và yêu cầu nhập lại.
2.3.1.3 Các u cầu đặc biệt
Khơng có
2.3.1.4 Trạng thái hệ thống khi bắt đầu thực hiện Use-case
-Người dùng ở trang chủ và chưa đăng nhập
2.3.1.5 Trạng thái hệ thống sau khi thực hiện Use-case
- Nếu đăng nhập thành công hệ thống sẽ điều hướng người dùng trở lại
trang chủ của web và hiển thị avatar, tên người dùng, bookmark, thông
11


báo, nút đăng xuất và quản lí nội dung trên thanh điều hướng của trang
web.
- Nếu thất bại hệ thống sẽ gửi thơng báo lên màn hình và u cầu người
dùng nhập lại tên tài khoản và mật khẩu
2.3.1.6 Điểm mở rộng
Khơng có

2.3.2. Đặc tả Use-case “Logout”
2.3.2.1 Tóm tắt

Tên chức năng
Mô tả
Tác nhân
Điều kiện trước
Điều kiện sau
Ngoại lệ
Các yêu cầu đặc biệt

Show Bills
User đăng xuất
User
Đã đăng nhập
User đăng xuất khỏi trang web
Khơng có
Khơng có

2.3.2.2 Dịng sự kiện
Dịng sự kiện chính
1. User chọn lựa chọn Logout từ biểu tượng mũi tên đi xuống tại góc phải
trên của màn hình.
2. Đăng xuất thành công.
3. Thanh điều hướng sẽ hiển thị lại nút Sign In.
Các dịng sự kiện khác
Khơng có
2.3.2.3 Các u cầu đặc biệt
Khơng có
2.3.2.4 Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Khơng có

12

2.3.2.5 Trạng thái hệ thống sau khi thực hiện Use-case
Không có
2.3.2.6 Điểm mở rộng
Khơng có

2.3.3. Đặc tả Use-case “Sign Up”
2.3.3.1 Tóm tắt
Tên chức năng
Mơ tả
Tác nhân
Điều kiện trước
Điều kiện sau

Sign Up
User đăng ký thơng tin tài khoản
User
User chưa có tài khoản
User sau khi đăng ký thành công sẽ
tự động được đăng nhập vào hệ
thống
Khơng có
Khơng có

Ngoại lệ
Các u cầu đặc biệt

2.3.3.2 Dịng sự kiện
Dịng sự kiện chính

1. User khi đang ở trang đăng nhập, nhấn vào “Don’t have an account?
Sign Up” để chuyển sang đăng ký tài khoản mới
2. User nhập nhập đầy đủ các trường First Name, Last Name, Email,
Password và Repeat Password.
3. Sau khi nhập đầy đủ và hợp lệ các trường, người dùng được tạo một tài
khoản mới, tự động đăng nhập vào hệ thống và điều hướng đến trang
Home.
Các dòng sự kiện khác
1. Người dùng nhập không đầy đủ các trường hoặc các trường không hợp lệ
thì hệ thống thơng báo lỗi cụ thể và u cầu nhập lại.
Người dùng có thể quay lại trang đăng nhập hoặc trang Home.
2.3.3.3. Các u cầu đặc biệt
Khơng có
2.3.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case
User chưa có tài khoản và chưa đăng nhập vào trang web.

13


2.3.3.5. Trạng thái hệ thống sau khi thực hiện Use-case
Người dùng sau khi đăng ký thành công sẽ tự động được đăng nhập vào
trang web.
2.3.6. Điểm mở rộng
Khơng có

2.3.4. Đặc tả Use-case “Xem bài viết”
2.3.4.1 Tóm tắt
Tên chức năng
Mơ tả

Xem bài viết
User có thể xem bài viết . Nếu chưa
đăng nhập thì User chỉ được xem.
Nếu đã đăng nhập User có thể
like,comment,share bài viết đó.
User
Khơng có
Khơng có
Khơng có
Khơng có

Tác nhân
Điều kiện trước
Điều kiện sau
Ngoại lệ
Các yêu cầu đặc biệt
2.3.4.2 Dòng sự kiện
Dịng sự kiện chính

1. User chọn bài viết muốn xem trên trang chủ hoặc từ danh sách các bài
viết được đề xuất có liên quan trong trang hiển thị bài viết đang đọc.
2. User được điều hướng đến trang Post Detail để đọc bài viết đã chọn.
Các dòng sự kiện khác
Khơng có.
2.3.4.3. Các u cầu đặc biệt
Khơng có.
2.3.4.4 Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Khơng có
2.3.4.5
Trạng thái hệ thống sau khi thực hiện Use-case

User thành công xem thơng tin bài viết.
2.3.4.6
Điểm mở rộng
Khơng có
14


2.3.5 Đặc tả Use-case “Sửa bài viết”
2.3.5.1. Tóm tắt
Tên chức năng
Mô tả

Sửa bài viết
User chỉnh sửa những bài viết mà
User đã tạo.
User
User đăng nhập thành cơng tài
khoản.
Khơng có
Khơng có
Khơng có

Tác nhân
Điều kiện trước
Điều kiện sau
Ngoại lệ
Các yêu cầu đặc biệt

2.3.5.2. Dịng sự kiện
Dịng sự kiện chính

1. User trỏ chuột vào icon mũi tên hướng xuống góc trên bên phải màn
hình. Sau đó chọn Content.
2. User được chuyển màn hình sang màn hình Content.
3. User click vào một bài viết muốn chỉnh sửa từ danh sách bài viết đang
hiển thị.
4. User được điều hướng đến trang Edit Post và chỉnh sửa bài viết đã chọn.
5. Sau khi User hoàn thành việc chỉnh sửa.
6. User nhấn vào nút Publish Changes để lưu thay đổi.
7. Bài viết được thay đổi thành cơng.
Các dịng sự kiện khác
1.
User đang thực hiện thực hiện thay đổi nhưng điều hướng sang màn
hình khác. Ứng dụng sẽ gửi thông báo xác nhận.
1.1 Nếu người dùng chọn Continue Editing, User sẽ tiếp tục chỉnh sửa
bài viết.
1.2 Nếu người dùng chọn Discard Post. Người dùng sẽ dừng chỉnh
sửa và thông tin chỉnh sửa sẽ không được lưu lại.
2.3.5.3. Các yêu cầu đặc biệt
1. Các trường không được để trống.
15


2. Blog Title không quá 200 ký tự.
3. Tags phải có ít nhất 1 tag.
4. Opening khơng q 500 ký tự .
5. Detail ít nhất 100 ký tự.
2.3.5.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Người dùng đã được chuyển sang trang Edit Post.
2.3.5.5. Trạng thái hệ thống sau khi thực hiện Use-case
Bài viết được lưu thành công. Người dùng được chuyển sang trang xem bài

viết đã chỉnh sửa.
2.3.5.6. Điểm mở rộng
Khơng có

2.3.6 Đặc tả Use-case “Thêm bài viết”
2.3.6.1. Tóm tắt
Tên chức năng
Mơ tả
Tác nhân
Điều kiện trước

Thêm bài viết
User thêm bài viết mới.
User
User đăng nhập thành công tài
khoản.
Không có
Khơng có
Khơng có

Điều kiện sau
Ngoại lệ
Các u cầu đặc biệt

2.3.6.2. Dịng sự kiện
Dịng sự kiện chính
1. User trỏ chuột vào icon mũi tên hướng xuống góc trên bên phải màn hình.
Sau đó chọn Content.
2. User được chuyển màn hình sang màn hình Content.
3. User bấm vào nút Add Post trên màn hình.

4. User được chuyển đến màn hình Add Post.
5. User nhập tất cả thông tin cho bài viết.
6. Sau khi hồn tất nhập thơng tin, User bấm vào nút Publish để thêm bài viết
thành cơng.
Các dịng sự kiện khác
16


1. User đang thực hiện điền thông tin nhưng điều hướng sang màn hình khác.
Ứng dụng sẽ gửi thơng báo xác nhận.
1.1 Nếu người dùng chọn Continue Editing, User sẽ tiếp tục việc
chỉnh sửa nội dung cho bài viết cần thêm.
1.2 Nếu người dùng chọn Discard Post. Bài viết sẽ không được thêm.
2.3.6.3. Các yêu cầu đặc biệt
1. Các trường không được để trống.
2. Blog Title không quá 200 ký tự.
3. Tags phải có ít nhất 1 tag.
4. Opening khơng quá 500 ký tự .
5. Detail ít nhất 100 ký tự.
2.3.6.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Người dùng đã được chuyển sang trang Add Post.
2.3.6.5. Trạng thái hệ thống sau khi thực hiện Use-case
Bài viết được thêm thành công. Người dùng được chuyển sang trang xem
bài viết đã thêm.
2.3.6.6. Điểm mở rộng
Khơng có

2.3.7 Đặc tả Use-case “Xóa bài viết”
2.3.7.1. Tóm tắt
Tên chức năng

Mơ tả
Tác nhân
Điều kiện trước

Xóa bài viết
User xóa những bài viết của mình
User
User đã đăng nhập vào trang web
và đã publish ít nhất 1 bài viết
Khơng có
Khơng có
Khơng có

Điều kiện sau
Ngoại lệ
Các u cầu đặc biệt

2.3.7.2. Dịng sự kiện
Dịng sự kiện chính
1. User trỏ chuột vào icon mũi tên hướng xuống góc trên bên phải màn
hình. Sau đó chọn Content.
17


1. User được chuyển màn hình sang màn hình Content.
2. User rê con trỏ chuột vào bài viết muốn xóa, cuối dịng của bài viết
.muốn đó sẽ hiện ra icon “Xóa” (hình thùng rác).
3. Người dùng click vào icon “Xóa” để xóa bài viết.
4. Hệ thống thơng báo “Your Post will be deleted permanently. Are you
sure want to delete this post?”

5.1 Người dùng chọn Delete.
5.2 Bài viết được xóa, trang web reload lại danh sách các bài viết.
Các dòng sự kiện khác
5. Hệ thống thông báo “Your Post will be deleted permanently. Are you
sure want to delete this post?”
6.1 Người dùng chọn Cancel.
6.2 Bài viết khơng được xóa.

2.3.7.3. Các u cầu đặc biệt
Khơng có
2.7.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Người dùng đã đã đăng nhập vào đã publish it61 nhất 1 bài viết
2.7.5. Trạng thái hệ thống sau khi thực hiện Use-case
Trang Content sẽ load lại danh sách các bài viết của user. Bài viết được xóa.
2.7.6. Điểm mở rộng
Khơng có

2.3.8 Đặc tả Use-case “Like bài viết”
2.3.8.1. Tóm tắt
Tên chức năng
Mơ tả
Tác nhân
Điều kiện trước
Điều kiện sau
Ngoại lệ
Các yêu cầu đặc biệt

Like bài viết
User like những bài viết mình thích
User

User đã đăng nhập vào trang web
Khơng có
Khơng có
Khơng có

18


2.3.8.2. Dịng sự kiện
Dịng sự kiện chính
1. User chọn bài viết muốn xem trên trang chủ hoặc từ danh sách các bài
viết được đề xuất có liên quan trong trang hiển thị bài viết đang đọc.
2. User được điều hướng đến trang Post Detail để đọc bài viết đã chọn.
3. User nhấn vào biểu tượng thích trên bài viết.
Các dịng sự kiện khác
2.3.8.3. Các u cầu đặc biệt
Khơng có
2.3.8.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Người dùng đã đã đăng nhập.
2.3.8.5. Trạng thái hệ thống sau khi thực hiện Use-case
Trang Post Detail sẽ cập nhật số lượng likes của bài viết đó.
2.3.8.6. Điểm mở rộng
Khơng có

2.3.9 Đặc tả Use-case “Share bài viết”
2.3.9.1. Tóm tắt
Tên chức năng
Mơ tả
Tác nhân
Điều kiện trước

Điều kiện sau
Ngoại lệ
Các yêu cầu đặc biệt

Share bài viết
User xóa những bài viết của mình
User
User đã đăng nhập vào trang web.
Khơng có
Khơng có
Khơng có

2.3.9.2. Dịng sự kiện
Dịng sự kiện chính
1. User chọn bài viết muốn xem trên trang chủ hoặc từ danh sách các bài
viết được đề xuất có liên quan trong trang hiển thị bài viết đang đọc.
2. User được điều hướng đến trang Post Detail để đọc bài viết đã chọn.
3. User nhấn vào biểu tượng share trên bài viết.
Các dòng sự kiện khác
19


2.3.9.3. Các u cầu đặc biệt
Khơng có
2.3.9.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Người dùng đã đã đăng nhập.
2.3.9.5. Trạng thái hệ thống sau khi thực hiện Use-case
Bài viết được chia sẻ lên các kênh mạng xã hội khác.
2.3.9.6. Điểm mở rộng
Khơng có

2.3.10 Đặc tả Use-case “Comment bài viết”
2.3.10.1. Tóm tắt
Tên chức năng
Mơ tả
Tác nhân
Điều kiện trước
Điều kiện sau
Ngoại lệ
Các yêu cầu đặc biệt

Comment bài viết
User comment 1 bài viết bất kì
User
Khơng có
Khơng có
Khơng có
Khơng có

2.3.10.2. Dịng sự kiện
Dịng sự kiện chính
1. User chọn bài viết muốn xem trên trang chủ hoặc từ danh sách các bài viết
được đề xuất có liên quan trong trang hiển thị bài viết đang đọc.
2. User được điều hướng đến trang Post Detail để đọc bài viết đã chọn.
3. User comment vào khung comment dưới bài viết.
4. User nhấn lưu để lưu comment đó.
Các dịng sự kiện khác
2.3.10.3. Các u cầu đặc biệt
Khơng có
2.3.10.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case

Người dùng đã đã đăng nhập.
20


2.3.10.5. Trạng thái hệ thống sau khi thực hiện Use-case
Comment được lưu theo bài viết đó.

2.3.10.6. Điểm mở rộng
Khơng có

2.3.11

Đặc tả Use-case “Tìm kiếm bài viết”

2.3.11.1. Tóm tắt
Tên chức năng
Mơ tả

Tìm kiếm bài viết
User tìm kiếm bài viết theo tag
name được gắn theo từng bài viết.
User
User đã đăng nhập vào trang web
Khơng có
Khơng có
Khơng có

Tác nhân
Điều kiện trước
Điều kiện sau

Ngoại lệ
Các yêu cầu đặc biệt

2.3.11.2. Dòng sự kiện
Dòng sự kiện chính
1. User ở trang chủ nhập vào thanh tìm kiếm tên của bài viết hoặc tag name
muốn tìm kiếm.
2. User nhấn vào nút Search để tìm kiếm.
3. Hệ thống trả về danh sách các bài viết hợp lệ.
Các dòng sự kiện khác
Khơng có
2.3.11.3. Các u cầu đặc biệt
Khơng có
2.3.11.4. Trạng thái hệ thống khi bắt đầu thực hiện Use-case
Người dùng đã đã đăng nhập.
2.3.11.5. Trạng thái hệ thống sau khi thực hiện Use-case
Hiển thị danh sách kết quả tìm kiếm hợp lệ.
2.3.11.6. Điểm mở rộng
Khơng có
21


3.THIẾT KẾ
3.1. Thiết kế dữ liệu
3.1.1 Cơ sở dữ liệu
STT

Tên Collection

Ý nghĩa/mô tả

1

User

Chứa thông tin các tài khoản của người dùng

2

Post

Danh sách các bài Post của trong web

3.1.2 Mô tả chi tiết
Danh sách các collection
User: Lưu trữ danh sách người dùng

STT

Tên thuộc tính

Kiểu dữ liệu Ý nghĩa

1

_id

Object ID

Được sử dụng để lưu giữ ID của

Document. Do MongoDB tự tạo khi object
user được tạo.

2

email

String

tên đăng nhập

3

password

String

mật khẩu

4

name

String

Tên người dùng
22


Post: Lưu trữ thơng tin hóa đơn

STT

Tên thuộc tính

Kiểu dữ
liệu

Ý nghĩa

1

_id

Object ID

Được sử dụng để lưu giữ ID của
Document. Do MongoDB tự tạo khi object
Post được tạo.

2

tags

Array

Danh sách các tag liên quan của bài viết

3

likes

Array

Số like của bài viết

4

createdAt

String

Thời gian bài Blog được tạo

5

title

String

Tiêu đề bài Blog

6

opening

String

Phần mở đầu của bài Blog

7

selectedFile

String

File hình ảnh cover của bài blog

8

name

String

tên người tạo bài Blog

9

detail

String

Chi tiết nội dung bài Blog

10

comments

Array

Mảng chứa danh sách các các Object là
các comment của bài bài Blog đó

11

creator

String

id của người tạo bài Blog này

12

views

Integer

Số lượt xem bài Blog
23


3.2 Thiết kế kiến trúc chương trình
3.2.1 Tổng quát kiến trúc của hệ thống
Trước kia ứng dụng giao tiếp với database trực tiếp, việc giao tiếp trực tiếp này làm
làm cho việc code trở nên nhanh chóng nhưng độ bảo mật khơng cao và khá là
phức tạp.

Chính vì vậy người ta đã cho ra đời mơ hình Client - Server và nhóm đã dựa trên
mơ hình này để phát triển ứng dụng cho đồ án.

24


Client-Server là mơ hình mạng máy tính bao gồm 2 thành phần chính là máy khách
(client) và máy chủ (server). Trong mơ hình này, server là nơi lưu trữ dữ liệu, cài
đặt các chương trình dịch vụ và thực hiện các u cầu của client. Client có vai trị là
gửi u cầu đến server.
Máy tính đóng vai trị là máy khách – Client: Với vai trò là máy khách, chúng sẽ
không cung cấp mà chỉ sử dụng dữ liệu được cung cấp từ máy chủ. Một client trong
mơ hình này có thể là một server cho mơ hình khác, tùy thuộc vào nhu cầu sử dụng
của người dùng.
Máy tính đóng vai trị là máy chủ – Server: Là máy tính có khả năng cung cấp tài
nguyên và các dịch vụ đến các máy khách khác trong hệ thống mạng. Server đóng
vai trị hỗ trợ cho các hoạt động trên máy khách client diễn ra hiệu quả hơn.
Client và server sẽ giao tiếp với nhau qua giao thức http(s) bằng các thơng điệp
request và respond.
Việc sử dụng mơ hình Client - Server sẽ giúp chống quá tải mạng,mở rộng hệ thống,
frontend và backend khơng cần chung nền tảng là có thể hoạt động được.

25