Tìm Hiểu Flutter: Đồ Án 1 của Sinh Viên Trường Đại Học Công Nghệ Thông Tin

Tài liệu nghiên cứu Đồ án 1 tìm hiểu flutter, tổng hợp lý thuyết và thực hành, cung cấp kiến thức chuyên sâu về ., phục vụ nghiên cứu và ứng dụng thực tiễn

• Tác giả: Nguyễn Đức Phương
• Người hướng dẫn: ThS. Nguyễn Công Hoan
• Trường học: Đại học Quốc gia TP. Hồ Chí Minh
• Chuyên ngành: Công nghệ thông tin
• Đề tài: Tìm hiểu Flutter
• Loại tài liệu: báo cáo cuối kỳ
• Năm xuất bản: 2023
• Địa điểm: TP. Hồ Chí Minh

Tóm tắt

I. Tìm Hiểu Flutter Tổng Quan Về Flutter Framework

Flutter là một framework phát triển ứng dụng di động đa nền tảng, được Google phát triển. Nó cho phép lập trình viên xây dựng ứng dụng cho cả iOS và Android từ một mã nguồn duy nhất. Sử dụng ngôn ngữ lập trình Dart, Flutter mang lại hiệu suất cao và trải nghiệm người dùng mượt mà. Với tính năng Hot reload, lập trình viên có thể xem ngay lập tức các thay đổi mà không cần khởi động lại ứng dụng. Điều này giúp tiết kiệm thời gian và tăng hiệu quả trong quá trình phát triển.

1.1. Lịch Sử Phát Triển Của Flutter

Flutter được giới thiệu lần đầu vào năm 2015 và đã trải qua nhiều phiên bản cập nhật. Mỗi phiên bản đều mang lại những cải tiến đáng kể về hiệu suất và tính năng. Sự phát triển nhanh chóng của Flutter đã thu hút sự quan tâm của cộng đồng lập trình viên.

1.2. Kiến Trúc Hệ Thống Flutter

Kiến trúc của Flutter bao gồm các thành phần chính như Widgets, Rendering, và Foundation. Widgets là các thành phần giao diện người dùng, trong khi Rendering chịu trách nhiệm vẽ các Widgets lên màn hình. Foundation cung cấp các API cơ bản cho Flutter.

II. Những Thách Thức Khi Phát Triển Ứng Dụng Với Flutter

Mặc dù Flutter mang lại nhiều lợi ích, nhưng cũng tồn tại một số thách thức trong quá trình phát triển. Một trong những vấn đề chính là việc quản lý trạng thái trong ứng dụng. Việc lựa chọn phương pháp quản lý trạng thái phù hợp có thể ảnh hưởng lớn đến hiệu suất và khả năng mở rộng của ứng dụng. Ngoài ra, việc tích hợp với các thư viện bên ngoài cũng có thể gặp khó khăn.

2.1. Quản Lý Trạng Thái Trong Flutter

Quản lý trạng thái là một trong những thách thức lớn nhất khi phát triển ứng dụng với Flutter. Có nhiều phương pháp như Provider, BLoC, và Redux, mỗi phương pháp đều có ưu và nhược điểm riêng.

2.2. Tích Hợp Thư Viện Bên Ngoài

Việc tích hợp các thư viện bên ngoài có thể gây khó khăn cho lập trình viên, đặc biệt là khi các thư viện này không được tối ưu hóa cho Flutter. Điều này có thể dẫn đến các vấn đề về hiệu suất và tương thích.

III. Phương Pháp Phát Triển Ứng Dụng Di Động Đa Nền Tảng Với Flutter

Flutter cung cấp nhiều phương pháp để phát triển ứng dụng di động đa nền tảng. Việc sử dụng Flutter widgets cho phép lập trình viên tạo ra giao diện người dùng đẹp mắt và tương tác. Bên cạnh đó, tính năng Hot reload giúp tăng tốc độ phát triển ứng dụng. Việc sử dụng Dart cũng giúp lập trình viên dễ dàng hơn trong việc viết mã và duy trì ứng dụng.

