Devin ile Yazılım Geliştirme: Dikey Dilim Yayına Alma (Bölüm 2)

Tekrar hoş geldiniz! Bu serinin ilk eğitiminde Devin, eski fp-ts-exercises depomu tozlarından arındırdı ve şık bir bağımlılık yükseltme PR’ı açtı. Bu ikinci bölümde, zorluk seviyesini artırıyor ve uçtan uca özellikler inşa ediyoruz.

Devin serisindeki tüm eğitimlere buradan ulaşabilirsiniz:

1. Kurulum ve İlk Pull Request (Bölüm 1)
2. Devin ile Bir Dikey Dilimi Yayına Alma (Bölüm 2) 
3. Entegrasyonlar, Testler ve CI/CD (Bölüm 3) 
4. Güvenlik, Dağıtım, Bakım (Bölüm 4)

Bu ikinci bölümün sonuna geldiğinizde elinizde şunlar olacak:

• Öğrenenlerin tarayıcıda kod düzenlediği bir Next.js 14 oyun alanı;
• Gerçek zamanlı olarak yeşile (ya da kırmızıya) dönen Vitest testleri; ve
• İlerlemeyi, tarayıcıdaki anonim bir UUID dışında hiçbir şeye ihtiyaç duymadan kaydeden bir SQL veritabanlı NestJS arka ucu.

Bu süreçte, Devin’in kendi görev listesini oluşturmasına izin verecek, onun ön uç ve arka uç işlerini aynı anda götürmesini izleyecek ve yapılandırma aksiliklerinde devreye gireceğiz. Nerede ACU harcadığımı (ve tasarruf ettiğimi), elde düzeltmelerimi ve oturumları nasıl verimli tuttuğumu göstereceğim.

Özet ve Ön Koşullar

Bu eğitim serisi boyunca, eskiden sahipsiz kalmış olan fp-ts egzersiz depom üzerinde çalışıyoruz.

Proje, TypeScript’te fonksiyonel programlama kavramlarını (Option, Either vb.) öğretmeyi amaçlayan küçük zorluklardan oluşuyor. Şu anda "kopyala ve çalıştır" tarzında bir repo: öğrenenler depoyu çekiyor, dosyaları yerelde düzenliyor ve testleri kendi terminallerinde çalıştırıyor.

Hedefimiz, bu egzersizleri, insanların bir açıklamayı okuyabildiği, sayfa içi bir editörde kodu değiştirebildiği ve testlerin anında geçtiğini (ya da başarısız olduğunu) gördüğü tarayıcı tabanlı, etkileşimli bir oyun alanına dönüştürmek. Öğrenenler ayrıca ilerlemelerini kaydetmek için oturum açma olanağına da sahip olacak.

İlk bölümde neler başardık

İlk eğitimde şunları yaptığımızı hatırlayın:

• Eski fp-ts deposunu modernize ettik: en güncel bağımlılıklar, linting, tip kontrolleri.
• Devin’i GitHub’a bağladık ve temiz bir pull request açabildiğini kanıtladık.

İkinci bölüm için gereken yerel araçlar

Bu ikinci eğitim için şunlara ihtiyacımız olacak:

• Node 20+ ve npm 10 (yerleşik workspaces desteğiyle gelir).
• PostgreSQL konteyneri çalıştıran Docker (ya da yerel bir PostgreSQL kurulumu).

Önerilen Devin ayarları

Devin için şu ayarları öneriyorum:

• Her oturum için 5 ACU’luk yumuşak bir üst sınır belirleyin Ayarlar > Kullanım & sınırlar bölümünden; her faz için yeni bir oturum açacağız.
• Devin takılırsa duraklatmak veya dürtmek için timelapse sekmesini görünür tutun.

Oyun Planını Devin’e Yazdırın

Planlama kapasitesini test ederek başlamanın ilginç olacağını düşündüm. Bir istem oluşturdum ve Devin’den (şu anda Beta’da ücretsiz olan) “Sor” özelliğini kullanarak bugün yapacağımız işleri planlamama yardım etmesini istedim.

