Open Lovable Nasıl Kullanılır: Loveable AI'a Açık Kaynak Alternatifi

Merhaba geliştirici arkadaşlar! Hiç herhangi bir web sitesini klonlayıp saniyeler içinde şık bir React uygulamasına dönüştürmeyi hayal ettiniz mi? O zaman kemerlerinizi bağlayın, çünkü Lovable AI'ın harika açık kaynak alternatifi olan Open Lovable'a dalıyoruz. Bu araç, yapay zekayı kullanarak web sitelerini modern React uygulamaları olarak yeniden oluşturmanıza olanak tanır, üstelik tescilli muadilinin yüksek fiyat etiketi olmadan. Bu rehberde, Open Lovable'ın ne olduğunu, neden oyunun kurallarını değiştirdiğini ve çekirdek teknoloji yığınını kullanarak nasıl kurulacağını keşfedeceğiz: güvenli kod yürütme için E2B Sandbox, web kazıma için Firecrawl, hızlı çıkarım için Kimi AI modeli ve GitHub deposunun klonlanması. Rehberin sonunda, kendi React klonlarınızı oluşturmaya hazır olacaksınız—hadi başlayalım!

Open Lovable Nedir ve Neden Lovable AI Yerine Onu Seçmelisiniz?

Open Lovable, Mendable AI'dan gelen ve yapay zeka destekli araçları kullanarak herhangi bir web sitesini modern bir React uygulaması olarak klonlamanıza ve yeniden oluşturmanıza olanak tanıyan açık kaynaklı bir projedir. Web sitesi ekran görüntülerinden veya açıklamalarından React kodu oluşturmak için yapay zeka kullanan tescilli bir hizmet olan Lovable AI'a ücretsiz bir alternatif olarak piyasaya sürülen Open Lovable, abonelikler veya sınırlamalar olmadan gücü elinize verir. github.com/mendableai/open-lovable adresinde GitHub'da barındırılmaktadır ve şeffaflık, özelleştirme ve isteğe bağlı API kullanımı dışında sıfır maliyet isteyen geliştiriciler için tasarlanmıştır.

Lovable AI, yenilikçi olsa da, tam erişim için ayda 25 dolardan başlayan ücretli bir plan gerektirir ve üretimler ile özelliklerde sınırlamalar vardır. Open Lovable ise tamamen ücretsiz ve açık kaynaklıdır, MIT lisansı altındadır, yani istediğiniz gibi çatallayabilir, değiştirebilir ve dağıtabilirsiniz. Yapay zeka destekli web geliştirmeyi demokratikleştirmek için inşa edilmiş, Mendable AI'ın topluluğa bir armağanıdır. İster React ile deneyler yapan yalnız bir geliştirici olun, ister uygulamaların prototipini oluşturan bir ekip olun, Open Lovable yüksek kaliteli sonuçlar sunarken zamandan ve paradan tasarruf etmenizi sağlar.

Öne çıkan yönlerinden biri, gizlilik ve kontrole odaklanmasıdır—yerel olarak çalıştırın, kendi API anahtarlarınızı kullanın ve satıcıya bağımlılıktan kaçının. Ayrıca, daha fazla çerçeve desteği veya gelişmiş kazıma seçenekleri gibi yeni özellikler eklemek için katkılara açık, topluluk odaklıdır. Tescilli araçlardan sıkıldıysanız, Open Lovable özgürlüğe biletinizdir!

Open Lovable'ın Teknoloji Yığını Anlayışı

Open Lovable, web kazıma, yapay zeka çıkarımı ve güvenli yürütmeyi birleştiren akıllı bir yığın üzerine inşa edilmiştir. Her bir bileşeni kısaca inceleyelim:

E2B Sandbox: Bulutta Güvenli Kod Yürütme