3.1. Sử Dụng Flutter Widgets Để Tạo Giao Diện

Flutter cung cấp một bộ sưu tập phong phú các Widgets, cho phép lập trình viên dễ dàng tạo ra giao diện người dùng phong phú và tương tác. Các Widgets này có thể được tùy chỉnh để phù hợp với nhu cầu của ứng dụng.

3.2. Tối Ưu Hóa Hiệu Suất Ứng Dụng

Để tối ưu hóa hiệu suất ứng dụng, lập trình viên cần chú ý đến việc sử dụng các phương pháp như lazy loading và giảm thiểu các hoạt động tốn kém. Điều này giúp ứng dụng hoạt động mượt mà hơn trên các thiết bị khác nhau.

IV. Ứng Dụng Thực Tiễn Của Flutter Trong Phát Triển Ứng Dụng

Flutter đã được áp dụng trong nhiều ứng dụng thực tế, từ các ứng dụng di động đến các ứng dụng web. Nhiều công ty lớn đã sử dụng Flutter để phát triển ứng dụng của họ, nhờ vào khả năng phát triển nhanh chóng và hiệu suất cao. Các ứng dụng như Google Ads và Alibaba đã chứng minh được sức mạnh của Flutter trong việc phát triển ứng dụng đa nền tảng.

4.1. Các Ứng Dụng Nổi Bật Sử Dụng Flutter

Nhiều ứng dụng nổi bật như Google Ads và Reflectly đã được phát triển bằng Flutter. Những ứng dụng này không chỉ đẹp mắt mà còn mang lại trải nghiệm người dùng tuyệt vời.

4.2. Kết Quả Nghiên Cứu Về Hiệu Suất Của Flutter

Nghiên cứu cho thấy rằng ứng dụng phát triển bằng Flutter có hiệu suất tương đương hoặc thậm chí tốt hơn so với các ứng dụng phát triển bằng các công nghệ khác như React Native. Điều này giúp Flutter trở thành một lựa chọn hấp dẫn cho các nhà phát triển.

V. Kết Luận Tương Lai Của Flutter Trong Phát Triển Ứng Dụng

Flutter đang ngày càng trở nên phổ biến trong cộng đồng lập trình viên. Với sự hỗ trợ mạnh mẽ từ Google và cộng đồng, Flutter có tiềm năng lớn để phát triển trong tương lai. Việc tích hợp các công nghệ mới như AI và AR vào Flutter sẽ mở ra nhiều cơ hội mới cho các nhà phát triển. Sự phát triển của Flutter sẽ tiếp tục thúc đẩy xu hướng phát triển ứng dụng đa nền tảng.

5.1. Xu Hướng Tương Lai Của Flutter

Flutter có khả năng tích hợp với nhiều công nghệ mới, từ AI đến AR, giúp mở rộng khả năng phát triển ứng dụng. Điều này sẽ tạo ra nhiều cơ hội mới cho lập trình viên.

5.2. Tác Động Của Flutter Đến Ngành Phát Triển Ứng Dụng

Sự phát triển của Flutter sẽ ảnh hưởng lớn đến ngành phát triển ứng dụng, đặc biệt là trong việc thúc đẩy xu hướng phát triển ứng dụng đa nền tảng. Điều này sẽ giúp tiết kiệm thời gian và chi phí cho các nhà phát triển.

Trích đoạn nội dung tài liệu

Chương 1. TỔNG QUAN VỀ FRONTEND. Lịch sử phát triển. Thời kỳ desktop applications.

Thời kỳ web applications. Thời kỳ JavaScript. Sự phát triển của CSS. Cách mạng jQuery.

Thời kỳ mobile applications. Thời kỳ cross platform applications. Thời kỳ progressive web applications. Thời kỳ responsive design.

Framework trỗi dậy. Công nghệ Frontend. Các ngôn ngữ lập trình và framework. Các framework Frontend phổ biến.

Các xu hướng công nghệ phổ biến. Artificial Intelligence và Machine Learning. Single-Page Application. Progressive Web Apps.

