KTPTHT Web

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

KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN
XÂY DỰNG WEBSITE MẠNG XÃ HỘI
ĐỒ ÁN MÔN PHÁT TRIỂN HỆ THỐNG WEB
GVHD: Ths. Võ Tấn Khoa

Sinh viên thực hiện:
- Nguyễn Hữu Khang - 19521665
- Phạm Hoàng Khang – 19521668
- Ngô Gia Thái – 19522187
- Trần Thị Thanh Tuyền – 19522503
- Võ Đoàn Kim Như – 19521972
- Lâm Trường Sơn – 19522133
□□ Tp. Hồ Chí Minh, 03/2022 □□

IE213 – Kỹ thuật phát triển hệ thống Web
NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
.............................................................................................................................................
……., ngày……...tháng……năm 2022
2|Page
Người nhận xét

(Ký tên và ghi rõ họ tên)
3|Page
BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN
Họ và tên MSSV Phân công Đánh giá

Nguyễn Hữu Khang 19521665
Phạm Hoàng Khang 19521668
Ngô Gia Thái 19522187
Trần Thị Thanh Tuyền 19522503
Võ Đoàn Kim Như 19521972
Lâm Trường Sơn 19522133
4|Page
LỜI MỞ ĐẦU
Những năm gần đây, mạng xã hội đã có bước phát triển mạnh mẽ, tác động lớn đến
đời sống xã hội ở hầu hết các quốc gia trên thế giới, trong đó có Việt Nam. Mạng xã hội
đã trở thành một thuật ngữ phổ biến với những tính năng đa dạng cho phép người dùng
kết nối, chia sẻ, tiếp nhận thông tin một cách nhanh chóng, hiệu quả.
Ngày nay, bất kỳ ai chỉ với một chiếc điện thoại thông minh, một máy tính bảng hay
máy tính cá nhân có kết nối internet đều có thể tham gia vào mạng xã hội. Với nội dung
phong phú và cách thức sử dụng dễ dàng, mạng xã hội mang lại rất nhiều tiện ích nổi bật:
(1) Góp phần củng cố niềm tin của quần chúng nhân dân đối với sự lãnh đạo của Đảng,
Nhà nước và điều hành của Chính phủ, (2) Góp phần tích cực vào sự phát triển nhận
thức, tư duy và kỹ năng sống của cong người, (3) Góp phần tích cực vào sự phát triển của
văn hóa cộng đồng, (4) Góp phần thúc đẩy quá trình hội nhập quốc tế trên các lĩnh vực
văn hóa của Việt Nam,…
Vì những tiện ích nổi bật và sự phổ biến của mạng xã hội cũng như nhu cầu của
người dùng trong việc sử dụng mạng xã hội, nhóm chúng em đã quyết định chọn đề tài là
“Xây dựng website mạng xã hội”.
5|Page
DANH MỤC HÌNH
Hình 1-1: Mô hình thác nước cải tiến......................................................................22
Hình 2-1: Giao diện màn hình đăng nhập................................................................25
Hình 2-2: Giao diện màn hình đăng ký....................................................................26
Hình 2-3: Giao diện màn hình trang cá nhân...........................................................26
Hình 2-4: Giao diện màn hình chính của Facebook.................................................27
Hình 2-5: Giao diện thanh menu / tin nhắn / thông báo...........................................27
Hình 2-6: Giao diện trang chủ của instagram..........................................................29
Hình 2-7: Giao diện trang cá nhân của instagram....................................................29
Hình 2-8: Giao diện màn hình chat của instagram...................................................30
Hình 3-1: Mô hình kiến trúc hệ thống.....................................................................36
Hình 3-2: Sơ đồ Usecase tổng quát..........................................................................39
Hình 3-3: Sơ đồ Usecase quản lý người dùng..........................................................43
Hình 3-4: Sơ đồ Usecase quản lý bài đăng..............................................................48
Hình 3-5: Sơ đồ Usecase quản lý tin nhắn...............................................................58
6|Page
Hình 4-1: Sơ đồ lớp tổng thể...................................................................................80
Hình 4-2: Các lớp chính..........................................................................................82
Hình 4-3: Cơ sở dữ liệu...........................................................................................83
Hình 4-4 Sơ đồ liên kết các màn hình......................................................................87
Hình 4-5: Thanh header...........................................................................................88
Hình 4-6: Thanh tìm kiếm.......................................................................................90
Hình 4-7: Thêm bài viết...........................................................................................91
Hình 4-8: Giao diện sau khi chọn ảnh.....................................................................92
Hình 4-9: User navigation.......................................................................................93
Hình 4-10: Trang đăng nhập....................................................................................94
Hình 4-11: Trang đăng ký........................................................................................96
Hình 4-13: Bài viết..................................................................................................99
Hình 4-14: Trang tin nhắn.....................................................................................100
Hình 4-16: Giao diện cài đặt cuộc trò chuyện nhóm..............................................102
Hình 4-17: Popup cài đặt thành viên......................................................................104
7|Page
Hình 4-18: Trang cá nhân......................................................................................105
Hình 4-19: Popup followers...................................................................................107
Hình 4-20: Popup xác nhận...................................................................................108
Hình 4-21: Popup following..................................................................................109
Hình 4-22: Popup xác nhận...................................................................................110
Hình 4-23: Trang cài đặt người dùng.....................................................................111
Hình 6-1: Quá trình làm việc ở Trello...................................................................118
Hình 6-2: Giao diện quản lý source code Backend trên Github.............................119
Hình 6-3: Giao diện quản lý source code Frontend trên Github............................119
Hình 6-4: Giao diện thiết kế giao diện trên Figma.................................................120
Hình 6-5: Giao diện quản lý hình ảnh của trang web.............................................121
8|Page
DANH MỤC BẢNG
Bảng 3-1: Bảng chú giải sơ đồ Usecase...................................................................37
Bảng 3-2: Bảng mô tả Actors..................................................................................38
Bảng 3-3: Bảng mô tả Usecase................................................................................39
Bảng 3-4: Danh sách yêu cầu tiện dụng...................................................................75
Bảng 3-5: Danh sách yêu cầu hiệu quả....................................................................76
Bảng 4-1: Collection USER.....................................................................................83
Bảng 4-2: Collection POST.....................................................................................84
Bảng 4-3: Collection COMMENT..........................................................................85
Bảng 4-4: Collection CONVERSATION................................................................85
Bảng 4-5: Collection MESSAGE............................................................................86
Bảng 4-6: Collection NOTIFICATION...................................................................86
Bảng 4-7: Danh sách màng hình chính....................................................................88
Bảng 4-8: Mô tả thành phần thanh header...............................................................88
Bảng 4-9: Mô tả thành phần thanh tìm kiếm............................................................90
9|Page
Bảng 4-10: Mô tả thành phần thêm bài viết mới......................................................91
Bảng 4-11: Mô tả thành phần thêm bài viết.............................................................92
Bảng 4-12: Mô tả thành phần trang chủ...................................................................93
Bảng 4-13: Mô tả thành phần trang đăng nhập.......................................................94
Bảng 4-14: Mô tả thành phần trang đăng ký...........................................................96
Bảng 4-15: Mô tả thành phần bản tin.......................................................................98
Bảng 4-16: Mô tả thành phần bài viết....................................................................100
Bảng 4-17: Mô tả thành phần trang tin nhắn..........................................................100
Bảng 4-19: Mô tả thành phần cài đặt cuộc trò chuyện nhóm.................................102
Bảng 4-20: Mô tả thành phần Popup xóa thành viên.............................................104
Bảng 4-21: Mô tả thành phần trang cá nhân..........................................................105
Bảng 4-22: Mô tả thành phần Popup followers.....................................................107
Bảng 4-23: Mô tả thành phần Popup xác nhận......................................................108
Bảng 4-24: Mô tả thành phần Popup following.....................................................108
Bảng 4-25: Mô tả thành phần Popup xác nhận......................................................109
10 | P a g e
Bảng 4-26: Mô tả thành phần trang cài đặt người dùng.........................................110
11 | P a g e
MỤC LỤC
BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN.................................................4
LỜI MỞ ĐẦU...........................................................................................................5
DANH MỤC HÌNH..................................................................................................6
DANH MỤC BẢNG.................................................................................................9
MỤC LỤC...............................................................................................................12
CHƯƠNG 1: GIỚI THIỆU CHUNG......................................................................17
1.1 Mục đích tài liệu.......................................................................................17
1.2 Phạm vi hệ thống......................................................................................19
1.3 Khái niệm, thuật ngữ................................................................................19
1.4 Mô tả tài liệu.............................................................................................19
1.5 Kế hoạch thực hiện đồ án..........................................................................20
1.5.1 Quy trình quản lý dự án.........................................................................20
1.5.2 Kế hoạch chi tiết – áp dụng quy trình phát triển phần mềm..................20
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG..............................................................25
12 | P a g e
2.1 Kế hoạch khảo sát:....................................................................................25
2.2 Khảo sát các mạng xã hội hiện có:............................................................25
2.2.1 Facebook...............................................................................................25
2.2.2 Instagram...............................................................................................29
2.3 Danh sách các yêu cầu..............................................................................31
2.3.1 Yêu cầu chức năng:...............................................................................31
2.3.2 Yêu cầu phi chức năng..........................................................................31
2.4 Mô tả tổng thể...........................................................................................32
2.4.1 Mô tả tổng thể.......................................................................................32
2.4.2 Chức năng hệ thống...............................................................................32
2.5 Ràng buộc, giả định và phụ thuộc.............................................................33
2.5.1 Ràng buộc..............................................................................................33
2.5.2 Giả định.................................................................................................34
2.5.3 Phụ thuộc...............................................................................................35
CHƯƠNG 3: ĐẶC TẢ YÊU CẦU..........................................................................36
13 | P a g e
3.1 Thiết kế kiến trúc......................................................................................36
3.2 Mô tả sơ đồ chức năng..............................................................................37
3.2.1 Sơ đồ Usecase tổng quát........................................................................37
3.3 3.3. Yêu cầu chức năng.............................................................................42
3.3.1 Quản lý user..........................................................................................42
3.3.2 Quản lý bài đăng....................................................................................48
3.3.3 Quản lý tin nhắn....................................................................................58
3.3.4 Đăg ký...................................................................................................73
3.3.5 Đăg nhập...............................................................................................74
3.4 Yêu cầu phi chức năng..............................................................................75
CHƯƠNG 4: CHƯƠNG 4: THIẾT KẾ...................................................................78
4.1 Thiết kế dữ liệu.........................................................................................78
4.1.1 Thiết kế sơ đồ lớp..................................................................................78
4.1.2 Sơ đồ logic hoàn chỉnh..........................................................................83
4.1.3 Danh sách các collection trong sơ đồ....................................................83
14 | P a g e
4.2 Thiết kế giao diện.....................................................................................87
4.2.1 Sơ đồ liên kết các màng hình.................................................................87
4.2.2 Thành phần giao diện dùng chung.........................................................88
4.2.3 Đăng nhập.............................................................................................94
4.2.4 Đăng ký.................................................................................................95
4.2.5 Trang chủ..............................................................................................97
4.2.6 Trang tin nhắn.....................................................................................100
4.2.7 Trang cá nhân......................................................................................104
4.2.8 Trang cài đặt........................................................................................110
CHƯƠNG 5: HIỆN THỰC...................................................................................112
5.1 Các công nghệ sử dụng...........................................................................112
5.1.1 Front-end.............................................................................................112
5.1.2 Back-end..............................................................................................113
5.1.3 Database..............................................................................................113
5.2 Cài đặt và kiểm thử.................................................................................114
15 | P a g e
CHƯƠNG 6: ĐÁNH GIÁ VÀ KẾT LUẬN..........................................................117
6.1 Nhận xét..................................................................................................117
6.1.1 Quá trình làm việc...............................................................................117
6.1.2 Kết quả đạt được..................................................................................120
6.1.3 Ưu điểm...............................................................................................121
6.1.4 Hạn chế................................................................................................121
6.2 Hướng phát triển.....................................................................................122
TÀI LIỆU THAM KHẢO.....................................................................................124
16 | P a g e
CHƯƠNG 1: GIỚI THIỆU CHUNG
1.1 Mục đích tài liệu
Hiện nay, trong thời đại phát triển công nghiệp 4.0, mạng xã hội đã trở thành một
ứng dụng gần như là không thể thiếu đối với mọi người, cùng với nhiều tính năng, tiện
ích nổi bật giúp mọi người dễ dàng kết nối, chia sẻ thông tin, trò chuyện với nhau một
cách nhanh nhất.
Mạng xã hội xuất hiện và phát triển đã đem lại rất nhiều lợi ích cho cộng đồng như:
Giúp kết nối các mối quan hệ: là nơi chúng ta có thể gặp mặt người thân, bạn bè
mặc dù cách xa về mặt địa lý, mạng xã hội giúp duy trì các mối quan hệ thân thiết và tạo
lập, xây dựng các mối quan hệ mới. Mạng xã hội là nơi cập nhật những thông tin, xu thế
mới trong đời sống hằng ngày. Thông qua mạng xã hội người dùng dễ dàng cập nhật
được thông tin, kiến thức lĩnh vực mà người dùng quan tâm. Mạng xã hội giúp người
dùng cập nhật, nắm bắt thông tin một cách nhanh chóng, kịp thời.
Nơi chia sẻ cảm xúc: Thông qua mạng xã hội người dùng có thể chia sẻ niềm vui
của mình đến với mọi người xung quanh và nhận lại những chia sẻ an ủi của bạn bè khi
gặp chuyện buồn thông qua những chia sẻ những tâm sự của mình trên mạng xã hội.
Kinh doanh quảng cáo không mất phí: Nếu như trước đây việc bán hàng được thực
hiện trực tiếp ở chợ, siêu thị thì hiện nay với sự phát triển của mạng xã hội người dùng có
thể kinh doanh, quảng cáo online trên mạng xã hội mà không mất phí. Người kinh doanh
có thể kinh doanh các sản phẩm trên các trang mạng xã hội như facebook, instagram,
zalo,…hoặc với những nhà kinh doanh chuyên nghiệp họ có thể tạo các trang bán hàng
17 | P a g e
riêng. Có thể nói hiện nay việc kinh doanh trên mạng xã hội khá phổ biến và được nhiều
người quan tâm.
Nơi để giải trí, thư giãn: Sau một ngày dài làm việc, học tập mệt mỏi thì mạng xã
hội với những tính năng tiện ích như nghe nhạc, xem phim, chơi game sẽ giúp người
dùng thư giãn và thoải mái đầu óc.
Bên cạnh những lợi ích trên, thì mạng xã hội cũng đem lại nhiều tác hại đáng kể:
Người dùng dành quá nhiều thời gian vào mạng xã hội: Mạng xã hội thu hút, hấp
dẫn người dùng bởi những tính năng tiện ích mà nó mang lại, nhưng cũng chính vì
những tính năng tiện ích của mạng xã hội đã khiến nhiều người dùng không kiểm
soát được việc dùng mạng xã hội mà bỏ bê công việc, học tập, trở nên nghiện
mạng xã hội. Đặc biệt là những người trẻ, do sức hút quá lớn của mạng xã hội mà
nhiều người trẻ dành quá nhiều thời gian trong một ngày chỉ để lướt mạng xã hội
từ đó làm ảnh hưởng đến công việc và học tập.
Giảm sự tương tác trực tiếp với các mối quan hệ xung quanh: Hiện nay tình trạng
bạn bè chỉ tương tác với nhau qua điện thoại quá phổ biến, điều đó làm cho các mối quan
hệ trở nên xa cách hơn.
Lừa đảo qua mạng: Do thông tin trên mạng xã hội bảo mật không tốt, người dùng
có thể dễ dàng bị đánh cắp thông tin. Ngoài ra, người dùng có thể bị mạo danh. Tài
khoản của người dùng có thể bị mất và có thể có người mạo danh thực hiện các
hành động phi pháp như lừa gạt tiền bạc danh sách bạn bè trên mạng của người
dùng.
Với mục đích tìm hiểu và nâng cao kiến thức của mình, nhóm chúng em đã thực
hiện đề tài này dưới sự dẫn dắt của ThS. Võ Tấn Khoa. Tài liệu chỉ mang tính chất
18 | P a g e
tương đối vì lượng kiến thức còn hạn hẹp, nhóm chúng em mong nhận được góp
ý và sửa chữa để đề tài mang tính khả thi hơn.
1.2 Phạm vi hệ thống
Phần mềm được xây dựng với mục đích phục vụ tất cả người dùng có nhu cầu sử
dụng mạng xã hội.
1.3 Khái niệm, thuật ngữ
Mô hình thác nước cải tiến: Mô hình thác nước là một mô hình có tính trình tự
trong phát triển phần mềm. Nó chú trọng vào sự phát triển logic và lần lượt trong suốt
vòng đời phát triển phần mềm. Mô hình thác nước cải tiến, bản chất tương tự như mô
hình thác nước. Nhưng sẽ có một vòng lặp tạo ra sản phẩ m mẫu để đánh giá và xác
định rõ yêu cầu. Khi đã đảm bảo yêu cầu sẽ bước vào phát triển phần mềm.
Use-Case: là một kỹ thuật được dùng trong kỹ thuật phần mềm và hệ thống để nắm
bắt yêu cầu chức năng của hệ thống. Use-case mô tả sự tương tác đặc trưng giữa người
dùng bên ngoài (actor) và hệ thống. Một trong những cách biểu diễn trực quan phổ
biến hiện nay là lược đồ use-case của UML.
1.4 Mô tả tài liệu
Tài liệu bao gồm các phần chính sau:

- Phần 1: Giới thiệu chung.
- Phần 2: Khảo sát hiện trạng.
- Phần 3: Đặc tả yêu cầu hệ thống.
- Phần 4: Thiết kế.
- Phần 5: Hiện thực.
- Phần 6: Đánh giá và kết luận.
19 | P a g e
- Phần 7: Tài liệu tham khảo.
1.5 Kế hoạch thực hiện đồ án
1.5.1 Quy trình quản lý dự án
- Phác thảo sơ lược mô hình dữ liệu

- Khảo sát hiện trạng/khảo sát ứng dụng liên quan.
- Phân tích đặc tả yêu cầu.
- Thiết kế:
 Thiết kế hệ thống.
 Thiết kế dữ liệu.
 Thiết kế giao diện.
- Code và kiểm thử.
- Deploy.
- Báo cáo.
1.5.2 Kế hoạch chi tiết – áp dụng quy trình phát triển phần mềm
Các bước thực hiện:

- Khảo sát hiện trạng/khảo sát ứng dụng liên quan.
 Phân tích tính khả thi và cách thức thực hiện.
 Khảo sát ứng dụng liên quan (Facebook/Instagram).
- Phác thảo sơ lược mô hình dữ liệu
 Phân tích đối tượng và các thuộc tính.
 Vẽ mô hình sơ đồ lớp.
 Vẽ sơ đồ logic.
20 | P a g e
- Phân tích đặc tả yêu cầu: Dựa trên các đặc tả yêu cầu đã thu thập để phác thảo UI
và thiết kế các tính năng cơ bản.
- Thiết kế:
 Thiết kế hệ thống.
1. Vẽ Use-case: phân tích nghiệp vụ tổng quan.
2. Vẽ sơ đồ Squence Diagram.
3. Vẽ sơ đồ luồng.
4. Xác định kiến trúc hệ thống.
 Thiết kế dữ liệu.
1. Phân tích dữ liệu dựa trên yêu cầu người dùng.
2. Kết quả đầu ra là tài liệu thiết kế dữ liệu, dùng để phục vụ thiết kế
database.
 Thiết kế giao diện.
1. Dùng figma, photoshop để phác thảo giao diện và xử lí hình ảnh.
2. Sau khi phác thảo giao diện, sử dụng visual studio code để tiến hành
code giao diện.
- Code và kiểm thử.
1. Phân chia nhiệm vụ code theo yêu cầu.
2. Tạo các test case để test hệ thống.
- Deploy.
1. Deploy hệ thống Frontend bằng Netlify.
2. Deploy hệ thống Backend bằng Heroku.
- Báo cáo.
Sử dụng Quy trình Thác nước Cải tiến để thực hiện đồ án:
21 | P a g e
Hình 1-1: Mô hình thác nước cải tiến
Giải thích về quy trình:
Mô hình thác nước là một mô hình của quy trình phát triển phần mềm, trong đó quy
trình phát triển trông giống như một dòng chảy, với các pha được thực hiện theo trật tự
nghiêm ngặt.
Đi qua các giai đoạn chính:

- Khảo sát hiện trạng
- Xác định yêu cầu
- Phân tích
- Thiết kế
- Cài đặt
- Kiểm chứng
- Triển khai
22 | P a g e
➔ Bản chất tương tự như mô hình thác nước. Nhưng có thể quay lại bước trước đó
để hoàn thiện hay sửa lỗi rồi mới tiếp tục. Vì vậy, dễ dàng nắm được toàn bộ thông tin
của giai đoạn trước để thực hiện giai đoạn hiện tại.
Cách tổ chức quản lý thành viên:
Leader: Võ Đoàn Kim Như
Team chúng em cùng thảo luận, họp bàn để phân công, phân chia tìm hiểu kiến thức
về mỗi giai đoạn. Mỗi bạn trong nhóm sẽ có vai trò riêng. Khi đã nắm được kiến thức về
giai đoạn mình tìm hiểu → Tiến hành training và thực hiện ngay.
Sau mỗi giai đoạn được hoàn thành → Tiến hành kiểm tra, nếu có lỗi có thể quay
lại bước trước đó để hoàn thiện hay sửa lỗi rồi mới tiếp tục tới tiếp theo.
Cứ như vậy cho tới khi hoàn thành hết tất cả các giai đoạn, nhóm em sẽ báo cáo cuối
kỳ.
Trao đổi thông tin:
 Facebook – Messenger: Nơi trao đổi thông tin, tài liệu, vấn đề khi thực hiện dự
án.
 Google Meet: Meeting bàn luận, demo về các chức năng đã thực hiện.
Quản lí tiến độ công việc:
 Trello
Thiết kế diagram:
 Draw.io
23 | P a g e
Thiết kế giao diện:
 Figma
 Photoshop
Quản lí source code:
 Github
24 | P a g e
CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG
2.1 Kế hoạch khảo sát:
Thực hiện đồ án trong bối cảnh dịch bệnh covid-19 còn diễn biến phức tạp, vì muốn
chấp hành mong muốn cũng như yêu cầu của chính phủ nước CHXHCN VN, chúng em
quyết định thực hiện cuộc khảo sát qua việc tìm hiểu thông tin trên internet. Mạng xã hội
phát triển có liên quan trực tiếp đến sự phát triển của internet nên việc tìm hiểu thông tin
trên mạng có thể cung cấp một cái nhìn tổng quát về sự hình thành, phát triển cũng như
xu hướng của mạng xã hội hiện nay.
2.2 Khảo sát các mạng xã hội hiện có:
2.2.1 Facebook
Các màn hình giao diện chính:
25 | P a g e
Hình 2-2: Giao diện màn hình đăng nhập
Hình 2-3: Giao diện màn hình đăng ký
26 | P a g e
Hình 2-4: Giao diện màn hình trang cá nhân
Hình 2-5: Giao diện màn hình chính của Facebook
27 | P a g e
Hình 2-6: Giao diện thanh menu / tin nhắn / thông báo
 Nhận xét giao diện:
Giao diện của Facebook nhìn chung được xây dựng với bố cục rõ ràng và khá dễ
hiểu, các khối nội dung được sắp xếp có logic giúp người dùng thuận tiện trong quá trình
thao tác.
Giao diện có hai tùy chỉnh màu chủ đạo (dark mode và light mode), làm đa dạng
hóa về sự lựa chọn màu chủ đạo cho người dùng.
Giao diện có sử dụng các icon làm tăng sự sinh động và tạo cảm giác dễ tiếp cận
cho người dùng. Màu sắc của icon, chữ, vùng sáng, tối được phối hợp hài hòa.
Font chữ sans-serif tạo cảm giác thân thiện và dễ đọc hơn cho người dùng, phù hợp
với giao diện web của Facebook.
28 | P a g e
 Nhận xét chức năng:
Facebook đã xây dựng một nền tảng mạng xã hội với đa dạng các chức năng, trong
đó các chức năng chính dành cho người dùng bao gồm:
- Đăng nhập, đăng ký tài khoản.

- Quản lý thông tin tài khoản người dùng.
- Đăng, sửa, xóa, chia sẻ, tương tác bài viết (chứa nội dung văn bản, hình ảnh, âm
thanh, video).
- Tìm kiếm (lọc theo nhiều nội dung).
- Kết bạn, follow, tạo nhóm.
- Nhắn tin, gọi điện.
Ngoài ra, Facebook cung cấp hàng loạt các chức năng tiện ích khác như bán hàng,
quảng cáo, livestream, tìm địa điểm hiến máu, quyên góp giúp đỡ người ở các khu vực bị
thiên tai/bệnh dịch/khủng hoảng, sức khỏe tinh thần, phương thức thanh toán Facebook
Pay, Messenger Kids, Games, thời tiết, …
Hầu hết các chức năng của Facebook được xây dựng đều hoạt động tốt, đáp ứng
được nhu cầu người dùng hiện nay.
2.2.2 Instagram
Các màn hình giao diện chính:
29 | P a g e
Hình 2-7: Giao diện trang chủ của instagram
Hình 2-8: Giao diện trang cá nhân của instagram
30 | P a g e
Hình 2-9: Giao diện màn hình chat của instagram
 Nhận xét giao diện:
Nhìn chung giao diện của Instagram tương đối đơn giản tối ưu cho trải nghiệm
người dùng, instagram tập trung chủ yếu vào việc chia sẻ hình ảnh và video nên các màn
hình tin nhắn và các giao diện phụ được tối giản để phục vụ cho mục đích chính của
mình.
 Nhận xét về chức năng:

