Web uygulaması oluşturmaya nereden başlamalı

İnternette erişilebilir bir web uygulaması yapmak için dört aşamadan geçmeniz gerekir: teknoloji yığınını seçmek (frontend + backend), işlevselliği geliştirmek, çevrimdışı çalışması ve mobil cihazlarda kullanılması için projeyi PWA (Progressive Web App) standartlarına uyarlamak ve ardından alan adı bağlantısıyla birlikte hosting üzerinde yayınlamak. Hızlı bir başlangıç için arayüz için React/Vue kombinasyonu, sunucu tarafı için Node.js veya hazır BaaS çözümleri (Firebase/Supabase) ve yayınlama için Vercel veya Netlify gibi platformlar kullanmak en iyisidir.

Aşağıda, fikri gereksiz teori olmadan çalışan bir ürüne dönüştürmenize yardımcı olacak detaylı bir rehber sunulmaktadır.

Mimari ve teknoloji yığını seçimi

Projenin başarısı, başlangıçta doğru araçların seçilmesine bağlıdır. Bir MVP (minimum uygulanabilir ürün) oluşturuyorsanız mimariyi karmaşıklaştırmayın.

Frontend (istemci tarafı)

Kullanıcının gördüğü kısımdır. Modern standartlar yüksek etkileşim ve hız gerektirir.