Server-Side Rendering. Low Code Development. Micro Front End Architecture. Mobile-First Approach .Voice User Interface.

CÁC KIẾN TRÚC PHỔ BIẾN. Cấu trúc mô hình MVC. Hoạt động của mô hình MVC. Lợi ích của việc sử dụng mô hình MVC.

Các ngôn ngữ và framework sử dụng mô hình MVC. Cấu trúc của mô hình MVP. Hoạt động của mô hình MVP. Sự khác biệt giữa MVC và MVP.

Lợi ích của việc sử dụng mô hình MVP. Các ngôn ngữ và framework sử dụng mô hình MVP. Cấu trúc của mô hình MVVM. Hoạt động của mô hình MVVM.

Sự khác biệt giữa MVC/MVP và MVVM. Lợi ích của việc sử dụng mô hình MVVM. Các ngôn ngữ và framework sử dụng mô hình MVVM. Cấu trúc của mô hình component-based.

Hoạt động của mô hình component-based. Lợi ích của việc sử dụng mô hình component-based. Các ngôn ngữ và framework sử dụng mô hình component-based. Cấu trúc của mô hình micro Frontend.

Hoạt động của mô hình micro Frontend. Lợi ích của việc sử dụng mô hình micro Frontend. Các công nghệ và framework sử dụng mô hình micro Frontend. Kiến trúc Flux.

Cấu trúc của kiến trúc Flux. Hoạt động của kiến trúc Flux. Lợi ích của việc sử dụng kiến trúc Flux. Các công nghệ và framework sử dụng kiến trúc Flux.

Kiến trúc Redux. Cấu trúc của kiến trúc Redux. Hoạt động của kiến trúc Redux. So sánh kiến trúc Redux so với kiến trúc Flux.

Các công nghệ và framework sử dụng kiến trúc Redux. CÁC VẤN ĐỀ CƠ BẢN CỦA FRONTEND. Hiển thị UI (UI Rendering). Phương thức xử lý.

UI Rendering trong React. React Virtual DOM. UI Rendering trong Flutter. Giải quyết vấn đề.

Tương tác trong React. Tương tác trong Flutter. Cách giải quyết. Form Validation với React.

Form Validation với Flutter. Tạo Frontend động (dynamic form). Công nghệ BEEKAI. Xây dựng form với nhiều bước (multi-step form builder).

Công nghệ React-hook. Các loại React Hooks. KHÁI QUÁT VỀ FLUTTER. Lịch sử phát triển.

Kiến trúc hệ thống Flutter. Ưu nhược điểm. Nhược điểm. Hiện trạng, tiềm năng.

Refactor mã thành Widget thay vì phương thức. Kiểm soát chi phí phương thức build. Sử dụng state management. Xác định rõ ràng kiến trúc.

Tuân theo Dart style guide. Lựa chọn Package kỹ càng. Hạn chế sử dụng MediaQuery/LayoutBuilder. Chỉ sử dụng Streams khi cần thiết.

Sử dụng từ khóa const khi có thể .Giảm thiểu các hoạt động tốn kém .Sử dụng lazy builder .Giảm thiểu intrinsic operations .Sử dụng if thay vì conditional expression .Sử dụng ?? và ?. Trường hợp nên sử dụng. Phát triển ứng dụng di động đa nền tảng. Phát triển Web App.

Phát triển ứng dụng yêu cầu ổn định cao. Trường hợp không nên sử dụng. Ứng dụng có chức năng phụ thuộc cao đến hệ điều hành. Áp dụng thực tế tăng cường (Augmented Reality).

Khả năng Web hạn chế. Banking và Decentralized exchanges. SO SÁNH FLUTTER VỚI REACT NATIVE. Ngôn ngữ lập trình.

Kiến trúc kỹ thuật. Kiến trúc Flutter. Kiến trúc React Native. UI component và development API.

React Native Component. Năng suất của nhà phát triển. React Native DX. Hỗ trợ cộng đồng.

Cộng đồng Flutter. Cộng đồng React Native. Hỗ trợ Testing. React Native Testing.

