Flutter’da Deep Links ve Universal Links
Android işletim sistemine ait linklerden biri olan Deep links, web sitemiz veya bir mobil uygulamamızda kullanıcıyı spesifik bir sayfaya yönlendirmek için kullandığımız bir url’dir. Bir deep links’e tıkladığımızda o linke ait bir mobil uygulama yoksa deep links bizi web sitesine yönlendirdiği gibi uygulama marketine de yönlendirebilir. Şayet linkin bir mobil uygulaması var ise bize uygulamada mı açmak istediğimizi ya da web sitesinde mi açmak istediğimizi soran bir linktir.
Burada bahsetmiş olduğum Deep links, Deep link ile aynı şeyler olmayıp deep link daha genel kavram olup sadece Android’e özgü değildir.
iOS işletim sistemine ait linklerden biri olan Universal links, deep links’e benzese de linke tıklandığında uygulama yüklü ise uygulamayı doğrudan açması ve uygulama yükle değilse safariyi açması ile farklılık gösterir.
Peki bu iki link Flutter’da nasıl kullanılır ?
Bu yazıda kullanacak olduğumuz paketler
Paketlerimizi pubspec.yaml dosyasına ekliyoruz.
Uygulamamızda deep links’i kullanabilmemiz için gerekeli olan konfigürasyon android/app/src/main/AndroidManifest.xml dosyasındaki activity kısmına aşağıdaki gibi intent-filter eklememiz gerekmektedir.
<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="[YOUR_SCHEME]"
android:host="[YOUR_HOST]"
android:pathPrefix="[YOUR_PATH]" />
</intent-filter>Burada örnek olarak scheme olan kısma https, host olan kısma sitenize ait domain bilgisini www.your-domain.com, pathPrefix kısmına ise domaininizden sonra gitmesini istediğiniz path’i /your-path veriyoruz.
<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="www.your-domain.com"
android:pathPrefix="/your-path" />
</intent-filter>Bu örnek, uygulama yüklüyse uygulamada mı açacağı ya da websitesinde mi açacağı, yüklü değilse de websitesinde açtığı bir örnektir. Markete yönlendirme işlemini yapabilmeniz için ekstra şeyler yapılması gerekmektedir. Ayrıca scheme olarak sadece https var lakin dilerseniz custom scheme olarak da kullanabilirsiniz. Böylelikle siteniz olmayıp mobil uygulamanız olması halinde de kullanabilirsiniz. ( Örnek: myapp://some_path?key=value)
Deep links için gerekli konfigürasyon bu kadardı. Birden fazla deep links yapmak isterseniz de data tag’inin altına farklı bir data tag’i ekleyebilirsiniz.
Universal links için ise başlangıçta apple account’u gerekmektedir.
Uygulamamızın ios dosyasını xcode ile açıyoruz. Ardından projemiz seçili bir şekilde Signing & Capabilities’e tıklıyoruz.
Sonra + Capability’e tıklıyoruz ve Associated Domains seçiyoruz.
Uygulamamıza Associated Domains eklendikten sonra
+ butonuna basarak yeni bir associated domain oluşturuyoruz. Burda universal links kullanacağımız için başlangıç kısmına applinks yazıyor ve . koyup sitemizin domain adresini yazıyoruz.
Burda www subdomain’i kullanıyorsanız onu da buraya yazmanız gerekmektedir
Apple developer kısmında işimiz bitti. Şimdi son olarak web sitemizin barındığı sunucunun ana dizinine aşağıdaki dosyanın yüklenmesi gerekmektedir.
Öncellikle “apple-app-site-association” adında bir dosya açıyoruz. Dosyayı açtıktan sonra içine aşağıdakı gibi olacak şekilde dolduruyoruz.
Burda “appID” kısmına 2 değer girmelisiniz.
1. Sizin Apple team id
2. Uygulamanıza ait bundle id“paths” kısmında ise domainizin hangi pathler ile girilirse uygulama açılsın kararını veriyoruz.
Örneğin paths: [“/new-blog”] girilirse sadece your-domain.com/new-blog içeren linkler mobil uygulamayı açacaktır. Yukarıdaki gibi * verirseniz ise bütün pathler uygulamayı açabilir.
Dosyanın herhangi bir uzantısı olmamasına ve dosyaya verilen ismin apple-app-site-association olmasına dikkat edilmelidir.
Universal links için gerekli konfigürasyon bu kadardı.
Şimdi Flutter tarafında deep links veya universal links’e tıklandığında yapılması gerekenler.
Öncellikle lib klasörünün içine bir cubit klasörü açıp deep_link_cubit.dart ve deep_link_state.dart dosyalarını oluşturuyoruz.
Ardından gelen linklere göre uygulamamızdaki hangi ekrana gideceğine karar vermek için gerekli stateleri oluşturuyoruz.
Ben gerçek hayatta ilişkili olması adına product screen ile chat screen statelerine karar verdim.
Şimdi ise uygulamaya deep links veya universal links ile gelindiğinde veya uygulama çalışıyorken gelindiğindeki durumları kontrol etmek için deep_link_cubit.dart’da initUniLinks metodunu yazmaya.
Uygulama ilk çalışmaya başladığında anda bu metodu çağırıyoruz. Şayet uygulama kapalıyken uygulamayı tetikleyecek bir linke basıldığında getInitialLink methodu ile yakalıyor. Ardından state’de değişiklik yapıyoruz ya da uygulama arkanda planda çalışıyorken stream ile dinleyip yeni bir link geldiğinde tekrardan state’de değişiklik yapıyoruz.
Şimdi son aşama olan uygulama çalışmaya başlandığında bu fonksiyonu çağırmak ve gerekli stateleri yazıp ui tarafında değişiklikleri ekrana yansıtmak.
Uygulama açıldığında deep links ve universal links’i yakalayabilmek için initUniLinks metodunu çağırıyoruz. Herhangi iki linkten biri ile gelirse BlocListener ile dinliyip state göre ilgili sayfaya navigate ediyoruz.
Faydalı olur umarım, okuduğunuz için teşekkürler. Sorularınızı LinkedIn üzerinden yazabilirsiniz.
Uygulamanın kaynak kodlarına aşağıdaki linkten ulaşabilirsiniz.
