FIREBASE İLE DYNAMIC LINK KULLANIMI

Bu yazı aracılığıyla, sizlere Firebase Dynamic Links servisini uygulamalarınızda nasıl kullanabileceğinizi görsellerle birlikte anlatacağım.

Firebase, Google’ın kullanıcılarına uygulamalarını geliştirmeleri, iyileştirmeleri için sunduğu bir ortamdır. Firebase’in uygulama geliştiricileri için sunduğu birçok servis vardır. Dynamic Links bunlardan biridir.

Dynamic Links, uygulamanızdaki bir içeriğin kullanıcıdan kullanıcıya paylaşımı veya içeriğin kullanılan cihaza göre en iyi şekilde görüntülenebilmesi gibi birçok alanda kullanılabilir. Firebase Dynamic Links ile oluşturulan linkin uygulama içinde açılması sağlanabilir ya da uygulamanız kullanıcının telefonunda yüklü değilse bu linkin bulunduğu platforma bağlı olarak uygulama marketinde indirme sayfası açabilir. Ek olarak bu link bir masaüstü tarayıcısında açılırsa web sitenizdeki ilişkili içeriğe yönlendirir. Ayrıca Dynamic Links’in Google Analitik üstünden takibi yapılabilir ve sosyal medya üstünden yapılan paylaşımlarda linkinizle beraber başlık, açıklama ve fotoğraf koyulabilir.

Şimdi sizlere Dynamic linkin nasıl oluşturulduğunun adımlarını göstereceğim. İlk olarak buraya tıklayarak projenizi oluşturun ve açılan sayfada projenizi adlandırın.

Projenize isim verdikten sonra devam edip projenizi oluşturabilirsiniz. Projeyi oluşturduktan sonra açılan ilk sayfada projenizi hangi ortam/ortamlar -IOS veya Android- için geliştirecekseniz ona uygun butonu seçip devam edin.

Uygulamayı IOS için oluşturuyorsanız Bundle Id ve bir isim girmeniz gerekiyor. Bundle id bulmak için uygulamanız ios\Runner.xcodeproj klasörünün içinde project.pbxproj dosyasını açıp PRODUCT_BUNDLE_IDENTIFIER aratıp bulabilirsiniz.

Android için de package name ve isim girmeniz gerekiyor. Package name’i bulmak için uygulamanızın \android\app\src\main klasörünün içinde AndroidManifest.xml dosyasının içinde en üstte package=com.company.appname şeklinde bir kod olacaktır.

Projeleri oluşturduktan sonraki ekran böyle gözükecektir.

IOS veya Android butonlarına tıkladıktan sonra aşağıdaki ekranlara geçiş olacaktır.

Android uygulamaları için Dynamic Link oluşturulması:

IOS uygulamaları için Dynamic Link oluşturulması:

Firebase’de projenizi ve uygulamalarınızı oluşturduktan sonra Android için google-services.json ve iOS için googleservice-info.plist dosyalarını; Android için /android/app klasörünün içine, IOS için /ios/Runner klasörünün içine atmayı unutmayın.

Daha sonra sol tarafta bulunan Dynamic Links kısmına girip başlayın.

Firebase kullanıcılarına *.page.link alan adıyla ücretsiz alan sağlıyor fakat dilerseniz kendi alan adınızı da kullanabilirsiniz.

Alan adınızı seçtikten sonra devam edip bitirin.

Uygulamanızda pubspec.yaml dosyasını açıp firebase_core ve firebase_dynamic_links paketlerini ekleyin. package_info paketini de dilerseniz ekleyebilirsiniz fakat zorunlu değil.

Daha sonra Firebase’i uygulamanızda kullanabilmek için main.dart dosyasında main bloğunun içine RunApp() fonksiyonundan önce

WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();

kodlarını ekleyin.

Gist

Bu uygulamada rastgele bir renk kodu oluşturup linkin içine parametre olarak ekleyin. Paylaşılan link açıldığında uygulamada bu oluşturulan rengi içeren bir sayfa açılacak. Önce fonksiyonumuzu oluşturalım.

Future<String> createDynamicLink() async {
}

daha sonra firebase_dynamic_linking paketinden DynamicLinkParameters objesini oluşturalım.

