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

Trong quá trình thực hiện đồ án, nhóm có thể không tránh khỏi được sai sót, chúng em kính mong nhận được sự góp ý, hướng dẫn của cô để có thể hoàn thiện đồ án hơn nữa, không chỉ dừng lại

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

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

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

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

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

Người nhận xét

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

Trần Thị Hồng Yến

LỜI CẢM ƠN

Đồ án “Xây dựng phần mềm Chat” là đồ án đầu tay trên nền tảng Mobile mà nhóm

em thực hiện Để có thể hoàn thành đồ án 1 lần này, chúng em xin dành lời cảm ơn sâu sắc đến:

Ths.Trần Thị Hồng Yến đã tận tình hướng dẫn, cho lời khuyên cũng như đưa ra những định hướng thiết thực cho bọn em Những góp ý, bài học mà chúng em học được trong suốt quá trình thực hiện đồ án 1 sẽ là hành trang quý báu không chỉ hiện tại mà còn ở trong tương lai

Các quý thầy cô trường Đại học Công nghệ Thông tin đã truyền đạt những bài học hữu ích, không chỉ về kiến thức chuyên ngành mà còn những kĩ năng trong cuộc sống, công việc sau này

Trong quá trình thực hiện đồ án, nhóm có thể không tránh khỏi được sai sót, chúng

em kính mong nhận được sự góp ý, hướng dẫn của cô để có thể hoàn thiện đồ án hơn nữa, không chỉ dừng lại ở đồ án 1 mà có thể phát triển lên thành đồ án 2

Chúng em xin gửi lời cảm ơn chân thành nhất đến cô

TP.HCM, ngày 23 tháng 12 năm 2022 Nhóm sinh viên thực hiện Nguyễn Đình Nhật Quang - Trần Đình Lộc

ĐẠ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

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

Sinh viên thực hiện:

Nguyễn Đình Nhật Quang - 20520719

Trần Đình Lộc - 20520236

Nội dung đề tài:

1 Giới thiệu

Trong những năm trở lại đây, Internet đã trở thành thứ không thể thiếu trong

xã hội, giai đoạn sau năm 2010, đánh dấu sự bùng nổ của Smartphone không chỉ

ở Việt Nam mà cả thế giới Bên cạnh đó, 2 năm trở lại đây, thế giới đã trải qua một đại dịch lớn, làm thay đổi nhận thức của mọi người về hình thức trao đổi thông tin trong công việc và cuộc sống, mở ra cơ hội cho Internet tiếp tục phát

2 Mô tả chi tiết mục tiêu

- Hiểu về Flutter, NodeJS và cách áp dụng những công nghệ này vào đồ án

- Hiểu về State Management, Architecture: Bloc

- Xây dựng được phần mềm Chat với các tính năng như Real-time Chat, quản lý hồ sơ người dùng,

3 Phạm vi

● Phạm vi môi trường

- Ứng dụng có thể hoạt động trên hệ điều hành Android

● Phạm vi chức năng

- Xây dựng chức năng đăng nhập, đăng ký, quên mật khẩu

- Quản lý thông tin người dùng

- Thực hiện Chat trong thời gian thực

- Tìm hiểu công nghệ Mobile như Flutter

- Tìm hiểu về các công nghệ Back-end như NodeJS, MongoDB, Firebase

- Tìm hiểu về các State Management như BloC

- Khảo sát thực trạng các ứng dụng Chat trên thị trường như Facebook messenger, Telegram, Zalo từ đó tiến hành phân tích, xác định các yêu cầu cụ thể cho đề tài

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

- Tiến hành nghiên cứu thiết kế giao diện cho ứng dụng trên nền tảng là Mobile

- Tiến hành xây dựng ứng dụng trên Android

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

6 Công nghệ

- Mobile: Flutter, Material Design

- State Management: Bloc

- Back-end: NodeJS, Firebase

- Database: MongoDB

- API Documentation: Swagger

- Source Control: Github

7 Kết quả mong đợi

- Tìm hiểu và áp dụng các công nghệ mới về Flutter

- Tìm hiểu và áp dụng các công nghệ mới trong việc triển khai, sử dụng dữ liệu thời gian thực

- Hiểu rõ các nghiệp vụ, chức năng của một phần mềm Chat

- Xây dựng được phần mềm Chat đáp ứng được các yêu cầu về giao diện và chức năng đã đề ra

- Có thể thay đổi linh hoạt giao diện, mở rộng thêm tính năng trong việc phát triển phần mềm trong tương lai

Cả nhóm

2 Nghiên cứu và thiết kế giao

diện cho Mobile

12/09/2022 - 18/09/2022

Trần Đình Lộc

3 Triển khai, khởi tạo Source

Code và cài đặt các cấu hình

Firebase

19/09/2022 - 25/09/2022

Nguyễn Đình Nhật Quang

4 Xây dựng API cho chức

năng xác thực người dùng

19/09/2022 - 25/09/2022

Trần Đình Lộc

5 Triển khai chức năng xác

thực người dùng

26/09/2022 - 02/10/2022

Nguyễn Đình Nhật Quang

6 Xây dựng API cho chức

năng bạn bè

26/09/2022 - 02/10/2022

Trần Đình Lộc

7 Triển khai chức năng bạn bè

trên Mobile

03/10/2022 - 09/10/2022

Nguyễn Đình Nhật Quang

8 Xây dựng API cho chức

năng quản lý thông tin

03/10/2022 - 09/10/2022

Trần Đình Lộc

người dùng

