Perujukan dengan Google Penelusuran kini tersedia. Pelajari lebih lanjut

Halaman ini diterjemahkan oleh Cloud Translation API.

Membangun generator kode Flutter AI dengan Gemini

Bangun alat asisten coding untuk membuat antarmuka pengguna Flutter, atau komponen kode yang ingin Anda iterasikan dengan cepat. Membuat antarmuka pengguna dapat menyenangkan dan bermanfaat, tetapi itu juga merupakan kerja keras. Ini bukan hanya masalah untuk kode yang benar, mendapatkan tampilan dan nuansa yang tepat, serta membuat tim Anda untuk menyepakati arah desain.

Tutorial ini menunjukkan cara memperluas Agen Tema Flutter, alat bantuan kode dengan teknologi AI yang dibangun oleh tim Flutter Developer Relations di Google. Project open source ini adalah ekstensi untuk Microsoft Visual Studio Kode (VS Code) yang menghasilkan komponen tema Flutter, atau objek ThemeData, termasuk skema warna, gaya teks, dan gaya tombol. Anda dapat memodifikasi proyek untuk membuat fungsi yang ada bekerja lebih baik untuk Anda, atau membuat perintah baru untuk mendukung dalam alur kerja pengembangan Anda.

Untuk video ringkasan proyek dan cara memperluasnya, termasuk wawasan dari pembuatnya, lihat AI Flutter Code Generator - Membangun dengan AI Google. Jika tidak, Anda dapat mulai memperpanjang project dengan mengikuti petunjuk di bawah ini.

Screenshot Agen Tema Flutter yang berjalan di VS Code

Gambar 1. Agen Tema Flutter berjalan di VS Code Extension Development Host jendela.

Penyiapan project

Petunjuk ini akan memandu Anda menyiapkan project Flutter Theme Agent dikembangkan dan diuji. Langkah-langkah umumnya adalah Menginstal beberapa prasyarat, mengatur beberapa variabel lingkungan, mengkloning proyek dari repositori kode, dan menjalankan penginstalan konfigurasi.

Instal prasyarat

Project Agen Tema Flutter berjalan sebagai ekstensi dari Microsoft Visual Studio Code (VS Code), dan menggunakan Node.js dan npm untuk mengelola paket serta menjalankan aplikasi. Petunjuk penginstalan berikut ditujukan untuk host Linux mesin Linux dan Windows.

Untuk menginstal software yang diperlukan:

Menginstal Visual Studio Code untuk platform Anda.
Instal node dan npm dengan mengikuti penginstalan petunjuk khusus untuk platform Anda.
Jika Anda belum menginstal Flutter untuk VS Code, ikuti petunjuk penginstalan.

Meng-clone dan mengonfigurasi project

Download kode project dan gunakan perintah penginstalan npm untuk mendownload dependensi yang diperlukan dan mengonfigurasi project. Anda perlu git software kontrol sumber untuk mengambil project pada kode sumber Anda.
Untuk mendownload dan mengonfigurasi kode project:

Clone repositori git menggunakan perintah berikut.

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

