Xây dựng trình tạo mã Flutter dựa trên AI bằng Gemini

Xây dựng một công cụ trợ lý lập trình để tạo giao diện người dùng Flutter hoặc bất kỳ thành phần mã nào mà bạn muốn lặp lại nhanh chóng. Việc tạo giao diện người dùng có thể rất thú vị và bổ ích, nhưng cũng là một công việc khó khăn. Không chỉ là việc viết đúng mã, mà còn là việc tạo giao diện phù hợp và thuyết phục nhóm của bạn đồng ý về hướng thiết kế.

Hướng dẫn này cho bạn biết cách mở rộng Tác nhân giao diện Flutter, một công cụ hỗ trợ mã dựa trên AI do nhóm Quan hệ với nhà phát triển Flutter tại Google xây dựng. Dự án nguồn mở này là một tiện ích dành cho Visual Studio Code (VS Code) của Microsoft. Tiện ích này tạo ra các thành phần cụ thể của giao diện Flutter hoặc đối tượng ThemeData, bao gồm cả bảng phối màu, kiểu văn bản và kiểu nút. Bạn có thể sửa đổi dự án để các hàm hiện có này hoạt động hiệu quả hơn cho bạn hoặc tạo các lệnh mới để hỗ trợ tốt hơn quy trình phát triển của bạn.

Để xem video tổng quan về dự án và cách mở rộng dự án, bao gồm cả thông tin chi tiết từ những người đã tạo dự án, hãy xem nội dung Trình tạo mã Flutter AI – Tạo bằng AI của Google. Nếu không, bạn có thể bắt đầu mở rộng dự án theo hướng dẫn bên dưới.

Ảnh chụp màn hình của Flutter Theme Agent đang chạy trong VS Code

Hình 1. Flutter Theme Agent đang chạy trong cửa sổ VS Code Extension Development Host (Máy chủ phát triển tiện ích VS Code).

Thiết lập dự án

Những hướng dẫn này sẽ hướng dẫn bạn cách thiết lập dự án Flutter Theme Agent để phát triển và kiểm thử. Các bước chung là Cài đặt một số phần mềm cần thiết, đặt một vài biến môi trường, nhân bản dự án từ kho lưu trữ mã và chạy quá trình cài đặt cấu hình.

Cài đặt các điều kiện tiên quyết

Dự án Flutter Theme Agent chạy dưới dạng một tiện ích của Microsoft Visual Studio Code (VS Code) và sử dụng Node.js và npm để quản lý các gói và chạy ứng dụng. Hướng dẫn cài đặt sau đây dành cho máy chủ Linux.

Cách cài đặt phần mềm cần thiết:

  1. Cài đặt Visual Studio Code cho nền tảng của bạn.
  2. Cài đặt node và npm bằng cách làm theo hướng dẫn cài đặt cho nền tảng của bạn.
  3. Nếu bạn chưa cài đặt Flutter cho VS Code, hãy làm theo hướng dẫn cài đặt.

Sao chép và định cấu hình dự án

Tải mã dự án xuống và sử dụng lệnh cài đặt npm để tải các phần phụ thuộc bắt buộc xuống và định cấu hình dự án. Bạn cần có phần mềm kiểm soát nguồn git để truy xuất mã nguồn của dự án.
Cách tải và định cấu hình mã dự án:

  1. Sao chép kho lưu trữ git bằng lệnh sau.

    git clone https://github.com/google/generative-ai-docs`

  2. Bạn có thể định cấu hình kho lưu trữ git cục bộ để sử dụng tính năng kiểm tra thưa thớt, nhờ đó, bạn chỉ có các tệp cho dự án Docs Agent.

    cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent

  3. Chuyển đến thư mục gốc của dự án Flutter Theme Agent.

    cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/

  4. Chạy lệnh cài đặt để tải các phần phụ thuộc xuống và định cấu hình dự án:

    npm install

Định cấu hình và kiểm thử tiện ích

Giờ đây, bạn có thể kiểm thử quá trình cài đặt bằng cách chạy Flutter Theme Agent dưới dạng một tiện ích phát triển trong VS Code trên thiết bị. Quá trình kiểm thử sẽ mở một cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) VS Code riêng biệt, trong đó có tiện ích mới. Trong cửa sổ mới này, bạn định cấu hình Khoá API mà tiện ích sử dụng để truy cập vào API Google Gemini.