- Xem và chia sẻ hình ảnh và video: Một bức ảnh, video đơn giản có thể nói lên hết
những suy nghĩ và cảm xúc của bạn. Bạn dễ dàng xem và chia sẻ những hình ảnh,
video thay lời muốn nói trên ứng dụng Instagram. Đặc biệt, bạn có thể xem lại
những hình ảnh bạn đã like dễ dàng từ vài tuần đến vài tháng trước. Ngoài ra, bạn
có thiết lập quyền riêng tư khi chia sẻ ảnh và video trên ứng dụng, bạn dễ dàng
quản lý ai được quyền xem và like những bức ảnh, video của bạn.
- Công cụ tạo ảnh và video sống động: Bạn dễ dàng chỉnh sửa ảnh và video bằng
Instagram để có những hình ảnh đẹp nhất trước khi đăng lên bảng tin của mình.
Với những công cụ chỉnh sửa đơn giản như các bộ lọc, hiệu ứng, bóng mờ, làm rõ
nét, chỉnh sửa màu sắc… để có bức ảnh đẹp nhất.
31 | P a g e
- Tìm kiếm và khám phá nhiều nội dung từ cộng đồng: Instagram là ứng dụng mạng
xã hội phát triển rộng rãi trên toàn thế giới. Vì vậy, cũng như các ứng dụng mạng
xã hội khác, bạn dễ dàng tìm kiếm và khám phá mọi thứ từ những hình ảnh, video
trong các mục IGTV, cửa hàng, trang trí, du lịch, kiến trúc… được chia sẻ trên
Instagram.
- Tích hợp công cụ nhắn tin: Bạn có thể nhắn tin, trò chuyện cùng bạn bè người
thân, với những người mình yêu quý và có chung sở thích qua Instagram. Ngoài
ra, bạn có thể sử dụng tính năng gọi video call để trò chuyện miễn phí ngay trên
ứng dụng.
2.3 Danh sách các yêu cầu
2.3.1 Yêu cầu chức năng:
- Quản lý tài khoản: đăng nhập, đăng ký, xem và thay đổi thông tin cá nhân.
- Quản lý bài đăng: xem các bài đăng của bạn bè, đăng bài và chỉnh sửa bài viết.
- Quản lý bạn bè: xem danh sách bạn bè, tìm kiếm và theo dõi bạn bè.
- Quản lý thông báo: thông báo cho người dùng khi có thông tin mới.
- Quản lý tin nhắn, gọi video: nhắn tin cho bạn bè hoặc nhóm bạn bè, xem lịch sử
tin nhắn, trả lời tin nhắn, gọi video với bạn bè.
2.3.2 Yêu cầu phi chức năng
- Giao diện đơn giản, dễ sử dụng và dễ tương tác, phù hợp với nhiều người dùng ở
mọi lứa tuổi.
- Bảo mật thông tin của người dùng và tin nhắn của người dùng với nhau.
32 | P a g e
- Sức chứa thông tin phải lớn.
- Thời gian đáp ứng yêu cầu của người dùng nhanh.
2.4 Mô tả tổng thể
2.4.1 Mô tả tổng thể
Phần mềm bao gồm 6 phân hệ chính:
- Cài đặt
- Hệ thống
- Quản lý bài đăng
- Quản lý bạn bè, theo dõi
- Quản lý thông báo
- Nhắn tin, gọi video
- Quản lý thông tin cá nhân
2.4.2 Chức năng hệ thống
Dựa vào các phân hệ của hệ thống, hệ thống được phát triển theo các chức năng
sau:
- Cài đặt: Chỉnh sửa cài đặt về quy định
- Hệ thống: Đăng nhập, đăng ký
- Quản lý bài đăng:
 Like, bình luận bài đăng

 Xóa, chỉnh sửa bài đăng
33 | P a g e
- Quản lý bạn bè:
 Xem thông tin, bài đăng của bạn bè

 Theo dõi hoặc bỏ theo dõi bạn bè
- Quản lý thông báo: thông báo cho người dùng khi có bạn bè thích, bình luận bài
đăng hoặc có người theo dõi mới.
- Nhắn tin, gọi video:
 Nhắn tin với bạn bè: gửi tin nhắn, trả lời tin nhắn và lưu trữ tin nhắn,
chuyển tiếp tin nhắn.
 Nhắn tin trong nhóm: gửi tin nhắn với nhóm, thêm hoặc xóa thanh viên, lưu
trữ tin nhắn.
- Quản lý thông tin cá nhân:
 Chỉnh sửa thông tin cá nhân như: tên, tuổi, nơi ở, giới tính, ….
 Chỉnh sửa mật khẩu tài khoản.
2.5 Ràng buộc, giả định và phụ thuộc
2.5.1 Ràng buộc
Phạm vi:
Hệ thống phải có đầy đủ các chức năng được liệt kê trong mô tả.
Thời gian:
Hệ thống phải được hoàn tất trong vòng 3-4 tháng.
34 | P a g e
Chi phí:
Chi phí xây dựng hệ thống không được vượt quá định mức.
2.5.2 Giả định
Tài nguyên
- Sự tham gia của tất cả các thành viên nhóm, mỗi người được giao nhiệm vụ
khác nhau với chi tiết công việc rõ ràng.
- Đầy đủ công cụ để thực hiện đồ án.
Chi phí:
- Ngân sách không thay đổi so với dự kiến trong quá trình phát triển dự án.
Phạm vi:
- Phạm vi dự án không vượt quá định mức so với dự kiến ban đầu.
Lịch trình:
- Hoàn thành dự án trong khoảng thời gian 3-4 tháng đã được đề xuất.
Phương pháp:
- Sử dụng mô hình thác nước cải tiến.
Công nghệ:
- Ngôn ngữ lập trình Front-end: ReactJS, SCSS.

- Hệ cơ sở dữ liệu: MongoDB
- Ngôn ngữ lập trình Back-end: NodeJS, Socket.io
35 | P a g e
2.5.3 Phụ thuộc
Bước xây dựng mô hình cơ sở dữ liệu là tiền đề để triển khai chức năng của phần
mềm. Giao diện được hoàn thiện sau khi các chức năng thành phần được đặc tả.
36 | P a g e
CHƯƠNG 3: ĐẶC TẢ YÊU CẦU
3.1 Thiết kế kiến trúc
Presentation
layer
Application
Layer
Data layer
Hình 3-10: Mô hình kiến trúc hệ thống
37 | P a g e
3.2 Mô tả sơ đồ chức năng
3.2.1 Sơ đồ Usecase tổng quát
Bảng chú giải:
Bảng 3-1: Bảng chú giải sơ đồ Usecase
Ký hiệu Tên Diễn giải

Actor Actor: có thể là người dùng hoặc
một hệ thống nào khác bất kỳ
Usecase Usecase: là chức năng mà Actor

có thể sử dụng
Communication Communication Link: kết nối

link giữa Actor và Usecase, cho biết
Actor đó có những sự tương tác
nào đối với hệ thống.
Relationship Relationship: mối quan hệ giữa

các Usecase với nhau.
- Quan hệ Include: mô tả

Usecase lớn được chia
thành các Usecase nhỏ hơn
38 | P a g e
để dễ cài đặt.

- Quan hệ Extend: sử dụng
khi có một Usecase được
tạo ra để bổ xung chức
năng cho một Usecase có
sẵn.
- Quan hệ Generalization:
thể hiện quan hệ kế thừa
giữa các Actor hoặc giữa
các Usecase với nhau.
Boundary of System Boundary: dùng để xác

System định phạm vi của hệ thống mà ta
đang thiết kế.Các đối tượng nằm
ngoài hệ thống nàycó tương tác
với hệ thống được gọi là các
Actor.
Mô tả Actor:
Bảng 3-2: Bảng mô tả Actors
STT Tên Mô tả

1 A01- Người dùng Người đã đăng ký tài khoản trên ứng dụng
mạng xã hội
2 A02- Hệ thống Hệ thống ứng dụng mạng xã hội.
39 | P a g e
Sơ đồ usecase tổng quát
Hình 3-11: Sơ đồ Usecase tổng quát
Mô tả use-case
Bảng 3-3: Bảng mô tả Usecase
40 | P a g e
STT Tên Use-case Ý nghĩa Mô tả chức năng

1 UC10 – Quản lý Actor01- Người dùng có thể câp nhật UC11 – quản lý
người dùng thông tin của tài khoản, xem danh profile
sách những tài khoản đang theo dõi
UC111 – Cập nhật
mình và những người mình đang theo
profile
dõi. Thực hiện theo dõi hoặc hủy theo
dõi một tài khoản. UC112 – Xem
follower/following
UC12 – Theo dõi
UC13 – Hủy theo dõi

2 UC20 – Quản lý Actor01-Người dùng có thể UC21 – Đăng bài
bài viết đăng/sửa/xóa/ chia sẻ đối với bài viết; post
và có thể yêu thích, bình luận đối với
UC22 – like post
tất cả các bài viết.
UC23 – Bình luận bài

post
UC24 – Gửi post

dưới dạng tin nhắn
cho bạn bè
UC25 – Sửa, xóa post
3 UC30 – Quản lý Actor01-Người dùng có thể tạo/xóa ra UC31 – Tạo cuộc trò
cuộc trò chuyện một cuộc trò chuyện, có thểm thêm chuyện
41 | P a g e
nhiều người dùng khác vào hoặc xóa UC32 – Xóa cuộc trò
thành viên ra khỏi nhóm trò chuyện. chuyện
Trong cuộc trò chuyện, Actor01 có
UC33 – Quản lý
thể gửi tin nhắn, chuyển tiếp tin, yêu
thành viên
thích tin nhắn của mọi người, gọi điện
hoặc gọi video. UC331 – Thêm thành
viên
UC332 – Xóa thành

viên
UC34 – Quản lý tin

nhắn
UC341 – Gửi tin

nhắn
UC342 – Gỡ tin nhắn
UC343 – Chuyển tiếp

tin nhắn
UC344 – Yêu thích

tin nhắn
UC35 – Gọi điện
UC351 – Gọi video

4 UC40 – Đăng Actor01-Người dùng đăng ký một tài Đăng ký tài khoản
ký khoản vào trong hệ thống
42 | P a g e
5 UC50 – Đăng Actor01 - Người dùng đăng nhập vào Đăng nhập vào hệ
nhập hệ thống. thống
3.3 3.3. Yêu cầu chức năng
3.3.1 Quản lý user
43 | P a g e
Hình 3-12: Sơ đồ Usecase quản lý người dùng
UC111-Quản lý profile
 Đặc tả use-case
 Mô tả tóm tắt
 Tên use-case: Quản lý profile
 Mục đích: giúp người dùng quản lý thông tin cá nhân của tài khoản.
 Tóm lược: người dùng nhấn vào nút “Xem trang cá nhân” và website sẽ
chuyển đến trang cá nhân của bạn tương tự như Facebook hoặc
Instagram.
 Mô tả kịch bản
 Điều kiện đầu: user đã đăng nhập vào hệ thống.
 Điều kiện sau:
44 | P a g e
 Trường hợp thành công: người dùng vào được trang cá nhân,
xem được các thông tin trên trang và có thể thao tác.
 Trường hợp thất bại: hệ thống thông báo lỗi
 Kịch bản chính:
1. Load giao diện người dùng.
2. Người dùng nhấn vào nút “Xem thông tin cá nhân” hệ thống sẽ điều
hướng khách hàng sang trang cá nhân. Hệ thống kiểm tra thông tin đăng
nhập và điều hướng tới trang chủ.
3. Người dùng có thể xem các thông tin như: thông tin cá nhân: tên đăng
nhập, ảnh đại diện, ngày tháng năm sinh. Thông tin bài post bao gồm tất
cả các bài post đã đăng và nhấn vào bài post để xem chi tiết bài post đó.
Thông tin bạn bè bao gồm danh sách các bạn bè đã follow.
 Các kịch bản khả dĩ khác:
1. Khi người dùng nhấn vào trang cá nhân mà hệ thống không load được
thông tin của người dùng è hiển thị message thông báo hệ thống lỗi
cho người dùng biết.
UC111-Cập nhật profile
 Tên use-case: Cập nhật profile.
 Mục đích: giúp người dùng có thể cập nhật lại thông tin tài khoản.
chuyển đến trang cá nhân sau đó người dùng sẽ thao tác tùy trên đối
tượng muốn cập nhật (cập nhật lại thông tin cá nhân, cập nhật danh sách
follow, cập nhật các post đã đăng).
45 | P a g e

 Trường hợp thành công: trang cá nhân được cập nhật lại.
 Trường hợp thất bại: hệ thống thông báo lỗi.
1. Load giao diện trang cá nhân.
2. Người dùng muốn sửa thông tin cá nhân thì nhấn vào nút “Edit profile”
ở đây người dùng có thể chỉnh sửa các thông tin cơ bản như: Tên đăng
nhập, ngày tháng năm sinh, giới tính, avatar, …
3. Hệ thống sẽ cập nhật lại thông tin chỉnh sửa và hiển thị ra cho người
dùng.
1. Khi thông tin cập nhật thất bại è hiển thị message cho người dùng biết.
UC112-Xem follower/following
 Tên use-case: Xem follower/following.
 Mục đích: giúp người dùng có thể xem các tài khoản mà mình đang theo
dõi và các tài khoản đang theo dõi mình.
chuyển đến trang cá nhân sau đó người dùng nhấn vào nút “theo dõi”
hoặc nút “đang theo dõi” để xem danh sách các follower hoặc following.
46 | P a g e
 Trường hợp thành công: người dùng xmem được danh sách
follower hoặc following.
1. Load giao diện trang cá nhân.
2. Người dùng nhấn vào nút “theo dõi” hoặc “đang theo dõi’ để xem danh
sách các tài khoản.
3. Hệ thống sẽ hiện thị danh sách lên cho người dùng.
1. Khi thông tin hiển thị thất bại è hiển thị message cho người dùng biết.
UC12-Theo dõi
 Tên use-case: Theo dõi.
 Mục đích: giúp người dùng có thể theo dõi người dùng của các tài khoản
khác.
 Tóm lược: người dùng gửi yêu cầu theo dõi đến một tài khoản, sau khi
tài khoản đó chấp nhận thì người dùng có thể xem các bài viết mà người
dùng đó đăng.
 Trường hợp thành công: người dùng theo dõi tài khoản thành
công và xem được các bài viết mới nhất trên bản tin.
47 | P a g e

1. Người dùng nhấn nút “theo dõi” trên trang cá nhân của một tài khoản
nào đó hoặc trên danh sách tài khoản được đề xuất ở trang chủ hoặc trên
danh sách follower của người dùng.
2. Hệ thống cập nhật lại thông tin và thông báo đến tài khoản được theo
dõi.
3.1. <<include>> UC60-Gửi thông báo

1. Người dùng được gửi yêu cầu không chấp nhận  Usecase kết thúc
không thành công.
UC13-Hủy theo dõi
 Tên use-case: Hủy theo dõi.
 Mục đích: giúp người dùng có thể hủy theo dõi một tài khoản khác.
 Tóm lược: Người dùng hủy theo dõi tài khoản, các bài viết mới nhất của