9 Triển khai chức năng quản

lý thông tin người dùng

10/10/2022 - 16/10/2022

Nguyễn Đình Nhật Quang

10 Xây dựng API Chat cá nhân

cho phần mềm

10/10/2022 - 23/10/2022

Trần Đình Lộc

11 Triển khai chức năng Chat

cá nhân trên Mobile

17/10/2022 - 30/10/2022

Nguyễn Đình Nhật Quang

12 Xây dựng API Chat nhóm

cho phần mềm

24/10/2022 - 30/10/2022

Trần Đình Lộc

13 Triển khai chức năng Chat

nhóm trên Mobile

31/10/2022 - 06/11/2022

Nguyễn Đình Nhật Quang

14 Xây dựng API thông báo

cho phần mềm

31/10/2022 - 06/11/2022

Trần Đình Lộc

15 Triển khai chức năng thông

báo cho phần mềm

07/11/2022 - 13/11/2022

Nguyễn Đình Nhật Quang

16 Xây dựng API Video call

cho phần mềm

07/11/2022 - 20/11/2022

Trần Đình Lộc

17 Triển khai chức năng Video

call cho Mobile

14/11/2022 - 27/11/2022

Nguyễn Đình Nhật Quang

18 Kiểm thử phần mềm và sửa

lỗi

21/11/2022 - 04/12/2022

Cả nhóm

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU CHUNG 16

1.1 Lý do chọn đề tài 16

1.2 Phạm vi nghiên cứu 16

1.3 Đối tượng nghiên cứu 17

1.4 Phương pháp nghiên cứu 17

CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG 18

2.1 Flutter 18

2.1.1 Giới thiệu 18

2.1.2 Bloc - State Management 20

2.1.2.1 Giới thiệu về Bloc 20

2.1.2.2 Kiến trúc 21

2.2 NodeJS 23

2.2.1 Giới thiệu 23

2.2.2 Lý do sử dụng 24

2.3 MongoDB 24

2.3.1 Giới thiệu 24

2.3.2 Lý do sử dụng 25

2.4 Firebase 26

2.4.1 Giới thiệu 26

2.4.2 Lý do sử dụng 26

2.5 Socket.IO 27

2.5.1 Giới thiệu 27

2.5.2 Lý do sử dụng 27

2.6 WebRTC 28

2.6.1 Giới thiệu 28

2.6.2 Lý do sử dụng 28

2.7 Elastic Search 29

2.7.1 Giới thiệu 29

2.7.2 Lý do sử dụng 30

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 31

3.1 Xây dựng hệ thống 31

3.1.1 Kiến trúc hệ thống ứng dụng 31

3.1.2 Mô tả các thành phần trong hệ thống 32

3.2 Phân tích yêu cầu 33

3.2.1 Đăng ký 33

3.2.2 Đăng nhập 33

3.2.3 Xem danh sách phòng Chat 33

3.2.4 Nhắn tin trong phòng Chat 33

3.2.5 Quản lý nhóm 34

3.2.6 Tham gia phòng Chat nhóm 34

3.2.7 Quản lý bạn bè 34

3.2.8 Tìm kiếm 34

3.2.9 Thông báo 34

3.2.10 Quản lý thông tin cá nhân 34

3.2.11 Video call 34

3.3 Thiết kế hệ thống: 35

3.3.1 Sơ đồ Use Case: 35

3.3.2 Danh sách Actor 39

3.3.3 Danh sách Use Case 39

3.3.4 Danh sách đặc tả Use Case 42

3.3.4.1 Use Case Đăng nhập 42

3.3.4.2 Use Case Đăng ký 44

3.3.4.3 Use Case Quên mật khẩu 46

3.3.4.4 Use Case Xem danh sách bạn bè 47

3.3.4.5 Use Case Xem danh sách lời mời kết bạn đã nhận 48

3.3.4.6 Use Case Từ chối lời mời kết bạn 49

3.3.4.7 Use Case Chấp nhận lời mời kết bạn 50

3.3.4.8 Use Case Xem danh sách lời mời kết bạn đã gửi 51

3.3.4.9 Use Case Thêm bạn bè 52

3.3.4.10 Use Case Huỷ lời mời kết bạn 54

3.3.4.11 Use Case Tạo nhóm 55

3.3.4.12 Use Case Xem danh sách nhóm 56

3.3.4.13 Use Case Xem danh sách lời mời vào nhóm đã nhận 57

3.3.4.14 Use Case Từ chối lời mời 58

3.3.4.15 Use Case Chấp nhận lời mời 59

3.3.4.16 Use Case Xem danh sách phòng Chat 60

3.3.4.17 Use Case Chỉnh sửa thông tin cá nhân 61

3.3.4.18 Use Case Thông báo 62

3.3.4.19 Use Case Xem danh sách thông báo 63

3.3.4.20 Use Case Tìm kiếm 64

3.3.4.21 Use Case Đăng xuất 65

3.3.4.22 Use Case Quản lý thiết bị 66

3.3.4.23 Use Case Xem danh sách lời mời đã gửi 66

3.3.4.24 Use Case Mời bạn bè vào nhóm 67

3.3.4.25 Use Case Thu hồi lời mời vào nhóm 68

3.3.4.26 Use Case Xoá nhóm 69

3.3.4.27 Use Case Xoá thành viên khỏi nhóm 70

3.3.4.28 Use Case Chỉnh sửa thông tin phòng Chat nhóm 71

3.3.4.29 Use Case Rời khỏi nhóm 72

