Sonunda elinde ne oluyor

Kendi konunda küçük bir web uygulaması. Bir liste tutuyor ve o listeden senin için tek bir şey hesaplıyor, kitaplarını girip sırada hangisini okuyacağını görmek ya da tatil masraflarını girip kimin kime ne kadar borçlu olduğunu bulmak gibi. Tek liste ve tek hesap az görünebilir ama iki saatte canlıya çıkacak bir uygulamaya sığan da bu kadarı.

Uygulama Vercel'de kendi adresinde duruyor ve telefondan açılır. Repo'n, yani uygulamanın dosyalarını ve her değişikliğin geçmişini tutan klasör public. Bu yüzden son PR'ının, yani ajanın yaptığı değişikliği gösteren ve onayını bekleyen GitHub sayfasının linkini attığın kişi neyin değiştiğini de görebilir. Adreste de PR'da da senin anlatmana gerek kalmıyor, karşındaki açıp kendisi bakıyor.

Neden bu sırayla

İlk adım şablonu, yani çalışan bir örnek uygulamayla gelen hazır başlangıç kodunu kendi hesabına alıp Vercel'e bağlamak. Uygulama henüz şablonun örneği ama adresi senin ve sonraki her merge, yani kabul ettiğin her PR bu adresi güncelliyor. Canlıya çıkmak bu yüzden en başta, böylece bir değişikliğin nereye gittiğini daha ilk değişiklikten önce görmüş olursun.

Ardından ajan üç soru sorup ne yapacağını SPEC.md adında tek bir sayfaya yazıyor ve onayını bekliyor. Yanlış anlaşılan bir şeyi o sayfada düzeltmek, aynı yanlışı koddan sökmekten çok daha kolay. Kod en son geliyor, o da testten sonra.

Derslerde bakacağın yerleri tek tek gösteriyorum, üçüncü derste test çıktısını, beşincide PR'daki Files changed sekmesini. Testi de ajan yazdığı için yeşil çıktıya bakıp geçme, testin adı senin istediğin şeyi söylüyor mu ona da bak.

Uygulamanı canlıya al

Bu adım için iki ücretsiz hesap yetiyor. GitHub hesabını github.com'da açıyorsun, Vercel'e de vercel.com'da Continue with GitHub diyerek giriyorsun.

  • Şablonun GitHub sayfasını aç.
  • Use this template butonuna bas ve Create a new repository'yi seç.
  • Repo'ya bir isim ver, örneğin harcamalarim.
  • Görünürlük olarak Public'i seç.
  • Create repository'ye bas.
  • vercel.com'da Add New'e, ardından Project'e bas.
  • Listeden yeni repo'nu bul ve Import de.
  • Hiçbir ayarı değiştirmeden Deploy de.

Build bitince Vercel sana https://<isim>.vercel.app gibi bir adres veriyor. Bundan sonra uygulamanın canlı adresi bu.

İkinci dersten önce

Bunlar ikinci derste lazım. Hepsi bir kerelik ve Claude Code dışında ücretsiz.

  • nodejs.org'dan Node'un LTS sürümünü kur. Şablon 24 ya da üstünü istiyor.
  • Terminale npm install -g pnpm yaz.
  • git'i kur. Mac'te hazır geliyor, Windows'ta git-scm.com'dan iniyor.
  • Terminale git config --global user.name "Adın Soyadın" yaz.
  • Ardından git config --global user.email "<adres>" yaz. Adres olarak github.com/settings/emails sayfasında noreply.github.com ile biten satırı kullan.
  • GitHub CLI'ı cli.github.com'dan kur.
  • Terminale gh auth login yaz ve GitHub hesabına bağlan.
  • Claude Code için Mac'te Terminal'e curl -fsSL https://claude.ai/install.sh | bash, Windows'ta PowerShell'e irm https://claude.ai/install.ps1 | iex yaz. Sonra yeni bir terminal açıp claude --version yaz, bir sürüm numarası görüyorsan kurulum tamam. Çalışması için bir Claude aboneliği ya da Anthropic API anahtarı gerekiyor.

İki git config komutu, ileride atılacak commit'lerin GitHub'da senin adınla görünmesi için. Komutları Mac'te Terminal, Windows'ta PowerShell uygulamasına yazıp Enter'a basıyorsun.

Kolay yapılan hata

Repo'yu açarken Private seçersen uygulama yine çalışır ama paylaşacağın PR linkini açan kişi bir hata sayfası görür, çünkü private bir repo'yu yalnız sen görebilirsin.

Canlı adres de repo adınla aynı olmayabilir. O ad Vercel'de başkasına aitse adresin sonuna bir ek geliyor, o yüzden adresi tahmin etme ve Vercel'in gösterdiği yerden kopyala.

Küçük görev

Vercel'in verdiği adresi telefonunda aç. Şablonun örnek uygulaması açılıyorsa birinci ders tamam.