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

và flutter cũng đã được sử dụng để tạo ra các ứng dụng native cho Google.. 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

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

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

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

2

Đặ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 quý báu giúp chúng em hoà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ệchọ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 quá 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 hoà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ô!

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áttriể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 giaodiệ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

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

I.2 Sự khác biệt giữa Flutter và các công nghệ khác

hoạt động trên cả iOS và Android

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êniOS, 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

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

Flutter React Native

Khả năng dùng lại

code Flutter cho phép overwriting code

Nếu bạn có kế hoạchcho 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 cho phép bạn sử dụng lạicode, 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ĩacác style cho nền tảng React Native sẽmất khá nhiều thời gian

Các thư viện Third

Party 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

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

Github stars, Flutter

đã trở thành trends trong việc phát triển

Như Google đã giới thiệu về framework này Nó chắc chắn muốn trở thành một nền tảng phổ biến trong sự lựa chọn của các developer

Với 65k Github stars,React Native có lượng developer sử dụng đang nhiều hơnbở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

Cộng đồng phát triển Từ khi Flutter mới

được giới thiệu, đã

có một lượng lớn các

React Native đã đượcphổ biến từ lâu, vì 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ềucác tài nguyên hữu ích để có thể bắt đầuviế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

• 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:

• 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 Ngoà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 :

Thiết lập môi trường

- 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 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ả để hoàn tất quá trình cài đặt

Lưu Ý :

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

Flutter là Android Studio.

II.2 Ứng dụng

Đây là 1 App demo

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

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

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

1. Giới thiệu về bài toán

1.1 Giới thiệu về đề tà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 khoá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.

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 appquản lý giá vàng rất thiết thực với nhiều người Mang lại sự tiệnlợi cao

1.2 Lý do chọn đề tài

dùng luôn phải lên website và tìm hiểu tham khảo thông tin

thể dễ dàng tham khảo giá vàng hiện tại lên xuống thế nào và tính toá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

- 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

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

2.3 Đặc tả Usecase.

2.3.1 Cập nhật giá cổ phiếu

nhật giá cổ phiếu Dòng sự kiện

chính

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

Dòng sự kiện

Tiền điều kiện Không có

Hậu điều kiện Ứng dụng hiển thị thông tin giá cổ phiếu

Tiền điều kiện Không có

Hậu điều kiện Ứng dụng hiển thị thông tin tỉ giá tiền tệ.

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

chuyển đổi tiên tệ.

Hậu điều kiện Ứng dụng hiển thị thông tin của tiền tệ sau

khi đã chuyển đổi.

2.3.4 Tin tức

tin tức Dòng sự kiện

Tiền điều kiện Không có

Hậu điều kiện Ứ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

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

20

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

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

4.4 Tin tức.

24

được niêm yết hiện tại.

5.1.1 Màn hình chọn quốc gia

26

5.1.2 Màn hình chi tiết thông tin cổ phiếu

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

- Giao diện màn hình hiển thị thông tin cập nhật tỉ giá tiền

tệ của nhiều loại tiền tệ

- Reload theo tỉ giá niêm yết theo các loại tiền tệ trên thế giới

- Người dùng chọn màn hình cập nhật tỉ giá tiền tệ

28

- Kéo màn hình xuống để Reload thông tin cập nhật tỉ giá tiền tệ mới nhất với nhiều loại tiền tệ trên thế giới.

5.3 Tin tức

5.3.1 Màn hình tin tức

5.3.2 Màn hình tin tức chi tiết.

30

6. Kết luận.

6.1 Kết luận

6.1.1 Tìm hiểu công nghệ Flutter

- Đưa ra cái nhìn tổng quan về lịch sử ra đời và quá trình phát triển của Flutter

Flutter với những công cụ khác, Từ đó Chúng ta có thể nắm bắt 1 cách sâu sắc công nghệ để tìm ra 1 hướng phát triển 1 cách hiệu quả hơn

6.1.2 Ứng dụng

windows

quát về công nghệ Flutter trong thực hành sẽ như thế nào

6.1.2.1 Về chức năng

- Hoàn thành chức năng hiển thị giá cổ phiếu, tỉ giá tiền tệ

- Áp dụng API trong việc lấy dữ liệu

tệ, tin tức

6.1.2.2 Về giao diện

riêng để người dùng dễ phân biệt

- Tự động đẩy thông báo khi cập nhật giá vàng, tỉ giá tiền tệ

- Sử dụng AI trong việc dự đoán chỉ số của các loại cổ

phiếu

32