Tìm hiểu flutter và xây dựng ứng dụng theo dõi thông tin cổphiếu

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

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

BÁO CÁO ĐỒ ÁN CUỐI KỲ
MƠN: ĐỒ ÁN 2
ĐỀ TÀI: Tìm hiểu Flutter và xây dựng ứng dụng
theo dõi thông tin cổ phiếu

Giáo viên hướng dẫn: HUỲNH TUẤN ANH
Sinh viên thực hiện:
•
•

Bùi Tiến Thành Long -17520705
Phan Anh Tú
-17521204

1


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

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

2


LỜI CẢM ƠN
Đầu tiên, chúng em xin gởi lời cảm ơn chân thành đến tập thể quý
Thầy Cô
Trường Đại học Công nghệ thông tin – Đại học Quốc gia TP.HCM và
quý Thầy Cô khoa Công Nghệ Phần Mềm đã giúp cho chúng em có
những kiến thức cơ bản làm nền tảng để thực hiện đề tài này.
Đặc biệt, nhóm chúng em xin gửi lời cảm ơn và lòng biết ơn sâu sắc
nhất tới Thầy HUỲNH TUẤN ANH (Giảng viên môn Đồ Án 2) người
đã trực tiếp đứng lớp hướng dẫn tận tình, sửa chữa và đóng góp
nhiều ý kiến q báu giúp chúng em hồn thành tốt báo cáo mơn
học của mình.
Trong thời gian một học kỳ thực hiện đề tài, nhóm chúng em đã vận

dụng những kiến thức nền tảng đã tích lũy đồng thời kết hợp với việc
học hỏi và nghiên cứu những kiến thức mới. Từ đó, nhóm vận dụng
tối đa những gì đã thu thập được để hoàn thành một báo cáo đồ án
tốt nhất. Tuy nhiên, trong q trình thực hiện, vẫn khơng tránh khỏi
những thiếu sót. Chính vì vậy, nhóm chúng em rất mong nhận được
những sự góp ý từ phía các Thầy Cơ nhằm hồn thiện những kiến
thức mà nhóm đã học tập và là hành trang để chúng em thực hiện
tiếp các đề tài khác trong tương lai.
Xin chân thành cảm ơn quý Thầy Cô!

3


MỤC LỤC

4


GIỚI THIỆU VỀ CƠNG NGHỆ FLUTTER.
I. Tìm hiểu về cơng nghệ Flutter.
I.1 Flutter là gì ?
- 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, với dự định ban đầu để có thể kết xuất ổn
định ở 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 của khung ứng
dụng này.
- Flutter là mobile UI framework của Google để tạo ra các giao
diện chất lượng cao trên iOS và Android trong khoảng thời
gian ngắn. Flutter hoạt động với những code sẵn có được sử
dụng bởi các lập trình viên, các tổ chức.
- Flutter sử dụng ngôn ngữ DART cũng do Google phát triển
và flutter cũng đã được sử dụng để tạo ra các ứng dụng
native cho Google.
- Flutter được phát triển nhằm giải quyết bài toán thường gặp
trong mobile là Fast Development và Native Performance.
Nếu như React Native chỉ đảm bảo Fast Development và
code native thuần chỉ đảm bảo Native Performance thì
Flutter làm được cả 2 điều trên.
- Flutter hồn tồn miễn phí và cũng là mã nguồn mở.
I.2 Sự khác biệt giữa Flutter và các công nghệ khác.
- Là một bộ SDK đa nền tảng, các ứng dụng Flutter có thể
hoạt động trên cả iOS và Android.
- Chúng chạy trên engine render Flutter (được viết bằng C++)
và Flutter Framework (được viết bằng Dart, cũng như các
ứng dụng Flutter)
- Flutter được thiết kế từ đầu để đạt tới tốc độ khung hình
60fps. Trong khi đây không phải là một con số hiếm gặp trên
iOS, nhưng với Android, bạn có thể cảm thấy sự khác biệt rõ
rệt ngay lập tức.
- Hỗ trợ Hot ReLoad rất tiện lợi, giảm thời gian debug từ đó
dẫn đến hiệu quả cao hơn khi thực hiện.

5

 So sánh nhỏ giữa Flutter và React native.

Flutter
Flutter cho phép
overwriting code.
Nếu bạn có kế hoạch
cho việc sử dụng lại
code thì Flutter là
tùy chọn tốt nhất để
có thể tối ưu được
việc lựa sử dụng lại
code.

React Native
Khả năng dùng lại
React Native cho
code
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.
Để có thể định nghĩa
các style cho nền
tảng React Native sẽ
mất khá nhiều thời
gian.
Các thư viện Third
Có nhiều các thirdTừ khi React Native

