ĐỒ á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
Giảng viên hướng dẫn: Thầy NGUYỄN TUẤN ANH
Sinh viên thực hiện:

Phan Lê Trọng Nhân – 17520843
Nguyễn Tài Bồi

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

– 17520284


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

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

DANH MỤC HÌNH

DANH MỤC BẢNG


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.

7


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.

8


-

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

9

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 q
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 ngồ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).
+ 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.

10

 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. Ngồ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
sử dụng
Cấu trúc mã
nguồn

Flutter
Flutter cho phép overwriting

code. Hỗ trợ tốt cho việc tái
sử dụng về sau.
Khi sử dụng Flutter, các
Developer có thể thực hiện
mọi thứ trên cùng một màn
hình, trong đó đặc biệt không
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

React Native
React Native cho phép bạn sử
dụng lại code, nhưng điều này lại
bị giới hạn trong một vài
components cơ bản.
Sử dụng React Native cần có
thêm JSX hoặc XML để tạo giao
diện hay các công cụ đặc biệt để
tạo layout.

11


Cài đặt môi
trường phát
triển
Các thư viện
hỗ trợ

Flutter khá tiết kiệm thời gian.

Việc cài đặt Flutter diễn ra
nhanh chóng, tiện lợi với sự
hỗ trợ của câu lệnh flutter
doctor -v giúp chẩn đốn lỡi
trong q trình cài đặt.
Có nhiều các third-party
packages đang được sử dụng
và đang ngày càng được phát
triển, và chúng thực sự rất hữu
dụng.
Số lượng người sử dụng
Flutter đang ngày càng gia
tăng. Đặc biệt nhờ sự hậu
thuẫn tích cực từ phía Google.

Cài đặt mơi trường phát triển
React Native trơng khá loằng
ngoằng và khó khăn đối với các
lập trình viên mới.

Từ khi React Native trở lên phổ
biến, đã có rất nhiều các thirdparty packages được phát triển và
được sử dụng rất nhiều trong ứng
dụng.
Độ phổ biến
React Native có lượng developer
sử dụng đang nhiều hơn bởi vì
lượng developer sử dụng
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 ngồi, u cầu
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

12


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\
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.4 Chỉnh sửa biến môi trường

13


+ 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

Hình 2.5 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.6 Extension Flutter trên Visual Studio

14


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.

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

Click Yes và chờ cho plugin để download

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

15


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

16

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

17


-

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

18


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à

19


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.

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.10 Lược đồ phân cấp chức năng
Sơ đồ use case và đặc tả use case

20


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

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

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

21


Hình 3.14 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

22


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

23


Hình 3.3 Giao diện chatbox

24


Hình 3.4 Cài đặt tên và viết tiểu sử

25