İstem:

Mevcut fp-ts-exercises Node + TypeScript depomu (şu anda kopyala-çalıştır CLI egzersizleri) ilerlemeyi takip eden tarayıcı tabanlı bir öğrenme platformuna dönüştürmek istiyorum. 

Hedef deneyim: 

- Öğrenenler bir Next.js web uygulamasını açar, bir egzersiz seçer, tarayıcıda kodu düzenler ve Vitest testlerinin anında geçip geçmediğini görür. 

- İlerleme (tamamlanan slug’lar) sunucu tarafında saklanır ve sonraki ziyaretlerde yeniden yüklenir; ancak henüz kullanıcı hesabı eklemiyoruz (tarayıcıda saklanan anonim bir UUID kullanın). 

Yöneldiğim teknoloji tercihleri: 

- Frontend: Next.js 14 (React 18, App Router) 

- Kod editörü & çalıştırıcı: Sandpack + @vitest/browser 

- API: @nestjs/graphql (Apollo Driver) ile NestJS 13 

- Veritabanı: PostgreSQL ile Prisma 5 

- Çalışma alanı: düz npm workspaces (apps/web, apps/api, packages/exercises) 

Bu dikey dilimi hayata geçirecek adım adım bir uygulama planı (görev listesi) önerin. Her görev için göreli ACU maliyetini tahmin edin ve uzun süren adımları (ör. büyük taşımalar veya ağır bağımlılık kurulumları) işaretleyin.

Devin, her biri için ACU tahminleri olan altı aşamalı bir görev listesi döndürdü ve “ağır bağımlılık kurulumu” adımlarını işaretledi.

Devin’in yanıtı:

Faz 1: Çalışma Alanı Kurulumu (2–3 ACU)

• npm çalışma alanı yapısını başlat (1 ACU)
• apps/web, apps/api ve packages/exercises dizinlerini oluştur
• Kök package.json’ı çalışma alanı tanımlarıyla yapılandır
• Mevcut egzersiz dosyalarını packages/exercises/src/’ye taşı
• Next.js 14 frontend’i kur (1–2 ACU — Uzun süren: bağımlılık kurulumu) apps/web içinde App Router ile Next.js’i başlatTypeScript ve Tailwind CSS’i yapılandırTemel yönlendirme yapısını kur

Faz 2: Egzersiz Paketine Geçiş (3–4 ACU)

• Egzersiz içeriğini paylaşılan pakete çıkar (2 ACU)
• packages/exercises oluştur ve egzersiz metaverisini çıkar
• Mevcut egzersiz dosyalarını ayrıştırarak şunları çıkar:
• Talimatlar
• Başlangıç kodu
• Çözümler
• Egzersiz yapısı için TypeScript arayüzlerini tanımla
• Egzersiz keşif sistemini uygula (1–2 ACU)
• Dosya sistemi tarayıcısı oluştur (exercise.js:17–28’deki fs.readdirSync mantığı gibi)
• Egzersiz metaverisini dışa aktar: title, description, difficulty, tests

Faz 3: Backend API (4–5 ACU)

• GraphQL ile NestJS API’si kur (2 ACU — Uzun süren: bağımlılık kurulumu)
• apps/api içinde NestJS projesini başlat
• Apollo GraphQL sunucusunu yapılandır
• Temel sağlık kontrolü uç noktalarını kur
• Prisma + PostgreSQL’i uygula (2 ACU — Uzun süren: veritabanı kurulumu)
• Şunun için şema tasarla:
• Kullanıcı oturumları
• Tamamlanan egzersizler
• Prisma istemcisini ve göçleri ayarla
• İlerleme takibi için resolver’lar oluştur
• Anonim kullanıcı oturum yönetimi (1 ACU)
• UUID üret ve tarayıcı localStorage’a kaydet
• Kimlik doğrulaması olmadan oturum tabanlı ilerleme kalıcılığını etkinleştir

