Gemini CLI ile Angular projelerinde verimli kodlama rehberi

Gemini CLI, Angular projelerinde terminalden gemini komutuyla çalışan bir kodlama ajanıdır. Angular’ın standalone bileşen, servis, DI, sinyal ve RxJS yapılarına uygun refactor, test ve hata ayıklama işlerinde işe yarar. Bu rehberde GEMINI.md kurulumunu, çalışma döngüsünü ve doğrulama pratiklerini somut örneklerle ele alıyorum.

Gemini CLI Angular işleri için neden uygun?

Angular projeleri bileşen, servis, DI ve şablon arasında net sözleşmelere dayanır. Gemini CLI, proje kökündeki GEMINI.md dosyasını okuyarak bu sözleşmelere uyum sağlar; terminalde Angular CLI komutlarını doğrudan çalıştırabildiği için build ve test çıktılarını bağlam olarak kullanır. Standalone bileşen geçişi, servis sağlayıcılarını providedIn: 'root' ile güncelleme ve sinyal tabanlı state dönüşümleri gibi tekrarlı işlerde tutarlı sonuç verir. Ayrıca template, TypeScript ve HTML arasındaki bağları birlikte değerlendirir; böylece yalnızca .ts dosyasını değil, şablonu da günceller. Örneğin bir @Input tipini değiştirdiğinizde, ajan ilgili şablondaki bağlamaları da günceller. Büyük değişiklikler yerine küçük ve test edilebilir adımlarla yönetildiğinde en verimli hale gelir. Angular CLI komutlarını (ng generate, ng build, ng test) kullanabilmesi, projeye yabancı olmamasını sağlar. Kurulum ve temel kullanım için Gemini CLI nasıl kullanılır? Adım adım rehber sayfasına göz atılabilir.

Projeyi ajan için hazırlama ve GEMINI.md

Gemini CLI proje talimatlarını GEMINI.md dosyasından okur. Angular projesinde bu dosyayı kök dizine ekleyin; build, test ve lint komutlarını, klasör düzenini ve Angular’a özel kuralları yazın. Ajan yanlış komut veya NgModule varsayımı yapmasın diye standalone bileşen, providedIn: 'root' ve sinyal tercihlerini açıkça belirtin. GEMINI.md olmadan ajan, Angular’ın eski NgModule tabanlı yapısını varsayabilir veya projenizin test runner’ını bilemez. Aşağıdaki örnek, tipik bir Angular projesi için yeterli düzeyde kural içerir:

# GEMINI.md

## Komutlar
- Kurulum: `npm ci`
- Geliştirme sunucusu: `npm start`
- Derleme: `npm run build`
- Test: `npm test` (Jest) veya `ng test --watch=false` (Jasmine)
- Lint: `npm run lint`

## Klasör kuralları
- Standalone bileşenler `src/app/features/...` altında tutulur; her özellik kendi klasöründe bulunur.
- Paylaşılan UI `src/app/shared/`, servisler `src/app/core/services/` altında yer alır.
- Akıllı bileşenler yalnızca servis enjekte eder; sunum bileşenleri @Input ve @Output kullanır.

## Angular kuralları
- Yeni bileşenler daima standalone olmalı; NgModule kullanmayın.
- Servisler `providedIn: 'root'` ile sağlanır.
- Durum yönetimi için sinyalleri tercih edin; RxJS yalnızca asenkron akışlarda kullanılır.
- Şablonlarda `async` pipe yerine `toSignal` veya sinyal tabanlı yaklaşım kullanın ama mevcut çalışan kodu bozmayın.
- Her değişiklikten sonra `npm test` ve `npm run build` çalıştırın; hatalar giderilmeden görev bitmiş sayılmaz.

Bu dosyayı güncel tutmak, ajanın projeye özgü kararlar almasını kolaylaştırır. Örneğin, Jest kullanıyorsanız ng test yerine jest komutunu yazın; böylece ajan yanlış test runner çağırmaz. Aynı şekilde lint kurallarınız özel bir ESLint konfigürasyonuna dayanıyorsa, bunu belirtin. Prompt yazımıyla ilgili ek ipuçları için kodlama ajanları için prompt nasıl yazılır? yazısına bakabilirsiniz.

Çalışma döngüsü: planla, küçük adım at, test et, diff incele

Gemini CLI ile Angular projesinde çalışırken şu döngüyü izleyin: önce ajanın plan hazırlamasını isteyin, sonra her adımı ayrı ayrı uygulamasını söyleyin. Her adımdan sonra npm test ve npm run build çalıştırın, ardından git diff ile değişiklikleri inceleyin. Bu, Angular’daki şablon-ts bağının bozulmasını veya RxJS subscription sızıntısını erken yakalar. Ajan, projeyi değiştirmeden önce hangi dosyaları etkileyeceğini söylemelidir; böylece kapsam dışı değişiklikleri fark edersiniz. Aşağıdaki örnek promptlar tipik Angular görevleri için başlangıç noktasıdır:

• Yeni bir standalone servis oluştur: UserService, HttpClient ile /api/users endpoint’inden kullanıcı listesi çeksin ve state’i signal ile tutsun.
• Mevcut ProductListComponent içindeki Observable tabanlı veri akışını signal ve computed kullanacak şekilde refactor et; subscription temizliğini koru.
• AuthService içindeki login metodunu hata yönetimi ile güçlendir ve LoginComponent şablonundaki hata mesajını @if bloğu ile göster.
• user.service.spec.ts dosyasındaki başarısız testleri düzelt; üretim kodunu değiştirmeden yalnızca test dosyasını güncelle.
• Standalone CartComponent’i OnPush değişiklik algılama ile kullanacak şekilde güncelle ve gerekli ChangeDetectorRef çağrılarını ekle.