tài khoản đó sẽ không xuất hiện trên bảng tin.
 Điều kiện đầu: user đã đăng nhập vào hệ thống, use đã theo dõi tài khoản
trước đó.
 Trường hợp thành công: người dùng hủy theo dõi tài khoản thành
công và hệ thống cập nhật lại thông tin.
48 | P a g e

1. Người dùng nhấn nút “hủy theo dõi” trên trang cá nhân của một tài
khoản hoặc trên danh sách following.
2. Hệ thống sẽ cập nhật lại thông tin các người dùng trên cơ sở dữ liệu.
1. Hệ thống xử lý hủy theo dõi không thành công  Hệ thống thông báo
lỗi cho người dùng.
3.3.2 Quản lý bài đăng
Hình 3-13: Sơ đồ Usecase quản lý bài đăng

49 | P a g e
UC21-Đăng bài viết
 Tên use-case: Đăng bài viết.
 Mục đích: giúp người dùng có thể đăng một bài viết mới cập nhật thông
tin bản thân để chia sẻ với bạn bè.
 Tóm lược: Người dùng điền đầy đủ thông tin trong form hiện ra bao gồm
chọn hình ảnh, caption của bải viết và chọn biểu tượng cảm xúc sau đó
nhấn nút đăng bài để đăng bài viết.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống.
 Trường hợp thành công: bài viết được đăng lên bản tin của
những người theo dõi tài khoản.
1. Người dùng nhấn vào biểu tượng thêm mới bài viết trên header.
2. Hệ thống hiển thị form để người dùng điền thông tin bài post.
3. Hệ thống xử lý dữ liệu lưu bài viết vào cơ sở dữ liệu và trả về thông báo
đăng post thành công cho người dùng.
4. Hệ thống điều hướng sang thông tin chi tiết của bài post người dùng vừa
đăng.
1. Hệ thống lưu bài post không thành công vào cơ sở dữ liệu è hiển thị
thông báo không thành công cho người dùng.
50 | P a g e
UC22-Xóa bài viết
 Tên use-case: Chỉnh sửa bài viết.
 Mục đích: giúp người dùng có thể xóa một bài viết đã đăng.
 Tóm lược: Người dùng mở một bài viết đã đăng, nhấn biểu tượng thùng
rác để xóa bài viết.
 Trường hợp thành công: bài viết không còn tồn tại trên hệ thống.
1. Người dùng nhấn vào bài viết nào đó mà mình từng đăng tải.
2. Người dùng nhấn chọn biểu tượng thùng rác và xác nhận xóa bài viết.
3. Hệ thống thực hiện xóa bài viết.
1. Hệ thống xóa bài viết không thành công è Hệ thống hiển thị thông báo
không thành công cho người dùng.
2. Người dùng hủy xác nhận xóa bài viết  Usecase kết thúc không thành
công.
UC23-Chỉnh sửa bài viết
51 | P a g e
 Tên use-case: Chỉnh sửa bài viết.
 Mục đích: giúp người dùng có thể chỉnh sửa một bài viết đã đăng.
 Tóm lược: Người dùng mở một bài viết đã đăng, nhấn biểu tượng cây bút
để thực hiện chỉnh sửa bài viết.
 Trường hợp thành công: thông tin bài viết được cập nhật lại.
1. Người dùng nhấn vào bài viết nào đó mà mình từng đăng tải.
2. Người dùng nhấn chọn biểu tượng cây bút để thực hiện chỉnh sửa.
3. Người dùng thực hiện chỉnh sửa nội dung caption hoặc hình ảnh rồi lưu
các thay đổi.
4. Hệ thống thực hiện lưu thông tin thay đổi của bài viết.
1. Hệ thống lưu thay đổi bài viết không thành công  Hệ thống hiển
thị thông báo thay đổi không thành công cho người dùng.
UC24-Chia sẻ bài viết
 Tên use-case: Chia sẻ bài viết.
 Mục đích: người dùng có thể gửi một bài viết dến một cuộc trò chuyện.
52 | P a g e
 Tóm lược: Người dùng nhấn vào biểu tượng “share” ở dưới bài post để
sau đó popup hiện ra để người dùng chọn đối tượng để gửi bài post,
người dùng chọn đối tượng và nhấn gửi.
 Trường hợp thành công: bài viết được gửi trong cuộc trò chuyện.
1. Load giao diện người dùng ở trang home hiển thị danh sách các bài viết.
Khi người dùng muốn gửi bài viết nào đó thì nhấn vào icon “share” phía
dưới bài viết.
2. Popup hiện ra để người dùng chọn đối tượng người dùng gửi tới bao
gồm các bạn bè mà người dùng đã follow hoặc các nhóm chat đã có sẵn.
3. Người dùng có thể chọn một hoặc nhiều đối tượng nhận bài post.
4. Sau khi chọn nếu người dùng không muốn gửi nửa có thể nhấn dấu “x”
bên cạnh tên đối tượng được chọn để bỏ đối tượng đó ra khỏi danh sách
nhận tin nhắn.
5. Người dùng nhấn “Gửi” để tiến hành gửi tin nhắn cho đối tượng đã
chọn.
6. Hệ thống dùn socket để người dùng khác sẽ nhận được tin nhắn
realtime.
7. Hệ thống sẽ lưu tin nhắn vào trong cơ sở dữ liệu.
UC25-Yêu thích bài viết
53 | P a g e
 Tên use-case: Yêu thích bài viết.
 Mục đích: người dùng có thể thể hiện cảm xúc của người dùng cho chủ
bài viết biết.
 Tóm lược: Người dùng nhấn vào biểu tượng hình trái tim bên dưới bài
viết để yêu thích hoặc bỏ like bài viết đó.
 Trường hợp thành công: biểu tượng chuyển màu, số lượt yêu
thích của bài viết tăng lên hoặc giảm đi.
 Trường hợp thất bại: người dùng không thực hiện đươc hành
động.
1. Load giao diện người dùng, hệ thống dựa vào dữ liệu bạn đã like bài viết
hay chưa để hiển thị, nếu thích rồi thì hiển thị trái màu đỏ còn nếu chưa
thì hiển thị trái tim không màu.
2. Người dùng nhấn vào biểu tượng hình trái tim để chuyển từ thích sang
không thích hoặc ngược lại.
3. Hệ thống nhận dữ liệu và lưu vào cơ sở dữ liệu.
3.1 <<include>> UC60-Gửi thông báo.
UC26-Bình luận bài viết
54 | P a g e
 Tên use-case: Bình luận bài viết.

 Mục đích: người dùng có thể thể hiện quan điểm ý kiến của mình về bài
viết.
 Tóm lược: Người dùng nhấn vào ô input nhập thông tin comment và
nhấn nút đăng để tiến hành bình luận.
 Trường hợp thành công: bình luận được lưu lại, tổng số bình luận
của bài viết được tăng lên, thông báo được gửi đến tài khoản
đăng bài.
1. Load giao diện người dùng, người dùng nhấn vào chi tiết bài viết của
bạn bè, hệ thống hiển thị giao diện chi tiết bài viết.
2. Người dùng có thể xem danh sách các bình luận trước đó của bài post.
3. Nếu muốn đăng bình luận mới người dùng nhập vào ô input nội dung
muốn bình luận (có emoji) và nhấn nút đăng để tiến hành bình luận.
4. Người dùng cũng có thể trả lời lại bình luận của một người dùng khác.
5. Hệ thống sẽ lưu bình luận của người dùng xuống cơ sở dữ liệu đồng thời
tiến hành load lại danh sách bình luận phía trên.
5.1 <<include>> UC60-Gửi thông báo
6. Hệ thống sử dụng socket.io nên người dùng khác đang trong bài post
cũng có thể thấy bình luận bạn vừa mới đăng realtime.
55 | P a g e
1. Hệ thống không lưu được bình luận è báo lỗi cho người dùng
2. Bạn chưa nhập bình luận mà nhấn nút “Đăng”  hiển thị thông báo
không thực hiện được và yêu cầu người dùng nhâp vào bình luận.
UC27-Xóa bình luận
 Tên use-case: xóa bình luận của bài viết.
 Mục đích: người dùng có thể xóa bình luận của mình đã viết trước đó
nếu muốn.
 Tóm lược: Người dùng nhấn vào ô xóa bình luận hệ thống hiển thị
confirm xác nhận người dùng có muốn xóa hay không, nếu có thì hệ
thống tiến hành xóa
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và bình luận muốn
xóa phải là bình luận của mình.
 Trường hợp thành công: bình luận được xóa đi, tổng số bình luận
của bài viết giảm xuống.
1. Load giao diện người dùng, người dùng nhấn vào chi tiết bài viết cảu
bạn bè, hệ thống hiển thị giao diện chi tiết bài viết bao gồm danh sách
các bình luận đã có trước đó của bài viết.
56 | P a g e
2. Nếu đó là bình luận của mình thì hệ thống sẽ hiển thị dấu “…” còn
không thì không có dấu “…”.
3. Người dùng nhấn vào dấu “…” và nhấn nút xóa.
4. Hệ thống hiển thị một confirm xác nhận người dùng có muốn xóa hay
không.
5. Nếu xóa thì hệ thống tiến hành xóa bình luận trong cơ sở dữ liệu và load
lại danh sách bình luận mới.
1. Hệ thống không xóa được bình luận  báo lỗi cho người dùng.
UC28-Yêu thích bình luận
 Tên use-case: Yêu thích bình luận.
 Mục đích: người dùng có thể thể hiện cảm xúc yêu thích với bình luận
mình mong muốn.
 Tóm lược: Người dùng nhấn vào biểu tượng trái tym ở ngoài cùng bình
luận để tiến hàng chuyển từ không tym sang tym hoặc ngược lại.
 Trường hợp thành công: màu sắc biểu tượng yêu thích và tổng
lượt yêu thích của bình luận bị thay đổi.
 Trường hợp thất bại: biểu tượng và lượt yêu thích không có gì
thay đổi.
57 | P a g e
1. Load giao diện người dùng, người dùng nhấn vào chi tiết bài viết cảu
bạn bè, hệ thống hiển thị giao diện chi tiết bài viết bao gồm danh sách
các bình luận đã có trước đó của bài viết đồng thời kiếm tra bình luận đó
mình đã tym hay chưa, nếu tym rồi thì trái tym màu đỏ, nếu không thì
trái tym không màu.
2. Người dùng có thể nhấn vào dấu trái tym để chuyển từ không thích sang
thích hoặc ngược lại.
3. Hệ thống cập nhật lại cơ sở dữ liệu.
3.1 <<include>> UC6-Gửi thông báo
4. Hệ thống điều chỉnh lại số người thích bình luận +1 nếu người dùng
chuyển từ không tym sang tym và -1 nếu ngược lại.
5. Người dùng có thể nhấn vào số lượt thích hiển thị dưới mỗi comment để
xem danh sách các tài khoản đã tym bình luận này.
6. Danh sách các tài khoản hiện lên và hệ thống kiểm tra ứng với mỗi tài
khoản nếu là tài khoản người dùng đăng nhập đã follow thì hiển thị nút
“Unfollow” bên cạnh còn ngược lại thì nút “Follow”
7. Hệ thống tiến hành cập nhật lại cơ sở dữ liệu.
58 | P a g e
3.3.3 Quản lý tin nhắn
Hình 3-14: Sơ đồ Usecase quản lý tin nhắn
UC31-Tạo cuộc trò chuyện
59 | P a g e
 Tên use-case: Tạo cuộc trò chuyện.

 Mục đích: trò chuyện với người dùng khác.
 Tóm lược: Người dùng nhấn vào nút tạo mới cuộc trò chuyện, hệ thống
sẽ hiển thị ra danh sách tài khoản đang follow để người dùng chọn.
 Trường hợp thành công: một cuộc trò chuyện được tạo.
1. Load giao diện người dùng trang chat bao gồm các cuộc trò chuyện đã
có trước đó.
2. Người dùng nhấn vào nút thêm mới cuộc trò chuyện.
3. Hệ thống sẽ hiện lên popup hiển thị danh sách các bạn bè đã follow
trước đó.
4. Người dùng chọn một hay nhiều đối tượng để gửi tin nhắn đến, nếu
chọn nhiều thì hệ thống sẽ tạo group chat.
5. Hệ thống lưu cuộc trò chuyện vào cơ sở dữ liệu và hiển thị khung tin
nhắn bên phải để người dùng bắt đầu cuộc hội thoại.
1. Tạo cuộc trò chuyện không thành công è báo lỗi cho người dùng hệ
thống đang bị lỗi, và gợi ý người dùng thực hiện lại sau.
UC32-Xóa cuộc trò chuyện
60 | P a g e
 Tên use-case: Xóa cuộc trò chuyện.

 Mục đích: xóa cuộc trò chuyện.
 Tóm lược: Người dùng chọn cuộc hội thoại có sẵn và nhấn vào setting è
chọn xóa cuộc trò chuyện để xóa.
 Trường hợp thành công: cuộc trò chuyện bị xóa khỏi trang
chat.
1. Load giao diện người dùng trang chat bao gồm các cuộc trò chuyện
đã có trước đó.
2. Người dùng nhấn vào cuộc hội thoại muốn xóa.
3. Người dùng nhấn vào biểu tượng setting bên trên cuộc hội thoại è
chọn xóa cuộc trò chuyện để xóa.
4. Hệ thống sẽ hiển thị lên popup xác thực muốn xóa.
5. Người dùng xác nhận.
1. Xóa cuộc trò chuyện không thành công è báo lỗi cho người dùng hệ
thống đang bị lỗi, và gợi ý người dùng thực hiện lại sau.
UC33-Quản lý thành viên
61 | P a g e
 Tên use-case: Quản lý thành viên.

 Mục đích: người dùng có thể quản lý thành viên trong một cuộc trò