Party
party packages đang trở lên phổ biến, đã
được sử dụng và
có rất nhiều các
đang ngày càng
third-party packages
được phát triển, và
được phát triển và
chúng thực sự rất
được sử dụng rất
hữu dụng.
nhiều trong ứng
dụng, chúng có thể
được thêm bớt một
cách linh động trong
ứng dụng của bạn.
Độ phổ biến
Với khoảng 30k
Với 65k Github stars,
Github stars, Flutter
React Native có
đã trở thành trends
lượng developer sử
trong việc phát triển. dụng đang nhiều hơn
Như Google đã giới
bởi vì lượng
thiệu về framework
developer sử dụng
này. Nó chắc chắn
JavaScript rất dễ

muốn trở thành một dàng để sử dụng với
nền tảng phổ biến
các thư viện của
trong sự lựa chọn
React.
của các developer.
Cộng đồng phát triển Từ khi Flutter mới
React Native đã được
được giới thiệu, đã
phổ biến từ lâu, vì
có một lượng lớn các thế cho nên nó cũng
6


bài viết hướng dẫn
được đưa lên online,
trong đó có rất nhiều
các tài ngun hữu
ích để có thể bắt đầu
viết ứng dụng đầu
tiên trên mobile app.

có rất nhiều các
cộng đồng để hỗ trợ
online. Những kỹ
năng của các lập
trình viên có kinh
nghiệm trong
JavaScript chắc chắn
sẽ đưa ra giải pháp

cho bất kỳ vấn đề
nào trong quá trình
phát triển của bạn.

I.3 Ưu điểm, Nhược điểm.

Ưu điểm:
•

Ngơn ngữ Dart: Dart - OOP, nó khá dài, nhưng những người
quen viết bằng Java / C # sẽ hài lịng với Dart.

•

Ít phải viết các config khi tạo project mới theo cách thủ cơng,
ngược lại với React Native.

•

Chỉ cần tải về Flutter từ git, chạy “flutter doctor”, và nó sẽ cho
bạn biết những loại vấn đề bạn có thể có trong hệ thống. Sau
đó, tạo một project từ Android Studio hoặc bất kỳ IDE nào sau
khi cài đặt Flutter Plug-in sơ bộ và start project. Ngồi ra nó
cịn có Hot-reload giống như trong React-Native.

•

Hỗ trợ tuyệt vời cho IDE (Android Studio, IDE IntelliJ, VSCode)

•

Trình điều hướng tích hợp sẵn. Sau khi tạo ra một ứng dụng
trên Flutter, bạn có thể thấy nó có Navigator được xây dựng
sẵn. Bạn có thể tạo một route mới mà khơng cần kết nối bất kỳ
thứ gì (khơng giống như trong RN, nơi bạn cần kết nối bất kỳ
package điều hướng gốc nào vv);

•

Giải pháp quản lý dữ liệu được tạo sẵn, ví dụ trong Flutter này
là "Mọi thứ đều có một Widget" cho nó. Có một StatefulWidget
đặc biệt, với sự giúp đỡ của nó mà chúng ta có thể quản lý
trạng thái widget và thay đổi nó một cách năng động.

Nhược điểm:
7


•

Có một rào cản lớn cho những người chỉ học JS, hoặc đến từ RN.
Do thực tế là Dart được sử dụng với sự thừa kế, đa hình của nó
và tất cả các thứ về OOP.

•

Khơng có JSX mà tất cả chúng ta đã quen khi làm RN. Nhìn vào
tệp Dart trong đó khơng có phân chia thành template, styling
và data, nó trở nên khó chịu.

•

Styling là một nhược điểm. Thực tế là khơng có sự tách biệt
thành Styles, templates và controller, có một vấn đề khi mơ tả
một thành phần thì chúng ta cũng cần mơ tả các styles cùng
một lúc.

•

Animation cịn khó khăn hơn. Mặc dù nó có một animation tốt,
nhưng nó sẽ khó hơn khi tạo hiệu ứng động, khơng giống như
trong RN.

•

Tối ưu hóa. Trong Fluter, chỉ có thừa kế widget với các điều kiện
có thể thay đổi (trạng thái) và không thể thay đổi (không trạng
thái). Trong khi ở React-Native chúng ta có thể quản lý vịng
đời. Ngồi ra, một nhược điểm lớn là thiếu các công cụ để lưu
trạng thái của ứng dụng, vấn đề này có thể, tuy nhiên, được
giải quyết bằng cách tuần tự hóa trạng thái hiện tại.

I.4 Mục đích sử dụng Flutter cho đồ án.

- UI đẹp và biểu cảm: Thỏa mãn người dùng của bạn với các
widget built-in đẹp mắt của Flutter theo Material Design và
Cupertino (iOS-flavor), các API chuyển động phong phú, scroll tự
nhiên mượt mà và tự nhận thức được nền tảng.
- Framework hiện đại và reactive: Dễ dàng tạo giao diện người
dùng của bạn với framework hiện đại, reactive của Flutter và tập

