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

Mobil ticaret (m-commerce) Türkiye'de e-ticaret işlemlerinin %60+'ını oluşturuyor. Mobil uygulama veya PWA ile müşteri deneyimini iyileştirin.

PWA vs Native App Karşılaştırması

| Kriter           | PWA             | Native App (iOS/Android) |
|------------------|-----------------|--------------------------|
| Maliyet          | Düşük ($5-20K)  | Yüksek ($30-100K+)       |
| App Store        | Gerekmez        | Gerekli (komisyon %15-30)|
| Güncelleme       | Anlık           | Review süreci            |
| Push Bildirim    | ✓ (sınırlı)     | ✓ (tam)                  |
| Offline Çalışma  | ✓               | ✓                        |
| Kamera/GPS       | Sınırlı         | Tam erişim               |
| Performans       | İyi             | Mükemmel                 |
| SEO              | ✓               | ✗                        |

Öneri: Başlangıç için PWA, büyüyünce native app

WooCommerce PWA Kurulumu

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

// Kurulum
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(urlsToCache))
  );
});

// Ağ öncelikli, önbellekle geri dön
self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    // API istekleri: Ağ öncelikli
    event.respondWith(
      fetch(event.request)
        .catch(() => caches.match(event.request))
    );
  } else {
    // 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 },
    })
  );
});

<!-- manifest.json -->
{
  "name": "MagazaNız",
  "short_name": "MagazaNız",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "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"}
  ],
  "categories": ["shopping"],
  "lang": "tr",
  "shortcuts": [
    {
      "name": "Sepetim",
      "url": "/sepet/",
      "icons": [{"src": "/icons/cart-96.png", "sizes": "96x96"}]
    }
  ]
}

<!-- 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">

React Native ile WooCommerce App

// WooCommerce REST API ile ürün listesi
import WooCommerceRestApi from "@woocommerce/woocommerce-rest-api";

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

// Ürünleri getir
async function getProducts(category = null, page = 1) {
  const params = {
    per_page: 20,
    page,
    status: 'publish',
    ...(category && { category }),
  };

  const response = await api.get("products", params);
  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;
}

// React Native 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);

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

  const loadProducts = async () => {
    setLoading(true);
    const data = await getProducts(categoryId);
    setProducts(data);
    setLoading(false);
  };

  const renderProduct = ({ item }) => (
    <TouchableOpacity style={styles.productCard}>
      <Image
        source={{ uri: item.images[0]?.src }}
        style={styles.productImage}
      />
      <Text style={styles.productName}>{item.name}</Text>
      <Text style={styles.productPrice}>
        {parseFloat(item.price).toLocaleString('tr-TR')} ₺
      </Text>
      <TouchableOpacity
        style={styles.addButton}
        onPress={() => addToCart(item.id)}
      >
        <Text>Sepete Ekle</Text>
      </TouchableOpacity>
    </TouchableOpacity>
  );

  return (
    <FlatList
      data={products}
      renderItem={renderProduct}
      keyExtractor={item => item.id.toString()}
      numColumns={2}
      onEndReached={loadProducts}
    />
  );
}

Push Bildirim Entegrasyonu

// Firebase Cloud Messaging (FCM) ile push bildirim
// WooCommerce - Sipariş durumu değişince bildir

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