Secara opsional, konfigurasikan repositori git lokal Anda untuk menggunakan checkout sparse, jadi Anda hanya memiliki file untuk project Agen Dokumen.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```

Buka direktori utama project Flutter Theme Agent.

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

Jalankan perintah instal untuk mendownload dependensi dan mengonfigurasi project:
```
npm install
```

Mengonfigurasi dan menguji ekstensi

Sekarang Anda dapat menguji penginstalan dengan menjalankan Agen Tema Flutter sebagai ekstensi pengembangan di VS Code pada perangkat. Pengujian akan membuka bagian Jendela Extension Development Host VS Code tempat ekstensi baru yang tersedia. Di jendela baru ini, Anda akan mengonfigurasi Kunci API yang digunakan ekstensi untuk mengakses Gemini API Google.

Untuk mengonfigurasi dan menguji penyiapan Anda:

Mulai aplikasi VS Code.
Di VS Code, buat jendela baru dengan memilih File > Jendela Baru.
Buka project Agen Tema Flutter dengan memilih File > Buka Folder, dan memilih folder flutter_theme_agent/.
Di VS Code, buka file flutter_theme_agent/package.json.
Jalankan ekstensi dalam mode debug dengan memilih Run > Mulai Proses Debug. Langkah ini akan membuka jendela Extension Development Host VS Code yang terpisah.
Buka setelan VS Code dengan memilih Code > Pengaturan > Setelan.
Dapatkan Kunci Gemini API Google dari situs Generative AI Developer, dan menyalin string kunci.
Setel kunci API sebagai setelan konfigurasi. Di Setelan Penelusuran kolom, ketik flutter theme, pilih tab Pengguna, dan di tab Google > setelan Gemini: Kunci API, klik link Edit di settings.json, lalu menambahkan kunci Gemini API:
```
"google.ai.apiKey": "your-api-key-here"
```
Simpan perubahan pada file settings.json dan tutup tab setelan.

Untuk menguji perintah ekstensi:

Di jendela Extension Development Host VS Code, tulis kode komentar yang menjelaskan komponen antarmuka pengguna yang ingin Anda buat.
Pilih teks komentar dengan karakteristik komponen.
Buka palet perintah dengan memilih View > Palet Perintah.
Pada Palet Perintah, ketik Flutter Theme, lalu pilih salah satu dengan awalan tersebut.

Mengubah perintah yang ada

Memodifikasi perintah yang disediakan di Agen Tema Flutter adalah cara paling sederhana untuk mengubah perilaku dan kemampuan ekstensi.

Baik perintah {i>comment<i} maupun {i>review<i} menggunakan beberapa pendekatan {i>shot prompting<i} contoh kode dan komentar untuk kode tersebut, serta beberapa petunjuk untuk model bahasa AI. Panduan informasi konteks prompt ini model bahasa Gemini dalam menghasilkan respons. Dengan mengubah perintah instruksi, contoh, atau keduanya dalam perintah {i>comment<i} atau {i>review<i}, Anda dapat mengubah bagaimana perilaku dari masing-masing perintah yang ada.

Kumpulan petunjuk ini menjelaskan cara mengubah perintah buttonstyle.ts dengan mengubah teks prompt dari perintah.

Untuk mempersiapkan pengeditan perintah buttonstyle.ts:\

Mulai aplikasi VS Code.
Di VS Code, buat jendela baru dengan memilih File > Jendela Baru.
Buka project Agen Tema Flutter dengan memilih File > Buka Folder, dan memilih folder flutter_theme_agent/.
Buka file flutter_theme_agent/src/buttonstyle.ts.

Untuk mengubah perilaku perintah buttonstyle.ts:\

Dalam file buttonstyle.ts, edit konstanta BUTTONSTYLE_CONTEXT menyertakan instruksi yang berbeda.

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

Secara opsional, dalam file buttonstyle.ts, BUTTONSTYLE_CONTEXT menambahkan contoh lain dari instruksi gaya tombol dan {i>output<i}, atau mengganti salah satu contoh yang ada.

...
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?>(
...

Simpan perubahan pada file buttonstyle.ts.

Untuk menguji perintah yang diubah:

Di jendela project ekstensi VS Code, mulai ulang debugger dengan memilih Run > Mulai Ulang Proses Debug.
Di jendela Extension Development Host VS Code, pilih kode komentar di jendela editor yang menjelaskan gaya tombol yang Anda inginkan, misalnya contoh:
```
// blue, lickable buttons that light up when you hover over them`
```
Buka palet perintah dengan memilih View > Palet Perintah.
Di Palet Perintah, ketik Flutter, lalu pilih Tema Flutter Agen: Membuat perintah Flutter ButtonStyle.

Buat perintah baru

Anda dapat memperluas Flutter Theme Agent dengan membuat perintah baru yang berfungsi tugas yang benar-benar baru dengan Gemini API. Setiap file perintah, seperti buttonstyle.ts dan colorscheme.ts, sebagian besar bersifat mandiri, dan mencakup kode untuk mengumpulkan teks dari editor aktif, menulis prompt, menghubungkan ke Gemini API, mengirimkan perintah, dan memberikan respons.

Screenshot Agen Tema Flutter dengan perintah baru yang terlihat

Gambar 2. Perintah Agent Tema Flutter baru di Ekstensi Kode VS Jendela Host Pengembangan.

Serangkaian petunjuk ini menjelaskan cara membuat perintah baru menggunakan kode perintah yang sudah ada, colorscheme.ts, sebagai template. Pembaruan ini mengubah perintah agar tidak menyertakan sintaksis yang mencakup objek ColorScheme, sehingga Anda tidak perlu menghapus sintaksis ini setelah pembuatan, dan memvisualisasikan outputnya dengan lebih cepat.

Untuk membuat perintah yang menghasilkan daftar warna saja untuk ColorScheme :

Buat salinan file flutter_theme_agent/src/colorscheme.ts bernama colorscheme2.ts dalam direktori src/.
Di VS Code, buka file src/colorscheme2.ts.

Di file colorscheme2.ts, ganti nama fungsi generateColorScheme menjadi generateColorScheme2:

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

Ubah petunjuk perintah di file colorscheme2.ts. Edit Petunjuk pembuatan kode COLORSCHEME_CONTEXT dengan menghapus ColorScheme( teks dari kode contoh di baris 51, dan jadikan baris kosong.
```
...
Here's the example of good Dart code:

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