3.3.4.30 Use Case Chat nhóm 73

3.3.4.31 Use Case Xem thông tin phòng Chat nhóm 75

3.3.4.32 Use Case Xem danh sách thành viên nhóm 76

3.3.4.33 Use Case Xoá bạn bè 77

3.3.4.34 Use Case Chat cá nhân 78

3.3.4.35 Use Case Thực hiện Video call 79

3.3.4.36 Use Case Nhận lời mời tham gia Video call 80

3.3.4.37 Use Case Từ chối tham gia Video call 81

3.3.4.38 Use Case Tham gia Video call 82

3.4 Thiết kế dữ liệu 84

3.4.1 Sơ đồ Logic 84

3.4.2 Mô tả chi tiết bảng dữ liệu 85

3.4.2.1 Bảng users 85

3.4.2.2 Bảng chatrooms 87

3.4.2.3 Bảng socketusers 87

3.4.2.4 Bảng verifyemailtokens 87

3.4.2.5 Bảng notifications 88

3.4.2.6 Bảng messages 88

3.4.2.7 Bảng chatRoomRequestSent 89

3.4.2.8 Bảng devices 89

CHƯƠNG 4: XÂY DỰNG ỨNG DỤNG 90

4.1 Danh sách màn hình 90

4.2 Chi tiết màn hình 92

4.2.1 Màn hình “Đăng nhập” 92

4.2.2 Màn hình “Đăng ký” 93

4.2.3 Màn hình “Xác nhận Email” 94

4.2.4 Màn hình “Hoàn thiện thông tin cá nhân” 95

4.2.5 Màn hình “Quên mật khẩu” 96

4.2.6 Màn hình “Trang chủ” 97

4.2.7 Màn hình “Chat” 98

4.2.8 Màn hình “Thông tin phòng Chat cá nhân” 102

4.2.9 Màn hình “Thông tin phòng Chat nhóm” 103

4.2.10 Màn hình “Chỉnh sửa thông tin nhóm” 104

4.2.11 Màn hình “Danh sách thành viên trong nhóm” 105

4.2.12 Màn hình “Mời thành viên mới vào nhóm” 106

4.2.13 Màn hình “Danh sách bạn bè” 107

4.2.14 Màn hình “Thêm bạn bè” 108

4.2.15 Màn hình “Lời mời kết bạn đã gửi” 109

4.2.16 Màn hình “Lời mời kết bạn đã nhận” 110

4.2.17 Màn hình “Danh sách nhóm” 111

4.2.18 Màn hình “Tạo nhóm mới” 112

4.2.19 Màn hình “Lời mời vào nhóm đã gửi” 113

4.2.20 Màn hình “Lời mời vào nhóm đã nhận” 114

4.2.21 Màn hình “Cài đặt” 115

4.2.22 Màn hình “Chỉnh sửa thông tin cá nhân” 116

4.2.23 Màn hình “Quản lý thiết bị” 117

4.2.24 Màn hình “Giới thiệu Thông tin App” 118

4.2.25 Màn hình “Danh sách thông báo” 119

4.2.26 Màn hình “Danh sách tìm kiếm” 120

4.2.27 Màn hình “Video call” 121

TỔNG KẾT 122

TÀI LIỆU THAM KHẢO 124

DANH MỤC HÌNH

Hình 2.1 Logo flutter 18

Hình 2.2 Logo Bloc 20

Hình 2.3 Ví dụ về mô hình ba lớp của BLoC 21

Hình 2.4 Logo NodeJS 23

Hình 2.5 Logo MongoDB 24

Hình 2.6 Logo Firebase 26

Hình 2.7 Logo Socket.IO 27

Hình 2.8 Mô phỏng cách hoạt động của WebRTC 28

Hình 2.9 Logo Elastic Search 29

Hình 3.1 Kiến trúc hệ thống 31

Hình 3.2 Sơ đồ Use Case đối với người dùng chưa đăng nhập 35

Hình 3.3 Sơ đồ Use Case đối với người dùng đã đăng nhập 36

Hình 3.4 Sơ đồ Use Case đối với quản trị viên và thành viên nhóm 37

Hình 3.5 Sơ đồ Use Case đối với bạn bè 38

Hình 3.6 Sơ đồ Logic 84

Hình 3.7 Danh sách các bảng trong cơ sở dữ liệu 85

Hình 4.1 Màn hình "Đăng nhập" 92

Hình 4.2 Màn hình "Đăng ký" 93

Hình 4.3 Màn hình "Xác nhận Email" 94

Hình 4.4 Màn hình "Hoàn thiện thông tin cá nhân" 95

Hình 4.5 Màn hình "Quên mật khẩu" 96

Hình 4.6 Màn hình "Trang chủ" 97

Hình 4.7 Màn hình "Chat" (1) 98

Hình 4.8 Màn hình "Chat" (2) 99

Hình 4.9 Màn hình "Chat" (3) 100

Hình 4.10 Màn hình "Chat" (4) 101

Hình 4.11 Màn hình "Thông tin phòng Chat cá nhân" 102

Hình 4.12 Màn hình "Thông tin phòng Chat nhóm" 103

Hình 4.13 Màn hình "Chỉnh sửa thông tin nhóm" 104

Hình 4.14 Màn hình "Danh sách thành viên trong nhóm" 105

Hình 4.15 Màn hình "Mời thành viên mới vào nhóm" 106

Hình 4.16 Màn hình "Danh sách bạn bè" 107

Hình 4.17 Màn hình "Thêm bạn bè" 108

