Lovable, çoğu kodsuz veya düşük kodlu platforma kıyasla, kullanıcı iş akışının doğal bir uzantısı gibi hissettiren bir yaklaşım sunuyordu.
Bu Lovable AI incelemesinde, kaydolmaktan bir uygulama geliştirmeye ve özelleştirmeye, hataları nasıl ele aldığına kadar tüm deneyimimi adım adım aktaracağım. Sonunda Lovable’ın araç kutunuzda hak ettiği yeri bulup bulmayacağını bileceksiniz.
Lovable.dev Nedir?
Kod öğrenmek veya hantal bir sürükle bırak düzenleyici kullanmak yerine, ne istediğinizi sade İngilizce ile tarif ediyorsunuz. Örneğin, “kullanıcı girişleri ve ödemeler içeren bir gösterge tablosu oluştur” derseniz, bu yapay zeka tabanlı uygulama oluşturucu sizin için çalışan bir uygulama üretir.
Lovable’ı birçok diğer “no-code” araçtan ayıran özellik, aslında gerçek ve düzenlenebilir kod üretmesidir. Bu da geliştiricilerin projeyi GitHub’a aktarabilmesini, genişletebilmesini veya ödemeler için Stripe ve veritabanları için Supabase gibi hizmetlerle entegre edebilmesini sağlar.
Lovable.ai Kimler İçin Uygun?
Lovable AI uygulama oluşturucu, fikirleri hızlıca çalışan uygulamalara dönüştürmek isteyen çok çeşitli kullanıcılar için tasarlandı.
En uygun olduğu kullanıcılar:
- Teknik olmayan kullanıcılar: Geliştirici kiralamadan uygulama oluşturmanıza yardımcı olmak.
- Startup kurucuları ve küçük ekipler: Boilerplate kodla vakit kaybetmeden bir Minimum Viable Product (MVP) oluşturmayı ve test etmeyi kolaylaştırmak için.
- Tasarımcılar ve ürün yöneticileri: Wireframe veya mockup’ları çalışan uygulamalara dönüştürerek mühendislerle uzun geri dönüşüm süreçlerini atlamanızı ve tasarımlarınızı anında hayata geçirmenizi sağlar.
- Deneyimli geliştiriciler: Kimlik doğrulama, veritabanları ve CRUD gibi kurulum görevlerini otomatikleştirerek, özel özellikler ve iş mantığına odaklanmanızı sağlar; üstelik kod tabanı üzerinde tam kontrole sahip olmaya devam edersiniz.
Lovable AI’ın Artıları ve Eksileri
- Kolay kayıt ve yönlendirme (onboarding) süreci
- React ve Tailwind ile gerçek kod üretimi
- Modern geliştirme için TypeScript desteği
- Supabase arka ucuyla yerel entegrasyon
- Ödemeler için dahili Stripe entegrasyonu.
- Ücretsiz planda kod düzenleyici salt okunur
- Yükseltme olmadan hata çözme sınırlı
- Yapay zeka çelişkili talimatları sorgulamadan kabul ediyor
- Çalışma zamanı hataları ilerlemeyi engelleyebilir
Lovable’in Temel Özellikleri
- Yapay zeka ile tam yığın (full-stack) uygulama oluşturma
- Gerçek düzenlenebilir React ve TypeScript kodu
- Stil ve düzenlemeler için Tailwind CSS
- Veritabanı ve kimlik doğrulama için Supabase entegrasyonu
- Ödemeler ve faturalandırma için Stripe entegrasyonu
- Kod versiyon kontrolü için GitHub senkronizasyonu
- Detaylı UI değişiklikleri için görsel düzenleyici
- Prompt tabanlı tasarım ve özellik düzenlemeleri
- Ücretli planlarda özel alan adı desteği
- Topluluk projeleri ile yeniden karıştırma ve önizleme
- Tasarımı koda çevirmek için Figma içe aktarma
- Görev kullanımı için kredi tabanlı sistem
Lovable AI ile Pratik Deneyimim: Adım Adım Rehber
Kayıt sürecinin ne kadar sorunsuz (veya hantal) olduğunu, ilk girişte panonun nasıl göründüğünü ve hiçbir şey inşa etmeden önce ne kadar sezgisel hissettirdiğini kendim deneyimlemek istedim.
Gerçek deneyim, pazarlama iddialarından daha önemlidir; bu yüzden size tam olarak neler yaptığımı ve öne çıkan noktaları anlatacağım.
Başlarken & Kayıt Olma
Doğrudan Lovable.dev ana sayfasından başladım; burası mavi tonlarından pembeye ve turuncuya kayan sıcak bir gradyan arka planına sahipti.
Kayıt ekranı iki bölüme ayrılmıştı: sağ tarafta tanıdık gradyan ve bana “Lovable’dan SaaS girişiminizi oluşturmasını isteyin,” diyen eğlenceli bir giriş kutusu varken, sol tarafta hesap oluşturma yer alıyordu.
Google, GitHub ile devam etme veya e-posta ile kayıt olma seçeneklerim vardı. E-postayı seçtim. E-posta adresimi yazıp bir şifre belirledikten sonra şartları kabul ettim ve Hesabınızı oluşturun butonuna tıkladım.
Lovable beni hemen içeri almadı. Bunun yerine e-postamı doğrulamamı istedi. E-posta sekmeme geçip onay e-postasını hemen buldum ve linke tıkladım. Sistem hızlı bir “Email verified” bilgilendirmesiyle e-postamı doğruladı ve beni kısa bir yönlendirme (onboarding) akışına yönlendirdi.
Burada adımı girdim, Karanlık Modu seçtim ve birkaç hızlı soruyu yanıtladım;
- Lovable’ı ne için kullanacağım (ben Kişisel Projeleri seçtim),
- Kendimi nasıl tanımlayacağım (ben Geliştiriciyi tercih ettim), ve
- Ne inşa ediyordum (ben Web Sitesi / Açılış Sayfasını seçtim).
Son adımda takım arkadaşları davet etmek isteyip istemediğim soruldu, ancak ben tek başıma test ettiğim için Bitire tıkladım.
İlk kez gösterge tablosuna (dashboard) ulaştığımda, tasarımın ana sayfa ile uyumlu ve temiz olduğunu fark ettim. Üstteki büyük giriş kutusu bana “Lovable’dan benim için bir açılış sayfası oluşturmasını isteyin…” derken, sayfanın altı önizleyebileceğim veya yeniden düzenleyebileceğim panolardan SaaS şablonlarına kadar topluluk projeleriyle doluydu.
Hem bir çalışma alanına hem de bir vitrin galerisine adım atmış gibiydim; karşımda bolca ilham kaynağı vardı.
Lovable.dev Üzerinde İlk Uygulamamı Oluşturma
Kayıt olduktan sonra Lovable’da gerçekten bir uygulama oluşturmanın ne kadar kolay, sezgisel ve doğrudan olduğunu görmek istedim.
Ana Lovable panosunda ilk göze çarpan, ortadaki büyük giriş alanıydı; yer tutucu metin olarak “Lovable’dan benim için bir açılış sayfası oluşturmasını isteyin…” yazıyordu. Her şeyin buradan başladığı açıkça belliydi.
Basit bir fikir yazabilirsiniz, ancak ben uygulamanın amacını, kullanıcı rollerini, yönlendirme akışını, pano KPI’larını, müşteri ve proje yönetimini, zaman takibini, PDF önizlemeli faturalamayı, Stripe ödemelerini ve bir müşteri portalını ayrıntılı olarak tanımlayan kapsamlı bir prompt ile devam etmeye karar verdim.
Profesyonel mavi ana renk, kart tabanlı düzenler, okunabilir tipografi ve ince animasyonlar gibi tasarım gereksinimlerini de ekledim. Son olarak, kimlik doğrulama, çoklu kiracı desteği, dosya depolama ve işlem e-postası gibi özelliklerle Supabase destekli bir arka uç işlevselliği istediğimi netleştirdim.
Promptu göndermeden önce Lovable’ın sunduğu ek seçeneklere yakından bakmak için durakladım. Giriş alanının hemen altında birkaç ilginç düğme vardı.
- + Attach: Yapay zekanın kullanması için bir referans olarak resim yüklemenizi sağlar. Zaten bir tasarım mockup’ınız veya wireframe’iniz varsa bu özellikle faydalı olabilir.
- Import from Figma option: Sıfırdan başlamaktansa profesyonel tasarım dosyalarını doğrudan Lovable’a aktarmanın bir yolu olarak öne çıktı.
- Public toggle: Bu görünürlüğü kontrol eder. Public olarak ayarlandığında projeniz, GitHub’daki projelerde olduğu gibi Lovable topluluğundaki herkes tarafından görüntülenmeye ve yeniden düzenlenmeye açık olur.
- Workspace (Pro): Bu, uygulamanın yalnızca Lovable çalışma alanınızdaki üyeler tarafından görülmesini sağlar.
- Personal/Business: Projenin açıkça paylaşılmadıkça yalnızca size özel kalmasını sağlar.
Tüm bu seçeneklere dikkat ettikten sonra, Lovable’ın neler oluşturacağını görmek için ilk büyük promptumu gönderdim.
Promptu gönderdikten sonra arayüz bir oluşturma ortamına dönüştü. Sol tarafta isteğimi ve Lovable’ın yanıtlarını gösteren bir sohbet paneli açıldı, sağ tarafta ise kalp simgeli bir yükleme ekranı belirdi.
Bunun yanı sıra “Değiştirmek için belirli öğeleri seçin,” “Referans için resim yükleyin” ve “Hazır olduğunuzda dağıtın” gibi çeşitli seçenekler vardı. Çoğu devre dışı bırakılmıştı, ancak biri aktift: Arka uç için Supabase’e bağlanın.
Lovable’ın ilk yanıtı beni etkiledi. Promptumu, FreshBooks ve Harvest gibi tanınmış SaaS araçlarına referans vererek net bölümlere ayırdı ve ilk sürüm için planlanan özellikleri şöyle sıraladı: profesyonel bir açılış sayfası, çoklu kiracılı (multi-tenant) pano, müşteri ve proje yönetimi, zaman takibi, fatura oluşturma ve ödeme entegrasyonu.
Ayrıca hemen önemli bir gereksinime dikkat çekti; bu arka uç özelliklerini açmak için projemi Supabase’e bağlamam gerekti. Bu göz ardı edilmedi; Lovable bana doğrudan ne gerektiğini söyledi ve entegrasyon belgelerine bağlantı verdi.
Arayüzün sağ üst köşesinde yeşil bir Supabase’e Bağlan düğmesi vardı. Buna tıkladığımda, Supabase’in ne olduğu, neden gerektiği ve bağlandığında neler sağlayacağı: kullanıcı kimlik doğrulama, veritabanı yönetimi, depolama ve ödemeler yazan bir modal açıldı.
Yönlendirmeleri izledim, Supabase organizasyonumu bağladım ve entegrasyonun başarılı olduğunu bildiren bir onay mesajı gördüm. Ardından Lovable bağlantıyı doğruladı ve arka uç desteği etkinleştirilmiş şekilde uygulamayı oluşturmaya başladı.
Lovable AI arka planda kod üretmeye başladı. “Reading src/pages/Index.tsx” ve “Edited src/components/LandingPage.tsx” gibi günlük mesajlarını görebiliyordum; bu, şablon birleştirmek yerine gerçek bir proje yapısıyla aktif olarak çalıştığını teyit ediyordu.
İlk derleme (build) hazır olduğunda, sonucu sağ panelde önizledim. Uygulamaya InvoicePro adı verilmişti ve cilalı bir SaaS açılış sayfasına benziyordu.
Üzerinde Özellikler, Fiyatlandırma, İletişim gibi gezinme linklerine sahip bir üstbilgi (header), Giriş Yap ve Ücretsiz Deneme Başlat düğmeleri, kalın bir başlık (“Profesyonel Faturalandırmayla Daha Hızlı Ödeme Alın”) içeren bir öne çıkan bölüm (hero) ve serbest çalışanların zaman takibi yapabileceğini, müşterileri yönetebileceğini ve çevrimiçi ödeme alabileceğini anlatan alt metin yer alıyordu.
Aşağı doğru kaydırınca zaman takibi, müşteri yönetimi, faturalar, ödemeler, raporlar ve müşteri portalları için altı temiz tasarlanmış karttan oluşan bir özellikler bölümü ortaya çıktı.
Fiyatlandırma bölümü, her birinin kendine ait özellikleri ve harekete geçirici düğmeleri bulunan üç açık katmanla yapılandırılmıştı: Starter (ayda 9$), Professional (ayda 29$, “En Popüler” olarak işaretli) ve Enterprise (ayda 79$).
En altta, mesajı bir Ücretsiz Deneme Başlat düğmesiyle pekiştiren belirgin bir harekete geçirici bölüm vardı. Alt bilgi (footer) kısmında ise Özellikler, Fiyatlandırma, Entegrasyonlar, Blog, Gizlilik Politikası ve Kullanım Şartları gibi standart bağlantılar bulunuyordu.
Lovable bana sadece parlak bir ön yüz sunmadı. Altyapı kodunu da verdi. Kod görünümüne geçince, Tailwind CSS, Vite ve modern araçlarla yapılandırılmış bir React + TypeScript projesi gördüm.
Dosya ağacı, bileşenler, hook’lar, sayfalar ve tailwind.config.ts ile vite.config.ts gibi yapılandırma dosyalarını içeren klasörlerden oluşuyordu.
- LandingPage.tsx dosyası, önizlemede gördüğüm kartları ve katmanları tanımlayan veri dizileriyle birlikte hero, özellikler ve fiyatlandırma bölümlerinin kodunu içeriyordu.
- index.css, açık ve koyu modlar için Tailwind import’larını ve özel değişkenleri gösteriyordu.
- App.tsx yönlendirme ve sağlayıcıları (providers) yönetirken,
- package.json React, shadcn bileşenleri ve Tailwind gibi bağımlılıkları listeliyordu.
Her şey mantıklı bir şekilde organize edilmiş ve okunabilirdi; bu da benim (veya herhangi bir geliştiricinin) bu kodu alıp sıfırdan başlamadan genişletebileceği anlamına geliyordu.
Burada dikkat edilmesi gereken bir nokta: kod düzenleyici salt okunur (Read Only) olarak işaretlenmişti. Dosyaları Lovable arayüzünde doğrudan düzenlemek istiyorsanız, ücretli bir plana yükseltmeniz gerekiyor. Benim amaçlarım için tüm yapıyı yine de inceleyip oluşturulan kodun kalitesini doğrulayabildim; ancak tarayıcıda pratik düzenleme, premium katmana mahsustu.
On dakikadan kısa sürede Lovable.dev, ayrıntılı bir promptu gerçek ve düzenlenebilir kodlu cilalı bir SaaS tipi açılış sayfasına dönüştürdü. Tasarım talimatlarıma uygundu, iş akışı sezgiseldi ve perde arkasında neler olup bittiğini görebiliyordum. En önemlisi, arka uç kurulumu göz ardı edilmedi.
Hataları Nasıl Yönettiği ve Düzenlemede Esneklik
İlk açılış sayfasından etkilendikten sonra Lovable’ı daha da zorlayıp karmaşık arka uç özelliklerini, mantıksal çakışmaları ve beklenmedik hataları nasıl yönettiğini test etmek istedim.
Bu, platformun yalnızca şık ön yüzler oluşturmakta mı iyi olduğunu yoksa uygulama geliştirmedeki daha dağınık gerçeklerle başa çıkıp çıkamayacağını anlamak için gerçek testi oluşturuyordu.
Özünde bu bir çelişkiydi. Bir yandan kullanıcı rolleri arasında net sınırlar istiyor, diğer yandan bu sınırları herkesin aşmasını sağlamak istiyordum. İdeal olarak, akıllı bir oluşturucu bunun bir çakışma olduğunu fark edip açıklama istemeliydi.
Lovable bunu yapmadı.
Bunun yerine isteği hemen kabul etti ve oluşturması gereken arka uç parçalarını sıraladı: kimlik doğrulama, roller ve izinler tabloları, oturum yönetimi ve korumalı API uç noktaları.
Kimlik doğrulama ve veri politikaları için Supabase kullanma gereksinimini bile yineledi, henüz bağlamadıysam bağlamamı hatırlattı. Ben Supabase’i zaten bağladığım için Lovable’a devam etmesini söyledim. Ardından rol tabanlı erişim sistemini iskeletlendirmeye başladı, kimlik doğrulama bağlamları, onboarding, korumalı rotalar ve migration’lar için dosyalar oluşturdu. Ayrıca Supabase istemci kitaplığını yükledi.
Ancak uygulamayı çalıştırmayı denediğinde işler ters gitti. Önizleme penceresi boş kaldı ve ekranın sağ alt köşesinde bir hata çubuğu belirdi. Günlükler şu şekilde net bir şekilde aktarıyordu: “Uncaught Error: Missing Supabase environment variables” supabase.ts dosyasında.
Özünde Lovable, henüz sağlamadığım yapılandırma anahtarlarını gerektiren kod üretmişti.
“Kayıtları göster” seçeneğine tıklayınca tam traceback’i gördüm ve eksik değişkenler olmadan uygulamanın render edemediği teyit edildi. Önizleme beyaz ekranda kaldı, hata kaydındaki “blank screen” notuyla uyumlu şekilde.
Düzeltmek için Lovable iki seçenek sundu: Kapat veya Düzeltmeyi dene.
Doğal olarak Düzeltmeyi deneye tıkladım. Lovable hemen sorunu analiz etti, uygulamanın gerekli Supabase ortam değişkenlerinden yoksun olduğunu saptadı ve düzeltmek için gereken ayarlamaları oluşturdu.
Sohbet paneli neyin nasıl düzeltildiğini adım adım anlattı ve önizleme çökmeden yeniden yüklenebildi.
Bu testi daha da çarpıcı kılan, Lovable’ın çelişkili talimatlarımı nasıl yorumlamasıydı. Onları reddetmek veya açıklama istemek yerine her iki fikri de birleştirmeye çalıştı.
Üç rol (Owner, Member, Client) için ayrı izinler oluşturdu, ancak ardından “tüm kullanıcıların faturaları ve projeleri düzenleyebileceğini” ekledi; Owner’lar ise ek yönetim haklarına sahip kaldı. Gerçek dünyada bu, istediğim rol tabanlı erişim kontrolünü fiilen geçersiz kılacak mantıksal hatalara yol açardı.
İnceleyenler veya geliştiriciler için bu hem etkileyici (zaten oluşturduğu için) hem de endişe verici (üretimde güvenlik veya mantık sorunları yaratabileceği için).
- Hata tespiti güçlü: Lovable eksik Supabase değişkenlerini hızla işaretledi, tam dosya ve satırı gösterdi ve neyin yanlış gittiğini açıkladı. Açık günlükler ve bağlam, asla tahmin yürütmenize gerek kalmamasını sağlıyor.
- Esnek ama çelişkilerde temkinli değil: Çelişen rol talimatları verdiğimde açıklama istemek yerine bunları birleştirdi. Bu yararlı bir esneklik olabilir, ancak geliştiricilerin mantıksal çakışmalara karşı dikkatli olması gerekecek.
Tasarım ve Düzeni Özelleştirme
Uygulamanızda bir şeyi değiştirmek veya tasarımı kendi ürününüze daha uygun hissettirmek ister misiniz?
Lovable’da özelleştirme üç ana yaklaşıma dayanır: doğal dil promptları, görsel düzenleyici ve doğrudan kod seviyesi kontrol.
Birlikte, bu yöntemler geniş çaplı tasarım yenilemelerden piksel hassasiyetindeki ince ayarlara kadar her şeyi kapsar.
AI Prompt’ları ile Geniş Tasarım Değişiklikleri
Bu en erişilebilir yöntemdir ve muhtemelen Lovable’ın en çok teşvik ettiği yöntem de budur. Ayarlarla uğraşmak yerine tasarım fikirlerinizi sade İngilizceyle tanımlarsınız ve yapay zekanın bunları uygulamasına izin verirsiniz.
Örneğin, şu prompt’ları verebilirsiniz:
- “Temayı modern, fütüristik bir stil ile karanlık moda dönüştür.”
- “Cesur, yüksek kontrastlı renklerle neo-brutalist bir estetik benimse.”
- “Birincil rengi koyu mor, ikincili rengi turuncu yap ve tüm başlıklarda Assistant yazı tipini kullan.”
Lovable.dev ayrıca düğme köşelerini yuvarlama, gölgeler ekleme veya bir hero bölümünü daha görsel olarak dinamik hale getirme gibi daha küçük UI ince ayarları için prompt’lar da sunuyor.
Hatta görsel rehber olarak bir ekran görüntüsü veya taslak ekleyebilir, profesyonel tasarımları doğrudan işlevsel koda dönüştürmek için Figma’dan içe aktarım yapabilirsiniz.
Detaylı Düzenlemeler için Görsel Düzenleyici
Uygulamanızda yapmak istediğiniz her değişiklik için yeni bir prompt yazmaya değmez. Bazen sadece bir düğmeyi hareket ettirmek, bir rengi değiştirmek veya bir bölümdeki dolgu (padding) ayarını düzenlemek istersiniz. İşte Lovable’ın görsel düzenleyicisi devreye girer.
Düzenleyici, Figma gibi bir tasarım aracı gibi çalışır. düzenleme moduna geçebilir, sayfanızdaki herhangi bir öğenin üzerine gelerek doğrudan üzerine tıklayabilirsiniz.
Seçtikten sonra kodla uğraşmadan özellikleri düzenleyebilirsiniz. Örneğin:
- Metin içeriğini değiştirmek — bir başlığı güncellemek, bir düğme etiketini yeniden yazmak veya bir formdaki yer tutucu metni ayarlamak.
- Stili değiştirmek — renkleri değiştirmek, yazı tiplerini yeniden boyutlandırmak, düğme köşelerini yuvarlamak veya gölgeler eklemek.
- Düzeni ayarlamak — kenar boşlukları (margin), dolgu (padding), hizalama veya öğeler arasındaki boşluğu değiştirmek.
Bu yöntem zaman ve kredi tasarrufu sağlar. Küçük düzenlemeleri metinle anlatmak yerine görselleri anında ayarlayabilirsiniz. Çıktının çoğunu beğendiğiniz, ancak marka uyumu için ayrıntıları ince ayarlamak istediğiniz durumlarda idealdir.
Uygulamada, düzenleyici yapay zeka tabanlı oluşturma ile insan tasarım kontrolü arasındaki boşluğu doldurur. Yapay zeka uygulamanın büyük kısmını hızlıca üretirken, son rötuşları görsel olarak siz yapabilirsiniz.
Tam Kod Özelleştirmesi için GitHub Entegrasyonu
İleri düzey kullanıcılar için Lovable, GitHub entegrasyonu sunar. Bağlandıktan sonra projeyi senkronize edebilir, yerel olarak klonlayabilir, tercih ettiğiniz IDE’de değişiklikler yapabilir ve güncellemeleri GitHub’a gönderirken Lovable’ın bu değişiklikleri projeye senkronize etmesini sağlayabilirsiniz.
Kendim Kod görünümüne geçtiğimde, Lovable’ın oluşturduğu projenin tam olarak nasıl yapılandırıldığını görebildim. Bileşenler, sayfalar ve yapılandırma için mantıklı bir dosya ağacıyla modern bir React + TypeScript + Tailwind kurulumu üretmişti.
Bu, sadece bir kodsuz (no-code) soyutlama değil, gerçek bir kod.
Uygulamayı Yayınlama ve Entegrasyon Ekleme
Uygulamayı özelleştirdikten sonra, Lovable’ın yayınlama ve entegrasyonları nasıl yönettiğini görmek istedim.
Bu, arka uç hizmetlerini bağlamanın, projeyi web’e yayınlamanın ve barındırma veya özel alan adlarını yönetmenin ne kadar kolay olduğunu test etmek anlamına geliyordu.
Lovable’ın yerel Supabase entegrasyonu, arka uç hikayesinin merkezinde yer alıyor. Supabase, PostgreSQL veritabanı, kimlik doğrulama, dosya depolama ve sunucusuz işlevler sağlar. Bağlandıktan sonra Lovable, veritabanı şemalarını otomatik olarak oluşturabilir, organizasyonlar ve kullanıcılar için tablolar kurabilir ve e-posta/şifre girişleri ile Google OAuth gibi kimlik doğrulama akışlarını iskeletlendirebilir.
Oturumumda Lovable, çoklu kiracılık ve rol tabanlı erişim kontrolü gibi özelliklere geçmeden önce Supabase’i bağlamamda ısrar etti. Çalışma alanımı Supabase organizasyonuma bağladıktan sonra yapay zeka hemen migration dosyalarını, kimlik doğrulama bağlamlarını ve yardımcı araçları düzenlemeye başladı.
Stripe da yerel olarak destekleniyor. Lovable API anahtarlarını güvenli bir şekilde saklar ve abonelikleri, tek seferlik ödemeleri ve faturalama etkinliklerini yönetmek için arka uç işlevleri oluşturabilir.
Örneğin ona “Stripe kullanarak üç abonelik seviyesi oluştur” veya “Dijital kurs için 29$’lık tek seferlik ödeme ekle” diye bir prompt verebilirsiniz; böylece ödeme sürecini entegre ederken kullanıcı abonelik verilerini de Supabase’e eşitler.
Doğrulanmış ortaklarının ötesinde Lovable, Supabase Edge Functions kullanarak özel API bağlantılarını destekler. Kullanmak istediğiniz API’yi tanımlayarak, yapay zeka sunucusuz işlevi yazar, anahtarları güvenli bir şekilde yönetir ve sizin için dağıtır. Bu, uygulamanızı yerleşik seçeneklerin çok ötesine genişletmeyi mümkün kılar.
Yayınlamaya gelince, tek bir düğmeye tıklamak kadar basit olacak şekilde tasarlanmış. Bir projeyi yayınladığınızda, platform onu anında canlı bir alt etki alanına (örneğin yourproject.lovable.app) dağıtır.
Sonraki düzenlemeler de tek tıkla yeniden yayınlanabilir; bu, prototipleri hızlıca paylaşmayı kolaylaştırır.
Lovable ayrıca dahili versiyon kontrolü içerir. Bu sayede uygulamanızın önceki sürümlerine dönebilir, zaman içindeki değişiklikleri takip edebilir ve yeni özellikleri denerken ilerlemeyi kaybetme riskini azaltabilirsiniz.
Canlı uygulamalar için Lovable, barındırma ortakları aracılığıyla DNS ve SSL sertifikalarını otomatik olarak yöneten özel alan adlarını destekler. Mevcut bir alan adını bağlayabilir veya hatta Lovable arayüzünden yeni bir alan adı satın alabilirsiniz.
Daha fazla kontrolü tercih eden geliştiriciler, projeyi GitHub’a senkronize edip Vercel veya Netlify gibi dış sunucularla da dağıtım yapabilir. Bu düzenekte Lovable’daki değişiklikler repoya işlenir ve otomatik olarak yeniden dağıtılır.
Genel izlenim: Lovable yayınlama ve entegrasyonları yüzeyde ferahlatıcı derecede basit kılıyor. Supabase ve Stripe sıkı sıkıya entegre, tek tıkla dağıtım vaad edildiği gibi çalışıyor ve doğrulanmış entegrasyon ekosistemi geniş. Oluşturulan mimari sadece bir prototip değil, üretime hazır hissi uyandırıyor.
Lovable Fiyatlandırma ve Planlar
Lovable, planlarını AI oluşturucuyu kullanmak için token işlevi gören krediler üzerine kuruyor. Yaptığınız her işlem (açılış sayfası oluşturmaktan kimlik doğrulama eklemeye kadar) karmaşıklığa bağlı olarak kredi harcar.
Ücretsiz plan, Lovable’ı risksiz keşfetmenizi amaçlıyor. Size sunulanlar:
- Günlük bir kredi havuzu (aylık sınıra sahip)
- Yalnızca ortak projeler oluşturabilme
- Bu projelerde sınırsız iş birliği
Platformu nasıl çalıştığını denemek için harika bir yol. Ancak aylık sınırı aştığınızda krediler sıfırlanana dek inşa etmeye devam edemezsiniz. Ücretsiz kullanıcılar ayrıca özel projeler, özel alan adları veya gelişmiş ekip özelliklerini kullanamaz.
Lovable Website Builder Planları
| Paket Adı | Web Alanı | Bant Genişliği | Fiyat | |
|---|---|---|---|---|
| Pro | Sınırsız | Sınırsız | 1.150 TL | Detaylar |
| Business | Sınırsız | Sınırsız | 2.300 TL | Detaylar |
Ücretli katmanlar, sınırlarınızı genişletir ve gerçek projeler için kritik özelliklerin kilidini açar. Ücretsiz planın ötesinde elde ettiğiniz özellikler:
- Ayda daha fazla kredi (günlük yenilemeler dahil)
- Topluluğa görünmeyen özel projeler
- Ekipleri yönetmek için kullanıcı rolleri ve izinler
- Uygulamanızı markalamanız için özel alan adları
- Daha temiz, profesyonel bir görünüm için Lovable rozeti kaldırma
- Kullanılmayan kredilerin devri
- Üst düzey kontroller (yüksek katmanlarda) SSO, kişisel proje alanları, tasarım şablonları ve veri eğitimine katılmama seçeneği gibi
- Özel entegrasyonlar, grup tabanlı erişim kontrolü ve özel destek için kurumsal seçenekler
Krediler, karmaşıklığa göre ölçeklenir. Küçük bir UI ince ayarı bir kredinin altında kullanabilirken, çok bölümlü tam bir açılış sayfası oluşturmak birkaç kredi gerektirebilir. Bu, kullanımı öngörülebilir kılar. Basit değişiklikler hafif, daha büyük istekler ise daha fazla kredi tüketir.
İade politikasında ise Lovable geleneksel bir iade politikası duyurmuyor. Bunun yerine dilediğiniz zaman iptal edebilir veya plana düşürebilirsiniz ve faturanız ilerleyen dönemde buna göre ayarlanır. Yani ücretli planı denemekte az risk var. Eğer uygun değilse, bağlanmış olmazsınız.
Lovable, standart kart ödemelerini kabul eder (Visa, Mastercard ve diğer büyük sağlayıcılar). Ayrıca geçerli bir akademik e-posta adresiyle kayıt olduğunuzda öğrenci indirimi sunarak öğrenenler ve erken aşama geliştiriciler için daha uygun hale getirir.
Lovable.dev Alternatifleri
Lovable, konuşmaya dayalı, prompt tabanlı uygulama oluşturma yaklaşımıyla öne çıkarken, bu alandaki tek seçenek değil.
Kayda değer bir alternatif ise Bolt.new. Bolt.new, tarayıcı tabanlı bir IDE ile yapay zekayı harmanlar; kullanıcılara kodları üzerinde gerçek zamanlı kontrol sunarken AI üretiminden de faydalanmayı sağlar.
Lovable.dev vs Bolt.new Genel Bakış
| Özellik | Lovable | Bolt.new |
|---|---|---|
| Yapay Zeka Odak | Sohbet tabanlı tam yığın oluşturma | Tarayıcı IDE’sinde prompt’tan koda |
| Kullanıcı Odağı | Hızlı prototip oluşturma odaklı teknik olmayan kullanıcılar, kurucular, tasarımcılar ve geliştiriciler | Tam kontrol isteyen geliştiriciler ve teknik kullanıcılar |
| Kod Erişimi | Yalnızca GitHub dışa aktarma, uygulama içi düzenleyici yok | Doğrudan düzenlemeli tam tarayıcı IDE’si |
| Arka Uç | Kimlik doğrulama ve veritabanı için Supabase entegrasyonu | Node.js çalışma zamanı, Supabase ve Prisma ile entegrasyon |
| Ön Yüz | React + Tailwind CSS | Next.js, Vue, Svelte, Astro, Expo ve daha fazlası |
| Dağıtım | lovable.app alt etki alanına tek tık; özel barındırma için GitHub senkronizasyonu | Canlı önizlemeler ve tek tıkla Netlify dağıtımları |
| Fiyatlandırma | Mesaj tabanlı kredi sistemi | Token tabanlı, kullanım oranına göre değişken |
| İş Birliği | Sınırsız iş birliği; beta gerçek zamanlı iş birliği | Paylaşılabilir URL’ler ve GitHub iş akışları, gerçek zamanlı iş birliği yok |
Lovable.dev vs Bolt.new: Sizin İlk Tercihiniz Hangisi?
Lovable AI, basitlik ve hıza değer veren teknik olmayan kurucu, tasarımcı veya ekipler için daha uygundur. Konuşma tabanlı arayüzü, ne istediğinizi tanımlamayı kolaylaştırır ve koda dokunmadan çalışan bir MVP elde etmenizi sağlar.
Bolt.new ise, kod tabanı üzerinde doğrudan kontrol isteyen geliştiriciler ve teknik kurucular içindir. Tarayıcı içi IDE’siyle, AI tarafından üretilen kodu anında inceleyebilir, düzenleyebilir ve genişletebilirsiniz. Geniş bir çerçeve (framework) yelpazesini destekler ve projelerin özel mantık, belirli teknoloji yığınları veya ince kontrollere ihtiyaç duyduğu durumlarda öne çıkar. AI desteği fikrini beğenip yine de “vibe-code” yaparak ayrıntıları kendiniz düzenlemek istiyorsanız, Bolt.new daha güçlü ve esnek bir seçenektir.
Lovable.dev Hakkında Nihai Karar
Lovable, fikirleri hızlıca çalışan prototiplere dönüştürmek isteyen teknik olmayan kurucular, tasarımcılar ve küçük ekipler için mükemmel bir uyum sağlar. Konuşma tabanlı arayüz, geliştirmeyi erişilebilir kılar ve Supabase ve Stripe gibi entegrasyonlarla tam yığın kod oluşturabilme yeteneği etkileyicidir.
Mükemmel olmasa da kısıtlayıcı ücretsiz plan ve ileri düzey kullanıcılar için doğrudan kod düzenleme eksikliği bir engel oluşturuyor. Ancak haftalar içinde, aylar yerine, hızlıca geliştirmek istiyorsanız Lovable denemeye değer harika bir araçtır.
