CLAUDE CODE + REA · 01 / 24

BİR FİKİRDEN ÇALIŞAN WEB SİTESİNE

Bu derste bir web sitesini yalnızca tarif etmekle kalmayacağız. Claude Code kurulumundan başlayıp REA bağlantısını kuracak, örnek bir sayfanın yapısını inceleyeceğiz. Sonra kendi dosyalarımızı oluşturup sonucu tarayıcıda ve telefon genişliğinde kontrol edeceğiz. Hedefimiz, nasıl yapıldığını anlayabildiğin çalışan bir örnek.

CLAUDE CODE + REA · 02 / 24

SEN HEDEFİ ANLATIRSIN. AJAN UYGULAR.

Claude Code, proje dosyalarıyla çalışan bir yapay zekâ aracıdır. Sen hedefini söylersin; o dosyaları okuyabilir, kod değiştirebilir ve komut çalıştırabilir. Ekrandaki terminal çizimlerini komutları kolay okumak için sadeleştirdik. Her aşamada sonucu inceleyerek ilerleyeceğiz.

CLAUDE CODE + REA · 03 / 24

ÖNCE ARAÇLARI HAZIRLAYALIM.

Bir terminale, internet bağlantısına ve Claude Code erişimi sağlayan bir hesaba ihtiyacımız var. Windows örneğinde PowerShell kullanacağız. Claude Code için yerel kurulum yolunu seçiyoruz. Birazdan ekleyeceğimiz REA ise Node ve npm gerektiriyor. Bu ikisini aynı şey sanmadan ayrı ayrı doğrulayacağız.

CLAUDE CODE + REA · 04 / 24

WINDOWS’TA CLAUDE CODE KURULUMU

Windows’ta PowerShell’i açalım. Ekrandaki winget komutu, Anthropic’in Claude Code paketini kurar. Paket adı aynı görünmeli. Winget’in gösterdiği bilgileri okuyup kurulumu tamamla. Ardından yeni bir terminal aç. Bu yöntemde güncelleme de winget üzerinden yapılır; güncelleme komutunu ekranda ayrıca gösteriyoruz.

CLAUDE CODE + REA · 05 / 24

REA İÇİN NODE.JS VE NPM

REA için Node sitesinden desteklenen bir sürüm kuruyoruz. Bu derste yirmi dört nokta on bir veya üzeri bir yirmi dört sürümünü kullanabilirsin. Terminalde node tire v ve npm tire v komutlarıyla sürümleri gör. Sayıların görünmesi, komutların bu terminalden erişilebilir olduğunu doğrular.

CLAUDE CODE + REA · 06 / 24

MAC VE LINUX İÇİN AYRI KOMUT

Mac veya Linux kullanıyorsan resmî belgelerdeki yerel kurulum komutunu seç. Windows için PowerShell komutu farklıdır. Ekranda iki yolu ayrı kutularda görüyorsun. Kullandığın sisteme ait satırı çalıştır; ikisini birden çalıştırma. Yerel kurulum ile paket yöneticisinin güncelleme davranışı da farklı olabilir.

CLAUDE CODE + REA · 07 / 24

KURULDU MU? ÇIKTIYI KONTROL ET.

Kurulumdan sonra yeni terminalde claude çift tire version yaz. Bir sürüm numarası görmelisin; buradaki numara bilgisayarına göre değişir. Komut bulunamazsa önce terminali yeniden aç, sonra resmî PATH adımlarını kontrol et. Claude çalışıyorsa doctor komutu tanı bilgilerini gösterir. Hatanın tam metnini sakla.

CLAUDE CODE + REA · 08 / 24

KENDİ PROJE KLASÖRÜNDE BAŞLA.

Şimdi çalışma alanını hazırlayalım. mkdir benim sitem komutuyla klasörü oluştur, cd komutuyla içine gir ve claude yazarak oturumu başlat. Terminalde hangi klasörde bulunduğunu kontrol et. İlk isteğinde yalnızca bu projede çalışmasını ve dosya oluşturmadan önce planını açıklamasını söyle.

CLAUDE CODE + REA · 09 / 24

GİRİŞ YAP. KULLANIM YOLUNU SEÇ.

İlk oturumda giriş adımlarını takip et. Uygun Claude aboneliğiyle veya Claude Console hesabıyla çalışabilirsin. Console tarafında API kullanımı ayrıca ücretlenir. Ücretsiz bir sohbet hesabının tek başına yeterli olduğunu varsayma. Girişten sonra hangi hesapla ve hangi kullanım koşullarıyla çalıştığını doğrula.