Faz 4: Frontend Çekirdek Özellikleri (5–6 ACU)

• Egzersiz tarayıcı arayüzü (2 ACU)
• Egzersizleri kategoriye göre listele (option, either, task vb.)
• İlerleme göstergelerini ve tamamlama durumunu göster
• Egzersiz seçimi ve gezinmeyi etkinleştir
• Sandpack kod editörü entegrasyonu (2–3 ACU — Uzun süren: Sandpack kurulumu)
• TypeScript desteğiyle Sandpack’i yapılandır
• Başlangıç kodunu ve fp-ts bağımlılıklarını yükle
• Egzersiz + test dosyaları için dosya sistemini kur
• Vitest tarayıcı çalıştırıcısı entegrasyonu (1 ACU)
• exercise.js:45–47’deki execSync Vitest çağrılarını @vitest/browser ile değiştir
• Gerçek zamanlı test çalıştırma ve sonuç gösterimini etkinleştir

Faz 5: İlerleme Takibi (2–3 ACU)

• İstemci tarafı ilerleme yönetimi (1 ACU)
• GraphQL için Apollo Client’ı kur
• İlerlemesini backend ile senkronize et
• Egzersiz tamamlama tespiti (1–2 ACU)
• exercise.js:48–49’daki mevcut başarı tespit mantığını uyarla
• Test geçince backend ilerleme güncellemelerini tetikle

Faz 6: Cilalama & Dağıtım (2–3 ACU)

• UI/UX iyileştirmeleri (1–2 ACU)
• Duyarlı tasarımı garanti et
• Yüklenme durumları ve hata yönetimi ekle
• Egzersiz talimatlarının gösterimini iyileştir
• Canlıya alma kurulumu (1 ACU)
• Her iki uygulama için Docker’ı yapılandır
• Ortam değişkenlerini yönet
• Veritabanı dağıtımını ayarla

Toplam Tahmini Maliyet: 18–24 ACU

Plan genel olarak oldukça iyiydi. Özellikle altıncı fazda bazı şeyleri değiştirdim; çünkü dağıtımı dördüncü eğitimde ele alacağız.

Faz 1: Çalışma Alanı & Front-End İskeleti

Hedef: npm workspaces’i ayağa kaldırmak, eski dosyaları taşımak ve boş bir Next.js 14 kabuğu başlatmak.ACU tüketimi: 3.66 (planlanan 1–2).Sonuç: Depoda artık /apps/web, paylaşılan packages/exercises ve localhost:3000’de çalışan, Tailwind’e hazır bir Next.js uygulaması var.

İstem

Devin’den, oluşturduğu planın ilk fazını inşa etmesini istedim. Otonom Devin’in “Devin’e Sor” özelliğinde daha önce ne sormuş olabileceğinize dair bir bağlamı yok, bu yüzden ayrı bir istem oluşturup bağlam sağlamanız gerekiyor. 

Bu yazıda tüm istemleri yapıştırmayacağım, ama ilki şöyleydi:

İstem:

Görev: fp-ts-exercises tarayıcı platformu için npm çalışma alanı yapısını ve Next.js frontend’ini başlatBağlam:

Mevcut fp-ts-exercises CLI tabanlı öğrenme sistemimi tarayıcı tabanlı bir platforma çeviriyorum. Şu anki sistemde egzersizler 10-from-either.exercise.ts:1-3’te düzenli ve TypeScript yapılandırması tsconfig.json:88’de, Vitest kurulumu vitest.config.ts:7’de.

Gereksinimler:

