Cursor AI ve Claude 3.5 Sonnet ile Sıfırdan Mikro SaaS Geliştirme Rehberi: Hiç Kod Bilmeden İlk Web Uygulamanızı Yayınlayın
Geleneksel yazılım geliştirme süreçlerinin o yüksek duvarları, yapay zeka devrimiyle birlikte tamamen yıkıldı. Eskiden parlak bir Mikro SaaS (Hizmet Olarak Yazılım) fikrini hayata geçirmek; aylarca süren kodlama eğitimleri, binlerce dolarlık yazılımcı bütçeleri ve bitmek bilmeyen hata ayıklama seansları anlamına geliyordu. Bugün ise teknoloji dünyasında bambaşka bir dönem yaşıyoruz.
Bu rehberde, tek bir satır fonksiyon yazmayı bilmeyen bir girişimcinin, Cursor AI kod editörü ve Claude 3.5 Sonnet modelini arkasına alarak sadece birkaç gün içinde nasıl çalışan bir web uygulaması geliştirebileceğini, bizzat deneyimlediğim pratik adımlarla aktaracağım. Eğer fikriniz hazırsa, çayınızı kahvenizi alın; kodlama dünyasının yeni kurallarını birlikte yazıyoruz.
Mikro SaaS Nedir ve Neden Yapay Zeka ile Geliştirilmelidir?
Büyük bütçeli devasa yazılım platformlarının aksine Mikro SaaS, çok spesifik bir problemi çözen, genellikle tek bir ana özelliğe odaklanan ve niş bir kullanıcı kitlesini hedefleyen ufak çaplı bulut yazılımlarıdır. Örneğin; sadece PDF dosyalarını optimize eden bir araç, yapay zeka ile otomatik LinkedIn gönderisi hazırlayan bir platform ya da sadece e-ticaret siteleri için fatura şablonu oluşturan bir web uygulaması birer Mikro SaaS örneğidir.
Yapay zekanın bu alandaki en büyük avantajı, size bir “asistan” gibi değil, kıdemli bir “yazılım mimarı” (Senior Developer) gibi eşlik etmesidir. Klasik yöntemlerle bir kod hatasını (bug) çözmek için saatlerce Stack Overflow sayfalarında gezinirdiniz. Oysa şimdi, Cursor AI içine gömülü çalışan Claude 3.5 Sonnet’e “Bu buton neden çalışmıyor?” diye sormanız, hatanın 3 saniyede tespit edilip düzeltilmesi için yeterli oluyor. Bu hız, sermayesi kısıtlı olan bağımsız girişimciler (Indie Hackers) için hayati bir kaldıraçtır.
Adım 1: Geliştirme Ortamını Kurma ve Cursor AI ile Tanışma
İlk olarak projemizin mutfağını hazırlamamız gerekiyor. Gözünüz korkmasın; hiçbir karmaşık terminal komutuna boğulmayacağız. Bilgisayarımıza kuracağımız sadece iki temel araç var:
- Node.js: Web uygulamamızın arka planda çalışmasını sağlayan motor. Resmi sitesinden en kararlı (LTS) sürümünü indirip ileri-ileri diyerek kuruyoruz.
- Cursor AI: Bu sürecin kalbi. Popüler kod editörü VS Code tabanlı, ancak tamamen yapay zeka ile entegre geliştirilmiş sihirli bir editör.
Cursor AI’ı bilgisayarınıza kurduktan sonra ayarlar bölümünden yapay zeka modeli olarak Claude 3.5 Sonnet‘i seçtiğinizden emin olun. Kod yazma, mantık yürütme ve dosya mimarisi kurgulama konusunda Claude 3.5 Sonnet, şu an piyasadaki en yetenekli ve “insansı kod yazan” modeldir. Masaüstünüzde “ilk-projem” adında boş bir klasör açın ve bu klasörü Cursor AI ile sürükleyerek editörün içine bırakın. Artık başlamaya hazırız.
Adım 2: Claude 3.5 Sonnet ile Proje Mimarisini ve Teknolojileri Belirleme
Hiç kod bilmediğimiz için projenin hangi dille veya hangi kütüphanelerle yazılması gerektiğine de Claude karar verecek. Klavyenizden
Ctrl + L (Mac kullanıyorsanız Cmd + L) tuşlarına basarak Cursor’ın yapay zeka sohbet panelini açın.Sohbet paneline aynen şu tarz samimi ve detaylı bir komut (prompt) yazarak ilk konuşmayı başlatın:
“Selam Claude! Ben hiç kodlama bilmiyorum ama aklımda harika bir Mikro SaaS fikri var. Kullanıcıların yüklediği metinleri analiz edip onlara yapay zeka destekli haftalık sosyal medya planı çıkaran bir web sitesi yapmak istiyorum. Bu proje için modern, hızlı ve hata oranı en düşük hangi teknolojileri kullanmalıyım? Bana sıfırdan başlamam için bilgisayarımın terminaline yazmam gereken ilk komutu verir misin?”
Claude 3.5 Sonnet size harika bir mimari önerecektir. Genellikle modern web dünyasının standardı haline gelen Next.js framework’ünü, görsel tasarım için Tailwind CSS‘i ve veri tabanı gerekiyorsa kurulumu en kolay olan Supabase veya Vercel KV ikilisini tavsiye edecektir. Claude’un size verdiği
npx create-next-app@latest ile başlayan terminal komutunu kopyalayın, Cursor’ın alt kısmında bulunan Terminal sekmesini açıp yapıştırın ve enter tuşuna basın. Tebrikler, ilk projenizin temel iskeleti otomatik olarak kuruldu!Adım 3: Cursor “Composer” Özelliği ile Kodları Otomatik Üretme
Cursor AI’ı sıradan yapay zeka sohbetlerinden ayıran en güçlü özelliği Composer (
Ctrl + I veya Cmd + I) modudur. Klasik ChatGPT’ye kod yazdırdığınızda size parça parça kodlar verir ve bunları hangi dosyaya yapıştıracağınızı şaşırırsınız. Cursor Composer ise projenizin tüm dosyalarını görür, okur ve tek seferde birden fazla dosyayı kendi kendine yaratıp düzenleyebilir.Ctrl + I tuşlarına basarak Composer penceresini açın. Şimdi uygulamamızın ana yüzünü (Frontend) tasarlatacağız. Yapay zekaya şu talimatı verin:“Uygulamamın ana sayfası için modern, minimalist ve koyu tema (dark mode) tasarımına sahip bir arayüz oluşturmanı istiyorum. Sayfada şık bir logo, kullanıcıların metin girebileceği geniş bir yazı alanı (textarea), plan oluşturma butonları ve sonuçların görüntüleneceği estetik kartlar bulunsun. Tasarımda Tailwind CSS kullan ve tüm sayfayıapp/page.jsdosyasına yaz.”
Siz arkanıza yaslanıp izlerken, Cursor saniyeler içinde renk uyumları yakalanmış, buton animasyonları eklenmiş profesyonel bir arayüz kodu üretecektir. Ekrandaki “Accept” (Onayla) butonuna bastığınız an tüm kodlar ilgili dosyalara otomatik olarak işlenir. Tarayıcınızı açıp
localhost:3000 adresine gittiğinizde, hiç kod bilmeden dakikalar içinde harika bir web sitesi tasarımı ayağa kaldırdığınızı göreceksiniz.Adım 4: Yapay Zeka API Bağlantılarını Kurma (Arka Plan Fonksiyonları)
Bir Mikro SaaS uygulamasını çalışan bir işletme haline getiren şey, arka plandaki işlevselliğidir. Bizim senaryomuzda kullanıcının girdiği metnin işlenmesi için harici bir yapay zeka servisine (örneğin OpenAI API veya Anthropic API) bağlanmamız gerekiyor.
Tekrar Cursor Composer’ı açın ve Claude’a işin teknik mantığını çözmesi için şu görevi verin:
“Kullanıcı ‘Plan Oluştur’ butonuna bastığında, ekrandaki metni alıp OpenAI API’sine (veya DeepSeek API) gönderecek güvenli bir API rotası (route) oluşturmanı istiyorum. Gelen yapay zeka yanıtını sayfayı yenilemeden ekrandaki sonuç kartlarına şık bir şekilde yazdır. API anahtarımı güvende tutmak için.env.localdosyasını kullanmayı unutma.”
Claude 3.5 Sonnet, modern yazılım standartlarına uygun olarak verilerinizin çalınmasını engelleyecek güvenlik önlemlerini (Environment Variables) otomatik olarak kurgulayacaktır. Sizin tek yapmanız gereken, ilgili yapay zeka sağlayıcısından aldığınız API anahtarını Claude’un size gösterdiği gizli dosyaya yapıştırmaktır. İşte bu kadar; artık çalışan, girdileri işleyen ve gerçek bir çıktı üreten fonksiyonel bir yazılım sahibisiniz.
Adım 5: Hata Yakalama (Debugging) ve Deneyim Odaklı İpuçları
Yazılım geliştirme sürecinin doğasında hata yapmak vardır. Projenizi çalıştırırken terminalde kırmızı renkli karmaşık kod hataları görebilirsiniz. Eskiden bu durum yeni başlayanların hevesini kırıp projeyi yarıda bırakmalarına neden olurdu. Cursor AI çağında ise hata çözmek projenin en keyifli kısmıdır.
Eğer tarayıcıda veya terminalde bir hata kodu görürseniz, tek yapmanız gereken o hatayı fareyle seçip
Ctrl + L tuşuna basarak sohbet paneline göndermek ve “Burada ne demek istiyor, nasıl düzeltebilirim?” yazmaktır. Claude 3.5 Sonnet, hatanın neden kaynaklandığını insani bir dille açıklayıp projenizdeki hangi satırı değiştirmeniz gerektiğini doğrudan size gösterecektir.Kendi tecrübelerimden yola çıkarak size şu altın ipucunu vermek isterim: Yapay zekaya tek seferde devasa görevler vermeyin. Örneğin “Bana eksiksiz bir e-ticaret sitesi yaz” demek yerine; “Önce sadece ürün listeleme sayfasını yap”, “Şimdi sepete ekleme butonunu kodla”, “Son olarak ödeme adımını entegre et” şeklinde adım adım (milestone) ilerleyin. Bu yöntem, yapay zekanın halüsinasyon görmesini (saçmalamasını) engeller ve sıfır hata ile ilerlemenizi sağlar.
Adım 6: Sıfır Maliyetle Canlıya Alma (Vercel ile Deployment)
Uygulamamız bilgisayarımızda sorunsuz çalışıyor, peki bunu tüm dünyanın erişebileceği gerçek bir web sitesi haline nasıl getireceğiz? Bunun için yazılım dünyasının en büyük nimetlerinden biri olan Vercel platformunu kullanacağız. Vercel, Next.js projelerini saniyeler içinde ücretsiz olarak internete taşır.
- İlk olarak ücretsiz bir GitHub hesabı açın ve projenizi oraya yükleyin (Eğer burayı bilmiyorsanız Cursor’a “Projemi GitHub’a nasıl yüklerim, adım adım komutları yaz” demeniz yeterlidir).
- Ardından Vercel.com sitesine gidin, GitHub hesabınızla giriş yapın.
- “Add New Project” butonuna basarak GitHub’daki projenizi seçin.
- Ayarlar kısmında yer alan “Environment Variables” bölümüne yapay zeka API anahtarınızı ekleyin ve “Deploy” butonuna basın.
Yaklaşık 1 dakika içinde Vercel size
projeniz.vercel.app şeklinde tamamen ücretsiz, SSL sertifikalı (güvenli) canlı bir internet linki verecektir. Artık dünyanın öbür ucundaki bir kullanıcı bile sitenize girip uygulamanızı kullanabilir!Sonuç: Yapay Zeka Çağında Girişimci Olmak
İnternet dünyası büyük bir kabuk değişiminden geçiyor. Artık fikirlerin hayata geçmesi için aylarca kod yazmayı öğrenmek bir zorunluluk değil. Başarılı bir Mikro SaaS girişimcisi olmanın sırrı, satır satır kod ezberlemekten değil; doğru problemi tespit edip, yapay zekaya doğru soruları sorabilmekten (Prompt Mühendisliği) geçiyor.
Cursor AI ve Claude 3.5 Sonnet ikilisi, teknik eksikliklerinizi tamamen kapatan kusursuz birer ortak. Bu rehberde paylaştığım adımları takip ederek ilk uygulamanızı yayına aldığınızda, yazılım dünyasının büyülü kapılarının sizin için ardına kadar açıldığını göreceksiniz. Unutmayın, en kötü çalışan uygulama, hiç yazılmamış olan fikirden çok daha değerlidir. Şimdi sıra sizde; ilk projenizi başlatın ve dijital dünyadaki yerinizi alın!