exports.sendOrderNotification = async (snapshot, context) => {
  const order = snapshot.data();
  const userId = order.customer_id;

  // Kullanıcının FCM token'ını al
  const userDoc = await admin.firestore().collection('users').doc(userId).get();
  const fcmToken = userDoc.data().fcmToken;

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

Sonuç

PWA ile düşük maliyetle mobil deneyim sunabilir, native app ile maksimum özellik setine ulaşabilirsiniz. WooCommerce REST API, React Native veya Flutter ile tam özellikli e-ticaret uygulaması geliştirmenizi sağlar. Buyukweb'in API dostu ve yüksek performanslı hosting altyapısı, mobil uygulama arka ucunuzu destekler.

---

Ilgili Buyukweb Hizmetleri:

• Guvenli hosting ile online magaza kurun
• E-ticaret VDS paketlerimizi inceleyin
• Tum hosting ve sunucu paketlerimiz

---

E-Ticaret Altyapi Rehberi

Platform Secimi

WooCommerce: Esnek, genis eklenti. Kucuk-orta isletmeler.
PrestaShop: Guclü stok, coklu dil.
OpenCart: Hafif, kolay kurulum.
Shopify: Hosted, teknik bilgi gerektirmez.

Odeme

iyzico, PayTR, Param sanal pos. 3D Secure zorunlu. Kapida odeme onemli. Taksit seceenekleri donusumu arttirir.

Marketplace Entegrasyonu

Amazon, Trendyol, Hepsiburada, N11 icin entegrator yazilimi. Stok senkronizasyonu kritik. Coklu kanal strateji.

Performans

4 GB RAM, 2 vCPU, NVMe SSD minimum. CDN ile gorsel hizi. Yuksek trafik donemlerinde kaynak artirin.

Guvenlik

PCI DSS uyumu. Odeme bilgisi saklamayin. SSL, WAF, KVKK uyumlulugu zorunlu.

SEO

Product schema ekleyin. Gorsel optimize edin. Meta bilgilerini ozellestirin. Google Shopping entegrasyonu.

Sik Sorulan Sorular

Hosting mi VDS mi?

500 altinda ziyaretci hosting yeterli. 1000+ veya marketplace entegrasyonu icin VDS oneriyoruz.

Marketplace entegrasyonu icin ne gerekir?

Sabit IP VDS, entegrator yazilimi, API erisimleri. Buyukweb E-Ticaret VDS bu icin tasarlanmistir.

Sonuc

Basarili e-ticaret guclü altyapi, dogru platform ve etkili pazarlama birlesimdir. VDS ile isletmenizi olceklendirin.

E-Ticaret Baslangic Kontrol Listesi

Yasal

• Sirket/sahis kurulumu
• Vergi levhasi
• Mesafeli satis sozlesmesi
• KVKK aydinlatma metni
• Cerez politikasi
• Iade kosullari

Teknik

• Hosting/VDS secimi
• SSL sertifikasi
• E-ticaret platformu
• Sanal pos (3D Secure)
• Kargo entegrasyonu
• E-fatura entegrasyonu
• Google Analytics + Search Console

Pazarlama

• Google Business Profile
• Sosyal medya hesaplari
• Google Shopping
• Facebook/Instagram Shop
• E-posta pazarlama

E-Ticaret VDS vs Ev Interneti

Ozellik	Ev Interneti	E-Ticaret VDS
IP	Dinamik	Sabit
Temizlik	Bilinmiyor	Temiz
Kesinti	Elektrik/internet	%99.8 uptime
Hiz	Degisken	1 Gbps
Guvenlik	Dusuk	DDoS korumali

Marketplace islemleri icin sabit ve temiz IP kritik. Ban riski en aza iner.

Neden Buyukweb?

Buyukweb, 2009 yilindan bu yana Turkiye'nin guvenilir hosting firmasidir. Bursa Pendc Tier 3 veri merkezinde profesyonel barindirma hizmetleri sunmaktadir.

Teknik Altyapi Avantajlari

• NVMe SSD Diskler: Geleneksel disklere gore 10x daha hizli okuma/yazma
• LiteSpeed Web Server: Apache'ye kiyasla 10x performans artisi
• CloudLinux Izolasyonu: Her hesap icin ayri kaynak limiti
• Imunify360 Guvenlik: Otomatik malware tarama ve engelleme
• DDoS Korumasi: L3, L4, L7 katmanlarinda kapsamli koruma

Musteri Memnuniyeti

5.200'den fazla aktif musteri ile %99.8 uptime garantisi sunuyoruz. 7/24 Turkce teknik destek ekibimiz tum sorulariniza hizla yanit verir. Ucretsiz site tasima hizmeti ile mevcut hosting saglayicinizdan kolayca gecis yapabilirsiniz.

Fiyat-Performans Dengesi

Rekabetci fiyatlarla profesyonel hosting altyapisi sunuyoruz. Yillik odemede ek indirimler, ucretsiz SSL sertifikasi ve gunluk otomatik yedekleme tum paketlerde standarttir.

Kolay Yonetim

cPanel ve Plesk kontrol panelleri ile web sitenizi, e-postalarinizi ve veritabaninizi tek panelden kolayca yonetin. Softaculous ile 400'den fazla uygulamayi tek tikla kurun.

Hosting Sektoru ve Gelecek Trendleri

Dijitallesme ile birlikte hosting sektoru hizla donusuyor. Edge computing, serverless mimariler ve container teknolojileri geleneksel hosting yaklasimlarini tamamliyor. Ancak guvenilir bir fiziksel altyapi her zaman temel gereksinim olmaya devam edecek.

Yapay Zeka ve Hosting

AI destekli guvenlik sistemleri, otomatik optimizasyon araclari ve akilli izleme cozumleri hosting kalitesini artiriyor. Imunify360 gibi AI tabanli guvenlik yazilimlari, saldiri kaliplarini ogrenererek proaktif koruma sagliyor.

Surdurulebilir Hosting

Yesil enerji kullanan veri merkezleri, enerji verimli sunucular ve karbon notr barindirma hizmetleri gelecekte daha onemli hale gelecek. Verimli donanim ve akilli sogutma sistemleri ile enerji maliyetleri azaltiliyor.

5G ve Mobil Oncelik

5G teknolojisinin yayginlasmasi ile mobil trafik daha da artacak. Mobile-first hosting cozumleri, edge caching ve AMP destegi onemini koruyacak. Web sitelerinin mobilde 2 saniyenin altinda yuklenmesi standart beklenti haline geliyor.