İçeriğe geç
Ahmet Eren Lapanta
EnglishÜcretsiz başla
Menü
Ücretsiz başla
Ücretsiz başla

2 saatte canlı uygulama.

Kendi fikrinden küçük bir web uygulaması yapıp internete koyuyorsun. Adresini kime atarsan telefonundan açıp kullanabiliyor. Yolda her adımın ne işe yaradığını görüyorsun, bir sonraki uygulamayı kendin başlatabilesin diye.

canlı adres, telefondan açılıyor
1
canlı adres, telefondan açılıyor
Claude aboneliğin dışında her şey
0 TL
Claude aboneliğin dışında her şey

Nereden başlıyorsun?

Sana en yakın kartı seç. Sayfadaki açıklamalar seçimine göre ayarlanıyor.
Nereden başlıyorsun?

Ne yapacaksın?

Şablonla gelen basit bir listeyi kendi konuna çeviriyorsun. Sonra o listeden işine yarayan tek bir şeyi hesaplatıyorsun.
  1. 01

    Önce liste

    Kayıt ekleyip silebildiğin basit bir liste. Alanları senin konuna göre değişiyor.

  2. 02

    Sonra hesaplanan özellik

    Listeden tek bir şey hesaplanıyor, bir toplam, bir sıralama, bir öneri ya da bir filtre. Uygulamayı her gün açmanın sebebi bu hesap olacak.

Aşağıdaki örneklerden birini seç ya da kendi fikrinle başla.

Ne yapacaksın?

Seçili örnek: Kitaplar. Adımlardaki örnekler, terminal ve akış bu seçime göre değişiyor.

Başlamadan önce

Hepsi bir kerelik kurulum.
  • GitHub hesabıücretsiz

    Kodun durduğu yer. Şablonu kendi hesabına buradan kopyalıyorsun.

  • Vercel hesabıücretsiz

    Uygulamayı internete koyan servis. GitHub hesabınla giriş yapman yetiyor.

  • Node 24 ve pnpmücretsiz

    Uygulamayı bilgisayarında çalıştırmak ve testleri koşmak için lazım.

  • gitücretsiz

    Mac'te hazır geliyor. Windows'ta git-scm.com'dan kuruluyor.

  • GitHub CLI, yani ghücretsiz

    Ajan PR'ı bu araçla açıyor. Kurduktan sonra terminalde gh auth login yazıp hesabına bağla.

  • Claude Codeücretli, senin

    Kodu yazan ajan bu. Çalışması için bir Claude aboneliği ya da Anthropic API anahtarı gerekiyor.

Adresler ve kurulum komutları şablonun GitHub sayfasındaki START.md dosyasında sırasıyla duruyor.

Akış

Uygulaman yedi duraktan geçiyor. Birine tıkla, o adımda ne olduğunu ve ekranda ne gördüğünü gör.

Üç soru ve bir plan

Ajan sana üç soru soruyor ve cevaplarından tek sayfalık bir plan yazıyor. Plan, sen onaylayana kadar bekliyor.

› CLAUDE.md'yi oku ve başlayalım Claude: Üç soru:1. Neyin listesini tutmak istiyorsun?2. Listeden ne öğrenmek istiyorsun?3. Uygulamayı kim kullanacak?

Adımlar

Kendi hızında ilerle. Altı adım var. 3, 4 ve 5. adımlar her özellik için bir kez tekrarlanıyor.
  1. 01

    Canlıya çık

    • Şablonun GitHub sayfasında "Use this template" butonuna bas.
    • Kendi hesabında yeni bir repo oluştur ve Public seç. Linkini attığın kişi kodu ancak böyle görebilir.
    • Vercel'de bu repo'yu import et ve ayarlara dokunmadan Deploy de.

    EkrandaVercel'in verdiği isim.vercel.app adresi ve orada açılan örnek uygulama.

  2. 02

    Ne istediğini anlatsen karar verirsin

    • Repo'yu bilgisayarına klonla, klasörün içinde claude yazıp Claude Code'u aç. Komutlar START.md'de sırasıyla yazılı.
    • İlk mesajın "CLAUDE.md'yi oku ve başlayalım" olsun.
    • Ajan neyin listesini tutmak istediğini, listeden ne öğrenmek istediğini ve uygulamayı kimin kullanacağını soruyor.
    • Cevaplarından SPEC.md adında tek sayfalık bir plan çıkıyor. Oku, düzeltmek istediğin yeri söyle.
    • Onay verince ajan uygulamayı bilgisayarında çalıştırıyor ve tarayıcında açmanı istiyor.

    EkrandaAjanın sorduğu sorular ve cevaplarından çıkan SPEC.md.