Hình 4.18 Màn hình "Lời mời kết bạn đã gửi" 109

Hình 4.19 Màn hình "Lời mời kết bạn đã nhận" 110

Hình 4.20 Màn hình "Danh sách nhóm" 111

Hình 4.21 Màn hình "Tạo nhóm mới" 112

Hình 4.22 Màn hình "Lời mời vào nhóm đã gửi" 113

Hình 4.23 Màn hình "Lời mời vào nhóm đã nhận" 114

Hình 4.24 Màn hình "Cài đặt" 115

Hình 4.25 Màn hình "Chỉnh sửa thông tin cá nhân" 116

Hình 4.26 Màn hình "Quản lý thiết bị" 117

Hình 4.27 Màn hình "Giới thiệu Thông tin App" 118

Hình 4.28 Màn hình "Danh sách thông báo" 119

Hình 4.29 Màn hình "Danh sách tìm kiếm" 120

Hình 4.30 Màn hình "Video call" 121

DANH MỤC BẢNG

Bảng 3.1 Mô tả các thành phần hệ thống 32

Bảng 3.2 Danh sách các Actor 39

Bảng 3.3 Danh sách Use Case 39

Bảng 3.4 Use Case Đăng nhập 42

Bảng 3.5 Use Case Đăng ký 44

Bảng 3.6 Use Case Quên mật khẩu 46

Bảng 3.7 Use Case Xem danh sách bạn bè 47

Bảng 3.8 Use Case Xem danh sách lời mời kết bạn đã nhận 48

Bảng 3.9 Use Case Từ chối lời mời kết bạn 49

Bảng 3.10 Use Case Chấp nhận lời mời kết bạn 50

Bảng 3.11 Use Case Xem danh sách lời mời kết bạn đã gửi 51

Bảng 3.12 Use Case Thêm bạn bè 52

Bảng 3.13 Use Case Hủy lời mời kết bạn 54

Bảng 3.14 Use Case Tạo nhóm 55

Bảng 3.15 Use Case Xem danh sách nhóm 56

Bảng 3.16 Use Case Xem danh sách lời mời vào nhóm đã nhận 57

Bảng 3.17 Use Case Từ chối lời mời 58

Bảng 3.18 Use Case Chấp nhận lời mời 59

Bảng 3.19 Use Case Xem danh sách phòng Chat 60

Bảng 3.20 Use Case Chỉnh sửa thông tin cá nhân 61

Bảng 3.21 Use Case thông báo 62

Bảng 3.22 Use Case Xem danh sách thông báo 63

Bảng 3.23 Use Case Tìm kiếm 64

Bảng 3.24 Use Case Đăng xuất 65

Bảng 3.25 Use Case Quản lý thiết bị 66

Bảng 3.26 Use Case Xem danh sách lời mời đã gửi 66

Bảng 3.27 Use Case Mời bạn bè vào nhóm 67

Bảng 3.28 Use Case Thu hồi lời mời vào nhóm 68

Bảng 3.29 Use Case Xóa nhóm 69

Bảng 3.30 Use Case Xóa thành viên khỏi nhóm 70

Bảng 3.31 Use Case Chỉnh sửa thông tin phòng Chat nhóm 71

Bảng 3.32 Use Case Rời khỏi nhóm 72

Bảng 3.33 Use Case Chat nhóm 73

Bảng 3.34 Use Case xem thông tin phòng Chat nhóm 75

Bảng 3.35 Use Case Xem danh sách thành viên nhóm 76

Bảng 3.36 Use Case Xóa bạn bè 77

Bảng 3.37 Use Case Chat Cá nhân 78

Bảng 3.38 Use Case Thực hiện Video call 79

Bảng 3.39 Use Case Nhận lời mời tham gia Video call 80

Bảng 3.40 Use case Từ chối lời mời tham gia video call 81

Bảng 3.41 Use Case Tham gia Video call 82

Bảng 3.42 Mô tả chi tiết bảng users 85

Bảng 3.43 Mô tả chi tiết bảng chatrooms 87

Bảng 3.44 Mô tả chi tiết bảng socketusers 87

Bảng 3.45 Mô tả chi tiết bảng verifyemailtokens 87

Bảng 3.46 Mô tả chi tiết bảng notifications 88

Bảng 3.47 Mô tả chi tiết bảng messages 88

Bảng 3.48 Mô tả chi tiết bảng chatRoomRequestSent 89

Bảng 3.49 Mô tả chi tiết bảng devices 89

16

CHƯƠNG 1: GIỚI THIỆU CHUNG 1.1 Lý do chọn đề tài

Hiện nay, Internet đã trở thành một phần không thể thiếu trong cuộc sống của chúng

ta Internet hiện hữu ở mọi mặt trong xã hội, ảnh hưởng hoàn toàn đến cách chúng ta sống, bao gồm việc mua sắm, tìm hiểu thông tin, phương pháp học tập, làm việc,… và đặc biệt là cách chúng ta giao tiếp Trước thời kỳ Internet, chúng ta thông thường cần phải gặp trực tiếp, gọi điện thoại hoặc gửi thư để có thể trao đổi thông tin cho nhau Mỗi cách trong ba cách trên đều có điểm lợi và hại, tỉ như việc gặp trực tiếp cần phải sắp xếp thời gian phù hợp cho cả hai, hay là gửi thư sẽ tốn rất nhiều thời gian, Sau khi Internet phổ biến, Chat và Video call trở thành phương tiện giao tiếp chính trong cuộc sống của chúng ta, chúng ta có thể Chat mọi lúc và mọi nơi, chỉ cần có một chiếc điện thoại và Internet, chúng ta cũng có thể lưu trữ thông tin bởi vì mọi nội dung Chat của chúng ta sẽ được lưu lại, hơn nữa, chúng ta có thể trao đổi thông tin với nhiều người hơn, thông qua tính năng Group Chat Khi chúng ta cần trao đổi trực tiếp, chúng ta có thể Video call mà không cần phải sắp xếp thời gian Những lý do này là lý do khiến cho việc giao tiếp ngày càng dễ dàng và nhanh chóng hơn

