Vibe Coding ile SaaS Uygulama Geliştirme: Adım Adım Rehber
Vibe Coding ile SaaS uygulaması nasıl geliştirilir? YapayZekaChatbot.com örneği üzerinden AI destekli yazılım geliştirme süreci. Cursor ve Claude Code ile production-ready uygulama.
SaaS (Software as a Service) uygulaması geliştirmek, geleneksel yöntemlerle aylar süren ve yüksek maliyetli bir süreç. Ancak Vibe Coding ile bu süreyi haftalarla ölçebilirsiniz.
Bu rehberde, YapayZekaChatbot.com projesini örnek alarak, Vibe Coding ile nasıl production-ready bir SaaS uygulaması geliştireceğinizi adım adım anlatacağım.
SaaS Geliştirmede Vibe Coding Avantajları
Geleneksel vs Vibe Coding
| Kriter | Geleneksel | Vibe Coding | |--------|------------|-------------| | Geliştirme Süresi | 3-6 ay | 2-4 hafta | | Ekip Büyüklüğü | 3-5 kişi | 1-2 kişi | | Maliyet | 50.000-200.000 TL | 5.000-20.000 TL | | İterasyon Hızı | Haftalar | Saatler |
Neden SaaS için Vibe Coding?
1. Hızlı MVP Fikrinizi hızlıca test edin. Pazara çıkış sürenizi %80 kısaltın.
2. Düşük Risk Az yatırımla başlayın. Fikir tutmazsa kayıp minimal.
3. Hızlı Pivot Kullanıcı geri bildirimlerine göre hızlıca değişiklik yapın.
4. Tek Kişilik Ekip Teknik kurucu ortak aramadan başlayın.
Case Study: YapayZekaChatbot.com
YapayZekaChatbot.com, web sitelerine 30 saniyede AI chatbot ekleyen bir SaaS platformudur. Tamamen Vibe Coding ile geliştirildi.
Proje Özeti
- Fikir: Web sitelerine kolay AI chatbot entegrasyonu
- Hedef Kitle: KOBİ'ler, e-ticaret siteleri, ajanslar
- Gelir Modeli: Aylık abonelik (freemium)
- Geliştirme Süresi: 2 hafta
- Geliştirici: 1 kişi
Teknoloji Stack
Frontend: Next.js 14, TypeScript, Tailwind CSS
Backend: Next.js API Routes, Prisma ORM
Database: PostgreSQL
AI: OpenAI GPT-4, Anthropic Claude
Auth: NextAuth.js
Deployment: Vercel + Railway
Adım Adım Geliştirme Süreci
Hafta 1: Temel Altyapı
Gün 1-2: Proje Kurulumu
Cursor'da ilk prompt:
Next.js 14 projesi oluştur. App Router kullan. TypeScript ve Tailwind CSS ekle.
Proje yapısı:
- app/ (pages)
- components/ (UI components)
- lib/ (utilities)
- prisma/ (database)
Temel sayfalar:
- Ana sayfa (landing)
- Login/Register
- Dashboard
- Chatbot ayarları
Veritabanı şeması:
Prisma şeması oluştur:
User:
- id, email, password, name, createdAt
Tenant (müşteri hesabı):
- id, name, userId, plan, createdAt
Chatbot:
- id, tenantId, name, welcomeMessage, primaryColor, position
KnowledgeBase:
- id, chatbotId, content, embedding
Conversation:
- id, chatbotId, sessionId, createdAt
Message:
- id, conversationId, role, content, createdAt
Gün 3-4: Authentication
Auth sistemi:
NextAuth.js ile authentication ekle:
- Email/password login
- Google OAuth (opsiyonel)
- Session yönetimi
- Protected routes
Tenant bazlı yetkilendirme:
- Her kullanıcı bir tenant'a sahip
- Tenant içinde birden fazla chatbot
- Role-based access (owner, admin, member)
Middleware:
Middleware oluştur:
- /dashboard/* rotaları için auth kontrolü
- Tenant bilgisini session'a ekle
- API route'ları için token doğrulama
Hafta 1: Chat Engine
Gün 5-7: AI Entegrasyonu
Chat fonksiyonu:
OpenAI API kullanarak chat fonksiyonu yaz:
Gereksinimler:
- Streaming response (SSE)
- Conversation history
- System prompt (chatbot ayarlarından)
- Knowledge base context (RAG)
- Rate limiting
- Error handling
Endpoint: POST /api/chat
Body: { chatbotId, message, sessionId }
Response: Server-Sent Events stream
Knowledge Base (RAG):
RAG sistemi oluştur:
1. Doküman yükleme:
- PDF, TXT, MD dosyaları
- Web sitesi URL'si (scraping)
- Manuel metin girişi
2. Embedding:
- OpenAI text-embedding-3-small
- Chunk size: 500 token
- Overlap: 50 token
3. Retrieval:
- Cosine similarity search
- Top 5 relevant chunks
- Context window'a ekleme
Hafta 2: Widget ve Dashboard
Gün 8-10: Embed Widget
Widget sistemi:
Herhangi bir web sitesine embed edilebilecek chatbot widget'ı oluştur:
Gereksinimler:
- Tek satır script kodu ile çalışsın
- iframe içinde render
- Responsive tasarım
- Özelleştirilebilir renkler
- Pozisyon seçimi (sağ alt, sol alt)
- Minimize/maximize
- Mobile uyumlu
Script örneği:
<script src="https://widget.yapayzekachatbot.com/widget.js"
data-chatbot-id="xxx" async></script>
Widget builder:
Widget önizleme ve özelleştirme sayfası:
- Renk seçici (primary, secondary)
- Pozisyon seçimi
- Karşılama mesajı
- Avatar yükleme
- Canlı önizleme
- Embed kodu kopyalama
Gün 11-12: Dashboard
Analytics dashboard:
Dashboard sayfası oluştur:
Metrikler:
- Toplam konuşma sayısı
- Bugünkü konuşmalar
- Ortalama mesaj sayısı
- En çok sorulan sorular
- Kullanıcı memnuniyeti (opsiyonel rating)
Grafikler:
- Günlük konuşma trendi (son 30 gün)
- Saat bazlı dağılım
- Cihaz dağılımı (mobile/desktop)
Konuşma geçmişi:
Konuşma listesi ve detay sayfası:
Liste:
- Tarih, session ID, mesaj sayısı
- Filtreleme (tarih aralığı)
- Arama (mesaj içeriği)
Detay:
- Tüm mesajlar (user/assistant)
- Timestamp
- Kullanılan knowledge base chunks
Gün 13-14: Test ve Deployment
Test:
Test senaryoları yaz:
Unit tests:
- Chat fonksiyonu
- Auth middleware
- API endpoints
Integration tests:
- User registration flow
- Chatbot creation
- Widget embed
E2E tests (Playwright):
- Login/logout
- Dashboard navigation
- Chat widget interaction
Deployment:
Vercel deployment ayarla:
1. Environment variables:
- DATABASE_URL
- OPENAI_API_KEY
- NEXTAUTH_SECRET
- NEXTAUTH_URL
2. Build settings:
- Framework: Next.js
- Build command: npm run build
- Output directory: .next
3. Domain:
- yapayzekachatbot.com
- widget.yapayzekachatbot.com (subdomain)
Kritik Öğrenimler
1. Küçük Adımlarla İlerleyin
Büyük istekler yerine küçük, test edilebilir parçalar halinde geliştirin.
Kötü: “Tüm chat sistemini yaz”
İyi:
- “Basit bir chat endpoint'i oluştur”
- “Streaming response ekle”
- “Conversation history ekle”
- “Knowledge base entegrasyonu yap”
2. Bağlam Verin
AI'a projenin mevcut durumunu anlatın.
Mevcut durum:
- User ve Tenant modelleri hazır
- Auth sistemi çalışıyor
- Dashboard layout'u var
Şimdi chatbot CRUD işlemlerini ekle:
- Chatbot oluşturma formu
- Chatbot listesi
- Chatbot düzenleme
- Chatbot silme
3. Hataları Açıklayın
Hata aldığınızda, hatayı ve beklenen davranışı açıklayın.
Hata: "TypeError: Cannot read property 'id' of undefined"
Dosya: app/api/chat/route.ts, satır 45
Beklenen: chatbot.id değeri dönmeli
Mevcut: chatbot undefined geliyor
Muhtemel sebep: Prisma query'de include eksik olabilir
4. Kod Review Yapın
AI ürettiği kodu kontrol edin:
- Güvenlik açıkları var mı?
- Performans sorunları var mı?
- Best practice'lere uygun mu?
Bu kodu review et:
- SQL injection riski var mı?
- Rate limiting uygulanmış mı?
- Error handling yeterli mi?
- TypeScript types doğru mu?
Yaygın Hatalar ve Çözümleri
1. Çok Büyük İstekler
Hata: “Tüm uygulamayı yaz” Çözüm: Küçük, bağımsız parçalara bölün
2. Bağlam Eksikliği
Hata: AI mevcut kodu bilmiyor Çözüm: İlgili dosyaları context'e ekleyin (Cursor'da @file)
3. Belirsiz İstekler
Hata: “Daha iyi yap” Çözüm: Spesifik olun: “Loading state ekle, error handling yap, TypeScript types düzelt”
4. Test Etmeden İlerleme
Hata: Kod çalışmadan devam etmek Çözüm: Her adımda test edin, çalıştığından emin olun
Maliyet Analizi
Geliştirme Maliyetleri
| Kalem | Maliyet | |-------|---------| | Cursor Pro (1 ay) | $20 | | Vercel Pro | $20/ay | | Railway (DB) | ~$5/ay | | OpenAI API (geliştirme) | ~$50 | | Domain | ~$15/yıl | | Toplam (ilk ay) | ~$110 |
Karşılaştırma
Geleneksel geliştirme:
- 3 developer x 3 ay x 30.000 TL = 270.000 TL
- Sunucu, araçlar: 20.000 TL
- Toplam: ~290.000 TL
Vibe Coding:
- 1 kişi x 2 hafta
- Araçlar: ~4.000 TL
- Toplam: ~4.000 TL
Tasarruf: %98
Sonraki Adımlar
YapayZekaChatbot.com'un ilk versiyonu 2 haftada hazırdı. Sonraki iterasyonlar:
Hafta 3-4:
- Stripe entegrasyonu (ödeme)
- Plan limitleri
- Email bildirimleri
Ay 2:
- Analytics geliştirmeleri
- A/B testing
- Multi-language support
Ay 3:
- API erişimi
- Webhook'lar
- White-label seçeneği
Sonuç
Vibe Coding ile SaaS geliştirmek artık herkesin erişebileceği bir beceri. Doğru araçlar ve yaklaşımla, fikirlerinizi haftalar içinde gerçeğe dönüştürebilirsiniz.
Başlamak İçin:
- Bugün: Cursor veya Windsurf indirin
- Bu hafta: Basit bir CRUD uygulaması yapın
- Bu ay: Gerçek bir SaaS fikri üzerinde çalışın
- 3 ay içinde: İlk müşterilerinizi edinin
Vibe Coding eğitimi ve SaaS geliştirme danışmanlığı için iletişime geçin.
İlgili Yazılar:
Etiketler: #VibeCoding #SaaS #Startup #MVP #YapayZeka #Cursor #ClaudeCode