• npm çalışma alanı yapısı oluştur:
• Kök package.json içine apps/web, apps/api, packages/exercises için workspace yapılandırması
• Mevcut src/ altındaki egzersiz dosyalarını packages/exercises/src/ altına taşı
• Mevcut dosya adlandırma kuralını koru (.exercise.ts ve .solution.ts)
• apps/web içinde Next.js 14 frontend’i başlat:
• App Router kullan (Pages Router değil)
• tsconfig.json:88’e benzer katı ayarlarla TypeScript’i yapılandır
• Stil için Tailwind CSS ekle
• Egzersiz gezinmesi için temel yönlendirme yapısı oluştur
• Uyumluluk koru:
• Mevcut egzersiz yapısı ve import’ların çalışmaya devam ettiğinden emin ol
• fp-ts bağımlılıklarının çalışma alanı genelinde erişilebilir kalmasını sağla
• Mevcut Vitest yapılandırma kalıplarını koru

Teslimatlar:

• Kökte çalışma alanı yapılandırmalı package.json
• TypeScript ve Tailwind’li apps/web/ altında Next.js uygulaması
• packages/exercises/ altında taşınmış egzersizler
• Temel yönlendirme yapısı (/exercises, /exercises/[category], /exercises/[category]/[slug])

Teknoloji Yığını:

• App Router ile Next.js 14
• TypeScript (strict mode)
• Tailwind CSS
• npm workspaces (yarn/pnpm değil)

Teslim:

• Lint ve typecheck betiklerinin geçtiğinden emin ol
• Değişikliklerinle bir PR oluştur

Sonrasında yazdığım tüm istemler aynı kalıbı izledi: görev vurgusu, bağlam, gereksinimler, teslimatlar, teknoloji yığını ve teslim detayları.

Devin gerçekte ne yaptı

Eylem planına karar vermesi epey sürdü (yaklaşık dört dakika), ama şunları yaptı:

1. Çalışma alanı iskeletini oluşturdu
2. Tüm egzersiz klasörlerini packages/exercises/src altına taşıdı.
3. App Router, TypeScript ve Tailwind ile Next.js 14’ü başlattı.
4. (Dürtmemin ardından) frontend uygulamasına lint ve tip kontrol betikleri ekledi.

ACU maliyeti neden yükseldi

ACU maliyeti şu nedenlerle arttı:

• Ayna zaman aşımından sonra npm install yeniden denemelerinde tam bir dakika döngüye girdi.
• Vim’de q ile, sonra da Ctrl-C ile geliştirici sunucusunu ve süreçleri durdurmaya çalıştı; ikisi de başarısız oldu. Biraz zaman tanıdım ama sonunda iki sefer de manuel müdahale edip süreçleri sonlandırdım. Her ekstra dakika, ekstra ACU demekti ve Devin’in eylemlerini yakından takip etmeseydim bu sorunu çabuk fark edemezdim.

İnsan müdahaleleri ve çıkarılan dersler

İhtiyacım olan düzeltmelerin özeti şöyleydi:

Büyük dosya ağaçlarını elle taşımak daha hızlı ve Devin zaman/görev üzerinden ücretlendirdiği için çok daha ucuz. Klasörleri sürükleyip bıraktım, commit’ledim ve ajanın yeni yapıyı algılamasına izin verdim. Benim değişikliklerimi gayet iyi çekti ve kendi kendine merge yaptı!

Bununla birlikte, ilk istemimde belirtmiş olsam da lint ve tip kontrol betiklerini çalıştırması için onu dürtmem gerekti. Sonunda ikisini de çalıştırdı ama başarısız oldular. Devin yine de bunu başarı saydı ve PR’a devam etti.

Her iki sorunu da yerelde düzelttim, betikleri kendim koştum ve yeni web geliştirme sunucusunu başlatıp amaçlandığı gibi açıldığından emin olduktan sonra commit’i gönderdim.

Faz 2: Egzersizleri Paketleme

Hedef:  Tüm zorluk dosyalarını yeniden kullanılabilir bir packages/exercises paketine çıkarıp her egzersiz için metaveri üretmek.ACU tüketimi:  0.6 (planlanan 2+).Sonuç: Paylaşılan paket, web uygulamasının ve gelecekteki API’nin import { exercises } from '@exercises/registry' ile içe aktarabileceği tiplenmiş metaveriler dışa aktarıyor.