Bên cạnh đó, chúng ta vừa trải qua đại dịch Covid Trong quá trình chống lại đại dịch, việc phong tỏa, làm việc Online tại nhà đã trở nên phổ biến và thay đổi nhận thức của chúng ta về cách giao tiếp trong công việc và cuộc sống Nhu cầu trao đổi thông tin qua Internet ngày càng trở nên thiết yếu Đó là lý do nhóm quyết định xây dựng một phần mềm Chat nhằm giúp việc trao đổi thông tin qua Chat và Video call trở nên dễ dàng, thuận tiện hơn

1.2 Phạm vi nghiên cứu

- Các bài toán về hệ thống thời gian thực, Full-text search và quản lý người dùng

- Phần mềm CS Chat App là phần mềm Chat được dựa trên công nghệ Flutter cho giao diện Mobile và NodeJS, ExpressJS cho phần Backend

- Ngôn ngữ lập trình: Dart, TypeScript

- Framework: Flutter, ExpressJS

- Database: MongoDB

- Socket.IO, Web RTC, Firebase

Đối tượng trong phạm vi đề tài hướng đến:

- Người dùng có nhu cầu trao đổi thông tin, thực hiện Video call qua phần mềm

1.4 Phương pháp nghiên cứu

- Nghiên cứu từ các ứng dụng hiện có trên thị trường, quan sát và rút ra những ưu, nhược điểm của các ứng dụng đó (Messenger, Zalo, Telegram,…)

- Tìm hiểu các công nghệ liên quan đến Chat, thử nghiệm và chọn ra những công nghệ phù hợp nhất với khả năng của nhóm

- Tham khảo ý kiến của giảng viên hướng dẫn để đạt được kết quả tốt nhất cho đề tài

18

CHƯƠNG 2: CÔNG NGHỆ SỬ DỤNG 2.1 Flutter

2.1.1 Giới thiệu

Hình 2.1 Logo flutter

Flutter là một UI framework di động mã nguồn mở và hoàn toàn miễn phí do Google phát triển, và được công bố vào năm 2015 nhưng đến tháng 5 năm 2017 mới chính thức phát hành Flutter cho phép các nhà phát triển có thể tạo ra các bộ giao diện native chất lượng cao trong thời gian rất ngắn Ngoài ra, việc sử dụng Flutter cho phép các nhà phát triển với một Codebase có thể phát triển ứng dụng có trải nghiệm tốt trên

đa nền tảng bao gồm: Mobile (Android và IOS), Web, Desktop App, Linux, giúp cho các Team phát triển có thể tiết kiệm nhân lực và chi phí

Flutter có 2 phần quan trọng:

+ SDK (Software Development Kit): là một bộ tập hợp các công cụ hỗ trợ các nhà phát triển bao gồm công cụ biên dịch Code thành mã máy Native

19

+ Framework: Flutter cung cấp một số lượng lớn các Widget (Button, ListView, Text Input, ScrollBar, ), giúp cho các nhà phát triển có thể xây dựng giao diện nhanh chóng, tiện lợi, đẹp mắt

Ưu điểm:

- Phát triển giao diện đẹp, Animation đẹp mắt: Flutter cung cấp số lượng lớn các Widget, phong cách chuẩn Material và Cupertino, cho phép các nhà phát triển có thể tùy biến lại phụ thuộc vào nhu cầu của mình, từ đó giúp các nhà phát triển xây dựng giao diện nhanh chóng, tiện lợi

- Hot reload: Flutter được viết dựa trên ngôn ngữ Dart, một ngôn ngữ lập trình hướng đối tượng có hỗ trợ JIT (Just in time), từ đó cho phép framework này có thể cung cấp cơ chế hot reload Cơ chế này hoạt động bằng cách đưa những File Source Code đã được cập nhật, chỉnh sửa vào một máy ảo Virtual Machine (VM) của Dart Sau khi VM được cập nhật thì Flutter sẽ tự động tái xây dựng các Widget Tree và cho nhà phát triển xem được sự thay đổi trong app sau khi cập nhật Code mới Với cơ chế này, các nhà phát triển có thể cập nhật ứng dụng nhanh chóng ngay sau khi code xong mà không phải đợi build lại App

- Native Performance: Flutter giao tiếp gần như là trực tiếp với Native mà không phải thông qua một “cái cầu” như đối thủ của nó là React Native,

do đó Flutter cung cấp một hiệu năng tiệm cận với các Native app Sở dĩ

có thể làm được như này là do cơ chế AOT (Ahead of Time) giúp cho biên dịch nhanh hơn, chính xác và Native code

Nhược điểm:

- Render UI: Render UI được nhóm phát triển viết lại hoàn toàn mà không liên quan đến UI của Native app điều này tạo ra sự đánh đổi khi đồng nhất được giao diện trên các nền tảng, phiên bản nhưng lại sử dụng Memory lớn

