Kodla üretmek — korkmadan

01Kod korkusu ve zaten yazdığın kod

«Ben kod bilmem» cümlesini bu kursta çok duydun ve her seferinde bir sonraki adıma geçtin. Atölye bölümünde bir dosya açtırdın, bir sayfada üç yeri değiştirttin, farkları okudun ve kaydettin. O farklardaki artı ve eksi satırlar koddu. Sen onu okudun, onayladın ve doğru olduğunu anladın. Yani kod okumaya çoktan başladın.

Bu bölümde bir adım daha atıyoruz: artık yalnızca var olan bir şeyi değiştirmeyeceğiz, sıfırdan bir şey kuracağız. Korkutucu görünen kısım hep aynı: boş bir dosyaya bakarken ne yazılacağını bilmemek. O kısım bende. Senin kısmın ne istediğini bilmek, sonucu görmek ve «şurası yanlış» diyebilmek.

Şimdi yap: Kurmak istediğin üç şeyi yaz. Bir sayfa, bir liste, bir hesap makinesi, bir müşteri defteri — ne olursa. Bu bölümde en az birini gerçekten kuracağız.

02Üç kelime: HTML, CSS, JavaScript

Her bölümde üç kelimeyle bütün alanı açtık. Web için de üç kelime yetiyor — ve üçü bir insanı tarif eder gibi ayrılıyor: iskelet, görünüş, davranış.

Bu üçü dil sayılır ama üçü de aynı türden değil. HTML bir işaretleme dili: «bu bir başlık, bu bir paragraf» der. CSS bir biçim dili: «başlıklar altın renginde olsun» der. Yalnızca JavaScript gerçek anlamda bir programlama dili: karar verir, tekrarlar, hesaplar.

Şimdi yap: Bu sayfada boş bir yere sağ tıkla ve «sayfa kaynağını görüntüle» de. Gördüğün şey bu sitenin HTML'i. Anlamana gerek yok; sadece bak. Korkutucu değil, tekrar eden bir düzen.

03Bir site aslında bir klasör

Site kelimesi büyük bir şey çağrıştırıyor. Değil. Bir site, içinde dosyalar olan bir klasör. Tarayıcı o klasörden bir dosyayı okur ve ekrana çizer. Atölye bölümünde öğrendiğin «klasör benim masam» cümlesi burada birebir geçerli.

Bu klasörü bilgisayarında açıp index.html'e çift tıklarsan tarayıcı onu açar. İnternet gerekmez. «Site kurmak» dediğimiz şeyin ilk yarısı budur: bir klasör ve içinde dosyalar. İkinci yarısı o klasörü herkesin görebileceği bir yere koymak — altıncı başlıkta.

Şimdi yap: Bilgisayarında «ilk-site» adında bir klasör aç. Şimdilik boş kalsın. Beşinci başlıkta içini dolduracağız.

04Programlama dilleri, insan diliyle

Programlama dili, bilgisayara ne yapacağını anlatmanın yazılı biçimi. İnsan dilleri gibi dilbilgisi ve kelime dağarcığı var; farkı, hiç belirsizlik kabul etmemesi. «Şunu bir ara hallet» diyemezsin; «şu listeyi al, her satırı için şunu yap» dersin.

Yüzlerce dil var ama hepsini bilmene gerek yok. Bir ajans için işin neredeyse tamamı üç aileye giriyor:

Şimdi yap: 01'de yazdığın üç şeyden birini bana anlat ve sor: «bunu hangi dille yapmak mantıklı, neden?» Cevabımdaki gerekçeyi oku — dil seçiminin nasıl yapıldığını bir örnekte gör.

05İlk gerçek sayfan, on beş dakikada

Teoriyi bıraktık. Atölye bölümünde kurduğun Claude Code'u aç, «ilk-site» klasörüne gir ve konuşmaya başla. Aşağıdaki beş adım gerçek bir sayfayı ortaya çıkarır.

