Báo cáo đồ án 2 xây dựng phần mềm chat

Để có thể mở rộng khả năng kết nối trên mạng Internet, nhóm chúng tôi sẽ thực hiện đề tài Xây dựng ứng dụng Chat với bộ chức năng đa dạng, tối ưu trên các thiết bị.. - Xây dựng được ứng

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

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

KHOA CÔNG NGHỆ PHẦN MỀM

-

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG PHẦN MỀM CHAT

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến

Sinh viên thực hiện:

Nguyễn Hữu An Nhiên – 19520207

Vũ Đặng Khương Duy - 19520496

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

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

KHOA CÔNG NGHỆ PHẦN MỀM

-

BÁO CÁO ĐỒ ÁN 2 XÂY DỰNG PHẦN MỀM CHAT

Giảng viên hướng dẫn: ThS Trần Thị Hồng Yến

Sinh viên thực hiện:

Nguyễn Hữu An Nhiên – 19520207

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI:

XÂY DỰNG PHẦN MỀM CHAT

Tên đề tài tiếng Anh:

BUILDING A MESSAGING APPLICATION Cán bộ hướng dẫn: ThS Trần Thị Hồng Yến

Thời gian thực hiện: Từ ngày 7/9/2022 đến 31/12/2022

Sinh viên thực hiện:

Nguyễn Hữu An Nhiên - 19520207

đã nhập nào sẽ được những người tham gia khác nhận được ngay lập tức

Ngày nay, chat là một phần không thể thiếu của cuộc sống của chúng ta Với những ứng dụng chat đã hỗ trợ con người khi làm việc từ xa, bất kể nơi nào và lúc nào Hiệu quả

rõ ràng nhất có lẽ đến từ lúc đại dịch Covid vừa qua, khi các ứng dụng chat như Viber, Zalo, Line,… đã kết nối mọi người với nhau.

Để có thể mở rộng khả năng kết nối trên mạng Internet, nhóm chúng tôi sẽ thực hiện đề tài Xây dựng ứng dụng Chat với bộ chức năng đa dạng, tối ưu trên các thiết bị

2 Mục tiêu:

- Hiểu rõ cấu trúc của framework React do Facebook phát triển và cách áp dụng vào đồ

án

- Xây dựng được ứng dụng chat gồm các tính năng chính có thể phục vụ vào đời sống

và công việc của mọi người

5 Phương pháp thực hiện:

- Tìm hiểu về ReactJs, NodeJs, Nestjs, MongoDb, Typescript

- Khảo sát thực trạng các ứng dụng chat hiện có ví dụ: WhatApps, Viber, Messenger chat, Zalo, Telegram, là các ứng dụng có nhiều người dùng, từ đó tiến hành phân tích, xác định các yêu cầu cụ thể cho đề tài và đưa ra các tính năng cải thiện (nếu có)

- Phân tích và thiết kế ứng dụng, thiết kế hệ thống

- Tham khảo, lên ý tưởng giao diện cho ứng dụng

- Xây dựng ứng dụng cho người dùng sử dụng được trên nhiều hệ điều hành khác nhau (các hệ điều hành được nêu ở mục phạm vi môi trường)

- Tiến hành triển khai và kiểm thử ứng dụng

6 Công nghệ:

- Frontend: ReactJs, ElectronJs

- Backend: Nestjs

- Database: IndexDb, MongoDb

7 Kết quả mong đợi

• Nắm bắt và áp dụng được các công nghệ được sử dụng để xây dựng đề tài

• Hiểu rõ chức năng, cách sử dụng các công nghệ nêu trên

• Xây dựng được ứng dụng dễ dàng nâng cấp, chỉnh sửa

• Tin nhắn đảm bảo thứ tự

• Đảm bảo tin nhắn luôn được gửi thành công

• Ứng dụng hoạt động trơn tru, hạn chế lỗi trong khi sử dụng và triển khai

8 Kế hoạch thực hiện

05/09/2022 – 11/09/2022 Tất cả: tìm hiểu đề tài, chuẩn bị khảo sát các ứng dụng khác

12/09/2022 – 18/09/2022

Tất cả: tìm hiểu, nghiên cứu ReactJs và Nodejs Phân tích, thiết kế hệ thống, lên kịch bản sử dụng (bussiness process)

(Ký tên và ghi rõ họ tên)

