Ứng Dụng Nhắn Tin Real-Time Fun Chat.pdf

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI

LỜI NÓI ĐẦU

Hiện nay, với sự phát triển của công nghệ, ứng dụng chat trên nền web đang trở thành một phần quan trọng của cuộc sống hàng ngày Trên thị trường hiện nay, có rất nhiều ứng dụng chat trên nền web được sử dụng phổ biến, như Facebook Messenger, WhatsApp, Slack, Skype, và Telegram Các ứng dụng này cung cấp cho người dùng các tính năng chat real-time, chia sẻ tập tin, gửi tin nhắn thoại và video, và nhiều tính năng khác

Tuy nhiên, những ứng dụng chat này thường được phát triển bởi các công ty lớn và được sử dụng rộng rãi trên toàn cầu Điều này đôi khi gây ra khó khăn cho những người muốn phát triển ứng dụng chat trên nền web nhưng không có sự hỗ trợ của các công ty lớn Ngoài ra, việc tìm hiểu và sử dụng các công nghệ phổ biến như MERN stack để phát triển ứng dụng chat trên nền web cũng cần nhiều thời gian và nỗ lực

Vì vậy, việc phát triển một ứng dụng chat trên nền web sẽ giúp cho những người muốn phát triển ứng dụng chat trên nền web một cách dễ dàng và nhanh chóng hơn Ngoài ra, ứng dụng này sẽ có tính năng chat real-time, gửi tin nhắn và các tính năng khác giúp cho người dùng có thể trao đổi thông tin một cách dễ dàng và hiệu quả.

I.Giới thiệu về ứng dụng chat real-time Fun Chat

Fun Chat là một ứng dụng chat real-time được phát triển bằng ngôn ngữ lập trình JavaScript, sử dụng thư viện ReactJS và dịch vụ Firebase để xây dựng Ứng dụng này được tạo ra để cung cấp trải nghiệm trò chuyện trực tiếp giữa người dùng, cho phép họ gửi và nhận tin nhắn trong thời gian thực.

1.Ngôn ngữ lập trình

- Fun Chat được viết bằng JavaScript, một ngôn ngữ lập trình phổ biến và mạnh mẽ cho phát triển ứng dụng web JavaScript cho phép tạo ra các ứng dụng tương tác trên trình duyệt.

2.Công cụ sử dụng

- ReactJS: ReactJS là một thư viện JavaScript phát triển bởi Facebook Nó giúp phát triển giao diện người dùng (UI) của ứng dụng dễ dàng hơn bằng cách sử dụng các thành phần (components) có thể tái sử dụng React cũng hỗtrợ việc tạo ứng dụng real-time thông qua cơ chế cập nhật trạng thái và giao diện người dùng khi dữ liệu thay đổi.

- Firebase: Firebase là một nền tảng phát triển ứng dụng di động và web do Google phát triển Firebase cung cấp các dịch vụ quản lý dữ liệu thời gian thực, xác thực người dùng, lưu trữ dữ liệu, và nhiều tính năng khác Firebasecó thể được sử dụng để lưu trữ dữ liệu tin nhắn và hỗ trợ chức năng chat real-time thông qua cơ chế đẩy dữ liệu (real-time database).

1 Đăng nhập: Người dùng có thể đăng nhập vào ứng dụng bằng tài khoản

google hoặc facebook

2 Gửi tin nhắn: Người dùng có thể gửi tin nhắn văn bản cho các thành viên

trong nhóm chat Tin nhắn được gửi đi và hiển thị ngay lập tức cho các thành viên khác trong nhóm.

3 Hiển thị danh sách chat: Ứng dụng hiển thị danh sách các nhóm chat mà

người dùng đã tham gia hoặc được mời tham gia Người dùng có thể xem và chọn một nhóm chat để tham gia hoặc chuyển đổi giữa các nhóm chat.

4 Xem tin nhắn: Người dùng có thể xem tin nhắn đã được gửi trong một

nhóm chat cụ thể Tin nhắn sẽ được hiển thị theo thứ tự thời gian và người gửi, giúp người dùng theo dõi các cuộc trò chuyện trong nhóm.

5 Tạo nhóm chat: Người dùng có thể tạo nhóm chat mới và mời các thành

viên khác tham gia Người tạo nhóm có quyền chỉ định các thành viên là quản trị viên hoặc thành viên thông thường.

6 Thêm thành viên: Quản trị viên của nhóm chat có quyền thêm thành viên

mới vào nhóm Quá trình này thường bao gồm mời thành viên và chờ phản hồi từ thành viên mời.

7 Tìm kiếm người dùng: Người dùng có thể tìm kiếm người dùng khác trong

hệ thống bằng cách nhập thông tin tìm kiếm, ví dụ như tên người dùng hoặc địa chỉemail Hệ thống sẽ tìm kiếm và hiển thị kết quả phù hợp.