chuyện.
chọn các chức năng để quản lý thành viên.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và là người tạo ra
cuộc trò chuyện đó.
 Trường hợp thành công: người dùng thực hiện các yêu cầu thành
công.
1. Người dùng nhấn vào cuộc hội thoại muốn quản lý thành viên.
2. Người dùng nhấn vào biểu tượng setting bên trên cuộc hội thoại è chọn
các chức năng mà mình muốn.
3. Thực hiện yêu cầu.
4. Hệ thống xử lý yêu cầu.
1. Hệ thống thực hiện yêu cầu không thành công è báo lỗi cho người dùng
hệ thống đang bị lỗi, và gợi ý người dùng thực hiện lại sau.
UC331-Thêm thành viên
62 | P a g e
 Tên use-case: Thêm thành viên.

 Mục đích: người dùng có thể thêm một thành viên vào một nhóm chat đã
có sẵn.
thêm thành viên để tiến hành thêm thành viên mới.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và đã có cuộc trò
chuyện trước đó.
 Trường hợp thành công: thành viên mới được thêm vào cuộc trò
chuyện và có thông báo trong cuộc trò chuyện.
1. Người dùng nhấn vào cuộc hội thoại muốn thêm thành viên hệ thống
hiển thị ra danh sách các tin nhắn đã có trước đó.
thêm thành viên để tiến hành thêm thành viên.
3. Hệ thống sẽ hiển thị lên popup bao gồm các bạn bè mà bạn đã follow,
người dùng chọn đối tượng mình muốn thêm (có thể chọn nhiều đối
tượng).
4. Sau khi chọn đối tượng người dùng có thể bỏ chọn bằng cách nhấn dấu
“x” vào tên đối tượng được.
5. Người dùng nhấn nút “Thêm” để tiến hành thêm đối tượng vào nhóm
chat.
6. Hệ thống sẽ thêm đối tượng này vào nhóm chat trong cơ sở dữ liệu
đồng thời hiển thị một thông báo trong nhóm chat rằng đã có thành viên
mới được thêm mới.
63 | P a g e

7. Hệ thống thêm người dùng không thành công è báo lỗi cho người dùng
UC332-Xóa thành viên
 Tên use-case: Xóa thành viên.
 Mục đích: người dùng có thể xóa một thành viên trong một nhóm chat đã
có sẵn.
thêm thành viên để tiến hành thêm thành viên mới.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và là người tạo ra
cuộc trò chuyện đó.
 Trường hợp thành công: thành viên được yêu cầu bị xóa khỏi
cuộc trò chuyện.
thêm thành viên để tiến hành xóa thành viên.
5. Hệ thống sẽ hiển thị lên popup xác nhận xóa thành viên ra khỏi cuộc trò
chuyện.
64 | P a g e
6. Người dùng xác nhận xóa thành viên.

7. Hệ thống sẽ xóa đối tượng này khỏi nhóm chat trong cơ sở dữ liệu.
1. Hệ thống thêm người dùng không thành công è báo lỗi cho người dùng
2. Người dùng hủy xác nhận xóa thành viên  Usecase kết thúc không
thành công.
UC333 -Rời cuộc trò chuyện
 Tên use-case: Rời cuộc trò chuyện.
 Mục đích: người dùng có thể rời khỏi cuộc trò chuyện nếu không muốn
nhắn tin trong nhóm nữa.
rời cuộc trò chuyện để tiến hành rời cuộc trò chuyện nếu muốn.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và người dùng đã ở
trong cuộc hội thoại muốn rời khỏi.
 Trường hợp thành công: cuộc trò chuyện sẽ không còn tồn tại
trên trang chat.
65 | P a g e
rời cuộc trò chuyện.
3. Hệ thống sẽ hiển thị lên confirm để người dùng xác nhận có muốn rời
khỏi cuộc trò chuyện hay không.
4. Người xác nhận, hệ thống sẽ tiến hành xóa người dùng khỏi cuộc hội
thoại trên hệ thống và thông báo trong cuộc hội thoại là có người vừa rời
khỏi nhóm.
1. Hệ thống xử lý xóa người dùng khỏi cơ sở dữ liệu không thành công è
báo lỗi cho người dùng hệ thống đang bị lỗi, và gợi ý người dùng thực
hiện lại sau.
UC34-Quản lý tin nhắn
 Tên use-case: Quản lý tin nhắn.
 Mục đích: người dùng có thể quản lý tin nhắn trong một cuộc trò chuyện.
 Tóm lược: Người dùng chọn cuộc hội thoại có sẵn và thực hiện các thao
tác với tin nhắn có trên đó.
 Trường hợp thành công: các thao tác được thực hiện.
66 | P a g e

1. Người dùng nhấn vào cuộc hội thoại.
2. Người dùng thực hiện các thao tác của tin nhắn mà mình muốn.
3. Hệ thống xử lý và thực hiện yêu cầu.
1. Hệ thống thực hiện yêu cầu không thành công è báo lỗi cho người dùng
UC341-Gửi tin nhắn
 Tên use-case: Gửi tin nhắn.
 Mục đích: người dùng có thể nhắn tin đến mọi người trong một cuộc trò
chuyện.
 Tóm lược: Người dùng chọn cuộc hội thoại muốn nhắn tin è nhập tin
nhắn và nhấn icon gửi để tiến hành gửi tin nhắn.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và người dùng đã
có cuộc hội thoại trước đó.
 Trường hợp thành công: tin nhắn được gửi tin trong cuộc trò
chuyện và mọi người trong đó có thể đọc được.
 Trường hợp thất bại: tin nhắn không được gửi đi, hệ thống thông
báo lỗi.
67 | P a g e
1. Người dùng nhấn vào cuộc hội thoại muốn nhắn tin.
2. Hệ thống sẽ hiển thị danh sách các tin nhắn đã có trước đó trong cuộc
hội thoại.
3. Người dùng nhập tin nhắn vào ô input và nhấn icon “gửi” để gửi tin
nhắn dạng text.
4. Người dùng cũng có thể nhấn vào icon hình ảnh bên dưới ô input để gửi
tin nhắn hình ảnh.
5. Người dùng có thể gửi kèm biểu tượng cảm xúc bằng cách nhấn vào
icon hình khuôn mặt ngay bên cạnh ô input.
6. Hệ thống sẽ hiển thị một popup với rất nhiều icon để người dùng lựa
chọn.
7. Sau khi người dùng gửi hệ thống sẽ dùng socket để thành viên khác
trong cuộc hội thoại có thể nhìn thấy tin nhắn realtime mà không cần
phải load lại website.
8. Hệ thống tiến hành lưu tin nhắn vào cơ sở dữ liệu.
9. Tin nhắn được hiển thị lên cho người dùng.
1. Hệ thống load tin nhắn trước đó không được è báo lỗi cho người dùng là
hệ thống đang bị lỗi không gửi tin nhắn được.
2. Gửi tin nhắn không được do server bị lỗi è báo lỗi cho người dùng tin
nhắn không gửi được.
UC342-Gỡ tin nhắn
 Tên use-case: Gỡ tin nhắn.
68 | P a g e
 Mục đích: người dùng có thể xóa hoặc gỡ một tin nhắn trước đó nếu
không muốn người khác xem nội dung tin nhắn nữa.
 Tóm lược: Người dùng hover vào tin nhắn đã có, icon “xóa” sẽ hiện lên,
người dùng nhấn vào để tiến hành xóa.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và có tin nhắn
người dùng muốn xóa.
 Trường hợp thành công: tin nhắn bị gỡ trong cuộc trò chuyện và
mọi người không thể đọc được nó.
 Trường hợp thất bại: tin nhắn không được gỡ đi, hệ thống thông
báo lỗi.
1. Hệ thống load giao diện danh sách các tin nhắn đã có trong cuộc hội
thoại.
2. Người dùng hover vào tin nhắn muốn xóa.
3. Icon “xóa” hiện ra, người dùng nhấn vào để xóa tin nhắn.
4. Hoặc người dùng muốn gỡ thì nhấn vào gỡ tin nhắn.
5. Hệ thống sẽ hiển thị popup xác nhận người dùng có muốn gỡ hay xóa tin
nhắn hay không.
6. Hệ thống tiến hành xóa và cập nhật lại hiển thị cho người dùng, nếu gỡ
thì nội dung tin nhắn sẽ chuyển thành “tin nhắn đã gỡ” còn xóa thì tin
nhắn sẽ mất.
2. Người dùng xác nhận không xóa è Usecase kết thúc không thành công.
69 | P a g e
UC343-Chuyển tiếp tin nhắn
 Tên use-case: Chuyển tiếp tin nhắn.
 Mục đích: người dùng có thể gửi một tin nhắn đã có sang một cuộc hoại
thoại khác.
 Tóm lược: Người dùng hover vào tin nhắn đã có, icon “share” sẽ hiện
lên, người dùng nhấn vào và chọn cuộc hội thoại muốn gửi tin nhắn tới.
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và tin nhắn người
dùng muốn chuyển tiếp đã có trước đó.
 Trường hợp thành công: tin nhắn được chuyển đến cuộc trò
chuyện khác.
 Trường hợp thất bại: tin nhắn không được chuyển đi, hệ thống
thông báo lỗi.
thoại.
2. Người dùng hover vào tin nhắn muốn chuyển tiếp.
3. Icon “share” hiện ra, người dùng nhấn vào để tiến hành chuyển tiếp tin
nhắn.
4. Sau khi nhấn icon, một popup hiện ra để người dùng chọn đối tượng
nhận tin nhắn.
5. Popup chứa các danh sách bạn bè đang follow và các nhóm chat.
70 | P a g e
6. Người dùng có thể chọn một hay nhiều đối tượng nhận tin nhắn.
7. Sau khi chọn người dùng có thể bỏ đối tượng ra bằng cách nhấn vào dấu
“x” bên cạnh tên đối tối tượng được chọn.
8. Hệ thống sẽ gửi tin nhắn realtime cho đối tượng được chọn thông qua
socket.
9. Hệ thống sẽ lưu tin nhắn vào cơ sở dữ liệu.
2. Hệ thống không load được danh sách các đối tượng trong popup è báo
lỗi cho người dùng.
UC344-Yêu thích tin nhắn
 Tên use-case: Yêu thích tin nhắn.
 Mục đích: người dùng có thể bày tỏ cảm xúc đối với một tin nhắn.
 Tóm lược: Người dùng hover vào tin nhắn đã có, biểu tượng trái tim sẽ
hiện lên, người dùng nhấn vào để yêu thích tin nhắn
 Điều kiện đầu: Người dùng phải đăng nhập vào hệ thống và tin nhắn người
dùng muốn tym đã có trước đó.
 Trường hợp thành công: tin nhắn được hiện trái tim bên cạnh.
 Trường hợp thất bại: tin nhắn không hiện gì.
71 | P a g e
thoại.
2. Người dùng hover vào tin nhắn yêu thích.
3. Biểu tượng trái tim hiện ra, người dùng nhấn vào.
4. Hệ thống sẽ hiển thị việc yêu thích tin nhắn realtime cho đối tượng khác
trong nhóm chat.
5. Hệ thống sẽ lưu tin nhắn vào cơ sở dữ liệu.
UC35-Quản lý cuộc gọi
 Tên use-case: Quản lý cuộc gọi.
 Mục đích: người dùng có thể quản lý cuộc gọi trong một cuộc trò
chuyện.
 Tóm lược: Người dùng chọn cuộc hội thoại có sẵn và nhấn vào biểu
tượng điện thoại để thực hiện cuộc gọi.
 Trường hợp thành công: các người dùng trong nhóm chat có thể
thực hiện cuộc gọi.
 Trường hợp thất bại: không thể thực hiện cuộc gọi, hệ thống
72 | P a g e

1. Người dùng nhấn vào cuộc hội thoại thực hiện gọi điện.
2. Người dùng nhấn vào biểu tượng điện thoại để thực hiện cuộc gọi
3. Hệ thống sẽ kết nối đến những người dùng khác trong cuộc trò chuyện.
1. Hệ thống thực hiện kết nối không thành công è báo lỗi cho người dùng
2. Người dùng được kết nối đến không chấp nhận cuộc gọi  Usecase kết
thúc không thành công.
UC35-Gọi video
 Tên use-case: Goi video.
 Mục đích: người dùng có thể gọi và thấy hình ảnh.
 Tóm lược: Người dùng chọn cuộc hội thoại có sẵn và nhấn vào biểu
tượng camera để thực hiện cuộc gọi video.
 Trường hợp thành công : các người dùng trong nhóm chat có thể
thực hiện cuộc gọi và xem được hình ảnh của nhau.
 Trường hợp thất bại: không thể thực hiện cuộc gọi hoặc không
thể thấy hình ảnh, hệ thống thông báo lỗi.
73 | P a g e
1. Người dùng nhấn vào cuộc hội thoại muốn thực hiện cuộc gọi.
2. Người dùng nhấn vào biểu camera để thực hiện cuộc gọi video.
3. Hệ thống sẽ kết nối đến những người dùng khác.
1. Hệ thống thực hiện kết nối không thành công è báo lỗi cho người dùng
2. Người dùng được kết nối đến không chấp nhận cuộc gọi  Usecase kết
thúc không thành công.
3. Camera của người dùng không hoạt động  Usecase kết thúc không
thành công.
3.3.4 Đăg ký
UC40- Đăng ký
 Tên use-case: Đăng ký.
 Mục đích: giúp người dùng tạo tài khoản để truy cập vào website
 Tóm lược: người dùng cần điền đầy đủ các thông tin trong form hiện ra
để thực hiện tạo tài khoản.
 Điều kiện đầu: không có.
 Trường hợp thành công : người dùng tạo được tài khoản trên hệ
thống.
74 | P a g e
 Trường hợp thất bại: tạo tài khoản không thành công, hệ thống