E2B Sandbox, yalıtılmış ortamlarda kod çalıştırmak için bulut tabanlı bir platformdur; güvenilmeyen kod veya yoğun hesaplama içeren yapay zeka görevleri için mükemmeldir. Open Lovable'da, kötü amaçlı komut dosyaları gibi potansiyel güvenlik risklerini önleyerek oluşturulan React kodunun güvenli bir şekilde yürütülmesini sağlar. e2b.dev adresinden bir API anahtarı alırsınız ve temel kullanım için ücretsizdir (daha fazla sanal alan için ücretli katmanlar mevcuttur). Bunu, yapay zekanızın güvenli oyun alanı olarak düşünün—yerel makinenizi tehlikeye atmadan web sitelerini klonlamak için vazgeçilmezdir.

Kimi AI Modeli: Hızlı ve Verimli Çıkarım

Moonshot AI'dan Kimi AI modeli, kodlama ve uzun bağlam görevleri için optimize edilmiş yüksek performanslı bir LLM'dir ve Groq gibi sağlayıcılar aracılığıyla ışık hızında çıkarım için kullanılabilir. Open Lovable'da Kimi, kazınan web sitelerini analiz eden ve React kodu oluşturan yapay zekayı güçlendirir. Beta sürümünde (Groq'un ücretsiz katmanı aracılığıyla) ücretsizdir veya 1K token başına yaklaşık 0,0002 ABD doları gibi düşük bir maliyetle sunulur. Kimi, web yapılarını anlamada ve temiz React bileşenleri çıkarmada üstündür, bu da onu bu araç için ideal kılar. Groq kullanıyorsanız, console.groq.com adresinden bir anahtar alın—hızlıdır ve 128K token'a kadar destekler.

Firecrawl: Veri Toplama için Sağlam Web Kazıma

Firecrawl, Open Lovable'ın veri toplama sürecinin temelini oluşturan güçlü bir web kazıma API'sidir. Web sitelerini verimli bir şekilde tarar, JavaScript oluşturma ve bot önleme önlemleri gibi yaygın zorlukları ele alırken HTML, metin, görüntüler veya JSON gibi yapılandırılmış içeriği çıkarır. Open Lovable işlem hattında, Firecrawl hedef sitenin düzenini ve öğelerini getirir, bunlar daha sonra doğru React klonları oluşturmak için Kimi AI tarafından analiz edilir. firecrawl.dev adresinden bir API anahtarı edinin—sayfa başına yaklaşık 0,0001 ABD doları gibi uygun bir fiyata sahiptir ve manuel müdahale olmadan güvenilir, yüksek kaliteli web sitesi yeniden oluşturmaları için çok önemlidir.

GitHub Deposu Klonu: Open Lovable'ın Çekirdeği

Open Lovable'ın kalbi, başlamak için klonladığınız github.com/mendableai/open-lovable adresindeki GitHub deposudur. Bu depo, Next.js ön ucunu, yapay zeka entegrasyon komut dosyalarını ve yapılandırma dosyalarını içerir. Klonlamak, yeni yapay zeka modelleri veya kazıma seçenekleri eklemek gibi özelleştirmeye olanak tanıyan kaynak koduna tam erişim sağlar. Basit bir git clone ile halledilebilir ve açık kaynak olduğu için topluluğa geri katkıda bulunabilirsiniz.

Birlikte, bu yığın sorunsuz bir işlem hattı oluşturur: bir siteyi Firecrawl ile kazıyın (depoda entegre), Kimi ile analiz edin, E2B'de güvenli bir şekilde yürütün ve bir React uygulaması çıkarın. Şimdi, hadi kuralım!

Open Lovable'ı Kurmak İçin Adım Adım Kılavuz

Open Lovable'ı çalıştırmak basittir. Depoyu klonlayacak, anahtarları yapılandıracak ve bir web sitesi klonu ile test edeceğiz. Takip edin!

Adım 1: Depoyu Klonlayın

Terminalinizi Açın:

• Favori terminalinizi (örn. VS Code entegre terminali veya iTerm) başlatın.

