Yapay zekâ ile çevrimiçi mağaza nasıl kurulur

Küçük bir mağaza, önce temel kararları verdiğinizde en iyi şekilde çalışır. Yapay zekâ kodu hızlıca üretebilir, ancak yine de net bir brief’e ihtiyaç duyar.

Şunları not edin:

• ne sattığınız
• ilk sürümde kaç ürün istediğiniz
• müşterilerin doğrudan satın alıp alamayacağı ya da yalnızca bir talep gönderip gönderemeyeceği
• hangi sayfalara ihtiyacınız olduğu
• her ürünün hangi bilgilere ihtiyaç duyduğu

Basit bir mağaza için ilk sürüm genellikle şunlara ihtiyaç duyar:

• bir ana sayfa
• bir mağaza veya katalog sayfası
• bir ürün detay sayfası
• bir sepet sayfası veya ödeme butonu
• bir hakkımızda veya iletişim sayfası

Ayrıca ürün verilerinin nasıl yönetileceğine de karar verin. Eğer yalnızca birkaç ürününüz varsa, sitede sabitlenmiş ürün içeriğiyle başlayabilirsiniz. Ürünleri, müşteri hesaplarını veya sipariş verilerini daha sonra yönetmek istiyorsanız, işte o zaman bir veritabanı önem kazanır.

İlk yapımı dar tutun. Akışı doğrulamak için üç ila altı ürün yeterlidir.

Moremade’de web sitesini doğal bir dille tarif edersiniz ve AI agent React ve Tailwind kodunu yazar. Sonra canlı bir önizleme alırsınız ve siteyi sohbet ederek değiştirmeye devam edebilirsiniz.

İlk prompt’unuz yapı, stil ve ana etkileşimleri kapsamalı. Sayfada nelerin olması gerektiği konusunda net olun, ancak her pikseli belirtmeye çalışmayın.

Faydalı bir ilk prompt şunları içerir:

• mağaza türü
• oluşturulacak sayfalar
• gösterilecek ürün alanları
• düzen stili
• ödeme davranışı
• içerik tonu veya marka kısıtları

Örnek:

El yapımı mum markası için küçük bir online mağaza oluşturun. Bir ana sayfa, mağaza sayfası, ürün detay sayfası, sepet sayfası ve iletişim sayfası oluşturun. Sıcak nötr renkler ve net ürün kartlarıyla temiz, minimal bir düzen kullanın. Ad, fiyat, kısa açıklama, koku notları ve yer tutucu ürün görselleri olan altı örnek ürün ekleyin. Ürün sayfası görselleri, açıklamayı, içerikleri ve sepete ekle butonunu göstermeli. Sepet, kullanıcıların adet değiştirmesine ve ara toplamı görmesine izin vermeli. Siteyi duyarlı ve мобilde kullanımı kolay yapın.

İlk yapımdan sonra canlı önizlemeyi bir düzenleme aracı olarak kullanın. Yapı tamamen yanlış değilse sıfırdan başlamayın. Genellikle küçük ve doğrudan istekler yapmak daha iyidir.

Moremade’de değişiklikleri sohbet ederek yapabilir, bir öğeyi işaret edip düzenlemek için görsel denetleyiciyi kullanabilir ve neyin değiştiğini görmek için kod görünümünü kontrol edebilirsiniz.

İyi takip prompt’ları spesifik ve yereldir. Bir seferde tek bir iyileştirme isteyin.

Örnekler:

• "Ürün ızgarasını masaüstünde 3 sütun, tablette 2 sütun yapın. Ürün kartlarını eşit yükseklikte tutun ve sepete ekle butonunu alt kısma sabitleyin."
• "Ürün sayfasında koku notlarını içeriklerin üstüne taşıyın, sepete ekle butonunun altına küçük bir kargo notu ekleyin ve ana görseli masaüstünde daha büyük yapın."
• "Ana sayfa hero alanını sadeleştirin. Daha kısa bir başlık, bir destekleyici cümle ve mağaza sayfasına giden birincil bir buton kullanın."

Kalitenin büyük kısmı bu aşamada gelir. Boşlukları, ürün hiyerarşisini, buton etiketlerini, boş durumları ve sepet akışının anlaşılır olup olmadığını kontrol edin.

Her ilk sürüm tam bir backend’e ihtiyaç duymaz.