20

- Phải học ngôn ngữ Dart: Flutter được viết dựa trên ngôn ngữ lập trình hướng đối tượng Dart, vốn là ngôn ngữ rất ít được sử dụng trước thời điểm Flutter ra mắt Tuy đây không phải một vấn đề quá lớn nhưng cũng là rào cản của Flutter so với React Native vốn được viết dựa trên ngôn ngữ lập trình JavaScript - một ngôn ngữ rất phổ biến ở thời điểm hiện tại

- Flutter chỉ mới được phát hành chính thức gần đây và vẫn còn đang được tiếp tục phát triển do đó vẫn còn một số API vẫn chưa được ổn định và có thay đổi lớn qua các bản cập nhập Tuy được giới thiệu có thể phát triển

đa nền tảng, nhưng Flutter hiện tại hỗ trợ chưa tốt trong việc phát triển trên nền tảng Web, Linux, Desktop App

2.1.2 Bloc - State Management

2.1.2.1 Giới thiệu về Bloc

Hình 2.2 Logo Bloc

Bloc (viết tắt của Business Logic Component) là một thư viện giúp quản lý các State trong các ứng dụng của Flutter Bloc được xây dựng dựa trên RxDart, với “event”

là Input và “state” là Output Điểm độc đáo ở State Management này là thường người ta

sẽ chia các Bloc thành các Component và mỗi Component chỉ quản lý duy nhất một

2.1.2.2 Kiến trúc

Hình 2.3 Ví dụ về mô hình ba lớp của BLoC

Trong một app Flutter, ta có thể chia thành 3 lớp như sau:

Domain Layer: Tầng này như một cây cầu kết nối giữa 2 tầng là Feature Layer và Data Layer Ở đây là nơi tổng hợp các data từ tầng Data Layer và tiến hành xử lý Logic

để tầng Feature Layer có thể sử dụng được Các thành phần trong tầng này được gọi là các Repository

Feature Layer: Đây là tầng sẽ làm việc trực tiếp và thể hiện ra cho người dùng Tầng này bao gồm các tính năng và các Business Logic của nó Thường các nhà phát triển sẽ phân chia các chức năng sao cho chúng độc lập với nhau để có thể dễ dàng thêm, xóa, sửa mà không ảnh hưởng đến các tính năng khác trong phần mềm, cách đơn giản để thực hiện việc này là chia theo từng trang Đối với mỗi tính năng, các State và Business logic

sẽ được quản lý bởi Bloc Bloc sẽ tương tác với một hoặc nhiều Repository từ tầng Domain layer, đồng thời nó cũng sẽ nhận các Event từ UI và trả về các State để Render lại tầng UI

23

2.2 NodeJS

2.2.1 Giới thiệu

Hình 2.4 Logo NodeJS

- NodeJS là một môi trường thực thi JavaScript đa nền tảng mã nguồn mở

- Node.js ra mắt vào năm 2009, bởi Ryan Dahl

- Phần core của Node.js hầu hết được viết bằng C++ Chính vì thế mà tốc độ

xử lý và hiệu năng khá cao

- Bên cạnh đó, Node.js còn tạo ra ứng dụng có tốc độ xử lý nhanh với thời gian thực

- Node.js cũng được áp dụng để tạo các sản phẩm có lượng truy cập lớn, mở rộng nhanh và đổi mới công nghệ hoặc tạo dự án Startup tiết kiệm thời gian nhất

- Những điểm mạnh của NodeJS bao gồm:

• Bất đồng bộ và phát sinh sự kiện (Non-blocking and Event Driven): Tất các các APIs của thư viện Node.js đều bất đồng bộ (non-blocking), vì thế không cần đợi một API trả về dữ liệu Server chuyển sang một API khác sau khi gọi nó và có cơ chế riêng để gửi

• Đơn giản – Hiệu năng cao: Node.js sử dụng một mô hình luồng đơn luồng (single thread) và các sự kiện lặp (event-loop) Cơ chế sự kiện cho phép phía Server trả về phản hồi theo non-blocking, đồng thời tăng hiệu quả sử dụng Các luồng đơn cung cấp dịch vụ cho nhiều request hơn hẳn Server truyền thống

2.2.2 Lý do sử dụng

- Nodejs khá nhẹ nhưng lại hiệu quả nhờ vào cơ chế non-blocking I/O, chạy

đa nền tảng trên Server và dùng Event-driven

- Có thể phát triển NodeJS trên mọi nền tảng, bao gồm Windows, Linux, MacOS

- Cộng đồng lập trình viên sử dụng NodeJs lớn và có nhiều thư viện

- NodeJS có tốc độ xử lý nhanh, có thể chịu đựng được lượng lớn người dùng truy cập cùng thời điểm

2.3 MongoDB

2.3.1 Giới thiệu

Hình 2.5 Logo MongoDB

- Những điểm mạnh của MongoDB bao gồm:

• Linh hoạt: Các document của MongoDB không yêu cầu phải có một Schema cố định như các hệ quản trị cơ sở dữ liệu quan hệ, dẫn đến việc linh hoạt trong quá trình phát triển phần mềm

• Dễ dàng mở rộng: MongoDB hỗ trợ tốt trong khả năng mở rộng theo chiều ngang (Horizontal Scalability), nghĩa là khi cần nâng cao hiệu năng lưu trữ và truy xuất, chúng ta chỉ cần bổ sung thêm server

