React Native ile Headless WooCommerce: Mobil Ticaret Uygulamaları Oluşturmak

🇬🇧 English: Read this in English →

Mobil Ticaret E-Ticarete Hâkim

Mobil ticaret artık küresel e-ticaret satışlarının %73’ünden fazlasını oluşturuyor ve aradaki fark açılmaya devam ediyor. Tüketiciler hızlı, yerel hissettiren mobil deneyimler bekliyor — akıcı animasyonlar, anlık bildirimler, çevrimdışı erişim ve biyometrik kimlik doğrulama. Mobil tarayıcıda görüntülenen duyarlı bir web sitesi, açık konuşayım, özel bir mobil uygulamanın deneyimiyle eşleşemez; ikisini yan yana kullanan herkes farkı ilk saniyede hisseder.

WooCommerce mağaza sahipleri için zorluk açıktı: mevcut ürün kataloğunu, sipariş yönetimini ve iş mantığını terk etmeden nasıl mobil ticaret uygulaması oluşturursun? Cevap headless WooCommerce — WooCommerce’i arka uç motoru olarak kullanırken React Native ile yerel mobil ön yüz oluşturmak.

“Mobil uygulamalar mobil web’den 3 kat, masaüstünden 1,5 kat daha yüksek dönüşüm sağlıyor. Yalnızca anlık bildirimler, mobil web’e kıyasla etkileşimde 7,8 kat artış sağlıyor.” — App Annie / data.ai Research

Mimari: WooCommerce + React Native

Headless mobil ticaret mimarisi, sorumlulukları temiz bir şekilde ayırır:

• Arka Uç (WooCommerce): Ürün yönetimi, envanter, fiyatlandırma, sipariş işleme, ödeme alma, vergi hesaplama, nakliye kuralları ve müşteri hesaplarını yönetir. Tüm iş mantığı WooCommerce’de kalır.
• API Katmanı: WooCommerce REST API tüm ticaret verilerini JSON uç noktaları olarak sunar — ürünler, kategoriler, siparişler, müşteriler, kuponlar, nakliye bölgeleri ve daha fazlası.
• Mobil Ön Yüz (React Native): WooCommerce API’sini tüketen ve yerel iOS ve Android arayüzleri oluşturan çapraz platform mobil uygulama. Tek kod tabanı, iki platform.

Bu ayrımın kalbindeki fikir çok basit: tek bir doğruluk kaynağın var (WooCommerce), ve o kaynak birden fazla ön yüzü besliyor. Web sitesi bir ön yüz, iOS uygulaması başka, Android uygulaması bir diğeri — hepsi aynı ürün, fiyat ve stok verisini aynı yerden okuyor. İçeriği ve iş mantığını, onu gösteren kabuktan ayırmak. Kulağa yeni bir mimari gibi geliyor değil mi? Değil. Bir dakika sonra oraya geleceğim.

Neden React Native?

Meta tarafından oluşturulan React Native, JavaScript ve React ile çapraz platform mobil uygulamalar oluşturmak için lider framework’tür. WooCommerce mobil ticareti için çekici avantajlar sunuyor:

• Tek kod tabanı: Bir kez yazarsın, hem iOS hem de Android’e dağıtırsın. Bu, ayrı yerel uygulamalar oluşturmaya kıyasla geliştirme süresini ve maliyetini %40-60 azaltır.
• Yerel performans: Hibrit framework’lerin aksine, React Native gerçek yerel UI bileşenlerini işler. Kullanıcılar beklentileri olan akıcı kaydırma, akışkan animasyonlar ve duyarlı etkileşimleri alır.
• React ekosistemi: Web ön yüzün zaten React veya Next.js kullanıyorsa, ekibinin React bilgisi doğrudan mobil geliştirmeye aktarılır.
• Hot reloading: Geliştiriciler kod değişikliklerini cihazda anında görür, geliştirme döngüsünü önemli ölçüde hızlandırır.
• Büyük ekosistem: Navigasyon, durum yönetimi, ödeme işleme, anlık bildirimler ve daha fazlası için binlerce kütüphane.

