Son iki yıldır Work & Co'daki ekibim ve ben, kitleler tarafından kullanılan web deneyimlerini sunmamıza yardımcı olmak için Copilot, Cursor, Claude ve ChatGPT gibi yapay zeka kodlama araçlarını test ediyor ve yavaş yavaş entegre ediyoruz. Kuşkusuz, başlangıçtaki bazı şüpheciliklerden ve birkaç anın ardından, çeşitli yapay zeka araçları günlük kullanımımda yerini buldu. Zamanla yapay zekanın kontrolü ele almasına izin vermenin mantıklı olduğunu düşündüğümüz uygulamaların listesi büyümeye başladı, bu nedenle "sorumlu geliştirici" olarak adlandırdığım kişi için yapay zeka araçlarına yönelik bazı pratik kullanım örneklerini paylaşmaya karar verdim. Sorumlu bir geliştirici ile ne demek istiyorum? Paydaşlarımızın ve müşterilerimizin beklediği kalitede kod sağladığımızdan emin olmalıyız. Katkılarımız (yani çekme talepleri), çalışmalarımızı gözden geçirmek ve test etmek zorunda kalacak meslektaşlarımız için bir yük haline gelmemelidir. Ayrıca bir şirkette çalışıyorsanız: Kullandığımız araçların işverenimiz tarafından onaylanması gerekir. Güvenlik ve gizlilik gibi hassas hususların doğru şekilde ele alınması gerekir: Politika onayı olmadan sırları, müşteri verilerini (PII) veya özel kodları araçlara yapıştırmayın. Buna internetteki bir yabancının kodu gibi davranın. Her zaman test edin ve doğrulayın. Not: Bu makale, VSCode veya Cursor içindeki Copilot gibi yapay zeka kodlama araçlarına çok temel düzeyde aşina olduğunuzu varsaymaktadır. Bunların hepsi size tamamen yeni ve yabancı geliyorsa Github Copilot video eğitimleri sizin için harika bir başlangıç noktası olabilir.
Yapay Zeka Kodlama Araçlarının Yararlı Uygulamaları Not: Aşağıdaki örnekler esas olarak React, Vue, Svelte veya Angular gibi JavaScript tabanlı web uygulamalarında çalışmaya odaklanacaktır. Bilinmeyen Bir Kod Tabanını Anlamak Yerleşik kod tabanları üzerinde çalışmak alışılmadık bir durum değildir ve büyük bir eski kod tabanına katılmak korkutucu olabilir. Projenizi ve AI aracınızı açın (benim durumumda, VSCode'daki Copilot Chat) ve tıpkı bir meslektaşınıza soracağınız gibi sorular sormaya başlayın. Genel olarak herhangi bir yapay zeka ajanıyla tıpkı bir insanla konuştuğum gibi konuşmayı severim. İşte daha ayrıntılı bir örnek istem: "Bana üst düzey bir mimariye genel bakış verin: giriş noktaları, yönlendirme, kimlik doğrulama, veri katmanı, derleme araçları. Ardından okunacak 5 dosyayı sırayla listeleyin. Açıklamaları hipotez olarak değerlendirin ve referans verilen dosyalara atlayarak onaylayın."
"Yönlendirme ayrıntılı olarak nasıl çalışır?" gibi takip soruları sormaya devam edebilirsiniz. veya "Bana kimlik doğrulama süreci ve yöntemleri hakkında konuşun" ve bu sizi, alışılmadık bir kod tabanının karanlığına biraz ışık tutmanız için yararlı talimatlara yönlendirecektir. Bağımlılıkları Yükseltirken Değişiklikleri Önleme Npm paketlerini güncellemek, özellikle de son değişikliklerle birlikte geldiğinde sıkıcı ve zaman alıcı bir iş olabilir ve oldukça fazla sayıda regresyonda hata ayıklamanıza neden olabilir. Kısa bir süre önce veri görselleştirme kitaplığıplotly.js'yi sürüm 2'den 3'e büyük bir sürüme yükseltmek zorunda kaldım ve bunun sonucunda bazı grafiklerdeki eksen etiketlemesi çalışmayı durdurdu. ChatGPT'ye sormaya devam ettim: "Plotly kullanan Angular projemi güncelledim. Plotly.js - dist paketini 2.35.2 sürümünden 3.1.0 sürümüne güncelledim - ve şimdi x ve y eksenindeki etiketler gitti. Ne oldu?"
Temsilci hemen bir çözümle geri döndü (aşağıda kendiniz görün). Not: Düzeltmeyi göndermeden önce açıklamayı resmi geçiş kılavuzuna göre doğruladım.
Refactor'ları Dosyalar Arasında Güvenli Bir Şekilde Çoğaltmak Büyüyen kod tabanları kesinlikle kod birleştirme fırsatlarını ortaya çıkarıyor. Örneğin, tek bir işleve veya bileşene ayıklanabilen dosyalar arasında kod çoğaltma olduğunu fark ettiniz. Sonuç olarak, bunun yerine eklenebilecek paylaşılan bir bileşen oluşturmaya ve bu yeniden düzenlemeyi tek bir dosyada gerçekleştirmeye karar verirsiniz. Artık, kalan dosyalarınızda bu değişiklikleri manuel olarak gerçekleştirmek yerine, temsilcinizden yeniden düzenleyiciyi sizin için kullanıma sunmasını istiyorsunuz. Aracılar birden fazla dosyayı bağlam olarak seçmenize olanak tanır. Bir dosya için yeniden düzenleme işlemi tamamlandıktan sonra, hem yeniden düzenlenmiş hem de dokunulmamış dosyaları bağlama ekleyebilirim ve aracıdan değişiklikleri diğer dosyalara şu şekilde yaymasını isteyebilirim: "A dosyasında yaptığım değişiklikleri B dosyasına da kopyala". Bilinmeyen Teknolojilerde Özelliklerin Uygulanması AI kodlama araçlarını kullandığım en sevdiğim anlardan biri, oldukça aşina olmadığım bir dil olan GLSL'de oldukça karmaşık bir animasyonlu degrade animasyon oluşturmama yardımcı olduğu zamandı. Yakın tarihli bir projede tasarımcılarımız, 3 boyutlu bir nesne üzerinde yükleme durumu olarak animasyonlu bir degrade geliştirdi. Konsepti gerçekten beğendim ve müşterilerimize benzersiz ve heyecan verici bir şey sunmak istedim.sorun: Uygulamak için yalnızca iki günüm vardı ve GLSL'nin oldukça dik bir öğrenme eğrisi var. Yine bir yapay zeka aracı (bu durumda ChatGPT) işe yaradı ve ondan benim için bir tuval ve çok basit bir animasyonlu renk gradyanı oluşturan bağımsız bir HTML dosyası oluşturmasını istemeye başladım. Adım adım, iyi bir sonuç elde edene kadar yapay zekaya daha fazla ustalık katmasını istedim, böylece gölgelendiriciyi gerçek kod tabanıma entegre etmeye başlayabilecektim. Sonuç: Müşterilerimiz son derece mutluydu ve yapay zeka sayesinde karmaşık bir özelliği kısa sürede teslim ettik. Test Yazma Deneyimlerime göre, uygun birim ve entegrasyon testlerini sürekli olarak yazmak ve sürdürmek için projeler üzerinde nadiren yeterli zaman oluyor ve bunun da ötesinde, çoğu geliştirici test yazma görevinden pek hoşlanmıyor. Yapay zeka yardımcınızdan sizin için testler ayarlayıp yazmasını istemek tamamen mümkündür ve çok kısa bir sürede yapılabilir. Elbette bir geliştirici olarak siz de testlerinizin uygulamanızın kritik bölümlerini dikkate aldığından ve mantıklı test ilkelerini takip ettiğinden emin olmalısınız, ancak testlerin yazımını yapay zeka yardımcımıza "dış kaynaklardan" sağlayabilirsiniz. Örnek istem: "Jest'i kullanarak bu işlev için birim testleri yazın. Mutlu yolu, uç durumları ve hata modlarını ele alın. Her testin neden var olduğunu açıklayın."
Hatta test gurusu Kent C. Dodds'un en iyi test uygulamalarını aşağıdaki gibi temsilcinize kılavuz olarak iletebilirsiniz:
İç Takımlar Daha önce bahsedilen gölgelendirici örneğine biraz benzer şekilde, yakın zamanda bir kod tabanındaki kod çoğaltmasını analiz etme ve yeniden düzenlemeden önce ve sonra karşılaştırma yapma göreviyle görevlendirildim. Dosyaları manuel olarak karşılaştırmanın zaman alıcı yoluna gitmek istemiyorsanız kesinlikle önemsiz bir görev değildir. Copilot'un yardımıyla kod çoğaltmayı benim için analiz eden, çıktıyı bir tabloda düzenleyip sıralayan ve bunu Excel'e aktaran bir komut dosyası oluşturdum. Daha sonra bunu bir adım daha ileri götürdüm. Kod yeniden düzenlememiz tamamlandığında, aracıya mevcut Excel sayfamı temel olarak almasını, mevcut çoğaltma durumunu ayrı sütunlara eklemesini ve deltayı hesaplamasını istedim. Uzun Zaman Önce Yazılan Kodu Güncelleme Geçenlerde eski bir müşterim bana ulaştı, çünkü zamanla web sitesindeki bazı özellikler artık düzgün çalışmıyordu. İşin püf noktası: Web sitesi neredeyse on yıl önce oluşturulmuştu ve JavaScript ile SCSS, requireJS gibi oldukça eski derleme araçlarını kullanıyordu ve kurulum, Node.js'nin 2025 MacBook'umda bile çalışmayan daha eski bir sürümünü gerektiriyordu. Tüm derleme sürecini elle güncellemek günlerimi alırdı, bu yüzden AI temsilcisine şu soruyu sormaya karar verdim: "JS ve SCSS derleme sürecini Vite gibi yalın bir 2025 yığınına güncelleyebilir misiniz?" Kesinlikle öyle oldu ve temsilciyle yaklaşık bir saat süren iyileştirmelerden sonra SCSS ve JS yapımı Vite'a geçirdim ve gerçek hata düzeltmeye odaklanabildim. Derleme sürecinizde bu tür bütünleşik değişiklikler yaparken çıktıyı ve derlenmiş dosyaları doğru şekilde doğruladığınızdan emin olun. Özetleme ve Taslak Hazırlama Tüm son kod değişikliklerinizi bir taahhüt mesajı için tek bir cümlede özetlemek mi istiyorsunuz, yoksa uzun bir taahhüt listeniz mi var ve bunları üç madde işaretinde özetlemek mi istiyorsunuz? Sorun değil, yapay zekanın halletmesine izin verin, ancak lütfen düzeltmeleri yaptığınızdan emin olun. Örnek bir istem, bir insana mesaj göndermek kadar basittir: "Lütfen son değişikliklerimi kısa ve öz maddelerle özetleyin". Buradaki tavsiyem, yazarken GPT'yi dikkatli kullanmanız olacaktır ve kodda olduğu gibi, lütfen göndermeden veya göndermeden önce çıktıyı kontrol edin. Öneriler ve En İyi Uygulamalar İsteme Yapay zeka kullanmanın pek de bariz olmayan faydalarından biri, istemleriniz ne kadar spesifik ve özelleştirilmiş olursa çıktının da o kadar iyi olmasıdır. Bir yapay zeka temsilcisine yönlendirme süreci, bizi yazmadan ve kodlamadan önce gereksinimlerimizi mümkün olduğunca spesifik bir şekilde formüle etmeye zorlar. Bu nedenle, genel bir kural olarak, yönlendirmelerinizde mümkün olduğunca spesifik olmanızı önemle tavsiye ederim. Remix'in ortak yazarı Ryan Florence, ilk isteğinizi şu cümleyle bitirerek bu süreci iyileştirmenin basit ama güçlü bir yolunu öneriyor: “Başlamadan önce bana herhangi bir sorunuz var mı?”
Bu noktada yapay zeka genellikle, özel amacınızı açıklığa kavuşturabileceğiniz yararlı sorularla geri döner ve aracıya, göreviniz için size daha özel bir yaklaşım sunması konusunda rehberlik eder.
Sürüm Kontrolünü Kullanın ve Sindirilebilir Parçalarda Çalışın Git gibi sürüm kontrolünü kullanmak, yalnızca tek bir kod tabanında ekip olarak işbirliği yaparken kullanışlı olmakla kalmaz, aynı zamanda size birAcil bir durumda geri dönülebilecek sabit puanlara sahip bireysel katılımcı. Belirleyici olmayan doğası nedeniyle, yapay zeka bazen hileli hareket edebilir ve elde etmeye çalıştığınız şey için yararlı olmayan değişiklikler yapabilir ve sonunda işleri onarılamaz şekilde bozabilir. Çalışmanızı birden fazla işleme bölmek, işlerin ters gitmesi durumunda geri dönebileceğiniz istikrarlı noktalar oluşturmanıza yardımcı olacaktır. Takım arkadaşlarınız da size teşekkür edecek, çünkü kodunuzu anlamsal olarak iyi yapılandırılmış parçalara bölündüğünde kodunuzu gözden geçirmek daha kolay olacak. İyice İnceleyin Bu daha çok genel bir en iyi uygulamadır, ancak bence geliştirme çalışmaları için yapay zeka araçlarını kullanırken daha da önemli hale geliyor: Kodunuzu ilk eleştiren kişi olun. Tıpkı başka birinin kodunu gözden geçirdiğiniz gibi, değişikliklerinizi satır satır gözden geçirmek için biraz zaman ayırdığınızdan emin olun ve çalışmanızı yalnızca kendi öz incelemenizi geçtikten sonra gönderin. "Şu anda benim için iki şey doğru: Yapay zeka ajanları muhteşem ve büyük bir üretkenlik artışı sağlıyor. Ayrıca beyninizi kapatıp tamamen bırakırsanız devasa makinelere dönüşüyorlar."— Armin Ronacher, blog yazısında Ajan Psikoz: Deliriyor muyuz?
Sonuç ve Eleştirel Düşünceler Bana göre yapay zeka kodlama araçları, geliştiriciler olarak verimliliğimizi günlük olarak artırabilir ve daha fazla planlama ve üst düzey düşünme için zihinsel kapasitemizi serbest bırakabilir. Bizi arzuladığımız sonucu titiz ayrıntılarla ifade etmeye zorluyorlar. Herhangi bir yapay zeka zaman zaman halüsinasyon görebilir, bu da temel olarak kendinden emin bir tonda olduğu anlamına gelir. Bu nedenle özellikle şüpheye düştüğünüz durumlarda mutlaka kontrol ve test yapın. Yapay zeka sihirli bir değnek değil ve inanıyorum ki bir geliştirici olarak mükemmelliğin ve sorunları çözme yeteneğinin modası asla geçmeyecek. Kariyerlerine yeni başlayan geliştiriciler için bu araçlar işin çoğunu onlar adına yapmak oldukça cazip gelebilir. Burada kaybolabilecek şey, hata ayıklama ve çözmesi zor olan hatalar ve sorunlar üzerinde yapılan çoğu zaman yorucu ve acı verici çalışmadır, diğer adıyla "eziyet". Cursor AI'den Lee Robinson bile bir gönderisinde bunu sorguluyor:
Yapay zeka kodlama araçları hızlı bir şekilde gelişiyor ve bundan sonra olacaklar için heyecanlıyım. Umarım bu makaleyi ve ipuçlarını faydalı bulmuşsunuzdur ve bunlardan bazılarını kendiniz denemek için heyecanlanıyorsunuzdur.
