Hãy khám phá Cookbook API mới và diễn đàn cộng đồng của chúng tôi.

Trang này được dịch bởi Cloud Translation API.

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 nhanh chóng lặp lại. Việc tạo giao diện người dùng có thể thú vị và bổ ích, nhưng cũng khó khăn. Vấn đề không chỉ là viết mã đúng, mà còn là giao diện và làm cho nhóm của bạn thống nhất được về một hướng thiết kế.

Hướng dẫn này trình bày cách mở rộng Flutter Theme Agent, một công cụ hỗ trợ lập trình dựa trên AI do nhóm Quan hệ với nhà phát triển Flutter của Google xây dựng. Dự án nguồn mở này là một tiện ích cho Mã Visual Studio (Mã VS) của Microsoft, giúp tạo ra các thành phần cụ thể của một 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 mình, 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 mình.

Để 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 của đội ngũ xây dựng dự án, hãy xem bài viết Trình tạo mã Flutter dựa trên AI – Xây dựng 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 Flutter Theme Agent chạy trong VS Code

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

Thiết lập dự án

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

Cài đặt đ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 (Mã VS), đồng thời sử dụng Node.js và npm để quản lý các gói cũng như 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 yêu cầu:

Cài đặt Visual Studio Code (Mã Visual Studio) cho nền tảng của bạn.
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.
Nếu bạn chưa cài đặt Flutter cho Mã VS, 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à 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 phần mềm kiểm soát nguồn git để truy xuất mã nguồn dự án.
Cách tải xuống và định cấu hình mã dự án:

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

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

Bạn có thể tuỳ ý định cấu hình kho lưu trữ git cục bộ để sử dụng quy trình thanh toán thưa thớt, nhờ đó bạn chỉ có các tệp cho dự án Tác nhân tài liệu.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```
Chuyển đến thư mục gốc của dự án Flutter Theme Agent (Tác nhân giao diện Flutter).
```
cd generative-ai-docs/examples/gemini/node/flutter_theme_agent/
```
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 tra tiện ích

Giờ đây, bạn có thể kiểm thử chế độ 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 Mã VS trên thiết bị của mình. Chương trình kiểm thử sẽ mở ra một cửa sổ Máy chủ phát triển tiện ích mã VS riêng biệt có sẵn 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:

Khởi động ứng dụng Mã VS.
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).
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/.
Trong VS Code, mở tệp flutter_theme_agent/package.json.
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 mở ra một cửa sổ Máy chủ phát triển tiện ích mã VS riêng.
Mở chế độ cài đặt VS Code bằng cách chọn Code > Settings > Settings (Mã > Cài đặt > Cài đặt).
Lấy Khoá API Google Gemini trên trang web dành cho Nhà phát triển AI tạo sinh và sao chép chuỗi khoá.
Đặt khoá API làm một 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, hãy nhấp vào đường liên kết Edit in settings.json và thêm khoá API Gemini:
```
"google.ai.apiKey": "your-api-key-here"
```
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 của tiện ích:

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

Sửa đổi lệnh hiện có

Việ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à bài đánh giá đều sử dụng một vài phương thức nhắc nhanh, trong đó có 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 trong việc tạo câu trả lời. Bằng cách thay đổi hướng dẫn lời nhắc, 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ó.

Tập hợp 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.

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

Khởi động ứng dụng Mã VS.
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).
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/.
Mở tệp flutter_theme_agent/src/buttonstyle.ts.

Để sửa đổi hành vi của lệnh buttonstyle.ts:\

Trong tệp buttonstyle.ts, hãy chỉnh sửa hằng số BUTTONSTYLE_CONTEXT để đưa vào các lệnh 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.
...

Trong tệp buttonstyle.ts, hằng số BUTTONSTYLE_CONTEXT có thể thêm một ví dụ khác về hướng dẫn và kết quả kiểu nút (không bắt buộc) 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?>(
...

Lưu nội dung thay đổi vào tệp buttonstyle.ts.

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

Trong cửa sổ dự án tiện ích Mã VS, 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 gỡ lỗi).
Trong cửa sổ Tiện ích máy chủ phát triển tiện ích VS Code, hãy chọn một nhận xét về 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`
```
Mở bảng lệnh bằng cách chọn Xem > Bảng lệnh.
Trong Bảng điều khiển lệnh, hãy nhập Flutter rồi chọn lệnh Flutter ThemeAgent: Create a Flutter ButtonStyle.

Tạo lệnh mới

Bạn có thể mở rộng Tác nhân giao diện Flutter bằng cách tạo các lệnh mới thực hiện các thao tác hoàn toàn mới thông qua API Gemini. Mỗi tệp lệnh, chẳng hạn như buttonstyle.ts và colorscheme.ts, hầu hết đều độ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 câu lệnh, kết nối với API Gemini, gửi lời nhắc và chuyển phản hồi.

Ảnh chụp màn hình Flutter Theme Agent với lệnh mới hiển thị

Hình 2. Lệnh mới dành cho tác nhân giao diện Flutter trong cửa sổ Máy chủ phát triển tiện ích mã VS.

Bộ 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 lệnh hiện có là 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 đóng gói của đối tượng ColorScheme, nhờ đó, bạn không phải xoá cú pháp này sau khi tạo và nhanh chóng trực quan hoá kết quả.

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

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/.
Trong VS Code, mở tệp src/colorscheme2.ts.

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...');

Thay đổi hướng dẫn về 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à chuyển văn bản đó thành một dòng trống.
```
...
Here's the example of good Dart code:

  brightness: Brightness.light,
  primary: Color(0xffFF80AB),