Bence “tek kod tabanı” satırının cazibesine kapılıp gerçekçiliği elden bırakmamak lazım. React Native “bir kez yaz, her yerde çalıştır” değil; “çoğunu bir kez yaz, iki platformun kendine has yerlerine ayrıca dokun” demek. Yine de iki ayrı yerel ekip tutmaya kıyasla bu, çoğu WooCommerce mağazası için doğru dengedir.

Bunu Daha Önce Yaşadım: Tek Kaynak, Çok Kabuk

Şimdi izin ver de sektörün dinozoru bir dakika lafa karışsın. “Tek arka uç, çok ön yüz” cümlesini ilk duyduğumda içimden gülümsedim, çünkü bu disiplini otuz yıl önce apayrı bir araçta öğrenmiştim: Macromedia Director. O günlerde bir projeyi tek bir kaynaktan yazar, sonra onu ayrı ayrı Mac ve Windows “projector”larına derlerdik — aynı içerik, aynı mantık, iki farklı platform kabuğu. Çok lisanlı CD-ROM işlerinde de aynı numarayı yapardık: bir tane özün olurdu, altı dilde ayrı ön yüzler o tek öze bağlanırdı. İçeriği ve davranışı, onu ekrana getiren kabuktan ayrı tutmayı beceremediğin gün, projenin altı ayda bakım masasında ölürdü.

Bugün headless WooCommerce’e baktığımda birebir aynı şeyi görüyorum: WooCommerce senin tek kaynağın, o Director “kaynak dosyası”; web sitesi, iOS ve Android uygulamaları ise bugünün “projector”ları. İsimler değişmiş — REST, JSON, React Native — ama disiplin otuz yıldır aynı. Yani birisi sana bunun parlak yeni bir mimari olduğunu söylerse, gülümseyip başını sallayabilirsin; fikir eski, sadece kılıfı yeni. Ve eski olması iyi bir şey; çünkü zamanın sınavından geçmiş demektir.

Uygulanacak Temel Özellikler

Ürün Tarama ve Arama

WooCommerce API uç noktalarını kullanarak kategori tarama, ürün filtreleme ve arama uygula. Temel hususlar:

• Ürün listeleri için sonsuz kaydırma veya sayfalama
• API çağrılarını en aza indirmek için debouncing ile gerçek zamanlı arama
• Yakınlaştırmak için sıkıştır ve kaydırma navigasyonuyla ürün görsel galerileri
• Dinamik fiyat ve stok güncellemeleriyle ürün varyasyonları (beden, renk)
• Hızlı erişim için yerel olarak saklanan son görüntülenen ürünler

Sepet Yönetimi

Sepet, istemci tarafında (daha hızlı, çevrimdışı çalışır) veya WooCommerce Cart API aracılığıyla sunucu tarafında (fiyat/envanter doğruluğunu sağlar) yönetilebilir:

• Miktar ayarlamalarıyla ürün ekle/kaldır
• Gerçek zamanlı indirim hesaplamasıyla kupon kodu uygulama
• Uygulama yeniden başlatmalarında hayatta kalan kalıcı sepet (AsyncStorage veya sunucu tarafı)
• Ürün sayısını gösteren sekme çubuğunda sepet rozeti

Ödeme ve Ödeme

Mobil ödeme sürtünmesiz olmalı — her ekstra adım müşteri kaybettirir:

• Stripe SDK: Apple Pay ve Google Pay desteğiyle yerel ödeme sayfası. Stripe React Native SDK, hassas verileri işlemeden PCI uyumlu kart toplama sağlar.
• Adres otomatik tamamlama: Hızlı adres girişi için Google Places API
• Kayıtlı ödeme yöntemleri: Tek dokunuşla yeniden sipariş için tokenize kartlar
• Misafir ödeme: Hesap oluşturmayı zorlama — satın alma sonrası sun