• Hiệu năng cao: MongoDB lưu trữ dữ liệu dưới dạng Bson và truy vấn sử dụng ngôn ngữ MQL (MongoDB Query Language) nên có hiệu suất truy vấn cao

2.3.2 Lý do sử dụng

- MongoDB lưu trữ dữ liệu dưới dạng Bson, được xây dựng dựa trên Json và

sử dụng ngôn ngữ MQL, được xây dựng dựa trên JavaScript Vì thế hệ quản trị cơ sở dữ liệu sẽ tương thích tốt với lại server được xây dựng bằng JavaScript, từ đó nâng cao tốc độ phát triển

- MongoDB dễ dàng cài đặt, tương thích mọi nền tảng, từ đó dễ dàng triển khai MongoDB trên bất kỳ hệ điều hành nào

- MongoDB cho hiệu suất đọc ghi cao, dễ dàng mở rộng khi phát triển

26

2.4 Firebase

Hình 2.6 Logo Firebase

2.4.1 Giới thiệu

Firebase là một nền tảng được phát triển bởi Google, cung cấp rất nhiều công cụ

và dịch vụ tiện ích để giúp các nhà phát triển có thể xây dựng nhanh các ứng dụng, trò chơi bằng cách đơn giản hóa thao tác thực hiện

Firebase cung cấp cho người sử dụng một cơ sở dữ liệu hoạt động trên nền tảng đám mây với hệ thống máy chủ của Google

Các dịch vụ của Firebase có những tính năng là miễn phí, tuy nhiên khi có nhu cầu hơn, một số tính năng sẽ yêu cầu trả phí

Các chức năng của Firebase đã được áp dụng trong đồ án:

- Firebase Authentication: Firebase Authentication giúp người sử dụng có thể dễ dàng, nhanh chóng trong việc triển khai các tính năng xác thực người dùng với Google, Facebook, Apple,

- Firebase Storage: Firebase storage dùng để lưu trữ được nhiều dạng dữ liệu bao gồm tập tin, hình ảnh, Video Google còn tích hợp Google security vào Firebase storage giúp tải lên hoặc tải về các ứng dụng, phần mềm một cách tiện lợi, đơn giản

2.4.2 Lý do sử dụng

- Xây dựng các tính năng xác thực người dùng, lưu trữ hình ảnh, … một cách dễ dàng, nhanh chóng, giúp nhóm có thể tiết kiệm thời gian, đảm bảo tiến độ

- Socket.IO là 1 module trong NodeJS, được phát triển vào năm 2010 Mục đích lớn nhất để Socket.io ra đời là việc giao tiếp ngay tức khắc giữa Client

và Server

2.5.2 Lý do sử dụng

- Đồ án của nhóm là việc xây dựng phần mềm Chat nên yêu cầu quan trọng nhất của phần mềm là Real-time, do đó Socket.IO là lựa chọn hợp lý vì đây là công nghệ mã nguồn mở do đó sẽ không bị các vấn đề liên quan đến chi phí như các bên cung cấp ở bên thứ 3 như Firebase,

28

- Bảo mật cao: SocketIO được xây dựng dựa trên Engine.IO, nó sẽ khởi chạy phương thức Long-polling đầu tiên, sau đó sẽ tới những phương thức kết nối tốt hơn Bên cạnh việc thiết lập chặt chẽ đó, Socket.IO còn tự tạo các kết nối bảo mật như: Proxy,

- Mã nguồn mở miễn phí: WebRTC là dự án mã nguồn mở hoàn toàn miễn phí và

có sẵn trên mọi nền tảng Vì nó là mã nguồn mở miễn phí, do đó khi nhóm triển

29

khai tính năng Video call giữa 2 người với nhau sẽ không bị giới hạn thời gian, chi phí như các bên cung cấp bên thứ 3 khác

- Bảo mật: Giao thức SRTP (Secure Real-time Transport Protocol) được dùng để

mã hoá các dữ liệu, chống lại các việc nghe trộm khi thực hiện Call

- Không cần cài thêm plugin: Đây chính là một điểm nổi bật của WebRTC mang lại, vì không cần phải cài thêm plugin do đó nó mang lại sự tiện lợi cũng như tiết kiệm chi phí, tối ưu tốc độ,

2.7 Elastic Search

2.7.1 Giới thiệu

Hình 2.9 Logo Elastic Search

- Elastic Search là một công cụ tìm kiếm đa nền tảng mã nguồn mở

- Elastic Search ra mắt vào năm 2004, bởi Shay Banon

- Elastic Search được viết bằng Java, xây dựa trên thư viện Apache Lucene

- Elastic Search thực chất hoạt động như một Web Server, có khả năng tìm kiếm nhanh chóng thông qua Restful API, từ đó giảm áp lực lên Backend Server, và không phụ thuộc vào ngôn ngữ lập trình của Client

- Elastic Search là một hệ thống phân tán và có khả năng mở rộng theo chiều ngang (Horizontal Scalability)

- Những điểm mạnh của Elastic Search bao gồm

• Hiệu năng cao: Elastic Search có khả năng thực hiện tìm kiếm cực nhanh

30

• Dễ dàng mở rộng: Elastic Search hỗ trợ tốt trong việc mở rộng theo chiều ngang (Horizontal Scalability), nghĩa là khi cần nâng cao hiệu năng lưu trữ và truy xuất, chúng ta chỉ cần bổ sung thêm Server

2.7.2 Lý do sử dụng

