Tính năng Tìm hiểu thông tin cơ bản bằng Google Tìm kiếm hiện đã ra mắt! Tìm hiểu thêm

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

Tạo một công cụ trợ lý lập trình để tạo giao diện người dùng Flutter, hoặc thành phần mã mà bạn muốn nhanh chóng lặp lại. Bạn có thể tạo giao diện người dùng thú vị và được đền đáp, nhưng đó cũng là công việc khó khăn. Đó không chỉ là câu hỏi về việc mã đúng, nó cũng có giao diện phù hợp và giúp nhóm của bạn để thống nhất về một hướng thiết kế.

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

Hình 1. Flutter Theme Agent (Trình hỗ trợ giao diện Flutter) chạy trong VS Code Extension Development Host cửa sổ.

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à thử nghiệm. Các bước chung là Cài đặt một số phần mềm tiên quyết, thiết lập một số 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 phần mở rộng của Microsoft Visual Studio Code (VS Code) và các cách sử dụng Node.js và npm để quản lý các gói và chạy . Hướng dẫn cài đặt sau đây dành cho máy chủ Linux máy.

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

Cài đặt Visual Studio Code 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 hướng dẫn cho nền tảng của bạn.
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 rồi dùng lệnh cài đặt npm để tải xuống các phần phụ thuộc bắt buộc và định cấu hình dự án. Bạn cần git phần mềm kiểm soát nguồn để truy xuất dự án mã nguồ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ể đị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, nên 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
```
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/
```
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 tra bản cài đặt của mình bằng cách chạy Flutter Theme Agent dưới dạng tiện ích phát triển trong VS Code trên thiết bị của bạn. Thử nghiệm mở ra một Cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) Mã VS nơi có tiện ích mới sẵn có. 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 Google Gemini API.

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

Khởi động ứng dụng VS Code.
Trong VS Code, hãy tạo một cửa sổ mới bằng cách chọn File > (Tệp >) Cửa sổ mới.
Mở dự án Flutter Theme Agent (Tác nhân giao diện Flutter) bằng cách chọn File > (Tệp >) Mở thư mục, rồi chọn thư mục flutter_theme_agent/.
Trong mã VS, hãy mở tệp flutter_theme_agent/package.json.
Chạy tiện ích ở chế độ gỡ lỗi bằng cách chọn Run > (Chạy >) Bắt đầu gỡ lỗi. Bước này sẽ mở ra một cửa sổ Máy chủ phát triển tiện ích riêng biệt VS Code.
Mở phần cài đặt Mã VS bằng cách chọn Mã > Cài đặt > Cài đặt.
Nhận Khoá API Gemini của Google trên trang web dành cho nhà phát triển AI tạo sinh rồi sao chép chuỗi khoá.
Đặt khoá API làm chế độ cài đặt cấu hình. Trong phần Cài đặt Tìm kiếm hãy nhập flutter theme, chọn tab Người dùng và trong Google > Gemini: Chế độ cài đặt Api Key, nhấp vào đường liên kết Chỉnh sửa trong settings.json và thêm khoá Gemini API:
```
"google.ai.apiKey": "your-api-key-here"
```
Lưu các thay đổi đối với tệp settings.json rồi đóng các thẻ cài đặt.

Cách kiểm tra các lệnh của tiện ích:

Viết mã trong cửa sổ Extension Development Host (Máy chủ phát triển tiện ích) của Mã VS nhận xét 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 của thành phần.
Mở bảng lệnh bằng cách chọn View > (Xem >) Bảng điều khiển lệnh.
Trong Bảng điều khiển lệnh, nhập Flutter Theme và chọn một trong các lệnh có tiền tố đó.

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

