ĐỒ ÁN ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

ĐỒ ÁN 2

ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN

Đồ án 2 – SE122.L11.PMCL – VN
ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

Giảng viên hướng dẫn: Thầy NGUYỄN TUẤN ANH
Sinh viên thực hiện:

TP HỒ CHÍ MINH, 22/01/2021

Phan

Lê

Trọng

17520843
Nguyễn Tài Bồi

– 17520284

Nhân

–

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
KHOA CÔNG NGHỆ PHẦN MỀM

PHAN LÊ TRỌNG NHÂN – 17520843
NGUYỄN TÀI BỒI – 17520284

ĐỒ ÁN 2

ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN
CHAT ONLINE APPLICATION

KỸ SƯ/ CỬ NHÂN NGÀNH KĨ THUẬT PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN
Thầy NGUYỄN TUẤN ANH

TP HỒ CHÍ MINH, 2021


LỜI CẢM ƠN
Lời đầu tiên, em xin bày tỏ lòng biết ơn sâu sắc đến thầy Nguyễn Tuấn Anh –
giảng viên hướng dẫn chúng em thực hiện Đồ án 2. Thầy đã cùng đồng hành và tận
tình hướng dẫn cho chúng em qua từng giai đoạn của đồ án. Nhờ có sự giúp đỡ
nhiệt tình của thầy mà chúng em có thể hoàn thành được được đồ án này một cách
tốt nhất.
Vì kiến thức của chúng em vẫn cịn hạn hẹp nên không thể tránh khỏi những
thiếu sót trong quá trình thực hiện đồ án. Tuy nhiên, chúng em đã cố gắng hồn
thành đúng hạn và hạn chế các lỡi nhiều nhất có thể. Nhóm chúng em luôn mong

đợi nhận được những ý kiến đóng góp quý báu từ thầy và qua đó có thể rút kinh
nghiệm, tự sửa chữa, hồn thiện bản thân mình trên tinh thần nghiêm túc, tự giác
học hỏi.
Trong quá trình làm đề tài báo cáo, sẽ không thể tránh khỏi các thiếu sót, rất
mong nhận được phản hồi từ thầy và các bạn để góp phần làm cho bản báo cáo
thêm hoàn thiện hơn.
Chân thành cảm ơn thầy!

LỜI NHẬN XÉT CỦA GIẢNG VIÊN

…..
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………


…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………

…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
…………………………………………………………………………………
……………………………………………………………………………
MỤC LỤC
MỞ ĐẦU

1

Lí do chọn đề tài

1

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

1

Đối tượng hướng đến

1

Chương 1 GIỚI THIỆU VỀ FLUTTER

2


1.1. Giới thiệu ngơn ngữ lập trình Dart

2

1.1.1. Ngơn ngữ lập trình Dart là gì?

2

1.1.2.Ưu điểm của Dart

2

1.2. Giới thiệu framework Flutter

3

1.2.1.Flutter là gì?

3

1.2.2.Kiến trúc của Flutter

4

1.2.3.Ưu điểm của Flutter so với các framework khác

5

CHƯƠNG 2: CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER

8

2.1. Yêu cầu cấu hình phần cứng

8

2.2. Hướng dẫn cài đặt Flutter

8

2.3. Tạo project Flutter Android Studio

9

CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN VỚI FLUTTER

14

3.1. Đặt vấn đề

14

3.2. Phạm vi ứng dụng

14

3.3. Các chức năng chính

15

3.4. Phân tích thiết kế

15

3.5. Các màn hình giao diện chính của ứng dụng

17

CHƯƠNG 4: KẾT LUẬN

23

4.1. Kết quả thu được

23

4.2. Khó khăn gặp phải

23

4.3. Hướng phát triển trong tương lai

24

DANH MỤC HÌNH


Hình 1.1 Logo Dart

2

Hình 2.2 Logo Flutter

3

Hình 2.3 Kiến trúc Flutter

4

Hình 2.1 Chỉnh sửa biến mơi trường

8

Hình 2.2 Chẩn đốn Flutter với flutter doctor

9

Hình 2.3 Extension Flutter trên Visual Studio

