React Native Uygulamalarında Derin Bağlantı: Bilmeniz Gereken Her Şey!

Derin bağlantı, günümüzün birbirine bağlı dünyasında önemli bir bileşen haline geldi. "Derin bağlantı" terimi birçok kişiye yeni gelebilir; ancak çoğunuz derin bağlantı kavramını şu ya da bu şekilde kullanmış olmalısınız.

Bir bağlantıya tıkladığınız ve doğrudan cihazınızda yüklü bir uygulamada belirli bir ekranı açtığı bir örneği hatırlıyor musunuz; uygulama içinde manuel olarak gezinmek zorunda kalmadan? Ya da örneğin arkadaşınızın bir makale okumasını istediniz ve o makalenin URL'sini paylaştınız. Arkadaşınız, önce ana sayfayı açıp ardından makaleyi aramak yerine, bağlantıya tıkladı ve tek seferde istenen içeriğe yönlendirildi.

Bunun nasıl olduğunu hiç merak ettiniz mi?

Peki, bu derin bağlantının yaptığı şeydir. Kullanıcılar bir bağlantıya tıklar ve ana ekranda gezinerek zaman kaybetmeden bir mobil uygulamada veya web sitesinde belirli bir konuma yönlendirilir. Diğer örnekler arasında bir YouTube videosu veya Amazon ürününün bağlantısını bir arkadaşla paylaşmak, bir markanın promosyon bağlantısını açarak belirli bir ürün sayfasına gitmek vb. yer alır. Bu tür senaryolarda, normal web bağlantıları yerel mobil uygulamalarla etkili bir şekilde çalışmadığından, derin bağlantı önemlidir.

Bu gönderi, tamamen derin bağlantı kavramının nasıl çalıştığını anlamak ve faydalarını öğrenmekle ilgilidir. Ayrıca, Android ve iOS işletim sistemleri için React Native mobil uygulamalarında derin bağlantının nasıl uygulanacağına ilişkin temel adımları tartışacağız. Bugünlerde mobil uygulama geliştirme için en popüler tercihlerden biri olduğu için React Native çerçevesini seçtik.

Derin Bağlantı Nedir?

Derin bağlantı, bir mobil uygulamanın içindeki belirli bir içeriği veya ekranı başka bir uygulama veya web sitesi gibi harici bir kaynaktan bağlamayı sağlayan bir tekniktir. Derin bağlantılar, kullanıcıları bir çevrimiçi mağaza veya bir web bağlantısı yerine doğrudan bir mobil uygulama içindeki belirli bir konuma gönderen tıklanabilir bağlantılardır. Bu uygulama içi konum, bir ödeme duvarının, makalenin, ürünün veya oturum açma ekranının arkasındaki güvenli içerik parçası gibi herhangi bir şey olabilir. Kullanıcılar, kendileri sayfayı aramaya gerek kalmadan sadece bir URL'ye veya kaynağa tıklayarak istenen uygulama içi konuma ulaşabilir.

Derin Bağlantı Kavramı Nasıl Çalışır?

Derin bağlantı, evrensel bağlantılar (iOS cihazları için) ve bir amaç URL'si (Android cihazlar için) gibi özelleştirilmiş bir URL şeması belirtir. Bir kullanıcı bir derin bağlantıya tıkladığında, işletim sistemi bağlantıyı keser ve kullanıcının cihazında yüklüyse ilgili uygulamayı açar. Derin bağlantıda bulunan bilgiler daha sonra uygulama tarafından istenen içeriğe veya ekrana gitmek için kullanılır.

Ertelenmiş Derin Bağlantılar?

Kullanıcılar bir uygulamaya derinlemesine bağlanırsa, ancak uygulama cihazlarına yüklenmezse ne olur? Burada ertelenmiş derin bağlantılar devreye giriyor. Bir kullanıcı bir bağlantıya tıklarsa ve bağlantının ait olduğu uygulama indirilmezse; kullanıcı bunun yerine App Store'a yönlendirilir. Burada kullanıcılar, yalnızca tek bir tıklama ile amaçlanan uygulamayı yükleyebilecekleri App Store'un tam konumuna yönlendirilir. Ve uygulama yüklendikten sonra, ilgili ekran aynı anda açılır.

Derin Bağlantının Faydaları Nelerdir?

