E-Ticaret Mobil Uygulama: PWA ve Native App Geliştirme

E-Ticaret Mobil Uygulama: PWA mı, Native App mı? Pratik Karar Rehberi

Türkiye'de e-ticaret işlemlerinin %60'ından fazlası mobil cihazlardan yapılıyor; bu rakam genç hedef kitlede %80'i geçiyor. "Web sitem var ama mobil deneyim yetersiz, uygulama mı yapsam?" sorusu artık her e-ticaret işletmecisinin gündeminde. Buyukweb e-ticaret VDS müşterilerinden gelen tipik soruyu temel alarak, PWA ile native app arasındaki kararı bu rehberde netleştirelim.

Buyukweb perspektifi: Mobil uygulama geliştirme hizmeti vermiyoruz; bu yazı sunucu/hosting tarafında neye dikkat etmeniz gerektiği üzerinden bir rehber. Mobil app'inizin backend'i (WooCommerce REST API, custom API) Buyukweb VDS üzerinde çalışırken hangi konfigürasyon ve performans tüyolarını uygulamanız gerektiğini odak noktamız.

PWA mı Native App mı? — Karar Matrisi

Kriter	PWA (Progressive Web App)	Native App (iOS/Android)
Geliştirme maliyeti	Düşük (₺50.000–250.000)	Yüksek (₺250.000–1.500.000+)
Süre	1-3 ay	4-12 ay
App Store gerekli mi?	Hayır	Evet (komisyon %15-30)
Güncelleme	Anlık (web deploy)	Review süreci (1-7 gün)
Push bildirim	Sınırlı (iOS gecikmeli)	Tam destek
Offline çalışma	Service Worker ile var	Tam
Kamera/GPS/Biyometrik	Kısmi	Tam
Performans	İyi (yakın native)	En iyi
SEO görünürlük	✓ (web içinde)	✗ (App Store SEO ayrı)
Mağaza puanı / yorum	Yok	Var (sosyal kanıt)
Backend yükü	Web ile aynı	Ek API endpoint'leri

Pratik Tavsiyemiz

Başlangıç ve orta ölçekli e-ticaret için PWA tercih edin. Düşük yatırım, hızlı teslim, anlık güncelleme. Ciroyu bir noktaya getirip mobil müşteri verisini topladıktan sonra native app yatırımına geçin.

Tercih etmeyin: Henüz aylık ₺500.000+ ciroya ulaşmamış bir mağaza için sadece "rakipte var" diye native app geliştirmek; getirisi yatırımı uzun vadede karşılamaz. Native app'i istek arttıktan ve müşteri sadakat verisi oluştuktan sonra konuşalım.

PWA Nedir, Nasıl Çalışır?

PWA (Progressive Web App), web sitenize "uygulama gibi" davranış kazandıran teknik standartlar bütünüdür. Üç ana bileşen:

1. Manifest dosyası (manifest.json): Uygulamanın iconları, adı, başlangıç URL'si
2. Service Worker (sw.js): Offline çalışma, push bildirim, arka plan senkronizasyon
3. HTTPS: Zorunlu (PWA HTTP üzerinden çalışmaz)

Kullanıcı sitenizi ziyaret ettiğinde tarayıcı "Bu uygulamayı ana ekrana ekle" önerisi sunar. Eklendiğinde tam ekran açılır, address bar görünmez, native app gibi hisseder. iOS Safari ve Android Chrome destekler.

Service Worker Kurulumu (Pratik Örnek)

// sw.js — Service Worker
const CACHE_NAME = 'magazaniz-v1';
const STATIC_CACHE = [
  '/',
  '/static/css/app.css',
  '/static/js/app.js',
  '/images/logo.webp',
  '/offline.html',
];

// Kurulum sırasında statik dosyaları önbelleğe al
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(STATIC_CACHE))
  );
});

// İstekleri yakala
self.addEventListener('fetch', event => {
  // API istekleri: Ağ öncelikli, hata durumunda offline yanıt
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      fetch(event.request)
        .catch(() => caches.match('/offline.html'))
    );
    return;
  }

  // Statik dosyalar: Önbellek öncelikli
  event.respondWith(
    caches.match(event.request)
      .then(cached => cached || fetch(event.request))
  );
});

// Push bildirimleri
self.addEventListener('push', event => {
  const data = event.data.json();
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: '/images/icon-192.png',
      badge: '/images/badge-72.png',
      data: { url: data.url },
      vibrate: [200, 100, 200],
    })
  );
});