9

Hình 2.4 Cài đặt flutter

10

Hình 2.5 Xác nhận cài đặt Flutter

10

Hình 2.6 Giao diện Android Studio khi kích hoạt Flutter

11

Hình 3.1 Lược đồ phân cấp chức năng

15

Hình 3.2 Use case tổng quát

16

Hình 3.3 Use case Đăng nhập

16

Hình 3.4 Use case Thông báo tin nhắn

16

Hình 3.5 Use case Chatbox

17


DANH MỤC BẢNG
Bảng 2-1 So sánh giữa Flutter và React Native

7


MỞ ĐẦU

Lí do chọn đề tài
Hiện nay, trong thời đại công nghiệp hóa - hiện đại hóa, công nghệ 4.0 đang
dần được đưa vào cuộc sống từng ngày. Bên cạnh đó, không phải bất cứ ai cũng có
thể áp dụng công nghệ một cách thành thục và có khả năng tự tìm hiểu được, có
thể sẽ gặp những khó khăn về sự cố cơng nghê, các trục trặc máy tính, hệ thống và
hỏng hóc thiết bị. Hoặc khi đi làm xa, công tác không thể liên lạc bằng song điện
thoại và ứng dụng trên máy tính của bạn để đảm bảo hiệu suất. Thay vì thực hiện
các cuộc gọi phải tốn phí cao vì mã vùng và để đảm bảo năng suât làm việc mọi
lúc mọi nơi, bọn em quyết định xây dựng. Ứng dụng trò chuyện trực tuyến để khắc
phục những khiếm khuyết trên.

Phương pháp nghiên cứu
Nhận thấy nhóm đối tượng chủ yếu là các bạn trẻ, doanh nhân và một số doanh
nghiệp. Nhóm chúng em sẽ thực hiện đề tài này bằng ngôn ngữ Dart, công nghệ ứng
dụng là Flutter. Quá trình tìm hiểu nghiệp vụ nhóm chúng em có tham khảo các
diễn đàn về trò chuyện trực tuyến (Messenger, Zalo,…) . Cùng với đó là tham khảo
các ứng dụng có sẵn trên chợ ứng dụng để có cái nhìn tổng quát về đề tài đã chọn.

Đối tượng hướng đến
Ứng dụng của nhóm được định hướng đến những người có nhu cầu trò chuyện
trực tuyến hay nói cách khác là thời gian thực, tiện lợi bằng song Internet, xem xét
và khắc phục lỗi cho khách hàng từ xa hay đơn giản là chia sẽ thông tin. Đây là
nhóm người thường xuyên sử dụng máy tính, laptop. Do đó họ có khả năng sẽ cần
chia sẽ, giúp đỡ từ bạn bè, đồng nghiệp từ xa. Ứng dụng này sẽ là trợ thủ đắc lực
giúp họ luôn có thể nhận được trợ giúp từ xa thơng qua việc trị chuyện trực tuyến
khơng tính phí. Từ đó có thể nâng cao được năng suất làm việc cũng như chia sẽ tài
liệu.

1

Chương 1 GIỚI THIỆU VỀ FLUTTER
1.1. Giới thiệu ngôn ngữ lập trình Dart

Hình 1.1 Logo Dart
-

1.1.1. Ngơn ngữ lập trình Dart là gì?
Dart là ngơn ngữ lập trình mới, được phát triển bởi Google, hiện đã được
chấp thuận bởi tổ chức Ecma (ECMA-408). Nó được sử dụng để xây dựng
các loại ứng dụng: web, server, di động (IOS và Android).

-

Dart là ngơn ngữ lập trình hướng đối tượng, với cơ chế garbage collector, cú
pháp kiểu C. Nó hỗ trợ những khái niệm lập trình hiện đại như interface,
mixin, abstract, generic, và type-safe. Đây là ngơn ngữ lập trình mã nguồn
mở, được công bố trên Github.
1.1.2.Ưu điểm của Dart
Một số ưu điểm vượt trội của Dart so với các ngôn ngữ lập trình khác:

-