Derin bağlantı, kullanıcılara zaman kazandırır ve kullanıcı deneyimini önemli ölçüde geliştirir.

Derin bağlantılar, ticari markaların kullanıcı tutma oranını ve dönüşüm oranını artırması için harika araçlardır. Markalar promosyon kampanyalarını ve teşviklerini derin bağlantılara bağlayabilir; kullanıcıları tek bir tıklamayla ürün sayfalarına yönlendirmek. Bu şekilde markalar, kullanıcıları yeni ürün veya hizmetleri denemeye kolayca ikna edebilir. Örneğin, bir müzik uygulaması sahibi yeni bir müzik albümünün tanıtımını yapmak istiyor. Böylece, işletme sahibi reklama yatırım yapar ve ünlü bir web sitesiyle bağlantı kurar. Derin bağlantı içeren müzik albümü kapağı, o web sitesinde bir reklam kampanyası olarak görüntülenir. Web sitesi kullanıcıları derin bağlantıya tıkladıklarında, müzik uygulamasındaki ilgili sayfaya yönlendirilirler ve albümü dinleyebilirler.

Ayrıca, derin bağlantı kampanyalarını takip edebilir ve kampanyalarınızın nasıl performans gösterdiğini kontrol edebilirsiniz. Derin bağlantı, SEO sıralamalarınızı da iyileştirir ve uygulamanızın karmaşasını en aza indirir.

React Native Uygulamalarında Derin Bağlantı Oluşturmayı Nasıl Uygulayabilirsiniz?

React-navigation kitaplığı, React Native uygulamalarını derinlemesine bağlamak için Bağlama modülünü sağlar. Bu, React Native geliştiricileri için kullanışlıdır.

Uygulamada, belirli URL'leri ilgili uygulama ekranlarıyla eşleyecek bir derin bağlantı şeması tanımlamanız gerekir. tepki navigasyonu, şemayı tanımlamak için Bağlama modülü ve NavigationContainer gibi bileşenler sağlar. Şema tanımlandıktan sonra gelen derin linklerin işlenmesi için kullanılabilir. Gelen derin linkleri işlemek için Linking modülünün sağladığı addEventListner metodu yardımıyla bir callback fonksiyonu kaydetmeniz gerekmektedir. Uygulama derin bir bağlantı aracılığıyla başlatıldığında, geri arama işlevi çağrılır. Bu geri arama işlevi, uygulamada istenen ekranda gezinmek için kullanılabilir.

IoS ve Android'de Derin Bağlantıyı Yapılandırma

Bir mobil uygulamayı bir URL şemasıyla (benzersiz bir URL) yapılandırmanız gerekir. Bu URL şeması, kullanıcının akıllı telefon cihazında yüklü olan uygulamanın bulunmasından ve başlatılmasından sorumludur. Uygulamanın bir ekrana gitmesini sağlamak için, uygulamanın yapılandırıldığı URL şemasıyla eşleşen önekleri ayarlamanız gerekir. Ardından, ekranların uygulama içinde ilgili yollarıyla eşlenmesi gerekir. Yol URL'ye eklendiğinde, uygulama doğrudan belirli ekranlara gidebilir.

Derin bağlantıların yapılandırılması, iOS ve Android işletim sistemleri için biraz farklıdır. Profesyonel React Native geliştiricilerinin Android ve iOS için derin bağlantıyı nasıl uyguladığına bir göz atalım!

React Native Android Uygulamalarında Derin Bağlantıları Yapılandırma

Adım#1 Derin Bağlantıları Tanımlama

Manifest dosyasını açın ve uygulamanızda kullanmayı planladığınız derin bağlantıları tanımlayın, böylece kullanıcılar doğrudan uygulama içinde belirli bir sayfaya gidebilir. Burada, söz konusu sayfa için derin bir bağlantı tanımlamanız gerekir. AndroidManifest.xml dosyanızda bir derin bağlantıyı şu şekilde tanımlayabilirsiniz:
<aktivite

android:name=”.ProductActivity”

android:label=”Ürün”>

<amaç filtresi>

<action android:name=”android.intent.action.VIEW” />

<Android kategorisi:name=”android.intent.category.DEFAULT” />

<Android kategorisi:name=”android.intent.category.BROWSABLE” />

<veri

android:host=”example.com”

android:pathPrefix="/products"

android:scheme=”http” />

<veri

android:host=”example.com”

android:pathPrefix="/products"

