AI ile emlak web sitesi nasıl yapılır

Bir AI site oluşturucusuna prompt vermeden önce, sitenin en küçük ama faydalı sürümünü tanımlayın.

Bir emlak web sitesi için bu genellikle şunları içerir:

• bir ana sayfa
• filtreli bir ilanlar sayfası
• bir gayrimenkul detay sayfası
• bir iletişim veya talep formu
• ajans ya da emlakçı için bir hakkımızda sayfası

Sonra her ilanın hangi verileri içermesi gerektiğine karar verin. Spesifik olun:

• başlık
• fiyat
• adres veya bölge
• yatak odası, banyo, metrekare
• kısa açıklama
• görsel galerisi
• mülk türü
• satılık veya kiralık gibi durum bilgisi

Ayrıca siteyi kimlerin kullanacağını da belirleyin:

• ilanlara göz atan alıcılar veya kiracılar
• ilanları güncelleyen emlakçılar
• içeriği yöneten yöneticiler

Yalnızca birkaç ilandan oluşan bir tanıtım sitesi istiyorsanız, statik örnek verilerle başlayabilirsiniz. Emlakçıların giriş yapıp ilanları yönetmesi gerekiyorsa, bir veritabanı ve oturum açma planlayın. Moremade, veritabanı, giriş ve dosya depolama için Supabase’i destekler; gerçek veri yönetimi gerektiğinde doğal sonraki adımdır.

Bir şey üretmeden önce bu kararları not edin. Yapı net olduğunda ilk sonuç genelde daha iyi olur.

İlk prompt, siteyi, sayfaları, stili ve temel etkileşimleri sade bir dille anlatmalıdır. Düzen ve içerik konusunda somut olun. Mükemmellik değil, çalışan bir ilk taslak isteyin.

İyi bir başlangıç promptu şöyle olabilir:

Yerel bir emlak ofisi için modern bir ilan sitesi oluştur. Hero bölümü, öne çıkan mülkler, arama çubuğu, mahalle öne çıkanları ve iletişim bölümü olan bir ana sayfa yap. Fiyat, yatak odası, mülk türü ve konum için filtre kontrolleri bulunan bir ilanlar sayfası ekle. Görsel galeri, fiyat, temel bilgiler, açıklama, harita yer tutucu ve talep formu içeren bir gayrimenkul detay sayfası ekle. Temiz React + Tailwind bileşenleri, nötr renkler ve örnek ilan verileri kullan. Düzeni duyarlı yap ve mobilde kolay okunur hale getir.

Moremade, web siteleri için gerçek React + Tailwind kodu üretir; yani yalnızca maket düzenlemiyorsunuz. Canlı önizlemeyi inceleyebilir, sohbetle düzenleyebilir, görsel denetleyiciyi kullanabilir ve isterseniz oluşturulanları doğrulamak için kod görünümünü kontrol edebilirsiniz.

İlk oluşturma işleminden sonra, canlı önizlemeyi bir kullanıcı gibi inceleyin.

Önce şu noktaları kontrol edin:

• Ana sayfa ilk ekranda net mi?
• İlanlar kolayca taranabiliyor mu?
• İlan kartları doğru bilgileri gösteriyor mu?
• Filtreler pazar için inandırıcı mı?
• İletişim yolu açık mı?

Tüm uygulamayı tek bir takip promptuyla yeniden yazmaya çalışmayın. Bunun yerine odaklı değişiklikler isteyin.

Faydalı takip promptları:

• "İlan kartlarını değiştir; fotoğraf daha büyük olsun, fiyat daha güçlü ağırlıkta görünsün ve yatak odası, banyo ve metrekare adresin altında tek satırda yer alsın."
• "Filtreleri satılık veya kiralık, minimum yatak odası sayısı ve konum açılır menüsünü içerecek şekilde güncelle. Filtreler masaüstünde üstte görünür kalsın, мобilde ise daraltılabilir olsun."
• "Gayrimenkul detay sayfasını yeniden tasarla; önce görsel galeri, ardından fiyat ve temel bilgiler, sonra açıklama ve en sonda talep formu olsun. Masaüstünde sabit bir iletişim kartı ekle."

Burada Moremade’in görsel denetleyicisi çok faydalıdır. Belirli bir öğeyi işaret edin, değişikliği açıklayın ve yineleyin. Sürüm geçmişi de önemlidir. Bir düzenleme siteyi kötüleştirirse, sıfırdan yeniden kurmadan geri dönebilirsiniz.

Birçok emlak sitesi, karmaşık bir arka uç işi olmadan yayına alınabilir. Hedef ilanları yayınlamak ve talepleri toplamaksa, ilk sürüm için örnek veya manuel güncellenen içerik yeterli olabilir.