Future<String> createDynamicLink() async {
final DynamicLinkParameters parameters = DynamicLinkParameters(uriPrefix: "", link: Uri());
}

uriPrefix ve link parametreleri zorunlu parametreler.

uriPrefix alanı daha önce Firebase üzerinde oluşturduğumuz *.page.link ile başlayan adres, link ise paylaşımını yapacağımız url (istediğiniz adresi kullanabilirsiniz).

Future<String> createDynamicLink() async {
String dynamicLinkUriPrefix = "https://ogzatutorial.page.link/";
String randomColor = Random().nextInt(0xffffffff).toString();
String url = "$dynamicLinkUriPrefix?color=$randomColor";
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: dynamicLinkUriPrefix,
link: Uri.parse(url),
);
}

Rastgele bir tane renk kodu oluşturun ve bu renk kodunu linke ?color=$randomColor “query string” olarak ekleyin.

Aslında link oluşturmak için her şeye sahipsiniz fakat uygulamanız kullanıcıda kurulu değilse bulunduğu platformun uygulama marketindeki sayfasını açtırabilirsiniz.

Bu işlem için androidParameters ve iosParameters parametrelerini aşağıda gösterildiği gibi eklemeniz gerekiyor. Android tarafı için gereken parametrelerde paket adı ve minimum uygulama versiyonu yazabilirsiniz, iOS tarafında ise bunlara ek olarak appStoreId de girebilirsiniz. Burada paket adını elle yazmak yerine package_info paketini kullandım, dilerseniz elle yazabilirsiniz.

Future<String> createDynamicLink() async {
String dynamicLinkUriPrefix = "https://ogzatutorial.page.link/";
String randomColor = Random().nextInt(0xffffffff).toString();
String url = "$dynamicLinkUriPrefix?color=$randomColor";
PackageInfo packageInfo = await PackageInfo.fromPlatform();
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: dynamicLinkUriPrefix,
link: Uri.parse(url),
androidParameters: AndroidParameters(
packageName: packageInfo.packageName,
minimumVersion: 1,
),
iosParameters: IosParameters(
bundleId: packageInfo.packageName,
minimumVersion: '1.0.1',
appStoreId: '123456789',
),
);
}

Daha önce bahsettiğim gibi Google Analytics ve ITunes Connect üstünden oluşturulan link hakkında bilgi alabilmek için googleAnalyticsParameters ve itunesConnectAnalyticsParameters parametrelerini kullanabilirsiniz. GoogleAnalyticsParameters class’ı içinde campaign, content, medium, source ve term parametereleri mevcut. ItunesConnectAnalyticsParameters class’ı içinde affiliateToken, campaignToken ve providerToken parametreleri mevcut.

Future<String> createDynamicLink() async {
String dynamicLinkUriPrefix = "https://ogzatutorial.page.link/";
String randomColor = Random().nextInt(0xffffffff).toString();
String url = "$dynamicLinkUriPrefix?color=$randomColor";
PackageInfo packageInfo = await PackageInfo.fromPlatform();
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: dynamicLinkUriPrefix,
link: Uri.parse(url),
androidParameters: AndroidParameters(
packageName: packageInfo.packageName,
minimumVersion: 1,
),
iosParameters: IosParameters(
bundleId: packageInfo.packageName,
minimumVersion: '1.0.1',
appStoreId: '123456789',
),
googleAnalyticsParameters: GoogleAnalyticsParameters(
campaign: 'example',
medium: 'social',
source: 'app',
),
itunesConnectAnalyticsParameters: ItunesConnectAnalyticsParameters(
providerToken: '123456',
campaignToken: 'example',
),
);
}

Son olarak sosyal medyalarda paylaşılan linkin, tıklanmadan içeriğinin görünmesi için socialMetaTagParameters parametresini kullanabilirsiniz. Örneğin aşağıdaki şekilde linki oluşturduğunuzda ve bu linki Whatsapp veya Instagram gibi sosyal medya uygulamaları üzerinden birine gönderdiğinizde Seçtiğimiz fotoğraf, Deneme başlığı ve Bu bir denemedir şeklinde bir açıklamayla gözükecektir.