android:scheme=”https” />

</intent-filter>

</aktivite>

Adım#2 Amaç Filtresini Yapılandırma

android/app/src/main adresine gidin ve oradan AndroidManifest.xml adlı dosyayı açın. Şimdi, her derin bağlantı için niyet filtresini yapılandırmanız gerekiyor. Niyet filtresi, uygulamanızın işleyebileceği veri miktarını ve eylemleri belirtir.

3. Adım Amaç İşleme

Uygulamanızın etkinliğindeki amacı ele almanız gerekir. Bu niyet, uygulamanızı derin bir bağlantıdan başlatacak. Amaç işleme için, niyetten veri çıkarmanız ve uygulamanızın içinde kullanıcıların yönlendirilmesini istediğiniz belirli konumu veya belirli ekranı belirlemeniz gerekir. Bundan sonra, projenizin Android öykünücüsünde yeniden oluşturulması gerekir.

React Native IOS Uygulamalarında Derin Bağlantıları Yapılandırma

Xcode'da URL türleri altında URL şemanızı kurun. 'AppDelegate' dosyasını değiştirin ve projeyi iOS öykünücüsünde yeniden oluşturun. Artık iOS projesi Xcode'da açılıyor.

Adım#1 URL Şemasını Tanımlama

Uygulamanız için özelleştirilmiş bir URL şeması tanımlayın. Bu URL şeması, uygulamanızın tanımlanması için benzersiz bir yoldur. Diğer web siteleri veya uygulamalar, uygulamanızı başlatmak için bu benzersiz tanımlayıcıyı kullanır.

info.plist dosyasını açın. Bu dosyanın üstüne yeni bir URL türü ekleyin. URL şeması, tanımlayıcı ve URL şemaları alanına girilebilir. Sonra öğe 0'ı (sıfır) genişletin, URL Şemaları'nı seçin ve öğe 0'ı adlandırın. Bu ad, uygulamanızın bağlanabileceği addır. Örneğin, uygulamanızın adı "BizimUygulamamız"dır. URL şeması "uygulamamız://" veya "uygulamamız://detail?id=123" gibi görünecektir.

Adım#2 Kod Uygulamasını Yönetme

Şimdi, derin bağlantıyı işleyecek kodu uygulamanız gerekiyor. 'AppDelegate' dosyasına gidin ve şemayı işlemek için bir yöntem ekleyin. Uygulamanız URL şeması aracılığıyla başlatıldığında; bu yöntem çağrılacak. URL bu yöntemle alınacaktır. Gerekli bilgiler URL'den çıkarılacak ve uygulamanızda doğru ekran görüntülenecektir.

3. Adım Test Etme

Şimdi, derin bağlantının test edilmesi gerekiyor. Bunun için Safari aracını veya derin bağlantı konseptini destekleyen herhangi bir üçüncü taraf uygulamasını kullanabilirsiniz. Örneğin, Safari kullanıyorsunuz. Safari'de tanımlanmış URL şemasına sahip URL'yi açın. Bundan sonra, uygulamanız doğru ekranla başlar.

Adım#4 Evrensel Bağlantı İşleme

Uygulamanız, özel URL şemaları eklemenin yanı sıra, uygulamanızı başlatmak için evrensel bağlantıları (diğer uygulamalar veya web siteleri tarafından kullanılan standart HTTPS bağlantıları) destekleyecek şekilde yapılandırılabilir. Evrensel bağlantıları bu şekilde ele almanız gerekir. Uygulamanızın yetkilerini yapılandırın. Ardından, evrensel bağlantı işleme için ilgili kodu oluşturun ve kodu uygulamanızın temsilcisine uygulayın.

Artık projenizi iOS simülatöründe yeniden oluşturabilirsiniz.

Son düşünceler

Umarım artık bağlantı kesme kavramı ve yürütme süreci konusunda bilgilisinizdir. Deep linking günümüz uygulamaları için bir zorunluluk haline gelmiştir. Ancak, derin bağlantı uygulama sürecini en yüksek profesyonel uzmanlıkla yürütmek önemlidir. Teknik uzmanlığa veya gerekli kaynaklara sahip değilseniz, deneyimli bir React Native Uygulama Geliştirme Şirketi, derin bağlantı oluşturma ve yürütme sürecini zahmetsizce tamamlamanıza yardımcı olabilir.