Depoyu Klonlayın:

• Şunu çalıştırın:

git clone https://github.com/mendableai/open-lovable.git
cd open-lovable

• Bu, Next.js uygulamasını ve yapay zeka komut dosyalarını içeren en son kodu GitHub'dan çeker.

Bağımlılıkları Yükleyin:

• Node.js paketlerini yükleyin:

npm install

• Bu, React'tan yapay zeka entegrasyonlarına kadar her şeyi kurar.

Adım 2: .env.local Dosyasında API Anahtarlarını Yapılandırın

Open Lovable, E2B, Firecrawl (kazıma için) ve yapay zeka sağlayıcınız (örn. Kimi için Groq) için anahtarlara ihtiyaç duyar.

.env.local Oluşturun:

• Proje kök dizininde .env.local dosyasını oluşturun ve şunları ekleyin:

# Gerekli
E2B_API_KEY=e2b_api_anahtarınız  # e2b.dev adresinden
FIRECRAWL_API_KEY=firecrawl_api_anahtarınız  # web kazıma için firecrawl.dev adresinden

# İsteğe Bağlı Yapay Zeka Sağlayıcıları (en az bir tane gerekli)
ANTHROPIC_API_KEY=anthropic_api_anahtarınız  # console.anthropic.com adresinden (Claude)
OPENAI_API_KEY=openai_api_anahtarınız  # platform.openai.com adresinden (GPT)
GROQ_API_KEY=groq_api_anahtarınız  # console.groq.com adresinden (Kimi modeli için)