hợp các platform, layout và widget phong phú. Giải quyết các
thách thức giao diện người dùng khó khăn của bạn với các API
mạnh mẽ và linh hoạt cho 2D, animation, gesture, hiệu ứng và
hơn thế nữa.
- Phát triển ứng dụng thống nhất: Flutter có các công cụ và thư
viện để giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống
trên iOS và Android. Nếu bạn chưa có kinh nghiệm phát triển trên
thiết bị di động, thì Flutter là một cách dễ dàng và nhanh chóng
để xây dựng các ứng dụng di động tuyệt đẹp.
8


- Flutter sở hữu bộ doc (document) phải nói là khơng bỏ sót thứ
gì. Đi từ cài đặt, hướng dẫn viết app cơ bản cho tới CI/CD, debug,
test và profiling. Bộ profiling của Flutter cũng cực kì hay dùng để
đo đạc các chỉ số về performance khá chi tiết.

II. Cài đặt và Ứng dụng.
II.1 Cài đặt.
-

Yêu cầu cấu hình máy :
Hệ điều hành: Windows 7, Windows 8.1 và Windows 10.
Dung lượng đĩa trống: 400 MB (không bao gồm dung lượng cho
IDE).
Công cụ: Windows PowerShell, Git for Windows.
Cài đặt Flutter SDK

-

Tải Flutter SDK
/>ows/flutter_windows_v0.10.2-beta.zip .
Thiết lập môi trường.

9


-

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.

-

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.

-

10


-

-

-

Tiếp theo chúng ta tiếp tục bấm Y(Yes) tất cả để hồn tất q
trình cài đặt
Lưu Ý :
Là bước chấp nhận điều khoản rất quan trọng, nếu như bạn
không chấp nhận điều khoản SDK, khi bạn build app sẽ bị lỗi
ngay và không thể build được.
Chúng em sử dụng một công cụ đã được học để thực hiện
Flutter là Android Studio.

II.2 Ứng dụng.

Đây là 1 App demo

Bước 1 : Tạo thư mục Flutter

11


12


Sau khi tạo Project “first_app”. Màn hình giao diện sẽ hiển thị như
sau

13

Tiến hành chạy thử. Ta được

-

Click vào màn hình sẽ hiển thị tương ứng số lần click vào màn
hình trên màn hình chính. Như vậy ta đã chạy được một demo
của Flutter.

14


ỨNG DỤNG CÔNG NGHỆ FLUTTER TRÊN THIẾT BỊ ĐIỆN THOẠI THƠNG
MINH.
1. Giới thiệu về bài tốn.
1.1 Giới thiệu về đề tài.
- Sự biến động khó lường của giá vàng, cổ phiếu…. trong thời

gian vừa qua đã gây ra nhiều tác động khơng nhỏ cho nền kinh
tế, chính vì vậy vấn đề được đặt ra là phải nghiên cứu các giải
pháp giúp hạn chế đến mức thấp nhất tác động tiêu cực của nó
và góp phần bình ổn thị trường chứng khốn VN. Một trong
những giải pháp đó là kiểm tra giá vàng, cổ phiếu một cách
liên tục để người dùng có thể nắm bắt thời cục của giá vàng
một cách hiệu quả, tiện lợi, nhanh chóng và đặc biệt phải
chính xác.
- Những phần mềm quản lý giá cổ phiếu hiện tại đang hỗ trợ
trên các thiệt bị như : máy tính, laptop,.. Mỗi lần chúng ta
muốn kiểm tra phải bật các thiết bị sẽ tốn khơng ít thời gian
nếu chúng ta đang bận. Phần mềm trả phí cũng là những bất
lợi khơng nhỏ, việc chi trả phí làm người dùng cảm thấy bất

tiện.
- Việc sử dụng thiết bị điện thoại di động để làm việc đang rất
phổ biến, đặc biệt là những người bận rồn. Vì thế thiết kế 1 app
quản lý giá vàng rất thiết thực với nhiều người. Mang lại sự tiện
lợi cao.
1.2 Lý do chọn đề tài
- Khi muốn xem thông tin giá cổ phiếu tăng hoặc giảm người
dùng ln phải lên website và tìm hiểu tham khảo thông tin.
- Bằng cách sử dụng ứng dụng quản lý cổ phiếu, người dùng có
thể dễ dàng tham khảo giá vàng hiện tại lên xuống thế nào và
tính tốn được tình trạng giá vàng tăng giảm trong tuần qua.
Ứng dụng được cập nhật chính xác đúng với giá vàng hiện tại,
có giao diện đơn giản , dễ sử dụng.
- Ứng dụng theo dõi thông tin cổ phiếu trên điện thoại sẽ giúp
bạn xem được thông tin nhanh hơn và độ chính xác cao.
1.3 Mục Tiêu.
- Giao diện đơn giản, dễ sử dụng và bắt mắt.
- Ứng dụng chạy được trên cả nền tảng Android
- Đáp ứng được đầy đủ hầu hết các chức năng mà khách hàng
mong muốn.
- Có các mốc thời gian cụ thể, và linh động trong việc tìm kiếm
theo ngày cho khách hàng.
- Đưa ra biểu đồ hiển thị sự thay đổi dữ liệu hằng ngày
1.4 Các chức năng chính.
1.4.1 Hiển thị thơng tin cổ phiếu
15