Hỗ trợ tự động hóa Build và Release. Flutter Build and Release. React Native Build and Release. PHÂN TÍCH THIẾT KẾ ỨNG DỤNG.

Hiện trạng vấn đề. Phương hướng giải quyết. Phân tích yêu cầu ứng dụng. Phân tích thiết kế hệ thống.

Biểu đồ Use Case. Danh sách actors. Danh sách Use Case. Đặc tả Use Case.

Đặc tả Use Case đăng ký. Đặc tả Use Case đăng nhập. Đặc tả Use Case đăng xuất. Đặc tả Use Case đăng nhập với Google.

Đặc tả Use Case xem danh sách bài đăng. Đặc tả Use Case thêm bài đăng. Đặc tả Use Case yêu thích bài đăng. Đặc tả Use Case xoá bài đăng.

Đặc tả Use Case xem danh sách bình luận. Đặc tả Use Case thêm bình luận. Đặc tả Use Case xoá bình luận. Đặc tả Use Case chỉnh sửa thông tin tài khoản.

Mô hình cơ sở dữ liệu. Mô tả giao diện ứng dụng. Giao diện đăng ký. Giao diện đăng nhập.

Giao diện trang chủ. Giao diện danh sách bình luận. Giao diện thêm bài đăng. Giao diện quản lý thông tin tài khoản.

Cài đặt ứng dụng. Kết quả đạt được. Hướng phát triển. 127 xi DANH MỤC HÌNH Hình 1.

HTML, CSS, JavaScript tạo nên trang web. Cách AJAX hoạt động. Các tính năng của NodeJS. Một số phương thức trong jQuery.

Luồng hoạt động của PWA. Số lượng framework đồ sộ khi chỉ mới tính riêng cho JS. IDE và text editor. Đa dạng ngôn ngữ lập trình.

Server-side rendering. Mô phỏng luồng hoạt động của MVC. Các ngôn ngữ và framework sử dụng MVC. Mô hình MVP.

Mô hình MVC. Cấu trúc mô hình MVVM. Các thành phần của kiến trúc Flux. Cấu trúc của kiến trúc Redux.

React thể hiện component thành view. React Virtual DOM. Quy trình render Widget của Flutter. Mẫu mã lệnh sử dụng thư viện yup và react-hook-form.

Mẫu mã lệnh sử dụng formik. Mẫu mã lệnh sử dụng react-hook-form. Mẫu mã lệnh sử dụng TextFormField. Gói form_bloc hỗ trợ cho Flutter.

Tổ chức cấu trúc trang và các form câu hỏi bằng bảng điều khiển (control panel) và phương thức drag-and-drop. Thiết kế chủ đề. Tự tạo code (Code Generation): Tự động xây dựng ứng dụng bằng ngôn ngữ HTML hoặc React Hook Form. Flow control của BEEKAI.

BEEKAI có khả năng duy trì khả năng đáp ứng người dùng trên mọi nền tảng. Kết quả phân tích của BEEKAI. Giao diện theo dõi hồ sơ của BEEKAI. Xuất bản dữ liệu theo dõi người dùng.

Ngôn ngữ Dart. Tóm tắt lịch sử Flutter. Kiến trúc Flutter. Mô tả roadmap của Flutter.

Kiến trúc BLOC. Kiến trúc Provider sử dụng ChangeNotifier. Ví dụ sử dụng lazy builder. Ví dụ sử dụng toán tử ??.

Hạn chế của Flutter cho Web. Tencent Cloud Chat sử dụng Flutter. Chỉ số thành công của nhóm phát triển khi sử dụng Flutter. Ứng dụng Xianyu sử dụng Flutter.

Chỉ số thành công của nhóm phát triển eBay. Ứng dụng eBay Motors. Chỉ số thành công của nhóm phát triển Nubank. Ứng dụng Nubank liên kết với thẻ vật lý.

Skia – Flutter high performance rendering engine. Mô tả kiến trúc 2 luồng của React Native. React Native giao tiếp với nền tảng native thông qua cơ chế cầu nối Bridge. Mô tả Widget thông qua Widget tree của Flutter inspector.

