Yeni Gemini API Cookbook'una ve topluluk forumumuza göz atın.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Gemini ile AI Flutter kod oluşturma aracı derleme

Flutter kullanıcı arayüzleri veya hızlı bir şekilde yinelemek istediğiniz herhangi bir kod bileşeni oluşturmak için bir kodlama asistanı aracı oluşturun. Kullanıcı arayüzleri oluşturmak eğlenceli ve tatmin edici olabilir, ancak aynı zamanda zor bir iştir. Önemli olan yalnızca kodun doğru kullanımı değildir. Aynı zamanda, görünüm ve izlenimin doğru olması ve ekibinizin

Bu eğiticide, Google'daki Flutter Developer Relations ekibi tarafından oluşturulan yapay zeka destekli kod yardım aracı Flutter Theme Agent'ın nasıl genişletileceği gösterilmektedir. Bu açık kaynak projesi, renk şemaları, metin stilleri ve düğme stilleri dahil olmak üzere Flutter temasının veya ThemeData nesnesinin belirli bileşenlerini oluşturan, Microsoft Visual Studio Code (VS Code) için bir uzantıdır. Bu mevcut işlevlerin sizin için daha iyi çalışmasını sağlamak amacıyla projeyi değiştirebilir veya geliştirme iş akışınızı daha iyi desteklemek için yeni komutlar oluşturabilirsiniz.

Projeye ve projenin kapsamını genişletmeye yönelik genel bakış videosu için AI Flutter Code Üreticisi - Google AI ile Derleme adlı videoya göz atın. Aksi takdirde, aşağıdaki talimatları uygulayarak projeyi genişletmeye başlayabilirsiniz.

VS Code'da çalışan Flutter Theme Agent ekran görüntüsü

Şekil 1. VS Code Extension Geliştirme Ana Makinesi penceresinde çalışan Flutter Theme Agent.

Proje ayarlama

Bu talimatlar, geliştirme ve test için Flutter Theme Agent projesini ayarlamanızda size yol gösterir. Genel adımlar şunlardır: Bazı ön koşul yazılımları yüklemek, birkaç ortam değişkeni ayarlamak, projeyi kod deposundan klonlamak ve yapılandırma yüklemesini çalıştırmak.

Ön koşulları yükleme

Flutter Theme Agent projesi, Microsoft Visual Studio Code'un (VS Code) uzantısı olarak çalışır ve paketleri yönetip uygulamayı çalıştırmak için Node.js ile npm kullanır. Aşağıdaki yükleme talimatları bir Linux ana makine makinesi içindir.

Gerekli yazılımı yüklemek için:

Platformunuz için Visual Studio Code'u yükleyin.
Platformunuzun yükleme talimatlarını uygulayarak node ve npm uygulamasını yükleyin.
Flutter for VS Code'u henüz yüklemediyseniz yükleme talimatlarını uygulayın.

Projeyi klonlama ve yapılandırma

Proje kodunu indirin ve npm yükleme komutunu kullanarak gerekli bağımlılıkları indirip projeyi yapılandırın. Proje kaynak kodunu almak için git kaynak kontrolü yazılımına ihtiyacınız vardır.
Proje kodunu indirmek ve yapılandırmak için:

Aşağıdaki komutu kullanarak git deposunu klonlayın.

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

İsteğe bağlı olarak, yerel git deponuzu az ödeme adımını kullanacak şekilde yapılandırın. Böylece, yalnızca Dokümanlar Aracısı projesinin dosyalarına sahip olursunuz.
```
cd generative-ai-docs/
git sparse-checkout init --cone
git sparse-checkout set examples/gemini/node/flutter_theme_agent
```

Flutter Theme Agent projesinin kök dizinine gidin.

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

Bağımlılıkları indirmek ve projeyi yapılandırmak için yükleme komutunu çalıştırın:
```
npm install
```

Uzantıyı yapılandırma ve test etme

Artık cihazınızdaki VS Code'da Flutter Theme Agent'ı geliştirme uzantısı olarak çalıştırarak yüklemenizi test edebilirsiniz. Test, yeni uzantının kullanılabildiği ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açar. Bu yeni pencerede, uzantının Google Gemini API'ye erişmek için kullandığı API Anahtarını yapılandıracaksınız.

Kurulumunuzu yapılandırmak ve test etmek için:

VS Code uygulamasını başlatın.
VS Code'da File > New Window (Dosya > Yeni Pencere) seçeneklerini belirleyerek yeni bir pencere oluşturun.
File > Open Klasörü ve ardından flutter_theme_agent/ klasörünü seçerek Flutter Theme Agent projesini açın.
VS Code'da flutter_theme_agent/package.json dosyasını açın.
Çalıştır > Hata Ayıklamayı Başlat'ı seçerek uzantıyı hata ayıklama modunda çalıştırın. Bu adım ayrı bir VS Code Uzantı Geliştirme Ana Makinesi penceresi açar.
Code > Settings > Settings'i (Kod > Ayarlar > Ayarlar) seçerek VS Code ayarlarını açın.
Üretken Yapay Zeka Geliştirici sitesinden Google Gemini API Anahtarı alın ve anahtar dizesini kopyalayın.
API anahtarını bir yapılandırma ayarı olarak ayarlayın. Search Settings (Arama Ayarları) alanına flutter theme yazın, Kullanıcı sekmesini seçin ve Google > Gemini: API Anahtarı ayarında Edit in settings.json bağlantısını tıklayın. Gemini API anahtarınızı ekleyin:
```
"google.ai.apiKey": "your-api-key-here"
```
settings.json dosyasında yaptığınız değişiklikleri kaydedin ve ayarlar sekmelerini kapatın.

Uzantı komutlarını test etmek için:

VS Code Extension Development Host (Uzantı Geliştirme Ana Makinesi) penceresinde, oluşturmak istediğiniz kullanıcı arayüzü bileşenini açıklayan bir kod açıklaması yazın.
Bileşen özelliklerine sahip yorum metnini seçin.
Görünüm > Komut Paleti'ni seçerek komut paletini açın.
Komut Paleti'ne Flutter Theme yazın ve bu ön ekle başlayan komutlardan birini seçin.

Mevcut komutu değiştir

Flutter Theme Agent'ta sağlanan komutları değiştirmek, uzantının davranışını ve özelliklerini değiştirmenin en basit yoludur.

Hem yorum hem de inceleme komutları, yapay zeka dil modeli için bazı genel talimatların yanı sıra bu kod için kod ve yorum örnekleri içeren birkaç çekim yaklaşımı kullanır. İstemdeki bağlam bilgileri, yanıt oluşturulurken Gemini dil modeline yön verir. Yorum veya inceleme komutlarındaki istem talimatlarını, örnekleri veya her ikisini birden değiştirerek mevcut komutların her birinin davranış şeklini değiştirebilirsiniz.

Bu talimat grubunda, komutun istem metnini değiştirerek buttonstyle.ts komutunun nasıl değiştirileceği açıklanmaktadır.

buttonstyle.ts komutunu düzenlemeye hazırlanmak için:\

VS Code uygulamasını başlatın.
VS Code'da File > New Window (Dosya > Yeni Pencere) seçeneklerini belirleyerek yeni bir pencere oluşturun.
File > Open Klasörü ve ardından flutter_theme_agent/ klasörünü seçerek Flutter Theme Agent projesini açın.
flutter_theme_agent/src/buttonstyle.ts dosyasını aç.

buttonstyle.ts komutunun davranışını değiştirmek için:\

buttonstyle.ts dosyasında BUTTONSTYLE_CONTEXT sabit değerini düzenleyerek farklı talimatlar ekleyin.

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

İsteğe bağlı olarak buttonstyle.ts dosyasına BUTTONSTYLE_CONTEXT sabit değeri, düğme stilinde bir talimat ve çıkış örneği ekleyin ya da mevcut örneklerden birini değiştirin.

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

buttonstyle.ts dosyasında yaptığınız değişiklikleri kaydedin.

Değiştirilen komutu test etmek için:

VS Code uzantısı proje pencerenizde, Çalıştır > Hata Ayıklamayı Yeniden Başlat'ı seçerek hata ayıklayıcıyı yeniden başlatın.
VS Code Extension Development Host penceresinde, düzenleyici penceresinde istediğiniz düğme stilini açıklayan bir kod yorumu seçin. Örneğin:
```
// blue, lickable buttons that light up when you hover over them`
```
Görünüm > Komut Paleti'ni seçerek komut paletini açın.
Komut Paleti'ne Flutter yazın ve Flutter ThemeAgent: Create a Flutter ButtonStyle komutunu seçin.

Yeni komut oluştur

Gemini API ile tamamen yeni görevler gerçekleştiren yeni komutlar oluşturarak Flutter Tema Aracı'nı genişletebilirsiniz. buttonstyle.ts ve colorscheme.ts gibi her komut dosyası çoğunlukla bağımsızdır ve etkin düzenleyiciden metin toplamak, istem oluşturmak, Gemini API'ye bağlanmak, istem göndermek ve yanıtı vermek için gereken kodu içerir.

Yeni komutun görünür olduğu Flutter Theme Agent ekran görüntüsü

2. Şekil. VS Code Extension Geliştirme Ana Makinesi penceresinde yeni Flutter Theme Agent komutu.

Bu talimat grubunda, mevcut colorscheme.ts komutunun kodunu şablon olarak kullanarak nasıl yeni bir komut oluşturulacağını açıklanmaktadır. Bu güncelleme, komutu ColorScheme nesnesini çevreleyen söz dizimini içermeyecek şekilde değiştirir. Böylece, oluşturma işleminden sonra bu söz dizimini kaldırmanıza gerek kalmaz ve çıktıyı daha hızlı görselleştirmeniz gerekmez.

Bir ColorScheme nesnesi için yalnızca renk listesi oluşturan bir komut oluşturmak üzere:

colorscheme2.ts adlı flutter_theme_agent/src/colorscheme.ts dosyasının src/ dizininde bir kopyasını oluşturun.
VS Code'da src/colorscheme2.ts dosyasını açın.

colorscheme2.ts dosyasında generateColorScheme işlevini generateColorScheme2 olarak yeniden adlandırın:

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

colorscheme2.ts dosyasındaki istem talimatlarını değiştirin. 51. satırdaki örnek koddan ColorScheme( metnini kaldırarak COLORSCHEME_CONTEXT kod oluşturma talimatlarını düzenleyin ve bu metni boş bir satır haline getirin.
```
...
Here's the example of good Dart code:

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

