#2 Flutter & Firebase Tutorial: Implementasi Firebase Dynamic Link pada Flutter
Cara mudah menerapkan firebase dynamic link pada projek flutter
Hello Sobat…
Pada Story kali ini, sesui janji saya, kali ini saya akan mengulik lebih dalam lagi tentang apa saja service yang dimiliki oleh firebase dan bagaimana cara menerapkannya di flutter. Bagi anda yang baru mencoba menggunakan firebase di flutter, anda bisa membaca story saya sebelumnya yang membahas bagaimana cara menghubungkan flutter projek dengan firebase services.
Kita mulai dengan berkenalan dengan dynamic link dulu yaa..
Apa itu Dynamic Link ?
Mungkin ada diantara kalian yang baru mendengar istilah ini dan mulai bertanya-tanya tentang apa dan manfaat dari dynamic link.
Sepemahaman saya dynamic link adalah mekanisme untuk kita bisa saling bertukar informasi antar platform berupa link yang berisi data. Data tersebut diandroid dan ios disebut deep link yang akan memungkinkan link yang kita tekan membuka otomatis halaman pada aplikasi yang dituju oleh link tersebut. CMIIW
Sebagi contoh penerapan dynamic link yang umum digunakan adalah ketika kita melakukan share product detail. Ketika kita share suatu product, kita akan mendapatkan suatu link yang bisa dibagikan ke berbagai sosial media yang kita miliki. Benar ? Dan ketika ada orang yang membuka link tersebut di smartphone yang mereka miliki entah Ios / Android. Link tersebut akan secara otomatis membuka halaman suatu aplikasi yang dituju apabila kita telah diinstalnya.
Terus apa yang terjadi jika tidak mengistall aplikasi tersebut ? Otomatis link tersebut akan mengarahkannya ke store masing-masing sesuai dengan sistem operasinya. Android akan mengarahkan ke Play Store dan Ios akan mengarahkan ke App Store. Hebatnya lagi ketika orang lain membuka link tersebut didekstop link tersebut akan mengarahkan ke link website yang di share tadi.
Itulah penjelasan singkat dari firebase dynamic link. Sebelum memulai menerapkan dynamic link pada flutter kita perlu menambahkan domain dynamic link pada firebase console. Domain ini bisa berupa alamat website anda atau kita bisa emakai domain yang disediakan oleh firebasenya sendiri.
Lanjut…
Langkah-langkah Membuat Domain Dynamic Link pada Firebase Console
1. Buka Firebase console kemudian pilih menu dynamic link pada side bar dan tekan button mulai untuk membuat domain dynamic link baru.
2. Tambahkan domain anda, apabila tidak mempunyai domain maka pilih domain yang disediakan oleh google.
3. Pastikan nama domain sudah benar dan klik button lanjutkan.
4. Apabila telah selesai menambahkan domain maka dashboard Dynamic Link anda akan tampil seperti gambar di bawah ini.
Yapp! kita telah menambahkan domain baru untuk dynamic link. Langkah berikutnya kita lanjutkan ke contoh penerapannya di fluter ya. Pastikan terlebih dahulu sobat telah membuat project flutter yang telah disambungkan dengan firebase.
Sediakan snack dan coffee dulu jika perlu hehe.
Implementasi Firebase Dynamic Link pada Flutter
1. Langkah Pertama kita perlu menambahkan dependencies baru pada file pubsec.yaml yaitu share dan firebase_dynamic_link. Kemudian jalankan perintah pub get.
firebase_dynamic_links: ^0.5.0+11
share: ^0.6.5+42. Buat class baru bernama ShareUtil kelas ini didalamnya nanti akan bersisi fungsi share yang digunakan untuk mekanisme share sebuah link pada Android dan Ios.
Didalam class ShareUtil saya buat static fuction dengan nama shareWithSubject. Fungsi tersebut mempunyai parameter context, subject dan content. Fungsi ini digunakan untuk melakukan share link content yang di tambahkan subject di dalamnya.
3. Buat class baru bernama DynamicLinkService. Pada class ini nantinya berisi semua fungsi yang berhubungan dengan dynamic link.
Di dalam class DynamicLinkService saya buat fungsi bernama createDynamicLinkForProduct dengan parameter isShortLink dan idProduct. Parameter isShortLink apabila berisi true maka akan generate link yang pendek sedangkan apabila berisi false akan generate link apa adanya atau panjang. Nanti akan saya tunjukan perbedaanya pada saat melakukan pengujian.
Didalam fungsi tersebut ada beberapa hal yang perlu diperhatikan. yaitu pertama kita harus membuat dynamic link parameter yang bersi di dalamnya uri prefix, link, android parameter dan ios parameter.
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: 'https://galangaji.page.link',
link: Uri.parse('https://galangaji.page.link.com/product/$idProduct'),
androidParameters: AndroidParameters(
packageName: 'com.galangaji.firebase_test_app',
minimumVersion: 1,
),
iosParameters: IosParameters(
bundleId: 'com.galangaji.firebaseTestApp',
minimumVersion: '1',
appStoreId: 'your_app_store_id',
),
);Uri prefix: merupakan domain dynamic link yang kita tambahkan di firebase console tadi.
Link : merupakan link yang ingin kita bagi kan, pada contoh kode diatas saya tambahkan path link yang berupa id dari product yang kita bagikan.
Android Parameter berisi package name dan minimum version dari aplikasi android kita. Untuk informasi package name dapat ditemukan di folder android -> app -> src -> main -> AndroidManifest.xml
Ios Parameter berisi bundle id , versi minimum dan app store id yang kita miliki. Untuk bundle id dapat menemukan informasi tersebut di folder ios -> Runner.xcodeproj -> project.pbxproj. Cari kata kunci dengan nama PRODUCT_BUNDLE_IDENTIFIER.
Setelah itu kita bisa mulai membuat dynamic link. Caranya adalah dengan menuliskan code dibawah ini.
//short link
Uri dynamicUrl;
if (isShortLink) {
final ShortDynamicLink shortDynamicLink =
await parameters.buildShortLink();
dynamicUrl = shortDynamicLink.shortUrl;
} else {
dynamicUrl = await parameters.buildUrl();
}apabila isShortLink bernilai true maka dynamic link akan di buildShortLink tetapi apabila bernilai false akan di buildUrl biasa.
4. Mulai menerapkan code pada main.dart
Di bawah ini merupakan code yang saya terapkan untuk membuat dynamic link dan melakukan share di dalam tampilan pada flutter.
Yang perlu diperhatikan adalah pertama saya membuat objek dari class DynamicLinkService.
DynamicLinkService _dynamicLinkService = DynamicLinkService();Kemudian untuk mendapatkan linknya saya menggunakan future builder. Sehingga apabila dynamic link tersebut telah siap digunkan maka floating action button akan ditampilkan. Apabila kita klik floating action button maka action sharing akan ditampilkan dan pengguna bebas melakukan share ke berbagi media sosial yang mereka miliki.
floatingActionButton: FutureBuilder<Uri>(
future: _dynamicLinkService.createDynamicLinkForProduct(true, "12345"),
builder: (context, snapshot) {
if (snapshot.hasData) {
return FloatingActionButton(
onPressed: () {
ShareUtil.shareWithSubject(
context, "Product Link", snapshot.data.toString());
},
tooltip: 'Share',
child: Icon(Icons.share),
);
} else {
return Container();
}
},
)Yeay, saatnya kita testing!
Kita telah sampai ke penghujung tulisan untuk mencobanya apakah berhasil atau tidak, silakan langsung jalankan di real device atau emulator. Hasilnya akan kurang lebih tampilan seperti gambar dibawah ini. Jika Dilihat dengan lebih teliti, url yang dihasilkan dengan short link akan lebih pendek dari pada tidak menggunkan short link.
Semoga story yang aya tuliskan pada kali ini bermanfaat. Pada story berikutnya saya akan mencoba untuk menuliskan cara yang saya gunakan untuk menghadle dynamic link pada flutter. Sehingga nantinya apabila kita melakukan klik pada link yang kita share tadi aplikasi kita akan merespon dengan membuka halaman sesesuai yang dituju oleh link tersebut.
Sampai jumpa pada story berikutnya :)
Happy Learning !