- Elastic Search lưu trữ dữ liệu dựa trên Document và không có Schema cố định, tương tự như MongoDB Từ đó, việc đồng bộ giữa MongoDB và Elastic Search diễn ra hoàn toàn tự động và không cần sự can thiệp của lập trình viên, và có rất nhiều công cụ hỗ trợ việc đồng bộ

- Elastic Search có thể giảm áp lực cho Server, từ đó giúp hệ thống tăng khả năng chịu tải

- Elastic Search đã hỗ trợ các API nhằm phục vụ mục đích tìm kiếm, từ đó giúp việc tìm kiếm trở nên nhanh chóng và ổn định, chính xác hơn

31

CHƯƠNG 3: THIẾT KẾ HỆ THỐNG 3.1 Xây dựng hệ thống

3.1.1 Kiến trúc hệ thống ứng dụng

Hình 3.1 Kiến trúc hệ thống

View Hiển thị các thành phần giao diện người dùng

Bloc Nơi xử lý Logic của giao diện và kết nối đến

Repository

Repository Thành phần trừu tượng hóa các Restful API và

RestfulAPI Nơi thực hiện kết nối giữa Frontend và Backend

2 Backend

Controller Nơi tiếp nhận các yêu cầu từ Frontend

Service Nơi xử lý logic của Server Database Cơ sở dữ liệu của ứng dụng ElasticSearch Thành phần xử lý công việc tìm kiếm của ứng dụng

3 Firebase Là nơi xử lý lưu trữ thông tin đăng nhập của người

dùng Là nơi lưu trữ hình ảnh của người dùng tải lên

33

3.2 Phân tích yêu cầu

3.2.1 Đăng ký

Người dùng có 2 cách để tạo mới một tài khoản trên app:

- Đăng ký thông qua Email và Password Với phương thức này sau khi hoàn thành Form điền Email và Password, Confirm Password, người dùng sẽ được chuyển đến trang “Xác thực Email”, đồng thời sẽ có một Email gửi đến Gmail của người dùng để xác thực

- Đăng ký qua tài khoản Google

Sau khi đăng ký tài khoản thành công, người dùng cần phải điền thông tin bao gồm tên, số điện thoại, hình đại diện và giới thiệu để sử dụng App

3.2.2 Đăng nhập

Để có thể vào trong App, người dùng cần phải tiến hành đăng nhập Người dùng cũng sẽ có 2 cách để đăng nhập là thông qua Email và Password hoặc đăng nhập với Google

3.2.3 Xem danh sách phòng Chat

Người dùng sau khi đăng nhập có thể thấy được danh sách phòng Chat mà mình đang tham gia bao gồm phòng Chat cá nhân và phòng Chat nhóm Đồng thời có thể xem khái quát thông tin của phòng Chat như ảnh phòng Chat (ảnh của bạn bè nếu đó là phòng Chat cá nhân, ảnh nhóm nếu đó là phòng Chat nhóm), tên phòng Chat, tin nhắn mới nhất, thời gian mới nhất Khi có tin nhắn mới ở một phòng Chat, phòng Chat này sẽ được đẩy lên đầu danh sách tin nhắn của người dùng theo thời gian thực

3.2.4 Nhắn tin trong phòng Chat

Người dùng chọn phòng Chat và có thể thực hiện nhắn tin, gửi hình ảnh, Emoji, Sticker, gửi bản ghi âm thanh thời gian thực Khi người dùng kéo lên để xem các tin nhắn cũ, giao diện sẽ xuất hiện một nút để giúp người dùng có thể kéo đến tin nhắn mới nhất nhanh chóng

34

3.2.5 Quản lý nhóm

Nếu người dùng là Admin (chủ sở hữu của phòng Chat nhóm) thì có thể thêm, xóa, cập nhập phòng Chat, mời bạn bè vào nhóm và có thể xóa thành viên khỏi nhóm

3.2.6 Tham gia phòng Chat nhóm

Người dùng có thể nhận được lời mời tham gia vào nhóm từ bạn bè của mình và

có thể chủ động chấp nhận hoặc từ chối lời mời này Khi ở trong nhóm, người dùng có thể chủ động rời khỏi nhóm

3.2.7 Quản lý bạn bè

Người dùng có thể xem danh sách, thêm, xoá bạn bè Sau khi kết bạn sẽ tự động tạo phòng Chat cá nhân bao gồm bản thân người dùng và bạn bè Sau khi xoá kết bạn sẽ xoá toàn bộ dữ liệu phòng Chat

3.2.10 Quản lý thông tin cá nhân

Người dùng có thể cập nhật thông tin cá nhân của mình bao gồm thay đổi Avatar, các thông tin như họ tên, hình đại diện, số điện thoại và giới thiệu bản thân

3.2.11 Video call

Người dùng có thể thực hiện Call Video với bạn bè của mình Khi thực hiện cuộc gọi, người bên kia sẽ nhận được thông báo có người gọi tới Nếu người bên kia từ chối, cuộc gọi sẽ bị huỷ Nếu người bên kia chấp nhận, cả hai sẽ tiến hành Video call với nhau, ngoài ra còn có một số chức năng như ngắt Camera, đổi Camera trước hoặc sau, tắt âm thanh của đối phương, tắt Mic

35

3.3 Thiết kế hệ thống:

3.3.1 Sơ đồ Use Case:

Hình 3.2 Sơ đồ Use Case đối với người dùng chưa đăng nhập

36

Hình 3.3 Sơ đồ Use Case đối với người dùng đã đăng nhập

37

Hình 3.4 Sơ đồ Use Case đối với quản trị viên và thành viên nhóm