Nguyễn Hữu An Nhiên Vũ Đặng Khương Duy

LỜI MỞ ĐẦU

Thuật ngữ “Chat” không còn xa lạ với người dùng Internet ngày nay Trong chúng

ta, hàng ngày chúng ta đều phải giải quyết mọi công việc thông qua việc giao tiếp giữa người với người Và nhờ sự phát triển của công nghệ thông tin, những ứng dụng nhắn tin đang dần thay thế cho các hoạt động giao tiếp face-to-face truyền thống

Theo định nghĩa, Chat (trò chuyện) là một giao tiếp dựa trên văn bản được thực hiện trực tiếp hoặc theo thời gian thực Ví dụ: khi nói chuyện với ai đó trong cuộc trò chuyện, bất kỳ văn bản đã nhập nào sẽ được những người tham gia khác nhận được ngay lập tức Chat thường có 3 loại đó là text-chat, voice chat, video chat

Hiện nay, trên thị trường có rất nhiều nền tảng ứng dụng nhắn tin phổ biến Trong

đó nổi bật nhất với người dùng Việt Nam là các ứng dụng Zalo, Messenger, Viber, … Tuy nhiên, các ứng dụng này đều có những ưu và nhược điểm riêng Ví dụ như Zalo sẽ là ở khả năng đồng bộ đa thiết bị, Messenger thì khả năng phản hồi chậm và ứng dụng thường xuyên xảy ra lỗi,… Vì vậy, cần có một giải pháp ứng dụng chat đáp ứng được các yêu cầu về chức năng và đảm bảo hiệu năng, khả năng tương tác của người dùng Đó là lí do, nhóm

chúng em lựa chọn đề tài “Xây dựng phần mềm chat” và phát triển ứng dụng WhatChat

LỜI CẢM ƠN

hướng dẫn Đồ án 2 của nhóm thuộc khoa Công nghệ Phần mềm đã hướng dẫn từng bước nghiên cứu, thực hiện đề tài này

Tuy nhiên trong quá trình nghiên cứu đề tài này, nhóm chúng em có thể còn một số nhược điểm, hạn chế khi tìm hiểu, thực hiện Rất mong nhận được sự nhận xét, góp ý từ các thầy cô giảng viên trong trường để đề tài của nhóm chúng em được hoàn thiện hơn Chúng em xin chân thành cảm ơn!

Nhóm sinh viên thực hiện Nguyễn Hữu An Nhiên – Vũ Đặng Khương Duy

MỤC LỤC

Chương 1: GIỚI THIỆU TỔNG QUAN ĐỀ TÀI 9

1.1 Tên đề tài : XÂY DỰNG ỨNG DỤNG CHAT 9

1.2 Lí do chọn đề tài 9

1.4 Khảo sát đề tài: 10

1.5 Môi trường phát triển ứng dụng 12

1.5 Các yêu cầu của hệ thống 13

Chương 2: CƠ SỞ LÍ THUYẾT 14

Chương 3: MÔ HÌNH USE-CASE 22

3.2 Danh sách actor 23

3.3 Danh sách các use-case 23

Chương 4: PHÂN TÍCH 35

4.1 Sơ đồ lớp (mức phân tích) 35

4.2 Danh sách các lớp đối tượng và quan hệ 36

4.3 Thiết kế dữ liệu: 37

Chương 5: THIẾT KẾ GIAO DIỆN ỨNG DỤNG 41

5.1 Danh sách các màn hình 41

5.2 Mô tả chi tiết mỗi màn hình 42

KẾT LUẬN 50

Ưu điểm 50

Nhược điểm 50

Hướng phát triển 50

TÀI LIỆU THAM KHẢO 51

Chương 1:

GIỚI THIỆU TỔNG QUAN ĐỀ TÀI

1.1 Tên đề tài : XÂY DỰNG ỨNG DỤNG CHAT

1.2 Lí do chọn đề tài

Hiện nay, trên thị trường có rất nhiều nền tảng ứng dụng nhắn tin phổ biến Trong

