Trong bài viết này, bạn sẽ cùng Thầy Duy – Thạc sĩ Công nghệ Thông tin, Đại học Bách Khoa Hà Nội hướng dẫn cách tạo một ứng dụng quản lý ghi chú (Todo App) bằng nền tảng AI Firebase Studio, từ ý tưởng đến mã nguồn Flutter có thể chạy trên Android và Web – không cần cài đặt thủ công Flutter SDK hay Firebase ban đầu. Cùng đón đọc nhé !
Giới thiệu các công cụ sử dụng
Để xây dựng một ứng dụng Flutter Todo App hiệu quả và nhanh chóng, bài viết này sẽ kết hợp sử dụng các công cụ sau:
Firebase Studio
Firebase Studio là một nền tảng AI workspace cho phép lập trình viên tạo ứng dụng dựa trên prompt (mô tả bằng ngôn ngữ tự nhiên), giúp rút ngắn thời gian phát triển ứng dụng. Công cụ này hỗ trợ sinh mã nguồn thực tế cho các framework phổ biến như Flutter, React, Vue… và cho phép chạy thử trực tiếp dưới dạng prototype trên trình duyệt.
Công dụng:
- Tạo layout và logic ứng dụng từ mô tả (prompt)
- Sinh mã CRUD hoàn chỉnh
-
Hỗ trợ export mã sang GitHub hoặc IDE để phát triển tiếp
Ứng dụng: Firebase Studio phù hợp với lập trình viên muốn thử nghiệm nhanh ý tưởng, xây dựng MVP (Minimum Viable Product), hoặc học tập về cách viết ứng dụng thông qua AI gợi ý.
Flutter
Flutter là bộ công cụ UI mã nguồn mở do Google phát triển, cho phép xây dựng ứng dụng đa nền tảng (Android, iOS, Web, Desktop) từ một codebase duy nhất.
Công dụng:
- Viết ứng dụng mobile và web với hiệu năng cao
- Hỗ trợ hot reload giúp phát triển nhanh
-
Sử dụng ngôn ngữ Dart – dễ học và tối ưu cho hiệu suất
Ứng dụng: Flutter được dùng rộng rãi trong các dự án startup, doanh nghiệp, và cá nhân vì khả năng tiết kiệm thời gian và tài nguyên khi phát triển đa nền tảng.
Bước 1: Truy cập Firebase Studio và khởi tạo workspace
Truy cập địa chỉ: https://firebase.studio
Firebase Studio là nền tảng AI hỗ trợ sinh ứng dụng từ prompt bằng tiếng Việt hoặc tiếng Anh. Giao diện tương tự workspace, hỗ trợ quản lý nhiều project.
Thao tác:
- Nhấn Create Project
- Chọn ngôn ngữ lập trình: Flutter
- Firebase Studio sẽ tạo ra một môi trường làm việc riêng, cho phép bạn chỉnh sửa tên app, chọn chủ đề giao diện, xem preview bố cục và logic của ứng dụng.
Bước 2: Chạy thử ứng dụng dưới dạng prototype web
Khi chọn Flutter, hệ thống vẫn có khả năng dựng prototype web tạm thời bằng ReactJS, giúp bạn xem nhanh bố cục và chức năng app mà chưa cần export mã nguồn Flutter.
Điều này giúp bạn:
- Thử nghiệm logic app (UI/UX, các hành động CRUD…)
- Trình bày ý tưởng cho nhóm/cấp trên trước khi bước vào phát triển thật
Bước 3: Nhập Prompt tiếng Việt tạo Todo App (ghi chú công việc)
Prompt sử dụng:
“Tạo ứng dụng Flutter quản lý ghi chú. Bao gồm: thêm ghi chú, sửa nội dung, xoá ghi chú, hiển thị danh sách ghi chú, đánh dấu hoàn thành.”
Sau vài giây xử lý, hệ thống sẽ tự động sinh:
- Bố cục giao diện chính với danh sách ghi chú
- Các nút hành động tương ứng: Thêm, Sửa, Xoá, Hoàn thành
- Logic xử lý dữ liệu (CRUD đơn giản)
Bạn có thể chỉnh sửa tên app, màu nền, font chữ trong phần thiết lập trước khi chạy thử.
Bước 4: Chạy thử Todo App trực tiếp trên trình duyệt
Nhấn Run prototype để hệ thống dựng bản web chạy thử (không cần Flutter SDK).
Bạn có thể:
- Nhấn “Thêm ghi chú” → Điền nội dung ghi chú mới
- Nhấn nút “Sửa” để chỉnh sửa nội dung ghi chú đã tạo
- Nhấn “Xoá” để loại bỏ
- Nhấn “Hoàn thành” để đánh dấu công việc đã hoàn tất
Tính năng hoạt động dựa trên state management đơn giản, có thể kiểm tra trực tiếp logic hoạt động.
Bước 5: Export mã nguồn Flutter
Sau khi prototype hoạt động như mong muốn, bạn có thể xuất mã Flutter thật.
Thao tác:
- Nhấn nút Export Project → Chọn Flutter
- Chọn export dưới dạng file ZIP hoặc đẩy trực tiếp lên GitHub (nếu đã kết nối tài khoản)
Bên trong mã nguồn, bạn sẽ thấy các phần quan trọng:
class TodoItem {
String id;
String content;
bool isDone;
TodoItem({required this.id, required this.content, this.isDone = false});
}Giao diện chính – hiển thị danh sách:
ListView.builder(
itemCount: todoList.length,
itemBuilder: (context, index) {
final item = todoList[index];
return ListTile(
title: Text(item.content),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: () => deleteItem(item.id),
),
onTap: () => toggleDone(item.id),
);
},
)Hàm thêm ghi chú:
void addItem(String content) {
final newItem = TodoItem(id: DateTime.now().toString(), content: content);
setState(() => todoList.add(newItem));
}Bước 6: Đồng bộ Flutter Project qua GitHub và chạy trên Android
Các bước thực hiện:
- Kết nối GitHub trong Firebase Studio
- Chọn project đã tạo → Push to GitHub
- Trên máy cá nhân:
- Clone repo về máy
- Mở bằng Android Studio
- Cài Flutter SDK nếu chưa có
- Chạy thử trên thiết bị thật hoặc giả lập
Hướng phát triển tiếp theo
Với Firebase Studio, bạn có thể:
- Tạo ứng dụng Todo cơ bản trong vòng 10 phút
- Thử nghiệm ý tưởng nhanh mà không cần kiến thức Flutter sâu
- Xuất mã Flutter để phát triển, mở rộng theo nhu cầu thực tế
Trong phần tiếp theo Thầy Duy sẽ hướng dẫn bạn cách:
- Kết nối Firebase Realtime Database
- Đồng bộ ghi chú với cloud
- Đọc – ghi dữ liệu từ Firebase để biến Todo App thành ứng dụng hoàn chỉnh
Hãy theo dõi thầy qua các kênh sau để cập nhật những kiến thức hay và hữu ích về lập trình nhé:
- Kênh YouTube: https://www.youtube.com/@LeHongDuyCNTT
- GitHub cá nhân: https://github.com/DuyLeHong
Cuối cùng, đừng quên theo dõi CodeFresher để cập nhật những thông tin về lập trình, khóa học lập trình. Bạn có thể đăng ký khóa học Flutter tại link: https://laptrinh-online.vn/course/lap-trinh-flutter-co-ban
Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.
SĐT: 0813188668 , 0332026803 (Zalo / Call)
Trả lời