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 ĐỀ TÀI: Tìm hiểu Flutter 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 LỜI NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… ……………………………………………………………………………………… 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 quý Thầy Cô khoa Công Nghệ Phần Mềm giúp cho chúng em có kiến thức làm tảng để thực đề tài Đặc biệt, nhóm chúng em xin gửi lời cảm ơn lòng biết ơn sâu sắc 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 đó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 Trong thời gian học đề tài, nhóm chúng em vận dụng kiến thức tảng tích lũy đồng thời kết hợp với việc học hỏi nghiên cứu kiến thức Từ đó, nhóm vận dụng tối đa thu thập để hồn thành báo cáo đồ án tốt Tuy nhiên, q trình thực hiện, khơng tránh khỏi thiếu sót Chính vậy, nhóm chúng em mong nhận góp ý từ phía Thầy Cơ nhằm hồn thiện kiến thức mà nhóm học tập hành trang để chúng em thực tiếp đề tài khác tương lai Xin chân thành cảm ơn quý Thầy Cô! MỤC LỤC GIỚI THIỆU VỀ CƠNG NGHỆ FLUTTER I Tìm hiểu cơng nghệ Flutter I.1 Flutter ? - Phiên Flutter gọi "Sky" chạy hệ điều hành Android Nó cơng bố hội nghị nhà phát triển Dart 2015, với dự định ban đầu để kết xuất ổn định mức 120 khung hình giây Trong phát biểu hội nghị Google Developer Days Thượng Hải, Google công bố phiên Flutter Release Preview 2, phiên lớn cuối trước Flutter 1.0 Vào ngày tháng 12 năm 2018, Flutter 1.0 phát hành kiện Flutter Live, phiên "ổn định" khung ứng dụng - Flutter mobile UI framework Google để tạo giao diện chất lượng cao iOS Android khoảng thời gian ngắn Flutter hoạt động với code sẵn có sử dụng lập trình viên, tổ chức - Flutter sử dụng ngôn ngữ DART Google phát triển flutter sử dụng để tạo ứng dụng native cho Google - Flutter phát triển nhằm giải toán thường gặp mobile Fast Development Native Performance Nếu React Native đảm bảo Fast Development code native đảm bảo Native Performance Flutter làm điều - Flutter hồn tồn miễn phí mã nguồn mở I.2 Sự khác biệt Flutter công nghệ khác - Là SDK đa tảng, ứng dụng Flutter hoạt động iOS Android - Chúng chạy engine render Flutter (được viết C++) Flutter Framework (được viết Dart, ứng dụng Flutter) - Flutter thiết kế từ đầu để đạt tới tốc độ khung hình 60fps Trong khơng phải số gặp iOS, với Android, bạn cảm thấy khác biệt rõ rệt - Hỗ trợ Hot ReLoad tiện lợi, giảm thời gian debug từ dẫn đến hiệu cao thực  So sánh nhỏ Flutter 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 Flutter tùy chọn tốt để tối ưu việc lựa sử dụng lại code React Native Khả dùng lại React Native cho code phép bạn sử dụng lại code, điều lại bị giới hạn vài components Để định nghĩa style cho tảng React Native nhiều thời gian Các thư viện Third Có nhiều thirdTừ React Native Party party packages trở lên phổ biến, sử dụng có nhiều ngày third-party packages phát triển, phát triển chúng thực sử dụng hữu dụng nhiều ứng dụng, chúng thêm bớt cách linh động ứng dụng 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ử việc phát triển dụng nhiều Như Google giới lượng thiệu framework developer sử dụng Nó chắn JavaScript dễ muốn trở thành dàng để sử dụng với tảng phổ biến thư viện lựa chọn React developer Cộng đồng phát triển Từ Flutter React Native được giới thiệu, phổ biến từ lâu, có lượng lớn viết hướng dẫn đưa lên online, có nhiều tài ngun hữu ích để bắt đầu viết ứng dụng mobile app có nhiều cộng đồng để hỗ trợ online Những kỹ lập trình viên có kinh nghiệm JavaScript chắn đưa giải pháp cho vấn đề trình phát triển bạn I.3 Ưu điểm, Nhược điểm Ưu điểm: • Ngơn ngữ Dart: Dart - OOP, dài, người quen viết Java / C # hài lòng với Dart • Ít phải viết config tạo project theo cách thủ công, ngược lại với React Native • Chỉ cần tải Flutter từ git, chạy “flutter doctor”, cho bạn biết loại vấn đề bạn có hệ thống Sau đó, tạo project từ Android Studio IDE sau cài đặt Flutter Plug-in sơ start project Ngồi cịn có Hot-reload giống 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 tạo ứng dụng Flutter, bạn thấy có Navigator xây dựng sẵn Bạn tạo route mà khơng cần kết nối thứ (khơng giống RN, nơi bạn cần kết nối package điều hướng gốc vv); • Giải pháp quản lý liệu tạo sẵn, ví dụ Flutter "Mọi thứ có Widget" cho Có StatefulWidget đặc biệt, với giúp đỡ mà quản lý trạng thái widget thay đổi cách động Nhược điểm: • Có rào cản lớn cho người học JS, đến từ RN Do thực tế Dart sử dụng với thừa kế, đa hình tất thứ OOP • Khơng có JSX mà tất quen làm RN Nhìn vào tệp Dart khơng có phân chia thành template, styling data, trở nên khó chịu • Styling nhược điểm Thực tế khơng có tách biệt thành Styles, templates controller, có vấn đề mơ tả thành phần cần mơ tả styles lúc • Animation cịn khó khăn Mặc dù có animation tốt, khó tạo hiệu ứng động, khơng giống RN • Tối ưu hóa Trong Fluter, có thừa kế widget với điều kiện thay đổi (trạng thái) thay đổi (khơng trạng thái) Trong React-Native quản lý vịng đời Ngồi ra, nhược điểm lớn thiếu công cụ để lưu trạng thái ứng dụng, vấn đề có thể, nhiên, giải cách hóa trạng thái I.4 Mục đích sử dụng Flutter cho đồ án - UI đẹp biểu cảm: Thỏa mãn người dùng bạn với widget built-in đẹp mắt Flutter theo Material Design Cupertino (iOS-flavor), API chuyển động phong phú, scroll tự nhiên mượt mà tự nhận thức tảng - Framework đại reactive: Dễ dàng tạo giao diện người dùng bạn với framework đại, reactive Flutter tập hợp platform, layout widget phong phú Giải thách thức giao diện người dùng khó khăn bạn với API mạnh mẽ linh hoạt cho 2D, animation, gesture, hiệu ứng - Phát triển ứng dụng thống nhất: Flutter có cơng cụ thư viện để giúp bạn dễ dàng đưa ý tưởng vào sống iOS Android Nếu bạn chưa có kinh nghiệm phát triển thiết bị di động, Flutter cách dễ dàng nhanh chóng để xây dựng ứng dụng di động tuyệt đẹp - Flutter sở hữu doc (document) phải nói khơng bỏ sót thứ Đi từ cài đặt, hướng dẫn viết app CI/CD, debug, test profiling Bộ profiling Flutter hay dùng để đo đạc số performance chi tiết II Cài đặt Ứ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 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 https://storage.googleapis.com/flutter_infra/releases/beta/wind ows/flutter_windows_v0.10.2-beta.zip Thiết lập môi trường - Sau 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 chọn vào mục Edit the system environment variables - Chọn Environment Variables, mục System Variables bạn chọn PATH nhấn tiếp chọn Edit Trong cửa sổ Edit System Variable bạn chọn New 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 khởi chạy sau nhập lệnh flutter doctor - 10 2.3 Đặc tả Usecase 2.3.1 Cập nhật giá cổ phiếu Mô tả Dịng kiện Dịng 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 kiện Dịng 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 cập nhật giá cổ phiếu Người dùng chọn mở ứng dụng Người dùng vuốt chọ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 cập nhật tỉ giá tiền tệ Người dùng chọn mở ứng dụng Người dùng vuốt chọ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 kiện Dịng kiện phụ Tiền điều kiện Người dùng muốn sử dụng chức chuyển đổi tiên tệ 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 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 tiền tệ sau chuyển đổi Tin tức Mơ tả Dịng kiện Dịng 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 đọc tin tức Người dùng chọn mở ứng dụng Người dùng vuốt chọn hình tin tức 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 Sơ đồ 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 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 Giao diện 5.1 Hiện thị danh sách Cơng ty có cổ phiếu Mơ Tả - Giao diện hình hiển thị thơng tin cập nhật tỉ giá giá cổ phiếu - Reload theo thỉ giá niêm yết • Luồng tương tác - Người dùng chọ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 niêm yết • 25 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 27 5.2 Cập nhật tỉ giá tiền tệ Mô tả - Giao diện hình hiển thị thơng tin cập nhật tỉ giá tiền tệ nhiều loại tiền tệ - Reload theo tỉ giá niêm yết theo loại tiền tệ giới • Luồng tương tác - Người dùng chọn hình cập nhật tỉ giá tiền tệ • 28 Kéo hình xuống để Reload thông tin cập nhật tỉ giá tiền tệ với nhiều loại tiền tệ giới 5.3 Tin tức 5.3.1 Màn hình tin tức - 29 5.3.2 Màn hình tin tức chi tiết 30 5.3.3 Màn hình đọc báo Mơ tả - Màn hình hiển thị thơng tin tin tức liên quan đến giá vàng, tỉ giá tiền tệ, cổ phiếu - Hiển thị thông tin tin tức muốn đọc • Luồng tương tác - Người dùng chọn hình tin tức - Người dùng chọn thơng tin tin tức muốn đọc - Màn hình hiển thị thơng tin tin tức muốn đọc • 31 Kết luận 6.1 Kết luận 6.1.1 Tìm hiểu cơng nghệ Flutter - Đưa nhìn tổng quan lịch sử đời trình phát triển Flutter - Nêu khác biệt, ưu điểm nhược điểm Flutter với cơng cụ khác, Từ Chúng ta nắm bắt cách sâu sắc cơng nghệ để tìm hướng phát triển cách hiệu 6.1.2 Ứng dụng - Hướng dẫn người dùng cài đặt Flutter Hệ điều hành windows - Hướng dẫn chạy project demo để nắm bắt khái quát công nghệ Flutter thực hành - Tạo Ứng dụng Áp dụng cơng nghệ Flutter 6.1.2.1 Về chức • Ứng dụng hiển thị thơng tin cổ phiếu - Hồn thành chức hiển thị giá cổ phiếu, tỉ giá tiền tệ - Áp dụng API việc lấy liệu - Các chức khác ứng dụng Chuyển đổi tiền tệ, tin tức 6.1.2.2 Về giao diện - Giao diện hình rõ ràng, chia theo gang màu riêng để người dùng dễ phân biệt - Chỉ cần kéo qua hình để chuyển chức năng, cho ta thấy ứng dụng dễ sử dụng 6.1.2.3 Về kĩ thuật - Nhóm biết sử dụng cơng nghệ Flutter Framework - Sử dụng API - Lấy liệu từ trang nguồn trang 6.2 Hướng mở rộng • Hoàn thiện chức khác cập nhật giá cổ phiếu - Hiển thị thay đổi giá cổ phiếu biểu đồ để người dùng nắm tổng quan thay đổi giá vàng cách liên tục - Tự động đẩy thông báo cập nhật giá vàng, tỉ giá tiền tệ - Sử dụng AI việc dự đoán số loại cổ phiếu 32 ... tình trạng giá vàng tăng giảm tuần qua Ứng dụng cập nhật xác với giá vàng 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 điện thoại giúp bạn xem thơng tin nhanh độ... muốn xem thông tin giá cổ phiếu tăng giảm người dùng ln phải lên website 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 dễ dàng tham khảo giá vàng lên... thời gian ngắn Flutter hoạt động với code sẵn có sử dụng lập trình viên, tổ chức - Flutter sử dụng ngôn ngữ DART Google phát triển flutter sử dụng để tạo ứng dụng native cho Google - Flutter phát