Future<String> createDynamicLink() async {
String dynamicLinkUriPrefix = "https://ogzatutorial.page.link/";
String randomColor = Random().nextInt(0xffffffff).toString();
String url = "$dynamicLinkUriPrefix?color=$randomColor";
PackageInfo packageInfo = await PackageInfo.fromPlatform();
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: dynamicLinkUriPrefix,
link: Uri.parse(url),
androidParameters: AndroidParameters(
packageName: packageInfo.packageName,
minimumVersion: 1,
),
iosParameters: IosParameters(
bundleId: packageInfo.packageName,
minimumVersion: '1.0.1',
appStoreId: '123456789',
),
googleAnalyticsParameters: GoogleAnalyticsParameters(
campaign: 'example',
medium: 'social',
source: 'app',
),
itunesConnectAnalyticsParameters: ItunesConnectAnalyticsParameters(
providerToken: '123456',
campaignToken: 'example',
),
socialMetaTagParameters: SocialMetaTagParameters(
title: 'Deneme',
description: 'Bu bir denemedir!',
imageUrl: Uri.parse("https://ogzatech.com/tr/img/core-img/logo.png"),
),
);
}

DynamicLinkParameters objemizi tanımladık bundan sonra geriye sadece linki oluşturmak kalıyor. Uzun bir link oluşturmak isterseniz buildUrl fonksiyonunu çağırabilir, daha kısa bir link oluşturmak isterseniz buildShortLink fonksiyonunu kullanabilirsiniz.

Gist

Future<String> createDynamicLink() async {
String dynamicLinkUriPrefix = "https://ogzatutorial.page.link/";
String randomColor = Random().nextInt(0xffffffff).toString();
String url = "$dynamicLinkUriPrefix?color=$randomColor";
PackageInfo packageInfo = await PackageInfo.fromPlatform();
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: dynamicLinkUriPrefix,
link: Uri.parse(url),
androidParameters: AndroidParameters(
packageName: packageInfo.packageName,
minimumVersion: 1,
),
iosParameters: IosParameters(
bundleId: packageInfo.packageName,
minimumVersion: '1.0.1',
appStoreId: '123456789',
),
googleAnalyticsParameters: GoogleAnalyticsParameters(
campaign: 'example',
medium: 'social',
source: 'app',
),
itunesConnectAnalyticsParameters: ItunesConnectAnalyticsParameters(
providerToken: '123456',
campaignToken: 'example',
),
socialMetaTagParameters: SocialMetaTagParameters(
title: 'Deneme',
description: 'Bu bir denemedir!',
imageUrl: Uri.parse("https://ogzatech.com/tr/img/core-img/logo.png"),
),
);
final Uri dynamicUrl = await parameters.buildUrl();
final ShortDynamicLink shortenedLink = await parameters.buildShortLink();
print("Full: ${dynamicUrl.toString()} Short:${shortenedLink.shortUrl}");
return shortenedLink.shortUrl.toString();
}

Böylelikle link oluşturulmuş oldu. Bu linki uygulamanızda bir buton aracılığıyla çağırıp, debug console’dan oluşan linki alabilirsiniz. Bu linke tıkladıktan sonra uygulama içerisinde açılmasını dilediğiniz işlevi yapmasını isteyebilirsiniz.

Örneğin initDynamicLinks adında bir fonksiyon tanımlayalım ve bu fonksiyonu initState fonksiyonu içerisinde çağıralım.

Bu fonksiyonun içinde FirebaseDynamicLinks.instance.onLink() listener’ını ve FirebaseDynamicLinks.instance.getInitialLink() fonksiyonlarını kullanacağız.

Listener olan uygulama aktif olarak çalışıyorken link geldiğinde bize bildirecek, getInitialLink fonksiyonu ise uygulama açık değilken, açıldığında bize linki bildirecek.

İlk olarak listener’dan başlayalım.

void initDynamicLinks() async {
FirebaseDynamicLinks.instance.onLink(
onSuccess: (PendingDynamicLinkData dynamicLink) async {
final Uri deepLink = dynamicLink?.link;
if (deepLink != null) {
var deepLinkPath = deepLink.path;
var deepLinkQueryParameters = deepLink.queryParameters;
}
}, onError: (OnLinkErrorException e) async {
print('onLinkError');
print(e.message);
});
}

deepLink eğer null değilse deepLinkPath bize gelen url’i verecek, deepLinkQueryParameters ise bizlere query stringleri verecek.

