Lovable AI ve Logto kullanarak Vibe kodlaması ile uygulamanı hızlıca oluştur ve giriş akışlarını yönet
Lovable, doğal dil kullanarak tam yığın uygulamalar oluşturmanı sağlayan yapay zeka destekli bir kodlama aracıdır: ön yüz, arka yüz, veritabanı ve dağıtım hepsi tek bir yerde. Logto’nun yerleşik desteği ile artık güvenli giriş, kullanıcı yönetimi ve kimlik doğrulama akışlarını zahmetsizce ekleyebilirsin.
Genel amaçlı ajanlardan görev odaklı copilota kadar, geliştiriciler yazılım üretiminde köklü bir değişimi deneyimliyor. Ancak tüm ajan kategorileri arasında, biri özellikle heyecan verici ve hızlı ilerliyor: kodlama ajanları.
Lovable, Cursor, Windsurf ve Replit gibi araçlar, doğal dili gerçek, çalışan yazılıma anında dönüştürerek manşetlere çıkıyor. Kurulum yok. Şablon kod yok. Sadece saf çıktı.
Bugün sahneye yeni bir terim katılıyor: Vibe Kodlama.
Lovable tarafından öncülük edilen vibe kodlama, yapay zeka ile sohbet ederek uygulama oluşturmanın yeni bir yolu. Bu yazıda, vibe kodlamanın gerçekte ne anlama geldiğini açımlayacağız, Lovable’ın önde gelen kodlama ajanlarından biri olarak nasıl çalıştığını keşfedeceğiz ve kayıt olma, giriş, kullanıcı ve kimlik yönetimi dahil dakikalar içinde bir tam yığın uygulamanın nasıl inşa edilebileceğini adım adım anlatacağız.
Lovable, fikirlerinin doğrudan çalışan koda, yerleşimlere ve hatta barındırılan uygulamalara dönüştüğü bir sohbet tabanlı geliştirme platformudur. Geleneksel kod yazmıyorsun : yalnızca ne istediğini tarif ediyorsun:
“İki grafikli ve yan menülü basit bir pano istiyorum.”
Ve yapay zeka, genellikle saniyeler içinde canlı bir önizleme ve düzenlenebilir kaynak kodu üretiyor.
Arka planda Lovable, React ve Tailwind gibi modern çerçeveler kullanır ve projeni dışa aktarmana, kendi sunucuna yüklemene veya anında dağıtmana imkan tanır.
İşte Lovable platformunun 9 temel özelliğine dayalı ayrıntılı bir tablo:
#
Özellik
Açıklama
Değerler
1
Doğal dil odaklı Tam Yığın uygulama
İstediğini sade İngilizce ile tarif et ve anında ön yüz, arka yüz, veri tabanı ve kimlik doğrulamalı çalışan bir uygulama elde et.
Geliştirme süresini büyük ölçüde kısaltır ve şablon kurulum engelini ortadan kaldırır.
2
Yapay zeka kodlama zekası & hata ayıklama
Dahili asistan; kod tamamlama, hata düzeltme ve sohbet üzerinden dosyalarda, günlüklerde ve API’lerde gezinmene yardımcı olur.
Üretkenliği artırır ve uzman olmayan geliştiriciler için öğrenme eğrisini hızlandırır.
3
Gerçek kod sahipliği & GitHub senkronizasyonu
Üretime hazır kod (React, Node, v.b.) üretir ve GitHub ile çift yönlü senkronize eder.
Koduna tam anlamıyla sahip olmanı ve tedarikçi bağımlılığını önler.
4
Arka uç entegrasyonları
Supabase, Stripe ve diğer arka uç servislerine yerel destek.
Veri tabanları, depolama, ödeme ve kimlik doğrulama işlemlerini şablon kod olmadan kolayca bağlar.
5
Görsel düzenleme & Eskizden koda
Çizimlerini ya da ekran görüntülerini (ör. elle çizilmiş arayüzler veya Figma çıktıları) yükleyerek gerçek arayüz kodu oluştur. Görsel düzenleme modu da bulunur.
Tasarımcılar ve kodlama bilmeyenler için arayüzü doğrudan şekillendirme esnekliği sunar.
6
Dağıtım & özel Alan Adları
Yerleşik dağıtım hattı, barındırma desteği ve özel alan adı ayarı ile birlikte gelir.
Uygulama yayımlamayı sorunsuz hale getirir—farklı servislerle uğraşmaya gerek kalmaz.
7
İş birliği & gerçek zamanlı senkronizasyon
Takım üyeleri gerçek zamanlı iş birliği yapabilir, değişiklikleri anında görebilir ve sürüm geçmişini yönetebilir.
Eşli programlama, gözden geçirme iş akışları ve ekip dostu ortamlar sağlar.
8
Güvenlik taraması
Özellikle Supabase kullanıldığında yayımlama sırasında yerleşik güvenlik denetimleri.
Yayınlamadan önce açıkları tespit ederek kullanıcı güvenini artırır.
9
Öğrenme ekosistemi & Şablonlar
Eğitimler, istem kitaplıkları, hazır şablonlar ve öğrenme kaynakları sunar.
Öğrenme eğrisini düşürür ve geliştirici adaptasyonunu iyileştirir.
Lovable’ı uygulama geliştirmede kullanmanın başlıca faydaları#
Lovable, çoğu geliştirici iş akışına yerleşmiş bazı varsayımları sorguluyor:
Başlamak için boş bir VS Code ekranına ihtiyacın olduğu.
Yerleşimi oluşturmadan önce Figma maketlerinin olması gerektiği.
Mantığı yazmaya başlamadan önce görevlerin olması gerektiği.
Bunun yerine Lovable, yalnızca kodlama için değil, tüm ürünleri oluşturmak için doğal dilin birincil kullanıcı deneyimi olduğu bir çalışma ortamı sunar.
Bu, özellikle şu alanlarda büyük bir etki yaratıyo:
Prototipleme: Artık statik maket yok: gerçek kullanıcı deneyimlerini saatler içinde test et.
Oryantasyon: Yeni ekip üyeleri sohbetle kod ve özellikleri keşfedebilir.
Erişilebilirlik: Tasarımcılar ve ürün yöneticileri kod yazmadan katkı sağlayabilir.
Profesyonel bir yazılım geliştirici olmayanlar için Lovable, yaratıcılığı önemli ölçüde artırır. Ne inşa etmek istediğini bildiğin sürece, fikirlerini çalışan uygulamalara dönüştürmekte eski tip engellere takılmadan vibe kodlama ile ilerleyebilirsin.
Lovable, “kodlama”nın her zaman yazmak anlamına gelmediğini gösteriyor. Bu, istemlerle yönlendirmek, diyalogla düzenlemek ve niyete göre yinelemek anlamına da gelebilir.
Bu, küçük ekipler ya da tekil projelerde daha kapsayıcı iş birliği fırsatları sunar.
Şablon kod yazmaya ya da araç değiştirmen gerekmeden inşa edip test edip iyileştirebildiğinde, daha hızlı yineleme ve daha fazla yaratıcılık için alan açılır.
Deneyimli geliştiriciler bile azalan bağlam değişimi ve hızlı geribildirim döngülerinden faydalanır.
GitHub Copilot VS Code’da anlam kazandıysa, Lovable da yeni nesil ajan tabanlı, istem odaklı uygulamalar için tam yerinde — burada yapı, mantık ve kullanıcı akışları artık sabit kodlanmıyor, dinamik olarak tanımlanıyor.
Logto ile kimlik doğrulama kullanarak fotoğraf galerisi uygulaması oluştur#
Öncelikle yalnızca “Bir fotoğraf galerisi uygulaması oluştur” gibi basit bir istem veriyorsun, Lovable senin için temel ama güzel tasarlanmış bir web sitesi oluşturuyor.
Sonrasında Lovable’dan kimlik doğrulama için Logto’yu kullanmasını istedim. Lovable kimlik doğrulama için Supabase ile güçlü bir ortaklığa sahip görünüyor, ancak Supabase profesyonel bir CIAM çözümü değil. Bu durumda ben açık kaynak, profesyonel bir CIAM ürünü olarak Logto’yu tercih ettim.
Talimatlara göre şunları sağlamam gerekiyordu:
Logto uç noktası
Uygulama Kimliği
Bu bir React tek sayfa uygulaması olduğundan, uygulama sırrı gerekmiyor. Yapay zeka her şeyi sorunsuzca halletti — otomatik olarak en yeni Logto React SDK’sını yükledi ve gerekli kimlik doğrulama bileşenlerini oluşturdu.
Uç noktaları almak için sadece Logto Cloud’a girip yeni bir React uygulaması oluşturdum. Uygulamanın detayları sayfasında gerekli uç noktaları bulup Lovable’a kopyaladım. Ardından Lovable, kod ve yapılandırma dosyalarını otomatik olarak güncelledi.
Ayrıca uygulamanın Yönlendirme URI’sini ve Oturum Sonrası Yönlendirme URL’sini girmelisin.
Burada zor bir kısım var: Lovable geliştirme ortamını bulutta barındırdığı için, yönlendirme URI’si olarak http://localhost:3000/callback gibi bir şey kullanamazsın. Bunun yerine, Lovable projenin canlı URL’sini kullanmalı ve bunu Logto Cloud konsolunda güncellemelisin.
“Giriş yap”a tıkladıktan sonra Logto giriş sayfası açılıyor. Tüm kimlik doğrulama akışını test edebilirsin — varsayılan olarak Logto, giriş yöntemi olarak e-posta + şifre kullanır. Sadece e-posta doğrulama adımlarını takip et, ardından kullanıcının başarıyla kaydolup kaydolmadığını Logto Konsolu’ndan kontrol et.
Gördüğün gibi, kullanıcın artık Logto Cloud konsolunda görünüyor — bu, kimlik doğrulama akışının çalıştığını ve kullanıcının uygulaman üzerinden güvenli şekilde kaydedildiğini onaylar.
Artık entegre giriş akışlarına sahip tam çalışan bir uygulaman var — ayrıca kullanıcılarını doğrudan Logto Cloud konsolunda yönetebilirsin.
Bu sadece basit bir örnek. Logto, doğrudan IDE’nin içinde çalışan MCP sunucuları geliştirmeye devam ediyor ve böylece Logto Konsolu ve Yönetim API’si ile geliştirme ortamından ayrılmadan etkileşim kurmak mümkün olacak. Bu kurulumla şunları yapabileceksin:
Kullanıcı oluşturma ve yönetme
Kayıtlara erişme
Giriş akışlarını yapılandırma ve yönetme
Yetkilendirme tasarlama ve sürdürme (ör. API kaynakları, izinler, roller)
Uygulamaları ve kaynakları yönetme
Çok daha fazlası
Yapay zekanın birleşik gücüyle ve Logto’nun sağlam altyapısıyla, kimlik doğrulamayı entegre etmek artık karmaşık bir görev olmaktan çıkıyor.