1. 1Klasörde claude yaz. Sonra iste: «Bu klasöre tek sayfalık bir site kur: başlık, bir paragraf tanıtım, üç hizmet kutusu ve iletişim bilgisi. Koyu zemin, sade. Önce plan yap.»
2. 2Planı oku ve düzelt. «Üç yerine dört kutu olsun», «telefon da ekle». Plan bir dosyaya dokunmadan değişir; iş başlamadan doğru olur.
3. 3Onayla. Dosyalar oluşur: index.html, css/style.css, belki js/main.js. Her birini göstermemi iste ve göz gezdir — anlamasan da yapıyı tanı.
4. 4Aç ve bak: klasördeki index.html'e çift tıkla. Tarayıcı sayfayı gösterir. İlk kez kendi kurduğun bir şeye bakıyorsun.
5. 5Değiştir: «başlığı şöyle yap», «kutuların rengini değiştir», «telefonu büyüt». Her seferinde tarayıcıyı yenile. Bu döngü — iste, gör, düzelt — işin tamamı.

Şimdi yap: Beş adımı bugün tamamla. Sayfa çirkin olabilir, önemli değil. Önemli olan klasörün içinde senin istediğin şeyin durması.

06Yayına al: dünyanın görebileceği bir adres

Klasördeki sayfa yalnızca sende. Yayına almak, o klasörü herkesin ulaşabileceği bir bilgisayara kopyalamak demek. En kolay ve ücretsiz yolu GitHub Pages: Atölye bölümünde öğrendiğin git kayıt noktaları zaten bunun için vardı.

Adres önce kullaniciadin.github.io/proje biçiminde gelir ve bu tamamen gerçek bir adrestir — https'i de hazır. Kendi alan adını almak istersen (ajansinadi.com gibi) sonradan bağlanır; sayfaları yeniden kurman gerekmez, yalnızca adres değişir.

Şimdi yap: Bana «bu klasörü GitHub'a gönder ve Pages ile yayına al, adımları bana göstererek» de. Hesap açmam gereken yerde duracağım; gerisini birlikte yapacağız. Adres eline geçince birine gönder.

07Statik mi, dinamik mi

Yayına aldığın site statik: dosyalar hazır durur, herkese aynı şey gösterilir. Bir de dinamik siteler var: sayfa, sen açtığın anda sana göre üretilir — giriş yapmış kullanıcı, kişiye özel liste, canlı stok. Farkı bilmek, «bunu yapabilir miyiz» sorusunun cevabını baştan verir.

Güzel haber: ikisi arasında bir orta yol var ve bu kursun tercih ettiği yol o. Site statik kalır; ihtiyaç duyulan tek tük dinamik iş (form kaydetmek, yapay zekâya sormak) küçük bir ara sunucuya verilir. Pahalı olan her şeyi taşımadan, gereken kadarını alırsın. Ara sunucuyu on ikinci başlıkta kuracağız.

Şimdi yap: 01'deki üç fikrini bu iki sütuna dağıt. Dinamik sütununa düşen varsa yanına yaz: gerçekten gerekli mi, yoksa statik + küçük bir ara sunucu yeter mi?

08Veri nerede durur

Bir şey kurmaya başlayınca ilk çıkan soru budur: müşteri listesi nerede duracak? Üç kat var ve çoğu insan gereğinden ağır olanı seçip zorlanıyor. Doğru cevap genellikle en hafif olanıdır.

Şimdi yap: Şu an müşteri bilgilerini nerede tutuyorsun? Telefon rehberi, mesaj kutusu, defter, tablo? Bunu yaz — bir sonraki başlıkta o dağınıklığı tek yere toplayacağız.

09Kendi CRM'in: ne tutar, ne yapar

