Vibe Coding Hızlı Başlangıç Kılavuzu
AI destekli programlamayı sıfırdan öğrenin ve 30 dakikada ilk Vibe Coding projenizi oluşturun
- Uygun AI programlama araçlarını anlama ve seçme
- Temel AI etkileşim tekniklerini öğrenme
- İlk Vibe Coding projenizi tamamlama
- Verimli bir geliştirme iş akışı kurma
1İlk AI Programlama Aracınızı Seçin
Doğru aracı seçmek Vibe Coding'de başarılı bir başlangıç yapmanın anahtarıdır. Bu kanıtlanmış araçlarla başlamanızı öneririz:
💡 Öneri
Eğer tamamen yeni başlayan biriyseniz, **Cursor** ile başlamanızı şiddetle öneririz. Özellikle AI destekli programlama için tasarlanmış, kullanıcı dostu arayüz ve yumuşak öğrenme eğrisi sunar.
2Kurulum ve Temel Yapılandırma
Cursor'u örnek alarak, ilk AI programlama aracınızı hızla nasıl kuracağınız ve yapılandıracağınız:
- 1
Resmi Web Sitesini Ziyaret Edin
cursor.sh'a gidin ve işletim sisteminiz için sürümü indirin
- 2
Uygulamayı Kurun
İndirilen kurulum programını çalıştırın ve kurulumu tamamlamak için talimatları izleyin
- 3
İlk Başlatma
Cursor'u başlatın ve ilk kurulum sihirbazını tamamlayın
Giriş Yapın
AI özelliklerine erişim için GitHub veya e-posta kullanarak Cursor hesabı oluşturun.
Tema Seçin
Kişisel tercihe göre koyu veya açık tema seçin, göz yorgunluğunu azaltmak için koyu tema önerilir.
Kısayolları Yapılandırın
Anahtar kısayolları öğrenin: Cmd+K (kod üret), Cmd+L (AI sohbet), Tab (öneriyi kabul et).
3İlk Projenizi Oluşturun
Basit bir "Yapılacaklar Uygulaması" aracılığıyla Vibe Coding'in büyüsünü deneyimleyelim:
Proje Özellikleri
- Yeni yapılacak öğeler ekleme
- Görevleri tamamlandı olarak işaretleme
- İstenmeyen görevleri silme
- Temiz ve güzel arayüz tasarımı
Teknoloji Yığını
Tahmini Süre
15-20 dakika
# Cursor'da Cmd+Shift+P tuşuna basın, "New File" yazın
Üç dosya oluşturun:
• index.html
• style.css
• script.js
index.html'de yazın:
"Yapılacaklar uygulaması için HTML yapısı oluştur, giriş kutusu, buton ve görev listesi dahil"
Cmd+K tuşuna basın, AI otomatik olarak eksiksiz HTML kodu üretecek
style.css'de yazın:
"Yapılacaklar uygulaması için modern ve temiz stiller tasarla, kart düzeni ve yumuşak renkler kullan"
script.js'de yazın:
"Yapılacak öğeler için ekleme, silme ve tamamlandı işaretleme işlevselliğini uygulayan JavaScript kodu yaz"
- 1. index.html'i tarayıcıda açın
- 2. Tüm işlevlerin düzgün çalıştığını test edin
- 3. Sorun varsa AI sohbetinden yardım isteyin
- 4. Gerektiğinde stilleri ve işlevselliği ayarlayın
4Temel Teknikleri Öğrenin
- ✅ Spesifik olun: Soyut kavramlar yerine somut işlevsellik tanımlayın
- ✅ Adım adım: Karmaşık görevleri küçük adımlara bölün
- ✅ Bağlam sağlayın: Proje geçmişini ve teknoloji yığınını açıklayın
- ✅ Örnekler verin: Beklenen girdi/çıktı örnekleri sağlayın
- ❌ Çok belirsiz: "Bana bir web sitesi yapmasında yardım et" gibi ifadelerden kaçının
- ❌ Aynı anda çok fazla özellik istemek
- ❌ Üretilen kodu doğrulamama
- ❌ Kod yorumlarını ve belgelendirmeyi görmezden gelme
- 🔄 Yinelemeli geliştirme: Küçük adımlar, sürekli gelişim
- 🧪 Hemen test etme: Her özelliği tamamladıktan hemen sonra test etme
- 📝 Düşünceleri kaydetme: Yararlı promtları ve kalıpları saklama
- 🎯 Merkeze odaklanma: Önce temel işlevselliği uygulama, sonra güzelleştirme
- 📖 Resmi belgeler: Araçların eksiksiz özelliklerini öğrenme
- 👥 Topluluk forumları: Tartışmalara katılma ve deneyim paylaşma
- 🎬 Video eğitimleri: Gerçek işlem gösterilerini izleme
- 💡 Örnek projeler: Mükemmel kod kalıplarını öğrenme
🎉 Tebrikler! İlk Vibe Coding projenizi tamamladınız
Artık Vibe Coding'in temel kavramlarını ve işlemlerini öğrendiniz. Bir sonraki aşamaya hazır mısınız?