Giới thiệu
Khi bắt đầu các dự án Flutter, nhiều lập trình viên gặp phải sự chậm trễ không phải do giải quyết các vấn đề phức tạp, mà chủ yếu là do công việc thiết lập lặp đi lặp lại. Thời gian này thường chiếm từ 30-40% thời gian của dự án, khiến cho lập trình viên không thể tập trung vào các nguyên tắc thiết kế và giải quyết các vấn đề khó khăn.
Bài viết này sẽ hướng dẫn bạn cách tối ưu hóa quy trình lập trình Flutter bằng cách sử dụng công cụ AI như Cursor và HuTouch, giúp tiết kiệm thời gian và công sức trong quá trình phát triển ứng dụng.
Nội dung
- Bước 1: Thiết lập ngữ cảnh qua Figma & MCP
- Bước 2: Xác định mục tiêu cao cấp và lập kế hoạch
- Bước 3: Hướng dẫn Cursor tạo scaffold cho các widget
- Bước 4: Tinh chỉnh mã với các prompt vibe
- Bước 5: Thêm kiểm thử và vệ sinh mã nguồn
- Bước 6: Đánh giá và tinh chỉnh theo từng vòng lặp
- Bước 7: Hoàn thiện và kiểm tra chất lượng mã
Bước 1: Thiết lập ngữ cảnh qua Figma & MCP
- Đảm bảo rằng giao diện người dùng (UI) có sẵn trong Figma, giữ nguyên các lớp và thành phần (ví dụ: tiêu đề, nút phát, nút tải xuống, mô tả, điều khiển).
- Kích hoạt Mô hình Ngữ cảnh (MCP) của Figma để Cursor có thể truy cập cấu trúc thiết kế bên dưới - không chỉ là một hình ảnh. Điều này giúp cầu nối thiết kế UI với việc tạo mã một cách chính xác hơn.
Bước 2: Xác định mục tiêu cao cấp và lập kế hoạch
- Tạo một kế hoạch dự án trong Markdown:
- Danh sách tính năng: trình phát trailer, thông tin tập phim, đánh giá, nút, mô tả, thanh điều hướng.
- Luồng trạng thái: đang tải, đang phát, đang tải xuống, xử lý lỗi.
- Tính mô-đun: tách biệt các widget (ví dụ:
TrailerPlayer,EpisodeInfo,ActionButtons,NavBar), mỗi widget được quản lý qua BLoC. - Lời khuyên từ Tom Blomfield: lập kế hoạch trước, phân nhỏ nhiệm vụ, giữ kế hoạch ở nơi dễ thấy và tham khảo lại.
Bước 3: Hướng dẫn Cursor tạo scaffold cho các widget
Sử dụng một prompt như sau:
“Tạo một
Scaffoldcủa Flutter đại diện cho UI: bao gồm một AppBar với mũi tên quay lại và biểu tượng tìm kiếm, một banner hình ảnh ở giữa với overlay trailer, một phần với tiêu đề ‘The Night Agent’, metadata (‘2023’, đánh giá 16+ v.v.), các nút hành động (Phát, Tải xuống), một văn bản mô tả, và một thanh điều hướng dưới với Home, Watchlist, Library, Downloads. Cấu trúc các thành phần thành các tệp widget Dart riêng biệt. Sử dụng mẫu BLoC cho trạng thái (ví dụ: hành động phát/tải xuống).”
Cursor sẽ tạo cấu trúc widget và tạo ra các tệp riêng cho từng thành phần cùng với các lớp BLoC.
Bước 4: Tinh chỉnh mã với các prompt vibe
Tiến hành tinh chỉnh mã đã được tạo:
- Prompt cho các tiêu chuẩn:
“Refactor
ActionButtonsđể sử dụngElevatedButtonvới padding nhất quán và kiểu dáng dựa trên chủ đề. Tách các hằng số màu sắc và kiểu chữ.”
- Prompt cho chức năng:
“Thêm logic BLoC trong
DownloadBloc: khi ‘Tải xuống’ được nhấn, hiển thị một chỉ báo đang tải và sau đó là trạng thái thành công. Kết nối điều này vào UI.”
- Prompt cho tích hợp API:
“Trong
TrailerPlayerBloc, lấy URL trailer qua thông số API đã cung cấp; khi nút phát được nhấn, tải video qua một trình phát mạng.”
Cursor sẽ sửa đổi mã tương ứng, cập nhật các tệp widget và logic BLoC đồng bộ.
Bước 5: Thêm kiểm thử và vệ sinh mã nguồn
Như lời khuyên từ Tom Blomfield:
- Yêu cầu AI tạo kiểm thử tích hợp hoặc widget.
“Viết một bài kiểm thử mô phỏng việc nhấn Tải xuống, đảm bảo BLoC chuyển từ trạng thái đang tải sang trạng thái đã tải xuống, và UI hiển thị thành công.”
- Giữ các tệp mô-đun và các API nhỏ để giữ cho độ phức tạp dễ quản lý.
Bước 6: Đánh giá và tinh chỉnh theo từng vòng lặp
Tiếp tục chu trình này:
- Chạy ứng dụng → xem xét các vấn đề (bố cục, khả năng đáp ứng, trạng thái BLoC).
- Prompt Cursor với các cải tiến cụ thể (“Làm cho UI có thể cuộn trên các thiết bị nhỏ hơn với
SingleChildScrollView”, “Đảm bảo biểu tượng AppBar có thể truy cập với các nhãn ngữ nghĩa đúng”).
Mô hình của Cursor có thể gợi ý các chỉnh sửa ngay lập tức, tăng tốc độ vòng lặp.
Bước 7: Hoàn thiện và kiểm tra chất lượng mã
Bạn - người có chuyên môn - nên:
- Xem xét cấu trúc BLoC để đảm bảo rõ ràng.
- Thêm xử lý lỗi, khả năng tiếp cận, tài liệu.
- Dọn dẹp mã được tạo để dễ đọc và bảo trì.
Tóm tắt: Các thực hành tốt nhất trong lập trình vibe coding
- Prompt giao tiếp cho phép Cursor tạo scaffold cho UI và mã BLoC thông qua ngôn ngữ đơn giản thay vì gõ tay.
- Lập kế hoạch trước, lặp lại sau: Lập bản đồ các màn hình và phân tích trước khi yêu cầu mã, theo hướng dẫn của Tom Blomfield từ Monzo.
- Tích hợp ngữ cảnh qua MCP đảm bảo tính chính xác của thiết kế từ Figma vào việc tạo mã của Cursor.
- Tinh chỉnh nhanh: Áp dụng các prompt để sửa bố cục, kiểu dáng, khả năng phản hồi và chức năng - tăng cường năng suất của lập trình viên.
- Kiến trúc mô-đun và chu kỳ kiểm thử giúp đảm bảo khả năng bảo trì và độ tin cậy.
- Hiểu giới hạn của vibe coding: Nó xuất sắc trong việc tạo mẫu và scaffolding UI, nhưng cần giám sát của chuyên gia cho mã chất lượng sản xuất.
Ví dụ về quy trình làm việc Docker
| Bước | Prompt | Kết quả |
|---|---|---|
| 1 | Scaffold Scaffold + widgets + BLoC | Cấu trúc UI cơ bản |
| 2 | Refactor cho kiểu dáng & trạng thái | Chủ đề nhất quán, logic nút |
| 3 | Thêm logic API cho TrailerPlayerBloc, DownloadBloc | Tương tác chức năng |
| 4 | Viết kiểm thử widget/tích hợp | Xác nhận hành vi UI |
| 5 | Cải tiến khả năng phản hồi | Bố cục có thể cuộn trên màn hình nhỏ |
Tuy nhiên, nếu bạn sẵn sàng ngừng lãng phí thời gian trong các vòng lặp prompt, rinse & repeat, và giúp hình thành tương lai của quy trình làm việc lập trình viên, hãy đăng ký để truy cập beta của HuTouch. Hiện tại, nó đang mở cho một nhóm lập trình viên Flutter trong tháng này.