her özellik için bir tur, toplam iki
  1. 03

    Önce test, sonra kod

    • Her özellik yeni bir branch'te başlıyor.
    • Ajan önce testi yazıp koşuyor. Uygulama o işi henüz yapmadığı için test kırmızı yanıyor.
    • Neyin eksik olduğunu sana bir cümleyle söylüyor.
    • Kodu yazıp testi tekrar koşunca aynı test yeşile dönüyor. Değişikliği tarayıcında kendin dene.

    İlk turdan bir örnek. Test, eklediğin kitabın sayfa sayısını listede görmek istiyor. Formda sayfa sayısı alanı olmadığı için ilk koşu kırmızı.

    pnpm test
    $ pnpm test

    EkrandaTerminalde önce kırmızı, sonra yeşil test çıktısı. Yanında tarayıcıda yenilenen uygulama.

  2. 04

    PR ve preview

    • Özellik çalışınca ajan değişen her dosyayı okuyor. Eksik bir test ya da SPEC.md'de olmayan bir şey bulursa düzeltiyor.
    • Dosya düzenlerken ve test koşarken izin istemiyor. Branch'i GitHub'a göndermek ve PR açmak için onayını istiyor.
    • Vercel her PR için bir preview hazırlıyor. Bu, uygulamanın geçici bir adresteki kopyası.
    • Preview'u telefonundan aç ve yeni özelliği dene. Buraya girdiğin kayıtlar yalnız bu adreste kalıyor.

    Preview'da deneyebileceğin bir örnek. Okunmamış 120 ve 300 sayfalık iki kitapla okunmuş 50 sayfalık bir kitap ekle. Öneri 120 sayfalık olanı göstermeli.

    EkrandaGitHub'daki PR sayfası ve Vercel'in bıraktığı preview linki, telefonunda açık.

  3. 05

    Review ve mergesen basarsın

    • İstersen ajana "bu PR'ı review et" de ve kısa bir özet al.
    • Preview'da her şey yerindeyse merge butonuna sen bas.
    • Değişiklik main'e giriyor ve Vercel canlı adresi bir iki dakikada güncelliyor.

    EkrandaPR sayfasındaki "Merge pull request" butonu, ardından güncellenen canlı adres.

    ↺ İlk merge'den sonra ikinci özellik için 3. adıma dön. İkinci merge'den sonra 6. adıma geç.

  1. 06

    Canlı adresi aç

    • Ajan canlı adresi, son PR'ın linkini ve test çıktısını tek mesajda veriyor. Testleri de o yazdığı için yeşil çıktı, kodun yalnız ajanın kendi ölçüsünü tuttuğunu gösterir. Her testin adı neye baktığını söylüyor, senin istediğin şey o mu diye adları oku.
    • Canlı adresi telefonundan aç. Preview'lara girdiğin kayıtlar burada yok, çünkü her adres kendi verisini tutuyor.
    • Liste boş açılırsa bir kayıt ekle ve uygulamanın çalıştığını kendin gör.

    EkrandaAjanın son mesajı ve telefonunda açık canlı uygulaman.

