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.
Product & Design
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 AI nedir?
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.
Lovable AI’ın temel özellikleri neler?
İş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’dan öğrenebileceklerimiz
Arayüz yeni IDE’dir
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.
Hızlı döngüler tam taslaktan daha iyidir
Ş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.
Yapay zeka tabanlı uygulamalar yapay zeka tabanlı araçlar gerektirir
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.
Lovable’a Logto Kimlik Doğrulama Entegrasyonu
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.
Adımlar:
- Logto Cloud kiracına git
- Uygulamanı bul
- URL’leri şunlarla değiştir:
-
Yönlendirme URI’leri:
https://preview--snap-show-gallery-time.lovable.app/callback -
Oturum Sonrası Yönlendirme URI’leri:
https://preview--snap-show-gallery-time.lovable.app/
Birkaç sohbet istemi ve iterasyonun ardından artık korumalı bir web siten var—içeriği yalnızca giriş yapan kullanıcılar görebiliyor.
Lütfen dikkat: Bu tür kodlama ajanlarında ön izleme modunda iframe kullanıldığı için, ön izleme modunda tıkladığında giriş sayfası açılmayacaktır.
Giriş akışını test et
“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.
Logto’nun yaklaşan güncellemesi yapay zekalı kimlik doğrulama entegrasyonunu destekleyecek
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.