1. Người dùng nhấn vào nút đăng ký tài khoản
2. Hệ thống hiển thị các thông tin để khách hàng đăng ký tài khoản: tên
đăng nhập, email, ngày sinh, giới tính, ….
3. Hệ thống xác nhận thông tin và tạo tài khoản cho khách hàng.
4. Hệ thống chuyển vào trang chủ.
1. Hệ thống không tạo được tài khoản è thông báo lỗi cho người dùng.
2. Các trường thông tin người dùng nhập không hợp lệ è hiển thị nhắc nhở
ngay sau khi khách hàng nhập trường thông tin đó.
3.3.5 Đăg nhập
UC50- Đăng nhập
 Tên use-case: Đăng nhập
 Mục đích: giúp người dùng truy cập vào website.
 Tóm lược: người dùng nhập email và mật khẩu đã đăng ký trước đó để
đăng nhập vào hệ thống.
 Điều kiện đầu: người dùng đã đăng ký tài khoản thành công.
 Trường hợp thành công: người dùng có thể truy cập vào ứng
dụng.
75 | P a g e
 Trường hợp thất bại: người dùng không truy cập vào được, hệ
thống thông báo lỗi.
1. Load giao diện người dùng.
2. Người dùng nhập email và password vào form hiện ra và nhấn login để
đăng nhập vào hệ thống.
3. Hệ thống kiểm tra thông tin đăng nhập và điều hướng tới trang chủ.
1. Các trường thông tin khách hàng nhập không hợp lệ è hiển thị nhắc nhở
ngay sau khi khách hàng nhập trường đó.
2. Server có lỗi không đăng nhập được è hiển thị thông báo cho người
dùng biết.
3.4 Yêu cầu phi chức năng
 Danh sách yêu cầu tiện dụng

- Giao diện trang web rõ ràng, đơn giản, dễ sử dụng đối với đối tượng sử dụng (mất
1-2 phút hướng dẫn).
- Các thao tác/chức năng được thực hiện dễ dàng, không cần chuyển quá nhiều
trang.
- Nội dung ngắn gọn, súc tích, từ ngữ chính xác, thống nhất từ ngữ đối với các
nhãn/nút/tiêu đề… đối với các phần có cùng ý nghĩa.
Bảng 3-4: Danh sách yêu cầu tiện dụng
STT Nghiệp vụ Mức độ dễ học Mức độ dễ sử Ghi chú

dụng
1 Đăng/sửa/xóa bài viết 2 phút hướng dẫn Dễ sử dụng
76 | P a g e
2 Follow/unfollow người 1 phút hướng dẫn Dễ sử dụng

dùng
3 Tìm kiếm người dùng 1 phút hướng dẫn Dễ sử dụng
4 Comment bài viết 1 phút hướng dẫn Dễ sử dụng
5 React bài viết 1 phút hướng dẫn Dễ sử dụng
6 Chat 2 phút hướng dẫn Dễ sử dụng
7 Call 2 phút hướng dẫn Dễ sử dụng
 Danh sách yêu cầu hiệu quả

- Các chức năng thực hiện đúng với ý nghĩa của nó, tránh trường hợp xảy ra lỗi phía
trang web.
- Tốc độ load trang từ trung bình đến nhanh.
Bảng 3-5: Danh sách yêu cầu hiệu quả
Dung lượng
STT Nghiệp vụ Tốc độ xử lý Ghi chú
lưu trữ
1 Đăng/sửa/xóa bài viết Ngay tức thì
Follow/unfollow người Ngay tức thì
2
dùng
3 Tìm kiếm người dùng Ngay tức thì
4 Comment bài viết Ngay tức thì
5 React bài viết Ngay tức thì
6 Chat Ngay tức thì
7 Call Ngay tức thì
 Yêu cầu bảo mật

77 | P a g e
- Xây dựng chức năng đăng ký để tạo tài khoản người dùng.
- Xây dựng chức năng đăng nhập/đăng xuất để bảo mật quá trình sử dụng trang
web.
- Mật khẩu cần được mã hóa trong quá trình giao tiếp giửa máy chủ và máy khách,
đồng thời mã hóa trước khi lưu ở cơ sở dữ liệu.
78 | P a g e
CHƯƠNG 4: CHƯƠNG 4: THIẾT KẾ
4.1 Thiết kế dữ liệu
4.1.1 Thiết kế sơ đồ lớp
Bảng 4-1: Bảng chú thích các ký hiệu trong sơ đồ lớp
Ký hiệu Tên Diễn giải

Tính chất cơ bản
Class name Tên đối tượng
Attributes Mô tả tính chất của các đối tượng
Method Chỉ các hành động mà đối tượng này
có thể thực hiện trong hệ thống
Phạm vi truy cập
- Private Chỉ các đối tượng được tạo từ class
này có thể sử dụng.
+ Public Mọi đối tượng đều có thể sử dụng.
# Protected Chỉ các đối tượng được tạo từ class
này và class kế thừa từ class này có
thể sử dụng.
Mối quan hệ giữa các đối tượng
Association Mô tả quan hệ giữa hai lớp với nhau,
nó thể hiện rằng giữa chúng có liên
quan với nhau.
Aggregation Đây là một loại của quan hệ
Association nhưng mạnh hơn
79 | P a g e
Association. Aggregation có thể

cùng chung thời gian sống (cùng
sinh ra hoặc chết đi).
Composition Đây là một loại quan hệ còn mạnh
hơn cả quan hệ Aggregation. Nó thể
hiện mối quan hệ class này là một
phần của class kia nên dẫn đến
chúng sẽ cùng tạo ra hoặc cùng chết
đi.
Generalization Đây là một dạng quan hệ thừa kế. Nó
được sử dụng rộng rãi trong lập trình
hướng đối tượng.
Quan hệ về số lượng giữa các đối tượng
0...1 m...n
N Bắt buộc có n
0...* 0 hoặc nhiều
1...* 1 hoặc nhiều
m...n Có tối thiểu là m và tối đa là n
Sơ đồ lớp tổng thể:
80 | P a g e
Hình 4-15: Sơ đồ lớp tổng thể
Những lớp chính:
81 | P a g e
82 | P a g e
Hình 4-16: Các lớp chính
- User: đây là thành phần chính của hệ thống. Mỗi người dùng có 1 profile bao gồm
ảnh đại diện, người theo dõi, người đang theo dõi và hình ảnh,. Các người dùng có
thể theo dõi nhau hoặc được gợi ý để gửi yêu cầu theo dõi đến người dùng khác.
- Search: ứng dụng hỗ trợ tính năng tìm kiếm theo tên người dùng.
- Conversation: người dùng có thể tạo cuộc trò chuyện, thêm người dùng khác vào
cuộc trò chuyện đó, đổi tên và quản lý cuộc trò chuyện.
- Message: người dùng có thể gửi nhiều tin nhắn dưới dạng văn bản, hình ảnh hoặc
video. Một tin nhắn gửi đi có thể được xóa, chuyển tiếp hoặc được yêu thích bởi
người những người dùng khác trong cuộc trò chuyện.
- Comment: người dùng có thể thêm các bình luận vào bài viết, một comment có thể
được yêu thích, chỉnh sửa và được phản hồi từ những người dùng khác.
- Notification: lớp thông báo sẽ gửi thông báo đến người dùng.
83 | P a g e
4.1.2 Sơ đồ logic hoàn chỉnh
Hình 4-17: Cơ sở dữ liệu
4.1.3 Danh sách các collection trong sơ đồ
Collection USER
Bảng 4-6: Collection USER
STT Thuộc tính Kiểu dữ liệu Diễn giải

1 _id ObjectId Mã người dùng
2 name String Tên người dùng
3 role String Quyền của người
4 email String Email người dùng
5 password String Password người dùng
6 date_of_birth Date Ngày sinh của người dùng
84 | P a g e
7 gender String Giới tính người dùng

8 avatar String Ảnh đại diện của người dùng
9 mobile String Số điện thoại của người dùng
10 address String Địa chỉ của người dùng
11 follower Array Danh sách những tài khoản
follow người dùng
12 following Array Danh sách những tài khoản mà
người dùng follow
13 createdAt Date Thời gian tạo tài khoản
Collection POST
Bảng 4-7: Collection POST

1 _id ObjectId Mã bài viết
2 user_id ObjectId Mã người dùng đăng bài viết
3 images Array Danh sách link hình ảnh của
bài viết
4 likes Array Danh sách người dùng like bài
viết
5 comments Array Danh sách người dùng
comment bài viết
6 createdAt Date Thời gian đăng bài viết
7 updatedAt Date Thời gian cập nhật bài viết
Collection COMMENT
Bảng 4-8: Collection COMMENT
85 | P a g e

1 _id ObjectId Mã bình luận
2 post_id ObjectId Mã bài viết
3 user_id ObjectId Mã người bình luận
4 content String Nội dung bình luận
5 likes Array Mảng ngưởi dùng like bình
luận
6 reply Array Mảng người dùng trả lời bình
luận
7 parent ObjectId Bỉnh luận cha (nếu bình luận
mới tạo là bình luận đầu thì
parent=null)
8 createdAt Date Thời gian bình luận
9 updatedAt Date Thời gian cập nhật bình luận
Collection CONVERSATION
Bảng 4-9: Collection CONVERSATION

1 _id ObjectId Mã nhóm chat
2 name String Tên nhóm chat
3 members Array Mảng người dùng thuộc nhóm
chat
4 avatar String Ảnh đại diện của nhóm chat
5 createdAt Date Thời gian tạo nhóm chat
6 updatedAt Date Thời gian cập nhật nhóm chat
Collection MESSAGE
86 | P a g e
Bảng 4-10: Collection MESSAGE

1 _id ObjectId Mã tin nhắn
2 conversation_id ObjectId Mã nhóm chat
3 content String Nội dung tin nhắn
4 loves Array Mảng người dùng thả tim tin
nhắn
5 createdAt Date Thời gian nhắn tin
Collection NOTIFICATION
Bảng 4-11: Collection NOTIFICATION

1 _id ObjectId Mã thông báo
2 sender ObjectId Mã người dùng thực hiện hành
động
3 receiver ObjectId Mã người dùng nhận thông báo
4 notiType Number Loại thông báo
1: Đăng bài mới
2: Tym bài post
3: Comment bài post
4: Follow
5 desId String Mã bài viết hoặc mã người
dùng
6 isSeen Boolean Giá trị để kiểm tra thông báo đã
87 | P a g e
được xem hay chưa

7 createAt Date Thời gian tạo thông báo
4.2 Thiết kế giao diện
4.2.1 Sơ đồ liên kết các màng hình
Hình 4-18 Sơ đồ liên kết các màn hình
Danh sách màn hình chính:
Bảng 4-12: Danh sách màng hình chính
STT Màn hình Chức năng

1 Đăng nhập Giúp người dùng đăng nhập vào hệ thống.
2 Đăng ký Giúp người dùng tạo một tài khoản mới trên hệ thống.
88 | P a g e
3 Trang chủ Xem các bài viết mới nhất từ những người dùng khác.
4 Tin nhắn Gửi tin nhắn qua lại giữa những người dùng, tạo 1
nhóm các người dùng có thể trò chuyện trao đổi với
nhau.
5 Đăng bài Chia sẻ một bài viết của mình lên với mọi người.
7 Trang cá nhân Hiển thị thông tin cá nhân, các bài viết đã chia sẻ, các
bài viết đã lưu.
8 Cài đặt Cài đặt, chỉnh sửa các thông tin cá nhân của người
dùng.
4.2.2 Thành phần giao diện dùng chung
diện thanh điều hướng:
Hình 4-19: Thanh header
Mô tả chi tiết các thành phần giao diện:
Bảng 4-13: Mô tả thành phần thanh header
STT Tên Kiểu Mô tả

1 Thanh header Navigation Thanh header để chứa các thành phần
components chuyển hướng trên ứng dụng.
1.1 txtSearchBox Search Input Người dùng nhập tên của một người
dùng khác, hệ thống sẽ tìm tất cả kết
89 | P a g e
quả khớp với tên được tìm kiếm.

1.2 btnHome Link Người dùng nhấp vào sẽ chuyển về giao
diện màn hình chính (trang chủ).
1.3 btnMessenger Link Người dùng nhấp vào] sẽ chuyển đến
trang tin nhắn.
1.4 btnAddPost Popup Button Người dùng nhấp vào sẽ hiện giao diện
thêm bài viết.
1.5 btnNotify Button Người dùng nhấp vào sẽ hiện các thông
báo.
1.6 btnProfileList Button Người dùng nhấp vào sẽ hiện danh sách
chức năng tùy chọn cho tài khoản người
dùng.
4.2.2.1 Giao diện thanh tìm kiếm
Khi nhập tên tài khoản người dùng vào thanh tìm kiếm, hệ thống sẽ tìm các tài
khoản có kết quả phù hợp ở bên dưới.
90 | P a g e
Hình 4-20: Thanh tìm kiếm
Bảng 4-14: Mô tả thành phần thanh tìm kiếm
STT Tên Kiểu Mô tả

1 listUser List View Hiện thị danh sách người dùng có
tên giống với nội dung tìm kiếm.
1.1 linkUser Dynamic Link Đường dẫn đến profile của những
người dùng khác.
2 btnDelete Button Người dùng nhấp vào nút [3] sẽ
chuyển về giao diện màn hình
chính (trang chủ).
91 | P a g e
4.2.2.2 Giao diện thêm bài viết mới
Đây là giao diện popup khi thêm bài viết với. Người dùng nhấn biểu tượng “dấu
cộng” trên thanh header thì popup này sẽ hiện lên.
Hình 4-21: Thêm bài viết
Bảng 4-15: Mô tả thành phần thêm bài viết mới
STT Tên Kiểu Chức năng