Bitince elinde ne var?

  • Canlı adres. Vercel'deki kalıcı adresin. Açan herkes uygulamanı kullanabiliyor.
  • PR linki. Son merge ettiğin PR. Repo public olduğu için linki açan kişi neyin değiştiğini görüyor.
  • Test çıktısı. pnpm test çıktısı, ajan bunu PR açıklamasına da koyuyor. Testleri de ajan yazdığı için yeşil işaret yalnız onun koyduğu ölçüyü gösterir. O ölçünün senin istediğin şey olup olmadığını test adlarından okursun.

Üçünü buraya yaz, tarayıcında saklanır. Birine göstermek istediğinde hepsi bir arada durur.

0 / 3 hazırYalnız bu tarayıcıda saklanır

Sözlük22 terim
repo
: Uygulamanın dosyalarını ve her değişikliğin geçmişini tutan klasör. Seninki GitHub'da duruyor.
template
: Kendi repo'nu açmak için kopyaladığın hazır başlangıç.
import
: Vercel'de bir GitHub repo'sunu seçip ona bağlamak. Bundan sonra yayına alma işini Vercel yapıyor.
deploy
: Uygulamayı internete koyup bir adresten açılır hale getirmek.
klonlamak
: Repo'nun bir kopyasını bilgisayarına indirmek.
terminal
: Komut yazıp Enter'a bastığın pencere. Mac'te Terminal, Windows'ta PowerShell.
Node
: Uygulamayı bilgisayarında çalıştıran program. Şablon 24 ya da üstünü istiyor.
pnpm
: Uygulamanın kullandığı paketleri indiren, testi ve geliştirme sunucusunu başlatan araç.
git
: Dosyaların geçmişini tutan araç. Repo, branch ve commit onun kavramları.
API anahtarı
: Claude Code'u abonelik yerine kullandıkça ödeyerek çalıştırmak için Anthropic'ten aldığın gizli anahtar.
CLAUDE.md
: Şablonla gelen ve ajanın hangi sırayla ne yapacağını anlatan yöntem dosyası.
SPEC.md
: Kod yazılmadan önce ne yapılacağını ve neye "bitti" deneceğini yazan tek sayfalık plan.
test
: Uygulamanın bir işi doğru yaptığını kontrol eden küçük program. İş yapılmıyorsa kırmızı yanar.
branch
: Canlı uygulamayı etkilemeden değişiklik yaptığın ayrı çalışma kolu.
commit
: Dosyaların o anki halinin tek cümlelik bir notla kaydı. Ajan her turda en az bir tane atıyor.
PR
: Pull request. Bir branch'teki değişiklikleri gösteren ve merge butonu olan GitHub sayfası.
preview
: Vercel'in her PR için açtığı geçici adres. Merge etmeden önce değişikliği orada denersin.
main
: Canlı uygulamanın beslendiği ana branch.
merge
: PR'ı kabul etmek. Değişiklik main'e girer ve canlı adres güncellenir.
review
: Bir değişikliği kabul etmeden önce okuyup kontrol etmek.
gh
: GitHub'ın komut satırı aracı. Ajan PR'ı onunla açıyor.
localStorage
: Tarayıcının içindeki küçük depo. Uygulamanın verisi orada, yalnız o cihazda ve o adreste duruyor.

Sınırlar

  • Veri tarayıcında duruyor (localStorage). Başka bir cihazdan ya da başka bir adresten açınca listen boş gelir.
  • Kullanıcı hesabı, veritabanı ve yapay zeka özelliği yok. Her biri yeni bir hesap ya da anahtar istiyor, programın sonraki adımlarına kaldı.
  • Testler senin bilgisayarında koşuyor. Her PR'da onları kendiliğinden çalıştıran bir sunucu yok.

Başla

Kurulumlar hazırsa şablonu kendi hesabına al ve 1. adımdan başla.
Şablonu GitHub'da aç

Programa yeni bir adım eklendiğinde haber almak istersen kaydol.

Yeni adımlar e-postana gelsin.

Programa eklenen her yeni adım ve yazı e-postana geliyor. İstediğin zaman listeden çıkabilirsin.

Spam yok, istediğin zaman çıkabilirsin. Aydınlatma metni