Sửa đổi các lệnh được cung cấp trong Flutter Theme Agent (Trình hỗ trợ giao diện Flutter) là cách đơn giản nhất để thay đổi hành vi và khả năng của tiện ích.

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

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 VS Code.
Trong VS Code, hãy tạo một cửa sổ mới bằng cách chọn File > (Tệp >) Cửa sổ mới.
Mở dự án Flutter Theme Agent (Tác nhân giao diện Flutter) bằng cách chọn File > (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.

Cách 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 ra 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.
...

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

Lưu các thay đổi đối với tệp buttonstyle.ts.

Cách kiểm tra 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 > (Chạy >) Khởi động lại gỡ lỗi.
Trong cửa sổ Máy chủ phát triển tiện ích mã VS, chọn một mã nhận xét trong cửa sổ trình chỉnh sửa mô tả kiểu nút bạn muốn, cho ví dụ:
```
// blue, lickable buttons that light up when you hover over them`
```
Mở bảng lệnh bằng cách chọn View > (Xem >) Bảng điều khiển lệnh.
Trong Bảng điều khiển lệnh, hãy nhập Flutter rồi chọn Giao diện Flutter Agent: Tạo một lệnh Flutter ButtonStyle.

Tạo lệnh mới

Bạn có thể mở rộng Flutter Theme Agent (Trình hỗ trợ giao diện Flutter) bằng cách tạo các lệnh mới có chức năng thực hiện những công việc hoàn toàn mới nhờ Gemini API. Mỗi tệp lệnh, chẳng hạn như buttonstyle.ts và colorscheme.ts, hầu như độc lập, 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ào API Gemini, gửi một câu lệnh và chuyển câu trả lời.

Ảnh chụp màn hình của Flutter Theme Agent (Trình hỗ trợ giao diện Flutter), trong đó có lệnh mới xuất hiện

Hình 2. Lệnh mới của Flutter Theme Agent trong VS Code Extension Cửa sổ Development Host.

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

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

Tạo 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 mã VS, hãy 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 câu lệnh trong tệp colorscheme2.ts. Chỉnh sửa COLORSCHEME_CONTEXT hướng dẫn tạo mã bằng cách xóa Văn bản ColorScheme( từ mã ví dụ trên dòng 51 và chuyể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ự trong dấu ngoặc đơn đóng ")" từ cuối danh sách màu và biế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à hãy đặt nó thành một dòng trống.
Trên dòng 115, hãy xoá ký tự đóng ngoặc đơn ")" từ kết thúc danh sách màu và đặt thành một dòng trống.

Trong chuỗi COLORSCHEME_CONTEXT, hãy thêm hướng dẫn để không đưa vào cú pháp bao gồm:

...
- 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 các thay đổi đối với 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 lệnh đó 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 thành thực hiện phần lệnh mới của tiện ích và 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 mã VS, hãy 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 lệnh nhập mới tuyên bố.
```
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 các thay đổi đối với tệp extension.ts.

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

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

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

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

Lưu các thay đổi đối với tệp package.json.

Kiểm thử lệnh mới

Sau khi bạn 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 tra nó. Lệnh mới của bạn chỉ có trong Mã VS cửa sổ Extension Development Host (Máy chủ phát triển tiện ích), không phải trong cửa sổ VS Code mà bạn chỉnh sửa mã cho tiện ích.

Cách kiểm tra 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 > (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ổ Extension Development Host (Máy chủ phát triển tiện ích).
Trong cửa sổ Extension Development Host của VS, hãy mở một Flutter dự án phát triển ứng dụng.
Trong cùng 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 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 View > (Xem >) Bảng điều khiển lệnh.
Trong bảng Command Palette, nhập Flutter Theme và 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 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 trợ giúp về việc xây dựng ứng dụng hoặc đang tìm kiếm nhà phát triển cộng tác viên, hãy xem 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 nhiều đối tượng, hãy lưu ý rằng việc sử dụng Google Gemini API có thể bị giới hạn số lượng yêu cầu và phải tuân thủ các quy định khác hạn chế sử dụng. Nếu đang cân nhắc xây dựng một ứng dụng phát hành công khai bằng mô hình Gemini, trả phòng Vertex AI của Google Cloud các dịch vụ khác để tăng khả năng có thể mở rộng và độ tin cậy cho ứng dụng của bạn.