Cách định cấu hình và kiểm thử chế độ thiết lập:

  1. Khởi động ứng dụng VS Code.
  2. Trong VS Code, hãy tạo một cửa sổ mới bằng cách chọn File > New Window (Tệp > Cửa sổ mới).
  3. Mở dự án Flutter Theme Agent bằng cách chọn File > Open Folder (Tệp > Mở thư mục) rồi chọn thư mục flutter_theme_agent/.
  4. Trong VS Code, hãy mở tệp flutter_theme_agent/package.json.
  5. Chạy tiện ích ở chế độ gỡ lỗi bằng cách chọn Run > Start Debugging (Chạy > Bắt đầu gỡ lỗi). Bước này sẽ mở một cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) riêng trong VS Code.
  6. Mở phần cài đặt VS Code bằng cách chọn Code > Settings > Settings (Mã > Cài đặt > Cài đặt).
  7. Lấy khoá API Gemini của Google từ trang web dành cho nhà phát triển AI tạo sinh và sao chép chuỗi khoá.

  8. Đặt khoá API làm chế độ cài đặt cấu hình. Trong trường Search Settings (Cài đặt tìm kiếm), hãy nhập flutter theme, chọn thẻ User (Người dùng) và trong chế độ cài đặt Google > Gemini: Api Key (Google > Gemini: Khoá API), hãy nhấp vào đường liên kết Edit in settings.json (Chỉnh sửa trong settings.json) rồi thêm khoá API Gemini:

    "google.ai.apiKey": "your-api-key-here"

  9. Lưu các thay đổi vào tệp settings.json rồi đóng các thẻ cài đặt.

Cách kiểm thử các lệnh mở rộng:

  1. Trong cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) của VS Code, hãy viết một chú thích mã mô tả thành phần giao diện người dùng mà bạn muốn tạo.
  2. Chọn văn bản nhận xét có các đặc điểm của thành phần.
  3. Mở bảng lệnh bằng cách chọn View > Command Palette (Xem > Bảng lệnh).
  4. Trong Bảng điều khiển lệnh, hãy nhập Flutter Theme rồi chọn một trong các lệnh có tiền tố đó.

Chỉnh sửa lệnh hiện có

Sửa đổi các lệnh được cung cấp trong Flutter Theme Agent là cách đơn giản nhất để thay đổi hành vi và chức năng của tiện ích.

Cả lệnh nhận xét và lệnh xem lại đều sử dụng một số phương pháp nhắc ngắn gọn với các ví dụ về mã và nhận xét cho mã đó, cũng như một số hướng dẫn chung cho mô hình ngôn ngữ AI. Thông tin ngữ cảnh của câu lệnh này sẽ hướng dẫn mô hình ngôn ngữ Gemini tạo câu trả lời. Bằng cách thay đổi hướng dẫn, ví dụ hoặc cả hai trong lệnh nhận xét hoặc xem xét, bạn có thể thay đổi cách hoạt động của từng lệnh hiện có.

Bộ hướng dẫn này giải thích cách sửa đổi lệnh buttonstyle.ts bằng cách thay đổi văn bản lời nhắc của lệnh.