Bu promptları verirken her zaman beklenen dosya yolunu ve doğrulama komutunu ekleyin. Örneğin, “iş bitince npm test -- --watch=false çalıştır ve hata varsa düzelt” demek, ajanın kendi kendini doğrulamasını sağlar. Ajan kendi kendine test çalıştırmaya başladığında sonuçları dikkatle izleyin; yanlış testleri geçici olarak devre dışı bırakmasına izin vermeyin.

Tipik Angular görevleri ve dikkat edilecek noktalar

Gemini CLI; standalone bileşen oluşturma, servis ekleme veya güncelleme, NgModule’den standalone’e geçiş, sinyal tabanlı state yönetimine refactor, RxJS subscription temizliği, test dosyalarını düzeltme ve import güncelleme gibi işleri iyi yapar. Aşağıdaki durumlarda ajanı yakından izlemek gerekir:

• Şablon ile TypeScript arasındaki tip uyumsuzlukları: Ajan bazen @Input tipini değiştirir ama şablondaki kullanımı unutur. Örneğin, @Input() count: number değerini string yaparsa ancak şablonda {{ count * 2 }} kalırsa derleme hatası oluşur. Her değişiklik sonrası ng build ile yakalanabilir.
• DI sağlayıcıları: Servisi providedIn: 'root' ile eklerken mevcut providers dizisini karıştırabilir. Bir servisin hem providedIn hem de modül providers içinde tanımlanması çakışmaya yol açar; ajanın yalnızca tek yerden sağlamasını sağlayın.
• RxJS ve sinyal karışımı: toSignal veya computed dönüşümlerinde subscription sızıntısı oluşabilir; takeUntilDestroyed eklemesi gerekir. Özellikle interval veya fromEvent gibi uzun ömürlü akışlarda ajan temizliği atlayabilir.
• OnPush bileşenlerde değişiklik algılama: Ajan bazen ChangeDetectorRef çağrılarını atlar veya gereksiz yere ekler. Sinyal kullanıyorsanız bu çağrıların çoğu gereksizdir; ajanın eski alışkanlıklarla markForCheck eklemesini engelleyin.
• Router yapılandırması ve lazy loading: Yeni bir standalone bileşeni route’a eklerken loadComponent sözdizimini bozabilir. loadChildren ile loadComponent karışabilir; route tanımını mutlaka gözden geçirin.
• Reactive forms: FormGroup yapısını değiştirirken şablondaki formControlName bağlantılarını güncellemeyi unutabilir. Form tanımı ve şablonu birlikte inceleyin.

Bu alanlarda ajanın ürettiği kodu mutlaka git diff ile inceleyin ve ilgili testleri çalıştırın. Özellikle framework’e özgü davranışlar konusunda ajanın varsayımlarını doğrulayın.

Angular için test ve doğrulama

Ajanın her değişikliğinden sonra aşağıdaki komutları çalıştırarak doğrulama yapın:

Testlerin başarısız olması durumunda ajanın yalnızca üretim kodunu değiştirmesini isteyin; test dosyalarını zayıflatmasına izin vermeyin. Ajan, test çıktılarındaki hata satırlarını okuyup düzeltme önerebilir. git diff ile yapılan değişiklikleri adım adım inceleyin; özellikle spec.ts dosyalarındaki beklentilerin gevşetilmediğinden emin olun. Jasmine veya Jest fark etmeksizin, --watch=false parametresi tek seferlik çalıştırma için ajanla uyumludur. Jest kullanıyorsanız --runInBand ekleyerek paralel test çalıştırmayı kapatabilirsiniz; bu, ajanın çıktıyı daha kolay okumasını sağlar. Ayrıca ng test --code-coverage ile kapsama raporu alıp hangi satırların test edilmediğini görebilirsiniz. E2E testleriniz varsa, ajanın bunları çalıştırmasını istemek yerine manuel kontrol etmek daha güvenlidir çünkü tarayıcı etkileşimleri beklenmedik hatalara yol açabilir.

Birden çok ajanı AgentVera ile yönetme

AgentVera, Angular projesinde aynı anda birden çok Gemini CLI örneğini tek pencerede yan yana çalıştırır. Her ajan kendi git worktree’sinde işlem yaptığı için aynı dosyaları ezme riski olmadan biri bileşen refactor’u yaparken diğeri servis testlerini düzeltebilir. Ajan turu bittiğinde ikinci bir model otomatik kod incelemesi yapar ve bulgular dosya:satır olarak gösterilir. Checkpoint’ler sayesinde yanlış bir değişikliği tek tıkla geri alıp oturumu adım adım izleyebilirsiniz. Token bütçeleri de ajanların kapsamını ve maliyetini kontrol altında tutar. Bu, Angular’ın birbirine bağımlı parçalarında paralel çalışırken çakışmaları önler ve kaliteyi artırır.

Sonuç

Gemini CLI, doğru GEMINI.md kuralları ve disiplinli bir çalışma döngüsüyle Angular projelerinde güvenilir bir yardımcıya dönüşür. Küçük adımlar, sürekli test ve diff incelemesi, Angular’ın karmaşık yapısında bile ajanın hatasını en aza indirir. Tek ajan yeterli gelmediğinde AgentVera ile paralel çalışma düzeni kurarak hız ve doğruluğu artırabilirsiniz. Ajanın ürettiği kodu her zaman kendi Angular bilginizle doğrulayın; framework’ün incelikleri konusunda son karar sizde olmalıdır.