• Çatılar: React (en popüler, devasa ekosistem), Vue 3 (öğrenmesi daha kolay), Svelte (minimum kod, yüksek performans).
• Stil verme: Tailwind CSS (kodlamayı hızlandırır) veya CSS modülleri.
• Derleyiciler: Vite (2026 yılında endüstri standardı, Webpack'ten daha hızlı).

Backend (sunucu tarafı)

Mantık, veritabanı ve API'den sorumludur.

• Node.js (Express/NestJS): JavaScript biliyorsanız idealdir. Frontend ve backend'de tek dil kullanmak geliştirmeyi kolaylaştırır.
• Python (FastAPI/Django): AI öğeleri içeren veya karmaşık iş mantığı olan projeler için iyidir.
• BaaS (Backend as a Service): Firebase, Supabase veya Appwrite. Bu hizmetler kimlik doğrulama, veritabanı ve dosya depolama işlerini üstlenir. Aylarca iş tasarrufu sağlamak için solo geliştiriciler ve startup'lar için en iyi seçimdir.

Veritabanı

• İlişkisel (SQL): PostgreSQL, yapılandırılmış veriler (kullanıcılar, siparişler, işlemler) için altın standarttır.
• Belge yönelimli (NoSQL): MongoDB, esnek veri yapıları, günlükler veya içerik uygulamaları için uygundur.

PWA uyarlama: Çevrimdışı çalışma ve kurulum

Progressive Web App (PWA), sitenizin yerel bir uygulama gibi çalışmasını sağlar: telefonun ana ekranına kurulabilir, anlık bildirim gönderebilir ve internetsiz çalışabilir.

PWA'nın temel bileşenleri

1. Manifest.json Uygulamanın meta verilerini içeren dosya. Tarayıcıya adı, simgeleri ve tema renklerini bildirir.

    {
      "name": "Benim Uygulamam",
      "short_name": "Uygulama",
      "start_url": "/",
      "display": "standalone",
      "background_color": "#ffffff",
      "theme_color": "#000000",
      "icons": [
        {
          "src": "/icon-192.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ]
    }
    ```

2.  **Service Worker**
    Arka planda çalışan komut dosyası. Ağ isteklerini yakalar ve önbelleği yönetir.
    *   **Statik önbellekleme:** İlk ziyarette HTML, CSS, JS ve resimleri kaydeder.
    *   **Çevrimdışı mod:** Ağ mevcut olmadığında kaydedilmiş verileri sunar.
    *   **Arka plan senkronizasyonu:** Bağlantı yeniden kurulduğunda verileri sunucuya gönderir.

3.  **HTTPS**
    Zorunlu bir gerekliliktir. Service Worker'lar güvensiz protokollerde (`localhost` hariç) çalışmaz.

### PWA nasıl kontrol edilir
Chrome tarayıcısında **Lighthouse** aracını kullanın (DevTools sekmesi -> Lighthouse). "PWA" kategorisindeki denetimi çalıştırın. Tüm maddeler yeşilse, uygulamanız iOS ve Android'e kurulabilir demektir.

## Hosting ve yayınlama: Test modundan prodüksiyona

Hosting seçimi, uygulamanızın statik (sadece frontend) mi yoksa dinamik (kendi backend'i ile) mi olduğuna bağlıdır.

### Seçenek 1: Statik siteler ve Serverless (Başlangıç için önerilir)
React, Vue, Svelte veya Next.js (statik modda) kullanıyorsanız:
*   **Platformlar:** Vercel, Netlify, Cloudflare Pages.
*   **Avantajlar:**
    *   Kişisel projeler için ücretsiz plan.
    *   Otomatik HTTPS (SSL sertifikaları).
    *   Git üzerinden deploy: Sadece `git push` yapın, site kendiliğinden güncellenir.
    *   Global CDN (site dünyanın her yerinde hızlı yüklenir).

### Seçenek 2: Tam kontrol (VPS/VDS)
Node.js, Python, Go veya Docker konteynerleri için kendi sunucunuz gerekiyorsa:
*   **Sağlayıcılar:** DigitalOcean, Hetzner, Timeweb Cloud, Aeza.
*   **Kurulum:**
    1.  Sunucu kiralayın (Ubuntu Linux).
    2.  Docker ve Docker Compose'u kurun.
    3.  Statik dosyaları dağıtmak ve istekleri backend'e yönlendirmek için Nginx'i ters proxy (reverse proxy) olarak ayarlayın.
    4.  Ücretsiz Let's Encrypt SSL sertifikaları için Certbot kullanın.

### Seçenek 3: Bulut platformları (Enterprise)
AWS (Amplify, EC2), Google Cloud Platform, Azure. Yüksek yükler ve karmaşık altyapı durumunda bağlanmak mantıklıdır.

### Alan adı satın alma
Bir kayıt kuruluşundan (örneğin Reg.ru, Namecheap) alan adı satın alın. DNS kayıtları aracılığıyla hosting'e bağlayın (IP adresi için A kaydı veya takma adlar için CNAME). Vercel gibi platformlarda bu, proje ayarlarında birkaç tıklama ile yapılır.

## Başlatmadan önce kontrol listesi

Bağlantıyı kullanıcılarla paylaşmadan önce aşağıdaki noktaları kontrol edin:

<div class="table-container"><table style="border-collapse: collapse; width: 100%; margin: 16px 0;"><thead><tr><th style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; background: #f9fafb; font-weight: 600;">Kategori</th><th style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; background: #f9fafb; font-weight: 600;">Kontrol edilecekler</th></tr></thead><tbody><tr><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;"><strong>Güvenlik</strong></td><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;">HTTPS bağlı, CORS başlıkları ayarlanmış, ortam değişkenleri (API anahtarları) istemci kodundan gizlenmiş.</td></tr><tr><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;"><strong>Performans</strong></td><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;">Lighthouse puanı &gt; 90. Resimler optimize edilmiş (WebP/AVIF formatları).</td></tr><tr><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;"><strong>PWA</strong></td><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;">Manifest geçerli, farklı boyutlarda simgeler yüklenmiş, çevrimdışı sayfa düzgün görüntüleniyor.</td></tr><tr><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;"><strong>SEO</strong></td><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;">Her sayfa için <code style="background-color: rgba(0,0,0,0.05); padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em;">title</code> ve <code style="background-color: rgba(0,0,0,0.05); padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em;">description</code> yazılmış, <code style="background-color: rgba(0,0,0,0.05); padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em;">sitemap.xml</code> ve <code style="background-color: rgba(0,0,0,0.05); padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em;">robots.txt</code> dosyası mevcut.</td></tr><tr><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;"><strong>Analitik</strong></td><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;">Ziyaretçileri izlemek için bir analitik sistemi (Yandex.Metrika, Google Analytics veya açık kaynak alternatifleri) bağlı.</td></tr><tr><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;"><strong>Yedeklemeler</strong></td><td style="border: 1px solid #e5e7eb; padding: 8px; text-align: left; vertical-align: top;">Veritabanının otomatik yedeklemesi ayarlanmış.</td></tr></tbody></table></div>


## Yeni başlayanların sık yaptığı hatalar

1.  **Sırları frontend'de saklamak.** Gizli API anahtarlarını veya DB şifrelerini asla React/Vue kodunda saklamayın. Herhangi bir kullanıcı bunları sayfa kaynağında görebilir. Sunucuda ortam değişkenlerini kullanın.
2.  **Mobil sürümü görmezden gelmek.** Trafiğin %60'ından fazlası akıllı telefonlardan geliyor. Arayüz telefonda kullanışsızsa çoğu kullanıcıyı kaybedersiniz.
3.  **Hata işlemesinin olmaması.** API çökerse, kullanıcı beyaz bir ekran görmemelidir. Anlaşılır hata mesajları ("Bağlantı yok", "Daha sonra deneyin") sağlayın.
4.  **Çok ağır bundle.** Gereksiz kütüphaneleri eklemek yükleme süresini artırır. Uygulamanın yalnızca gerekli kısımlarını yüklemek için code-splitting (kod bölme) kullanın.

## SSS

**Web uygulaması yapmak için backend bilmek gerekir mi?**
Gerekli değil. Firebase, Supabase veya Hasura gibi araçları kullanarak, sadece frontend için JavaScript/TypeScript bilerek veritabanı ve kimlik doğrulama içeren tam teşekküllü bir uygulama oluşturabilirsiniz.

**Web uygulamasını barındırmanın maliyeti ne kadar?**
Başlangıçta 0 $. Vercel, Netlify ve Supabase platformları, küçük projeler ve portfolyolar için yeterli olan cömert ücretsiz limitlere sahiptir. Ödeme yalnızca trafik arttığında veya güçlü sunucular kullanıldığında gerekir.

**Uygulamayı App Store ve Google Play'de yayınlayabilir miyim?**
Evet, web uygulaması Capacitor veya Tauri gibi teknolojiler kullanılarak yerel bir kabuğa sarılabilir. Bu, tek bir kod tabanını koruyarak onu uygulama mağazalarına yüklemenizi sağlar.

**Yayınladıktan sonra uygulama nasıl güncellenir?**
Hosting ile Git entegrasyonu (Vercel/Netlify) kullanıyorsanız, yeni değişiklikleri repoya göndermek (`git push`) yeterlidir. Hosting, yeni sürümü birkaç dakika içinde otomatik olarak derler ve yayınlar.