Đồ án cơ sở 4 bssenger chat real time

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.. Vì vậy, việc phát triển một ứng dụng chat trên nền web sẽ giúp cho

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

🙠🕮🙢

ĐỒ ÁN CƠ SỞ 4

BSSENGER CHAT REAL-TIME

Trần Gia Bảo Mã SV: 21IT466 Giảng viên hướng dẫn: Ths.Dương Thị Mai Nga

Đà Nẵng, tháng 12 năm 2023

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN

🙠🕮🙢

ĐỒ ÁN CƠ SỞ 4

BSSENGER CHAT REAL-TIME

Trần Gia Bảo Mã SV: 21IT466 Giảng viên hướng dẫn: Ths.Dương Thị Mai Nga

Đà Nẵng, tháng 12 năm 2023

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

Đà Nẵng, ngày tháng 12 năm 2021

Giảng viên hướng dẫn

Ths.Dương Thị Mai Nga

LỜI CẢM ƠN

Để đồ án này đạt kết quả tốt đẹp, em đã nhận được sự hỗ trợ, giúp đỡ của các thầy

cô Với tình cảm sâu sắc, chân thành, cho phép em được bày tỏ lòng biết ơn sâu sắc đến tất cả các thầy cô đã tạo điều kiện giúp đỡ trong quá trình học tập và hoàn thiện đồ

án Trước hết em xin gửi tới các thầy cô khoa Khoa học máy tính trường Đại học Côngnghệ thông tin và Truyền thông Việt-Hàn lời chào trân trọng, lời chúc sức khỏe và lời cảm ơn sâu sắc đã tạo điều kiện cho chúng em có những kiến thức vô cùng ý nghĩa Với sự quan tâm, dạy dỗ, chỉ bảo tận tình chu đáo của thầy cô, đến nay em đã có thể hoàn thành đồ án này Đặc biệt em xin gửi lời cảm ơn chân thành nhất tới thầy ThS.Dương Thị Mai Nga đã quan tâm giúp đỡ, hướng dẫn em hoàn thành tốt đồ án trong thời gian qua Với điều kiện thời gian cũng như kinh nghiệm còn hạn chế thì đồ

án này không thể tránh được những thiếu sót Em rất mong nhận được sự chỉ bảo, đóng góp ý kiến của các thầy cô để em có điều kiện bổ sung, nâng cao ý thức của mình,phục vụ tốt hơn cho công việc thực tế sau này

Em xin chân thành cảm ơn !

Sinh viên

Đặng Hoàng Kiên Trần Gia Bảo

MỤC LỤC

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

LỜI CẢM ƠN 30

MỤC LỤC 31

DANH MỤC CÁC TỪ VIẾT TẮT 33

DANH MỤC ẢNH 34

MỞ ĐẦU 8

1.Giới thiệu 8

2 Mục tiêu của đề tài 8

3 Phương pháp triển khai đề tài 8

4 Kết cấu của đồ án 8

CHƯƠNG I: CƠ SỞ LÝ THUYẾT 9

1.1 Tổng quan về ngôn ngữ lập trình Javascript 9

1.1.1 Giới thiệu về thư viện ReactJS 9

1.1.1.1 Framework NextJS 11

1.1.1.2 Framework Tailwind CSS 11

1.1.1.3 Database MongoDB 12

1.2 Tổng quan về ứng dụng chat real-time Bssenger 12

1.2.1 Giới thiệu 12

1.2.2 Ngôn ngữ lập trình 12

1.2.3 Công cụ sử dụng 13

1.2.3.1 Phân tích chức năng 13

CHƯƠNG II PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 14

2.1 Sơ đồ usecase tổng quan 14

2.2 Sơ đồ usecase phân rã 14

2.3 Sơ đồ trình tự 20

20

CHƯƠNG III THIẾT KẾ VÀ XÂY DỰNG ỨNG DỤNG 21

3.1 Kết quả thực hiện 21

CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 25

4.1 Kết luận 25

4.2 Hướng phát triển 25

DANH MỤC TÀI LIỆU THAM KHẢO 26

DANH MỤC CÁC TỪ VIẾT TẮT

DANH MỤC ẢNH

Hình 1: Javascript 9

Hình 2: React.js 10

Hình 3: Sơ đồ Usecase 14

Hình 4: Usecase đăng nhập 14

Hình 5: Đặc tả usecase đăng nhập 15

Hình 6: Usecase gửi tin nhắn 16