Manifest Yapılandırması

<!-- HTML head'e ekle -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#0070f3">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">

{
  "name": "Mağazanız",
  "short_name": "Mağazanız",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "orientation": "portrait",
  "background_color": "#ffffff",
  "theme_color": "#0070f3",
  "icons": [
    {"src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png"},
    {"src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png"},
    {"src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable"}
  ],
  "categories": ["shopping"],
  "lang": "tr",
  "shortcuts": [
    {
      "name": "Sepetim",
      "url": "/sepet/",
      "icons": [{"src": "/icons/cart-96.png", "sizes": "96x96"}]
    },
    {
      "name": "Hesabım",
      "url": "/hesabim/",
      "icons": [{"src": "/icons/account-96.png", "sizes": "96x96"}]
    }
  ]
}

WordPress / WooCommerce için PWA Eklentileri

WordPress kullananlar için manuel kod yerine eklenti tercih edilebilir:

• PWA for WordPress — Resmi Google + Automattic eklentisi
• WP-AppKit — Visual editor ile özelleştirme
• Super PWA — Hafif, başlangıç düzeyi

Eklenti seçerken Service Worker özelleştirme imkanını kontrol edin; karmaşık cache stratejileri için eklenti yetersiz kalabilir, manuel kontrole geçmek gerekir.

Native App Yolu: WooCommerce REST API + React Native

Native app yapacaksanız backend olarak mevcut WooCommerce'inizi REST API ile kullanabilirsiniz. Bu, hem geliştirme süresini hem maliyetini düşürür.

REST API Yetkilendirme

WooCommerce → Settings → Advanced → REST API
→ Add Key → Read/Write yetkisi
→ Consumer Key + Consumer Secret oluşturulur
→ Mobil app içinde HTTPS üzerinden API çağrıları yapılır

React Native Örnek Kullanım

// API yapılandırması
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";

const api = new WooCommerceRestApi({
  url: "https://magazaniz.com",
  consumerKey: "ck_xxxxxxxxxxxx",
  consumerSecret: "cs_xxxxxxxxxxxx",
  version: "wc/v3",
  timeout: 10000,
});

// Ürün listesi
async function getProducts(category = null, page = 1) {
  const response = await api.get("products", {
    per_page: 20,
    page,
    status: 'publish',
    ...(category && { category }),
  });
  return response.data;
}

// Sepete ekle
async function addToCart(productId, quantity = 1) {
  const cart = await api.post("cart/add-item", {
    id: productId,
    quantity,
  });
  return cart.data;
}

// Sipariş oluştur
async function createOrder(items, customer, payment) {
  const order = await api.post("orders", {
    payment_method: payment.method, // 'iyzico', 'paytr' vb.
    payment_method_title: payment.title,
    set_paid: false, // Ödeme sonrası true yapılır
    line_items: items.map(item => ({
      product_id: item.productId,
      quantity: item.quantity,
    })),
    billing: customer.billing,
    shipping: customer.shipping,
  });
  return order.data;
}

React Native Ürün Listesi Bileşeni

import React, { useEffect, useState } from 'react';
import { FlatList, Image, Text, TouchableOpacity, View } from 'react-native';