CLAUDE CODE + REA · 10 / 24

ONAYI OKUYARAK VER.

Claude’un izin davranışı seçilen moda ve kayıtlı kurallara bağlıdır. Her dosya okumada ya da her adımda soru soracağını varsayma. Bir onay penceresi geldiğinde komutu ve hedef dosyayı oku. Bu ders için dar kapsamla ilerle. Şifrelerini ve gizli anahtarlarını örnek promptlara ekleme.

CLAUDE CODE + REA · 11 / 24

REA NE EKLİYOR?

REA, ajanı inceleme araçlarına bağlayan bir projedir. Web tarafında sayfa yapısı, betikler, ağ gözlemleri ve istenen ekran görüntüleriyle çalışabilir. Kaynak depomuz ekrandaki morluto, rea adresi. REA’yı tek tıkla kusursuz site kopyalayan bir araç olarak düşünme; inceleme bulgularını uygulamaya dönüştürmeye yardımcı olur.

CLAUDE CODE + REA · 12 / 24

REA’YI AJANINA BAĞLA.

Proje terminalinde ekrandaki npx rea agents setup komutunu çalıştır. Kurulumda Claude Code’u seç, değişecek yapılandırma yollarını oku ve uygun planı onayla. Tamamlanınca Claude Code oturumunu yeniden başlat. Araçların bağlandığını kontrol et. Bu adım yalnızca dosya indirmekten ibaret değildir; ajan bağlantısı da kurulmalıdır.

CLAUDE CODE + REA · 13 / 24

ÖNCE NE GÖRDÜĞÜNÜ BELGELE.

İnceleme isteğini küçük tutalım. Kendi örnek sayfamızı aç; menüyü, ana tanıtım alanını, kartları ve mobil davranışı REA ile incelemesini iste. Gözlemleri ekran görüntüsüyle desteklesin, ulaşamadığı noktaları ayrıca yazsın. Bir adres vermek, ajanın o sayfayı gerçekten açıp doğruladığı anlamına gelmez.

CLAUDE CODE + REA · 14 / 24

SAYFAYI PARÇALARA AYIR.

Ekrandaki örnek siteyi üç parçaya ayırıyoruz. Üstte gezinti, ortada büyük bir başlık ve çağrı düğmesi, altta hizmet kartları var. Önce bu düzeni tarif et. Başkasının markasını veya içeriğini taşımak yerine kendi metinlerini kullan. Görünüm ile sunucuda çalışan işlevlerin farklı şeyler olduğunu unutma.

CLAUDE CODE + REA · 15 / 24

HEDEFİ AÇIKÇA YAZ.

Şimdi üretim isteği: İncelediğimiz düzende, Kuzey Atölye için tek sayfalık bir site oluştur. Kendi metinlerini yaz; menü, tanıtım, hizmetler ve iletişim bağlantısı olsun. HTML, CSS ve JavaScript kullan. Masaüstünde ve telefonda kontrol et; çalıştırma adımlarını açıkla. Böylece yalnızca güzel bir görüntü istememiş oluyoruz.

CLAUDE CODE + REA · 16 / 24

BÜYÜK İŞİ KÜÇÜK ADIMLARA BÖL.

Önce kısa bir plan iste: sayfa iskeleti, tasarım kuralları, sonra etkileşimler. İlk sürümde çalışan küçük bir sonuç görmek daha kolaydır. Ajan bir işlem yaptığını söylüyorsa oluşan dosyayı ve çıktıyı kontrol et. Hata mesajını gizleyip tamamlandı demesini değil, eksikleri açıkça raporlamasını iste.

CLAUDE CODE + REA · 17 / 24

ÜÇ DOSYA. ÜÇ AYRI GÖREV.

Örneğimizde üç dosya var. İndeks HTML sayfanın bölümlerini taşır; stil CSS görünümü düzenler; skript JavaScript mobil menüyü yönetir. Ayrıca CLAUDE nokta MD dosyasına proje kurallarını yazabilirsin. Örneğin Türkçe içerik, erişilebilir menü ve dış servise bağlı olmayan bir ilk sürüm. Dosyaları açıp isimlerini kontrol et.

CLAUDE CODE + REA · 18 / 24

SONUCU GERÇEKTEN AÇ.