Hình 7: Đặc tả usecase gửi tin nhắn 17

Hình 8: Usecase groupchat 17

Hình 9: Đặc tả usecase groupchat 18

Hình 10: Sơ đồ trình tự 19

Hình 11: Trang đăng kí 20

Hình 12: Trang đăng nhập 20

Hình 13: Gửi tin nhắn 21

Hình 14: Chức năng gửi hình ảnh 21

Hình 15: Chức năng tạo nhóm 22

MỞ ĐẦU

1.Giới thiệ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ấtnhiề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ùngcá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ínhnă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 chonhữ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ườimuố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ăngkhá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ả

Với thực tế như vậy, em thực hiê –n đề tài “TTm hiUu và xây dYng ứng dụng

Bssenger chat”.

2 Mục tiêu của đề tài

- Ứng dụng này được tạo ra để cung cấp trải nghiệm trò chuyện trực tiếp giữangười dùng, cho phép họ gửi và nhận tin nhắn trong thời gian thực

3 Phương pháp triUn khai đề tài

Chương 1: Cơ sở lý thuyết

Chương 2 Thiết kế và xây dựng hệ thống

Chương 3 Kết quả và hướng phát triển

CHƯƠNG I: CƠ SỞ LÝ THUYẾT

1.1 Tổng quan về ngôn ngữ lập trTnh Javascript

JavaScript là ngôn ngữ lập trình được nhà phát triển sử dụng để tạo trang web tương tác Từ làm mới bảng tin trên trang mạng xã hội đến hiển thị hình ảnh động và bản đồ tương tác, các chức năng của JavaScript có thể cải thiện trải nghiệm người dùng của trang web Là ngôn ngữ kịch bản phía máy khách, JavaScript là một trong những công nghệ cốt lõi của World Wide Web Ví dụ: khi duyệt internet, bất cứ khi nào bạn thấy quảng cáo quay vòng dạng hình ảnh, menu thả xuống nhấp để hiển thị hoặc màu sắc phần tử thay đổi động trên trang web cũng chính là lúc bạn thấy các hiệu ứng của JavaScript

Hình 1: Javascript

1.1.1 Giới thiệu về thư viện ReactJS

ReactJS được phát triển bởi Facebook và được giới thiệu lần đầu tiên vào năm 2011 Ban đầu, ReactJS được phát triển để xây dựng giao diện người dùng trên trang web Facebook, nhằm cải thiện tốc độ và hiệu suất của ứng dụng web

Tuy nhiên, ReactJS không được công bố cho cộng đồng phát triển cho đến năm 2013, khi Facebook công bố mã nguồn mở của nó và giới thiệu cho cộng đồng lập trình viên

Từ đó, ReactJS nhanh chóng trở thành một trong những thư viện phổ biến nhất để pháttriển các ứng dụng web động

Sau đó, vào năm 2015, Facebook giới thiệu phiên bản React Native, một framework phát triển ứng dụng di động sử dụng ReactJS React Native cho phép các nhà phát triển xây dựng các ứng dụng di động cho cả iOS và Android sử dụng cùng một mã nguồn, tương tự như ReactJS trên web

Hiện nay, ReactJS đã trở thành một trong những thư viện phát triển web phổ biến nhất,được sử dụng rộng rãi bởi các công ty lớn và nhỏ trên toàn thế giới Facebook cũng tiếp tục đầu tư phát triển và nâng cấp ReactJS để đáp ứng nhu cầu của cộng đồng phát triển.

ReactJS mang đến nhiều lợi ích cho việc phát triển ứng dụng web, bao gồm:

Hiệu suất cao: ReactJS sử dụng Virtual DOM để tối ưu hóa hiệu suất của ứng dụng Virtual DOM cho phép ReactJS cập nhật các thay đổi trên trang web một cách nhanh chóng và hiệu quả hơn so với cách truyền thống, giúp tăng tốc độ và hiệu suất của ứng dụng

Tái sử dụng: ReactJS cho phép tái sử dụng các thành phần UI, giúp giảm thiểu thời gian và chi phí phát triển Các thành phần UI có thể được sử dụng lại trong nhiều phần khác nhau của ứng dụng, giúp tăng tính linh hoạt và khả năng mở rộng của ứng dụng

Dễ dàng quản lý trạng thái: ReactJS giúp quản lý trạng thái của ứng dụng một cách dễ dàng Sử dụng State và Props, ReactJS cho phép các nhà phát triển quản lý trạng thái của các thành phần UI một cách chính xác và dễ dàng

