React Native'de Derin Bağlantı (Deep Linking) Nasıl Eklenir? Pratik İpuçları ve Kontrol Listesi

React Native ile geliştirdiğiniz mobil uygulamaya derin bağlantı (deep linking) eklemek, kullanıcıların harici bir linke tıkladığında doğrudan uygulamanızın belirli bir sayfasına yönlenmesini sağlar. Bu özellik, push notification kampanyalarından e-posta bağlantılarına kadar birçok senaryoda kullanıcı deneyimini artırır. Aşağıda, React Native'de derin bağlantı kurmak için gereken tüm adımları, platforma özel ayarları ve sık yapılan hatalardan kaçınma ipuçlarını bulacaksınız.

Derin Bağlantı Nedir ve Neden Kullanılır?

Derin bağlantı, bir web bağlantısının mobil uygulamanın belirli bir ekranını açmasını sağlayan URL şemasıdır. Kullanıcı uygulama yüklüyse doğrudan ilgili sayfaya, yüklü değilse App Store veya Google Play’e yönlendirilir. React Native'de Linking modülü ile bu işlem kolayca yapılır. Push notification ile birlikte kullanıldığında dönüşüm oranlarını ciddi ölçüde artırabilirsiniz. Örneğin, React Native'de Firebase Cloud Messaging ile Push Notification Ekleme yazımızda olduğu gibi, bildirimlere tıklandığında ilgili ürün sayfasına yönlendirme yapabilirsiniz.

Platforma Özel Yapılandırmalar

iOS İçin Associated Domains

iOS’ta Universal Links kullanmak için Apple Developer hesabınızda Associated Domains’i etkinleştirin ve apple-app-site-association dosyasını sunucunuza ekleyin. Xcode projenizde Capabilities altından Associated Domains’i açın ve applinks:example.com formatında domain ekleyin.

Android İçin Intent Filters

Android’de derin bağlantı için AndroidManifest.xml dosyasına intent filter ekleyin. Aşağıda örnek bir yapılandırma bulunuyor:

<activity android:name=".MainActivity" android:launchMode="singleTask">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="https" android:host="example.com"/>
    </intent-filter>
</activity>

Custom scheme (örneğin myapp://) kullanmak için android:scheme="myapp" ekleyin, ancak Universal Links veya App Links önerilir.

React Native Linking Modülünü Kullanma

React Native’in Linking modülü, derin bağlantıları dinlemek ve yönlendirmek için kullanılır. Aşağıda temel kullanım adımları:

• Bağlantıyı dinleme: Linking.addEventListener('url', handler) ile uygulama açıkken gelen bağlantıları yakalayın.
• İlk bağlantıyı alma: Linking.getInitialURL() ile uygulama kapalıyken gelen bağlantıyı alın.
• Navigasyonu yönlendirme: URL’yi parse edip rotaya göre yönlendirme yapın. Örneğin example.com/product/123 ise ProductDetail sayfasına gidin.

Örnek bir hook:

import { useEffect } from 'react';
import { Linking } from 'react-native';

const useDeepLink = (navigate) => {
  const handleUrl = (event) => {
    const url = event.url;
    // parse and navigate
  };

  useEffect(() => {
    Linking.getInitialURL().then(url => url && handleUrl({ url }));
    Linking.addEventListener('url', handleUrl);
    return () => Linking.removeEventListener('url', handleUrl);
  }, []);
};

Adım Adım Uygulama Rehberi

1. Platform ayarlarını yapın: iOS için Associated Domains, Android için Intent Filter ekleyin.
2. Sunucu dosyalarını yerleştirin: apple-app-site-association (iOS) ve assetlinks.json (Android) dosyalarını HTTPS sunucunuza koyun.
3. React Native Linking modülünü entegre edin: Yukarıdaki hook benzeri bir yapı kurun.
4. Navigasyonu bağlayın: Gelen URL’yi çözümleyip ilgili ekrana yönlendirin.
5. Test edin: Simülatör/emülatörde ve gerçek cihazda test yapın.

Kontrol Listesi

• iOS Associated Domains aktif mi?
• apple-app-site-association dosyası sunucuda doğru yolda mı?
• Android’de intent filter doğru scheme/host içeriyor mu?
• React Native Linking event listener’ı eklenmiş mi?
• getInitialURL ile uygulama kapalıyken bağlantı işleniyor mu?
• URL parsing doğru çalışıyor ve route yönlendirmesi hatasız mı?
• Universal Links / App Links öncelikli mi (custom scheme yedek mi)?
• Production build’de test edildi mi?

Sık Yapılan Hatalar ve İpuçları

• Yanlış scheme kullanımı: Sadece custom scheme değil, HTTPS scheme ile Universal Links kullanmaya özen gösterin.
• İlk bağlantıyı kaçırmak: getInitialURL çağrısını component mount olduğunda yapmayı unutmayın.
• Navigasyon kütüphanesi uyumsuzluğu: React Navigation gibi bir kütüphane ile entegre ederken linking konfigürasyonunu doğru ayarlayın.
• Test kolaylığı: iOS simülatöründe xcrun simctl openurl booted 'https://example.com/product/123' komutunu kullanabilirsiniz.

Derin bağlantı performansı, seçtiğiniz framework’e de bağlıdır. Karşılaştırmalı bir değerlendirme için Flutter vs React Native: Performans ve Geliştirici Deneyimi Karşılaştırması yazımızı inceleyebilirsiniz.

Test Etme Yöntemleri

• iOS Simulator: Safari’ye https://example.com/product/123 yazın veya xcrun simctl openurl komutunu kullanın.
• Android Emülatör: ADB komutu: adb shell am start -W -a android.intent.action.VIEW -d 'https://example.com/product/123'
• Gerçek cihaz: Bir not defterine link yazıp tıklayın veya bir e-posta gönderin.

Doğru yapılandırma ile kullanıcılarınız uygulama içinde kesintisiz bir deneyim yaşar. Hata ayıklama için React Native Debugger veya Flipper kullanabilirsiniz.

Sık Sorulan Sorular

React Native'de derin bağlantı için hangi scheme tercih edilmeli?

Universal Links (iOS) ve App Links (Android) HTTPS scheme kullanır ve daha güvenlidir. Custom scheme (örneğin myapp://) yedek olarak kullanılabilir ancak her zaman öncelik HTTPS verilmelidir.

Derin bağlantı testi nasıl yapılır?

iOS simülatöründe 'xcrun simctl openurl' komutu, Android emülatöründe 'adb shell am start -a android.intent.action.VIEW -d URL' komutu ile test edebilirsiniz. Gerçek cihazda da aynı URL'yi tarayıcıya yazarak veya e-posta üzerinden test yapabilirsiniz.

Uygulama kapalıyken gelen derin bağlantı nasıl işlenir?

React Native'de Linking.getInitialURL() metodu ile uygulama açıldığında bekleyen bağlantıyı alabilirsiniz. Bu işlemi componentDidMount veya useEffect içinde yapmak gerekir.

Derin bağlantı sadece push notification ile mi kullanılır?

Hayır, derin bağlantı herhangi bir harici linkten (e-posta, SMS, web sayfası) uygulamaya yönlendirme için kullanılabilir. Push notification en yaygın kullanım alanlarından biridir ancak tek değildir.