AI ile Dizin Web Sitesi Nasıl Oluşturulur

Builder’ı açmadan önce, sitenin en küçük kullanışlı sürümünü yazın.

Çoğu dizin web sitesi için bu şunları içerir:

• nişi açıklayan bir ana sayfa
• kartlardan oluşan bir listeleme sayfası
• arama ve birkaç filtre
• her öğe için bir detay sayfası
• insanlar liste önerisi gönderebiliyorsa bir başvuru veya iletişim sayfası
• temel gezinme ve alt bilgi sayfaları

Veri yapısını da tanımlayın. Bir dizin çoğunlukla kayıt koleksiyonudur, bu yüzden alanlarda net olun. Örnek alanlar:

• ad
• kategori
• şehir veya bölge
• kısa açıklama
• website URL’si
• görsel
• fiyatlandırma seviyesi
• etiketler
• iletişim e-postası

Sonra kimin ne yapacağını belirleyin:

• ziyaretçiler gezebilir ve arama yapabilir
• editörler listelemeler ekleyebilir veya güncelleyebilir
• işletmeler kendi listelerini gönderebilir

İlk sürüm yalnızca derlenmiş bir dizinse, henüz giriş yapma gerekmeyebilir. İnsanların hesaplara, kaydedilmiş öğelere veya liste gönderimlerine ihtiyacı varsa, bunları oluşturmadan önce planlayın.

İlk prompt önemlidir çünkü projenin yapısını, teknoloji tercihini ve tonunu belirler. Moremade’de siteyi düz metinle anlatırsınız; AI agent kaynak kodu yazar ve ardından canlı bir önizleme gösterir.

İyi bir ilk prompt şunları kapsamalıdır:

• dizinin türü
• ihtiyacınız olan sayfalar
• her listeleme için ana alanlar
• görsel stil
• içeriğin şimdilik statik mi yoksa daha sonra veriye mi bağlı olduğu
• mobil gereksinimler

Somut olun. İş akışını hâlâ belirliyorsanız her şeyi tek seferde istemeyin.

Bağımsız kahve dükkânları için React + Tailwind ile bir dizin web sitesi oluştur. Bir ana sayfa, aranabilir listeleme kartları olan bir göz atma sayfası, mahalle ve fiyat için filtreler ve her dükkân için bir detay sayfası ekle. Her listeleme ad, fotoğraf, kısa açıklama, adres, açılış saatleri, website ve wifi veya brunch gibi etiketleri göstermeli. Basit gezinmeli, temiz editoryal bir düzen ve mobil uyumlu bir kart ızgarası kullan. Örnek verilerle başla. Backend olmadan, form düzenine sahip bir dükkân ekleme sayfası ekle.

İlk build’den sonra, canlı önizlemeyi bir takım arkadaşınızın hazırladığı bir front-end taslağını inceler gibi inceleyin. Sayfa hiyerarşisini, boşlukları, filtre davranışını, kart okunabilirliğini ve detay sayfasının doğru bilgileri gösterip göstermediğini kontrol edin.

Moremade, sohbet ederek değişiklik yapmanıza izin verir; ayrıca görsel denetçi ve kod görünümü de vardır. Tüm özeti yeniden yazmak yerine kısa ve net istekler kullanın.

Üç faydalı takip promptu:

• "Listeleme kartlarını görüntü 4:3 olacak şekilde değiştir, etiketleri açıklamanın altına taşı ve website bağlantısını ikincil bir buton yap."
• "Göz atma sayfasına arama, mahalle ve fiyat filtreleri olan sabit bir filtre çubuğu ekle. Mobilde filtreleri bir çekmeceye küçült."
• "Ana sayfa hero’sunu ve giriş metnini daha tarafsız ve pratik olacak şekilde yeniden yaz. Shopların nasıl seçildiğini açıklayan bir bölüm ekle."

Bu aşama genellikle birkaç tur sürer. Her seferinde tek bir değişiklik türüne odaklanın:

• düzen ve gezinme
• filtre mantığı ve kart içeriği
• metin ve etiketler
• mobil boşluklar
• buton metni ve kontrast gibi erişilebilirlik ayrıntıları

Bir sayfa iyi çalışıyorsa, builder’dan bu kalıbı sitenin geri kalanına uygulamasını isteyin.

Birçok dizin, önce örnek veya derlenmiş içerikle yayına çıkabilir. Backend parçalarını yalnızca gerçek bir ihtiyaç olduğunda ekleyin.

Şunlara ihtiyaç varsa Supabase kullanın:

• listelemeler için bir veritabanı
• yönetici veya kullanıcı girişi
• görseller için dosya depolama
• kullanıcıların gönderdiği listelemeler

Örnek durumlar:

• editörlerin kayıtları veritabanına eklediği yerel bir işletme dizini
• kullanıcıların profillerini yönetmek için giriş yaptığı bir üye dizini
• bir gönderim iş akışı olan bir dizin

Dizinin bir şey için ücret alması gerekiyorsa Stripe kullanın, örneğin:

• ücretli listeleme gönderimleri
• sponsorlu konumlandırmalar
• premium verilere abonelik erişimi

Kapsamı dar tutun. İlk sürümünüz yalnızca herkese açık gezinti ise, şimdi hesap sistemleri veya ödemeler eklemeyin. Moremade, Supabase ve Stripe için bağlayıcılar içerir; böylece ürün modeli net olduğunda bunları bağlayabilirsiniz.

Yaygın bir kalıp şöyledir:

• önce herkese açık gezinme deneyimini oluşturun
• listelemeler ve yönetici düzenlemesi için Supabase bağlayın
• ücretli bir gönderim akışı varsa Stripe’ı daha sonra ekleyin

Dizin siteleri masaüstünde kabul edilebilir görünüp telefonda hantal kalabilir. Yaygın sorunlar uzun kartlar, sıkışık filtreler ve kötü istiflenmiş çok fazla bölümü olan detay sayfalarıdır.

Önizlemede şu noktaları gözden geçirin:

• arama çubuğu genişliği ve dokunma alanları
• filtrelerin düzgün şekilde daralıp daralmadığı
• kartlardaki görsel kırpma
• adreslerin, etiketlerin ve meta verilerin okunabilirliği
• butonlar ve formlar etrafındaki boşluklar
• detay sayfasının en yararlı bilgileri üstte tutup tutmadığı

Gerekirse, şu tür net mobil değişiklikler isteyin:

• kart metnini iki satıra indirmek
• ikincil meta verileri ekranın altına taşımak
• filtre etiketlerini yatay kaydırılabilir bir satıra dönüştürmek
• küçük ekranlarda çağrı-to-action butonunu tam genişlik yapmak

Bu aynı zamanda görsel denetçiyi kullanıp bir öğeye tıklayarak doğrudan ayarlamak için iyi bir noktadır.

Yapı ve içerik yeterince sabitlendiğinde yayınlayın. Moremade, ücretsiz yourname.moremade.ai alt alan adına tek tıkla yayın yapabilir. Ücretli planda iseniz, özel bir alan adı bağlayabilirsiniz. Alan adları Moremade içinde de satın alınabilir.

Yayınlamanın pratik bir yolu şöyledir:

• önce ücretsiz alt alan adında yayınlayın
• bağlantıları, formları ve sayfa başlıklarını test edin
• geri bildirim için birkaç kişiyle paylaşın
• site hazır olduğunda özel alan adını bağlayın

Platform dışında bir kopya tutmak istiyorsanız, tam kaynak kodu ZIP olarak dışa aktarın veya GitHub’a gönderin. Web siteleri gerçek React + Tailwind kodudur, yani tescilli bir formata kilitli kalmazsınız.

Sorunların çoğu builder’ın kendisinden değil, belirsiz yapıdan kaynaklanır.

Şu hatalardan kaçının:

• Çok erken çok fazla filtre. İnsanların seçim daraltmak için gerçekten kullandığı iki veya üç alanla başlayın.
• Veri modeli olmaması. Liste alanları belirsizse, her sayfa tutarsızlaşır.
• Kürasyon ve gönderimleri kuralsız karıştırmak. Listelemelerin editoryal mı, kullanıcı gönderimli mi, yoksa her ikisi mi olacağına karar verin.
• Gerekmiyorken giriş eklemek. Herkese açık dizinler çoğu zaman lansmanda hesap olmadan gayet iyi çalışır.
• Her özellik için tek bir dev prompt yazmak. Önce temel akışı oluşturun, sonra küçük adımlarla iyileştirin.
• Mobil incelemeyi görmezden gelmek. Dizin gezintisinin çoğu telefonda olur.
• Sahiplik planı olmadan yayına çıkmak. Daha sonra temiz bir devir istiyorsanız kodu dışa aktarın veya GitHub’a gönderin.

Burada sürüm geçmişi yardımcı olur. Bir değişiklik turu siteyi kötüleştirirse, geri alın ve daha dar bir talimat deneyin.