Claude Artifacts ile Tarayıcıda Çalışan Mini Uygulamalar Oluşturmak

Claude Artifacts ile Tarayıcıda Çalışan Mini Uygulamalar Oluşturmak hakkında dağınık bilgiler yerine derli toplu bir kaynak arıyorsanız doğru yerdesiniz. Bu ders 5 temel noktayı ve bunları bir araya getiren HTML örneğini sade bir dille açıklıyor.

Temel kavram ve amaç

Claude ile sohbet ederken istediğiniz bir hesaplayıcı, form ya da küçük oyun, Artifacts özelliği sayesinde sohbetin yanındaki ayrı bir pencerede çalışır hâlde görünür. Kodu kopyalayıp bir dosyaya kaydetmeden önce sonucu hemen deneyebilir, "butonu yeşil yap" gibi isteklerle anında düzenletebilirsiniz. Tek sayfalık araçlar, prototipler ve öğretim amaçlı örnekler için en hızlı yoldur.

Konuyu adım adım öğrenelim

1. Ne zaman oluşur

Claude, kendi başına anlamlı ve yeniden kullanılabilir içerikleri (sayfa, bileşen, belge, diyagram) ayrı bir Artifact olarak gösterir.

2. İsteği net yazın

Hangi girdilerin alınacağını, sonucun nasıl gösterileceğini ve tasarım beklentinizi belirtin.

3. Yinelemeli düzenleme

"Mobilde de düzgün görünsün" ya da "sonuçları tabloya ekle" gibi isteklerle aynı Artifact güncellenir.

4. Kodu dışarı alın

Beğendiğiniz sonucu kopyalayıp kendi projenize bir dosya olarak ekleyin ve orada test edin.

5. Sınırları bilin

Artifact'ler tarayıcıda çalışan istemci tarafı kodlardır; veritabanı ve sunucu işlemleri için ayrı geliştirme gerekir.

HTML ile uygulama

Teoriyi somutlaştırmak için kısa bir HTML örneğine bakalım:

<!-- Claude'a örnek istek: "Kilo ve boy alıp vücut kitle indeksini hesaplayan,
     sonucu renkli kategoriyle gösteren tek dosyalık bir sayfa yap." -->
<input id="kilo" type="number" placeholder="Kilo (kg)">
<input id="boy" type="number" placeholder="Boy (cm)">
<button onclick="hesapla()">Hesapla</button>
<p id="sonuc"></p>
<script>
function hesapla() {
  const kilo = +document.getElementById('kilo').value;
  const boy = +document.getElementById('boy').value / 100;
  if (!kilo || !boy) return;
  const vki = kilo / (boy * boy);
  const durum = vki < 18.5 ? 'Zayıf' : vki < 25 ? 'Normal' : vki < 30 ? 'Fazla kilolu' : 'Obez';
  document.getElementById('sonuc').textContent = `VKİ: ${vki.toFixed(1)} · ${durum}`;
}
</script>

Kodu doğrudan kopyalamak yerine her satırın ne yaptığını anlayarak uyarlamanız, ileride çıkacak hataları çözmeyi kolaylaştırır.

Neden önemli? Kazanımlar

Claude Artifacts ile Tarayıcıda Çalışan Mini Uygulamalar Oluşturmak konusunu doğru uygulamanın başlıca kazanımları şunlar:

• Fikirden çalışan prototipe dakikalar içinde ulaşılır
• Kodu kurmadan önce sonucu görüp düzeltebilirsiniz
• Öğrenirken kodun her satırının etkisi anında görülür

Kontrol listesi

Dersi bitirmeden önce aşağıdaki maddeleri kendi projenizde denediğinizden emin olun:

• Ne zaman oluşur
• İsteği net yazın
• Yinelemeli düzenleme
• Kodu dışarı alın
• Sınırları bilin

Sonuç

Claude Artifacts ile Tarayıcıda Çalışan Mini Uygulamalar Oluşturmak konusunda ele aldığımız 5 nokta, günlük çalışmada en sık ihtiyaç duyulan kısmı kapsıyor. Özellikle Ne zaman oluşur ve Sınırları bilin başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• Claude Code ile Terminalde Yapay Zekâ Destekli Geliştirme: İlk Adımlar
• Claude ile Etkili Prompt Yazma: Bağlam, XML Etiketleri ve Örnekler

Bir sonraki adım için Akademi sayfasındaki diğer derslere geçebilirsiniz.