Bối cảnh và vấn đề nghiên cứu

Sự phát triển mạnh mẽ của các thiết bị di động trong thập kỷ qua đã xác lập vị thế thống trị của hai hệ điều hành Android và iOS. Trong quy trình phát triển ứng dụng truyền thống, lập trình viên phải sử dụng hai ngôn ngữ và bộ công cụ hoàn toàn tách biệt: Java/Kotlin với Android SDK cho hệ điều hành Android, và Objective-C/Swift với iOS SDK cho hệ điều hành iOS. Sự phân mảnh này làm gia tăng đáng kể thời gian, chi phí và nguồn lực khi cần xây dựng và duy trì một ứng dụng trên cả hai nền tảng. Nhằm giải quyết thách thức trên, các giải pháp phát triển đa nền tảng (cross-platform) đã ra đời, trong đó bộ công cụ phát triển phần mềm mã nguồn mở Flutter do Google giới thiệu (công bố năm 2015 và phát hành chính thức năm 2017) nổi lên như một giải pháp biên dịch mã nguồn trực tiếp sang mã máy gốc.

Đề tài tốt nghiệp "Tìm hiểu về Flutter và ứng dụng" được thực hiện bởi sinh viên Đỗ Thế Hiệp, dưới sự hướng dẫn của TS. Đỗ Văn Chiểu tại Khoa Công nghệ thông tin, Trường Đại học Quản lý và Công nghệ Hải Phòng.

Nhiệm vụ nghiên cứu của đề tài được quy định cụ thể gồm hai nội dung chính:

  1. Tìm hiểu về Flutter, phương pháp cài đặt và biên dịch hệ thống.
  2. Tìm hiểu về Website, xây dựng ứng dụng đọc website trên thiết bị di động (sử dụng kỹ thuật WebView) và biên dịch hệ thống lên cả hai nền tảng Android và iOS.
  • Đối tượng nghiên cứu: Bộ công cụ phát triển phần mềm Flutter, ngôn ngữ lập trình Dart, cấu trúc hoạt động của website và kỹ thuật nhúng hiển thị website trên ứng dụng di động.
  • Phạm vi nghiên cứu:
    • Không gian: Môi trường phát triển ứng dụng di động trên hai hệ điều hành Windows và macOS; thử nghiệm ứng dụng hiển thị dữ liệu từ Website Hợp tác xã Nông nghiệp và Du lịch Cộng đồng Cổ Loa.
    • Thời gian: Đề tài được giao ngày 12/04/2021 và hoàn thành nghiệm thu vào tháng 07/2021.

Cơ sở lý thuyết và phương pháp

Đề tài dựa trên nền tảng lý thuyết phát triển phần mềm di động hiện đại và các chuẩn công nghệ web:

  • Khung công cụ và ngôn ngữ: Flutter SDK (quản lý theo tiêu chuẩn ECMA), ngôn ngữ lập trình hướng đối tượng Dart do Google phát triển từ năm 2011, công cụ đồ họa cấp thấp Skia viết bằng C++, và thư viện Material Design (Android) cùng Cupertino Style (iOS).
  • Khái niệm và mô hình kỹ thuật: Mô hình kiến trúc phân tầng của Flutter (Flutter Engine, Foundation Library, Widget Tree); cơ chế biên dịch Just-In-Time (JIT) trong môi trường phát triển và Ahead-Of-Time (AOT) khi phát hành; kiến trúc quản lý trạng thái (State Management) với Trạng thái tức thời (Ephemeral State) và Trạng thái ứng dụng (App State) sử dụng mô hình Provider (ChangeNotifier, ChangeNotifierProvider, Consumer); cơ chế điều hướng ngăn xếp Navigator (push, pop, MaterialPageRoute); hệ thống cơ sở dữ liệu quan hệ cục bộ SQLite qua plugin sqflite và cơ sở dữ liệu đám mây Firebase NoSQL.
  • Phương pháp nghiên cứu:
    • Phương pháp nghiên cứu tài liệu: Phân tích, tổng hợp tài liệu chuyên khảo từ sách "Flutter Fast: 65 Example Apps" và khóa học lập trình Flutter cơ bản của Cafedev.
    • Phương pháp thực nghiệm kỹ thuật: Thiết lập môi trường lập trình song song trên hai hệ điều hành máy tính (Windows và macOS), cài đặt bộ công cụ Android Studio, Xcode, công cụ quản lý thiết bị ảo AVD Manager; kiểm tra tính toàn vẹn hệ thống bằng lệnh flutter doctor.
    • Phương pháp đóng gói và triển khai: Cấu hình các tệp quản lý tài nguyên pubspec.yaml, tùy biến giao diện khởi động (Splash Screen), thay đổi biểu tượng ứng dụng trong các thư mục mipmap, thiết lập tài khoản Apple Developer để kiểm thử trên thiết bị phần cứng thật.