Hỗ trợ tốt cho SEO: ReactJS cho phép các nhà phát triển xây dựng ứng dụng web với khả năng tương thích tốt với SEO Với sự hỗ trợ của các thư viện như React Helmet, ReactJS cho phép các nhà phát triển tùy chỉnh và quản lý các phần tử meta và title cho từng trang web

Hỗ trợ đa nền tảng: ReactJS không chỉ được sử dụng để phát triển các ứng dụng web,

mà còn được sử dụng để phát triển các ứng dụng di động với React Native Sử dụng React Native, các nhà phát triển có thể xây dựng ứng dụng di động cho cả iOS và Android sử dụng cùng một mã nguồn

1.1.1.1 Framework NextJS

Ngày nay, khi làm việc trên một ứng dụng JavaScript được cung cấp bởi React là tuyệtvời cho đến khi bạn nhận ra rằng có một vài vấn đề liên quan đến việc hiển thị tất cả nội dung phía người dùng

Đầu tiên, trang của bạn sẽ tốn nhiều thời gian hơn để có thể hiển thị nội dung cho người dùng, bởi vì trước khi nội dung được tải về, tất cả các file JavaScript cần được tải xong trước và ứng dụng của bạn cần chạy để xác định nội dung hiển thị trên trang.Thứ hai, nếu bạn đang xây dựng một publicly avaiable website, nội dung của bạn bắt buộc phải SEO để nó có thể tới được người sử dụng cần cho nó nhất Tuy ngày này các công cụ tìm kiếm đã hỗ trợ SEO trong các ứng dụng JavaScript Nhưng bạn thử hình dung xem, giữa một ứng dụng hỗ trợ sẵn SEO theo cách truyền thông và một ứngdụng mà công cụ tìm kiếm phải Indexing để xử lý thì công cụ tìm kiếm sẽ ưu tiên phầnnào hơn ? Dĩ nhiên sẽ ưu tiên trang web hỗ trợ content SEO HTML ngay từ đầu Next.js cung cấp một cấu trúc chung cho phéo bạn dễ dàng xây dựng một ứng dụng Frontend React, và dĩ nhiên nó sẽ hỗ trợ việc sử lý server-side rendering một cách dễ dàng

1.1.1.2 Framework Tailwind CSS

Tailwind CSS về cơ bản là utility-first CSS framework cung cấp các class thực thi những chức năng nhỏ trong giao diện như text-black p-4 để xây dựng nhanh chóngcác giao diện người dùng tùy chỉnh Đây là một css framework cấp thấp, có thể tùy chỉnh cao, cung cấp cho bạn tất cả các công cụ bạn cần để xây dựng các thiết kế riêng

mà không có bất kỳ sự ràng buộc nào lớp A, ta sẽ có thể có 16 triệu điạ chỉ, ở lớp B

có 65536 địa chỉ Ví dụ: Ở lớp B chúng ta có tất cả các địa chỉ từ 132.25.0.0 đến 132.25.255.255

Trước đây khi làm việc với Bootstrap Framework Css nó đã có những cấu trúc có sẵn

và khi tạo ra các thành phần trên website thường có một cấu trúc chung nên nếu website đã dùng Bootstrap thì nó hao hao như nhau

Khi muốn tùy biến theo kiểu của mình thì mất khá nhiều thời gian và cần phải sử dụngcss thuần để kết hợp với Bootstrap để xây dựng giao diện website như ý của mình.Khi biết đến Tailwind tôi thực sự bất ngờ, nó là hệ thống các class để thực hiện những nhiệm vụ nhỏ khác nhau, từ đó có thể tự ý phối kết hợp những class đó để tạo ra một giao diện như ý của mình

Cùng sử dụng tailwind css nhưng mỗi website có thể hiển thị những kiểu khác nhau,

nó hoàn toàn phụ thuộc vào tư duy kỹ năng css của người xây dựng nó

1.1.1.3 Database MongoDB

MongoDB là một database hướng tài liệu (document), một dạng NoSQL database Vì thế, MongoDB sẽ tránh cấu trúc table-based của relational database để thích ứng với các tài liệu như JSON có một schema rất linh hoạt gọi là BSON MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON nên mỗi một collection sẽ các các kích cỡ

và các document khác nhau Các dữ liệu được lưu trữ trong document kiểu JSON nên truy vấn sẽ rất nhanh

