Conductor eklentisiyle uygulama planlama ve oluşturma

1. Giriş

Bu codelab'de, Conductor eklentisi ile yazılım uygulamalarını planlamayı ve oluşturmayı öğreneceksiniz. Conductor, Google tarafından geliştirilen açık kaynaklı bir eklentidir. Planlama ve uygulama takibi gibi spesifikasyona dayalı geliştirme özelliklerini etkinleştirir. Tamamen sıfırdan bir "yeni alan" 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

• Antigravity CLI veya Claude Code'da Conductor eklentisini 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 eklentisini kullanarak "yeni" bir uygulamayı planlama, uygulama ve inceleme
• Conductor eklentisini 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
• Antigravity CLI veya Claude Code gibi bir kodlama temsilcisi

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ında Activate Cloud Shell'i (Cloud Shell'i Etkinleştir) 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 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'de önceden yüklenmiş olarak gelir. 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. CLI kodlama aracılarını yükleme ve kimlik doğrulama

Bu adımda, Google Cloud kimlik bilgilerinizi kullanarak yerel kod düzenleyicinizde Antigravity CLI veya Claude Code'u yükleyip kimliğinizi doğrulayarak yerel geliştirme ortamınızı hazırlayacaksınız.

Antigravity CLI'yı yükleme ve kimlik doğrulama

1. Antigravity CLI'nın en son sürümünü yükleyin.

   # MacOS and Linux
   curl -fsSL https://antigravity.google/cli/install.sh | bash
   
   # Windows Powershell
   irm https://antigravity.google/cli/install.ps1 | iex
   
   # Windows CMD
   curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
   

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

   agy --version
   

4. Google Cloud kimlik bilgilerinizi kullanarak kimliğinizi doğrulayın.
   • Antigravity CLI'yı başlatın.

     agy
     

   • Giriş yöntemi seçin istendiğinde Google Cloud projesi kullan'ı seçin. Güvenli yetkilendirme URL'sini bir web tarayıcısında açın. Onaylanmış kimlik bilgilerinizle oturum açın ve kimlik doğrulama işlemini tamamlayın. Tarayıcıda benzersiz bir alfanümerik yetkilendirme kodu gösterilir. Bu kodu kopyalayın, terminalinize dönün ve isteme yapıştırın.

   Diğer giriş yöntemlerini de seçebilirsiniz. Bu codelab, Google Cloud projesiyle nasıl çalışılacağını göstermeyi amaçlamaktadır.

5. Antigravity CLI'dan çıkın.Devam etmeden önce canlı Antigravity CLI oturumunuzu sonlandırmak için CLI terminalinden /exit yazın.

Claude Code'u yükleme ve kimlik doğrulama

Alternatif olarak, Claude Code ile Conductor Plugin'i kullanabilirsiniz. Burada, Google Cloud kimlik bilgilerinizi kullanarak Claude Code'u yükleyip kimliğini doğrulayacağız.

1. Claude Code'un en son sürümünü yükleyin.
2. Google Cloud kimlik bilgilerinizi kullanarak kimliğinizi doğrulayın.
   • Claude Code'u başlatın.

     claude
     

   • Giriş yönteminizi seçmek için /login yazın. 3. taraf platformu · Amazon Bedrock, Microsoft Foundry veya Vertex AI ve Google Vertex AI seçeneğini belirleyin. Google Vertex AI'ı ayarlamak için Uygulama Varsayılan Kimlik Bilgileri (google auth) seçeneğini belirleyin ve kurulumu istendiği şekilde tamamlayın.

   Diğer giriş yöntemlerini de seçebilirsiniz. Bu codelab, Google Cloud projesiyle nasıl çalışılacağını göstermeyi amaçlamaktadır.

3. Claude Code'u yeniden başlatın.

4. Conductor eklentisini yükleme

Conductor, Google tarafından geliştirilen açık kaynaklı bir eklentidir. Planlama ve uygulama takibi gibi spesifikasyona dayalı geliştirme özelliklerini etkinleştirir.

Antigravity CLI'ya yükleme

1. Eklentiyi yükleyin:
   • Antigravity CLI

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

