𝗩𝗶𝗯𝗲 𝗖𝗼𝗱𝗶𝗻𝗴 𝗳𝗼𝗿 𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿𝘀: 𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗣𝗵𝗼𝘁𝗼 𝗕𝗼𝗼𝘁𝗵 𝘄𝗶𝘁𝗵 𝗖𝗹𝗮𝘂𝗱𝗲
Ben bir yazarım, yazılımcı değil. Teknik becerilerim 1999'dan kalma temel HTML bilgisiyle sınırlı.
Ama az önce gerçek, çalışan bir araç inşa ettim.
MLH etkinlikleri için tarayıcı tabanlı bir fotoğraf kabini (photo booth) yaptım. Katılımcılar selfie çekebilir, markalı bir çerçeve ekleyebilir ve bunu telefonlarına kaydedebilirler. Uygulama mağazası yok. Hesap yok. Sadece bir bağlantı.
Claude ile vibe coding denilen bir yöntem kullandım. İşte bunu nasıl yaptığım ve neler öğrendiğim.
𝗧𝗵𝗲 𝗦𝘁𝗿𝗮𝘁𝗲𝗴𝘆
Canlı etkinlikler için güvenilir bir şey istiyordum. Claude, karmaşık framework'lerden kaçınmamı önerdi. Bunun yerine, tek bir index.html dosyası oluşturduk.
- HTML, CSS ve JavaScript'i tek bir dosyada kullanıyor.
- Herhangi bir derleme (build) adımı veya kurulum gerektirmiyor.
- GitHub Pages üzerinde ücretsiz olarak barındırılabiliyor.
- Daha az hareketli parçaya sahip, bu yüzden bozulması daha zor.
𝗧𝗵𝗲 𝗧𝗲𝗰𝗵𝗻𝗶𝗰𝗮𝗹 𝗕𝗶𝗹𝗱
Uygulama, bir selfie'yi şeffaf bir PNG çerçevesiyle birleştirmek için bir HTML canvas kullanıyor. Bu işlem tamamen tarayıcı içinde gerçekleşiyor.
- Kullanıcının fotoğrafı cihazından asla ayrılmaz.
- Bu, gizliliği otomatik olarak korur.
- Kolay fotoğraf hizalaması için "pinch-to-zoom" (çimdikleyerek yakınlaştırma) gibi hareketler ekledim.
Karmaşık bir sunucu olmadan çerçeveleri yönetmek için Supabase kullandım.
- Organizatörler çerçeveleri bir depolama birimine (storage bucket) yükler.
- Katılımcılar bunları herkese açık bir bağlantı üzerinden görüntüler.
- Güvenlik, gizli şifrelerle değil, veritabanı politikalarıyla sağlanır.
𝗕𝗲𝗴𝗶𝗻𝗻𝗲𝗿 𝗚𝗼𝘁𝗰𝗵𝗮𝘀
Vibe coding mimari konusunda yardımcı olur, ancak operasyonel detaylara dikkat etmelisiniz:
- Veritabanı Uyku Modu: Ücretsiz Supabase projeleri hareketsizlikten sonra duraklatılır. Bir etkinlikten önce onları uyandırmanız gerekir.
- Canvas Kirlenmesi (Canvas Tainting): Farklı bir kaynaktan resim yüklemek kaydetme işlevini bozabilir. Bunu crossOrigin ayarlarını kullanarak düzelttim.
- Mobil UX: Telefonlarda yerel paylaşım sayfasını (native share sheet) kullandım. Bu, kullanıcıların fotoğrafları tek bir dokunuşla doğrudan kamera rulosuna kaydetmelerini sağlar.
𝗠𝘆 𝗔𝗱𝘃𝗶𝗰𝗲 𝗳𝗼𝗿 𝗬𝗼𝘂
Eğer bunu denemek isterseniz, şu kuralları izleyin:
- Sınırları net olan bir proje seçin. Bir fotoğraf kabini net bir hedeftir. Bir sosyal medya uygulaması ise çok büyüktür.
- Yapay zekadan "nedenini" açıklamasını isteyin. Mantık yürütme, koddan daha önemlidir.
- Değişiklikleri (diffs) okuyun. Değişiklikleri önce incelemeden yapay zekanın sitenizi değiştirmesine izin vermeyin.
Vibe coding, projenizi anlamadığınız anlamına gelmez. Bu, yapay zekanın sözdizimini (syntax) hallettiği, sizin ise mantığı ve ödünleşimleri (tradeoffs) yönettiğiniz anlamına gelir.
Yeni Başlayanlar İçin Vibe Coding: Claude ile Çalışan Bir Fotoğraf Kabini Web Uygulamasını Nasıl Oluşturdum
Kodlama dünyası büyük bir değişim geçiriyor. Artık her bir noktalı virgülü veya parantezi doğru yere koymakla uğraşmak yerine, sadece "vibe"ı (havayı/tarzı) tarif ederek çalışan uygulamalar yapabiliyoruz. Buna "Vibe Coding" deniyor.
Bu yazıda, Claude kullanarak sıfırdan nasıl bir fotoğraf kabini web uygulaması geliştirdiğimi anlatacağım.
Vibe Coding Nedir?
Vibe coding, geleneksel programlama yaklaşımından farklıdır. Geleneksel yöntemde sözdizimi (syntax), algoritmalar ve kütüphane dokümantasyonları arasında kaybolursunuz. Vibe coding'de ise odak noktanız, yapay zekaya ne istediğinizi, uygulamanın nasıl hissettirmesi gerektiğini ve hangi özelliklere sahip olması gerektiğini anlatmaktır.
Yani, kod yazmıyorsunuz; bir vizyonu yönetiyorsunuz.
Proje: Fotoğraf Kabini Web Uygulaması
Hedefim, kullanıcıların kamerayı kullanarak fotoğraf çekebileceği, basit filtreler uygulayabileceği ve bu fotoğrafları indirebileceği şık bir web uygulaması yapmaktı.
Adım 1: İlk Prompt (Vibe'ı Belirlemek)
İşe Claude'a çok basit bir komut vererek başladım:
"Bana React ve Tailwind CSS kullanarak modern ve eğlenceli bir fotoğraf kabini web uygulaması yap. Kullanıcılar kamera görüntüsünü görebilmeli, fotoğraf çekebilmeli ve çekilen fotoğrafları indirebilmeli."
Claude saniyeler içinde bana çalışan bir temel yapı sundu. Kodun karmaşıklığıyla ilgilenmedim; sadece uygulamanın çalışıp çalışmadığına ve "vibe"ın doğru olup olmadığına baktım.
Adım 2: İterasyon (Hava Katmak)
Uygulama çalışıyordu ama biraz "ruhsuz" görünüyordu. Şimdi "vibe"ı geliştirmem gerekiyordu.
"Bu uygulama çok sade. Biraz daha retro ve neon bir hava kat. Arka planı koyu yap, butonlara parlak pembe ve mavi neon efektleri ekle. Yazı tipleri daha eğlenceli olsun."
Claude, Tailwind sınıflarını güncelleyerek uygulamayı bir anda bir gece kulübü veya retro oyun salonu havasına soktu.
Adım 3: Özellik Ekleme
Temel yapı ve tasarım oturduktan sonra, işlevselliği artırmaya karar verdim.
"Şimdi bir filtre özelliği ekleyelim. Kullanıcılar 'Siyah Beyaz', 'Sepya' ve 'Vintage' gibi seçenekler arasından seçim yapabilsin."
Yine, tek bir prompt ile karmaşık görüntü işleme mantığı (canvas API kullanarak) koda dahil edildi.
Neler Öğrendim?
Vibe coding ile bir şeyler inşa etmenin en büyük avantajı, teknik engellerin ortadan kalkmasıdır. Eğer ne istediğinizi net bir şekilde tarif edebiliyorsanız, bir yazılımcı olmasanız bile çalışan ürünler ortaya çıkarabilirsiniz.
Ancak unutmayın: "Vibe" her şey değildir. Uygulama büyüdükçe, yapay zekanın yazdığı kodu anlamak ve gerektiğinde müdahale edebilmek hala çok önemli.
Sonuç
Vibe coding, yaratıcılığın önündeki teknik bariyerleri yıkıyor. Artık bir fikir, sadece birkaç doğru "vibe" tarifine bakıyor.
İsteğe bağlı öğrenme topluluğu: https://t.me/GyaanSetuAi