...
```
Xoá ký tự đóng dấu ngoặc đơn ")" 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 ...
```
Lặp lại các thay đổi này cho ví dụ thứ hai. Trong chuỗi COLORSCHEME_CONTEXT trên dòng 87, hãy xoá văn bản ColorScheme( và chuyển văn bản đó thành một dòng trống.
Trên dòng 115, hãy xoá ký tự đóng ngoặc đơn ")" khỏi cuối danh sách màu và đặt thành một dòng trống.

Trong chuỗi COLORSCHEME_CONTEXT, hãy thêm một lệnh để không đưa cú pháp gói vào:

...
- 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:
...

Lưu nội dung 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 để tạo phần lệnh mới của tiện ích, đồng thời cho phép Mã VS gọi lệnh mới.

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

Trong VS Code, mở tệp flutter_theme_agent/src/extension.ts.
Nhập mã lệnh mới vào tiện ích bằng cách thêm câu lệnh nhập mới.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Đă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);
    ...
}

Lưu nội dung thay đổi vào tệp extension.ts.

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

Trong VS Code, mở tệp flutter_theme_agent/package.json.

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."
    }
  ],

Lưu nội dung 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ỉ xuất hiện trong cửa sổ Tiện ích lưu trữ mã VS, chứ không xuất hiện trong cửa sổ Mã VS nơi bạn đã chỉnh sửa mã cho tiện ích.

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

Trong cửa sổ dự án tiện ích mã VS, 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 gỡ lỗi), thao tác này sẽ khởi động lại một cửa sổ Tiện ích máy chủ phát triển tiện ích riêng biệt.
Trong cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) mã VS, hãy mở một dự án phát triển Flutter.
Cũng trong cửa sổ đó, hãy mở cửa sổ trình soạn thảo mã, nhập 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 đó.
Mở bảng lệnh bằng cách chọn Xem > Bảng lệnh.
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 (Tác nhân giao diện Flutter: Trình tạo mã mới của tôi).

Tài nguyên bổ sung

Để 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 trợ giúp để xây dựng ứng dụng hoặc đang tìm cộng tác viên nhà phát triển, hãy truy cập vào máy chủ Google Developers Community Discord.

Ứng dụng sản xuất

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