Yeni başlayanlar için küçük bir mobil uygulama "Vibe Coding" ile nasıl yapılır?

CometAPI
AnnaJan 28, 2026
Yeni başlayanlar için küçük bir mobil uygulama "Vibe Coding" ile nasıl yapılır?

“Vibe coding”, güçlü yapay zekânın ağır işleri üstlenmesine izin verirken sizin de sade İngilizceyle yönlendirme, test etme ve yineleme yapmanız anlamına gelir. Bu yeni, trend ve — evet — bu hafta sonu bununla küçük bir mobil uygulama yapabilirsiniz.

Teknik olmayan bir yeni başlayan için bu bir altın bilet. Artık bir "float" ile bir "string" arasındaki farkı öğrenmek için altı ay harcamanıza gerek yok. Ne istediğinizi tarif edebiliyorsanız, onu inşa edebilirsiniz. Bu rehber, bu hareketle ilgili en son gelişmeleri size aktaracak ve ilk küçük mobil uygulamanızı oluşturmanız için profesyonel, adım adım bir yol haritası sunacak.

Vibe Coding Nedir ve Herkes Neden Bunu Konuşuyor?

"Vibe coding" sadece bir argo değil; insanların yazılım yaratmak için bilgisayarlarla etkileşim kurma biçiminde temel bir değişimdir. 2025’in başlarında yapay zekâ araştırmacısı Andrej Karpathy tarafından ortaya atılan bu felsefe basittir: Siz niyete (“vibe”a) odaklanırsınız, yapay zekâ ise sözdizimini (kodu) halleder.

Geleneksel programlamada, her tuğlayı (kod satırını) elle döşeyen bir inşaat işçisi gibi davranırsınız. Vibe coding’de siz bir mimarsınız. Yapay zekâya, “Okyanus manzaralı modern bir oturma odası istiyorum” dersiniz ve o da odayı anında kurar. Kanepeyi beğenmezseniz, onu kendiniz sökmezsiniz; sadece “Kanepeyi mavi yap” dersiniz.

Vibe coding, “no-code” veya “low-code”dan nasıl farklı?

  • No-code: sürükle-bırak oluşturucular, önceden tanımlı bloklar; çok başlangıç dostu ama özel davranışlar için sınırlı.
  • Low-code: görsel araçlar + kod karışımı; hız ve özelleştirilebilirlik isteyen güçlü kullanıcılar için.
  • Vibe coding: doğal dil → yapay zekâ tarafından üretilen kod (potansiyel olarak sınırsız), ancak sonuçları doğrulamanız ve test etmeniz gerekir. Henüz yazılım mühendisliğinin yerine geçmez — araç kutusundaki güçlü bir başka araçtır.

Tamamen acemiler için güvenli mi?

Evet — prototipleme, öğrenme ve küçük uygulamaları yayımlama için — fakat bazı çekincelerle:

  • Çalışan bir uygulamayı hızlıca elde edebilirsiniz; bu motivasyon için harikadır.
  • İşlevselliği test etmeli ve sınırlamaları anlamalısınız: Yapay zekâ güvenlik açıkları, özensiz mimari ve ağır hesaplama kullanırsanız beklenmedik maliyetler getirebilir.

Vibe code etmek için hangi araçları kullanmalıyım — ve maliyeti ne olur?

Temel araçlar neler (ve neden)?

Araçlar: LLM asistanları (ChatGPT / Gemini / Claude / açık kaynak modeller) + Expo (React Native) veya Flutter + Supabase/Firebase backend.

Bunu neden seçmeli: Her şeyi belirtecek güce sahip olurken yine de yapay zekâya çalışan kod yazdırabilirsiniz. Biraz kod öğrenmek isterken çoğunlukla bir LLM ile konuşarak ilerlemek istiyorsanız ideal yol budur. LLM’i küçük modüller üretmek, yerelde test etmek ve yinelemek için kullanın. Mobil tarafta, Expo (React Native) cihazda test etmeyi kolaylaştırdığı için dost canlısıdır. Sürükle-bırak görseller ve dışa aktarılmış kod istiyorsanız FlutterFlow ile birleştirin.

“Vibe code” ederek mobil uygulama yapmak isteyen teknik olmayan bir acemi için minimal, pratik araç zinciri:

  1. Cursor — aracılar ve Sekme tamamlamaları olan yerel/bulut yapay zekâ kodlama IDE’si. Etkileşimli, aracılı iş akışları için harika; denemenizi sağlayan ücretsiz katman var; daha uzun kullanım için Pro planlar mevcut.
  2. Claude Code (Anthropic) — üst düzey, yapılandırılmış kod üretimi ve yinelemeli istemler için iyi bir aracılı kod asistanı/CLI ve web deneyimi. Cursor’a alternatif veya onunla birlikte faydalıdır.
  3. Expo (React Native) — yeni başlayanlar için çapraz platform mobil uygulamaya en kolay yol. Expo, derlemeleri, telefonunuzda Expo Go aracılığıyla test etmeyi yönetir ve cömert bir ücretsiz katmana sahiptir.
  4. Firebase (opsiyonel backend) — basit kimlik doğrulama / veritabanı / depolama. Küçük prototipler için ücretsiz Spark katmanı; ölçeklenirseniz kullanım başına ödemeli Blaze.

