AI ile Üyelik Sitesi Nasıl Kurulur

Prompt yazmadan önce, sitenin gerçekten neye ihtiyacı olduğunu netleştirin.

Bir üyelik sitesi veya kurs sitesi için temel unsurları listeleyin:

• Genel sayfalar: ana sayfa, fiyatlandırma, hakkında, iletişim
• Üye sayfaları: kontrol paneli, kurs kütüphanesi, ders sayfası, hesap
• Temel aksiyonlar: kaydol, giriş yap, erişim satın al, derslere göz at, ilerlemeyi takip et
• İçerik türleri: kurslar, modüller, dersler, indirmeler, referanslar, SSS
• Kullanıcı rolleri: ziyaretçi, üye, yönetici

Ayrıca neyin herkese açık, neyin korumalı olması gerektiğine karar verin.

Birkaç örnek:

• Ücretli bir toplulukta herkese açık bir açılış sayfası, fiyatlandırma, ödeme, üye kontrol paneli ve profil sayfası gerekebilir.
• Bir online kurs sitesinde satış sayfası, kurs kataloğu, ders sayfaları, giriş ve basit bir ilerleme arayüzü gerekebilir.
• Ücretsiz bir üye kütüphanesinde ödeme değil, sadece giriş ve korumalı içerik gerekebilir.

İlk sürümü küçük tutun. Tek bir iyi açılış sayfası, bir fiyatlandırma sayfası, bir kontrol paneli ve bir ders sayfası çoğu zaman fikri test etmek için yeterlidir.

Moremade’de siteyi doğal dille anlatırsınız ve AI ajanı kaynak kodu yazar. Web siteleri için bu, gerçek React ve Tailwind kodu anlamına gelir. Ardından canlı ön izlemeyi inceleyip sohbetle değiştirmeye devam edebilirsiniz.

İlk promptunuz şu konularda net olmalıdır:

• Site türü
• İstediğiniz sayfalar
• Görsel stil
• Ana kullanıcı akışı
• Birinci sürüm için kabul edilebilir yer tutucular

İşte iyi bir başlangıç promptu:

Studio Notes adlı bir online kurs üyeliği için bir web sitesi oluştur. Bol boşluklu, temiz ve modern bir düzen ile sade tipografi kullan. Genel bir ana sayfa, fiyatlandırma sayfası, giriş sayfası, üye kontrol paneli, kurs kütüphanesi ve ders sayfası oluştur. Ana sayfa teklifi açıklamalı ve net bir çağrıya sahip olsun. Kontrol paneli kayıtlı kursları ve son dersleri göstersin. Kütüphane ilerleme etiketleri olan kurs kartları göstersin. Ders sayfasında video alanı, ders özeti, indirilebilir kaynaklar bölümü ve önceki/sonraki gezinme olsun. Mobil uyumlu olsun.

Bu, her ayrıntıyı aşırı belirtmeden kullanışlı bir ilk taslak elde etmek için yeterlidir.

İlk oluşturma tamamlandıktan sonra, canlı ön izlemeyi ilk kez gelen bir kullanıcı gibi inceleyin.

Şunları kontrol edin:

• Ana sayfa teklifi hızlıca açıklıyor mu?
• Ana çağrı net mi?
• Üye sayfaları genel sayfalardan farklı mı görünüyor?
• Gezinme anlaşılır mı?
• Ders sayfası sadece süs değil, gerçekten öğrenmeyi destekliyor mu?

Sonra küçük adımlarla iyileştirin. Kısa ve hedefli promptlar, tüm özeti yeniden yazmaktan daha iyi çalışır.

Üç yararlı takip promptu:

• "Fiyatlandırma sayfasını basitleştir. Sadece üç plan kartı kalsın, kurs erişimi ve indirmeler için bir karşılaştırma satırı ekle ve birincil butonu daha belirgin yap."
• "Dönen kullanıcılar için üye kontrol panelini yeniden tasarla. Önce 'Öğrenmeye devam et', sonra son dersler, ardından tüm kurslar gelsin. Her kurs kartında daha net ilerleme göstergeleri kullan."
• "Ders sayfasının mobilde okunabilirliğini iyileştir. Yatay boşlukları azalt, ders özetinde satır aralığını artır ve küçük ekranlarda önceki/sonraki ders butonlarını içerik alanının altında sabit tut."

Moremade ayrıca görsel bir denetleyici içerir; böylece bir öğeyi seçip daha doğrudan değiştirebilirsiniz. İsterseniz oluşturulan kodu iterasyon sırasında incelemek için kod görünümünü de kullanabilirsiniz.

Her üyelik sitesi ilk günden her şeye ihtiyaç duymaz.

Korunan içerik, üye hesapları veya kaydedilmiş ilerleme gerekiyorsa giriş ekleyin. Erişim bir satın almaya bağlıysa ödeme ekleyin. Bir kurs fikrini doğruluyorsanız, tam bir üye alanı oluşturmadan önce herkese açık bir satış sayfası ve ödeme akışıyla başlayabilirsiniz.

Kullanıcı hesapları ve korumalı içerik için Moremade’de Supabase ile çalışan yerleşik bir bağlantı bulunur; bu bağlantı şunları yönetebilir:

• Veritabanı
• Giriş yapma
• Dosya depolama

Ücretli erişim için Moremade’de, belirlediğiniz fiyatlarla ödeme alma işlemi için yerleşik bir Stripe bağlantısı vardır.

Mantıklı bir sıralama şöyledir:

• Önce genel siteyi ve üye ekranlarını oluşturun
• Kullanıcıların hesaba ihtiyacı varsa Supabase ekleyin
• Erişim için ödeme gerekiyorsa Stripe ekleyin
• Proje büyüdüğünde iki akışı sonra birbirine bağlayın

Burada yararlı olabilecek örnek promptlar:

• "Supabase kullanarak giriş ve kayıt akışları ekle. Kontrol panelini, kütüphaneyi ve ders sayfalarını koru; giriş yapmamış kullanıcılar giriş sayfasına yönlendirilsin."
• "Pro Member adlı tek bir üyelik planı için Stripe ödeme akışı ekle. Fiyatlandırma sayfası ödeme butonlarına götürsün ve nelerin dahil olduğunu göstersin."
• "Kurs kayıtlarını ve ders kayıtlarını Supabase’de sakla ve bunları kurs kütüphanesi ile ders sayfası düzenlerine yükle."

Sitenizde üye indirmeleri, ders dosyaları veya korumalı PDF’ler varsa, Supabase dosya depolama bunun için plan yapmanın en doğal yeridir.

Bir üyelik sitesi çoğu zaman insanların beklediğinden daha çok telefonda kullanılır. Dersler e-postadan açılır, kullanıcılar ilerlemeyi hareket halindeyken kontrol eder ve ödeme sürtünmesi en hızlı küçük ekranlarda ortaya çıkar.

Her önemli sayfayı мобилde inceleyin:

• Ana sayfa
• Fiyatlandırma sayfası
• Giriş sayfası
• Kontrol paneli
• Kurs kütüphanesi
• Ders sayfası

Pratik sorunlara bakın:

• Butonların çok yakın olması
• Kartların fazla uzaması
• Taşan tablolar veya karşılaştırma satırları
• Ekranı domine eden video veya medya alanları
• Ders metninin okunmasının zorlaşması
• İçeriği kapatan sabit gezinme

Sonra doğrudan düzeltmeler isteyin.

Örneğin:

• "Mobilde, fiyatlandırma karşılaştırmasını her plan kartının altında basit özellik listelerine dönüştür."
• "Küçük ekranlarda kontrol paneli kart yoğunluğunu azalt ve her kurs için tek net birincil eylem göster."
• "Ders sayfası içeriğini masaüstünde daha dar, мобилde ise tam genişlikte yap."

Bu kısım önemlidir çünkü ilk oluşturulan sürüm çoğu zaman küçük ekran ayrıntılarından önce yapıyı doğru kurar.

İlk sürüm kullanılabilir hale geldiğinde, yayınlayın.

Moremade, yourname.moremade.ai biçimindeki ücretsiz alt alana tek tıkla yayın yapabilir. Bu, dahili inceleme, taslak paylaşımı veya ilk lansmanı test etmek için yeterlidir.

Ücretli plandaysanız özel bir alan adı bağlayabilirsiniz. Alan adları Moremade içinden de satın alınabilir.

Mantıklı bir yayın akışı şöyledir:

• Önce ücretsiz alt alana yayınlayın
• Ana kullanıcı yolculuğunu kendiniz tıklayarak gezin
• Kullanıyorsanız giriş, ödeme ve korumalı sayfaları kontrol edin
• Taslağı birkaç test kullanıcıyla paylaşın
• Temel akış stabil olduğunda özel alan adını bağlayın

Kaynak kod herhangi bir zamanda ZIP olarak dışa aktarılabildiği veya GitHub’a gönderilebildiği için projeyi sonsuza kadar tek bir yerde barındırmak zorunda değilsiniz.

İlk sorunların çoğu, çok fazla şeyi çok erken istemekten veya kullanıcı akışını atlamaktan kaynaklanır.

Yaygın hatalar:

• "Bir kurs platformu oluştur" gibi, sayfa veya eylem belirtmeyen belirsiz bir ilk prompt yazmak
• Gerçekte neyin ücretli olduğuna karar vermeden ödeme eklemek
• İlk sürümde çok fazla kullanıcı rolü oluşturmak
• Ana çağrıyı tasarım ayrıntılarının altında gizlemek
• Korumalı sayfalar için giriş yapmamış deneyimi unutmak
• Kontrol panelini, öğrenmeye devam edilecek bir yer yerine sıradan bir yönetici ekranı gibi ele almak
• Ders sayfalarında ve ödeme akışında mobil kontrolleri atlamak

Daha iyi yaklaşım, önce tek bir uçtan uca akışı çalışır hale getirmektir:

• Ziyaretçi ana sayfaya gelir
• Ziyaretçi fiyatlandırmayı veya teklifi görür
• Ziyaretçi kaydolur veya ödeme yapar
• Üye kontrol paneline ulaşır
• Üye bir dersi açar

Bu yol net şekilde çalışıyorsa, site zaten kullanışlıdır. Geri kalan her şey sonraki promptlar ve sürüm geçmişiyle iyileştirilebilir.