Devin gerçekte ne yaptı

Devin şunları oluşturdu:

• Yapılandırılmış TypeScript arayüzleri: egzersizler, metaveri, kategoriler ve tam katalog için.
• Egzersiz ayrıştırıcı ki şunları yapıyor:
• Metaveriyi kod yorumlarından ve fonksiyon imzalarından çıkarır
• Başlangıç kodunu, çözüm kodunu ve Vitest test durumlarını ayrıştırır
• fp-ts kullanımından etiketleri otomatik üretir
• camelCase adları okunabilir başlıklara dönüştürür
• Egzersiz keşif sistemi ki şunları yapıyor:
• Dosya sisteminde .exercise.ts ve .solution.ts çiftlerini tarar
• Slug tabanlı bir katalog oluşturur (ör. option-01)
• Performans için önbellekle birlikte egzersizleri kategoriye göre düzenler
• Kullanışlı dışa aktarımlar: egzersizleri ve kategorileri sorgulamak için:
• getExercises(), getExerciseBySlug(), getExercisesByCategory(), getCategories(), getCategoryBySlug()

Devin neden bütçenin altında bitirdi

Devin ACU maliyetini düşük tutmayı başardı — işte nasıl:

• Ağır kurulumlar ya da ağ çağrıları yoktu
• Dosya taşımaları basitti; Devin, kopyala-yapıştır ve diff yerine git mv kullandı (ucuz)
• Metaveri üretimi saf TypeScript’ti; planlaması ve çalıştırması hızlıydı

İnsan müdahaleleri

Bu kez hiç yok!

Geçen seferden ders çıkararak, Devin’in dalını checkout edip betikleri yerelde koştum. Her şey derlendi ve kayıt dışa aktarımları temiz tip tanımları sunuyor; bu da onu UI ve bir sonraki aşamada inşa edeceğimiz API için kusursuz bir girdi haline getiriyor.

Faz 3: NestJS + GraphQL API

Hedef: Egzersiz ilerlemesini GraphQL üzerinden açığa çıkaran ve verileri PostgreSQL’de Prisma ile kalıcı kılan bir NestJS 13 servisi ayağa kaldırmak.ACU tüketimi: 4.2 (planlanan 4).Sonuç: apps/api localhost:4000/graphql’de açılıyor. Anonim bir oturum kimliği ile anahtarlanan ilerleme kayıtlarını sorgulayabilir ve mutasyona uğratabilirsiniz.

Devin gerçekte ne yaptı

Üçüncü faz için Devin şunları yaptı:

1. apps/api içinde TypeScript ve Apollo GraphQL ile tam bir NestJS API oluşturdu
2. PostgreSQL’i Prisma ORM ile entegre etti ve şemayı Session ve CompletedExercise modelleriyle kurdu
3. UUID’ler kullanarak anonim oturum yönetimini uyguladı (kimlik doğrulama gerekmez)
4. Oturum oluşturma/doğrulama, egzersiz sorguları ve ilerleme takibi için GraphQL resolver’ları inşa etti
5. Veri keşfi için backend’i paylaşılan egzersiz paketine (packages/exercises) bağladı
6. Next.js frontend’iyle iletişimi desteklemek için CORS’u yapılandırdı
7. GraphQL şeması ile mevcut TypeScript arayüzleri arasında tip uyumluluğunu sağladı
8. Geliştirme betiklerini, veritabanı göç akışını ve Prisma Studio entegrasyonunu ayarladı

Devin’in tökezlediği yerler

Üçüncü fazda karşılaştığım sorunlar ve yaptığım düzeltmeler şunlardı:

Çıkarılan dersler

Çıkardığım sonuçlar:

• Yapılandırma vs. kod: Framework şablonu oturduğunda Devin çok iyi; ama bağımlılık sorunlarını teşhis etmek hâlâ insan gözü gerektiriyor.
• Daima yerelde çalıştırın: Makinemde zaten yerel bir PostgreSQL veritabanı oluşturmuştum ve PR talimatları Prisma göçünü çalıştırıp geliştirme ortamını başlatmak için net ve kolaydı (aşağıdaki görsele bakın). Devin’in yorumu API’yi yerelde çalıştırmayı başardığını söylese de, npm run dev reflect-metadata eklenene dek çöküyordu.