Biz linkimizi oluştururken color querysini eklemiştik. Bu color’ı alıp Color objesine çevirip yeni bir sayfada açacağız.

Önce yeni sayfamızı oluşturalım. Bu sayfa içinde bir Scaffold içine appBar ve body’nin içine de bir Text ekliyorum. Scaffold’un backgroundColor’ını linkten gelen renk yapacağım.

Gist

import 'package:flutter/material.dart';
class DynamicPage extends StatelessWidget {
final Color backgroundColor;
const DynamicPage({Key key, @required this.backgroundColor})
: super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: backgroundColor,
appBar: AppBar(
backgroundColor: backgroundColor,
title: Text(
"Başlık",
style: Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.white),
),
),
body: Center(
child: Text(
"${backgroundColor.toString()}",
style: TextStyle(color: Colors.white),
),
),
);
}
}

İkinci sayfamızı oluşturduktan sonra artık sona yaklaşıyoruz.

Hem uygulama açıkken hem de açık değilken ikisinde de ortak kodlar kullanacağız. Bunları ayrı bir fonksiyonda da yapabiliriz.

parseColorAndNavigate diye bir fonksiyon daha oluşturalım ve bu fonksiyon içinde linkten aldığım deepLinkQueryParameters’ı kullanalım. Bu bir map olduğu için containsKey fonksiyonu ile “color” keyinin içeride olup olmadığını kontrol edelim, eğer içerisinde bulduysak önce bunu int’e çevirip sonra Color objesi oluşturalım. Daha sonra oluşturduğumuz sayfaya Navigator.push ile gidelim.

Gist

void initDynamicLinks() async {
FirebaseDynamicLinks.instance.onLink(
onSuccess: (PendingDynamicLinkData dynamicLink) async {
final Uri deepLink = dynamicLink?.link;
if (deepLink != null) {
var deepLinkPath = deepLink.path;
var deepLinkQueryParameters = deepLink.queryParameters;
parseColorAndNavigate(deepLinkQueryParameters);
}
}, onError: (OnLinkErrorException e) async {
print('onLinkError');
print(e.message);
});
}
void parseColorAndNavigate(Map<String, String> deepLinkQueryParameters) {
if (deepLinkQueryParameters.containsKey("color")) {
String colorStringValue = deepLinkQueryParameters["color"].toString();
try {
int colorIntegerValue = int.tryParse(colorStringValue);
Color color = Color(colorIntegerValue);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DynamicPage(backgroundColor: color),
),
);
} catch (e) {
print("Integer parsing hata.");
}
}
}

Uygulama açıkken linki alıp diğer sayfaya geçirme işlemini tamamladık. Şimdi uygulamanın kapalı olması durumunda açıldığında oluşacak kısmı ekleyelim.

FirebaseDynamicLinks.instance.getInitialLink fonksiyonunu çağırıp kontrolünü yaptıktan sonra parseColorAndNavigate fonksiyonunu kullanacağız.

Gist

void initDynamicLinks() async {
FirebaseDynamicLinks.instance.onLink(
onSuccess: (PendingDynamicLinkData dynamicLink) async {
final Uri deepLink = dynamicLink?.link;
if (deepLink != null) {
var deepLinkPath = deepLink.path;
var deepLinkQueryParameters = deepLink.queryParameters;
parseColorAndNavigate(deepLinkQueryParameters);
}
}, onError: (OnLinkErrorException e) async {
print('onLinkError');
print(e.message);
});
final PendingDynamicLinkData data =
await FirebaseDynamicLinks.instance.getInitialLink();
final Uri deepLink = data?.link;
if (deepLink != null) {
var deepLinkPath = deepLink.path;
var deepLinkQueryParameters = deepLink.queryParameters;
parseColorAndNavigate(deepLinkQueryParameters);
}
}

Yukarıda belirtilen adımları sırasıyla takip ettiğinizde başarılı bir şekilde Dynamic Link oluşturmuş olacaksınız.

Kolay gelsin!

Eğer kodları tek bir sayfada görüntülemek isterseniz aşağıdaki bağlantılara tıklayabilirsiniz.

Hazır main dosyası için buraya tıklayabilirsiniz.

Dynamic page dosyası için buraya tıklayabilirsiniz.