React Native lấy cảm hứng component từ React, chỉ khác môi trường chạy ứng dụng. Ví dụ ứng dụng React Native. Sơ đồ Use Case tổng quát. Sơ đồ Use Case cho module bài đăng.

Sơ đồ Use Case cho module bình luận. Giao diện đăng ký. Giao diện đăng nhập. Giao diện trang chủ.

Giao diện trang chủ khi mở menu mở rộng của bài đăng. Giao diện danh sách bình luận. Giao diện danh sách bình luận khi mở menu mở rộng của bình luận. Giao diện thêm bài đăng.

Giao diện thêm bài đăng khi mở menu mở rộng chọn ảnh. Giao diện quản lý thông tin tài khoản. Giao diện quản lý thông tin tài khoản khi mở menu mở rộng chọn ảnh.125 xiv DANH MỤC BẢNG Bảng 5.1 So sánh hiệu suất của Flutter và React Native .1 Danh sách actors .2 Danh sách Use Case .3 Đặc tả Use Case đăng ký.4 Đặc tả Use Case đăng nhập .5 Đặc tả Use Case đăng xuất .6 Đặc tả Use Case đăng nhập với Google .7 Đặc tả Use Case xem danh sách bài đăng .8 Đặc tả Use Case thêm bài đăng .9 Đặc tả Use Case yêu thích bài đăng .10 Đặc tả Use Case xoá bài đăng .11 Đặc tả Use Case xem danh sách bình luận .12 Đặc tả Use Case thêm bình luận .13 Đặc tả Use Case xoá bình luận.14 Đặc tả Use Case chỉnh sửa thông tin tài khoản .15 Danh sách các tập (NoSQL Collections) .19 Mô tả giao diện đăng ký .20 Mô tả giao diện đăng nhập .21 Mô tả giao diện trang chủ .22 Mô tả giao diện danh sách bình luận .23 Mô tả giao diện thêm bài đăng .24 Mô tả giao diện quản lý thông tin tài khoản .126 xv TÓM TẮT ĐỒ ÁN Đồ án tập trung vào tìm hiểu và nghiên cứu về Flutter nói riêng và nhánh Frontend nói riêng, một trong những ngành nghề phổ biến nhất trong cộng đồng lập trình viên hiện nay. Đồ án tập trung nghiên cứu về quá trình phát triển của ngành Frontend, các xu hướng phát triển hiện nay như tích hợp AI, AR, responsive application và xu thế chuyển sang các ứng dụng chạy đa nền tảng.

Đồ án cung cấp một cái nhìn rõ hơn về những điều cần lưu ý trong quá trình xây dựng một ứng dụng xét về mặt Frontend, những kiến trúc phổ biến và những best practice để tối ưu hiệu suất của ứng dụng. Ở cuối đồ án là một ứng dụng mạng xã hội đơn giản, mục đích chính để thể hiện khả năng chạy đa nền tảng của Flutter. TỔNG QUAN VỀ FRONTEND 1. Frontend là gì Frontend, còn được gọi là client-side đề cập đến phần của ứng dụng phần mềm hoặc trang web mà người dùng tương tác trực tiếp.

Nó bao gồm các yếu tố giao diện người dùng (UI) và trải nghiệm người dùng (UX) của một hệ thống. Phát triển Frontend liên quan đến việc tạo và triển khai các yếu tố trực quan, chẳng hạn như trang web, biểu mẫu, nút, menu và các tính năng tương tác khác mà người dùng thấy và tương tác khi sử dụng một ứng dụng hoặc trang web. Phát triển front-end thường bao gồm sự kết hợp của các công nghệ, bao gồm HTML để cấu trúc nội dung, CSS để thiết kế và bố trí và JavaScript để thêm tính tương tác và chức năng vào các trang web. Các nhà phát triển front-end làm việc để đảm bảo rằng giao diện người dùng thân thiện, hấp dẫn mắt và phản hồi trên các thiết bị và kích thước màn hình khác nhau.