Hapus karakter tanda kurung tutup ")" dari akhir daftar warna dan membuatnya menjadi baris kosong.

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

This example code is a good ...

Ulangi perubahan ini untuk contoh kedua. Di kolom String COLORSCHEME_CONTEXT di baris 87, hapus teks ColorScheme( dan membuatnya menjadi baris kosong.
Pada baris 115, hapus karakter tanda kurung tutup ")" dari akhir daftar warna dan membuatnya menjadi baris kosong.

Di string COLORSCHEME_CONTEXT, tambahkan petunjuk untuk tidak menyertakan sintaks yang disertakan:

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

Simpan perubahan pada file colorscheme2.ts.

Mengintegrasikan perintah baru

Setelah Anda menyelesaikan kode untuk perintah baru, Anda perlu mengintegrasikannya dengan sisa ekstensi. Update file extension.ts dan package.json ke membuat perintah baru sebagai bagian dari ekstensi, dan mengaktifkan VS Code dapat memanggil perintah baru.

Untuk mengintegrasikan perintah baru dengan kode ekstensi:

Di VS Code, buka file flutter_theme_agent/src/extension.ts.
Impor kode perintah baru ke ekstensi dengan menambahkan impor baru pernyataan pribadi Anda.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

Daftarkan perintah baru dengan menambahkan kode berikut ke Fungsi activate().

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

Simpan perubahan pada file extension.ts.

Untuk mengintegrasikan perintah nama dengan paket ekstensi:

Di VS Code, buka file flutter_theme_agent/package.json.

Tambahkan perintah baru ke bagian commands pada file paket.

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

Simpan perubahan pada file package.json.

Menguji perintah baru

Setelah Anda menyelesaikan pengkodean perintah dan mengintegrasikannya dengan ekstensi, Anda dapat mengujinya. Perintah baru Anda hanya tersedia di VS Code Extension Development Host, dan tidak di jendela VS Code tempat Anda mengedit kode untuk ekstensi tersebut.

Untuk menguji perintah yang diubah:

Di jendela project ekstensi VS Code, mulai ulang debugger dengan memilih Run > Mulai ulang Proses Debug, yang memulai ulang proses debug terpisah Jendela Extension Development Host.
Di jendela Extension Development Host VS Code, buka Flutter proyek pengembangan Anda.
Pada jendela yang sama, buka jendela editor kode, ketik komentar yang menjelaskan komponen antarmuka pengguna yang Anda inginkan, dan pilih teks komentar itu.
Buka palet perintah dengan memilih View > Palet Perintah.
Pada Palet Perintah, ketik Flutter Theme, lalu pilih Perintah Agen Tema Flutter: Generator Kode Baru Saya.

Referensi lainnya

Untuk informasi selengkapnya tentang project Agen Tema Flutter, lihat repositori kode. Jika Anda membutuhkan bantuan untuk membuat aplikasi atau mencari developer kolaborator, lihat Perselisihan Komunitas Google Developers.

Aplikasi produksi

Jika Anda berencana men-deploy Agen Tema Flutter untuk audiens yang besar, perhatikan bahwa penggunaan Google Gemini API mungkin akan dikenai pembatasan kapasitas dan pembatasan penggunaan. Jika Anda mempertimbangkan untuk membangun aplikasi produksi dengan model Gemini, periksa Vertex AI Google Cloud untuk meningkatkan skalabilitas dan keandalan aplikasi Anda.