Lihat Cookbook Gemini API baru dan forum komunitas kami.

Halaman ini diterjemahkan oleh Cloud Translation API.

Membangun generator kode Flutter AI dengan Gemini

Bangun alat asisten coding untuk menghasilkan antarmuka pengguna Flutter, atau komponen kode apa pun yang ingin Anda iterasi dengan cepat. Membuat antarmuka pengguna bisa menyenangkan dan bermanfaat, tetapi juga kerja keras. Ini bukan hanya pertanyaan untuk memahami kode dengan benar, tetapi juga mendapatkan tampilan dan nuansa yang tepat, serta membuat tim menyetujui arah desain.

Tutorial ini menunjukkan cara memperluas Flutter Theme Agent, alat bantuan kode yang didukung AI dan dibuat oleh tim Flutter Developer Relations di Google. Project open source ini adalah ekstensi untuk Microsoft Visual Studio Code (VS Code) yang membuat komponen tertentu dari tema Flutter, atau objek ThemeData, termasuk skema warna, gaya teks, dan gaya tombol. Anda dapat memodifikasi project agar fungsi yang sudah ada ini berfungsi lebih baik, atau membuat perintah baru untuk mendukung alur kerja pengembangan Anda dengan lebih baik.

Untuk video ringkasan project dan cara memperluasnya, termasuk insight dari orang-orang yang membuatnya, lihat Generator Kode AI Flutter - Build with Google AI. Jika tidak, Anda dapat mulai memperluas project dengan mengikuti petunjuk di bawah ini.

Screenshot Agen Tema Flutter yang berjalan di VS Code

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

Penyiapan project

Petunjuk ini akan memandu Anda menyiapkan project Agen Tema Flutter untuk pengembangan dan pengujian. Langkah-langkah umumnya adalah menginstal software yang diperlukan, menetapkan beberapa variabel lingkungan, meng-clone project dari repositori kode, dan menjalankan penginstalan konfigurasi.

Menginstal prasyarat

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

Untuk menginstal software yang diperlukan:

Instal Visual Studio Code untuk platform Anda.
Instal node dan npm dengan mengikuti petunjuk penginstalan 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 memerlukan software kontrol sumber git untuk mengambil kode sumber project.
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 untuk menggunakan checkout sparse, sehingga 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 Agen Tema Flutter.

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 Flutter Theme Agent sebagai ekstensi pengembangan di VS Code di perangkat Anda. Pengujian ini akan membuka jendela Extension Development Host VS Code yang terpisah tempat ekstensi baru tersedia. Di jendela baru ini, Anda akan mengonfigurasi Kunci API yang digunakan ekstensi untuk mengakses Google Gemini API.

Untuk mengonfigurasi dan menguji penyiapan Anda:

Mulai aplikasi VS Code.
Di VS Code, buat jendela baru dengan memilih File > New Window.
Buka project Flutter Theme Agent dengan memilih File > Open 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 > Start Debugging. Langkah ini akan membuka jendela VS Code Extension Development Host yang terpisah.
Buka setelan VS Code dengan memilih Code > Settings > Settings.
Dapatkan Kunci Google Gemini API dari situs Developer AI Generatif, dan salin string kunci.
Tetapkan kunci API sebagai setelan konfigurasi. Di kolom Search Settings, ketik flutter theme, pilih tab User, dan di setelan Google > Gemini: Api Key, klik link Edit in settings.json, lalu tambahkan kunci Gemini API Anda:
```
"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 komentar kode yang menjelaskan komponen antarmuka pengguna yang ingin Anda buat.
Pilih teks komentar dengan karakteristik komponen.
Buka palet perintah dengan memilih View > Command Palette.
Di Palet Perintah, ketik Flutter Theme dan pilih salah satu perintah dengan awalan tersebut.

Ubah perintah yang ada

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

Perintah komentar dan ulasan menggunakan pendekatan few shot prompting dengan contoh kode dan komentar untuk kode tersebut, serta beberapa petunjuk umum untuk model bahasa AI. Informasi konteks perintah ini akan memandu model bahasa Gemini dalam menghasilkan respons. Dengan mengubah petunjuk perintah, contoh, atau keduanya dalam perintah komentar atau ulasan, Anda dapat mengubah perilaku setiap perintah yang ada.

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

Untuk bersiap mengedit perintah buttonstyle.ts:\

Mulai aplikasi VS Code.
Di VS Code, buat jendela baru dengan memilih File > New Window.
Buka project Flutter Theme Agent dengan memilih File > Open 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 untuk menyertakan petunjuk 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, pada file buttonstyle.ts, konstanta BUTTONSTYLE_CONTEXT, tambahkan contoh lain dari petunjuk dan output gaya tombol, atau ganti 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 > Restart Debugging.
Di jendela Extension Development Host VS Code, pilih komentar kode di jendela editor yang menjelaskan gaya tombol yang Anda inginkan, misalnya:
```
// blue, lickable buttons that light up when you hover over them`
```
Buka palet perintah dengan memilih View > Command Palette.
Di Palet Perintah, ketik Flutter, lalu pilih perintah Flutter Theme Agent: Create a Flutter ButtonStyle.

Buat perintah baru

Anda dapat memperluas Agen Tema Flutter dengan membuat perintah baru yang melakukan tugas yang benar-benar baru dengan Gemini API. Setiap file perintah, seperti buttonstyle.ts dan colorscheme.ts, sebagian besar bersifat mandiri, dan menyertakan kode untuk mengumpulkan teks dari editor aktif, menulis perintah, menghubungkan ke Gemini API, mengirim perintah, dan memberikan respons.

Screenshot Agen Tema Flutter dengan perintah baru yang terlihat

Gambar 2. Perintah Agen Tema Flutter baru di jendela VS Code Extension Development Host.

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

Untuk membuat perintah yang hanya menghasilkan daftar warna untuk objek ColorScheme:

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

Dalam 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 teks ColorScheme( 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 penutup ")" dari akhir daftar warna dan jadikan baris kosong.

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

This example code is a good ...

Ulangi perubahan ini untuk contoh kedua. Pada string COLORSCHEME_CONTEXT di baris 87, hapus teks ColorScheme( dan jadikan baris kosong.
Pada baris 115, hapus karakter tanda kurung penutup ")" dari akhir daftar warna dan jadikan baris kosong.

Dalam string COLORSCHEME_CONTEXT, tambahkan petunjuk agar tidak menyertakan sintaksis yang mencakup:

...
- 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 menyelesaikan kode untuk perintah baru, Anda harus mengintegrasikannya dengan ekstensi ekstensi lainnya. Update file extension.ts dan package.json untuk menjadikan perintah baru sebagai bagian dari ekstensi, dan memungkinkan VS Code agar 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 pernyataan impor baru.
```
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 name dengan paket ekstensi:

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

Tambahkan perintah baru ke bagian commands dari 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 menyelesaikan coding perintah dan mengintegrasikannya dengan ekstensi, Anda dapat mengujinya. Perintah baru Anda hanya tersedia di jendela Extension Development Host VS Code, dan tidak di jendela VS Code tempat Anda mengedit kode untuk ekstensi.

Untuk menguji perintah yang diubah:

Di jendela project ekstensi VS Code, mulai ulang debugger dengan memilih Run > Restart Debugging, yang akan memulai ulang jendela Extension Development Host terpisah.
Di jendela Extension Development Host VS Code, buka project pengembangan Flutter.
Di jendela yang sama, buka jendela editor kode, ketik komentar yang menjelaskan komponen antarmuka pengguna yang Anda inginkan, lalu pilih teks komentar tersebut.
Buka palet perintah dengan memilih View > Command Palette.
Di Palet Perintah, ketik Flutter Theme, lalu pilih perintah Flutter Theme Agent: My New Code Generator.

Referensi tambahan

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

Aplikasi produksi

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