Lovable AI: Demo Projeyle Rehber

Lovable, programlama becerisi olmadan herkesin işlevsel uygulamalar oluşturmasına olanak tanıyan bir metinden-uygulamaya hizmetidir. Uygulama fikirlerimizi bir sohbet arayüzü üzerinden anlatırız ve platform bu açıklamaları gerçek, çalışan bir uygulamaya dönüştürür.

Bu eğitimde, Lovable’ı pratik bir şey inşa ederek nasıl kullanacağınızı göstereceğim—veri kalıcılığı, kullanıcı kimlik doğrulaması, e-posta hatırlatıcıları ve ücretli aboneliklerle basit ama eksiksiz bir yapılacaklar listesi mobil uygulamasını adım adım nasıl geliştirip yayınlayacağınızı anlatacağım.

Sonunda, güvenlik endişeleri, kendi araç ve kütüphanelerine sahip geliştiriciler için potansiyel hız eksikliği ve programcı olmayanların hata ayıklarken karşılaşabileceği zorluklar dahil olmak üzere Lovable’ın bazı sınırlamalarını da tartışacağım.

Lovable AI Nedir?

Lovable, yapay zekâ kullanarak fikirlerimizi tarif ederek bunları tam işlevli uygulamalara dönüştürmemize olanak tanır. Bu da geleneksel kodlamanın karmaşıklıklarını kolayca aşabileceğimiz, uygulama oluşturmayı hem geliştirici olmayanlar hem de hızlı prototipleme arayan geliştiriciler için erişilebilir ve verimli hale getirdiği anlamına gelir.

Lovable, ön yüzde React ve Vite kullanır. React, esnekliği ve verimliliğiyle bilinen, kullanıcı arayüzleri oluşturmaya yönelik popüler bir JavaScript kütüphanesidir. Vite ise daha hızlı ve yalın bir geliştirme deneyimi sunan bir derleme aracıdır. Bu çerçeveler, karmaşık UI mantığını üstlenerek uygulamalarımızın yalnızca işlevsel değil, aynı zamanda duyarlı ve akıcı olmasını sağlar.

Arka uç için Lovable, Supabase kullanır; bu, geleneksel backend çözümlerine açık kaynaklı bir alternatiftir. Supabase esasen veritabanı depolama, kimlik doğrulama ve bulut fonksiyonları dahil bir backend sistemi oluşturan araçlar bütünüdür. Verileri yönetmek ve gerçek zamanlı işlevselliği etkinleştirmek için uygulamamızla birlikte çalışır.

Lovable, ürettiği kodu arayüzünde doğrudan düzenlememize izin vermez. Ancak, uygulamamızın kodunu bir GitHub deposuna bağlama olanağımız vardır. Bu bağlantı, GitHub’da yapılan değişikliklerin doğrudan uygulamaya yansıması anlamına gelir ve iş birliğine dayalı geliştirme ile sürüm kontrolü sağlar.

Bu kurulum, kod yazmadan kullanılabilen bir arayüzün kolaylığını GitHub’ın sunduğu esneklik ve kontrolle birleştirir. Yine de, küçük değişiklikler yapmak için kodu doğrudan düzenleyebilmeyi sık sık dilediğimi fark ettim.

Lovable ile İlk Projenizi Oluşturma

Başlarken

Lovable ile başlamak için önce web sitelerine gidip ücretsiz bir hesap oluşturmamız gerekir.

Ücretsiz hesabımızı oluşturduktan sonra, platformun yapay zekâ asistanına günde beş mesaj gönderebileceğiz. Bu sınırlamalar içinde ne kadar ilerleyebileceğimizi görmek için güzel bir meydan okumadır.

İlk mesajda, projemizin kısa bir tanımını veriyoruz. 

Açıklamamın oldukça kısa olduğuna dikkat edin. İlk mesajda tüm işlevleri özetleyen çok ayrıntılı bir açıklama vermeyi de denedim ancak bu pek iyi çalışmadı; çünkü bu işlevlerin çoğu bir arka uç gerektiriyor. Proje ilk oluşturulduğunda Supabase’e otomatik olarak bağlanmıyor, bu yüzden komut başarısız oluyor.