CRM üç harfle korkutuyor ama açılımı basit: müşteri ilişkileri yönetimi. Pratikte «kiminle ne konuştum, ne söz verdim, ne zaman dönmem gerekiyor» sorusunun tek bir yerde cevabı. Hazır CRM'ler var ve çoğu senin ihtiyacının on katı; kendi kurduğunda tam olarak işine olanı alırsın.

Dikkat et: burada hiç «yazılım» yok. Dört kayıt ve aralarındaki bağ. Bunu bir tabloda dört sayfa olarak da kurabilirsin, bir veritabanında dört tablo olarak da. Önce neyi tutacağına karar verirsin; nerede tutacağın ikinci sorudur.

Şimdi yap: Bu dört kaydın alanlarını kendi işine göre yaz. Hangi alan senin işinde gerçekten kullanılacak? Kullanmayacağını sil. Kısa liste iyi CRM'dir.

10CRM'i kurmak: adım adım

Veri katı olarak bulut tabloyla başlıyoruz — sekizinci başlıktaki orta kat. Sebebi basit: sen de görebilirsin, ekibin de; ve ileride veritabanına taşımak kolaydır.

1. 1Yeni bir bulut tablo aç, dört sayfa oluştur: Kişiler, İşler, Notlar, Hatırlatmalar. Sütunları 09'da yazdığın alanlardan koy.
2. 2Her kayda bir kimlik sütunu ekle. İşler sayfasındaki «kişi kimliği», o işin hangi kişiye ait olduğunu söyler. Bağ dediğimiz şey bu; tek sütun.
3. 3Elle üç müşteri, üç iş ve birkaç not gir. Gerçek verilerle doldur — hayali veriyle kurulan sistem gerçek hayatta tökezler.
4. 4Bana panel yazdır: «Bu tablodan okuyup bugün dönmem gereken müşterileri gösteren tek sayfalık bir panel yap.» Ajan bölümündeki akışla tabloyu okur, sayfa gösterir.
5. 5Hatırlatmayı otomatikleştir: her sabah dokuzda bugünün hatırlatmalarını sana mesaj olarak gönderen bir akış. Ajan bölümündeki zamanlama tetikleyicisi, burada gerçek bir işe bağlanıyor.

Şimdi yap: İlk üç adımı bugün bitir. Tabloyu gerçek müşterilerinle doldur. Dört ve beşi yarın; panel olmadan da tablo tek başına çalışır zaten.

11Formdan CRM'e: siteyi bağlamak

Şimdi iki parçan var: yayında bir site ve dolu bir CRM. Aralarındaki boşluk tek bir şey — siteden gelen bir form. Biri sitendeki formu doldurduğunda bilgi doğrudan CRM'e düşsün istiyorsun.

Statik bir sitenin form kaydedememesi sorun değil: form, bilgiyi akışının adresine gönderir. Site statik kalır, iş akışta olur. Yedinci başlıkta söylediğim «orta yol» tam olarak budur.

Şimdi yap: Sitene üç alanlı bir form ekletme: ad, iletişim, mesaj. Sonra akışında bir webhook aç ve formu ona bağla. Kendi formunu doldur; CRM'de yeni satırın belirmesini gör.

12Anahtar tarayıcıya konmaz: ara sunucu

Siteye beni koymak istiyorsun: ziyaretçi bir şey sorsun, ben cevaplayayım. Akla ilk gelen çözüm — anahtarı sitenin koduna yazmak — en tehlikeli olanı. Çünkü tarayıcıya giden her şey herkes tarafından okunabilir. Anahtarın görünür olur ve senin faturana harcanır.

Ara sunucu kulağa büyük geliyor; değil. Yüz satırlık küçük bir program ve ücretsiz katmanlarda barınıyor. Atölye bölümündeki «anahtar beyne yazılmaz» kuralının internet hâli bu: anahtar hep senin kontrolündeki bir kasada durur, asla ziyaretçinin bilgisayarında.