đó nổi bật nhất với người dùng Việt Nam là các ứng dụng Zalo, Messenger, Viber, … Tuy nhiên, các ứng dụng này đều có những ưu và nhược điểm riêng Ví dụ như Zalo sẽ là ở khả năng đồng bộ đa thiết bị, Messenger thì khả năng phản hồi chậm và ứng dụng thường xuyên xảy ra lỗi,… Vì vậy, cần có một giải pháp ứng dụng chat đáp ứng được các yêu cầu về chức năng và đảm bảo hiệu năng, khả năng tương tác của người dùng Đó là lí do, nhóm

chúng em lựa chọn đề tài “Xây dựng phần mềm chat” và phát triển ứng dụng WhatChat

Theo các thống kê và câu hỏi trên các nền tàng mạng xã hội Người dùng mong muốn các ứng dụng chat sẽ có các tính năng cơ bản gồm: nhắn tin, nhắn nhóm, kết bạn, gửi ảnh, gửi file, tìm kiếm tin nhắn Do đó WhatChat cũng sẽ tập trung vào các tính năng này và tối

ưu trải nghiệm người dùng

1.3 Lí do chọn công nghệ

Theo các thống kê từ trang công nghệ Hongkiat, hiện tại 2 nền tảng hệ điều hành Windows và MacOS chiếm đến 97% thị phần máy tính trên toàn cầu Do đó muốn phát triển ứng dụng cho tất cả mọi người đều có thể sử dụng thì yêu cầu phải hỗ trợ cả 2 nền tảng này Tuy nhiên, việc phát triển ứng dụng native cho từng nền tảng yêu cầu rất nhiều chi phí và thời gian của đội ngũ phát triển

Chính vì thế, nhóm chúng em quyết định sử dụng framework ReactJS nhằm giúp cho ứng dụng chạy được trên cả 2 nền tảng phổ biến nhất hiện nay là Windows và MacOS,

1.4 Khảo sát đề tài:

Nhóm chúng em đã tạo ra một form khảo sát công khai Sau thời gian mở form là

7 ngày thì đã nhận được 209 phản hồi từ mọi người

Các câu hỏi khảo sát:

• Ứng dụng chat có cần đầy đủ chức năng (gửi tin nhắn, ảnh)?

• Điều gì làm bạn thích một ứng dụng chat?

• Bạn biết ứng dụng chat qua đâu?

• Bạn sử dụng ứng dụng chat bao nhiêu thời gian một ngày?

• Bạn mong muốn những tính năng gì từ ứng dụng chat?

Sau khi khảo sát, nhóm đã nhận được các phản hồi như sau:

Hình 1.1 Câu hỏi 1

Hình 1.2 Câu hỏi 2

Hình 1.3 Câu hỏi 3

Hình 1.4 Câu hỏi 4

Kết luận: Từ các kết quả từ khảo sát Nhóm đã phân tích và đưa ra một số kết luận như sau:

• Mọi người đều mong muốn một ứng dụng chat có đầy đủ chức năng

• Người dùng ưu tiên về tốc độ và giao diện ứng dụng hơn

• Phần lớn người dùng dành 1-3h một ngày để dùng các ứng dụng chat

• Các tính năng người dùng mong muốn có nhất ở ứng dụng chat là: gửi ảnh, tìm kiếm bạn bè, tìm kiếm tin nhắn cũ, gửi icon,

Từ khảo sát trên đã giúp nhóm có cái nhìn tổng quát hơn để quyết định về các tính năng cho ứng dụng

1.5 Môi trường phát triển ứng dụng

- Hệ điều hành: Microsoft Windows, macOS

- Front-end: React JS, TailwindCSS, AntDesign

- Cơ sở dữ liệu: MongoDB

- Công cụ phân tích thiết kế: Draw.io

- Công cụ xây dựng ứng dụng: Visual Studio Code

1.5 Các yêu cầu của hệ thống

1 Hệ thống gửi tin nhắn và hình ảnh

2 Đảm bảo tin nhắn được gửi real-time

3 Hình ảnh có thể gửi qua nhanh chóng

4 Có thể lưu và tìm lại tin nhắn cũ

6 Có thể gửi các định dạng file phổ thông

Bảng 1.1 Danh sách các yêu cầu của hệ thống

Chương 2:

CƠ SỞ LÍ THUYẾT 2.1 ReactJS:

Hình 2.1.Biểu tượng của ReactJS