Anlık Bildirimler

Anlık bildirimler, mobil uygulamaların mobil web’e göre öldürücü özelliğidir:

• Sipariş durumu güncellemeleri: “Siparişiniz gönderildi!” takip bağlantısıyla
• Terk edilmiş sepet kurtarma: Kullanıcılara sepette bırakılan ürünleri hatırlat
• Flash satışlar ve promosyonlar: Zamana bağlı tekliflerle anında etkileşim sağla
• Stokta yeniden var uyarıları: İstek listesi ürünleri mevcut olduğunda bildir

Firebase Cloud Messaging (FCM), özel webhook’lar veya eklentiler aracılığıyla WooCommerce arka ucunla entegre edilmiş hem iOS hem de Android için anlık teslimatı yönetir. Sana samimi bir uyarı: bu güç kolayca kötüye kullanılır. Bildirimi bir satış aracına çevirip günde beş kez insanları dürtmeye başladığın an, öldürücü özellik uygulamanın kaldırılma sebebine dönüşür. Az ve yerinde gönder.

Çevrimdışı Mod

Mobil uygulamalar zayıf bağlantıyla bile çalışmalı:

• Çevrimdışı tarama için ürün verilerini ve görselleri yerel olarak önbelleğe al
• Sepet eylemlerini kuyruğa al ve bağlantı geri döndüğünde senkronize et
• Önbelleğe alınmış sipariş geçmişi ve hesap bilgilerini görüntüle
• Açık çevrimdışı göstergeleriyle zarif bozulma

Biyometrik Kimlik Doğrulama

Face ID ve parmak izi kimlik doğrulama, sürtünme olmadan güvenlik sağlar:

• İlk e-posta/şifre kurulumundan sonra biyometrik giriş
• Ek güvenlik için biyometrik aracılığıyla ödeme onayı
• Cihaz anahtar zincirinde güvenli token depolamayla otomatik oturum yönetimi

Detaylı Teknoloji Yığını

• React Native + Expo: Expo, yönetilen derlemeler, havadan güncellemeler ve kamera, bildirimler ve kimlik doğrulama için önceden oluşturulmuş modüllerle React Native geliştirmeyi basitleştirir
• WooCommerce REST API: Tüm ürün, sipariş ve müşteri veri uç noktaları
• Stripe React Native SDK: Apple Pay/Google Pay ile PCI uyumlu ödeme toplama
• Firebase: Anlık bildirimler (FCM), analitik, çökme raporlama (Crashlytics)
• React Query / TanStack Query: Önbellek, arka plan yenileme ve iyimser güncellemelerle sunucu durumu yönetimi
• React Navigation: iOS ve Android için yerel navigasyon kalıpları (yığın, sekme, çekmece)
• AsyncStorage / MMKV: Çevrimdışı mod ve kullanıcı tercihleri için yerel veri kalıcılığı

PWA: Alternatif Yaklaşım

Her işletmenin yerel uygulamaya ihtiyacı yok. Progressive Web Apps (PWA’lar) bir orta yol sunuyor — uygulama mağazası dağıtımı olmadan tarayıcı aracılığıyla sunulan uygulama benzeri deneyimler:

• WordPress PWA eklentileri: SuperPWA ve PWA for WP gibi eklentiler, WooCommerce siteni çevrimdışı destek ve anlık bildirimlerle yüklenebilir bir web uygulamasına dönüştürür
• Avantajlar: Uygulama mağazası onay süreci yok, anında güncellemeler, tüm platformlarda çalışır, daha düşük geliştirme maliyeti
• Sınırlamalar: Sınırlı iOS anlık bildirim desteği (iOS 16.4+ ile iyileşiyor), bazı yerel API’lere erişim yok, yerel uygulamalardan daha az “premium” algılanıyor