Cách chuẩn bị để chỉnh sửa lệnh buttonstyle.ts:\

  1. Khởi động ứng dụng VS Code.
  2. Trong VS Code, hãy tạo một cửa sổ mới bằng cách chọn File > New Window (Tệp > Cửa sổ mới).
  3. Mở dự án Flutter Theme Agent bằng cách chọn File > Open Folder (Tệp > Mở thư mục) rồi chọn thư mục flutter_theme_agent/.

  4. Mở tệp flutter_theme_agent/src/buttonstyle.ts.

    Cách sửa đổi hành vi của lệnh buttonstyle.ts:\

  5. Trong tệp buttonstyle.ts, hãy chỉnh sửa hằng số BUTTONSTYLE_CONTEXT để đưa vào các hướng dẫn khác nhau.

    const BUTTONSTYLE_CONTEXT=`
ButtonStyle should only define properties that exist for a ButtonStyle
object. ButtonStyle objects have the following properties. The buttons
can ONLY be styled by setting these properties. No other properties:
alignment → AlignmentGeometry? // The alignment of the button's child.
...

  6. Nếu muốn, trong tệp buttonstyle.ts, hằng số BUTTONSTYLE_CONTEXT, hãy thêm một ví dụ khác về hướng dẫn và đầu ra của kiểu nút hoặc thay thế một trong các ví dụ hiện có.

    ...
Here's an example prompt:
Create a ButtonStyle where the button is green by default and blue on hover state. And elevation is 14, no surface tint color, and the splash effect is turned off.
Here's an example of good Dart code:
ButtonStyle(
  backgroundColor: MaterialStateProperty.resolveWith<Color?>(
...

  7. Lưu các thay đổi vào tệp buttonstyle.ts.

Cách kiểm thử lệnh đã sửa đổi:

  1. Trong cửa sổ dự án tiện ích VS Code, hãy khởi động lại trình gỡ lỗi bằng cách chọn Run > Restart Debugging (Chạy > Khởi động lại quá trình gỡ lỗi).

  2. Trong cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) của VS Code, hãy chọn một chú thích mã trong cửa sổ trình chỉnh sửa mô tả kiểu nút mà bạn muốn, ví dụ:

    // blue, lickable buttons that light up when you hover over them`

  3. Mở bảng lệnh bằng cách chọn View > Command Palette (Xem > Bảng lệnh).

  4. Trong Bảng điều khiển lệnh, hãy nhập Flutter rồi chọn lệnh Trình đại diện giao diện Flutter: Tạo ButtonStyle Flutter.

Tạo lệnh mới

Bạn có thể mở rộng Flutter Theme Agent bằng cách tạo các lệnh mới thực hiện các tác vụ hoàn toàn mới bằng API Gemini. Mỗi tệp lệnh, chẳng hạn như buttonstyle.ts và colorscheme.ts, chủ yếu là độc lập và bao gồm mã để thu thập văn bản từ trình chỉnh sửa đang hoạt động, soạn lời nhắc, kết nối với API Gemini, gửi lời nhắc và xử lý phản hồi.

Ảnh chụp màn hình của Flutter Theme Agent (Trình điều khiển giao diện Flutter) với lệnh mới hiển thị

Hình 2. Lệnh Tác nhân giao diện Flutter mới trong cửa sổ VS Code Extension Development Host (Máy chủ phát triển tiện ích VS Code).

Tập hợp hướng dẫn này giải thích cách tạo một lệnh mới bằng cách sử dụng mã của một lệnh hiện có, colorscheme.ts, làm mẫu. Bản cập nhật này thay đổi lệnh để không bao gồm cú pháp bao bọc của đối tượng ColorScheme, nhờ đó bạn không phải xoá cú pháp này sau khi tạo và hình dung kết quả nhanh hơn.