Năng suất: Dart có cú pháp dễ hiểu, rõ ràng và súc tích. Type-safe giúp lập
trình viên có thể xác định sớm các lỗi. Bên cạnh đó Dart có hệ sinh thái rộng
lớn lên đến hàng nghìn packages.

-

Nhanh: Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có được

dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web.

-

Dễ làm quen: Do Dart có cú pháp kiểu C/C++, nên rất dễ học. Nếu bạn đã
biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài
ngày.

2


-

Reactive: Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản lý
các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget UI,
thông qua phân bổ đối tượng nhanh và garbage collector. Dart hỡ trợ lập
trình khơng đồng bộ thơng qua các tính năng ngôn ngữ và API sử dụng các
đối tượng Future và Stream.
Từ ngơn ngữ lập trình Dart, Google giới thiệu Framework Futter sử
dụng ngôn ngữ Dart để phát triển ứng dụng di động chạy đa nền tảng.

1.2. Giới thiệu framework Flutter

Hình 2.2 Logo Flutter
1.2.1. Flutter là gì?
- Flutter được phát triển nhằm giải quyết bài toán thường gặp trong việc phát
triển ứng dụng là Fast Development (phát triển ứng dụng nhanh) và Native
Performance (hiệu suất tối ưu cho từng nền tảng). Nếu như React Native chỉ
đảm bảo Fast Development còn Native language chỉ đảm bảo Native
Performance thì Flutter làm được cả 2 điều trên.

-

Phiên bản đầu tiên của Flutter được gọi là "Sky" và chạy trên hệ điều hành
Android. Nó được công bố tại hội nghị nhà phát triển Dart 2015, hỗ trợ các
ứng dụng hoạt động ở mức 120 khung hình trên giây.

-

Trong bài phát biểu chính ở hội nghị Google Developer Days tại Thượng
Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiên bản
lớn cuối cùng trước Flutter 1.0.

3


-

Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự kiện
Flutter Live, là phiên bản "ổn định" đầu tiên framework này.
1.2.2. Kiến trúc của Flutter

Hình 2.3 Kiến trúc Flutter
Flutter được viết chia làm hai tầng:
-

Tầng ở trên sử dụng ngôn ngữ Dart cung cấp các đoạn mã xây dựng lên một
ứng dụng Flutter. Các đoạn mã này cung cấp phương tiện để có thể thay đổi
và chỉnh sửa chúng. Từ đó giúp ứng dụng của lập trình viên có thể được tùy
chỉnh theo mong muốn. Tầng Framework này giúp lập trình viên thay đổi
mã nguồn ứng dụng ở thời điểm compile time.

-

Tầng thứ hai của Flutter nằm ở sâu bên dưới và được viết bằng ngôn ngữ
C++. Tầng Shell này chứa các công cụ trợ giúp ứng dụng Flutter trong quá
trình chạy. Ở tầng này còn có máy ảo Dart VM. Khái niệm máy ảo là khái
niệm về một ứng dụng chạy song song với mã nguồn chính như một phần
của ứng dụng. Máy ảo Dart VM có ba nhiệm vụ chính bao gồm:
+ Làm ứng dụng trung gian giữa mã nguồn được viết bởi Dart và thiết
bị phần cứng (hoặc phần mềm nằm ngoài ứng dụng).
+ Thông dịch các đoạn mã Dart theo phương thức JIT (Just in time)
hoặc AOT (Ahead of Time).

4


+ Thực thi các đoạn mã đã được thông dịch hoặc biên dịch cũng như
cung cấp các runtime system bao gồm garbage collector, và các thư
viện cần có khác.
⇨ Máy ảo Dart VM chịu trách nhiệm lớn nhất trong việc quản lý các
runtime system, hỗ trợ debugging hoặc hot reload cho các ứng dụng
viết bằng Flutter.
1.2.3. Ưu điểm của Flutter so với các framework khác
- Flutter là bộ SDK đa nền tảng, hỗ trợ cả Android, iOS và web.
-