• Devin PR yorumlarını iyi yönetiyor. PR’da, API’yi yerelde çalıştırmayı denediğimi ve hata aldığımı Devin’e açıklayan bir yorum yazdım. Hemen küçük bir göz emojisi verdi ve oturum hatayı düzeltmek için kendiliğinden devam etti; birkaç dakika sonra bir düzeltme gönderildi.

• Gizli dosyaları her zaman kontrol edin: Devin, içinde sahte bir kullanıcı adı ve parola olan bir DATABASE_URL değişkeniyle bir .env dosyası commit’lemişti. Yerelde çektikten sonra kullanıcı adı ve parolayı yerel veritabanı kimlik bilgilerimle değiştirdim, dosyayı git takibinden çıkardım ve .gitignore’a eklediğimden emin oldum. Gizlileri güvenli şekilde nasıl yöneteceğimizi sonraki eğitimlerde göreceğiz.

Faz 4: Sandpack Oyun Alanı & Canlı Testler

Hedef: Öğrenenlere, fp-ts çözümlerini ve Vitest kontrollerini gerçek zamanlı çalıştıran bir tarayıcı editörü sunmak.ACU tüketimi: 7.2 (planlanan 3-4).Sonuç: /exercises/option-01 sayfasını ziyaret etmek, solda Sandpack editörü, sağda test tüneli olan bölünmüş bir görünüm açıyor ve tüm spesifikasyonlar geçtiği anda bir başarı mesajı beliriyor.

Devin gerçekte ne yaptı

Dördüncü faz için Devin’in yaptıkları:

• Dinamik kategori ve slug desteğiyle egzersiz listeleme ve gezinme sayfaları oluşturdu
• TypeScript, fp-ts ve gerçek zamanlı dosya sistemi desteğiyle Sandpack editörünü entegre etti
• CLI test çalıştırıcısını tarayıcı içi Vitest ve canlı geri bildirimle değiştirdi
• Oturum tabanlı ilerleme takibi için frontend’i backend’e Apollo Client ile bağladı
• Yüklenme durumları ve hata yönetimiyle duyarlı bir UI uyguladı

Devin fazladan ACU’ları nerede yaktı

Bu fazda Devin beklenenden fazla ACU harcadı — nedenleri:

Çıkarılan dersler

Bu kez çıkardığım sonuçlar:

• Sessizce izlemek = para yakmak. Timelapse sekmesini açık tutun; Devin döngüye girerse dürtün veya duraklatın.
• Ölü kodu erken silin. Devin, siz söylemedikçe bayat kodu pek silmiyor. Daha önce dosyaları taşırken onlara açıkça silmesini söylememiştim; böylece birden fazla giriş noktasına sahip olduk ve bu da bu fazda zavallı Devin’i fazlasıyla şaşırttı.

Devin burada zaman aldı. Aynı sorunları kaydetmeye çalışarak yineledi durdu; backend ve frontend’i düzgün bağlamadı, değişiklikler yaptı, sunucuları yeniden başlattı, tarayıcıda çalışıp çalışmadığını kontrol etti, vs. Sanırım bu da sıradan geliştirme işi gibi…

Artık işlevsel bir uygulamamız var. Hem API hem de web sunucularını başlattım, localhost’a gittim, iskelet fonksiyonu düzenledim, Kaydet’e bastım ve test panelinin kırmızıdan yeşile döndüğünü izledim. Sonra fark ettim ki işin sadece yarısı yapılmış; her egzersiz sayfasında ilk egzersizin testi ve çözümü hardcode edilmişti. Bunu belirttim ve birkaç tur daha sonra, bunu düzeltebildi ve düzeltmelerini gönderdi.