React Native üzerinde iOS ve Android uygulamalarına “Firebase Push Notifications” Entegrasyonu
Herkese merhabalar! Umarım her şey yolundadır. İlk ve son yazım üzerinden uzun zaman geçmesine rağmen bu konuda sorun yaşayan birçok kişi olduğunu görünce, Firebase ile hem iOS hem de Android’de Push Notification’ları uygulamamıza nasıl entegre edebileceğimizi detaylı bir şekilde açıklamak istedim, zira takip edilmesi gereken oldukça adım var ve bazı noktalar atlanabiliyor.
Lafı fazla uzatmadan hemen yeni RN projemizi oluşturalım:
npx react-native init RnFirebasePushNotificationsExample/cd RnFirebasePushNotificationsExampleyarn add @react-native-firebase/app @react-native-firebase/messagingcd ..ios/ && pod install
Tüm bu yüklemelerden sonra, uygulamamızın hem iOS hem de Android üzerinde sorunsuz çalışıp çalışmadığını görüntüleyelim. RnFirebasePushNotificationsExample klasöründe:
yarn ios
yarn androidGörüldüğü üzere her iki platformda da uygulamamız sorunsuz çalışmakta:
Sonraki adım ise Firebase Console’da iOS ve Android uygulamamızı oluşturmak. Öncelikle, https://console.firebase.google.com/u/0/ adresine gidelim. “Proje Ekle” butonuna tıklayıp sonraki ekranda proje ismini girelim. Ben “firebase-push-notification-ex” olarak girdim. Devam deyip ikinci ekrana geçtikten sonra ise bu ekranın alt kısmında “Bu proje için Google Analytics’i etkinleştirin” butonunu kapattım çünkü bize şu anki senaryomuzda gerekli olmayacak. Son olarak, tekrar devam deyip kurulumu tamamlayalım.
Yukarıdaki kurulumu tamamladıktan sonra, Firebase sizi aşağıdaki ekrana yönlendirecek, eğer siz de kurulumu tamamladıysanız ve sorun yoksa, devam edelim.
Bundan sonraki adımda, sırasıyla iOS ve Android kurulumlarını yapacağız.
iOS İçin Gerekli Kurulumlar
Öncelikle, yukarıdaki görselden görebileceğiniz ve “Firebase’i uygulamanıza ekleyerek başlayın” yazısının altında, en soldaki iOS logosuna tıklayarak başlayalım. Sonraki kurulum ekranında, zorunlu olarak girmemiz gereken “iOS paket kimliğini” bulabilmek için proje klasörümüzde, ios alt klasörünün altındaki RnFirebasePushNotificationsExample.xcworkspace dosyasını XCode ile açıyoruz.
Proje açıldıktan sonra “General” sekmesinde, “Bundler identifier” alanındaki değeri Firebase Console’ında “iOS paket kimliği” kutucuğuna girip, “Uygulamayı kaydet” diyoruz.
Sonraki adımda, “GoogleService-Info.plist dosyasını indir” butonuna tıklayıp ilgili dosyayı indirdikten sonra, XCode’de proje klasörümüze -görselde görülen konuma” aktarıyoruz. (Aktarırken XCode’de karşımıza çıkan ekranda, “Copy items if needed” kutusunun işaretli olduğuna emin olun.)
Dosyayı projemize aktardıktan sonra, tekrar Firebase Console’a dönüyoruz ve “Sonraki” butonuna tıklayarak bir sonraki adıma geçiyoruz. “Firebase SDK ekleyin” adımında da “Sonraki” butonuna tıklayıp ilerliyoruz, çünkü biz bu kurulumu daha öncesinde yaptık.
“İlk kullanıma hazırlama kodu ekleyin” adımında ise, projemizin /ios/RnFirebasePushNotificationsExample/AppDelegate.m dosyasını XCode ile açıp Firebase Console’da gösterildiği gibi düzenliyoruz.
“Sonraki” deyip ilerliyoruz ve gelen adımda ise “Konsola geç” diyoruz.
Tekrar XCode’a dönüp aşağıdaki görseli takip ederek, “Signing & Capabilities” sekmesine geliyoruz.
Sonrasında, +Capability butonuna tıklıyoruz ve açılan pencereden “Push Notifications”u seçip, ekliyoruz.
Ek olarak yine +Capability’e tıklayarak, Background Modes’ı seçiyoruz ve ekliyoruz.
Son olarak, aşağıdaki gösterimi takip ederek, “Background Modes” altından, “Background fetch” ve “Remote notifications” seçeneğini seçiyoruz.
Sonrasında, Apple Developer Account’unuza giriş yapıp https://developer.apple.com/account/resources/authkeys/list adresine gidiyoruz. Buradan + butonuna basıyoruz ve açılan ekrandaki formu aşağıdaki gibi doldurduktan sonra “Continue” deyip devam ediyor ve keyimizin kayıt işlemini bitiriyoruz.
Kayıt işlemi bittikten sonra aşağıdaki ekrana yönlendirileceksiniz. Bu ekranda, Download’a tıklayıp APNS key’ini indiriyor, ve Key ID’yi kopyalıyoruz.
Tekrardan Firebase Console’a dönüyoruz. “Proje ayarları” seçeneğine tıklayıp açılan ekranda“Cloud Messaging” sekmesine giriyoruz.
Sonrasında, aşağıdaki görseli takip ederek önceki adımda indirdiğiniz dosyayı upload ediyor, ve Key ID’yi görülen forma giriyoruz.
Eğer XCode’a Apple Developer hesabınız ile giriş yaptıysanız ve aşağıdaki görülen pencerede, “Automatically manage signing” seçeneği işaretli ise, bundan sonraki adımları XCode sizin için yapacaktır. Android için kurulum adımına geçebilirsiniz.
Eğer işaretli değil veya XCode’a Apple Developer hesabınız ile giriş yapmadıysanız, devam edelim.
Sonrasında, https://developer.apple.com/account/resources/identifiers/list adresine gidiyoruz ve uygulamamız için bir identifier eklemek için + butonuna basıyoruz. Gelen ekranda en üstteki “App IDs” seçeneğini seçip Continue dedikten sonra gelen formu aşağıdaki görselde görüldüğü gibi dolduruyoruz.
Uygulamamıza dair bir açıklamayı “Description” alanına, daha önce XCode’den kopyaladığımız Bundle ID’yi ise (bizim senaryomuzda org.reactjs.native.example.RnFirebasePushNotificationsExample idi) Bundle ID kutusuna giriyoruz. Son olarak, aşağıdaki “Capabilities” kısmından, “Push Notifications”u da işaretleyip “Continue” diyoruz.
Bu işlemi de tamamladıktan sonra, https://developer.apple.com/account/resources/profiles/list adresine gidiyoruz ve yine + butonuna basıyoruz. Açılan ekrandan “iOS App Development” seçeneğini seçip Continue diyoruz. Yine gelen ekrandaki (aşağıda da görülen ekran) App ID menüsünden, şu an üzerinde çalışmakta olduğunuz uygulamayı (Bizim senaryomuzda RnFirebasePushNotificationsExample) seçip Continue diyoruz.
Son olarak, gelen ekrandan adınız ve parantez içinde “iOS Development” yazan seçeneği, aşağıda görüldüğü üzere seçip Continue diyoruz.
Sonraki ekranda, sahip olduğunuz sertifikalar (certificates) listelenecektir. Bunlar arasından, daha öncesinde oluşturduğunuz ve bir üst adımda oluşturduğumuz Provisioning Profile’i atamak istediğiniz sertifikayı seçmeniz gerekiyor. (Eğer daha önce sertifika oluşturmadıysanız, buradaki rehberi takip edip bir “certificate signing request”, yani “sertifika imzalama isteği” oluşturup, bunu indirip, buraya yüklemeniz gerekmekte.)
Ek olarak, oluşturduğunuz Provisioning Profile’ı indirip bir yere kaydedelim.
Son olarak (gerçekten son), XCode’da aşağıdaki pencereye gidip oluşturduğunuz ve indirdiğiniz Provisioning Profile’ı “Import Profile” seçeneği ile XCode’a yüklemelisiniz.
Böylelikle iOS için kurulumumuzu tamamladık. Herhangi bir sorun olup olmadığını test etmek için uygulamamızı çalıştıralım.
yarn iosEğer sorun yoksa, Android için kurulum adımlarına geçebiliriz.
Android İçin Gerekli Kurulumlar
İlk olarak, tekrardan Firebase Console’a gidip aşağıdaki gibi Android uygulamızı ekleme sayfasına gidiyoruz.
Sonrasında, proje klasörümüzden /android/app/src/main/AndroidManifest.xml yolundaki dosyayı açıyor, ve “manifest” etiketindeki paket adını kopyalıyoruz (Aşağıdaki görselde de görebilirsiniz.)
Sonrasıda yine Firebase Console’a gidip bu paket adını aşağıdaki gibi forma girip, yapılandırma dosyasını indiriyoruz.
Sonrasında, bu dosyayı (google-services.json), /android/app/ yoluna kopyalıyoruz.
Sonra, /android/build.gradle dosyasına classpath 'com.google.gms:google-services:4.2.0' satırını, aşağıdaki görülen şekilde ekliyoruz.
Son olarak ise, /android/app/build.gradle dosyasının en alt kısmına, apply plugin: 'com.google.gms.google-services' satırını ekliyoruz.
Her iki platform için de entegrasyonlarımızı bitirdiğimize göre, artık JavaScript tarafına geçebiliriz.
Her iki uygulamanın da bildirim alabilmesi için, kayıt edilmeleri ve kullanıcıdan bildirim izni almaları gerekiyor. Bu kayıt ve izin isteği işlemi için ekleyeceğimiz ve aşağıdaki gösterdiğim kodu, uygulamanın giriş dosyası, yani App.js’e eklemek ise tavsiye edilen yöntem.
import messaging from '@react-native-firebase/messaging'; //App.js'e messaging'i import ediyoruz.useEffect(async () => {await messaging().registerDeviceForRemoteMessages();await messaging().requestPermission();console.log(await messaging().getToken())}, [])
İlgili kodu App.js component’ımıza ekledikten sonra, öncelikle yarn ios komutu ile iOS uygulamamızı çalıştırıyoruz.
Gördüğünüz üzere, eklediğimiz kod itibariyle uygulama kullanıcıdan bildirim gönderebilmek içi izin istiyor. Sizde de aynı senaryonun geçerli olması gerekmekte.
Sonrasında, terminali açıyor ve işaretlediğim token’ı bir yere kopyalıyoruz.
Sonrasında, yarn android komutu ile Android uygulamamızı çalıştırıyoruz. Bu işlemden sonra terminalde yine yukarıdaki gibi ikinci bir token gözükecek, bunu da kopyalayıp bir yere kaydediyoruz.
Sonrasında, Firebase Console’a gidiyor ve ilk test bildirimimizi aşağıdaki görseli takip ederek gönderiyoruz. (Bu işlemi gerçekleştirebilmek için aşağıda da göreceğiniz üzere, yukarıda kopyaladığınız iki adet token’ı kopyalayıp ilgili kısımlara yapıştıracaksınız.)
Token’ları da açılan pencereye ekledikten sonra, “Test et” butonuna tıklıyoruz. Bu aşamada eğer tüm adımları takip ettiyseniz, her iki cihazda da bildirimleri görebilmeniz gerekiyor. (Emülatörlerde)
Gerçek cihazlara ise Firebase Console’ında yine “Console Messaging” başlığı altından push notifications gönderebilirsiniz.
PS: Bu yazıyı yazarken bazı noktalarda https://rnfirebase.io/ dökümanındaki görselleri kullandım.
Eğer ki yazımdaki adımları dikkatle takip etmenize rağmen hala sorunla karşılaşıyorsanız yorumlarda belirtebilir, veya benimle aşağıdaki kanallardan iletişime geçebilirsiniz.
(Özellikle iOS tarafında problem yaşayanlar, Apple Developer Account üzerinde yaptığımız değişikliklere çok dikkat etmeliler, genelde sorunlar buradaki bir kurulumu -certificates, provisioning profiles v.s- eksik yapmaktan kaynaklanıyor.)
Kaynak koduna buradan:
Bana ise şuradan ulaşabilirsiniz:
Yazı ile ilgili geri bildirim, yaşadığınız sorun veya gördüğünüz bir problem var ise bana her zaman iletebilirsiniz.
Gününüz güzel geçsin! :)