8 Bảo mật và quyền truy cập: Ứng dụng cung cấp tính năng bảo mật bằng

cách xác thực người dùng, đảm bảo rằng chỉ những người dùng đã đăng nhập và cóquyền truy cập mới có thể tham gia và truy cập vào các nhóm chat.

9 Thông báo realtime: Ứng dụng nhóm chat realtime sử dụng cơ chế thông

báo realtime để thông báo cho người dùng về các tin nhắn mới, lời mời tham gia nhóm chat và các hoạt động khác trong nhóm.

II Phân tích thiết kế hệ thống

1 Sơ đồ Usecase tổng quan

2.Sơ đồ Usecase phân rã

2.1.Sơ đồ Usecase Login

STTThực hiện

bởiHành động

1 Người dùng Người dùng chọn hình thức đăngnhập bằng Google hoặc Facebook2 Hệ thống Hiển thị giao diện đăng nhập và

yêu cầu người dùng nhập thôngtin đăng nhập, bao gồm tên ngườidùng và mật khẩu

3 Người dùng Nhập thông tin đăng nhập vào cáctrường tương ứng trên giao diện4 Người dùng Nhấn nút “Đăng nhập”

5 Hệ thống Nhận thông tin đăng nhập và tiến

hành xác thực thông tin

6 Hệ thống Nếu thông tin đăng nhập hợp lệ,hệ thống cho phép người dùngtruy cập vào ứng dụng

7 Hệ thống Hệ thống trả về kết quả xác thựccho người dùng

8 Hệ thống Quy trình đăng nhập kết thúc

Luồng sự kiệnthay thế

STTThực hiệnbởi

Hành động

5a Hệ thống Nếu thông tin đăng nhập khônghợp lệ, hệ thống từ chối truy cậpvà trả về thông báo lỗi cho ngườidùng

7a Hệ thống Nếu xảy ra lỗi trong quá trình xácthực thông tin, hệ thống trả vềthông báo lỗi cho người dùng

Hậu điều kiện Người dùng đã được xác thực và có quyền truy cập vàoứng dụng

2.2.Sơ đồ Usecase Send Message

2 Hệ thống Hiển thị giao diện nhắn tin vàdành sách các cuộc trò chuyện3 Người dùng Chọn cuộc trò chuyện muốn gửi

tin nhắn

4 Hệ thống Hiển thị giao diện nhắn tin chocuộc trò chuyện đã được chọn5 Người dùng Nhập nội dung tin nhắn vào

trường tin nhắn trên giao diện6 Người dùng Nhấn nút “Gửi” để gửi tin nhắn7 Hệ thống Nhận tin nhắn từ người dùng và

lưu tin nhắn vào cuộc trò chuyệntương ứng

8 Hệ thống Hiển thị tin nhắn mới nhất lêngiao diện cuộc trò chuyện9 Hệ thống Quy trình nhắn tin kết thúc

Luồng sự kiệnthay thế

STTThực hiệnbởi

Hành động

3a Hệ thống Nếu người dùng chưa đăng nhập,hệ thống yêu cầu người dùngđăng nhập trước khi gửi tin nhắn6a Hệ thống Nếu người dùng không nhập nội

dung tin nhắn, hiển thị thông báolỗi cho người dùng

7a Hệ thống Nếu xảy ra lỗi trong quá trình lưutin nhắn, hệ thống hiển thị thôngbáo lỗi cho người dùng

Hậu điều kiện Tin nhắn đã được gửi và hiển thị lên giao diện cuộc tròchuyện

2.3 Sơ đồ UC Groupchat

STTThực hiện

bởiHành động

1 Người dùng Người dùng khởi động quy trìnhnhóm chat bằng cách chọn tuỳchọn tạo nhóm chat

2 Hệ thống Hiển thị giao diện tạo nhóm chat3 Người dùng Nhập thông tin nhóm chat, bao

gồm tên nhóm và danh sách thànhviên ban đầu

4 Người dùng Nhấn nút “Tạo nhóm” để tạo

nhóm chat mới

5 Hệ thống Tạo nhóm chat mới và gán ngườidùng tạo nhóm làm quản trị viêncủa nhóm

6 Hệ thống Hiển thị danh sách thành viên vàcác tính năng quản lý nhóm7 Người dùng Có thể thực hiện các tác vụ quản

lý nhóm như thêm thành viên, xoáthành viên và đổi tên nhóm8 Người dùng Có thể gửi tin nhắn trong nhóm

chat bằng cách nhập nội dung tinnhắn và nhấn nút “Gửi”

9 Hệ thống Tin nhắn được gửi và hiển thị lêngiao diện nhóm chat

10 Hệ thống Quy trình nhắn tin kết thúc

Luồng sự kiện

thay thếSTTThực hiệnbởiHành động

2a Hệ thống Nếu người dùng chưa đăng nhập,hệ thống yêu cầu người dùngđăng nhập trước khi thực hiện quytrình nhóm chat