• E2B Anahtarını Alın: e2b.dev adresinden kaydolun, bir API anahtarı oluşturun—temel sanal alanlar için ücretsizdir.
• Firecrawl Anahtarını Alın: firecrawl.dev adresinden kaydolun ve bir anahtar oluşturun—web sitesi içeriğini kazımak için vazgeçilmezdir.
• Kimi için Groq Anahtarını Alın: console.groq.com adresinden kaydolun, ücretsiz bir API anahtarı alın. Kimi hızlıdır (saniyede 200 token'a kadar) ve kod üretimi için harikadır.

Kaydedin ve Yeniden Başlatın:

• Dosyayı kaydedin. Ortam değişkenleri Next.js'de otomatik olarak yüklenir.

Adım 3: Open Lovable'ı Yerel Olarak Çalıştırın

Geliştirme Sunucusunu Başlatın:

• Şunu çalıştırın:

npm run dev

• Tarayıcınızda http://localhost:3000 adresini açın.

Bir Web Sitesi Klonunu Test Edin:

• Uygulamada bir web sitesi URL'si girin (örn. https://example.com. Klonlamak istediğiniz herhangi bir web sitesi).
• Open Lovable, siteyi Firecrawl ile kazıyacak, Kimi (Groq aracılığıyla) ile analiz edecek ve E2B Sandbox'ta bir React uygulaması oluşturacaktır.
• Oluşturulan React kodunu indirin ve npm start ile yerel olarak çalıştırın.

Adım 4: Open Lovable'ı Özelleştirin ve Genişletin

Open Lovable oldukça özelleştirilebilir—işte onu kendinize göre nasıl yapacağınız:

1. Yapay Zeka Modellerini Değiştirin:

• Daha iyi akıl yürütme için Claude (ANTHROPIC_API_KEY) veya yaratıcılık için GPT (OPENAI_API_KEY) kullanmak üzere .env.local dosyasını düzenleyin.

2. Özellikler Ekleyin:

• Depoyu çatallayın ve özel istemler eklemek veya Vue.js çıktısını desteklemek için src/pages/index.tsx dosyasını değiştirin.

3. Vercel'e Dağıtın:

• GitHub'a itin ve canlı bir sürüm için Vercel'e dağıtın: vercel --prod.

4. Firecrawl ile Ölçeklendirin: Ücretsiz limitlere ulaşırsanız sınırsız kazıma için Firecrawl'ın ücretli planına yükseltin.

Profesyonel İpucu: Kazıma başarısız olursa (örn. bot önleme önlemleri nedeniyle), Firecrawl ayarlarında bir proxy kullanın—ayrıntılar için belgelerine bakın.

Yaygın Sorun Giderme

• API Anahtarı Hataları mı? .env.local dosyasındaki anahtarları doğrulayın ve sağlayıcının kontrol panelinde etkin olduklarından emin olun.
• Kazıma Başarısız mı Oluyor? Bazı siteler Firecrawl'ı engeller; farklı bir URL deneyin veya koda başlıklar ekleyin.
• Yavaş Üretim mi? Groq üzerindeki Kimi hızlıdır, ancak gerekirse GPT-4o-mini gibi daha hafif bir modele geçin.
• E2B Sandbox Sınırlamaları mı? Ücretsiz katmanın kısıtlamaları vardır; daha fazla eşzamanlı çalıştırma için yükseltin.
• Depo Klonlama Sorunları mı? Git'in yüklü olduğundan ve internet bağlantınızın olduğundan emin olun.

Open Lovable'ı Lovable AI ile Karşılaştırmak

Lovable AI cilalı ve kullanıcı dostu olsa da, sınırsız üretim için ayda 25 dolardan başlayan ücretli planlara sahip tescilli bir araçtır. Open Lovable sonsuza kadar ücretsizdir, ancak API maliyetlerini siz yönetirsiniz (örn. Groq'un ücretsiz katmanı temel ihtiyaçları karşılar, Kimi için 1K token başına yaklaşık 0,0002 ABD doları). Lovable AI, önceden oluşturulmuş şablonlarla daha fazla rehberlik sunarken, Open Lovable, özelleştirme için tam kod erişimi sağlar—kontrol isteyen geliştiriciler için idealdir. Gizlilik önemliyse, Open Lovable yerel olarak çalışırken, Lovable AI bulut tabanlıdır. Genel olarak, Open Lovable, özellikle topluluk desteğiyle maliyet ve esneklik açısından kazanır.

Open Lovable İçin Gerçek Dünya Kullanım Durumları

Open Lovable çeşitli senaryolarda öne çıkar:

• Web Sitesi Prototipleme: Bir rakibin sitesini klonlayın ve A/B testi için bir React uygulamasına dönüştürün.
• React Öğrenme: Yapıları ve bileşenleri incelemek için mevcut sitelerden React kodu oluşturun.
• Eski Siteleri Taşıma: Eski HTML sitelerini kazıyın ve daha kolay bakım için modern React'e dönüştürün.
• E-ticaret Deneyleri: Bir mağazanın düzenini klonlayın ve arka ucunuzla özel bir React ön ucu oluşturun.

Kimi'nin kodlama zekası ve E2B'nin güvenliği ile üretim prototipleri için güvenilirdir.

Open Lovable'ın Geleceği ve Katkılar

Açık kaynaklı bir proje olarak, Open Lovable topluluk odaklıdır—Svelte desteği veya daha iyi hata yönetimi gibi özellikler eklemek için GitHub'da sorunlar veya PR'lar gönderebilirsiniz. Mendable AI, daha fazla model (örn. Claude entegrasyonu) ve gelişmiş kazıma için güncellemeler planlamaktadır. Sürümler için github deposunu takip edin!

Sonuç

Artık bir Open Lovable profesyonelisiniz! Depoyu klonlamaktan E2B, Kimi ve Firecrawl ile React uygulamaları oluşturmaya kadar, Lovable AI'a rakip olacak ücretsiz bir araca sahipsiniz. Farklı web siteleriyle deney yapın, kodu özelleştirin ve kreasyonlarınızı paylaşın. Sorularınız veya harika klonlarınız mı var? Bir yorum bırakın—duymayı çok isterim!