Gemini 2.0 Flash kini siap diproduksi. Pelajari lebih lanjut

Halaman ini diterjemahkan oleh Cloud Translation API.

Membangun generator kode Flutter AI dengan Gemini

Buat alat asisten coding untuk membuat antarmuka pengguna Flutter, atau komponen kode yang ingin Anda iterasi dengan cepat. Membuat antarmuka pengguna bisa menyenangkan dan memuaskan, tetapi juga merupakan pekerjaan yang berat. Ini bukan hanya soal membuat kode yang benar, tetapi juga membuat tampilan dan nuansa yang tepat, serta membuat tim Anda setuju dengan arah desain.

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

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

Screenshot Agen Tema Flutter yang berjalan di VS Code

Gambar 1. Agen Tema Flutter yang berjalan di jendela Host Pengembangan Ekstensi VS Code.

Penyiapan project

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

Menginstal prasyarat

Project Agen Tema Flutter berjalan sebagai ekstensi Microsoft Visual Studio Code (VS Code), dan menggunakan Node.js dan 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 Anda untuk menggunakan checkout jarang, 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 root project Flutter Theme Agent.

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

Jalankan perintah penginstalan 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 di perangkat Anda. Pengujian akan membuka jendela Extension Development Host VS Code 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:

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 Extension Development Host VS Code terpisah.
Buka setelan VS Code dengan memilih Code > Settings > Settings.
Dapatkan Kunci Google Gemini API dari situs Developer AI Generatif, lalu 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 API Gemini Anda:
```
"google.ai.apiKey": "your-api-key-here"
```
Simpan perubahan ke 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, lalu pilih salah satu perintah dengan awalan tersebut.

Mengubah perintah yang ada

Mengubah perintah yang disediakan di Flutter Theme Agent adalah cara paling sederhana untuk mengubah perilaku dan kemampuan ekstensi.

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

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

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, dalam 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 ke 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 Command Palette, ketik Flutter dan pilih perintah Flutter Theme Agent: Create a Flutter ButtonStyle.

Membuat perintah baru

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

Screenshot Agen Tema Flutter dengan perintah baru yang terlihat

Gambar 2. Perintah Agen Tema Flutter baru di jendela Host Pengembangan Ekstensi VS Code.

Kumpulan petunjuk ini menjelaskan cara mem-build perintah baru menggunakan kode perintah yang ada, colorscheme.ts, sebagai template. Update ini mengubah perintah agar tidak menyertakan sintaksis yang mengapit objek ColorScheme, sehingga Anda tidak perlu menghapus sintaksis ini setelah pembuatan, dan memvisualisasikan output 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.

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 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 tutup ")" 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. Dalam string COLORSCHEME_CONTEXT di baris 87, hapus teks ColorScheme( dan jadikan baris kosong.
Pada baris 115, hapus karakter tanda kurung tutup ")" dari akhir daftar warna dan jadikan baris kosong.

Dalam string COLORSCHEME_CONTEXT, tambahkan petunjuk untuk tidak menyertakan sintaksis yang mengapit:

...
- 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 ke file colorscheme2.ts.

Mengintegrasikan perintah baru

Setelah menyelesaikan kode untuk perintah baru, Anda harus mengintegrasikannya dengan ekstensi lainnya. Update file extension.ts dan package.json untuk membuat perintah baru menjadi bagian dari ekstensi, dan memungkinkan 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 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 ke 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 file paket.

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

Simpan perubahan ke 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 bukan 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 dan pilih perintah Flutter Theme Agent: My New Code Generator.

Referensi lainnya

Untuk mengetahui informasi selengkapnya tentang project Flutter Theme Agent, lihat repositori kode. Jika Anda memerlukan bantuan untuk mem-build aplikasi atau mencari collaborator developer, lihat server Discord Komunitas Developer Google.

Aplikasi produksi

Jika Anda berencana men-deploy Agen Tema Flutter untuk audiens yang besar, perhatikan bahwa penggunaan Google Gemini API Anda mungkin tunduk pada pembatasan kapasitas dan pembatasan penggunaan lainnya. Jika Anda mempertimbangkan untuk mem-build aplikasi produksi dengan model Gemini, lihat layanan Google Cloud Vertex AI untuk meningkatkan skalabilitas dan keandalan aplikasi Anda.