Gemini CLI Conductor ile Uygulama Planlama ve Oluşturma

1. Giriş

Bu codelab'de, Gemini CLI Conductor uzantısı ile yazılım uygulamalarını planlamayı ve oluşturmayı öğreneceksiniz. Tamamen sıfırdan bir "yeni proje" uygulaması oluşturarak başlayacaksınız. Ardından, kimlik doğrulama ve depolama eklemek için üzerinde yineleme yaparak "brownfield" projesi olarak ele alacaksınız.

Yapacaklarınız

• Gemini CLI ve Conductor uzantısını yükleyin.
• Conductor'ın planlama ve uygulama özelliklerini kullanarak sıfırdan"Picker Wheel" web uygulaması oluşturma
• Firebase kullanarak kimlik doğrulama ve depolama ekleyerek uygulamaya kişiselleştirme özelliği ekleme

Neler öğreneceksiniz?

• Conductor uzantısını kullanarak "sıfırdan" bir uygulamayı planlama, uygulama ve inceleme
• Conductor uzantısını kullanarak "brownfield" uygulamasına özellik ekleme

İhtiyacınız olanlar

• Chrome gibi bir web tarayıcısı
• Faturalandırmanın etkin olduğu bir Google Cloud projesi
• Node.js yüklü olmalıdır (18 veya daha yeni bir sürüm önerilir).
• Visual Studio Code gibi yerel bir kod düzenleyici

2. Başlamadan önce

Google Cloud projesi oluşturma

1. Google Cloud Console'daki proje seçici sayfasında bir Google Cloud projesi seçin veya oluşturun.
2. Cloud projeniz için faturalandırmanın etkinleştirildiğinden emin olun. Bir projede faturalandırmanın etkin olup olmadığını kontrol etmeyi öğrenin.

Cloud Shell'i Başlatma

Cloud Shell'i kullanarak bu bölümü gcloud ve firebase CLI araçlarını yerel olarak yüklememize gerek kalmadan tamamlayabiliriz.

Cloud Shell, Google Cloud'da çalışan ve gerekli araçların önceden yüklendiği bir komut satırı ortamıdır.

1. Google Cloud Console'un üst kısmından Cloud Shell'i etkinleştir'i tıklayın.
2. Cloud Shell'e bağlandıktan sonra kimlik doğrulamanızı onaylayın:

   gcloud auth list
   

3. Projenizin yapılandırıldığını onaylayın:

   gcloud config get project
   

4. Projeniz beklendiği gibi ayarlanmamışsa şu şekilde ayarlayın:

   export PROJECT_ID=<YOUR_PROJECT_ID>
   gcloud config set project $PROJECT_ID
   

API'leri etkinleştir

Google Cloud projenizde Firebase Management API'yi etkinleştirin.

gcloud services enable firebase.googleapis.com

Firebase'i projenize ekleme

Firebase CLI, Cloud Shell'e önceden yüklenmiştir. Cloud Shell'den, Google Cloud projesine erişmenizi sağlayan Google Hesabı ile oturum açın. Yerel olarak çalışıyorsanız talimatları uygulayarak Firebase CLI'yı yükleyin.

firebase login

Firebase'i Google Cloud projenize eklemek için aşağıdaki komutu çalıştırın:

firebase projects:addfirebase

firebase CLI'yı ilk kez çalıştırıyorsanız sorulan soruları yanıtlayın.

Cloud Shell'den çıkma

Cloud Shell penceresini kapatabilirsiniz. Aşağıdaki bölümde yerel ortamınızı yapılandıracağız.

3. Gemini CLI ve Conductor'ı yerel olarak yükleme

Bu adımda, yerel kod düzenleyicinizi ve terminalinizi kullanarak Gemini CLI'ı ve Conductor uzantısını yükleyerek yerel geliştirme ortamınızı hazırlayacaksınız.

Gemini CLI'yı yükleme

1. npm kullanarak Gemini KSA'nın en yeni sürümünü genel olarak yükleyin:

   npm install -g @google/gemini-cli
   

   İzin hataları görürseniz nvm gibi bir sürüm yöneticisi kullanmanız veya sudo kullanarak bu komutu root olarak çalıştırmanız gerekebilir.

2. gemini'nin PATH'inize eklenmesi için terminalinizi yeniden başlatın.
3. Yüklemenin en son sürümü yüklediğini doğrulayın:

   gemini --version
   

4. Yeni bir proje dizini oluşturma ve bu dizine geçme: Sonraki bir bölümde picker-wheel dizininde bir proje oluşturacağız. Bu dizini şimdi oluşturun ve bu dizine geçin:

   mkdir picker-wheel
   cd picker-wheel
   

5. Kimlik doğrulama:
   • Gemini KSA'yı başlatın.

     gemini
     

   • "Bu klasördeki dosyalara güveniyor musunuz?" sorusu sorulduğunda Klasöre güven (seçim tekerleği)'ni seçin.
   • "Bu proje için kimlik doğrulamayı nasıl yapmak istersiniz?" sorusuna Vertex AI'ı seçin. Google Cloud API anahtarı almak ve GOOGLE_API_KEY ortam değişkenini ayarlamak için kimlik doğrulama kılavuzunu inceleyin. Farklı kullanım katmanlarını ve bunlara karşılık gelen API hız sınırlarını inceleyin.