1 CreatePostDialog Popup dialog Hiện thị các tùy chọn cho bài viết.
1.1 btnSelectImg Button Chọn hình ảnh từ thiết bị.
1.2 txtImgCaption Textbox Nhập nội dung đi kèm.
1.3 btnEmoji Button Chọn biểu tượng cảm xúc.

1.4 btnClosePopup Button Tắt popup thêm bài viết.
92 | P a g e
Giao diện sau khi chọn ảnh:
Hình 4-22: Giao diện sau khi chọn ảnh
Bảng 4-16: Mô tả thành phần thêm bài viết

1 btnDeleteImg Button Xóa hình ảnh vừa chọn.
2 btnSelectMoreImg Button Chọn thêm hình ảnh từ thiết bị.
3 btnPost Button Đăng bài viết.
93 | P a g e
4.2.2.3 Giao diện điều hướng trang cá nhân
Sau khi nhấn biểu tượng “người dùng” trên thanh header thì một drop list sẽ hiện ra.
Hình 4-23: User navigation
Bảng 4-17: Mô tả thành phần trang chủ

1 User navigation Static link Hiện thị các tùy chọn cho bài viết.
1.1 linkToProfile Link Chuyển đến trang profile của người
dùng.
1.2 linkToSaved Link Chuyển đến trang lưu trữ của người
dùng.
1.3 linkToSettings Link Chuyển đến trang cài đặt của người
dùng.
1.4 linkToLogout Link Đăng xuất tài khoản khỏi ứng dụng,
94 | P a g e
chuyển màn hình đăng nhập.
4.2.3 Đăng nhập
4.2.3.1 giao diện đăng nhập
đây là giao diện màn hình đăng nhập.
Hình 4-24: Trang đăng nhập
Bảng 4-18: Mô tả thành phần trang đăng nhập

1 txtEmail Textbox Người dùng nhập email dùng để
đăng nhập vào hệ thống.
2 txtPassword Textbox Người dùng nhập mật khẩu dùng để
đăng nhập hệ thống. Mật khẩu được
mã hóa thành ****, có thể chọn
95 | P a g e
vào biểu tượng “mắt” để hiện mật

khẩu.
3 btnLogin Link Nếu nhấn đăng nhập thành công sẽ
chuyển sang giao diện chính của hệ
thống. Nếu nhấn đăng nhập không
thành công người dùng phải nhập
lại email và mật khẩu.
4 Register Link Chuyển hướng giao diện đến trang
đăng ký nếu người dùng chưa có tài
khoản.
4.2.4 Đăng ký
4.2.4.1 Giao diện đăng ký
Đây là giao diện form đăng ký khi chưa tạo tài khoản trên hệ thống.
96 | P a g e
Hình 4-25: Trang đăng ký
Bảng 4-19: Mô tả thành phần trang đăng ký

1 txtFullName Textbox Người dùng nhập họ tên của
mình.
2 txtEmail Textbox Người dùng nhập email của mình
để đăng ký tạo tài khoản mới.
3 txtUsername Textbox Người dùng nhập tên đăng nhập
mà mình muốn.
4 txtPassword Textbox Người dùng nhập mật khẩu của
tài khoản.
97 | P a g e
5 txtConfirmPassword Textbox Người dùng xác nhận lại mật

khẩu của tài khoản.
6 btnSignUp Button Nút đăng ký để xác nhận tạo một
tạo khoản mới với các thông tin
như trên. Nếu đăng ký thành công
thì màn hình sẽ chuyển đến giao
diện đăng nhập của hệ thống.
Nếu đăng ký không thành công,

màn hình sẽ thông báo lỗi, người
dùng phải điền lại thông tin
không tin không hợp lệ.
4.2.5 Trang chủ
4.2.5.1 Giao diện news feed (bản tin)
Đây là giao diện bảng tin của trang chủ, ở đây hiện tất cả bài đăng mới nhất của
những người dùng khác mà người dùng này đang theo dõi.
98 | P a g e
Bảng 4-20: Mô tả thành phần bản tin

1 btnSettingPost Button Hiện thị các tùy chọn cho bài viết.
2 btnLike Button Thể hiện yêu thích đối với bài viết.
3 btnComment Button Xem thông tin chi tiết của bài viết đó
gồm tất cả bình luận công khai trên
bài viết.
4 btnShare Button Chia sẻ lại bài viết.
5 btnSave Button Lưu lại bài viết.
6 btnEmoji Button Thêm các emoji vào bình luận.
7 txtComment Textbox Thêm bình luận vào bài viết.
8 btnPostComment Button Xác nhận đăng bình luận của người
dùng lên bài viết.
9 btnNext Button Xem các hình ảnh còn lại của bài viết.
99 | P a g e
10 linkToUser Dynamic Link Đi đến trang cá nhân của người dùng
khác.
11 linkToProfile Link Đi đến trang cá nhân của mình.
12 listSuggestedUser List View Danh sách các người dùng khác có thế
biết hoặc quan tâm.
12.1 btnFollow Button Theo dõi một tài khoản khác.
12.2 btnSeeMore Button Xem thêm danh sách tài khoản được
đề xuất khác.
4.2.5.2 Giao diện bài viết
Đây là giao diện thông tin chi tiết của một bài viết.
Hình 4-26: Bài viết

100 | P a g e
Bảng 4-21: Mô tả thành phần bài viết

1 btnReply Button Trả lời một bình luận trên bài viết.
2 btnViewReply Button Xem tất các câu trả lời của một bình
luận trên bài viết.
4.2.6 Trang tin nhắn
4.2.6.1 Giao diện tin nhắn
Hình 4-27: Trang tin nhắn
Bảng 4-22: Mô tả thành phần trang tin nhắn
101 | P a g e

1 txtSearchMessage Button Tìm kiếm cuộc trò chuyện trong
tin nhắn.
2 listConversations list Liệt kê danh sách các cuộc trò
chuyện
2.1 btnConversation Button Mở một cuộc trò chuyện.
3 boxMessage Chứa tin nhắn của người dùng
3.1 btnEmoji Button Thêm emoji vào tin nhắn.
3.2 txtMessage TextBox Nhận tin nhắn cần gửi của người
dùng nhập vào.
3.3 btnImg Button Gửi ảnh vào tin nhắn.
3.4 btnSend Button Gửi tin nhắn vào cuộc trò chuyện.
3.5 btnLikeMessage Button Thể hiện yêu thích đối với tin
nhắn.
3.6 btnSettingMessage Button Hiện các chức năng đối với tin
nhắn.
3.7 btnDeleteMessage Button Xóa tin nhắn.
3.8 btnForwardMessage Button Chuyển tiếp tin nhắn đó với người
dùng khác.
3.9 btnCallVideo Button Thực hiện cuộc gọi giữa các người
dùng trong 1 cuộc trò chuyện.
3.10 btnSettingConversation Button Di chuyển qua lại giữa phần cài
đặt cuộc hội thoại và tin nhắn của
cuộc hội thoại.
102 | P a g e
4.2.6.2 Giao diện cài đặt cuộc trò chuyện trong một nhóm
Hình 4-28: Giao diện cài đặt cuộc trò chuyện nhóm
Bảng 4-23: Mô tả thành phần cài đặt cuộc trò chuyện nhóm

1 listMembers ListView Hiện thị các thành viên trong cuộc
trò chuyện.
2 btnRenameConversati Button Đổi tên của cuộc trò chuyên.
103 | P a g e
on
3 btnAddMember Button Thêm thành viên mới vào cuộc trò
chuyện .
4 btnDelete Button Xóa cuộc trò chuyện này.
5 btnBlock Button Chặn người lên hệ này .
6 btnReport Button Báo cáo người liên hệ này.
7 btnExitConversation Button Thoát khỏi cuộc trò chuyện này.

8 btnSettingMember Button Admin của nhóm tùy chỉnh một số
chức năng đối với các thành viên
khác của nhóm.
Giao diện popup sau khi nhấn btnSettingMember
104 | P a g e
Hình 4-29: Popup cài đặt thành viên
Bảng 4-24: Mô tả thành phần Popup xóa thành viên

1 Notification box for Popup box Admin của nhóm tùy chỉnh một số
setting member chức năng đối với các thành viên
khác của nhóm.
1.1 btnRemoveFromGroup Button Admin của nhóm xóa thành viên
khỏi cuộc trò chuyện.
1.2 btnMakeAdmin Button Cấp quyền cho thành viên làm
admin của nhóm.
1.3 btnBlock Button Admin của nhóm chăn thành viên
khác .
1.4 btnCancel Button Tắt hộp thoại mà không thực hiện
105 | P a g e
hành động nào.

4.2.7 Trang cá nhân
4.2.7.1 3.2.6.1 Giao diện trang cá nhân
Hình 4-30: Trang cá nhân
Bảng 4-25: Mô tả thành phần trang cá nhân

1 btnEditProfile Link Chuyển đến màn hình cài đặt của
106 | P a g e
người dùng.
2 listUserInfo List view Các thông tin cơ bản của người
dùng.
3 tabNavigation Tab components Khung điều hướng gồm các
đường dẫn đến những tab khác.
2.1 popupFollowers Button Hiện popup danh sách những
người đang theo dõi người dùng.
2.2 popupFollowing Button Hiện danh sách những tài khoản
mà người dùng đang theo dõi.
4 gridImg Grid View Các hình ảnh, video mà người
dùng đăng tải.
4.1 tabPosts Link Hiện những hình ảnh mà người
dùng đăng tải.
4.2 tabSaved Link Hiện những bài viết đã lưu của
người dùng.
4.3 tabTagged Link Hiện những bài viết mà người
dùng được gắn tên cùng.
107 | P a g e
4.2.7.2 Giao diện followers
Hình 4-31: Popup followers
Bảng 4-26: Mô tả thành phần Popup followers

1 listFollowers List View Danh sách các tài khoản đang theo
dõi người dùng.
1.1 btnClose Button Tắt popup.
1.2 btnRemveFollower Button Xóa tài khoản khỏi danh dách
người theo dõi.
108 | P a g e
Popup khi nhấn remove
Hình 4-32: Popup xác nhận
Bảng 4-27: Mô tả thành phần Popup xác nhận

1 boxConfirm Popup Hộp thoại xác nhận hành động.
1.1 btnRemove Button Xóa tài khoản khỏi danh sách
người theo dõi.
1.2 btnCancel Button Hủy thực hiên.
109 | P a g e
4.2.7.3 Giao diện followings
Hình 4-33: Popup following
Bảng 4-28: Mô tả thành phần Popup following

1 listFollowings List View Danh sách các tài khoản người
dùng đang theo dõi.
1.1 btnClose Button Tắt popup.
1.2 btnFollowing Button Xóa tài khoản khỏi danh dách các
tài khoản đang theo dõi.
110 | P a g e
Popup sau khi nhấn nút following
Hình 4-34: Popup xác nhận
Bảng 4-29: Mô tả thành phần Popup xác nhận

1 boxConfirm Popup Hộp thoại xác nhận hành động.
1.1 btnYes Button Đồng ý xóa tài khoản khỏi danh
sách đang theo dõi.
1.2 btnNo Button Hủy thực hiện hành động.
111 | P a g e
4.2.8 Trang cài đặt
4.2.8.1 Giao diện trang cài đặt tài khoản
Hình 4-35: Trang cài đặt người dùng
Bảng 4-30: Mô tả thành phần trang cài đặt người dùng

1 listSettings List View Danh sách tên của các trường trong cài
đặt tài khoản người dùng.
2 listAccountI List View Các thông tin của tài khoản.
nfo
112 | P a g e
3 lblUsername Label Tên của tài khoản.
4 btnChangeA Button Đổi ảnh đại diện của tài khoản.

