Üretken Yapay Zeka Araçları Kullanarak Uygulama Geliştiriyorum — Bölüm 1: v0.dev Kullanarak UI Oluşturma
v0 Nedir, Nasıl Çalışır ?
v0, üretken yapay zeka kullanılarak kullanıcı arayüzü oluşturmayı amaçlayan Vercel tarafından üretilmiş bir araçtır. Görsel ve metinsel girdilerle istenen React bileşenlerini shadcn/ui ve tailwind.css kütüphaneleri temellinde üreterek terminale komut girerek hızlıca projeye dahil etmeye yardımcı olur.
Midjourney’e benzer şekilde metin temelli görsel oluşturan AI modelleri ile çalışan bir yapıya sahiptir. Girilen komuta(prompt) uygun olan 3 seçenek sunar. İstenilirse sunulan arayüzler üzerinde bileşen bazlı iyileştirme fırsatı da sunar.
Vercel’in kullanıcı verilerini kullanmadıklarını özellikle belirtmişler, bu modelleri geliştirirken kendi kodlarını, açık kaynak ve yapay kodları kullanmışlar.
v0 Limitleri Nedir ?
- Yalnızca React temelli kod üretmektedir.
- Dizayn sistemi olarak yalnızca tailwind.css’in kullanımına imkan tanır.
- Kendi dizayn sistemimiz ve bileşen kütüphanemizi oluşturmamıza olanak tanımaz.
- Veri çekme işlemleri için kod üretmez. UI’a odaklanır.
- Kişileştirilmiş bileşenler yerine daha jenerik shadcn/ui bileşenlerini kullanır. Ancak temalama imkanı sunar.
shadcn/ui Nedir?
Kendi ifadeleriyle bir bileşen kütüphanesi değildir. Bağımlılık yaratmadan tekrar kullanımı kolay güzel bir şekilde dizayn edilmiş bileşenler koleksiyonu olarak bir tanımlama yapılmış.
Diğer UI kütüphanelerinden ayrı olarak paketlenmiş bir şekilde shandcn/ui’ı projeye dahil edemiyoruz bunun yerine bileşenlerin kurulum sağladıktan sonra ister CLI yardımıyla istenirse kopyala-yapıştır yaparak hızlıca projeye dahil edilmesini sağlıyoruz.
Hali hazırda iki adet tema barındıyor ve tema düzenleme aracıyla görsel olarak tema oluşturmamıza yardımcı oluyor. Bu temaların ikon kütüphaneleri barındırdığını da belirtmeliyim.
Birçok hazır bileşenin bulunması ayrıca Form bileşeni için react-hook-form ve validasyon kütüphanelerini desteklemesi oldukça kullanışlı.
Bu bileşenler kişiselleştirme ve genişletme yönüyle oldukça esnek bir yapıya sahipler ve erişilebilirlik kurallarına uyumlular.
Her bileşenin tek tek projeye dahil edilmesi ve kod yapılarına doğrudan erişimin daha uzun ve kontrolü zor bir code base yaratması zorlayıcı olabilir.
v0 Nasıl Kullanılır ?
Hali hazırda bir Vercel hesabınız varsa bununla kayıt olma şansına sahipsiz ancak yoksa da hızlıca bir hesap oluşturabilirsiniz.
Yukarıdaki karşılaşama sayfasındaki prompt alanına ücretsiz seçenek için bir resim ya da limitli bir prompt sayısında giriş yaparak bileşenler oluşturabilirsiniz.
Bileşenleri ister herkese açık isterseniz özel hale getirebilirsiniz. Ayrıca prompt geçmişinizi görüntüleyerek geliştirmeleri aşama aşama takip edebilirsiniz.
Ana sayfada bulunan “Keşfet” alanında öncesinde herkese açık olarak geliştirilmiş sayfalara ve bileşenleri inceleyebilir, isterseniz bunları kullanabilirsiniz. Buradan bulduğunuz bir geliştirmeyi “fork” yapma şansına sahipsiniz.
Prompt geçmişi, farklı cihaz boyutlarında bileşenlerin görünümü, kod yapısı ve CLI ile projeye çekilmesi, ‘speed’ ve ‘quality’ mode ve ‘pick and edit’ özelliği, prompt girdi alanı ile kullanıcı dostu bir arayüz bizi karşılıyor.
v0 Nasıl Kullandım ?
Uygulama amacı; konu bazlı olarak flashcard’lar oluşturarak bunları oyunlaştırma yöntemleri ile öğrenmeyi daha eğlenceli kılmayı temel almaktadır.
Öncelikle olarak bu fikirle uyumlu olabilecek bir tasarımı dribble.com üzerinden buldum. Ve dashboard tasarımını da görsel olarak prompt alanına girdi olarak verdim. Figma vd. gibi araçlarla oluştuduğunuz kendi tasarımlarınızı da burada görsel olarak sunabilirsiniz.
Aşağıdaki gibi bir kaç adım daha prompt süreci uygulayarak isteğime yakım bir dashboard görünümü elde ettim.
Diğer flashcard ve CRUD işlemlerimi yapacağım formlar için de bir başka prompt süreci işlettim. Farklı sayfa ya da bileşenleri neden ayrı yapmalıyız bunu uygulama içine dahil ettiğimizde daha iyi anlıyoruz.
Uygulama için UI gerekliliklerimi projeye dahil etmiş oldum. Eksik kalan noktalarda shadcn/ui bileşenlerini ihtiyacıma göre tailwind.css ile stillendireceğim.
Bunun içinde örnek olarak formumu bir ‘Sheet’ bileşeni şeklinde açmak istediğimde sağlanan cli kodu ile projedeki ‘components’ klasörü altındaki ‘ui’ klasörüne ilgili bileşeni çekiyorum.
Sonrasında kopyala-yapıştır yaparak bileşeni projeye dahil ediyorum. ‘ui’ klsöründe kişiselleştirme işlemlerimi yapabilirim.
Burada oluşturulan ikonlara da bir parantez açmak gerekiyor. Çünkü görsel ya da metinsel girdilerde talep edilen ikonlar için svg formatında üretildiklerini görmekteyiz.
v0 Avantajları ve Dezavantajları Nedir ?
Avantajlardan başlayacak olursak;
- Erişebilirlik, kişiselletirme, temalama, dil desteği yönüyle uyumlu olarak hızlı şekilde UI bileşenleri elde etmemizi sağlar.
- Next.js ile oluşturulan projelerde dosya yapısına uyumluluğu ile hızlı adapte olunabilir.
- shadcn/ui ve tailwind.css kullanılan projelerde prompt ile bileşen dahil etme imkanı tanır.
- Vercel gibi güçlü bir şirket tarafından desteklenmesi geleceğe yönelik daha önemli değişiklikler getirebilir.
- ‘Keşfet’ özelliği sayesinde herkese açık bir prompt havuzu oluşturulabilir. Buradan örneklemeler ile bileşen oluşturma süreci daha üretken hale gelebilir.
Dezavantajlarına değinirsek;
- Kendine has oluşturulmuş dizayn sistemi bulunan bir uygulamaya bu araç ile bileşenler dahil etmeye başladığımızda uyumsuzluk meydana gelebilir. Sıfırdan başlayacağımız bir proje için daha uygun olacaktır.
- Bileşenler çok fazla kapsüllenmediği ve fragmentli bir yapıda olması yönüyle spagetti kod üretme olasılığı yaratmaktadır.
- Görsel prompt işlemlerinde maalesef çok verimli olmadığını gözlemleyebiliyoruz. Hem responsive hem de görsellerin uyumluluğu yönüyle başarılı sonuçlar elde edemedim.
- Dizayn sistemi için code base ortamına, yeni tasarımlar için Figma erişimi imkanı bulunmaması da sayılabilir.
- Üretken yapay zeka araçlarının artması ile birlikte bu tarz araçların sayısı çoğalacak ve geliştiriciler üzerinde yeni şeyler öğrenme yükü artacaktır.
Sonuç:
v0.dev gibi üretken yapay zeka araçları, UI geliştirme sürecini hızlandırabilir ve daha erişilebilir hale getirebilir. Ancak, özellikle mevcut bir dizayn sistemine sahip olan bir projeye entegre edilirken uyumsuzluklar yaşanabilir. Görsel prompt işlemlerindeki verimlilik ve uyumluluk konuları da geliştirilmesi gereken noktalardan biridir.
Bu tür araçların avantajlarının yanı sıra, yeni bir araca uyum sağlama ve kullanımı öğrenme süreci de dikkate alınmalıdır. Geliştiriciler, her aracın kendi öğrenme eğrisi olduğunu anlamalı ve projelerine en uygun araçları seçerken dikkatli olmalıdır.
Geliştiriciler için önemli olan, kullanıcı deneyimini geliştirirken verimliliği artırmak ve projelerini daha hızlı bir şekilde hayata geçirebilmektir. Bu tür araçlar, bu hedeflere ulaşmada önemli bir rol oynayabilir ancak her aracın kendi avantajları ve dezavantajları bulunmaktadır.
İşlevsel taraftaki kodları yine üretken yapay zeka araçları kullanarak nasıl yaptığımı ve uygulamanın Github kodlarını merak ediyorsan beni takip edebilir ve bir sonraki yazıda erişim sağlayabilirsin.