6. Gemini CLI'dan çıkma: Devam etmeden önce canlı Gemini CLI oturumunuzu sonlandırmak için CLI terminalinden /quit yazın.

Conductor uzantısını yükleme

Conductor, Google tarafından geliştirilen, açık kaynaklı bir Gemini CLI uzantısıdır. Planlama ve uygulama takibi gibi bağlama dayalı geliştirme özelliklerini etkinleştirir.

1. Uzantıyı yükleyin:

   gemini extensions install https://github.com/gemini-cli-extensions/conductor
   

2. Yüklemeyi doğrulama:
   • Gemini KSA'yı başlatın.

     gemini
     

   • /conductor yazın. setup, newTrack, implement gibi komutların listesini görürsünüz.
3. Gemini CLI'dan çıkma: Devam etmeden önce canlı Gemini CLI oturumunuzu sonlandırmak için CLI terminalinden /quit yazın.

4. Greenfield Development: The Picker Wheel

Ortamınız ayarlandığına göre artık sıfırdan yeni bir uygulama oluşturabilirsiniz. Rastgele bir seçeneği belirlemek için dönen basit bir web uygulaması olan "Seçim Çarkı" oluşturacaksınız.

Ürün bağlamını ayarlama

1. Önceki bölümde oluşturduğunuz picker-wheel dizininde olduğunuzu onaylayın:

   pwd
   

2. Gemini CLI'yı başlatma: Proje dizininizden yeni bir Gemini CLI oturumu başlatın.

   gemini
   

3. Conductor'ı başlatın: Projeyi iskeletlendirmek ve Conductor ortamını ayarlamak için kurulum komutunu çalıştırın.

   /conductor:setup
   

4. Etkileşimli istemleri uygulayın: Gördüğünüz etkileşimli istemler bu örneklerle tam olarak eşleşmez. Conductor iş akışına alışmak için daha basit bir tasarıma odaklanın.
   • Ürün hedefi: Bir listeden rastgele bir öğe seçmek için yapılandırılabilir bir çark gösteren web uygulaması.
     • Hedef Kitle → Genel Kitle
     • Etkileşim → Döndürmek için Dokunma/Tıklama
     • Özelleştirme → Temel
     • Platform → Masaüstü Öncelikli
   • Ürün kuralları: Otomatik oluşturma.
   • Teknoloji yığını:
     • Diller → TypeScript/JavaScript: Tam yığın web için idealdir.
     • Ön uç → Vue.js - Sezgisel web arayüzleri
     • Arka uç → Express.js - Hızlı Node arka ucu
     • Veritabanı → Yok - Veritabanı gerekmez
   • İş akışı: Standart.
   • Ürün şartları:
     • Kullanıcı Hikayeleri → Özelleştirilebilir Seçenekler, Net Kazanan Gösterimi
     • Temel Özellikler → Düzenlenebilir Seçenek Listesi, Rastgele Renkler
     • Kısıtlamalar → Yalnızca İstemci Tarafı, Yüksek Performans
     • İşlevsel Olmayan (Non-Functional) → Yüksek Test Kapsamı, TypeScript ve Vue.js, Duyarlı Tasarım
   Conductor, conductor/ dizininde bağlam dosyaları oluşturur.

Yeni parça oluşturma

Conductor'daki "Parça", bir özelliği veya iş birimini temsil eder.

1. /conductor:newTrack kullanarak yeni bir parça başlatın. Conductor, ürün bağlamına göre ilk parçayı önerebilir. Alternatif olarak, kendi parçanızı önerebilir veya orkestra şefinden bir parça önermesini isteyebilirsiniz.
2. Oluşturulan planı inceleyin: Conductor, conductor/tracks/{track-id}/ içinde bir index.md, bir spec.md ve bir plan.md oluşturur. Biraz zaman ayırarak bunları okuyun. Her şey yolundaysa Conductor, ilk kurulum dosyalarını kaydetmenizi ve işlemenizi ister.

Track'i uygulama

1. Uygulamaya başlama:

   /conductor:implement
   

   Conductor artık proje için kod yazarak plan üzerinden çalışacak.

   İpucu: Etkileşimli kabuklarda veya uzun süren işlemlerde (ör. geliştirme sunucuları veya test izleyicileri) takılmamak için Conductor'ın bu komutları nasıl işleyeceğini tam olarak bilmesi gerekir. Vite (npm run dev) ve Vitest (npm run test) gibi araçlar genellikle varsayılan olarak "izleme modunda" çalışır. Bu mod, işlemi süresiz olarak açık tutar. workflow.md dosyasını güncelleyerek Conductor'a izleme modunu devre dışı bırakmasını veya komutları yürütürken is_background: true kullanmasını söyleyebilirsiniz.