Bu komutla elde ettiğimiz sonuç şu oldu:

Bu aşamada uygulama oldukça işlevseldi. Yapılacaklar listesinde öğe oluşturabiliyor, silebiliyor ve tamamlandı olarak işaretleyebiliyordu. Şaşırtıcı bir şekilde, uygulama yenilense bile veriler kalıcıydı!

Lovable bunu, verileri yerel bir tarayıcı veritabanında depolayan yerel depolamayı kullanarak yaptı. Bu yöntemin internet bağlantısı gerektirmemek gibi bir avantajı vardır, ancak verileri cihazlar arasında paylaşmamak gibi bir dezavantajı da vardır.

Şimdi projemizi Supabase’e bağlayarak bunu bir arka uç veritabanıyla nasıl değiştireceğimize bakalım.

Supabase’e bağlanma

Supabase, uygulamalarımız için bir arka uç altyapısı sağlayan açık kaynaklı bir platformdur. Veritabanı depolama, kimlik doğrulama ve API’ler dahil bir dizi hizmet sunarak uygulama verilerini yönetmek için kapsamlı bir çözüm sağlar. 

Örneğin bir yapılacaklar listesi uygulaması geliştirirken, uygulamamızın verilerinin birden fazla cihaz ve kullanıcı arasında kalıcı olmasını istiyorsak Supabase kritik hâle gelir. Yalnızca tek bir cihazın tarayıcısında veri saklayan yerel depolamanın aksine, Supabase verileri bulutta saklamamıza olanak tanır. Bu da kullanıcılarımızın yapılacaklar listelerine herhangi bir cihazdan erişebilmesi ve güncellemeleri gerçek zamanlı görebilmesi anlamına gelir.

Ayrıca Supabase’in kimlik doğrulama hizmetleri, kullanıcı kayıt ve girişlerini yönetmemize yardımcı olarak her kullanıcının verilerinin güvenli ve gizli kalmasını sağlar. Uygulamamızı Supabase’e bağlayarak uygulamamızın tüm potansiyelini açığa çıkarırız.

Uygulamalarımızı geliştirirken Supabase kullanmanın avantajlarından biri açık kaynaklı olmasıdır. Açık kaynak olması, belirli bir bulut sağlayıcısına bağımlı kalmamamızı sağlayarak uygulamamızın arka ucunu yönetmede daha fazla esneklik sunar. Kolaylık için Supabase’in barındırılan hizmetlerini kullanma seçeneğimiz olsa da, istersek Docker kullanarak uygulamalarımızı kendi sunucularımızda da barındırma özgürlüğüne sahibiz. Bu esneklik, ister maliyet verimliliği, ister performans, ister uyumluluk gereklilikleri açısından olsun, ihtiyaçlarımıza en uygun barındırma ortamını seçmemize olanak tanır.

Projemizi Supabase’e bağlamak için şu adımları izliyoruz:

1. Sağ üst köşedeki Supabase düğmesine tıklayın.

2. Supabase’e kaydolmamızı isteyen bir açılır pencere belirecek.

3. Kaydolduktan sonra Lovable’ın hesabımıza erişmesini yetkilendirmek için Supabase düğmesine tekrar tıklıyoruz. Bizden bir organizasyon oluşturmamız istenecek.

4. Organizasyon oluşturulduktan sonra onu seçip Lovable’ın bu organizasyon üzerinden Supabase hesabımıza erişmesini yetkilendirebiliriz.

5. Supabase düğmesine tekrar tıklayın ve bir proje oluşturun. Bu, bizi projeyi yapılandırabileceğimiz Supabase web sitesine yönlendirecek.

6. Son olarak Lovable web sitesine dönüp Supabase düğmesine son bir kez tıklayın. Ardından az önce oluşturduğumuz projeyi seçin. Bu, yapay zekânın o projeye bağlanacak şekilde kodu güncellemesini tetikleyecek.

İşte bu kadar, artık uygulamamızın bir arka ucu var!