Bu dersteki basit örneği indeks HTML dosyasını tarayıcıya açarak görebilirsin. Ancak her proje çift tıklamayla çalışmaz. Bir geliştirme sunucusu gerekiyorsa ajandan doğru komutu ve açılacak yerel adresi iste. Terminalde hata olmadığını gör, sonra sayfayı aç. Sadece oluşturuldu mesajını başarı sayma.

CLAUDE CODE + REA · 19 / 24

“GÜZEL OLMADI” YERİNE ÖLÇÜLÜ İSTEK.

Revizyonu somut yaz: ana başlığı daha okunur yap, kartlar arasındaki boşluğu artır ve düğmenin kontrastını düzelt. Referansla sonucu aynı genişlikte karşılaştır. Bir değişiklik diğer bölümü bozduysa bunu da bildir. Her revizyondan sonra aynı kontrolleri tekrarla; böylece ilerlemeyi gerçekten görebilirsin.

CLAUDE CODE + REA · 20 / 24

TELEFONDA DA ÇALIŞIYOR MU?

Şimdi telefon genişliğine geçiyoruz. Yazılar ekrandan taşmamalı; kartlar uygun biçimde alt alta gelmeli. Menü düğmesine basıp açılıp kapandığını dene. Bağlantı seçildiğinde menü de kapanmalı. Masaüstündeki güzel görüntü, mobilde her şeyin çalıştığını kanıtlamaz. Ekrandaki örneği bu kontrollerden geçiriyoruz.

CLAUDE CODE + REA · 21 / 24

HATA VARSA ÖNCE TANI KOY.

Komut bulunamadıysa yeni terminal ve PATH kontrolüyle başla. REA aracı görünmüyorsa kurulumda doğru ajanı seçtiğini ve oturumu yeniden açtığını doğrula. Site boşsa tarayıcı konsolundaki hatayı oku. Hata metnini, çalıştırdığın komutu ve bulunduğun klasörü birlikte paylaş. Yönetici yetkisini her hatanın çözümü olarak kullanma.

CLAUDE CODE + REA · 22 / 24

ÜCRETİ TAHMİN ETME. TAKİP ET.

Abonelikte planın kullanım sınırları vardır. API tarafında maliyet; modele, bağlama ve yapılan iş miktarına göre değişir. Küçük bir site için sabit ücret sözü veremeyiz. Kullanım ekranını kontrol et, sınırlarını belirle ve gereksiz tekrarları azalt. REA’nın açık kaynak olması, kullandığın modelin ücretsiz olduğu anlamına gelmez.

CLAUDE CODE + REA · 23 / 24

BİTMEDEN SON KONTROL VE YEDEK.

Teslimden önce menüyü, bağlantıları, klavye odağını ve dar ekranı tekrar dene. İletişim bağlantısının gerçek bir form sunucusu olmadığını da ayırt et. Çalıştırma notlarını kaydet. Git biliyorsan değişiklikleri inceleyip anlamlı bir kayıt oluştur; bilmiyorsan en azından çalışan klasörün tarihli bir yedeğini sakla.

CLAUDE CODE + REA · 24 / 24

KUR. İNCELE. OLUŞTUR. KONTROL ET.

Dört adımı tamamladık: Claude Code’u kurup doğruladık; REA bağlantısının nasıl kurulacağını gördük; örnek sayfayı parçalara ayırdık ve kendi sürümümüzü kontrol ettik. Şimdi aynı sırayı kendi küçük projen için uygula. Net istek yaz, çıktıyı aç, eksikleri ölçerek düzelt. Çalışan sonucu görmek, sürecin son adımıdır.