Peki ya maliyetler?

Önerilen başlangıç yığını (küçük bir mobil uygulamaya en hızlı rota):

  • Cursor: Başlangıçta ücretsiz; daha fazla aracı kullanımı için Pro $20/ay (Pro+ ve Ultra katmanları mevcut).
  • Claude: Ücretsiz/Pro/Max katmanları var; yoğun kullanım için ücretli planlar gerekebilir (Max katmanları $100+/ay olabilir). Ağır aracı kullanımında haftalık kotalara dikkat edin.
  • Expo: Aynı JavaScript kod tabanından iOS ve Android’i çalıştırır, mükemmel geliştirici araçları ve Expo Go ile cihaz önizlemesi sunar. Ücretsiz başlangıç katmanı; CI/CD/derleme kredileri için ücretli planlar yaklaşık $19/ay’dan başlar.
  • Firebase: Test için ücretsiz Spark katmanı; üretim kullanımı için Blaze (birim başına ödeme).
  • Replit (opsiyonel) — tarayıcı tabanlı editör + barındırma; hiçbir şey yerel kurmak istemezseniz kullanışlıdır; ücretsiz katman ve yaklaşık $20/ay’dan başlayan ücretli planlar.
  • GitHub/GitHub Copilot (opsiyonel) — kaynak kontrolü ve editör içinde yapay zekâ kod asistanı (Copilot ücretli planları yaklaşık $10/ay’dan başlar; ücretsiz bir katman mevcuttur).

Pratik tahmin: Ücretsiz katmanlarla $0’a prototipleyebilirsiniz. Mütevazı kullanım için $0–$50/ay bekleyin; Cursor Pro’ya abone olursanız $20/ay veya daha fazla derleme gerektiğinde Expo Starter için $19/ay. Claude Code’u yoğun kullanırsanız maliyetler hızla yükselebilir (token/hesaplama kullanımını izleyin).

Mağaza yayımlama ücretleri (gerçek dünya)

  • Apple Developer Program: App Store’da yayımlamak için yılda $99 USD.
  • Google Play Console: Google Play’de yayımlamak için tek seferlik $25 USD kayıt ücreti.

İki mağazada da yayımlayan, küçük bir uygulama yapan tek başına bir acemi için kabaca: ilk yıl $0–$200, ücretli LLM özellikleri veya ücretli derleme/yayımlama katmanları kullanıp kullanmamanıza bağlı. Ücretsiz katmanlar ve denemeler ilk geliştirme sürecini çıkarabilir.

İlk mobil uygulamanızı oluşturmanın adım adım süreci nedir? 📱

Hadi bir “Daily Vibe Check” uygulaması yapalım. Bu uygulama, kullanıcıların ruh hâlini (emoji) ve kısa bir notu kaydetmesine, listeye kaydetmesine izin verecek.

Aşama 1: Kurulum (Henüz Kod Yok)

  1. Cursor’ı indirin: cursor.com adresine gidip kurun. VS Code’a (standart bir kod editörü) benzer.
  2. Node.js’i kurun: Kod çalıştırmak için buna ihtiyacınız var. LTS sürümünü nodejs.org adresinden indirin.
  3. Expo Uygulamasını kurun: Gerçek fiziksel telefonunuza (iOS veya Android) “Expo Go” uygulamasını indirin.

Aşama 2: Projeyi “Vibe”leme

Cursor’ı açın.

Sağda bir “Chat” bölmesi göreceksiniz (genellikle açmak için Cmd+L veya Ctrl+L). Sihir burada gerçekleşir. Kod yazmazsınız; bir PRD (Ürün Gereksinimleri Dokümanı) istemi yazarsınız.

Bu istemi kopyalayıp Cursor’a yapıştırın:

"Expo kullanarak yeni bir React Native projesi başlatmak istiyorum.
Uygulamanın adı 'DailyVibe'.Uygulama Hedefi: Kullanıcıların günlük ruh hâlini kaydedebildiği basit bir takipçi.**Özellikler:**1) Geçmiş ruh hâli kayıtlarını gösteren bir ana ekran (Tarih + Emoji + Not).
2) 'Ruh Hâli Kaydet' düğmesi; bir modal veya yeni ekran açar.
3) Kayıt ekranında 5 emojiden seçim yapayım (Mutlu, Üzgün, Nötr, Heyecanlı, Yorgun) ve kısa bir metin notu yazabileyim.
4) Şimdilik verileri cihazda yerel olarak AsyncStorage kullanarak kaydet.Tasarım havası: Minimalist, pastel renkler, yumuşak yuvarlatılmış köşeler. Lütfen bu projeyi nasıl başlatacağımı adım adım yönlendirin ve ilk ekranın kodunu verin."

Aşama 3: “Kopyala-Yapıştır” Döngüsü

Cursor muhtemelen projeyi oluşturmak için bir komut çalıştırmanızı söyleyecektir. Şuna benzeyecektir:

npx create-expo-app@latest DailyVibe

Ne yapmalı:

  1. Cursor’da “Terminal”i açın (Ctrl + ~ veya Terminal > New Terminal).
  2. Bu komutu yapıştırın ve Enter’a basın.
  3. Bitmesini bekleyin.
  4. Yeni DailyVibe klasörünü Cursor’da açın.

Şimdi Cursor size uygulamanın kodunu verecek.

Genelde app/index.tsx veya App.js adlı bir dosya sağlar.

İş Akışınız:

  1. Oku: Cursor’ın ürettiği koda bakın.
  2. Uygula: Cursor’ın sohbette bir “Apply” düğmesi var. Tıklayın. Dosyanıza otomatik olarak kodu yazar.
  3. Çalıştır: Terminalde npx expo start yazın.
  4. Gör: Bir QR kodu belirecek. Telefonunuzdaki Expo Go uygulamasıyla tarayın. İşte bu. Uygulamanız telefonunuzda.

Aşama 4: Vibe’ı İnceltme (“Kodlama” Bölümü)

Burası “vibe coding”in parladığı yer.

Telefonda uygulamayı göreceksiniz.

Belki düğmeler çok küçük.

Piksel değerini elle değiştirmeye çalışmayın. Sadece Cursor’a söyleyin:

"Ana ekrandaki düğmeler çok küçük ve çirkin görünüyor. Onları büyük, tam genişlikte yapabilir misin ve yumuşak mor bir gölge ekleyebilir misin? Ayrıca üstte 'My Vibe Log' başlığını ekle."

Cursor kodu güncelleyecek. “Apply”a basarsınız. Telefonunuzdaki uygulama, yeni tasarımla anında yeniden yüklenir.

Aşama 5: Karmaşıklık Ekleme

Şimdi verileri kaydetmek istiyorsunuz.

Şöyle sorabilirsiniz:

"Bu kayıtları uygulamayı kapattığımda kaybolmayacak şekilde kaydetmek istiyorum. AsyncStorage kullanarak bir storage yardımcı dosyası oluştur ve ana ekranı oradan veri yükleyecek şekilde güncelle."

Cursor yeni bir dosya (ör. storage.ts) üretecek ve ana ekranınızı değiştirecektir.

Örnek App.js (temiz, acemi tarafından test edilmiş)

Aşağıda bir Expo projesine yapıştırabileceğiniz küçük, bağımsız bir örnek var. Her satırı anlayabilmeniz için özellikle basit tutulmuştur. (Bunu kullanmanızı ve ardından gerekirse LLM’den genişletmesini veya yeniden düzenlemesini istemenizi öneririm.)

import React, { useState, useEffect } from 'react';
import { SafeAreaView, View, TextInput, Button, FlatList, Text, TouchableOpacity, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const [text, setText] = useState('');
  const [notes, setNotes] = useState([]);

  useEffect(() => {
    (async () => {
      try {
        const saved = await AsyncStorage.getItem('@mood_notes');
        if (saved) setNotes(JSON.parse(saved));
      } catch (e) { console.warn('Load failed', e); }
    })();
  }, []);

  const saveNotes = async (newNotes) => {
    setNotes(newNotes);
    try {
      await AsyncStorage.setItem('@mood_notes', JSON.stringify(newNotes));
    } catch (e) { console.warn('Save failed', e); }
  };

  const addNote = () => {
    if (!text.trim()) return;
    const newNotes = [{ id: Date.now().toString(), text: text.trim() }, ...notes];
    saveNotes(newNotes);
    setText('');
  };

  const deleteNote = (id) => {
    saveNotes(notes.filter(n => n.id !== id));
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          placeholder="Nasıl hissediyorsun?"
          value={text}
          onChangeText={setText}
        />
        <Button title="Ekle" onPress={addNote} />
      </View>
      <FlatList
        data={notes}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.note}>
            <Text style={styles.noteText}>{item.text}</Text>
            <TouchableOpacity onPress={() => deleteNote(item.id)}>
              <Text style={styles.delete}>Sil</Text>
            </TouchableOpacity>
          </View>
        )}
        ListEmptyComponent={() => <Text style={styles.empty}>Henüz not yok — bir tane ekle!</Text>}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  inputRow: { flexDirection: 'row', gap: 8, marginBottom: 12 },
  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', padding: 8, borderRadius: 6 },
  note: { padding: 12, borderBottomWidth: 1, borderColor: '#eee', flexDirection: 'row', justifyContent: 'space-between' },
  noteText: { flex: 1 },
  delete: { color: 'red', marginLeft: 12 },
  empty: { textAlign: 'center', marginTop: 40, color: '#666' }
});

