AI ile Etkinlik Kayıt Sitesi Nasıl Oluşturulur

Bir prompt yazmadan önce sitenin minimum sürümünü not edin.

Tipik bir etkinlik kayıt sitesi için bu genellikle şunları içerir:

• etkinlik adı, tarih, mekan, program, konuşmacılar ve SSS içeren bir açılış sayfası
• form içeren bir kayıt sayfası veya bölümü
• gönderim sonrası bir onay durumu
• iletişim bilgileri veya destek e-postası
• birçok katılımcı telefondan kayıt yaptırdığı için mobil uyumlu bir düzen

Ardından hangi verileri toplamanız gerektiğine karar verin. Yaygın alanlar şunlardır:

• ad soyad
• e-posta adresi
• şirket veya kuruluş
• bilet türü
• diyet veya erişilebilirlik gereksinimleri

Sonra hesaplara veya ödemelere ihtiyacınız olup olmadığını belirleyin.

• Kayıt ücretsizse ve yalnızca bilgileri toplamanız gerekiyorsa basit bir form kullanın.
• Ücretli bilet satıyorsanız Stripe ekleyin.
• Giriş, kayıtlar için bir veritabanı veya dosya depolama ihtiyacınız varsa Supabase ekleyin.

Ayrıca sitenin kim tarafından güncelleneceğine karar verin. Etkinlik ayrıntıları değişebilir durumdaysa, daha sonraki düzenlemelerin sohbet, görsel denetçi veya kod görünümü üzerinden kolay yapılabilmesi için yapıyı basit tutun.

Moremade, ilk prompt sayfalar, içerik, stil ve davranış açısından spesifik olduğunda en iyi sonucu verir. Sadece "bir etkinlik sitesi" istemek yerine gerçekten ihtiyaç duyduğunuz parçaları isteyin.

İyi bir ilk prompt şunları belirtmelidir:

• etkinliğin türü
• gerekli sayfa veya bölümler
• kayıt formundaki alanlar
• görsel stil ve ton
• mobil uyumluluk
• önceden bildiğiniz entegrasyonlar

Örnek ilk prompt:

North Coast Product Day adlı bir günlük tasarım konferansı için React + Tailwind etkinlik kayıt sitesi oluştur. Hero, program, konuşmacı kartları, mekan bilgileri, SSS, sponsorlar ve kayıt bölümü içeren bir ana sayfa ekle. Kayıt formu ad soyad, e-posta, şirket, iş unvanı, bilet türü, diyet gereksinimleri ve erişilebilirlik ihtiyaçlarını toplamalı. Temiz, profesyonel bir stil; iyi boşluklar ve net butonlar kullan. Mobil uyumlu olsun. Form gönderiminden sonra bir onay ekranı ekle. Şimdilik ödemeleri ekleme.

Bu, işleri daha en başta aşırı karmaşıklaştırmadan kullanılabilir bir ilk sürüm üretmek için yeterlidir.

Moremade siteyi oluşturduktan sonra, canlı önizlemeyi ilk kez gelen bir katılımcı gibi kontrol edin.

Pratik sorunlara bakın:

• Etkinlik bilgisi ilk ekranda görünür mü?
• Kayıt butonu belirgin mi?
• Form çok fazla şey mi soruyor?
• Tarih, konum ve program kolay taranabiliyor mu?
• Sayfa güvenilir ve eksiksiz mi görünüyor?

Sonra kısa ve doğrudan takip promptlarıyla iyileştirin. Üç yararlı örnek:

• "Kayıt bölümünü ana sayfada daha yukarı taşı ve Register yazan sabit bir üst menü butonu ekle."
• "Konuşmacı kartlarındaki metni kısalt, program saatlerini daha kolay taranır hale getir ve belirgin bir mekan haritası yer tutucu bölümü ekle."
• "Kayıt formunu iki adıma ayır: önce katılımcı bilgileri, sonra bilet türü ve gereksinimler; bir ilerleme göstergesi ekle."

Bu yaklaşım, her şeyi ilk promptta kusursuzlaştırmaya çalışmaktan genellikle daha hızlıdır. Görsel bir detay yanlışsa, görsel denetçiyi kullanarak bir öğeyi işaret edip değiştirebilirsiniz.

Her etkinlik sitesinin ilk günden backend özelliklerine ihtiyacı yoktur.

