Vibe coding: kendi küçük uygulamanızı yapın

Vibe coding'de ne yapmak istediğinizi gündelik bir dille anlatırsınız. Asistan kodu yazar, sonucu gösterir ve geri bildirimlerinize göre düzenler. Programlama bilmeniz gerekmez. Örneğin bir eğitim için quiz, küçük bir oyun veya iş arkadaşlarınız için kullanışlı bir araç yapabilirsiniz.

Yalnızca masaüstü uygulamasına ihtiyacınız var. Node.js ve git'i yüklemeniz gerekmez: uygulama bunları zaten içinde barındırır.

1. Bir çalışma klasörü seçin

Bilgisayarınızda boş bir klasör oluşturun, örneğin EğitimQuizi, ve bunu sohbetinizin çalışma klasörü olarak seçin. Bunun nasıl yapılacağını Yerel dosya erişimi sayfasında okuyabilirsiniz. Asistan yalnızca bu klasörde çalışır.

2. Ne istediğinizi anlatın

Ne yapmak istediğinizi olabildiğince somut anlatın. Örneğin:

Bilgi güvenliği atölyesi için tek bir HTML sayfası olarak bir quiz yap. On çoktan seçmeli soru, büyük düğmeler, sonunda bir puan ve baştan başlamak için bir düğme olsun.

Bunun gibi basit bir sayfayı asistan, uygulamanın yerleşik web sunucusuyla gösterir. Sonuç yerleşik tarayıcıda görünür: üst çubuğun sağındaki Tarayıcı düğmesi (dünya simgesi). Ayrıntıları Yerel sunucular ve yerleşik tarayıcı bölümünde bulabilirsiniz.

Memnun değil misiniz? Neyin değişmesi gerektiğini söylemeniz yeterli:

Düğmeleri yeşil yap ve yanlış cevapta doğru cevabı göster.

Kendi fotoğrafların ve asistanın bakması

Mesajına bir fotoğraf ekle ve şunu iste:

Bu fotoğrafı web sayfasına koy.

Asistan fotoğrafı proje klasörüne, örneğin img/ içine kaydeder ve sayfaya yerleştirir. Bu, asistanın senin için az önce oluşturduğu bir görselle de olur.

Yerleşik tarayıcıdaki sayfada bir sorun mu var? Şunu iste:

Sayfada neyin yanlış olduğuna bak.

Asistan sayfanın metnine, bir ekran görüntüsüne ve hata mesajlarına bakar. Bkz. Asistanın sayfaya bakması.

Asistan yerleşik tarayıcıda bir sayfayı kendisi açtığında sayfa yüklenene kadar bekler ve hata mesajlarını görür; örneğin bir betik hatası ya da yüklenmeyen bir dosya. Çalıştığını söylemeden önce bunları düzeltir. Ardından sayfayı bir kullanıcı gibi dener: düğmelere tıklar, alanları doldurur, tuşlara basar ve bu sırada çıkan hataları düzeltir. Her şeyin istediğiniz gibi çalışıp çalışmadığını kendiniz kontrol edersiniz.

3. Daha büyük uygulamalar

Birden fazla ekranı olan bir uygulama gibi daha büyük bir şey istiyorsanız asistan, örneğin Vite ve React ile bir proje oluşturabilir:

Bu klasörde, iş arkadaşlarının toplantı odası ayırtabileceği bir React uygulamasını Vite ile oluştur. Her şeyi yükle, uygulamayı başlat ve sonucu göster.

Böyle bir projenin başlatılmasını (örneğin npm create vite@latest ile) komut kartında onaylarsınız. Ardından asistan paketleri yükler. Bunu da onaylarsınız ya da Paket kurulumlarına sormadan izin ver seçeneğini açarsınız. Bkz. Paket yükleme. Her komut için kart istemiyor musunuz? İlk kartta Bu projeye güven seçeneğini seçin.

4. Sürümleri kaydedin

Sürüm, projenizin bir anlık görüntüsüdür. Bir değişikliği beğenmezseniz önceki bir sürüme dönebilirsiniz. Uygun bir anda asistandan şunu isteyin:

Bir sürüm kaydet.

İlk seferde asistan, klasör için bir sürüm geçmişi başlatır. Parola veya anahtar (Google API anahtarları dahil) gibi gizli bilgilere benzeyen dosyalar hiçbir zaman bir sürüme girmez. Asistan bir şeyi atladığında bunu bildirir.

5. Projenizi GitHub'a yükleyin

GitHub'da projenizi çevrimiçi olarak saklarsınız. Böylece bir yedeğiniz olur ve başka bir bilgisayarda da üzerinde çalışmaya devam edebilirsiniz.