4a Hệ thống Nếu người dùng không cung cấpđủ thông tin nhóm chat, hệ thốngtừ chối tạo nhóm và hiển thị thôngbáo lỗi

3.Sơ đồ trình tự

Sơ đồ trình tự tổng quan:

4 Thiết kế cơ sở dữ liệu

Cơ sở dữ liệu được lựa chọn là hệ cơ sở dữ liệu không quan hệ(No-SQL) cụ thể ở đây là cơ sở dữ liệu Firebase Firestore.

4.1Mô hình dữ liệu

Có ba mô hình dữ liệu chính: User, Room, và Message.

Tên thuộc tính Kiểu Ý nghĩa

user.id String Id của bản ghi được sinh tự độngdisplay.name String Tên người dùng

email String Email của người dùng

createdAt Date Thời điểm người dùng được tạo, giúp theo dõithời gian người dùng gia nhập hệ thống.photoUrl String URL của ảnh đại diện của người dùng

Bảng 4.1 Mô tả chi tiết thông tin bảng User

Tên thuộc tính Kiểu Ý nghĩa

text String Nội dung của tin nhắn

displayName String Tên hiển thị của người gửi tin nhắn.photoURL String URL của ảnh đại diện của người gửi tin nhắncreatedAt Date Thời điểm tin nhắn được tạo

readBy ObjectId Ai đã đọc tin nhắn nàyBảng 4.2 Mô tả chi tiết thông tin bảng Message

Tên thuộctính

- Lưu trữ thông tin Người dùng:

● Thông tin của mỗi người dùng được lưu trữ trong một tài liệu của bảng users trong Firestore.

● Mỗi tài liệu chứa các trường như uid, displayName, email, photoURL,và created_at.

- Lưu trữ thông tin phòng chat:

● Thông tin về mỗi phòng chat được lưu trữ trong một tài liệu của bảng rooms trong Firestore.

● Mỗi tài liệu chứa các trường như room_id, name, description, created_at, và members.

Firebase SDK cung cấp các phương thức linh hoạt để tương tác , thực hiện các truyvấn với Firestore từ phía client của bạn, các hàm getFirestore, collection, query,where, getDocs là một số trong những hàm cơ bản giúp xây dựng các truy vấn vàtương tác với Firestore.

8 Thiết kế gói

Ứng dụng Chat được xây dựng trên một mô hình kiến trúc React cổ điển

Mô tả chi tiết

- Component: Thư mục này chứa tất cả các thành phần React

● ChatWindow.js: Thành phần chịu trách nhiệm về hiển thị cửa sổ trò chuyện và xử lý tương tác người dùng.

● Message.js: Thành phần hiển thị một tin nhắn trong cửa sổ trò chuyện.

● RoomList.js: Thành phần hiển thị danh sách các phòng chat và cung cấp chức năng thêm phòng mới.

● Sidebar.js: Thành phần chứa UserInfo và RoomList, đại diện cho thanh bên của ứng dụng.

● UserInfo.js: Thành phần hiển thị thông tin người dùng và nút đăng xuất.

● AddRoomModal.js: Thành phần hiển thị modal để thêm phòng mới.- Context: Thư mục này chứa các Context Providers để quản lý trạng thái toàn

● config.js: Cấu hình Firebase.

● services.js: Các hàm dịch vụ liên quan đến Firebase như thêm dữ liệu, tạo từ khóa, vv.

- Hook: Chứa các custom hook sử dụng trong ứng dụng

● useFirestore.js: Hook để lắng nghe dữ liệu từ Firestore.- Các Component khác

● index.js: Chứa các hàm tiện ích.

● App.js: Component chính của ứng dụng.

● index.js: File khởi đầu của ứng dụng.

9 Thiết kế giao diện

Dự án sử dụng React để xây dựng giao diện người dùng (UI) React là một thư viện JavaScript phổ biến được sử dụng để phát triển các giao diện người dùng tương tác Dưới đây là mô tả tổng quan về cách giao diện người dùng được xây dựng trong dự án:

- React Components:

● Giao diện người dùng được chia thành các thành phần React.● Mỗi thành phần đại diện cho một phần cụ thể của giao diện.● Các thành phần này có thể được sử dụng và tái sử dụng ở nhiều nơi

● Ant Design cung cấp một bộ công cụ UI đồ sộ với các thành phần nhưnút, biểu mẫu, thông báo, menu, và nhiều thành phần khác.

● Việc sử dụng Ant Design giúp tạo ra giao diện người dùng chuyên nghiệp, hiện đại và đồng nhất trong toàn bộ ứng dụng.

Tổng cộng, việc sử dụng React Components, Styled Components và Ant Design trong dự án giúp tối ưu hóa quá trình phát triển, cung cấp mã nguồn dễ bảo trì, và tạo ra giao diện người dùng thân thiện và chất lượng.

9.1Mô tả chi tiết