Eğer yalnızca tanıtım tarzı bir mağaza ya da tıklanabilir bir demo istiyorsanız, ürünleri front-end kodunda tutup orada durabilirsiniz. Müşterilerin ödeme yapmasını istiyorsanız Stripe ekleyin. Giriş yapma, kayıtlı kullanıcı verisi veya saklanan ürün kayıtları gerekiyorsa Supabase ekleyin.

Moremade her ikisi için de yerleşik bağlayıcılara sahiptir.

Stripe’ı şu durumlarda kullanın:

• sizin belirlediğiniz gerçek fiyatlarla ödeme
• küçük bir katalog için basit bir ödeme yolu

Supabase’i şu durumlarda kullanın:

• müşteri girişi
• ürünler veya siparişler için veritabanı
• dosya depolama

Birçok küçük mağaza için Stripe, eklenen ilk gerçek entegrasyondur. Pratik bir takip prompt’u şu olabilir:

• "Sitede gösterilen ürün fiyatlarını kullanarak ödemeyi Stripe’a bağlayın. Sepet sayfasını koruyun, ödeme öncesinde sipariş özetini gösterin ve mobilde ödeme butonlarını net hale getirin."

Daha sonra müşteri hesaplarına veya stokla ilgili verilere ihtiyaç duyarsanız, bunu ilk sürüme zorla sığdırmak yerine Supabase’i eklemek mantıklı bir adımdır.

Küçük mağazaların çoğu, masaüstünde tasarlamış olsanız bile, önce мобilde değerlendirilir.

Şu bölümleri dikkatlice kontrol edin:

• ana sayfa hero alanı yüksekliği ve buton görünürlüğü
• ürün kartı okunabilirliği
• ürün sayfalarında görsel kırpılması
• sepet adet kontrolleri
• ödeme butonu konumu
• form alanları ve dokunma hedefleri

Düz dilde düzeltme isteyin. Örneğin:

• "Mobil menüyü daha büyük dokunma alanlarıyla daha sade yapın ve sepet ikonunu başlıkta görünür tutun."
• "Telefonlarda ürün görselini ürün detaylarının üstüne yerleştirin ve yan boşlukları biraz azaltın."

Bir şey yanlış görünüyorsa ama bunu iyi tarif edemiyorsanız, önce görsel denetleyiciyle öğeyi işaret edin, sonra değişikliği isteyin.

Site doğru görünüyorsa, yayınlayın.

Moremade, tek tıkla ücretsiz yourname.moremade.ai alt alan adına yayınlayabilir. Ücretli planlarda özel alan adı bağlayabilirsiniz. Alan adları Moremade içinde de satın alınabilir.

Basit bir lansman yolu şöyledir:

• inceleme için ücretsiz alt alan adına yayınlayın
• bağlantıları, sepet akışını ve ödemeyi test edin
• mağaza hazır olduğunda gerçek alan adını bağlayın

Platform dışında bir kopya tutmak istiyorsanız, tam kaynak kodunu istediğiniz zaman ZIP olarak dışa aktarabilir veya GitHub’a gönderebilirsiniz. Web siteleri gerçek React ve Tailwind kodudur; yani size ait olmayan kapalı bir formata bağlı kalmazsınız.

En büyük hata, AI’dan çok fazla şeyi çok erken yapmasını istemektir.

Şu hatalardan kaçının:

• basit bir katalog ve ödeme yerine 20 özellikle başlamak
• ürün veya sayfa detayı olmadan "bana bir online mağaza yap" gibi belirsiz bir prompt yazmak
• müşterilerin neden hesaba ihtiyacı olduğunu bilmeden giriş eklemek
• tek bir istekte birkaç tasarım yönünü karıştırmak
• en sona bırakana kadar mobil testi atlamak
• bir problemi ayıklarken yapı ve stili aynı prompt’ta değiştirmek

Daha iyi bir yöntem katmanlar halinde inşa etmektir:

1. Temel mağaza yapısını üretin.
2. Düzeni ve içeriği düzeltin.
3. Müşterilerin şimdi ödeme yapması gerekiyorsa Stripe ekleyin.
4. Yalnızca saklanan veri veya giriş gerekiyorsa Supabase ekleyin.
5. Yayınlayın, test edin ve ardından yineleyin.

Bu yaklaşım projeyi anlaşılır tutar ve Build Units’i önlenebilir yeniden yazımlara harcamayı engeller.