Vibe Coding ile Uygulama Nasıl Yapılır: Fikirden Yayınlanmış Uygulamaya

Vibe coding ile bir uygulama yapmak için ilk sürümü anlatan tek sayfalık bir açıklama yazın, bunu ilk promptunuz olarak bir yapay zeka uygulama oluşturucusuna verin, ardından uygulamayı küçük, test edilmiş adımlarla büyütün: veri, giriş, ana iş akışı, cilalama, bir güvenlik incelemesi ve en sonunda yayınlama. Bu rehber, küçük bir yoga stüdyosu için bir ders rezervasyon uygulamasını her aşamada, her adımda kullanılan promptlarla birlikte takip eder.

Hiç bu şekilde bir şey yapmadıysanız, yeni başlayanlar için vibe coding eğitimimiz daha küçük bir yerden başlar. Vibe coding'e bağlı olmayan daha geniş bir genel bakış için yapay zeka ile uygulama nasıl yapılır rehberine bakın.

Proje

Haftada sekiz ders yapan Sara adında bir yoga stüdyosu sahibi düşünün. Rezervasyonlar WhatsApp üzerinden gelir; her ders için kâğıt bir liste tutar ve sık sık fazla rezervasyon yapar. Şunları istiyor:

• Öğrencilerin haftanın programını görüp bir yer ayırabilmesi.
• Her dersin bir kapasitesi olması.
• Kapıda kontrol edebileceği, ders bazında bir liste.
• Öğrencilerin dersten iki saat öncesine kadar iptal edebilmesi.

Bu, tüm ilk sürüm. Ödeme yok, üyelik yok, uygulama mağazası yok. Bunlar sonra gelir ya da hiç gelmez.

Adım 1: Tek sayfalık bir spesifikasyon yazın

Herhangi bir araca dokunmadan önce ilk sürümü sade bir dille yazın. Burada on dakika harcamak, saatlerce süren gidip gelmelerden kurtarır. Kullanışlı bir yapı:

• Kim kullanır: öğrenciler (rezervasyon yapar ve iptal eder), Sara (dersleri yönetir, listeleri görür).
• Ekranlar: haftalık program, ders detayı, rezervasyonlarım, yönetici ders sayfası, yönetici ders listesi.
• Veri: dersler (ad, eğitmen, başlangıç saati, süre, kapasite), rezervasyonlar (öğrenci, ders, durum), öğrenciler (ad, e-posta, telefon).
• Kurallar: dolu bir derse rezervasyon yok; öğrenci başına ders başına bir rezervasyon; iptal, dersten iki saat öncesine kadar; yönetici sayfalarını yalnızca Sara görür.
• v1'de olmayanlar: ödemeler, ders paketleri, bekleme listeleri, hatırlatmalar.

“v1'de olmayanlar” listesi en çok önemli olanıdır. Yapımın bitirilebilir kalmasını sağlar. Daha tam bir spesifikasyon istiyorsanız, yapay zeka ile ürün gereksinim dokümanı yazma rehberi daha ileri gider.

Adım 2: Tüm döngüyü yönetecek bir araç seçin

Veritabanı, girişler ve herkese açık bir URL olan bir uygulama için, dosyalar veren bir sohbet asistanı yerine kodu çalıştıran, bir veritabanı ekleyen ve yayınlayan bir yapay zeka uygulama oluşturucusu kullanın. Vibe coding araçlarını karşılaştırma rehberi seçenekleri listeler. Burada Mythex'i kullanacağız; çünkü her adımı tek bir yerde karşılıyor: sohbet, canlı önizleme, gerçek bir veritabanı ve dosya depolama, tek tıkla yayınlama.

Adım 3: İlk prompt

Spesifikasyonu tek bir paragrafa çevirin. Tüm belgeyi her ayrıntısıyla birlikte bir kerede yapıştırmayın; çekirdeği verin, gerisini adımlarla ekleyin.