Thiết kế và triển khai

Đồ án tập trung vào quy trình thiết kế kỹ thuật, thiết lập môi trường và đóng gói ứng dụng di động đa nền tảng:

Kiến trúc và công nghệ sử dụng

Hệ thống được xây dựng trên nền tảng Flutter framework với ngôn ngữ lập trình Dart. Khác với các framework lai (hybrid) thông thường vốn phụ thuộc vào WebView của hệ điều hành hoặc các widget OEM (Original Equipment Manufacturer), Flutter sử dụng engine đồ họa độc lập Skia để vẽ trực tiếp các thành phần giao diện lên màn hình.

Thành phần kỹ thuật Công nghệ / Công cụ áp dụng Mục đích sử dụng
Ngôn ngữ lập trình Dart Xây dựng logic ứng dụng, xử lý hướng đối tượng
Framework UI Flutter SDK Cung cấp hệ thống widget Material và Cupertino
Đồ họa lõi Skia Engine (C++) Kết xuất đồ họa trực tiếp đa nền tảng
Môi trường Windows Android Studio, Android SDK, AVD Manager Phát triển và biên dịch ứng dụng Android
Môi trường macOS Xcode, Terminal, CocoaPods Biên dịch và đóng gói ứng dụng iOS
Thư viện tích hợp webview_flutter, sqflite, path_provider Nhúng website và quản lý dữ liệu cục bộ

Quy trình thiết lập môi trường và cấu hình hệ thống

  1. Trên hệ điều hành Windows:
    • Tải bộ Flutter SDK và giải nén vào ổ đĩa hệ thống.
    • Truy cập Advanced system settings $\rightarrow$ Environment Variables, chỉnh sửa biến môi trường Path để thêm đường dẫn đến thư mục bin của Flutter.
    • Cài đặt Android Studio, tải các gói plugin Dart và Flutter.
    • Khởi tạo thiết bị máy ảo thông qua AVD Manager (Android Virtual Device), lựa chọn cấu hình phần cứng và phiên bản hệ điều hành Android.
    • Chạy lệnh flutter doctor trong Command Prompt để xác minh trạng thái của Android SDK, máy ảo và các phụ thuộc.
  2. Trên hệ điều hành macOS:
    • Cài đặt Flutter SDK và thêm biến môi trường vào hệ thống.
    • Tải và cấu hình ứng dụng Xcode từ Mac App Store để hỗ trợ trình biên dịch cho iOS Simulator và thiết bị iOS thật.
    • Chạy lệnh flutter doctor trên Terminal để kiểm tra cấu hình liên kết với CocoaPods và Xcode.

Xây dựng ứng dụng thực nghiệm

Ứng dụng thực nghiệm được cấu hình để hiển thị toàn bộ nội dung từ Website Hợp tác xã Nông nghiệp và Du lịch Cộng đồng Cổ Loa trên giao diện di động:

  • Tổ chức cấu trúc dự án: Quản lý các gói phụ thuộc thông qua tệp cấu hình pubspec.yaml.
  • Tùy biến tài nguyên ứng dụng: Cập nhật ảnh đại diện và biểu tượng ứng dụng với đầy đủ kích thước vào các thư mục tài nguyên android/app/src/main/res/mipmap-* trên Android và thư mục Assets trên iOS.
  • Giao diện chờ (Splash Screen): Cấu hình màn hình khởi động hiển thị trước khi ứng dụng tải xong giao diện web.
  • Xử lý đóng gói: Đổi tên định danh ứng dụng, cấu hình phân quyền truy cập mạng Internet trên cả hai tệp kê khai hệ thống (AndroidManifest.xml và Info.plist).