2. Yüklemeyi doğrulayın:
   • Antigravity CLI'yı başlatın.

     agy
     

   • /conductor yazın. /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement gibi komutların listesini görürsünüz.
3. CLI'dan çıkın.Devam etmeden önce canlı CLI oturumunuzu sonlandırmak için terminalden /exit yazın.

Claude Code'da yükleme

1. Marketplace deposunu kaydedin ve Conductor eklentisini doğrudan Claude Code oturumunuza yükleyin.

   /plugin marketplace add gemini-cli-extensions/conductor
   /plugin install conductor
   /reload-plugin
   

2. Yüklemeyi doğrulayın.
   • /conductor yazın. /conductor-setup, conductor-new-track, conductor-implement gibi komutların listesini görürsünüz.
3. CLI'dan çıkın.Devam etmeden önce canlı CLI oturumunuzu sonlandırmak için Claude Code terminalinden /exit yazın.

5. 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. Yeni bir proje dizini oluşturun ve bu dizine geçin.Artık picker-wheel dizinindeki bir proje üzerinde çalışıyoruz. Bu dizini oluşturun ve bu dizine geçin.

   mkdir picker-wheel
   cd picker-wheel
   

2. Antigravity CLI'yı başlatın.Proje dizininizden Antigravity CLI veya Claude Code ile yeni bir CLI oturumu başlatın.

   # Antigravity CLI
   agy
   
   # Claude Code
   claude
   

   • "Bu klasördeki dosyalara güveniyor musunuz?" sorusu sorulduğunda Klasöre güven (seçim tekerleği)'ni seçin.
3. Conductor'ı başlatın.Projeyi iskeletlendirmek ve Conductor ortamını ayarlamak için kurulum komutunu çalıştırın.

   # Antigravity CLI
   /conductor:conductor-setup
   
   # Claude Code
   /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 - Fast Node backend
     • Veritabanı → Yok - Veritabanı gerekmez
   • İş akışı: Standart.
   • Ürün koşulları:
     • 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-new-rack 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şlayın.

   # Antigravity CLI
   /conductor:conductor-implement
   
   # Claude Code
   /conductor-implement
   

   Conductor artık plan üzerinden çalışarak proje için kod yazacak.

   İ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ğrulayın.Conductor, uygulama aşamasında 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 conductor/tracks/.../plan.md simgesini tıklayarak atlanan adım veya hata olup olmadığını kontrol edin.

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

   # Antigravity CLI
   /conductor:conductor-review
   
   # Claude Code
   /conductor-review
   

6. Mevcut sistemde yineleme: 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 indirip 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 Firebase becerilerini yükleyin.
2. CLI aracınızı başlatın.Yeni bir CLI oturumu başlatın.

   # Antigravity CLI
   /new
   
   # Claude Code
   /new
   

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

   # Antigravity CLI
   /conductor:conductor-new-track "I want users to be able to log in to their
   accounts and save their picker wheel configurations."
   
   # Claude Code
   /conductor-new-track "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 simgelerini okumak için biraz zaman ayırın.
6. Uygulayın.Her şey yolunda görünüyorsa uygulamaya başlayabilirsiniz.

   # Antigravity CLI
   /conductor:conductor-implement
   
   # Claude Code
   /conductor-implement
   

7. Doğrulayın.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 ve Firebase yapılandırmalarınızı firebase.ts içinde sağlamanız gerekir.

7. 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. Kimlik doğramayı silme: Firebase Console > AuthenticationSign-in method'a (Kimlik doğrulama > Oturum açma yöntemi) gidin ve Google'ı devre dışı bırakın.

8. Tebrikler

Tebrikler! Seçtiğiniz kodlama aracıyla (Antigravity CLI veya Claude Code) Conductor eklentisini kullanarak sıfırdan bir web uygulaması oluşturup kimlik doğrulama ve veritabanı entegrasyonu gibi karmaşık özelliklerle yineleme yaptınız.

Sonraki adımlar

• Antigravity CLI eklentileri belgelerini inceleyin.
• Claude Code eklentileri dokümanlarını inceleyin.