Yukarıda belirtildiği gibi, arka uç gerektiren herhangi bir işlevi uygulamasını istemeden önce projeyi Supabase’e bağlamak daha iyidir; çünkü bağlantı kurulmadan kod yazmayı pek sevmiyor gibi görünüyor. Bunun mühendislerin çalışma şekli olmadığını unutmayın—frontend mühendisleri arka uç uygulanmadan da ön yüz kodunu yazabilir.

Kullanıcı kimlik doğrulaması ekleme

Uygulamamız bir Supabase projesine bağlandığına göre artık Lovable’dan kullanıcı kimlik doğrulaması eklemesini isteyebiliriz.

Önce, yapay zekâ uygulamamız için veritabanı tablolarını oluşturacak. Bu işlem bittiğinde, sohbet penceresinde "Apply Changes" düğmesine tıklayarak bunu manuel olarak onaylamamız gerekir.

Her zaman yapay zekânın değişikliklerini kabul etmemiz istenmez, ancak bazı durumlarda bu gereklidir; çünkü bazı değişiklikler (veritabanı güncellemeleri gibi) yayınlamadan bile üretimdeki uygulamayı etkileyebilir.

Veritabanı güncellendikten sonra, kullanıcıları kimlik doğrulamak ve yapılacaklar güncellemelerini veritabanına kaydetmek için kodu güncellemeye başlayacaktır.

Ancak bu kez "Build unsuccessful" şeklinde bir hatayla karşılaşıyor. Böyle bir durumda hatayı görebilir ve sorunu otomatik olarak düzeltmeyi denemek için üstteki "Try to fix it" düğmesini kullanabiliriz.

Bu durumda düğmeye tıklamak sorunu çözdü ve uygulama artık kullanıcı kimlik doğrulaması ve veritabanı veri depolamasıyla tamamen işlevsel; dolayısıyla uygulamayı birden fazla cihazda kullansak bile yapılacaklar listemize erişebiliyoruz.

Uygulamayı yayınlama

Uygulamayı yayınlamak için sağ üst köşedeki "Publish" düğmesini kullanabiliriz.

Yayınlandıktan sonra, menünün alt kısmında verilen bağlantıyı kullanarak erişebiliriz.

Bu bağlantı herkese açık olup, herkesin uygulamayı kullanmasına olanak tanır. Ayrıca bir özel alan adımız varsa onu da yapılandırabiliriz.

Uygulamada değişiklik yaptığımızda “Redeploy” düğmesine tıklamamız gerektiğini unutmayın. Aksi takdirde bu değişiklikler yalnızca Lovable arayüzünde görünür, uygulama URL’si üzerinden uygulamayı kullanan kullanıcılar tarafından görülmez.

Lovable’da Gelişmiş Yetenekler

GitHub’a bağlanma

Lovable kodda doğrudan değişiklik yapmamıza izin vermez; yalnızca kodu ve yaptığı değişiklikleri görmemize olanak tanır.

Kodu değiştirebilmek için projeyi, sürüm kontrolü kullanarak kod projelerinin barındırılması ve üzerinde iş birliği yapılması için yaygın şekilde kullanılan bir platform olan GitHub’a bağlamamız gerekir. Bu, birden fazla kullanıcının katkıda bulunmasını, gözden geçirmesini ve değişiklikleri verimli şekilde yönetmesini sağlar.

GitHub’a bağlanmak için:

1. GitHub hesabınıza giriş yapın ve ücretsiz bir organizasyon oluşturun.

2. Lovable’da, sağ üst köşedeki "Edit Code" düğmesine tıklayın.

3. Ardından "Connect to GitHub" seçeneğine tıklayın.

4. İlk adımda oluşturduğumuz organizasyonu seçin.

GitHub bağlandıktan sonra kod, GitHub deposuyla senkronize kalacaktır. Bu, VSCode gibi araçları kullanarak projede yerel olarak çalışabileceğimiz anlamına gelir. Değişiklikler depoya itildikten sonra Lovable’ın bu değişiklikleri çekmesinin biraz zaman aldığını unutmayın.