2. Uygulamayı doğrulama: Conductor, uygulama aşaması boyunca uygulamayı manuel olarak test etmenizi ister. Örneğin, yerel web sunucusunu açmanızı, uygulamayı tarayıcınızda önizlemenizi ve değişiklikleri doğrulamanızı ister. Uygulama tamamlandığında işlevsel bir seçici tekerlek görmeniz gerekir.

   Sorun giderme: Oluşturulan kod beklenmedik şekilde davranıyorsa atlanan adım veya hata olup olmadığını görmek için conductor/tracks/.../plan.md kontrol edin.

3. Uygulamayı inceleme: Son adım olarak Conductor'dan uygulamayı incelemesini isteyebilirsiniz. Kaynak kodu incelemeli, proje belgelerini senkronize etmeli ve parçayı arşivlemelidir.

   /conductor:review
   

5. Mevcut alan yinelemesi: Kişiselleştirme ekleme

Şimdi "brownfield" geliştirmeye geçeceksiniz. Önceki bölümde yer alan seçici çarkı web uygulamasını, oturum açmış kullanıcıların seçici çarkı yapılandırmalarını kaydedip geri yükleyebilecekleri şekilde iyileştireceksiniz.

Doğrudan mevcut bir uygulamaya geçmek istiyorsanız referans uygulama için son bölümdeki golden code'u indirebilir ve bu kod üzerinde çalışmaya devam edebilirsiniz.

Kişiselleştirme parçası oluşturma

1. Aşağıdaki "brownfield" örneğinde kimlik doğrulama ve depolama için Firebase'i kullanacağız. Conductor'ın kullanabilmesi için Gemini CLI Firebase uzantısını yükleyin.

   gemini extensions install https://github.com/gemini-cli-extensions/firebase
   

2. Gemini CLI'yı başlatma: Proje dizininizden yeni bir Gemini CLI oturumu başlatın.

   gemini
   

3. Yeni parça başlatma: Yeni bir parça başlatın.

   /conductor:newTrack "I want users to be able to log in to their accounts and
   save their picker wheel configurations."
   

4. Etkileşimli istemleri uygulayın: Gördüğünüz etkileşimli istemler bu örneklerle tam olarak eşleşmez. Conductor iş akışına alışmak için daha basit bir tasarıma odaklanın.
   • Hedefi izle:
     • Auth Provider → Firebase Auth
     • Kayıtlı Yapılandırmalar → Tekerlek Seçenekleri
     • Veri Depolama → Firestore
     • Firestore Login UI → Modal Overlay
   Conductor, conductor/tracks/{track-id} içinde yeni bir parça için bağlam dosyaları oluşturur.
5. Oluşturulan planı inceleyin: conductor/tracks/{track-id}/ içindeki index.md, spec.md ve plan.md bölümlerini okumak için zaman ayırın.

   İpucu: Uygulamaya geçmeden önce planı mümkün olduğunca anlamak ve tartışmak için Gemini ile etkileşime geçmeniz önerilir.

6. Uygulama: Her şey yolunda görünüyorsa uygulamaya başlayabilirsiniz.

   /conductor:implement
   

7. Doğrulama: Uygulamanızı yeniden yükleyin. Güncellenmiş bir uygulama görürsünüz.

   Yapay zeka, kimlik doğrulama uygulamasını test ederken takılırsa Firebase Console'da Kimlik doğrulama > Oturum açma yöntemi bölümünde Google ile Oturum Açma'yı etkinleştirmeyi unutmayın.

   

Referans uygulaması için altın kod aşağıda verilmiştir. Uygulamanızı düzgün bir şekilde başlatmak için Firebase projenizi .firebaserc içinde ve Firebase yapılandırmalarınızı firebase.ts içinde sağlamanız gerekir.

6. Temizleme

Google Cloud hesabınızın sürekli olarak ücretlendirilmesini önlemek için bu codelab sırasında oluşturulan kaynakları silin.

Firebase projesini (ve Google Cloud projesini) silme

Temizliğin en kolay yolu projeyi tamamen silmektir.

1. Google Cloud Console'da oluşturduğunuz projeyi seçin.
2. DELETE'i (SİL) tıklayın.

Alternatif olarak, projeyi korumak ancak kaynakları silmek istiyorsanız:

1. Firestore veritabanını silme: Firebase Konsolu > Firestore'a gidip veritabanını silin.
2. Authentication'ı silme: Firebase Console > AuthenticationOturum açma yöntemi'ne gidin, Google'ı devre dışı bırakın.

7. Tebrikler

Tebrikler! Gemini CLI Conductor uzantısını kullanarak sıfırdan bir web uygulaması oluşturup kimlik doğrulama ve veritabanı entegrasyonu gibi karmaşık özelliklerle yineleme işlemini başarıyla gerçekleştirdiniz.

Sonraki adımlar

• Kolay planlama için Gemini CLI Plan Modu'nu keşfedin
• Diğer Gemini CLI uzantılarını keşfedin.