Renk listesinin sonundaki ")" kapanış parantez karakterini kaldırın ve boş bir satır yapın.

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

This example code is a good ...

İkinci örnek için bu değişiklikleri tekrarlayın. 87. satırdaki COLORSCHEME_CONTEXT dizesindeki ColorScheme( metnini kaldırıp boş satır yapın.
115. satırda, renk listesinin sonundan ")" kapanış parantez karakterini kaldırıp boş bir satır yapın.

COLORSCHEME_CONTEXT dizesine, çevreleyen söz dizimini içermeyecek bir talimat ekleyin:

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

colorscheme2.ts dosyasında yaptığınız değişiklikleri kaydedin.

Yeni komutu entegre etme

Yeni komutun kodunu tamamladıktan sonra, kodu uzantının geri kalanıyla entegre etmeniz gerekir. Yeni komutu uzantının parçası haline getirmek için extension.ts ve package.json dosyalarını güncelleyin ve VS Code'un yeni komutu çağırabilmesini sağlayın.

Yeni komutu uzantı koduyla entegre etmek için:

VS Code'da flutter_theme_agent/src/extension.ts dosyasını açın.
Yeni bir import ifadesi ekleyerek yeni komut kodunu uzantıya aktarın.
```
import { generateColorScheme2 } from './components/colorscheme2';
```

activate() işlevine aşağıdaki kodu ekleyerek yeni komutu kaydedin.

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

extension.ts dosyasında yaptığınız değişiklikleri kaydedin.

Ad komutunu uzantı paketiyle entegre etmek için:

VS Code'da flutter_theme_agent/package.json dosyasını açın.

Yeni komutu paket dosyasının commands bölümüne ekleyin.

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

package.json dosyasında yaptığınız değişiklikleri kaydedin.

Yeni komutu test edin

Komutu kodlamayı ve komutun uzantıyla entegrasyonunu tamamladıktan sonra test edebilirsiniz. Yeni komutunuz yalnızca VS Code Extension Development Host penceresinde bulunur, uzantının kodunu düzenlediğiniz VS Code penceresinde değil.

Değiştirilen komutu test etmek için:

VS Code uzantısı proje pencerenizde, Çalıştır > Hata Ayıklamayı Yeniden Başlat'ı seçerek hata ayıklayıcıyı yeniden başlatın. Bu işlem ayrı bir Uzantı Geliştirme Ana Makinesi penceresini yeniden başlatır.
VS Code Extension Development Host penceresinde Flutter geliştirme projesi açın.
Aynı pencerede bir kod düzenleyici penceresi açın, istediğiniz kullanıcı arayüzü bileşenini açıklayan bir yorum yazın ve bu yorum metnini seçin.
Görünüm > Komut Paleti'ni seçerek komut paletini açın.
Komut Paleti'ne Flutter Theme yazın ve Flutter Teması Aracısı: Yeni Kod Oluşturucum komutunu seçin.

Ek kaynaklar

Flutter Theme Agent projesi hakkında daha fazla bilgi için kod deposuna bakın. Uygulamayı oluşturma konusunda yardıma ihtiyacınız varsa veya geliştiricilerle ortak çalışma yapan kişiler arıyorsanız Google Developers Community Discord sunucusuna göz atın.

Üretim uygulamaları

Flutter Theme Agent'ı geniş bir kitle için dağıtmayı planlıyorsanız Google Gemini API kullanımınızın hız sınırlamasına ve diğer kullanım kısıtlamalarına tabi olabileceğini unutmayın. Gemini modeliyle bir üretim uygulaması derlemeyi düşünüyorsanız uygulamanızın ölçeklenebilirliğini ve güvenilirliğini artırmak için Google Cloud Vertex AI hizmetlerine göz atın.