Uygulamanın kendisinin otomatik olarak yeniden dağıtılmadığını unutmayın. Değişiklikleri uygulamada görmek için yeniden yayınlamamız gerekir.

Bulut fonksiyonları

Şimdiye kadar öğrendiklerimiz, çevrimiçi bir veritabanı ve bu verileri oluşturmak, okumak, güncellemek ve silmek için bir ön yüz kullanıcı arayüzünü sürdürebilen, genellikle CRUD uygulaması olarak bilinen bir uygulama yapmamıza olanak tanıyor.

Bulut fonksiyonları, fiziksel sunucuları yönetme ihtiyacı olmadan uygulamalarımıza özel mantık ve karmaşık işlemler eklemek için güçlü bir yol sunar. Veritabanı değişiklikleri, HTTP istekleri veya diğer tetikleyiciler gibi olaylara yanıt olarak arka uç kodu çalıştırmamıza olanak tanırlar. Bu, e-posta bildirimleri göndermek, verileri işlemek veya planlanmış görevler yürütmek gibi işler için özellikle yararlı olabilir.

Bulut fonksiyonlarını kullanarak karmaşık işlevleri verimli şekilde ele alma ve ihtiyaç duyulduğunda ölçeklendirme esnekliği kazanır, bunu yaparken de kesintisiz ve duyarlı bir kullanıcı deneyimi sağlarız. Özetle, uygulamalarımızın yeteneklerini basit veri yönetiminin ötesine taşıyarak onları daha dinamik ve kullanışlı kılarlar.

Bir yapılacaklar listesi uygulamasında bulut fonksiyonu kullanmanın harika bir örneği, yaklaşan görevler için e-posta hatırlatıcıları göndermektir. Diyelim ki kullanıcıları yakında vadesi dolacak görevler konusunda uyarmak istiyoruz. Veritabanında yaklaşan son tarihleri olan görevleri kontrol eden ve kullanıcıya otomatik olarak e-posta hatırlatıcıları gönderen bir bulut fonksiyonu yazabiliriz.

Lovable’dan bunu bizim için uygulamasını isteyebiliriz:

Bazı fonksiyonlar, çalışmak için bir API anahtarı gerektiren haricî API’lere erişim ister. Bu durumda uygulanan çözüm Resend API’sini kullanıyor; bu yüzden Lovable, hizmet kurulumunu tamamlamak için API anahtarını istedi. 

Stripe ile abonelik ekleme

Kullanıcılar abone olamıyorsa bir uygulama yapmanın pek anlamı yok. Lovable’dan uygulamaya Stripe kullanarak abonelikler eklemesini isteyelim.

Aşağıdaki komutu kullanabiliriz:

Önceki örneğe benzer şekilde benden Stripe anahtarımı sağlamamı istedi. Bu anahtarı Stripe hesabımızdan alabiliriz.

Son olarak, abonelik fiyatı kimliğinin eksik olduğunu söyledi. Bunun için tekrar Stripe’a dönüp bir abonelik ürünü oluşturabilir ve fiyat kimliğini kopyalayabiliriz. Lovable, API anahtarında olduğu gibi fiyat kimliğini istemek için bir düğme sunmadığından, bunu sohbette sağlayabiliriz:

Uygulamayı tamamlamak için, yalnızca abone olan kullanıcıların yapılacaklar oluşturmasına izin vermesini ve uygulamanın güncellenmiş sürümünü yayınlamasını isteyebiliriz.

Her şey ilk denemede çalıştı!

Yükleyebileceğimiz bir mobil uygulama yapma

Lovable’ın oluşturduğu uygulama, kutudan çıktığı hâliyle bir gelişmiş web uygulaması (PWA) değildir. Yalnızca bir web sitesidir ve bu, onu bir mobil cihaza kurup bir web sitesi yerine sanki gerçek bir telefon uygulamasıymış gibi kullanamayacağımız anlamına gelir.

Ancak bunu tek bir komutla düzeltmek çok kolay:

Bu değişikliklerle, uygulama bağlantısını mobil cihazımızda açarsak onu yükleyebilir ve sanki yerel olarak kurulu bir uygulamaymış gibi kullanabiliriz.

Lovable’ın Sınırlamaları

Lovable’ın potansiyeline rağmen, sınırlamalarını dikkate almak önemlidir.

Güvenlik endişeleri

Lovable, kod yazmadan uygulama oluşturmak için çekici bir yol sunsa da, özellikle kodlama deneyimi olmayanlar için uygulama güvenliği konusunda soru işaretleri doğurur. Kullanıcılar, uygulamalarının veritabanında yetkisiz erişimi önlemek için gerekli güvenlik önlemlerinin bulunduğundan nasıl emin olabilir; örneğin bir kullanıcının başka bir kullanıcının listesine görev eklemesini engellemek gibi?

Uygulama oluşturma sürecindeki komutlarda bu kritik nokta geçmedi; bu da potansiyel açıkların incelenmeden kalmasına yol açabilir. Teknik geçmişi olmayan kullanıcılar bu güvenlik endişelerini değerlendirmekte ve yönetmekte zorlanabilir.

Lovable gerçekten geliştiriciler için daha hızlı mı?

Zaten kendi araç ve kod kütüphanelerine sahip geliştiriciler için soru şu hâle geliyor: Lovable gerçekten daha mı hızlı?

Birçok geliştirici, ödemeler, kimlik doğrulama ve CRUD işlemleri gibi özellikleri kapsayan, güvendikleri ve aşina oldukları dahili bir kod parçacıkları ve modül kütüphanesi oluşturarak becerilerini geliştirmiştir. Bunlar, kendi tarzlarına ve teknoloji tercihlerine göre uyarlanmıştır.

Lovable, kullanılan teknolojiler üzerinde aynı düzeyde kontrol sunmayabilir; bu da belirli sistem ve iş akışlarına alışkın olanlar için bir dezavantaj olabilir. Platform, hızlı prototipleme için kolay bir yol sunsa da, geliştiriciler mevcut araç ve yöntemlerine bağlı kalmayı, özellikle sundukları sorunsuz entegrasyon ve aşinalık dikkate alındığında, daha verimli bulabilir.

Programcı olmayanlar için hata ayıklama

Lovable, kod yazmadan uygulama oluşturmaya büyük kolaylık getirse de, otomatik çözümlerin yetersiz kaldığı ve manuel müdahalenin gerektiği durumlarda programcı olmayanların nasıl hareket edeceğine dair önemli bir endişe vardır. Platform, kendi kendine çözemediği bir sorunla karşılaştığında ne olur? Hedef kullanıcılar kodlama becerisine sahip değilken bu darboğazları kim aşar?

Koda dalma imkânı olmadan, kodlama bilmeyen bir kişi sıkışmış hissedebilir ve sonraki adımın ne olacağından emin olmayabilir. Bu bağımlılık, projelerin durmasına ve hayal kırıklığına yol açabilir; potansiyel olarak bir programcı tutmayı veya harici yardım almayı gerektirebilir ki bu da ek maliyet ve gecikmeler anlamına gelir.

Sonuç

Sonuç olarak, Lovable uygulama geliştirmeyi erişilebilir kılarken, programcı olmayanlar için başarısı büyük ölçüde, basit komutların ötesinde işler karmaşıklaştığında kullanıcılara nasıl destek olduğuna bağlıdır.

Lovable’ın gerçekten herkese uygulama geliştirmeyi erişilebilir kılma vaadini yerine getirdiğine inanıyorum. Günde yalnızca beş komut gönderme sınırlamasına rağmen, yine de işlevsel bir uygulamayı etkili bir şekilde oluşturabiliyoruz.

Platform, daha karmaşık iş akışlarını yönetme konusunda güçlü bir yetenek sergiliyor ve ayrıntılı uygulama özelleştirmeleri yapmamıza izin veriyor. Bu da, sınırlı etkileşimler içinde bile yaratıcı uygulama fikirlerini çalışan uygulamalara dönüştürebileceğimiz anlamına geliyor.