Hỗ trợ hot reload – các sửa đổi trong mã nguồn sẽ được cập nhật trực tiếp
lên ứng dụng đang chạy. Ngoài ra Flutter cịn bổ sung thêm tính năng
stateful hot reload - cập nhật ngay lập tức các thay đổi lên ứng dụng đang
chạy mà không cần phải khởi động lại và giữ trạng thái đang có. Tính năng

này đặc biệt hữu ích, giúp nhà phát triển ứng dụng tiết kiệm rất nhiều thời
gian.

-

Ứng dụng được viết bằng Flutter hỗ trợ hiển thị lên đến 60FPS (hoặc
120FPS tuỳ thiết bị). Cho hiệu ứng chuyển cảnh mượt mà, nâng cao trải
nghiệm người dùng.

So sánh Flutter và React Native

Khả năng tái

Flutter

React Native

Flutter cho phép overwriting

React Native cho phép bạn sử

5


sử dụng

code. Hỗ trợ tốt cho việc tái

dụng lại code, nhưng điều này lại

sử dụng về sau.

bị giới hạn trong một vài
components cơ bản.

Cấu trúc mã

Khi sử dụng Flutter, các

Sử dụng React Native cần có

nguồn

Developer có thể thực hiện

thêm JSX hoặc XML để tạo giao

mọi thứ trên cùng một màn

diện hay các cơng cụ đặc biệt để

hình, trong đó đặc biệt không

tạo layout.

cần phải chuyển từ code sang
chế độ thiết kế hoặc ngược lại,
vì vậy các trải nghiệm trên
Flutter khá tiết kiệm thời gian.
Cài đặt môi

Việc cài đặt Flutter diễn ra

Cài đặt môi trường phát triển

trường phát

nhanh chóng, tiện lợi với sự

React Native trông khá loằng

triển

hỗ trợ của câu lệnh flutter

ngoằng và khó khăn đối với các

doctor -v giúp chẩn đốn lỡi

lập trình viên mới.

trong q trình cài đặt.
Các thư viện

Có nhiều các third-party

Từ khi React Native trở lên phổ

hỗ trợ

packages đang được sử dụng

biến, đã có rất nhiều các third-

và đang ngày càng được phát

party packages được phát triển và

triển, và chúng thực sự rất hữu được sử dụng rất nhiều trong ứng
Độ phổ biến

dụng.

dụng.

Số lượng người sử dụng

React Native có lượng developer

Flutter đang ngày càng gia

sử dụng đang nhiều hơn bởi vì

tăng. Đặc biệt nhờ sự hậu

lượng developer sử dụng

thuẫn tích cực từ phía Google.

JavaScript rất dễ dàng để sử dụng

với các thư viện của React.

Tài liệu tham Cách viết tài liệu của Google

Việc tìm kiếm tài liệu có lúc khá

khảo

đơn giản, dễ hiểu nên việc tài

khó khăn, phụ thuộc vào các

liệu hóa cho Flutter cơ bản là

công cụ dev bên ngoài, yêu cầu

6


hiệu quả.

người dùng phải kiếm tài liệu cho
từng bộ mặc dù Facebook đã khá
nỗ lực để xây dựng một kho tài
liệu trực quan nhất.

Bảng 2-1 So sánh giữa Flutter và React Native

CHƯƠNG 2: CÀI ĐẶT MÔI TRƯỜNG PHÁT TRIỂN FLUTTER
2.1. Yêu cầu cấu hình phần cứng

-

Hệ điều hành: Windows 7, Windows 8.1, Windows 10

-

Dung lượng ổ cứng: 1GB

-

Công cụ: Visual Studio Code, Android Studio, IntelliJ,…

2.2. Hướng dẫn cài đặt Flutter
-

Tải Flutter tại đường dẫn: rồi giải
nén. Tránh giải nén thư mục flutter vào ổ C:\Program Files\

7


-

Sau khi giải nén xong bạn nên thiết lập biến mơi trường, vào Control Panel
tìm kiếm từ khóa System và chọn vào mục Edit the system environment
variables.

Hình 2.1 Chỉnh sửa biến môi trường
+ Chọn Environment Variables, tại mục System Variables bạn chọn PATH và
nhấn tiếp chọn Edit. Trong cửa sổ Edit System Variable bạn chọn New và