Etkinlik ücretsizse, yalnızca bir forma ve onay durumuna ihtiyacınız olabilir. Kayıtları saklamanız, kullanıcı girişi almanız veya katılımcı kayıtlarını yönetmeniz gerekiyorsa, veritabanı, giriş ve dosya depolama için Supabase ekleyin.

Biletler için ücret alıyorsanız, belirlediğiniz fiyatlarla Stripe checkout ekleyin.

Mantıklı bir sıra şudur:

• önce genel sayfaları ve formu doğru hale getirin
• gönderimlerin kaydedilmesi gerekiyorsa veri depolamayı ekleyin
• bilet türleri ve fiyatlar netleştikten sonra ödemeleri ekleyin

Supabase için bir registrations tablosu ve ona bağlı bir form gönderim akışı isteyin. Stripe için, bilet türüne dayalı bir checkout yolu isteyin.

Promptu somut tutun. Örneğin:

• "Kayıt formunu Supabase’e bağla ve gönderimleri name, email, company, ticket_type, dietary_requirements ve accessibility_needs alanlarına sahip bir registrations tablosunda sakla."
• "Standard ve VIP biletler için Stripe checkout ekle; bilet seçimi checkout’tan önce formda yapılsın."

Moremade, Supabase ve Stripe için yerleşik bağlayıcılar içerir; bu yüzden bunları baştan değil, siteye ihtiyaç duyulduğunda ekleyebilirsiniz.

Birçok etkinlik ekibi ana sayfaya odaklanır ve formu telefon boyutundaki bir ekranda test etmeyi unutur. Birçok terk etme burada olur.

Mobil önizlemede şunları kontrol edin:

• buton boyutları ve dokunma alanları
• form alanları arasındaki boşluk
• tarih ve programın okunabilirliği
• içeriği kapatan sabit öğeler
• küçük ekranlarda ağır hissettiren uzun formlar

Birkaç hedefli değişiklik çoğu zaman işe yarar:

• etiketleri kısaltın
• ilişkili alanları gruplayın
• isteğe bağlı soruları daha aşağı taşıyın
• form uzunsa onu adımlara bölün

Bir şey garip geliyorsa sorunu açıkça yazın. Örneğin: "Mobilde kayıt formu çok sıkışık. Boşluğu artır, alanları dikey diz ve gönder butonunu girdileri kapatmadan görünür tut."

Moremade React + Tailwind kodu ürettiği için, statik bir maket değil, gerçek bir uygulamayı düzenliyorsunuz.

Akış çalıştığında, yayınlayın.

Moremade ile tek tıklamayla ücretsiz yourname.moremade.ai alt alan adına yayın yapabilirsiniz. Ücretli plandaysanız özel alan adı bağlayabilirsiniz. Alan adları Moremade içinde de satın alınabilir.

Pratik bir yayın süreci şöyle görünür:

• önce ücretsiz alt alan adına yayınlayın ve iç inceleme yapın
• canlı kayıt akışını uçtan uca test edin
• metinler, tarihler ve fiyatlandırma onaylandığında son alan adını bağlayın

Yedek tutmak veya projeyi daha sonra bir geliştiriciye devretmek istiyorsanız, tam kaynak kodunu ZIP olarak dışa aktarabilir ya da GitHub’a gönderebilirsiniz. Web siteleri gerçek React + Tailwind kodu olarak oluşturulur, yani platforma bağlı kalmazsınız.

Sorunların çoğu, çok erken aşamada fazla şey yapmaya çalışmaktan veya önemli ayrıntıları belirsiz bırakmaktan kaynaklanır.

Yaygın hatalar:

• alanları, bölümleri veya kullanıcı akışını belirtmeyen genel bir prompt ile başlamak
• bilet türleri ve fiyatlar netleşmeden Stripe eklemek
• gereksiz form alanları toplamak, bu da tamamlama oranlarını düşürür
• kayıt sonrası onay durumunu unutmak
• tüm akışı mobilde test etmemek
• tarihleri, saat dilimini, mekan adresini ve iletişim bilgilerini kontrol etmeden yayın yapmak

İki alışkanlık çok yardımcı olur:

• her seferinde tek bir değişiklik yapın ve her adımdan sonra önizlemeyi inceleyin
• daha büyük düzenlemelerden önce sürüm geçmişini kullanın; böylece karşılaştırma yapabilir veya gerekirse geri alabilirsiniz

Daha fazla kontrol istiyorsanız kod görünümünü kullanın. Daha hızlı düzen aralıkları için görsel denetçiyi kullanıp ardından sohbet üzerinden ince ayar yapın.