GitHub'ı bağlama

Herkes kendi kişisel GitHub hesabını bağlar. Henüz hesabın yok mu? Önce github.com/signup adresinden ücretsiz bir hesap oluştur.

1. Ayarlar bölümüne gidin ve Masaüstü durumu altında GitHub panelini bulun.
2. GitHub’ı bağla düğmesine tıklayın. Uygulama bir kod gösterir ve tarayıcınızda github.com/login/device sayfasını açar.
3. Kodu GitHub'da girin (Kodu kopyala ile kopyalayabilirsiniz) ve izin verin. Sayfa açılmadıysa GitHub’ı aç düğmesine tıklayın.
4. Panel artık @kullanıcı-adınız olarak bağlandı gösterir.

GitHub ne istiyor? GitHub, HandiHow-B-V tarafından sunulan AI-School Desktop uygulamasını gösterir ve depolarına (repo) erişim ister: özel depolar dahil okuma ve yazma. Bu erişim, projeni oluşturmak ve güncellemek için gereklidir. Yalnızca sayfa github.com üzerindeyse izin ver.

Kodun süresi mi doldu? Kod yaklaşık 15 dakika geçerlidir. Süresi dolduysa yeniden GitHub’ı bağla düğmesine tıkla.

Bir kuruluşun depoları:

• Kuruluş üçüncü taraf uygulamaları kısıtlıyorsa izin ekranında kuruluşun yanındaki Request (erişim iste) düğmesine tıkla. Bunu daha sonra github.com/settings/applications > AI-School Desktop üzerinden de yapabilirsin.
• Kuruluşun bir sahibi bunu kuruluşun Settings > Third-party access > OAuth application policy bölümünde onaylar.
• Bu onay olmadan kendi depoların çalışır, kuruluşun depoları çalışmaz.

Başka bir hesap mı kullanacaksın? Bağlantıyı kes düğmesine tıkla ve yeniden bağlanmadan önce tarayıcıda github.com oturumunu kapat (ya da gizli pencere kullan). Aksi hâlde GitHub zaten oturum açtığın hesabı kullanır.

not

Uygulamanın eski sürümleri "GitHub ile oturum açma bu uygulama sürümünde henüz kullanılamıyor" mesajını gösterir. Bu durumda uygulamayı güncelle.

Çevrimiçi yayımlama ve güncelleme

Ardından örneğin şunu isteyin:

Bu projeyi GitHub'a yükle.

Asistan, tam adresi ve Uygulamaya yerleşik ile Ağ açık etiketlerini içeren bir kart gösterir. Devam etmek için Çalıştır düğmesine, durdurmak için Reddet düğmesine tıklayın. Herkese açık bir depo istemediğiniz sürece yeni depo gizlidir. Adres github.com değilse veya depo herkese açık olacaksa kart uyarır. Çevrimiçi yayımlarken hangi dosyaların gönderileceğini görürsünüz.

Daha sonra örneğin şunları kullanabilirsiniz:

• "Yeni sürümü çevrimiçi yayımla." Asistan yeni sürümlerinizi GitHub'a gönderir.
• "En yeni sürümü al." Asistan GitHub'daki değişiklikleri alır.
• "https://github.com/naam/project projesini bu klasöre indir." Asistan mevcut bir projeyi indirir.

Herkese açık bir projeyi bağlantı olmadan da indirebilirsiniz. Çevrimiçi yayımlamak ve yeni bir depo oluşturmak için bağlantı gerekir.

6. Güvenlik ipuçları

• Yeni depolar gizlidir. Bir depoyu yalnızca kodu herkesin görmesinde sakınca yoksa herkese açık yapın.
• Uygulamanıza asla parola, anahtar veya başka gizli bilgiler koymayın.
• Bir Google API anahtarı mı kullanıyorsunuz (AIza ile başlar, örneğin bir Firebase uygulamasının web anahtarı)? Onu, asistanın sürümlerin dışında tuttuğu .env gibi bir dosyaya koyun. Anahtar kodunuzda kalırsa o dosya çevrimiçi yayımlanmaz.
• Çalıştır düğmesine tıklamadan önce karttaki adresi her zaman kontrol edin.
• Bağlantı, bu bilgisayardaki kullanıcı hesabınızda şifrelenmiş olarak saklanır. Asistan GitHub anahtarınızı hiçbir zaman görmez. Ortak bir bilgisayarda çalışıyorsanız işiniz bitince Bağlantıyı kes düğmesine tıklayın.
• Bağlantıyı kes bağlantıyı yalnızca bu bilgisayardan kaldırır. Erişimi tamamen iptal etmek istiyorsanız bunu GitHub'da Settings > Applications bölümünde yapın.