Şimdi yap: Kurduğun bütün akış ve sayfalara bak: herhangi birinde anahtar, tarayıcının göreceği bir yere yazılmış mı? Emin değilsen bana sor — «bu dosyada dışarı sızan bir sır var mı?» diye.

13Siteye konuşan bir kutu koymak

Ara sunucu hazırsa siteye beni koymak kısa iş: bir metin kutusu, bir gönder düğmesi ve gelen cevabı gösteren bir alan. Ama iyi çalışması için üç karar gerekir — üçü de teknik değil, senin kararın.

Şimdi yap: Kutunun bilmesi gerekenleri bir sayfaya yaz: hizmetler, çalışma biçimi, beş sık soru ve cevabı. Bu metin kutunun beyni olacak — Atölye bölümündeki CLAUDE.md'nin ziyaretçilere bakan hâli.

14FYOS nedir

Buraya kadar parçalar kurduk: site, CRM, akışlar, konuşan kutu. FYOS bu parçaların adı değil; hepsinin tek bir yerden erişilebilir olmasının adı. Kişisel ajantik işletim sistemi demek, günlük işlerinin her birinin bir ajanı olması ve senin hepsiyle tek bir yerden konuşman demek.

Ana sayfadaki FYOS kutusu bunun küçük bir gösterimi. Gerçek sürümünde uydular senin verine bağlıdır: takvimin, müşterilerin, dosyaların. «Bu hafta kim bekliyor beni?» diye sorarsın; çekirdek CRM'e bakar, takvime bakar ve cevap verir.

Şimdi yap: Günlük işlerini altı başlığa böl. Yukarıdaki altıya benzeyebilir, benzemeyebilir. Senin altı uydun neler? Bunlar senin FYOS'unun taslağı.

15FYOS'un dört katmanı

Kendi sürümünü kurmak, dört katmanı sırayla döşemek demek. Sırayı bozma; her katman bir öncekinin üstünde duruyor.

Şimdi yap: Dört katmanı kendi durumun için işaretle: hangisi hazır, hangisi yarım, hangisi yok? İlk boş olanı bana söyle; oradan devam ederiz.

16Maliyet, kota ve ne zaman kod yazılmaz

Bu bölümde kurduğun her şeyin bir ücretsiz katmanı var: site barındırma bedava, tablo bedava, akış aracının başlangıç planı bedava, ara sunucu günde yüz bin isteğe kadar bedava. Para yalnızca yapay zekâ isteklerinde ve orada da az. Ama iki tuzağı bilmek gerekiyor.

İkinci tuzak kota: ücretsiz katmanların bir sınırı var ve sınıra dayanınca sistem sessizce durur. Bu yüzden ara sunucun günlük hak sayar, akışların hata bildirimi gönderir. Ajan bölümündeki «sessizce kırılma» kuralı burada da geçerli — sınırı önceden koy, bittiğinde haberin olsun.

Şimdi yap: Kullandığın yapay zekâ hesabında aylık harcama tavanı koy. Beş dakika sürer ve kötü bir gecenin faturasını önler. Sonra kurduğun her serviste ücretsiz katmanın sınırını not et.

17Beş yaygın hata

Şimdi yap: Bu beşini projenin CLAUDE.md dosyasına ekle. Özellikle 3 — onu bir hook'a çevirmek bile mantıklı, Atölye bölümünde konuştuğumuz gibi.

18Herkesin sorduğu

Şimdi yap: Kurarken bir yerde takıldıysan bana sor — hata mesajını ya da ekrandaki yazıyı olduğu gibi yapıştır. Hataları okumak benim en iyi olduğum işlerden biri.

19Alıştırmalar

Şimdi yap: Birinciyi bu hafta sonu. İkinciyi haftaya. Üç ve dördü ay içinde. Sırayı bozma; üçüncü, ilk ikisi olmadan kurulamaz.

20Kendini sına

Önce kendin cevapla, sonra aç.