Reactjs là một thư viện Javascript mã nguồn mở hỗ trợ xây dựng các thành phần giao diện nhanh gọn và tiện lợi Bình thường các lập trình viên sẽ nhúng javascript vào code HTML thông qua các attribute như AngularJS nhưng với Reactjs làm việc như một thư viện cho phép nhúng HTML vào javascript thông qua JSX Qua đó bạn có thể dễ dàng lồng các đoạn HTML vào trong JSX làm cho các component dễ hiểu và dễ sử dụng hơn

Trong Reactjs thường dùng javascript để thiết kế bố cục cho trang web, nhưng nhược điểm là cấu trúc khá là khó Thay vào đó sử dụng JSX và nhúng các đoạn HTML vào javascript, ta thấy cú pháp dễ hiểu hơn và JSX cũng có thể tối ưu code khi biên soạn Vừa dễ cho người lập trình mà vừa tiện cho việc biên dịch

Các thành phần cơ bản của ReactJS:

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác Trong React, chúng ta xây dựng trang web sử dụng những thành phần

(component) nhỏ Chúng ta có thể tái sử dụng một component ở nhiều nơi, với các trạng thái hoặc các thuộc tính khác nhau, trong một component lại có thể chứa thành phần khác Mỗi component trong React có một trạng thái riêng, có thể thay đổi, và React sẽ thực hiện cập nhật component dựa trên những thay đổi của trạng thái Mọi thứ React đều là component Chúng giúp bảo trì mã code khi làm việc với các dự án lớn Một react component đơn giản chỉ cần một method render Có rất nhiều methods khả dụng khác, nhưng render là method chủ đạo

Ưu điểm của ReactJS:

- Hiệu quả với DOM ảo

- Sử dụng JSX giúp việc viêt code dễ dàng hơn

- Công cụ phát triển đa dạng

- Render ở tầng Server

- Hiệu năng cao

- Linh hoạt, code dễ dàng chỉnh sửa và bảo trì

Nhược điểm của ReactJs:

- ReactJs chỉ phục vụ cho tầng view

- Dung lượng ban đầu nặng hơn 1 số framework khác như Angular, Vue ,…

- Khó tiếp cận với người mới học web

2.2 ElectronJS

Hình 2.2 Mô tả về ElectronJS

Electron là một framework phần mềm nguồn mở và miễn phí được phát triển và duy trì bởi GitHub Framework này được thiết kế để tạo các ứng dụng dành cho máy tính để bàn bằng cách sử dụng các công nghệ web được hiển thị bằng phiên bản của công cụ trình duyệt Chromium và sử dụng môi trường runtime của Node.js Với ElectronJS, ứng dụng

có thể phát triển và chạy cùng lúc trên nhiều nền tảng khác nhau như Windows, Linux, MacOS, …

Ưu điểm của ElectronJS:

- Phát triển đa nền tảng

- Dễ dàng tiếp cận cho người mới

- Code dễ dàng bảo trì và sửa chữa

- Tiết kiệm chi phí phát triển phần mềm

- Có thể tái sử dụng các package từ Node

Nhược điểm của ElectronJS:

- Sử dụng nhân Chrominum nên tương đối nặng

- Khả năng che giấu dữ liệu chưa tốt

2.3 TailwindCSS:

Hình 2.3 Biểu tượng của TailwindCSS

Tailwind là Framework CSS để phát triển UI nhanh chóng Tailwind không cung cấp chủ đề mặc định hoặc bất kỳ thành phần UI nào được định nghĩa trước

Tailwind cung cấp các công cụ để phát triển nhanh chóng, đồng thời cho phép nhà phát triển maintain Mặc dù không có giới hạn đối với trí tưởng tượng với Tailwind, thiết

kế được cấu trúc theo cách để nhà phát triển có thể tạo một quy tắc tự áp đặt để tránh tăng size của CSS hoặc các thuộc tính lặp đi lặp lại

Nhiều framework CSS hiện nay đang chọn hướng tiếp cận là Component first Đây được xem là hướng tiếp cận theo kiểu đánh nhanh thắng nhanh, người ta sẽ tạo ra các components có sẵn giúp cho các lập trình viên (programmer) sử dụng để hoàn thiện sản phẩm một cách nhanh nhất Tuy nhiên vẫn gặp phải nhược điểm là gặp khó khăn trong việc ghi đè các component

Vì vậy, nhiều người chuyển hướng sang sử dụng Tailwind CSS vì sử dụng hướng tiếp cận là Utility-first Framework