Cách tạo lệnh chỉ tạo danh sách màu cho đối tượng ColorScheme:

  1. Tạo một bản sao của tệp flutter_theme_agent/src/colorscheme.ts có tên là colorscheme2.ts trong thư mục src/.
  2. Trong VS Code, hãy mở tệp src/colorscheme2.ts.

  3. Trong tệp colorscheme2.ts, hãy đổi tên hàm generateColorScheme thành generateColorScheme2:

    export async function generateColorScheme2(){
  vscode.window.showInformationMessage('Generating Color Scheme...');

  4. Thay đổi hướng dẫn lời nhắc trong tệp colorscheme2.ts. Chỉnh sửa hướng dẫn tạo mã COLORSCHEME_CONTEXT bằng cách xoá văn bản ColorScheme( khỏi mã ví dụ ở dòng 51 và biến dòng này thành dòng trống.

    ...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...

  5. Xoá ký tự dấu ngoặc đơn đóng ")" khỏi cuối danh sách màu và chuyển thành một dòng trống.

    ...
  inversePrimary: Color(0xffD15B9D),
  surfaceTint: Color(0xffFF80AB),

This example code is a good ...

  6. Lặp lại các thay đổi này cho ví dụ thứ hai. Trong chuỗi COLORSCHEME_CONTEXT ở dòng 87, hãy xoá văn bản ColorScheme( và đặt thành một dòng trống.

  7. Trên dòng 115, hãy xoá ký tự dấu ngoặc đơn đóng ")" khỏi cuối danh sách màu và chuyển thành một dòng trống.

  8. Trong chuỗi COLORSCHEME_CONTEXT, hãy thêm một lệnh để không bao gồm cú pháp bao bọc:

    ...
- The color scheme must be accessible and high-contrast.

In the response, only include the list of colors and nothing else. Do
not include a starting "ColorScheme(" prefix or an ending ")" suffix.

Here's an example user prompt:
...

  9. Lưu các thay đổi vào tệp colorscheme2.ts.

Tích hợp lệnh mới

Sau khi hoàn tất mã cho lệnh mới, bạn cần tích hợp mã đó với phần còn lại của tiện ích. Cập nhật các tệp extension.ts và package.json để đưa lệnh mới vào tiện ích và cho phép VS Code có thể gọi lệnh mới.

Cách tích hợp lệnh mới với mã tiện ích:

  1. Trong VS Code, hãy mở tệp flutter_theme_agent/src/extension.ts.

  2. Nhập mã lệnh mới vào tiện ích bằng cách thêm một câu lệnh nhập mới.

    import { generateColorScheme2 } from './components/colorscheme2';

  3. Đăng ký lệnh mới bằng cách thêm mã sau vào hàm activate().

    export function activate(context: vscode.ExtensionContext) {
    ...
    vscode.commands.registerCommand('flutter-theme-agent.generateColorScheme2',
        generateColorScheme2);
    ...
}

  4. Lưu các thay đổi vào tệp extension.ts.

Cách tích hợp lệnh name với gói tiện ích:

  1. Trong VS Code, hãy mở tệp flutter_theme_agent/package.json.

  2. Thêm lệnh mới vào phần commands của tệp gói.

    "contributes": {
  "commands": [
    ...
    {
      "command": "flutter-theme-agent.generateColorScheme2",
      "title": "Flutter Theme Agent: My New Code Generator."
    }
  ],

  3. Lưu các thay đổi vào tệp package.json.

Kiểm thử lệnh mới

Sau khi hoàn tất việc lập trình lệnh và tích hợp lệnh đó với tiện ích, bạn có thể kiểm thử lệnh. Lệnh mới của bạn chỉ có trong cửa sổ VS Code Extension Development Host (Máy chủ phát triển tiện ích) và không có trong cửa sổ VS Code nơi bạn chỉnh sửa mã cho tiện ích.

Cách kiểm thử lệnh đã sửa đổi:

  1. Trong cửa sổ dự án tiện ích VS Code, hãy khởi động lại trình gỡ lỗi bằng cách chọn Run > Restart Debugging (Chạy > Khởi động lại quá trình gỡ lỗi). Thao tác này sẽ khởi động lại một cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) riêng.
  2. Trong cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) của VS Code, hãy mở một dự án phát triển Flutter.
  3. Trong cùng một cửa sổ, hãy mở cửa sổ trình soạn thảo mã, nhập một nhận xét mô tả thành phần giao diện người dùng mà bạn muốn rồi chọn văn bản nhận xét đó.
  4. Mở bảng lệnh bằng cách chọn View > Command Palette (Xem > Bảng lệnh).
  5. Trong Bảng điều khiển lệnh, hãy nhập Flutter Theme rồi chọn lệnh Flutter Theme Agent: My New Code Generator (Trình điều khiển giao diện Flutter: Trình tạo mã mới của tôi).

Tài nguyên khác

Để biết thêm thông tin về dự án Flutter Theme Agent, hãy xem kho lưu trữ mã. Nếu bạn cần được trợ giúp để xây dựng ứng dụng hoặc đang tìm kiếm cộng tác viên là nhà phát triển, hãy tham khảo máy chủ Discord của Cộng đồng nhà phát triển Google.

Ứng dụng phát hành công khai

Nếu bạn dự định triển khai Flutter Theme Agent cho một lượng lớn đối tượng, hãy lưu ý rằng việc sử dụng API Google Gemini của bạn có thể phải tuân theo giới hạn tốc độ và các hạn chế sử dụng khác. Nếu bạn đang cân nhắc xây dựng một ứng dụng chính thức bằng mô hình Gemini, hãy xem các dịch vụ Google Cloud Vertex AI để tăng khả năng mở rộng và độ tin cậy của ứng dụng.