PWA’lar, tam yerel uygulama yatırımı yapmadan önce mobil etkileşimi test eden işletmeler veya uygulama mağazası keşfedilebilirliğinin birincil edinme kanalı olmadığı pazarlar için en iyi şekilde çalışır. Ben olsam çoğu mağazaya “önce PWA ile suyu ölç, rakamlar yerel uygulamayı hak ediyorsa o zaman React Native’e geç” derdim. Uygulama geliştirmek ucuz değil; onu talebin varlığını görmeden yapmak daha da pahalı.

“Progressive Web Apps, kullanıcıların depolama kısıtlamaları ve veri maliyetleri nedeniyle uygulama indirmeye isteksiz olduğu gelişmekte olan pazarlarda yerel uygulamalardan %36 daha yüksek dönüşüm oranları görüyor.” — Google Web Developers

Uygulama Mağazası Hususları

Apple App Store ve Google Play’e yayınlama önemli gereksinimler içerir:

• Apple incelemesi: Uygulamalar mobil web sitesinin ötesinde işlevsellik sağlamalıdır. Saf web görünümü sarmalayıcıları reddedilir. Yerel özellikli React Native uygulamaları incelemeyi geçer.
• Uygulama içi satın almalar: Uygulamalar aracılığıyla satılan fiziksel ürünler Apple/Google’ın %30 komisyonuna tabi DEĞİLDİR. Dijital ürünler ve abonelikler, nasıl teslim edildiklerine bağlı olarak olabilir.
• Gizlilik politikaları: Her iki mağaza da açık gizlilik politikaları ve veri toplama beyanları gerektirir
• Performans standartları: Uygulamalar minimum performans ölçütlerini karşılamalıdır — başlatma süresi, duyarlılık ve çökme oranı eşikleri

Şu “%30 komisyona tabi DEĞİLDİR” satırının altını özellikle çizeyim, çünkü çoğu insan mobil uygulamadan bu korkuyla kaçıyor: fiziksel ürün satıyorsan Apple veya Google cebinden pay almıyor. Komisyon meselesi dijital ürün ve abonelik dünyasının derdi; WooCommerce ile kargolanan gerçek ürün satan mağazaların değil.

Performans Optimizasyonu

• Görsel optimizasyonu: Mobil ekranlar için uygun boyutta görseller sun. WooCommerce küçük resim boyutlarını ve ürün listeleri için lazy loading kullan.
• API yanıt önbelleği: Değişiklik tarihlerine dayalı önbellek geçersiz kılma ile ürün verilerini yerel olarak önbelleğe al
• İskelet ekranları: Veriler yüklenirken içerik yer tutucuları göster — algılanan performans gerçek performans kadar önemlidir
• Paket optimizasyonu: Daha hızlı uygulama başlatma ve daha düşük bellek kullanımı için Hermes JavaScript motoru kullan (React Native’de varsayılan)
• Sayfalama: Ürünleri 20-50’lik gruplar halinde yükle, tüm kataloğu bir kerede asla çekme

Sonuç

React Native ve headless WooCommerce ile mobil ticaret uygulaması oluşturmak, WooCommerce mağazalarının mobil uygulama alanına girmesi için en pratik yoldur. Mevcut ürün kataloğunu, sipariş yönetimini ve iş mantığını WooCommerce’de tutarken, anlık bildirimler ve yerel özellikler aracılığıyla daha yüksek etkileşim, daha iyi dönüşüm oranları ve daha güçlü müşteri sadakati sağlayan yerel bir mobil deneyim sunuyorsun.

Teknoloji yığını olgun, geliştirme yaklaşımı kanıtlanmış ve iş gerekçesi açık: mobil ticaret, müşterilerinin olduğu yer. Ve altında yatan disiplin — tek kaynak, çok kabuk — otuz yıldır aynı disiplin. Zaten bildiğin ticaret motoruyla güçlendirilmiş yerel bir uygulamayla müşterilerinle orada buluş.