export function ProductList({ categoryId }) {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);

  useEffect(() => {
    loadProducts();
  }, [categoryId]);

  const loadProducts = async () => {
    if (loading) return;
    setLoading(true);
    try {
      const data = await getProducts(categoryId, page);
      setProducts(prev => page === 1 ? data : [...prev, ...data]);
    } catch (error) {
      console.error('Ürün yükleme hatası:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <FlatList
      data={products}
      renderItem={({ item }) => (
        <TouchableOpacity style={styles.productCard}>
          <Image
            source={{ uri: item.images[0]?.src }}
            style={styles.productImage}
            resizeMode="cover"
          />
          <Text style={styles.productName} numberOfLines={2}>
            {item.name}
          </Text>
          <Text style={styles.productPrice}>
            {parseFloat(item.price).toLocaleString('tr-TR')} ₺
          </Text>
        </TouchableOpacity>
      )}
      keyExtractor={item => item.id.toString()}
      numColumns={2}
      onEndReached={() => setPage(p => p + 1)}
      onEndReachedThreshold={0.5}
    />
  );
}

Backend Tarafı: Buyukweb VDS Üzerinde Mobil App API

PWA veya native app, backend tarafında benzer gereksinimler getirir. Buyukweb VDS müşterilerine pratik tavsiyelerimiz:

1. API Cache ile Origin Yükünü Azaltın

Mobil app her ekranda ürün listesi çağırır. Bu istekleri Redis ile cache'leyerek MySQL yükünü azaltın:

// WordPress + Redis Object Cache + WooCommerce
function get_cached_products($category_id, $page = 1) {
    $cache_key = "products_cat_{$category_id}_page_{$page}";
    $cached = wp_cache_get($cache_key, 'mobile_api');

    if ($cached !== false) {
        return $cached;
    }

    $args = [
        'category' => $category_id,
        'per_page' => 20,
        'page' => $page,
        'status' => 'publish',
    ];
    $products = wc_get_products($args);

    // 5 dakika cache
    wp_cache_set($cache_key, $products, 'mobile_api', 300);
    return $products;
}

2. CORS ve Rate Limiting

Mobil app farklı domain'den (exp:// veya custom scheme) API'nize istek atar. CORS ayarı şart:

# /etc/nginx/conf.d/api-cors.conf
location /wp-json/wc/v3/ {
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
    add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;

    # Rate limit: IP başına 60 req/dak
    limit_req zone=api_limit burst=20 nodelay;
}

# /etc/nginx/conf.d/rate-limit.conf
limit_req_zone $binary_remote_addr zone=api_limit:10m rate=60r/m;

3. Image Optimization

Mobil app'te görseller bant genişliğini en çok tüketen unsur. WebP/AVIF formatlarına otomatik dönüştürme:

# WebP convert (cron job)
find /var/www/uploads -name "*.jpg" -o -name "*.png" | while read img; do
  webp_path="${img%.*}.webp"
  if [ ! -f "$webp_path" ]; then
    cwebp -q 85 "$img" -o "$webp_path"
  fi
done

# Nginx accept WebP
location ~* \.(jpg|jpeg|png)$ {
  add_header Vary Accept;
  set $webp "";
  if ($http_accept ~ "image/webp") {
    set $webp "_webp";
  }
  try_files $uri$webp $uri =404;
}

4. Push Bildirim Backend (Firebase Cloud Messaging)

Native app + WooCommerce sipariş güncelleme bildirimi:

// functions/index.js (Firebase Functions örneği)
const admin = require('firebase-admin');

exports.sendOrderNotification = async (orderData) => {
  const fcmToken = orderData.customer.fcm_token;
  if (!fcmToken) return;

  await admin.messaging().send({
    token: fcmToken,
    notification: {
      title: 'Siparişiniz Güncellendi',
      body: `Sipariş #${orderData.id}: ${orderData.status}`,
    },
    data: {
      orderId: orderData.id.toString(),
      type: 'order_update',
      url: `https://magazaniz.com/siparis/${orderData.id}`,
    },
    android: {
      notification: {
        color: '#0070f3',
        clickAction: 'OPEN_ORDER_DETAIL',
        sound: 'default',
      }
    },
    apns: {
      payload: {
        aps: { badge: 1, sound: 'default' }
      }
    }
  });
};

Ödeme Tarafı: Türkiye Sanal POS Entegrasyonu

PWA veya native app içinde ödeme akışı için yerel sanal POS sağlayıcılarıyla çalışın:

• iyzico: REST API + 3D Secure + iOS/Android SDK
• PayTR: SOAP/REST + sanal POS + tahsilat
• Param: Yeni nesil sanal POS, kart saklama

3D Secure Türkiye'de zorunludur (BDDK düzenlemesi). PWA içinde redirect, native app'te WebView ile 3DS sayfası açılır, başarı sonrası callback URL'ye dönülür.

// PWA — iyzico ödeme akışı (basitleştirilmiş)
async function initiatePayment(cart, customer) {
  const response = await fetch('/api/payment/iyzico/init', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ cart, customer }),
  });
  const { paymentPageUrl, token } = await response.json();

  // 3DS sayfasına yönlendir
  window.location.href = paymentPageUrl;

  // Callback URL'sinde başarı/başarısızlık işlenir
}

Performans: Mobil App Backend için Buyukweb VDS Boyutlandırma

Mobil app, web'e göre %30-50 daha çok API çağrısı yapar. Doğru boyutlandırma:

Aylık Aktif Kullanıcı	Önerilen VDS	Notlar
<5.000	E5-V4 başlangıç (₺250/ay)	4 GB RAM, 2 vCPU
5.000-25.000	E5-V4 orta (₺350/ay)	8 GB RAM, 4 vCPU + Redis
25.000-100.000	E5-V4 üst (₺500/ay)	16 GB RAM, 6 vCPU + Redis + Cloudflare
100.000+	E-Ticaret VDS veya Dedicated	Master-Slave DB, dedicated database

Not: Tablodaki rakamlar yaklaşık; her uygulamanın API yoğunluğu farklı. Buyukweb teknik ekibi gerçek trafiğinizi izleyerek doğru paket önerisi yapar.

Sık Sorulan Sorular

PWA'ya başlamak için en hızlı yol nedir?

WordPress + WooCommerce kullanıyorsanız "PWA for WordPress" eklentisi 1 saatte temel PWA özellikleri kurmanızı sağlar. İleri seviye özellikler için manuel Service Worker kodu gerekir.

iOS Safari PWA'yı tam destekliyor mu?

Kısmen. Push bildirim iOS 16.4+ ile geldi. Background sync, install prompt sınırlı. Android Chrome iOS Safari'den daha tam PWA desteği sunar.

Native app yaparken React Native mi Flutter mı?

İkisi de production-ready. React Native JavaScript bilenler için daha hızlı; Flutter daha tutarlı UI ve performans sunar. Hangi geliştirici ekibinizde varsa onu seçin.

App Store komisyonu kaçınılmaz mı?

Evet, native app digital ürün satıyorsa Apple/Google %15-30 komisyon alır. Fiziksel ürün e-ticaret app'leri komisyondan muaftır (Apple/Google duyurusu); WooCommerce fiziksel ürün satıyorsa endişe etmeyin.

PWA'yı App Store'a yüklemek mümkün mü?

TWA (Trusted Web Activity) ile Android'e Google Play üzerinden yükleyebilirsiniz; Apple Store kabul etmiyor. Bubblewrap CLI ile PWA → APK dönüşümü yapılır.

Sunucu maliyeti PWA vs Native app farklı mı?

Pratikte aynı. İkisi de backend API'ye istek atıyor. Native app biraz daha çok request yapar (offline-sync), ama bu fark Buyukweb VDS paketleri seviyesinde kritik değil.

KVKK ve mobil app uyumluluğu?

Native app store onayında veri toplama beyanı zorunlu. iOS App Tracking Transparency (ATT) prompt'u, Android'de izin yönetimi gerekir. KVKK aydınlatma metni ve onay akışı app içinde gösterilmelidir.

Mobil app güvenliği için ek önlem?

SSL pinning (sertifika sahteciliğine karşı), API token rotation, jailbreak/root tespit, code obfuscation. Native app'te bu önlemler ek geliştirme süresi getirir; kritik kategori (banka, sağlık) için zorunlu, e-ticaret için iyi.

Sonuç ve Buyukweb Tavsiyemiz

Mobil ticaret artık opsiyonel değil — Türkiye'de e-ticaret işlemlerinin çoğunluğu mobil. Karar matrisi:

• Yeni başlıyorsanız: PWA. Düşük yatırım, hızlı sonuç. WooCommerce eklentisi ile bir haftada hayata geçirebilirsiniz.
• Aylık ₺500.000+ ciro, %50+ mobil kullanıcı: Native app yatırımı mantıklı.
• Yüksek hacimli, yenilikçi marka: PWA + Native app birlikte (PWA → tarayıcı kullanıcılar; Native → sadık müşteriler).

Buyukweb tarafında e-ticaret VDS, WordPress Hosting ve VDS sunucu paketleri PWA/Native app backend'iniz için uygun altyapı sunar. Redis Object Cache, LiteSpeed, NVMe SSD, Türkiye Bursa Tier 3 lokasyon — mobil API performansı için kritik bileşenler hazır.

Soru ve teknik destek için: 0850 302 60 70.

---

İlgili Büyükweb Hizmetleri

E-ticaret mobil app backend için Türkiye lokasyonlu paketler:

• E-Ticaret VDS
• WordPress Hosting (WooCommerce için)
• VDS Sunucu
• cPanel Web Hosting
• Tüm hosting ve sunucu paketleri

Sorularınız için 0850 302 60 70 numaralı destek hattımıza veya iletişim sayfamıza yazabilirsiniz.