Notlar:

  • AsyncStorage’ı kurmak için şunu çalıştırın: npx expo install @react-native-async-storage/async-storage.
  • Kodu yapıştırdıktan sonra npx expo start çalıştırın ve Expo Go ile tarayın. Expo dokümanları tam adımları gösterir.

Vibe coding ile nasıl yineleme yaparım?

  • Bir şey bozulursa, hata mesajını kopyalayıp bağlamla birlikte LLM’e yapıştırın: “App.js’i çalıştırdım ve şu hatayı aldım: [paste error]. İşte package.json ve node sürümüm.” LLM’den düzeltme önermesini isteyin.
  • LLM’den yeniden düzenleme isteyin: “Not satırlarını ayrı bir NoteRow.js dosyasına alın ve PropTypes kullanın.”
  • Testler veya QA adımları isteyin: “Bu uygulama için Android ve iOS’ta çalıştırmam gereken 5 manuel test adımı ver.”

Kaybolmamak için en iyi uygulamalar?

Vibe code ederken bile “halüsinasyon” görmek veya hatalara takılmak kolaydır. İşte projenizi rayında tutmanın yolları:

1. Yapay zekâ ile bir Junior Developer gibi konuşun

Sadece “bir uygulama yap” demeyin. Spesifik olun. “Güzel yap” demek yerine, “bol beyaz alanlı, tipografi ağırlıklı ve San Francisco fontlu bir düzen kullan” deyin.

2. “Bir seferde tek özellik” kuralı

Asla aynı anda beş şey istemeyin.

  • Kötü: “Bir giriş ekranı, bir ayarlar sayfası ve bir veritabanı ekle.”
  • İyi: “Önce e-posta ve parola alanı olan basit bir giriş ekranı ekleyelim.”

3. “Hata Yapıştırma” yöntemi

Uygulama çökerse, kodu kendiniz düzeltmeye çalışmayın. Terminalden tüm hata mesajını kopyalayın, Cursor’a yapıştırın ve şöyle deyin: “Bu hatayı aldım. Ne oldu ve nasıl düzeltiriz?”

4. Sürüm kontrolü (“Kayıt Noktası”)

Uygulamanızı bir video oyunu gibi düşünün. Git (veya Cursor’ın yerleşik sürümleme özelliği) kullanarak “Kayıt Noktaları” oluşturun. Yeni bir özellik ekleyip her şeyi bozarsanız, “vibe”ların hâlâ iyi olduğu ana kolayca “geri dönebilirsiniz”.

Son Düşünceler: Bugün başlamalı mısınız?

“Kod bilmeme” ile “kendi girişimini kurma” arasındaki pencere hiç bu kadar dar olmamıştı. Vibe coding, çözümün sözdizimine değil, çözdüğünüz probleme odaklanmanızı sağlıyor.

“Minik” bir mobil uygulama fikriniz varsa — bir bitki sulayıcı, antrenman takipçisi veya kişisel günlük gibi — başlamak için tam zamanı. “Teknik” olmayı dert etmeyin. Sadece vibe’lamaya başlayın.

CometAPI size nasıl yardımcı olabilir? CometAPI, LLM model API’leri için tek duraklı bir toplama platformudur. Çeşitli ana akım yapay zekâ modellerinin çağrılmasını destekler. Gemini API, Claude API ve ChatGPT’ye diğer sağlayıcılara göre daha düşük bir fiyatla erişebilirsiniz. Cursor veya Claude Code ile CometAPI’yi birlikte kullanarak faydalanabilirsiniz. Erişmeden önce lütfen CometAPI’ye giriş yaptığınızdan ve API anahtarını edindiğinizden emin olun. CometAPI entegrasyona yardımcı olmak için resmi fiyattan çok daha düşük bir fiyat sunar.

Hazır mısın?→ Bugün CometAPI üzerinden Vibe Coding’e kaydol!

Daha fazla ipucu, rehber ve yapay zekâ haberleri için bizi VK, X ve Discord üzerinden takip edin!

En İyi Modellere Düşük Maliyetle Erişim

Devamını Oku