Yoga stüdyom için bir ders rezervasyon uygulaması yap. Öğrenciler ad, e-posta ve telefonla kayıt olur, bu haftaki programı görür ve bir derse yer ayırır. Her dersin adı, eğitmeni, başlangıç saati, süresi ve kapasitesi vardır; dolu bir ders “Dolu” gösterir ve rezerve edilemez. Öğrenciler kendi rezervasyonlarını görür ve dersten iki saat öncesine kadar iptal edebilir. Yönetici benim: dersleri ekleyip düzenleyebilirim ve her dersin rezervasyonlarını görebilirim. Sakin, sade bir tasarım olsun ve telefonda iyi çalışsın.

Aracın sizi anlayıp anlamadığından emin değilseniz, önce bir plan isteyin. Mythex'te Plan modu, kod yazmadan önce ekranları ve verileri ortaya koyar ve siz onaylarsınız.

Adım 4: Çekirdek döngüyü çalıştırın

Çekirdek döngü, uygulamanın var olma nedenidir: bir öğrenci bir ders rezerve eder, Sara bunu görür. Yalnızca bunu test edin:

1. Öğrenci olarak kayıt olun, bir ders rezerve edin.
2. Yönetici görünümünü açın. Rezervasyon orada mı?
3. Aynı dersi tekrar rezerve edin. Reddetmelidir.
4. Bir dersin kapasitesini 2 yapın, iki öğrenci hesabından rezerve edin, üçüncüyü deneyin.

Bu noktada genellikle iki sorun çıkar. Program, saatleri stüdyonun saat dilimiyle değil, sunucunun saat dilimiyle gösterir. Ve “Dolu” kontrolü yalnızca sayfada yapılır, bu yüzden hızlı bir çift tıklama iki rezervasyon oluşturur.

Tüm ders saatlerini, ziyaretçinin cihazı ne ayarlıysa ayarlansın, stüdyonun saat dilimi olan [Asia/Dubai] ile göster.

Bir rezervasyon oluşturulduğunda kapasiteyi ve tekrarlanan rezervasyonları yalnızca sayfada değil, sunucuda kontrol et. Son yer için aynı anda iki istek gelirse yalnızca biri başarılı olmalı.

Herhangi bir şey eklemeden önce çekirdek döngüyü düzeltin. Diğer her şey buna bağlıdır.

Adım 5: Kalan kuralları, her seferinde bir tane ekleyin

Şimdi spesifikasyonun kurallarını birer birer gözden geçirin:

Öğrenciler, dersin başlamasına iki saat kalana kadar bir rezervasyonu iptal edebilsin. Bundan sonra iptal düğmesini gizle ve iptali sunucuda net bir mesajla reddet.

Yönetici sayfalarını yalnızca benim hesabım açabilsin. Bunu yalnızca menüyü gizleyerek değil, her yönetici işleminde sunucuda kontrol et.

Her birinden sonra test edin ve yalnızca çalıştığında bir sonrakine geçin. Bir değişiklik bir şeyi bozarsa, düzeltmeleri üst üste yığmak yerine son iyi kontrol noktasına dönün ve daha net bir istek deneyin.

Adım 6: Gerçek kullanıcıların fark edeceği şeyleri cilalayın

Gerçek kullanıcılar küçük şeyleri fark eder. Sara'nın uygulaması için kısa bir liste:

• Boş durumlar: Boş bir sayfa yerine “Bu hafta henüz ders yok”.
• Onay: Rezervasyondan sonra “Vinyasa, Salı 18:00 için rezervasyonunuz hazır”.
• Telefon düzeni: Büyük düğmeler, 375 pikselli bir ekranda okunabilir program.
• Kalan yerler: Her ders kartında “3 yer kaldı”, böylece öğrenciler daha çabuk rezerve eder.

Her ders kartında kalan yerleri göster, örneğin “12 kişiden 3'ü boş”. Rezervasyondan sonra ders adını, günü ve saati içeren bir onay ve rezervasyonlarıma giden bir düğme göster.

Adım 7: Bir yabancı gibi test edin

Başkaları kullanmadan önce, uygulamayı bozmaya çalışarak yarım saat harcayın:

Yapay zekadan uç durumları gözden geçirmesini de isteyebilirsiniz:

Gerçek bir öğrencinin rezervasyonu ya da iptali bozabilecek on şeyi listele, her birini test et ve başarısız olanları düzelt. Neyi değiştirdiğini söyle.

Adım 8: Bir güvenlik incelemesi

Bu uygulama isimleri, e-postaları ve telefon numaralarını sakladığı için kısa bir güvenlik incelemesi yapmaya değer. Ana sorular:

• Bir öğrenci başka bir öğrencinin rezervasyonlarını ya da iletişim bilgilerini görebiliyor mu?
• Tarayıcıda çalışan kodda herhangi bir anahtar ya da şifre var mı?
• Kayıt formu botlara karşı korunuyor mu?
• Verilerin bir yedeği var mı?

Vibe coding'in güvenli olup olmadığı sayfamız her kontrolü açıklar ve bunlar için promptlar verir; yapay zeka ile oluşturulan uygulamalar için güvenlik kontrol listesi ise uzun versiyondur.

Adım 9: Yayınlayın

Çekirdek döngü, kurallar ve kontroller geçtiğinde yayınlayın. Mythex'te bu tek tıklamadır; uygulama, veritabanı ve barındırması hazır bir herkese açık URL alır. Pro'da book.sarasyoga.com gibi kendi alan adınızı bağlayabilirsiniz; bkz. özel alan adı nasıl bağlanır.

Bağlantıyı göndermeden önce yayınlanmış sürümü bir kez daha kontrol edin. Telefonunuzdan bir ders rezerve edin. Canlı ve önizleme sürümleri aynı davranmalı, yine de doğrulayın.

Adım 10: İlk kullanıcılar ve sonraki sürüm

Bağlantıyı önce beş düzenli öğrenciye verin, hepsine birden değil. Bir sonraki dersi rezerve etmek için bu bağlantıyı kullanmalarını ve neyin kafa karıştırıcı olduğunu size söylemelerini isteyin. Sonra en çok bahsettikleri ilk üç şeyi düzeltin.

Birkaç hafta gerçek kullanımdan sonra, böyle bir uygulama için bir v2 listesi neredeyse kendiliğinden ortaya çıkar: dolu dersler için bir bekleme listesi, bir önceki akşam e-posta hatırlatmaları ve çevrimiçi ödenen ders paketleri. Her biri aynı muameleyi görür: birkaç satırla tanımlayın, promptu yazın, test edin, yayınlayın. Ödeme eklemek için bkz. uygulamanıza ödeme nasıl eklenir. Duyuru için bkz. uygulama nasıl başlatılır ve ilk kullanıcılar nasıl bulunur.

Bir telefon uygulamasına dönüştürmek

Birçok stüdyo, öğrencilerinin telefonlarında bir simge olmasını ister. Mythex Pro'da yayınlanmış uygulama, bir Android uygulamasına (Google Play'e yükleyebileceğiniz bir dosya) ve kendi App Store Connect anahtarınızla TestFlight'a gönderilen bir iPhone uygulamasına, Mac olmadan dönüşebilir. Telefon uygulaması yayınlanmış web uygulamasını açar; bu yüzden her güncellemeyi yayınladığınızda telefon uygulaması da onu alır.

Buradan çıkarılacaklar

Asıl yapım kısa kısımdı. Uygulamayı kullanılabilir kılan şey; spesifikasyondaki “v1'de olmayanlar” listesi, önce çekirdek döngüyü test etmek, kapasite ve erişim için sunucu tarafı kurallar ve elli kişiden önce beş gerçek kullanıcı oldu. Başkaları için çalışması gereken bir uygulama olduğunda vibe coding budur.

Kendi uygulamanızı denemeye hazır mısınız? Tek sayfalık spesifikasyonunuzu yazın, sonra ilk paragrafı yapay zeka uygulama oluşturucusuna yapıştırın. Daha fazla uygulama türünü ve arkasındaki promptları görmek isterseniz vibe coding örneklerimize bakın.

Sorular