Ưu điểm của TailwindCSS:

• Người sử dụng có thể chẳng phải viết đến 1 dòng css nào mà vẫn có giao diện tùy biến theo mong muốn

• Style, màu sắc, font chữ hiện đại, phù hợp với phong cách web hiện đại

• Cách đặt tên class dễ hiểu, 1 class đại diện cho 1 thuộc tính Tailwind CSS có gần như đủ gần 85% thuộc tính css

• Sử dụng Flex nên rất dễ chia Layout

• Dễ cài đặt, dễ sử dụng, document của Tailwind rất dễ hiểu Tailwind CSS phù hợp cho các dự án nhỏ, người dùng tuỳ biến nhiều, cần làm nhanh giao diện Trong khi nếu bạn Bootstrap mà không tuỳ biến gì thì trong web của bạn sẽ đúng đậm chất Bootstrap còn với Tailwind thì khi mỗi người dùng sẽ ra mỗi giao diện khác nhau

mà không hề đụng hàng

Nhược điểm của TailwindCSS

• Khi sử dụng tailwind thì bạn bạn đang phải sử dụng số class cực kì nhiều, số class

sẽ tương ứng với với số thuộc tính mà bạn muốn cài đặt

• Khi dùng font-size hoặc màu sắc vẫn đang còn phải custom lại bằng css riêng

• Chưa có những bộ mixin khi muốn thiết lập nhiều thuộc tính cần thiết

• Khó làm quen ở giai đoạn mới bắt đầu

• Cấu trúc code khó bảo trì nếu dự án phình to

2.4 MongoDB

Hình 2.4 Biểu tượng của MongoDB

MongoDB là một chương trình cơ sở dữ liệu mã nguồn mở được thiết kế theo kiểu hướng đối tượng trong đó các bảng được cấu trúc một cách linh hoạt cho phép các dữ liệu lưu trên bảng không cần phải tuân theo một dạng cấu trúc nhất định nào Chính do cấu trúc linh hoạt này nên MongoDB có thể được dùng để lưu trữ các dữ liệu có cấu trúc phức tạp

và đa dạng và không cố định (hay còn gọi là Big Data)

Ưu điểm của MongoDB:

• Ít Schema hơn: MongoDB là một cơ sở dữ liệu dựa trên Document, trong đó một Collection giữ các Document khác nhau Số trường, nội dung và kích cỡ của Document này có thể khác với Document khác

• Cấu trúc của một đối tượng là rõ ràng

• Không có các Join phức tạp

• Khả năng truy vấn sâu hơn MongoDB hỗ trợ các truy vấn động trên các Document bởi sử dụng một ngôn ngữ truy vấn dựa trên Document mà mạnh mẽ như SQL

Chương 3:

MÔ HÌNH USE-CASE

Hình 3.1 Sơ đồ use case của ứng dụng

3.2 Danh sách actor

1 Người dùng Người trực tiếp sử dụng ứng dụng để chat

Bảng 3.1 Danh sách actor của ứng dụng

3.3 Danh sách các use-case

1 Đăng nhập Người dùng đăng nhập vào hệ thống

2 Đăng xuất Người dùng đăng xuất khỏi hệ thống

3 Đăng kí Người dùng đăng kí tài khoản mới

4 Quản lý thông tin cá nhân Xem/Chỉnh sửa thông tin cá nhân

5 Tạo cuộc hội thoại Người dùng tạo cuộc hội thoại mới

6 Soạn và gửi tin nhắn Soạn thảo văn bản và gửi tin nhắn dạng

10 Kết bạn Tìm và kết bạn

Bảng 3.2 Danh sách các use-case của ứng dụng

3.4 Đặc tả Use-case

3.4.1 Đặc tả use-case “Đăng nhập”

Tóm tắt Chức năng đăng nhập vào hệ thống

1 Thông tin đăng nhập sai:

Hệ thống hiển thị thông báo tài khoản đăng nhập không hợp lệ

Các yêu cầu đặc biệt - Tài khoản đã được đăng kí trước đó

- Email người dùng đã được chứng thực

Trạng thái hệ thống

trước khi thực thiện use

case

Actor: người dùng Điều kiện: Người dùng vào ứng dụng khi chưa đăng nhập

Trạng thái hệ thống sau Người dùng đăng nhập thành công vào hệ thống, có thể