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

Giới thiệu ngôn ngữ lập trình Dart 21.2.3.Ưu điểm của Flutter so với các framework khác 5 CHƯƠNG 3: PHÁT TRIỂN ỨNG DỤNG TRÒ CHUYỆN TRỰC TUYẾN VỚI FLUTTER 14... Ứng dụng này sẽ là trợ thủ

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

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

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 – 17520284

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

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 hoà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, hoà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

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

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

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

Hình 1.1 Logo Dart 2

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 đoá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ắcphụ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ố doanhnghiệp Nhóm chúng em sẽ thực hiện đề tài này bằng ngôn ngữ Dart, công nghệ ứngdụng là Flutter Quá trình tìm hiểu nghiệp vụ nhóm chúng em có tham khảo cácdiễn đàn về trò chuyện trực tuyến (Messenger, Zalo,…) Cùng với đó là tham khảocá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

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ộnglớ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

- 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ụngviế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

Flutter React NativeKhả năng tái Flutter cho phép overwriting React Native cho phép bạn sử

sử dụng code Hỗ trợ tốt cho việc tái

sử dụng về sau

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

Cấu trúc mã

nguồn

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 Flutter khá tiết kiệm thời gian

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

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 third-party packages được phát triển vàđược sử dụng rất nhiều trong ứngdụng

Độ phổ biến 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

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ụngvới các thư viện của React

Tài liệu tham

khảo

Cách viết tài liệu của Google đơn giản, dễ hiểu nên việc tài liệu hóa cho Flutter cơ bản là

Việc tìm kiếm tài liệu có lúc khá khó khăn, phụ thuộc vào các 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: https://flutter.dev/docs/get-started/install 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.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ởichạ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

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"

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 đó

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 đốitượng doanh nghiệp, công nhân viên chức đang gặp khó khăn trong những lúc cầnsử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 đếnkhông nâng cao được năng suất hoạt động cũng như công việc Từ đó, gặp khó khăntrong 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à ứngdụng vào Đồ án 2

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.

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

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

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

18

Hình 3.3 Giao diện chatbox

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

20

Hình 3.5 Giao diện chọn ảnh gửi cho bạn bè

Tên Mô tả Chi tiết

Màn hình chính Màn hình bắt đầu khi mở ứng

dụng, chứa các thông tin như danh sách bạn bè, tiểu sử về bạn bè

- Chọn người mong muốn để tiến hành trò chuyện

- Danh sách bạn bè được load từ databass (firebase)

- Có thể cài đặt nickname cho bản thân và viết tiểu sử

- Trong chatbox có thể tùy chọn gửi ảnh cho bạn bè

- Nhận được thông báotin nhắn từ thanh trạng thái

- Đăng nhập bằng tài khoản của Google

22

CHƯƠNG 4: KẾT LUẬN 4.1 Kết quả thu được

- Căn bản vận dụng Dart và Flutter vào việc phát triển ứng dụng di động

- Sử dụng được Firebase làm cơ sở dữ liệu

- Nắm được nhu cầu của đối tượng khách hàng chủ yếu là người trẻ và doanhnhân đối với ứng dụng

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

- Gặp khó khăn trong việc kết nối Firebase với ứng dụng Flutter

- Khó khăn trong việc chuyển đổi các bảng trong CSDL thành các kiểu dữ liệu tương ứng trong Dart

- Bố cục code khó theo dõi, khó khăn trong việc quản lý code, bảo trì và phát triển

- Yêu cầu cấu hình cao để phát triển ứng dụng, chiếm nhiều tài nguyên khi Debug

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

- Hoàn thiện hơn về mặt giao diện, cải thiện tốc độ phản hồi, cung cấp trải nghiệm chạm vuốt mượt mà

- Sắp xếp bố cục hợp lý hơn, mang lại trải nghiệm sử dụng đơn giản và trực quan hơn

- Tổ chức quản lý Cơ sở dữ liệu hợp lý và khoa học hơn

- Thêm tính năng Gọi điện trực tiếp trong tương lại

- Vận dụng các công nghệ mới để mang lại nhiều chức năng thiết thực và hữu ích hơn

TÀI LIỆU THAM KHẢO

Nhóm có dùng các tài liệu tham khảo từ trang chủ Flutter cùng với đó là sự hỗ trợ tích cực của các lập trình viên trên Stackoverflow, Github,…