MongoDB giúp các tổ chức lưu trữ lượng lớn dữ liệu trong khi vẫn hoạt động nhanh chóng Ngoài lưu trữ dữ liệu, MongoDB còn được sử dụng trong các trường hợp sau:

 Tích hợp một lượng lớn dữ liệu đa dạng

 Mô tả các cấu trúc dữ liệu phức tạp, biến hoá

 Cung cấp dữ liệu cho các ứng dụng hiệu suất cao

 Hỗ trợ các ứng dụng đám mây lai và đa đám mây

 Hỗ trợ phương pháp phát triển Agile

Thay vì sử dụng các table và row như trong cơ sở dữ liệu quan hệ, vì là cơ sở dữ liệu NoSQL, MongoDB được tạo thành từ collection và document Document được tạo thành từ các cặp khóa-giá trị (là đơn vị dữ liệu cơ bản của MongoDB) Còn collection, tương đương với table trong SQL, là nơi chứa các bộ document.

1.2 Tổng quan về ứng dụng chat real-time Bssenger

1.2.1 Giới thiệu

Bssenger 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à MongoDB để 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.2.2 Ngôn ngữ lập trTnh

Bssenger 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

1.2.3 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

1.2.3.1 Phân tích chức năng

Hệ thống có 1 tác nhân bao gồm Người dùng(User) là người sử dụng ứng dụng chat Ứng dụng sẽ có các chức năng bao gồm các cụm chức năng chính:

 Đăng nhập, đăng xuất

 Nhắn tin với người lạ

 Tạo nhóm chat

 Tìm kiếm người dùng

 Thông báo tin nhắn và cảnh báo

 Tải lên tệp và hình ảnh bằng Cloudinary CDN

 Trạng thái người dùng trực tuyến/ngoại tuyến

 Đính kèm tin nhắn và chia sẻ tập tin

Chức năng chi tiết:

Đă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 github

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.

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ộtnhóm chat để tham gia hoặc chuyển đổi giữa các nhóm chat

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

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

Gửi ảnh và tệp tin: Người dùng có thể gửi ảnh và tệp tin cho thành viên cá nhânhoặc các thành viên trong một nhóm chat

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

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

CHƯƠNG II PHÂN TÍCH VÀ THIẾT KẾ HỆ

THỐNG

2.1 Sơ đồ usecase tổng quan

Hình 3: Sơ đồ Usecase

2.2 Sơ đồ usecase phân rã

 Đặc tả usecase đăng nhập

 Sơ đồ Usecase Send Message

Hình 6: Usecase gửi tin nhắn

 Sơ đồ UC Groupchat

 Đặc tả usecase Groupchat

2.3 Sơ đồ trTnh tY

CHƯƠNG III THIẾT KẾ VÀ XÂY DỰNG ỨNG

DỤNG

3.1 Kết quả thYc hiện

Hình 11: Trang đăng kí

CHƯƠNG IV: KẾT LUẬN VÀ HƯỚNG PHÁT

TRIỂN

4.1 Kết luận

Sau một thời gian tập trung triển khai đề tài, em đã hoàn thành được đồ án “TTm

hiUu và xây dYng ứng dụng Bssenger chat”” với giao diện đẹp, các thao tác sử dụng

dẽ dàng, thân thiện với người dùng Khi hoàn thành xong ứng dụng, em có thêmnhững kỹ năng nền tảng để xây dựng được một ứng dụng bằng ngôn ngữ Javascript, ápdụng các kiến thức trong môn lập trình mạng đã được học vào việc phát triển ứngdụng, phần mềm Bên cạnh đó, cũng mở rộng được kiến thức chuyên ngành mới nhờviệc tìm hiểu một số kiến thức lập trình để áp dụng vào việc phát triển ứng dụng này.Nhờ vậy, kỹ năng tự học và vận dụng các kỹ năng mới của em được nâng cao hơn

• Những vấn đề tồn tại

- Chức năng làm được còn hạn chế

- Chương trình chat còn đơn giản

- Hệ thống xử lí nghiệp vụ chưa tối ưu

4.2 Hướng phát triUn

- Hoàn thiện giao diện đẹp hơn

- Xây dựng hệ cơ sở dữ liệu lớn hơn trong việc lưu trữ thông tin lịch sử trò chuyện của người dùng

- Phát triển call video, và thêm một vài chức năng như thu hồi tin nhắn, tìm kiếm tin nhắn…