Bu derste bir web sitesini yalnızca tarif etmekle kalmayacağız.
Claude Code kurulumundan başlayıp REA bağlantısını kuracak, örnek bir sayfanın
yapısını inceleyeceğiz. Sonra kendi dosyalarımızı oluşturup sonucu tarayıcıda
ve telefon genişliğinde kontrol edeceğiz.
Hedefimiz, nasıl yapıldığını anlayabildiğin çalışan bir örnek.
Claude Code, proje dosyalarıyla çalışan bir yapay zekâ aracıdır.
Sen hedefini söylersin;
o dosyaları okuyabilir, kod değiştirebilir ve komut çalıştırabilir.
Ekrandaki terminal çizimlerini komutları kolay okumak için sadeleştirdik.
Her aşamada sonucu inceleyerek ilerleyeceğiz.
Bir terminale, internet bağlantısına ve Claude Code erişimi sağlayan bir
hesaba ihtiyacımız var.
Windows örneğinde PowerShell kullanacağız.
Claude Code için yerel kurulum yolunu seçiyoruz.
Birazdan ekleyeceğimiz REA ise Node ve npm gerektiriyor.
Bu ikisini aynı şey sanmadan ayrı ayrı doğrulayacağız.
Windows’ta PowerShell’i açalım.
Ekrandaki winget komutu, Anthropic’in Claude Code paketini kurar.
Paket adı aynı görünmeli.
Winget’in gösterdiği bilgileri okuyup kurulumu tamamla.
Ardından yeni bir terminal aç.
Bu yöntemde güncelleme de winget üzerinden yapılır;
güncelleme komutunu ekranda ayrıca gösteriyoruz.
REA için Node sitesinden desteklenen bir sürüm kuruyoruz.
Bu derste yirmi dört nokta on bir veya üzeri bir yirmi dört sürümünü
kullanabilirsin. Terminalde node tire v ve npm tire v
komutlarıyla sürümleri gör.
Sayıların görünmesi, komutların bu terminalden erişilebilir olduğunu doğrular.
Mac veya Linux kullanıyorsan resmî belgelerdeki yerel kurulum komutunu
seç. Windows için PowerShell komutu farklıdır.
Ekranda iki yolu ayrı kutularda görüyorsun.
Kullandığın sisteme ait satırı çalıştır;
ikisini birden çalıştırma.
Yerel kurulum ile paket yöneticisinin güncelleme davranışı da farklı olabilir.
Kurulumdan sonra yeni terminalde claude çift tire version
yaz. Bir sürüm numarası görmelisin;
buradaki numara bilgisayarına göre değişir.
Komut bulunamazsa önce terminali yeniden aç, sonra resmî PATH adımlarını
kontrol et. Claude çalışıyorsa doctor komutu tanı bilgilerini gösterir.
Hatanın tam metnini sakla.
Şimdi çalışma alanını hazırlayalım.
mkdir benim sitem komutuyla klasörü oluştur, cd komutuyla
içine gir ve claude yazarak oturumu başlat.
Terminalde hangi klasörde bulunduğunu kontrol et.
İlk isteğinde yalnızca bu projede çalışmasını ve dosya oluşturmadan önce
planını açıklamasını söyle.
İlk oturumda giriş adımlarını takip et.
Uygun Claude aboneliğiyle veya Claude Console hesabıyla çalışabilirsin.
Console tarafında API kullanımı ayrıca ücretlenir.
Ücretsiz bir sohbet hesabının tek başına yeterli olduğunu varsayma.
Girişten sonra hangi hesapla ve hangi kullanım koşullarıyla çalıştığını doğrula.
Claude’un izin davranışı seçilen moda ve kayıtlı kurallara bağlıdır.
Her dosya okumada ya da her adımda soru soracağını varsayma.
Bir onay penceresi geldiğinde komutu ve hedef dosyayı oku.
Bu ders için dar kapsamla ilerle.
Şifrelerini ve gizli anahtarlarını örnek promptlara ekleme.
REA, ajanı inceleme araçlarına bağlayan bir projedir.
Web tarafında sayfa yapısı, betikler, ağ gözlemleri ve istenen ekran
görüntüleriyle çalışabilir. Kaynak depomuz ekrandaki morluto, rea
adresi. REA’yı tek tıkla kusursuz site kopyalayan bir araç olarak
düşünme; inceleme bulgularını uygulamaya dönüştürmeye yardımcı olur.
Proje terminalinde ekrandaki npx rea agents setup
komutunu çalıştır. Kurulumda Claude Code’u seç, değişecek yapılandırma
yollarını oku ve uygun planı onayla.
Tamamlanınca Claude Code oturumunu yeniden başlat.
Araçların bağlandığını kontrol et.
Bu adım yalnızca dosya indirmekten ibaret değildir;
ajan bağlantısı da kurulmalıdır.
İnceleme isteğini küçük tutalım.
Kendi örnek sayfamızı aç;
menüyü, ana tanıtım alanını, kartları ve mobil davranışı REA ile incelemesini
iste. Gözlemleri ekran görüntüsüyle desteklesin, ulaşamadığı noktaları ayrıca
yazsın. Bir adres vermek, ajanın o sayfayı gerçekten açıp doğruladığı anlamına
gelmez.
Ekrandaki örnek siteyi üç parçaya ayırıyoruz.
Üstte gezinti, ortada büyük bir başlık ve çağrı düğmesi, altta hizmet
kartları var. Önce bu düzeni tarif et.
Başkasının markasını veya içeriğini taşımak yerine kendi metinlerini kullan.
Görünüm ile sunucuda çalışan işlevlerin farklı şeyler olduğunu unutma.
Şimdi üretim isteği:
İncelediğimiz düzende, Kuzey Atölye için tek sayfalık bir site oluştur.
Kendi metinlerini yaz;
menü, tanıtım, hizmetler ve iletişim bağlantısı olsun.
HTML, CSS ve JavaScript kullan.
Masaüstünde ve telefonda kontrol et;
çalıştırma adımlarını açıkla.
Böylece yalnızca güzel bir görüntü istememiş oluyoruz.
Önce kısa bir plan iste:
sayfa iskeleti, tasarım kuralları, sonra etkileşimler.
İlk sürümde çalışan küçük bir sonuç görmek daha kolaydır.
Ajan bir işlem yaptığını söylüyorsa oluşan dosyayı ve çıktıyı kontrol et.
Hata mesajını gizleyip tamamlandı demesini değil, eksikleri açıkça
raporlamasını iste.
Örneğimizde üç dosya var.
İndeks HTML sayfanın bölümlerini taşır;
stil CSS görünümü düzenler;
skript JavaScript mobil menüyü yönetir.
Ayrıca CLAUDE nokta MD dosyasına proje kurallarını yazabilirsin.
Örneğin Türkçe içerik, erişilebilir menü ve dış servise bağlı olmayan bir ilk
sürüm. Dosyaları açıp isimlerini kontrol et.
Bu dersteki basit örneği indeks HTML dosyasını tarayıcıya açarak
görebilirsin. Ancak her proje çift tıklamayla çalışmaz.
Bir geliştirme sunucusu gerekiyorsa ajandan doğru komutu ve açılacak yerel
adresi iste. Terminalde hata olmadığını gör, sonra sayfayı aç.
Sadece oluşturuldu mesajını başarı sayma.
Revizyonu somut yaz:
ana başlığı daha okunur yap, kartlar arasındaki boşluğu artır ve düğmenin
kontrastını düzelt. Referansla sonucu aynı genişlikte karşılaştır.
Bir değişiklik diğer bölümü bozduysa bunu da bildir.
Her revizyondan sonra aynı kontrolleri tekrarla;
böylece ilerlemeyi gerçekten görebilirsin.
Şimdi telefon genişliğine geçiyoruz.
Yazılar ekrandan taşmamalı;
kartlar uygun biçimde alt alta gelmeli.
Menü düğmesine basıp açılıp kapandığını dene.
Bağlantı seçildiğinde menü de kapanmalı.
Masaüstündeki güzel görüntü, mobilde her şeyin çalıştığını kanıtlamaz.
Ekrandaki örneği bu kontrollerden geçiriyoruz.
Komut bulunamadıysa yeni terminal ve PATH kontrolüyle başla.
REA aracı görünmüyorsa kurulumda doğru ajanı seçtiğini ve oturumu yeniden
açtığını doğrula. Site boşsa tarayıcı konsolundaki hatayı
oku. Hata metnini, çalıştırdığın komutu ve bulunduğun klasörü birlikte
paylaş. Yönetici yetkisini her hatanın çözümü olarak kullanma.
Abonelikte planın kullanım sınırları vardır.
API tarafında maliyet;
modele, bağlama ve yapılan iş miktarına göre değişir.
Küçük bir site için sabit ücret sözü veremeyiz.
Kullanım ekranını kontrol et, sınırlarını belirle ve gereksiz tekrarları
azalt. REA’nın açık kaynak olması, kullandığın modelin ücretsiz olduğu
anlamına gelmez.
Teslimden önce menüyü, bağlantıları, klavye odağını ve dar
ekranı tekrar dene.
İletişim bağlantısının gerçek bir form sunucusu olmadığını da ayırt et.
Çalıştırma notlarını kaydet.
Git biliyorsan değişiklikleri inceleyip anlamlı bir kayıt oluştur;
bilmiyorsan en azından çalışan klasörün tarihli bir yedeğini sakla.
Dört adımı tamamladık:
Claude Code’u kurup doğruladık;
REA bağlantısının nasıl kurulacağını gördük;
örnek sayfayı parçalara ayırdık ve kendi sürümümüzü kontrol ettik.
Şimdi aynı sırayı kendi küçük projen için uygula.
Net istek yaz, çıktıyı aç, eksikleri ölçerek düzelt.
Çalışan sonucu görmek, sürecin son adımıdır.