Mobil Marketplace Uygulaması
Mobil marketplace; React Native/Flutter ile tek kod tabanı, FCM push ve deep linking, WebView tabanlı 3D Secure ödeme, offline mode ve FlatList performans ayarlarıyla kurulur. İYS/KVKK uyumu bildirim tarafının olmazsa olmazıdır.
Neden mobil marketplace?
E-ticaret trafiğinin büyük çoğunluğu artık mobil cihazlardan gelir; sektör raporlarına dayalı kamuya açık ve temsili değerler bu payı çoğu pazarda %70–80 aralığında gösterir. Bu nedenle mobil, bir marketplace için ikincil kanal değil birincil vitrindir. İyi bir mobil uygulama; hızlı listeleme, güvenli ödeme, anlık bildirim ve zayıf bağlantıda dahi çalışan bir deneyim sunmalıdır. Bu yazı, React Native ağırlıklı bir yaklaşımla kurulumun teknik ve yasal çerçevesini özetler.
Teknoloji seçimi: React Native vs Flutter
Her iki çatı da tek kod tabanından iOS ve Android üretir. Seçimi teknoloji değil, ekibin uzmanlığı belirler.
| Kriter | React Native | Flutter |
|---|---|---|
| Dil | JavaScript / TypeScript | Dart |
| Render | Native bileşen + köprü (bridge) | Kendi çizim motoru (tutarlı UI) |
| Ekosistem | Çok geniş, olgun | Hızla büyüyen |
| En güçlü olduğu yer | Web/JS ekibiyle ortak dil, hazır kütüphane | Piksel-tutarlı özel arayüz, animasyon |
Uygulama mimarisi ve ana ekran
Marketplace uygulamasının kalbi ürün listesidir. React Native tarafında FlatList ile sanallaştırılmış, sonsuz kaydırılabilir bir liste kurulur; aşağı çekince yenileme (pull-to-refresh), arama ve varyant/fiyat gösterimi bu ekranda toplanır. Durum yönetiminde uzak veri için sorgu önbelleği (ör. React Query / Apollo) kullanmak; yükleme, hata ve yeniden deneme durumlarını sadeleştirir. Ürün detay, sepet ve profil ekranları tek bir navigasyon yığınında (stack) bağlanır. Backend sözleşmesi ve çok satıcılı sepet mantığı için marketplace sistemi yazısındaki katman modeliyle hizalayın.
Push notification ve deep linking
Bildirim, mobil dönüşümün en güçlü kaldıraçlarından biridir. Teknik akış şöyledir:
- İzin ve token: FCM ile bildirim izni alınır, cihaz token’ı backend’e kaydedilir.
- Ön/arka plan: Uygulama açıkken yerel bildirim (ör. Notifee), kapalıyken arka plan işleyicisi devreye girer.
- Deep linking: Bildirime tıklandığında data yükündeki ürün/sipariş kimliğiyle ilgili ekrana yönlendirilir.
- Toplu gönderim: Backend’de tekil send veya çok alıcılı multicast (tek çağrıda 500 token) ile ölçeklenir.
Yasal tarafta önemli bir ayrım vardır: kampanya/indirim bildirimleri ticari elektronik ileti sayılır ve İYS (İleti Yönetim Sistemi) onayı ile KVKK 6698 kapsamında açık rıza gerektirir. Sipariş kargoya verildi, ödeme onaylandı gibi işlemsel bildirimler ise bu kapsamın dışında değerlendirilir. Bu ayrımı bildirim tipine göre kodda ayırmak uyum riskini düşürür.
Mobil ödeme: 3D Secure ve cüzdanlar
Mobilde ödeme, güvenlik ve mağaza politikaları nedeniyle web’den farklı kurgulanır. En yaygın ve en düşük riskli yöntem, ödemeyi bir WebView içinde açmaktır:
- Backend, iyzico/PayTR sağlayıcısından 3D Secure ödeme sayfası URL’i üretir.
- URL WebView’de açılır; kullanıcı kart doğrulamasını sağlayıcı ekranında yapar, kart verisi uygulamaya hiç girmez.
- Sonuç deep link (ör.
myapp://payment-success) ile uygulamaya döner. - Kesin onay istemciye değil, sağlayıcıdan gelen sunucu-taraflı callback/webhook’a göre işlenir.
Bu yaklaşım kart verisini sağlayıcı tarafında tutarak PCI DSS kapsamını daraltır. Native cüzdanlar (Apple Pay, Google Pay) tokenizasyonla ek bir hızlı ödeme yolu sunar. Fatura tarafında satışın GİB e-Arşiv/e-Fatura ile belgelenmesi gerektiğini unutmayın; entegrasyon için kargo-e-fatura çözümümüze bakabilirsiniz.
Offline mode ve senkronizasyon
Mobil kullanıcı metroda, asansörde, zayıf sinyalde uygulamayı açar. İyi bir marketplace uygulaması bu anlarda boş ekran göstermek yerine önbellekten çalışır. Pratik desen:
- Yerel önbellek: Ürün listesi AsyncStorage/anahtar-değer deposunda saklanır; API başarısız olursa önbellekten okunur.
- Ağ durumu: NetInfo ile bağlantı dinlenir; çevrimdışıyken önbellek, çevrimiçiyken taze veri gösterilir.
- Bekleyen işlemler: Sepete ekleme gibi eylemler kuyruğa alınır, bağlantı geri gelince otomatik senkronize edilir.
Bu, tek stok kaynağı ilkesiyle birlikte çalışmalıdır; çevrimdışı yapılan işlemler sunucuda doğrulanırken stok çakışması yönetilmelidir. Konu detayları için stok/sipariş senkronizasyonu çözümüne bakın.
Performans optimizasyonu
Mobilde performans doğrudan dönüşüme yansır. Kararlılığı tek metrikle takip edin:
crash-free kullanıcı oranı = (toplam kullanıcı − çökme yaşayan) ÷ toplam kullanıcı × 100 (hedef ≥ %99,5)
Uzun listeler en sık performans sorunudur; FlatList’i doğru ayarlarla kullanmak akıcılığı belirler:
| Teknik | Ayar / araç | Etki |
|---|---|---|
| Liste sanallaştırma | initialNumToRender, windowSize, removeClippedSubviews | Bellek ve ilk çizim süresi düşer |
| Sabit yükseklik | getItemLayout | Kaydırma hesabı hızlanır |
| Görsel önbellek | react-native-fast-image | Tekrarlı indirmeler önlenir |
| Gereksiz render | memo, useMemo, useCallback | CPU yükü azalır |
| Başlangıç süresi | Hermes motoru (Android) | Açılış ve bellek iyileşir |
Çökmeleri Sentry veya Firebase Crashlytics ile raporlayın; ağ katmanında GraphQL/REST önbelleği gereksiz istekleri keser.
Yayın, uyum ve maliyet
Yayın öncesi App Store ve Play Store inceleme kurallarına uyum (izin gerekçeleri, gizlilik etiketleri, ödeme politikaları) şarttır. KVKK aydınlatma metni, izin ekranları ve İYS onay akışı uygulamanın içinde konumlandırılmalıdır. Aşağıdaki geliştirme yol haritası ve maliyet aralıkları temsili/yaklaşık değerlerdir; kapsam, ekip ve entegrasyon sayısına göre değişir.
| Aşama | Öncelik | Tipik süre |
|---|---|---|
| Temel UI/UX (ürün, sepet, profil) | Olmazsa olmaz | ~4 hafta |
| Ödeme entegrasyonu (3D Secure) | Olmazsa olmaz | ~2 hafta |
| Push notification + deep link | Olması iyi | ~1 hafta |
| Offline mode | Değer katan | ~2 hafta |
| Test + mağaza yayını | Olmazsa olmaz | ~2 hafta |
Toplamda tipik bir React Native MVP’si yaklaşık 10–12 haftada yayına alınabilir; süre, hazır entegrasyonların yeniden yazılmaması ölçüsünde kısalır. Altyapı tarafını marketplace hosting, çekirdek platformu marketplace sistemi yazılarında; uçtan uca kurulumu multi-vendor pazaryeri kurulumu çözümünde bulabilirsiniz. Mobil uygulamanızı planlamak için talebinizi iletin.
Merak edilenler
Mobil marketplace için React Native mi Flutter mı?
İki teknoloji de tek kod tabanıyla iOS ve Android üretir. React Native, JavaScript/TypeScript ekosistemi ve web ekibiyle ortak dil avantajı sunar; ödeme, harita, bildirim için hazır kütüphane çok geniştir. Flutter, Dart ile doğrudan derlenen tutarlı bir arayüz ve akıcı animasyon sağlar. Ekibiniz web/JS ağırlıklıysa React Native, piksel-tutarlı özel arayüz ve yüksek animasyon yükü öncelikse Flutter mantıklıdır. Karar teknolojiden çok ekibin mevcut uzmanlığıyla verilmelidir.
Push notification nasıl kurulur ve yasal olarak neye dikkat edilmeli?
Teknik tarafta Firebase Cloud Messaging (FCM) ile cihaz token’ı alınır, backend’e kaydedilir ve tekil veya toplu (multicast, tek çağrıda 500 token) gönderim yapılır. Bildirime tıklandığında deep linking ile ilgili ürün/sipariş ekranına yönlendirilir. Yasal tarafta; pazarlama/kampanya bildirimleri ticari elektronik ileti sayıldığından İYS (İleti Yönetim Sistemi) onayı ve KVKK 6698 kapsamında açık rıza gerekir. Sipariş durumu gibi işlemsel bildirimler bu kapsamın dışında değerlendirilir.
Mobil uygulamada ödeme nasıl güvenli hale getirilir?
Kart verisini uygulamada asla saklamayın. iyzico/PayTR gibi sağlayıcıların 3D Secure ödeme sayfası WebView içinde açılır, sonuç deep link ile uygulamaya döner; böylece kart verisi sağlayıcıda kalır ve PCI DSS kapsamı daralır. Alternatif olarak Apple Pay ve Google Pay ile tokenizasyon kullanılır. Ödeme sonucunu istemciye değil, sağlayıcıdan gelen sunucu-taraflı doğrulamaya (webhook/callback) güvenerek işleyin.
Mobil marketplace performansı nasıl ölçülür ve iyileştirilir?
Kararlılık için crash-free kullanıcı oranı = (toplam kullanıcı − çökme yaşayan) ÷ toplam kullanıcı × 100 izlenir; hedef ≥ %99,5’tir. Liste performansı FlatList ayarlarıyla (initialNumToRender, windowSize, removeClippedSubviews, getItemLayout) düzeltilir, görseller react-native-fast-image ile önbelleklenir, gereksiz render’lar memo/useMemo/useCallback ile önlenir. Android’de Hermes motoru başlangıç süresini kısaltır. Çökmeler Sentry veya Firebase Crashlytics ile raporlanır.
Kendi pazaryerinizi size özel geliştirelim.
Pazaryeri fikrinizi ya da mevcut ihtiyacınızı yazın; iş modelinden geliştirmeye tek elden değerlendirip 1 iş günü içinde dönelim. Hazır paket değil — kaynak kodu sizin, size özel.
Talep Oluştur