vatar
5, 6, 7, 8, txtAccountI TextBox Nhập thông tin người dùng.
9, 10 nfo
113 | P a g e
CHƯƠNG 5: HIỆN THỰC
5.1 Các công nghệ sử dụng
5.1.1 Front-end
HTML5: HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ
Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang
web trên World Wide Web. Nó có thể được trợ giúp bởi các công nghệ như CSS và các
ngôn ngữ kịch bản giống như JavaScript. Các trình duyệt web nhận tài liệu HTML từ một
web server hoặc một kho lưu trữ cục bộ và render tài liệu đó thành các trang web đa
phương tiện. HTML mô tả cấu trúc của một trang web về mặt ngữ nghĩa và các dấu hiệu
ban đầu được bao gồm cho sự xuất hiện của tài liệu.
CSS3: CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử
dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML)
thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục,
màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc,…
Javascript: JavaScript là một ngôn ngữ lập trình website, được tích hợp và nhúng
trong HTML giúp website sống động hơn. JavaScript cho phép kiểm soát các hành vi của
trang web tốt hơn so với khi chỉ sử dụng mỗi HTML. Vậy ứng dụng thực tiễn của
JavaScript là gì? Các slideshow, pop-up quảng cáo và tính năng autocomplete của
Google là những ví dụ dễ thấy nhất cho bạn, chúng đều được viết bằng JavaScript.
ReactJS: ReactJS là một thư viện Javascript dùng để xây dựng giao diện người
dùng. Được tạo ra bởi Facebook, React càng ngày càng được sử dụng rộng rãi, đặc biệt là
114 | P a g e
trong các trang web đòi hỏi yêu cầu cao về giao diện với các khả năng nổi bật như nhanh,
dễ học, code ngắn và tái sử dụng tốt.
5.1.2 Back-end
NodeJS –ExpressJS: NodeJS là một nền tảng mã nguồn mở chạy trên server-side và
Networking applications. Được viết bằng ngôn ngữ JavaScript và có thể chạy trên các hệ
điều hành như Mac OS X, Windows, Linux, FreeBSD, IBM i. Node JS cung cấp một
kiến trúc event-driven architecture và là một non-blocking I/O API băng thông của một
ứng dụng và có khả năng mở rộng. Node JS cho phép tạo ra những máy chủ web và các
công cụ sử dụng ngôn ngữ JavaScript cùng module. Các module của NodeJS đã giúp việc
viết code đơn giản hơn, giảm đi độ phức tạp cho việc viết ứng dụng trên server. Sử dụng
Google V8 JavaScript engine để chạy code và có một lượng lớn module được viết bằng
Javascript. Node JS chạy được trên Server Apache và IIS. Đặc biệt Node JS được chọn
làm nền tảng phát triển của Microsoft, Yahoo, Walmart, Groupon, SAP, LinkedIn,
Rakuten, Paypal, Voxer và GoDaddy. Áp dụng cho các sản phẩm có lượng truy cập lớn,
cần mở rộng nhanh, cần đổi mới công nghệ, hoặc tạo ra các dự án Startup nhanh nhất có
thể. Cung cấp các thư viện cần thiết như Express, Mongoose, Body-parser, ejs, Multer,
… Express giúp tương tác giữa Server và Client. Multer giúp upload và lưu file (Ảnh,
video, …).
Socket.io: là một thư viện JavaScript hướng sự kiện cho các ứng dụng web thời gian
thực. Nó cho phép giao tiếp hai chiều giữa các máy khách và máy chủ web. Bao gồm hai
phần: thư viện phía máy khách (socket.io-client) chạy trong trình duyệt và thư viện phía
máy chủ (socket.io) cho Node.js.
115 | P a g e
5.1.3 Database
MongoDB: là một hệ quản trị cơ sở dữ liệu NoSQL mã nguồn mở đa nền tảng viết
bằng C++. Bản ghi trong MongoDB được lưu trữ dạng một dữ liệu văn bản (Document),
là một cấu trúc dữ liệu bao gồm các cặp giá trị và trường tương tự như các đối tượng
JSON. MongoDB được phát triển bởi MongoDB Inc. dưới dạng giấy phép Server Side
Public License (SSPL).
Mongoose: là một framework JavaScript thường được sử dụng trong ứng dụng
Node.js với database là MongoDB.
5.2 Cài đặt và kiểm thử
116 | P a g e
STT Nhóm chức năng Mức độ Ghi chú

hoàn thành
1 Quản lý user 90% Hoàn thành cơ bản các chứ năng như
Đăng ký, Đăng nhập, có sử dụng JWT
Token, Redux Persist,…
Cho phép người dùng thay đổi các

thông tin cá nhân, hình đại diện,…
Chưa xác thực thông tin người dùng.

2 Quản lý post 80% Hoàn thành các chức năng: Đăng bài
post, like post, bình luận bài post, gửi
post dưới dạng tin nhắn cho bạn bè,
sửa post, xóa post,…
3 Quản lý tin nhắn 95% Hoàn thành các chức năng: tạo cuộc trò
chuyện, thêm thành viên, rời cuộc trò
chuyện, gửi tin nhắn, xóa tin nhắn,
chuyển tiếp tin nhắn, thả tim tin nhắn,
gửi hình ảnh, video, emoji,…
Tính năng video call chưa hoàn chỉnh.

4 Quản lý follow 100% Hoàn thành các chức năng: follow,
unfollow người dùng, hiện danh sách
following/followers,…
5 Quản lý thông báo 95% Hoàn thành các chức năng: thông báo
realtime, lưu trữ thông báo trong
database, di chuyển đến bài post/trang
117 | P a g e
cá nhân khi nhấn vào thông báo, đánh

dấu thông báo chưa xem/đã xem, hiện
thị số lượng thông báo mới…
Chưa có popup hiện thị nội dung thông

báo mới.
6 Quản lý comment
của bài post
118 | P a g e
CHƯƠNG 6: ĐÁNH GIÁ VÀ KẾT LUẬN
6.1 Nhận xét
6.1.1 Quá trình làm việc
Sử dụng các công cụ:
- Công cụ quản lý dự án: Trello
Hình 6-36: Quá trình làm việc ở Trello
(Link: https://trello.com/b/dPh39FfG/ie213)
- Công cụ quản lý dự án và phiên bản code: Github
119 | P a g e
Hình 6-37: Giao diện quản lý source code Backend trên Github
(Link: https://github.com/sonlam137216/SocialNetwork_BE)
Hình 6-38: Giao diện quản lý source code Frontend trên Github
(Link: https://github.com/giathai1505/SocialMediaWebSite)
120 | P a g e
- Công cụ thiết kế giao diện: Figma
Hình 6-39: Giao diện thiết kế giao diện trên Figma
(Link: https://www.figma.com/proto/I66ZPLX5xD1gkOZrKEUjpO/ig)
- Công cụ quản lý hình ảnh: Cloudinary
121 | P a g e
Hình 6-40: Giao diện quản lý hình ảnh của trang web
6.1.2 Kết quả đạt được
Xây dựng phần mềm thỏa mãn một số yêu cầu và biểu mẫu đề ra ban đầu.
Hiểu được và vận dụng các kiến thức được học trên lớp về các quy trình phát triển
phần mềm, các kiến thức lập trình từ CSDL Nosql (MongoDB), Backend (Express -
NodeJS), Frontend (ReactJS) đến các kiến thức khác như cách deploy web lên Heroku,
Netify…
Biết cách sử dụng 1 số công cụ, phần mềm phục vụ cho việc lập trình, làm việc
chung như Trello, Github, Figma, Cloudinary.
Các thành viên trong nhóm có cơ hội học tập, làm việc chung nhiều hơn. Biết cách
phối hợp làm việc nhóm và sử dụng các công cụ để làm việc từ xa.
122 | P a g e
6.1.3 Ưu điểm
Về việc tổ chức quản lý nhóm:
- Các thành viên tích cực tham gia đóng góp ý kiến cũng như trao đổi trong quá
trình thực hiện đồ án.
- Nhóm hỗ trợ nhau khá tốt, các thành viên sẵn sàng hướng dẫn nhau để cùng tiến
bộ.
- Việc quản lý công việc nhóm được thực hiện một cách dễ dàng hơn khi sử dụng
công cụ Trello.
- Công việc được phân chia khá phù hợp với định hướng của các thành viên.
Về sản phẩm:
- Phần mềm xây dựng đáp ứng các yêu cầu cơ bản của một trang mạng xã hội, thỏa
mãn các yêu cầu và biểu mẫu trình bày trên.
- Giao diện trực quan, dễ sử dụng với hầu hết bộ phận người dùng.
- Có một số hiệu ứng đáp ứng trải nghiệm sử dụng cho người dùng.
- Hệ thống cần đăng nhập trước khi sử dụng, đồng thời mật khẩu được mã hóa trong
quá trình đăng nhập cũng như lưu xuống cơ sở dữ liệu, đảm bảo yêu cầu về bảo
mật cho người dùng.
6.1.4 Hạn chế
Về việc tổ chức quản lý nhóm:
- Nhóm bước đầu đã thực hiện theo các bước của quy trình thác nước cải tiến, tuy
nhiên nhóm vẫn chưa hoàn toàn ứng dụng và thực hiện theo mô hình này.
123 | P a g e
- Đôi khi các thành viên chưa hoàn thành công việc đúng tiến độ do các lý do khách
quan/chủ quan.
- Đôi khi công việc được phân chia không đồng đều, do trình độ của các thành viên
hơi chênh lệch.
Về sản phẩm:
- Sản phẩm chưa được thực hiện responsive.

- Một số chức năng chưa hoàn thiện như: call, video call, report, …
- Chưa có trang riêng/chức năng riêng cho admin.
- Chưa thực hiện tối ưu source code cũng như chưa thực hiện một số bước sau khi
xây dựng trang web như seo,…
6.2 Hướng phát triển
Do thời gian thực hiện đồ án là có hạn, nhóm đã hoàn thành được những kết quả
trình bày trên. Trong tương lai, nhóm đề ra một số hướng phát triển để trang web tiếp tục
được duy trì và hoàn thiện hơn từng ngày.
Dưới đây là hướng phát triển của nhóm chúng em:
- Tối ưu giao diện bằng cách thiết kế giao diện chuyên nghiệp hơn và thực hiện
responsive cho trang web.
- Thêm các yếu tố tạo nên thương hiệu cá nhân cho trang web để có thể đưa trang
web vào dự án thực trong cuộc sống.
- Hoàn thiện chức năng call video.
- Thêm chức năng report người dùng hoặc bài đăng không hợp lệ/vi phạm.
- Hoàn thiện, nâng cao các chức năng đã xây dựng.
- Tối ưu source code để giảm thời gian chờ, từ đó nâng cao trải nghiệm khi sử dụng
trang web của người dùng.
124 | P a g e
- Nâng cao tính bảo mật và quyền riêng tư của người dùng.
- Thêm chức năng đăng tải video, gắn thẻ người dùng khác vào bài viết, lưu bài
viết.
- Tiến hành các phương pháp tối ưu hóa công cụ tìm kiếm để trang web có thứ hạng
cao trong kết quả trả về của các trình duyệt.
125 | P a g e
TÀI LIỆU THAM KHẢO
1. NodeJS Documentation. Lấy từ https://nodejs.org/en/docs/ [truy cập lần cuối:

23/05/2022]
2. ReactJS Documentation. Lấy từ https://reactjs.org/docs/getting-started.html
[truy cập lần cuối: 23/05/2022]
3. Json Web Token Introduction. Lấy từ https://jwt.io/introduction [truy cập lần
cuối: 23/05/2022]
4. Socket.IO Introduction. Lấy từ https://socket.io/docs/v4/ [truy cập lần cuối:
23/05/2022]
5. MongoDB Documentation. Lấy từ https://www.mongodb.com/docs/ [truy cập
lần cuối: 23/05/2022]
6. Facebook. Lấy từ https://www.facebook.com/ [truy cập lần cuối: 23/05/2022]
7. Instagram. Lấy từ https://www.instagram.com/ [truy cập lần cuối: 23/05/2022]
126 | P a g e

KTPTHT Web

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

KTPTHT Web

Uploaded by

Copyright:

Available Formats

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

XÂY DỰNG WEBSITE MẠNG XÃ HỘI

ĐỒ ÁN MÔN PHÁT TRIỂN HỆ THỐNG WEB

GVHD: Ths. Võ Tấn Khoa

□□ Tp. Hồ Chí Minh, 03/2022 □□

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

……., ngày……...tháng……năm 2022

Người nhận xét

BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN

Họ và tên MSSV Phân công Đánh giá

Phạm Hoàng Khang 19521668

Ngô Gia Thái 19522187

Trần Thị Thanh Tuyền 19522503

Võ Đoàn Kim Như 19521972

Lâm Trường Sơn 19522133

DANH MỤC HÌNH

Hình 1-1: Mô hình thác nước cải tiến......................................................................22

Hình 2-1: Giao diện màn hình đăng nhập................................................................25

Hình 2-2: Giao diện màn hình đăng ký....................................................................26

Hình 2-3: Giao diện màn hình trang cá nhân...........................................................26

Hình 2-4: Giao diện màn hình chính của Facebook.................................................27

Hình 2-6: Giao diện trang chủ của instagram..........................................................29

Hình 2-7: Giao diện trang cá nhân của instagram....................................................29

Hình 2-8: Giao diện màn hình chat của instagram...................................................30

Hình 3-1: Mô hình kiến trúc hệ thống.....................................................................36

Hình 3-2: Sơ đồ Usecase tổng quát..........................................................................39

Hình 3-3: Sơ đồ Usecase quản lý người dùng..........................................................43

Hình 3-4: Sơ đồ Usecase quản lý bài đăng..............................................................48

Hình 3-5: Sơ đồ Usecase quản lý tin nhắn...............................................................58

Hình 4-1: Sơ đồ lớp tổng thể...................................................................................80

Hình 4-2: Các lớp chính..........................................................................................82

Hình 4-3: Cơ sở dữ liệu...........................................................................................83

Hình 4-4 Sơ đồ liên kết các màn hình......................................................................87

Hình 4-5: Thanh header...........................................................................................88

Hình 4-6: Thanh tìm kiếm.......................................................................................90

Hình 4-7: Thêm bài viết...........................................................................................91

Hình 4-8: Giao diện sau khi chọn ảnh.....................................................................92

Hình 4-9: User navigation.......................................................................................93

Hình 4-10: Trang đăng nhập....................................................................................94

Hình 4-11: Trang đăng ký........................................................................................96

Hình 4-13: Bài viết..................................................................................................99

Hình 4-14: Trang tin nhắn.....................................................................................100

Hình 4-17: Popup cài đặt thành viên......................................................................104

Hình 4-18: Trang cá nhân......................................................................................105

Hình 4-19: Popup followers...................................................................................107

Hình 4-20: Popup xác nhận...................................................................................108

Hình 4-21: Popup following..................................................................................109

Hình 4-22: Popup xác nhận...................................................................................110

Hình 4-23: Trang cài đặt người dùng.....................................................................111

Hình 6-1: Quá trình làm việc ở Trello...................................................................118

Hình 6-4: Giao diện thiết kế giao diện trên Figma.................................................120

DANH MỤC BẢNG

Bảng 3-1: Bảng chú giải sơ đồ Usecase...................................................................37

Bảng 3-2: Bảng mô tả Actors..................................................................................38

Bảng 3-3: Bảng mô tả Usecase................................................................................39

Bảng 3-4: Danh sách yêu cầu tiện dụng...................................................................75

Bảng 3-5: Danh sách yêu cầu hiệu quả....................................................................76

Bảng 4-1: Collection USER.....................................................................................83

Bảng 4-2: Collection POST.....................................................................................84

Bảng 4-3: Collection COMMENT..........................................................................85

Bảng 4-4: Collection CONVERSATION................................................................85

Bảng 4-5: Collection MESSAGE............................................................................86