Şu ihtiyaçlar olduğunda Supabase ekleyin:

• bir ilanlar veritabanı
• emlakçı veya yönetici girişi
• görsel ve dosya depolama
• talepleri kaydeden formlar

Mantıklı bir kurulum şu şekilde olabilir:

• ilan verileri için properties tablosu
• birden fazla kişi ilan yönetiyorsa agents tablosu
• iletişim gönderimleri için enquiries tablosu

Ziyaretçilerin ücretli danışmanlık, başvuru ücreti veya premium ilan yerleşimi satın almasını istiyorsanız, Stripe burada devreye girer. Moremade, belirlediğiniz fiyatlarla ödeme için bir Stripe bağlayıcısı içerir. Standart bir gayrimenkul arama sitesi için Stripe genellikle başlangıçta gerekli değildir.

İlk sürümü dar tutun. Çok fazla hareketli parçaya sahip yarım kalmış bir portalı düzeltmektense, basit çalışan bir siteyi geliştirmek daha kolaydır.

Emlak siteleri çok fazla mobil trafik alır, bu nedenle mobil inceleme opsiyonel değildir.

Oluşturulan siteyi küçük ekranlarda kontrol edin ve pratik sorunlara bakın:

• hero metni çok uzun veya belirsiz mi?
• filtreler ekranı kaplıyor mu?
• kartlar önemli bilgileri ekranın altına mı itiyor?
• talep formlarında alanlar sıkışık mı?
• görsel galeriler kaydırılması veya dokunulması zor mu?

Doğrudan düzeltmeler isteyin. Örneğin:

• "Hero yüksekliğini мобilde azalt ve arama formu kaydırmadan görünür kalsın."
• "İlan kartlarını tablette iki sütun, küçük телефonlarda tek sütun yap."
• "Filtre yan panelini мобilde açılır bir panel haline getir."

İletişim akışını da test edin. Formu gönderin, etiketleri kontrol edin ve düğme metinlerinin net olduğundan emin olun. Site Supabase üzerinden giriş veya kaydedilmiş ilanlar içeriyorsa, bu durumları mobilde de test edin.

Temel akışlar çalıştığında siteyi yayınlayın.

Moremade ile tek tıkla ücretsiz yourname.moremade.ai alt alan adına yayın yapabilirsiniz. Bu, iç inceleme, müşteri geri bildirimi veya erken test için kullanışlıdır. Ücretli planlar özel alan adlarını destekler ve alan adları Moremade içinde de satın alınabilir.

Gerçek bir alan adını projeye bağlamadan önce son bir kontrol yapın:

• yer tutucu ajans bilgilerini değiştirin
• gerek yoksa sahte referans tarzı metinleri kaldırın
• her gayrimenkul sayfasında eksik alan olup olmadığını kontrol edin
• taleplerin doğru hedeflere gittiğinden emin olun
• mahalle ve adres yazımlarını gözden geçirin

Projeyi daha sonra platform dışında tutmak isterseniz, tam kaynak kodunu ZIP olarak dışa aktarabilir veya GitHub’a aktarabilirsiniz. Moremade kilitli bir sistem değildir. Site kodu, başka yerde de üzerinde çalışabileceğiniz gerçek React + Tailwind kodudur.

En büyük hata, "bana bir emlak web sitesi yap" gibi belirsiz bir promptla başlamaktır. Bu genellikle zayıf ilan yapısına sahip, genel bir düzen üretir.

Diğer yaygın sorunlar:

• Çok erken çok fazla özellik. Önce göz atma, görüntüleme ve talep gönderme ile başlayın. Panoları veya kaydedilmiş aramaları daha sonra ekleyin.
• Veri modelinin olmaması. İlanların gerçek olması gerekiyorsa, veritabanına bağlamadan önce alanları tanımlayın.
• Kötü mobil düzen. Büyük masaüstü filtreleri ve görsel ağırlıklı bölümler telefonda genellikle bozulur.
• Hedef kitleleri karıştırmak. Alıcıya yönelik bir web sitesi ile iç emlakçı portalı farklı ürünlerdir.
• Dışa aktarmayı kontrol etmemek. Sahiplik önemliyse, kod görünümünü, ZIP dışa aktarmayı veya GitHub aktarımını erken doğrulayın.
• Sebep olmadan ödeme kullanmak. Çoğu emlak web sitesinin ilk gün Stripe’a ihtiyacı yoktur.

İyi bir kural, gerçek bir kullanıcı görevini destekleyen en küçük sürümü yayınlamaktır: bir mülk bulmak ve bir talep göndermek.