- Cập nhật giá mua và bán của tất cả loại cổ phiếu trong ngày,
1.4.2 Cập nhật tỉ giá tiền tệ.

- Cập nhật tỉ giá tiền tệ của nhiều nước trên thế giới.
1.4.3 Chuyển đổi tiền tệ.
- Hỗ trợ chuyển đổi từ nhiều loại tiền trên thế giới.
1.4.4 Tin tức.
- Cập nhật thông tin tin tức về giá vàng, tỉ giá tiền tệ, biến động

trong nước, cũng như nước ngoài.
2. USECASE : Phân tích các yêu cầu.
2.1 Usecase Tổng quát.

2.2 Usecase phân rã.
2.2.1 Cập nhật giá cổ phiếu

16


2.2.2

Cập nhật tỉ giá tiền tệ.

2.2.3

Chuyển đổi tiền tệ

2.2.4

Tin tức.

17

2.3 Đặc tả Usecase.
2.3.1 Cập nhật giá cổ phiếu

Mơ tả
Dịng sự kiện
chính
Dịng sự kiện
phụ
Tiền điều kiện
Hậu điều kiện
2.3.2

Khơng có
Ứng dụng hiển thị thông tin giá cổ phiếu

Cập nhật tỉ giá tiền tệ

Mơ tả
Dịng sự kiện
chính
Dịng sự kiện
phụ
Tiền điều kiện
Hậu điều kiện
2.3.3

Người dùng muốn sử dụng chức năng cập
nhật giá cổ phiếu
1. Người dùng chọn mở ứng dụng.

2. Người dùng vuốt chọn màn hình cập
nhật giá cổ phiếu
Khơng có

Người dùng muốn sử dụng chức năng cập
nhật tỉ giá tiền tệ.
1. Người dùng chọn mở ứng dụng.
2. Người dùng vuốt chọn màn hình cập
nhật tỉ giá tiền tệ.
Khơng có
Khơng có
Ứng dụng hiển thị thông tin tỉ giá tiền tệ.

Chuyển đổi tiền tệ.

Mô tả
Dịng sự kiện
chính

Dịng sự kiện
phụ
Tiền điều kiện

Người dùng muốn sử dụng chức năng
chuyển đổi tiên tệ.
1. Chuyển đổi
a. Nhập tỉ giá cần chuyển đổi
b. Chọn loại tỉ giá
c. Click “Convert” để thực hiện
chuyển đổi.

Khơng có
Khơng có
18


Hậu điều kiện

2.3.4

Ứng dụng hiển thị thông tin của tiền tệ sau
khi đã chuyển đổi.

Tin tức.

Mơ tả
Dịng sự kiện
chính

Dịng sự kiện
phụ
Tiền điều kiện
Hậu điều kiện

Người dùng muốn sử dụng chức năng đọc
tin tức
1. Người dùng chọn mở ứng dụng.
2. Người dùng vuốt chọn màn hình tin
tức.
3. Người dùng chọn mục thơng tin tin tức
muốn đọc.

Khơng có
Khơng có
Ứng dụng hiển thị thông tin tin tức mà
người dùng đã chọn.

3. Sơ đồ tuần tự
3.1 Cập nhật giá cổ phiếu.

19


3.2 Cập nhật tỉ giá tiền tệ.

20


3.3 Chuyển đổi tiền tệ.

21


3.4 Tin tức

4. Sơ đồ hoạt động
4.1 Cập nhật giá cổ phiếu

4.2 Cập nhật tỉ giá tiền tệ.

22

4.3 Chuyển đổi tiền tệ

23


4.4 Tin tức.

24


5. Giao diện
5.1 Hiện thị danh sách Cơng ty có cổ phiếu

Mơ Tả
- Giao diện màn hình hiển thị thơng tin cập nhật về tỉ giá
của giá cổ phiếu.
- Reload theo thỉ giá hiện tại được niêm yết trên hiện tại.
• Luồng tương tác
- Người dùng chọn màn hình cập nhật giá cổ phiếu.
- Chọn vào công ty muốn xem để xem tỉ giá cổ phiếu đang
được niêm yết hiện tại.
•

25