dán đường dẫn tới thư mục Flutter đã giải nén trước đó.
+ Trong thư mục vừa giải nén bạn tìm tập tin flutter_console.bat và khởi
chạy sau đó nhập lệnh flutter doctor -v

8


Hình 2.2 Chẩn đoán Flutter với flutter doctor
-

Cài đặt extension/plugin hỡ trợ cho IDE. Ví dụ như extension Flutter (sẽ tự
động cài thêm Dart) trên Visual Studio Code.

Hình 2.3 Extension Flutter trên Visual Studio

2.3. Tạo project Flutter Android Studio
-

Khởi tạo Android Studio

-

Mở Android Studio và lựa chọn File -> Setting -> Plugin

-

Bạn tìm với từ khóa Flutter sau đó bạn cài Flutter vào trong android studio.

9

Hình 2.4 Cài đặt flutter
-

Click Yes và chờ cho plugin để download

Hình 2.5 Xác nhận cài đặt Flutter

10


Hình 2.6 Tải flutter về

-

Click Restart Android Studio và click Restart để kích hoạt plugin vào trong
Android Studio.

Hình 2.6 Giao diện Android Studio khi kích hoạt Flutter
-

Bạn vào trang web của Flutter để tải SDK của Flutter về nhé

-

Sau khi khởi động lại Android Studio, Chúng ta sẽ cùng bắt đầu với "Start a
new Flutter project"

11

Hình 2.7 Khởi tạo project Flutter

12


-

Giải nén Sdk của bạn vừa tải về , sau đó trỏ đường dẫn tới file đó

13


Hình 2.8 Sau khi khởi tạo thành công 1 project Flutter

CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG TRÒ CHUYỆN TRỰC
TUYẾN VỚI FLUTTER
3.1. Đặt vấn đề
Hiện nay, giới trẻ, đặc biệt là các bạn học sinh sinh viên và một số các đối
tượng doanh nghiệp, công nhân viên chức đang gặp khó khăn trong những lúc cần
sửa các lỗi cơ bản cũng như gửi tệp đến người khác thông qua Internet. Dẫn đến
không nâng cao được năng suất hoạt động cũng như công việc. Từ đó, gặp khó khăn
trong việc sử dụng môi trường công nghệ để giao tiếp với nhau. Nhận thấy vấn đế
này là vấn đề thực tế và thiết yếu, nhóm đã chọn đây là đề tài nghiên cứu và ứng
dụng vào Đồ án 2.

3.2. Phạm vi ứng dụng
Ứng dụng của nhóm được định hướng đến những người có nhu cầu trò chuyện
trực tuyến hay nói cách khác là thời gian thực, tiện lợi bằng song Internet, xem xét
và khắc phục lỗi cho khách hàng từ xa hay đơn giản là chia sẽ thông tin. Đây là

nhóm người thường xuyên sử dụng máy tính, laptop. Do đó họ có khả năng sẽ cần

14


chia sẽ, giúp đỡ từ bạn bè, đồng nghiệp từ xa. Ứng dụng này sẽ là trợ thủ đắc lực
giúp họ luôn có thể nhận được trợ giúp từ xa thơng qua việc trị chuyện trực tuyến
khơng tính phí. Từ đó có thể nâng cao được năng suất làm việc cũng như chia sẽ tài
liệu.

3.3. Các chức năng chính
-

Chức năng Đăng nhập bằng Google

-

Chức năng Chatbox

-

Thông báo tin nhắn

3.4. Phân tích thiết kế
Lược đồ phân cấp chức năng

Hình 3.1 Lược đồ phân cấp chức năng
Sơ đồ use case và đặc tả use case

15

Hình 3.2 Use case tổng quát

Hình 3.3 Use case Đăng nhập

Hình 3.4 Use case Thông báo tin nhắn

16


Hình 3.5 Use case Chatbox

3.5. Các màn hình giao diện chính của ứng dụng

Hình 3.1 Màn hình đăng nhập

17


Hình 3.2 Màn hình chính của ứng dụng

18