Đồ án tốt nghiệp - Thiết kế và xây dựng mạng xã hội nhắn tin

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP. HCM
KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

BÁO CÁO ĐỒ ÁN

KHÓA LUẬN TỐT NGHIỆP
ĐỀ TÀI:
THIẾT KẾ VÀ XÂY DỰNG
MẠNG XÃ HỘI NHẮN TIN
GVHD: PGS.TS. Hoàng Văn Dũng
SVTH:
Trần Nhật Hùng

19110213

Trần Hữu Thanh

19110007

Tp. HCM, tháng 5 năm 2023

LỜI CẢM ƠN
Lời đầu tiên nhóm xin phép được gửi lời cảm ơn chân thành và sâu sắc nhất
đến với Khoa Đào Tạo Chất Lượng Cao – Trường Đại Học Sư Phạm Kỹ Thuật Thành
Phố Hồ Chí Minh đã tạo điều kiện cho nhóm được học tập, phát triển nền tảng kiến
thức sâu sắc và thực hiện đề tài này.
Bên cạnh đó, nhóm cũng xin gửi lời cảm ơn chân thành nhất đến thầy Hoàng
Văn Dũng, người đã tận tình chỉ bảo và hướng dẫn nhóm thực hiện đề tài này.
Mặc dù nhóm đã rất cố gắng để hoàn thành một cách tốt nhất, nhưng do thời
gian hạn hẹp, khả năng còn hạn chế nên khó tránh khỏi việc thiếu sót trong bài báo
cáo. Nhóm rất mong nhận được sự thông cảm, góp ý cũng như đóng góp của thầy để
đề tài hoàn thiện hơn, để có thể phát triển hơn phục vụ cho tương lai.
Nhóm xin chân thành cảm ơn.

Nhóm thực hiện
Trần Nhật Hùng – 19110213
Trần Hữu Thanh – 19110007

2

MỤC LỤC
LỜI CẢM ƠN................................................................................................................2
MỤC LỤC..................................................................................................................... 3
DANH SÁCH HÌNH ẢNH........................................................................................... 5
DANH SÁCH BẢNG.................................................................................................... 7
KẾ HOẠCH THỰC HIỆN.......................................................................................... 9
CHƯƠNG 1: PHẦN MỞ ĐẦU.................................................................................. 11
1.1. TÍNH CẤP THIẾT CỦA ĐỀ TÀI....................................................................11
1.2. ĐỐI TƯỢNG NGHIÊN CỨU..........................................................................11
1.3. PHẠM VI NGHIÊN CỨU............................................................................... 11
1.4. KẾT QUẢ DỰ KIẾN ĐẠT ĐƯỢC................................................................. 12
CHƯƠNG 2: CƠ SỞ LÝ THUYẾT.......................................................................... 13
2.1. MERN [3].........................................................................................................13
2.2. MÃ OTP [6].................
...

...
er

Kết quả dự kiến

Con trỏ xuống dòng trong input

Kết quả thực tế

Như mong đợi = Pass

Bảng 52. Test case kiểm thử Shift + Enter
Test Case ID

Chatala_TC_14

Mô tả

Kiểm thử giao diện sidebar khi nhiều room chat

Các bước kiểm thử

3. Add friend, tạo 3 room chat
4. Tạo thêm 20 room chat

Kết quả dự kiến

Ẩn scroll bar với 3 room chat, sidebar hiển thị 100% trong
màn hình, hiện scroll bar trong sidebar

Kết quả thực tế

Như mong đợi = Pass

Bảng 53. Test case kiểm thử giao diện sidebar

78

CHƯƠNG 6: TỔNG KẾT
6.1.
-

KẾT QUẢ ĐẠT ĐƯỢC
Trải qua 2 tháng hơn để tìm hiểu về công nghệ mới, tìm hiểu về lĩnh vực ứng
dụng mới. Nhóm đã thành công trong việc tìm hiểu và phát triển ứng dụng
realtime, cụ thể là webchat với các tính năng cốt lõi của một webchat thông
thường. Từ đó nhóm cũng được tham khảo thêm nhiều về cách cấu hình cấu
trúc của một dự án MERN và workflow giữa client và server.

-

Không chỉ thế nhóm còn được tìm hiểu thêm về các công cụ hỗ trợ cho việc
code dễ dàng và nhất quán hơn như Redux, Tailwind, Styled Component,...

6.2.

ƯU ĐIỂM

-

Dùng signed upload để gửi file giúp tăng độ bảo mật.

-

Set cookie token từ server với option Secure và HttpOnly nhằm chống đăng
nhập bất hợp pháp.

-

Giao diện dễ sử dụng, trực quan với người dùng mới.

-

Có các tính năng tăng trải nghiệm người dùng (Gửi emoji, Mention, Reply,
Call, Đổi ngôn ngữ).

6.3.

NHƯỢC ĐIỂM

-

Giao diện chưa bắt mắt, trải nghiệm chưa mượt mà.

-

Tốc độ tải còn hạn chế, xử lý load data còn kém.

6.4.
-

HƯỚNG PHÁT TRIỂN
Với việc dự án hiện tại chỉ có những tính năng cốt lõi của một webchat thì
nhóm dự định sẽ mở rộng phạm vi của ứng dụng như là thêm các tính năng
đăng bài viết, bình luận, biểu cảm, đăng story,...

-

Cải thiện hiệu năng của ứng dụng bằng cách điều chỉnh workflow, tối ưu các
thành phần của app, cải thiện chất lượng đường truyền khi call,…

79

CHƯƠNG 7: TÀI LIỆU THAM KHẢO
[1]

ReactJS: reactjs.org
NextJS: nextjs.org
Type: www.typelang.org

[2]

Tài liệu về NodeJS: w3schools.com/nodejs/default.asp
Tài liệu về Express: expressjs.com

[3]

MERN: www.youtube.com/watch?v=98BzS5Oz5E4

[4]

MongoDB: www.mongodb.com

[5]

JWT &amp Cookies: topdev.vn/blog/jwt-la-gi/, itnavi.com.vn/blog/cookie-la-gi

[6]

Phone Auth Firebase: firebase.google.com/docs/auth/android/phone-auth

[7]

SocketIO: socket.io

[8]

Redux &amp Redux-Toolkit: redux.js.org

[9]

Cloudinary upload file: cloudinary.com

[10]

VideoSDK: Video SDK Documentation | Video SDK

80