// Ví dụ cấu hình lớp giao diện cơ bản trong Flutter được trình bày trong đồ án
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ung dung Flutter',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyTextPage(),
    );
  }
}

class MyTextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Text Widget Example"),
      ),
      body: Center(
        child: Text("Noi dung ung dung"),
      ),
    );
  }
}

Kiểm thử và xử lý lỗi kỹ thuật

Trong quá trình triển khai thực tế trên thiết bị iOS, tác giả đã cấu hình tài khoản Apple Developer trong Xcode để thực hiện ký số ứng dụng. Đồ án ghi nhận lỗi hệ thống trong việc liên kết và nhận diện các thiết bị chạy hệ điều hành iOS từ phiên bản 14 trở lên, qua đó đưa ra các bước kiểm tra lại phiên bản công cụ tương thích và chứng chỉ phát triển.

Nội dung chính theo từng chương

Chương 1: Tìm hiểu về Flutter

Chương 1 là phần nội dung lý thuyết trọng tâm của đồ án, phân tích toàn diện về framework Flutter và ngôn ngữ Dart:

  • Khái niệm và tính năng: Định nghĩa Flutter là bộ SDK mã nguồn mở đa nền tảng gồm SDK công cụ và UI Library. Phân tích 6 đặc tính nổi bật: mã nguồn mở (Open-Source), đa nền tảng (Cross-platform), tải lại nóng (Hot Reload giúp cập nhật mã nguồn tức thì), tiếp cận SDK gốc (Accessible Native Features), mã tối thiểu (kết hợp biên dịch JIT và AOT), và hệ thống Widget phong phú.
  • Kiến trúc phân tầng: Mô tả 4 thành phần cơ bản gồm Flutter Engine (viết bằng C++, quản lý Skia, I/O, animation, Dart Runtime), Thư viện nền tảng (Foundation Library viết bằng Dart), Hệ thống Widget (cây widget lồng nhau bất biến), và Thiết kế widget theo chuẩn Material Design / Cupertino Style.
  • Ngôn ngữ lập trình Dart: Trình bày chi tiết cú pháp strongly typed, cơ chế Type Inference, các kiểu dữ liệu (String, num, int, double, bool, Object), toán tử số học, tăng/giảm tiền tố-hậu tố, toán tử logic (&&, ||, !), toán tử so sánh, cấu trúc điều khiển (if, if-else), vòng lặp (for, for..in, while, do..while), chú thích (//, /* */, ///), từ khóa final, const, continue, break. Phân tích 4 đặc tính hướng đối tượng (OOP): trừu tượng (Abstraction), đóng gói (Encapsulation - sử dụng dấu gạch dưới _ để biểu diễn phạm vi private, hàm getter =>), kế thừa (Inheritance - từ khóa extends), và đa hình (Polymorphism).
  • Phân loại Widgets trong Flutter:
    • Widget hiển thị: Text (các thuộc tính textAlign, textDirection, overflow, textScaleFactor, softWrap, maxLines, style, fontSize, fontWeight, fontFamily trong assets/font), Button (gồm Flat Button, Raised Button, Floating Button, Drop Down Button, Icon Button), và Image (các phương thức nạp: asset, file, memory, network).
    • Widget bố cục và cấu trúc: Column (thuộc tính mainAxisAlignment, crossAxisAlignment), Row, Center, Stack (chồng lớp widget, Positioned, StackFit), Container (thiết lập lề margin, đệm padding, màu nền), Padding (EdgeInsets), SizedBox, AspectRatio, FittedBox, Expanded.
  • Xử lý Cử chỉ (Gestures): Phân chia thành hai tầng: Tầng Con trỏ (Pointers với các sự kiện PointerDownEvents, PointerMoveEvents, PointerUpEvents, PointerCancelEvents thông qua widget Listener) và Tầng Cử chỉ ngữ nghĩa (Gestures gồm Tap, Double Tap, Drag ngang/dọc, Long Press, Pan, Pinch) được xử lý thông qua widget GestureDetector.
  • Quản lý State: Phân biệt StatelessWidget (bất biến) và StatefulWidget (thay đổi trạng thái qua hàm setState()). So sánh Trạng thái tức thời (Ephemeral State - cục bộ trong một widget như Text Field) và Trạng thái ứng dụng (App State - toàn cục như thông tin đăng nhập, giỏ hàng) với mô hình thư viện Provider (ChangeNotifier, ChangeNotifierProvider, Consumer).
  • Điều hướng (Navigation & Routing): Cơ chế định tuyến trang bằng ngăn xếp sử dụng lớp MaterialPageRoute, hàm Navigator.push() để chuyển tuyến và Navigator.pop() để quay lại.
  • Cơ sở dữ liệu: Khảo sát cơ sở dữ liệu quan hệ SQLite thông qua plugin sqflite và path_provider (quy trình 8 bước từ tạo model class, mở kết nối, tạo bảng CREATE TABLE, chuyển đổi Map toMap(), chèn, truy vấn, cập nhật đến xóa dữ liệu) và cơ sở dữ liệu đám mây Firebase NoSQL (lưu trữ theo bộ sưu tập collection, đồng bộ thời gian thực qua Google Codelab).

Chương 2: Tìm hiểu về Website

Chương 2 cung cấp nền tảng kiến thức về công nghệ web phục vụ cho bài toán thực nghiệm:

  • Cấu tạo của một website: Phân tích các thành phần cấu thành một trang web trên môi trường Internet bao gồm mã nguồn (ngôn ngữ HTML, XHTML, CSS, JavaScript), tên miền (Domain/URL) và máy chủ lưu trữ (Web hosting).
  • Phân loại website:
    • Theo cấu trúc: Trang web tĩnh (Static web) và trang web động (Dynamic web).
    • Theo quyền sở hữu: Website cá nhân, website doanh nghiệp, tổ chức.
    • Theo chức năng: Website tin tức, thương mại điện tử, mạng xã hội (tiêu biểu như Facebook), diễn đàn công nghệ (tiêu biểu như Voz).
    • Theo lĩnh vực hoạt động: Nông nghiệp, du lịch, giáo dục, y tế.
  • Tìm hiểu đối tượng thực nghiệm: Khảo sát cấu trúc, giao diện và nội dung hoạt động của Website Hợp tác xã Nông nghiệp và Du lịch Cộng đồng Cổ Loa nhằm chuẩn bị dữ liệu cho ứng dụng di động.

Chương 3: Bản hướng dẫn sử dụng và ứng dụng thực nghiệm

Chương 3 trình bày toàn bộ quy trình thực hành cài đặt môi trường và kết quả xây dựng ứng dụng:

  • Hướng dẫn trên hệ điều hành Windows: Chi tiết các bước tải SDK, cấu hình biến môi trường Path, cài đặt Android Studio, thiết lập máy ảo trong bảng điều khiển AVD Manager và kiểm tra bằng flutter doctor.
  • Hướng dẫn trên hệ điều hành macOS: Các bước thiết lập Xcode từ App Store, cấu hình terminal và cài đặt các plugin Flutter, Dart.
  • Triển khai ứng dụng di động thực nghiệm: Khởi tạo cấu trúc dự án Flutter, cấu hình nhúng website Cổ Loa, tích hợp gói phụ thuộc vào pubspec.yaml, tùy biến màn hình chờ (Splash Screen), thay đổi tên hiển thị và cập nhật hệ thống biểu tượng (icon) trong các thư mục mipmap.
  • Cấu hình và khắc phục lỗi: Đăng nhập tài khoản Apple Developer trên môi trường macOS và xử lý lỗi không nhận thiết bị chạy hệ điều hành iOS từ phiên bản 14.

Kết quả và đóng góp

Kết quả chính đạt được

  • Hệ thống hóa toàn bộ khung lý thuyết về Flutter SDK, ngôn ngữ lập trình Dart, các mẫu widget giao diện, kỹ thuật xử lý cử chỉ, quản lý trạng thái, cơ chế định tuyến và thao tác cơ sở dữ liệu (SQLite, Firebase).
  • Xây dựng thành công tài liệu hướng dẫn từng bước về thiết lập môi trường phát triển Flutter trên cả hai hệ điều hành máy tính phổ biến (Windows và macOS).
  • Triển khai thành công ứng dụng di động thực nghiệm sử dụng kỹ thuật WebView để đọc và tương tác với Website Hợp tác xã Nông nghiệp và Du lịch Cộng đồng Cổ Loa, biên dịch và chạy ổn định trên cả hai nền tảng thiết bị di động Android và iOS.
  • Hoàn thiện việc cấu hình các thành phần đóng gói ứng dụng thực tế: màn hình khởi động (Splash Screen), hệ thống biểu tượng đa độ phân giải (mipmap), tên ứng dụng và phân quyền hệ thống.

Đóng góp của đề tài

Đồ án đã chứng minh tính khả thi và hiệu quả của việc áp dụng framework Flutter trong việc phát triển ứng dụng di động từ một cơ sở mã nguồn duy nhất (single codebase). So với các phương pháp phát triển gốc (native) đòi hỏi hai bộ mã nguồn riêng biệt bằng Java/Kotlin và Swift/Objective-C, giải pháp trong đồ án giúp rút ngắn thời gian xây dựng giao diện và đơn giản hóa quy trình chuyển đổi nội dung từ website sẵn có sang ứng dụng di động.

Hạn chế và hướng nghiên cứu tiếp

  • Hạn chế:
    • Ứng dụng thực nghiệm dừng lại ở mức độ chuyển tải giao diện website thông qua WebView, chưa khai thác sâu các tính năng phần cứng gốc chuyên sâu của thiết bị di động (như định vị GPS, camera, cảm biến).
    • Phần khảo sát cơ sở dữ liệu Firebase mới dừng ở mức tìm hiểu lý thuyết và tài liệu Codelab, tác giả nhận định quy trình thiết lập còn phức tạp và chưa được hỗ trợ hoàn toàn tối ưu cho Flutter tại thời điểm thực hiện.
    • Quá trình biên dịch trên iOS gặp lỗi không nhận diện thiết bị đối với các phiên bản iOS từ 14 trở lên khi chưa hoàn tất cấu hình chứng chỉ nhà phát triển tương thích.
  • Hướng nghiên cứu tiếp:
    • Mở rộng ứng dụng theo hướng giao diện gốc hoàn toàn (Native UI), kết nối trực tiếp với hệ thống máy chủ thông qua RESTful API thay vì dùng WebView.
    • Tích hợp và cấu hình hoàn chỉnh hệ thống cơ sở dữ liệu SQLite cục bộ và Firebase Realtime Database để hỗ trợ lưu trữ dữ liệu ngoại tuyến (offline mode) và đồng bộ hóa đa người dùng.

Giá trị tham khảo

Đồ án là tài liệu tham khảo phù hợp cho:

  • Sinh viên chuyên ngành Công nghệ thông tin, Kỹ thuật phần mềm đang bắt đầu tiếp cận lập trình ứng dụng di động đa nền tảng với Flutter và Dart.
  • Lập trình viên cần tài liệu hướng dẫn quy chuẩn về thiết lập môi trường phát triển song song giữa Android Studio (Windows) và Xcode (macOS).
  • Người học quan tâm đến quy trình đóng gói ứng dụng, xử lý tài nguyên giao diện cơ bản (Splash Screen, Icon đa kích thước, cấu hình pubspec.yaml) và kỹ thuật nhúng web trên ứng dụng di động.

Câu hỏi thường gặp

1. Điểm khác biệt cốt lõi giữa Flutter và các framework phát triển ứng dụng di động khác là gì?

Theo phân tích của tác giả, Flutter không sử dụng WebView của hệ thống cũng như không dùng các widget OEM đi kèm thiết bị để dựng giao diện. Thay vào đó, Flutter sở hữu công cụ kết xuất đồ họa hiệu suất cao riêng (Skia Engine viết bằng C++) để tự vẽ các widget. Hầu hết các hệ thống như hoạt ảnh, cử chỉ và widget đều được viết bằng ngôn ngữ Dart, giúp lập trình viên kiểm soát trực tiếp toàn bộ giao diện.

2. Sự khác nhau giữa Trạng thái tức thời (Ephemeral State) và Trạng thái ứng dụng (App State) trong Flutter được định nghĩa như thế nào?

Trạng thái tức thời (Ephemeral State) là trạng thái cục bộ chỉ nằm trong phạm vi một widget đơn lẻ (ví dụ: dữ liệu nhập trong Text Field, trạng thái bật tắt nút bấm), có thể xử lý trực tiếp bằng hàm setState() của StatefulWidget. Ngược lại, Trạng thái ứng dụng (App State) là trạng thái toàn cục cần chia sẻ giữa nhiều thành phần của ứng dụng và duy trì qua các phiên làm việc (ví dụ: thông tin đăng nhập, giỏ hàng, thông báo), thường được quản lý thông qua thư viện bên thứ ba như Provider (ChangeNotifier, Consumer).

3. Ngôn ngữ lập trình Dart xử lý tính bao đóng (Encapsulation) như thế nào so với Java hay C#?

Trong ngôn ngữ Dart, các từ khóa bổ từ truy cập như public, private, protected không được sử dụng. Thay vào đó, tính bao đóng được quy ước trực tiếp bằng tiền tố dấu gạch dưới (_) đặt trước tên biến hoặc phương thức để định nghĩa phạm vi truy cập private trong tập tin (file) chứa lớp đó.

4. Ứng dụng thực nghiệm trong đồ án được xây dựng nhằm mục đích gì và sử dụng nguồn dữ liệu nào?

Ứng dụng thực nghiệm được xây dựng nhằm mục đích đọc và hiển thị nội dung website trên thiết bị di động đa nền tảng (Android và iOS) thông qua cơ chế WebView, với nguồn dữ liệu và giao diện được lấy trực tiếp từ Website Hợp tác xã Nông nghiệp và Du lịch Cộng đồng Cổ Loa.

5. Tác giả đã ghi nhận những vấn đề kỹ thuật nào trong quá trình cài đặt và biên dịch trên hệ điều hành macOS/iOS?

Tác giả ghi nhận yêu cầu bắt buộc phải cài đặt Xcode từ Mac App Store, cấu hình tài khoản Apple Developer trên Xcode để ký ứng dụng khi thử nghiệm trên thiết bị thật, đồng thời ghi nhận lỗi hệ thống không nhận diện các thiết bị di động chạy phiên bản hệ điều hành iOS từ 14 trở lên.

Kết luận

Đồ án tốt nghiệp "Tìm hiểu về Flutter và ứng dụng" của sinh viên Đỗ Thế Hiệp đã hoàn thành đầy đủ các nhiệm vụ nghiên cứu được giao theo đề cương của Trường Đại học Quản lý và Công nghệ Hải Phòng. Tác giả đã hệ thống hóa chi tiết cơ sở lý thuyết về kiến trúc Flutter, cú pháp ngôn ngữ Dart, các cơ chế xử lý widget, cử chỉ, định tuyến và cơ sở dữ liệu. Đồng thời, đồ án đã triển khai thành công ứng dụng thực nghiệm đọc website Cổ Loa trên cả hai nền tảng Android và iOS, cung cấp tài liệu hướng dẫn cài đặt và đóng gói có giá trị thực tiễn cho người mới bắt đầu tiếp cận công nghệ này.