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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (941.24 KB, 19 trang )

<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

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

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

<b> LỜI NÓI ĐẦU</b>

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. Ngồ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. Ngồ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ả.

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

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

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.

<b>1.Ngơn ngữ lập trình </b>

- 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.

- 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. <b>Đăng nhập: Người dùng có thể đăng nhập vào ứng dụng bằng tài khoản </b>

google hoặc facebook

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

2. <b>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 </b>

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. <b>Hiển thị danh sách chat: Ứng dụng hiển thị danh sách các nhóm chat mà </b>

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. <b>Xem tin nhắn: Người dùng có thể xem tin nhắn đã được gửi trong một </b>

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. <b>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 </b>

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. <b>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 </b>

mới vào nhóm. Q 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. <b>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 </b>

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>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 </b>

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. <b>Thơng báo realtime: Ứng dụng nhóm chat realtime sử dụng cơ chế thông </b>

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.

<b>II. Phân tích thiết kế hệ thống</b>

<b>1. Sơ đồ Usecase tổng quan</b>

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>2.Sơ đồ Usecase phân rã</b>

2.1.Sơ đồ Usecase Login

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>STTThực hiện</b>

<b>bởiHành động</b>

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

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

<b>Luồng sự kiệnthay thế</b>

<b>STTThực hiệnbởi</b>

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 q trình xácthực thơng tin, hệ thống trả vềthông báo lỗi cho người dùng

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

<b>2.2.Sơ đồ Usecase Send Message</b>

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

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

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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

<b>Luồng sự kiệnthay thế</b>

<b>STTThực hiệnbởi</b>

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

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

<b>2.3. Sơ đồ UC Groupchat</b>

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

<b>STTThực hiện</b>

<b>bởiHành động</b>

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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

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, xố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

<b>Luồng sự kiện</b>

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

<b>3.Sơ đồ trình tự</b>

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

<b>4. Thiết kế cơ sở dữ liệu</b>

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

Có ba mơ hình dữ liệu chính: User, Room, và Message<small>.</small>

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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

Tên thuộctính

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

<small>●</small> 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.

<small>●</small> 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:

<small>●</small> 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.

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

<small>●</small> 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.

<b>8. Thiết kế gói</b>

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

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

<small>●</small> 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.

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

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

<small>●</small> 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.

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

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

<small>●</small> 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 tồn

<small>●</small> config.js: Cấu hình Firebase.

<small>●</small> 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

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

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

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

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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

<b>9. Thiết kế giao diện</b>

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

● 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 q 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.

</div>