React Native Firebase Push Notification
Merhaba arkadaşlar, bu yazımda size React Native uygulamalarımızda nasıl bildirim gönderebiliriz bundan bahsedeceğim. Bunun için https://github.com/invertase/react-native-firebase kullanacağız. Dokümantasyona https://rnfirebase.io/messaging/usage adresinden ulaşabilirsiniz.
Gerekli Paketlerin Yüklenmesi
Projemizi oluşturduktan sonra Firebase içerisinde bulunan app ve messaging modüllerini projemize ekliyoruz.
yarn add @react-native-firebase/app
yarn add @react-native-firebase/messaging
cd ios && pod install && cd ..IOS Kurulumu
Eğer Xcode’da Singing&Capabilities sekmesinde Automatically Manage Signing işaretli değil ise, https://rnfirebase.io/messaging/usage/ios-setup#2-registering-an-app-identifier ‘deki adımları izleyerek provising profile dosyanızı oluşturabilirsiniz.
Projemizi Xcode ile açıyoruz ve proje target’ını seçiyoruz. Singing&Capabilities sekmesine gelerek, sol üstte bulunan +Capability butonuna tıklayarak;
- Push Notification
- Background Modes’u ekliyoruz. Background fetch ve Remote notifications seçeneklerini aktif hale getiriyoruz.
APNs (Apple Push Notification Service) Oluşturulması
Apple Developer hesabımıza giriyoruz . Certificates, IDs & Profiles içerisinde bulunan Keys sekmesinde Create A Key butonuna tıklayarak, Apple Push Notifications service seçeneğini seçerek yeni bir key oluşturuyoruz ve Continue -> Register -> Done dedikten sonra .p8 uzantılı key dosyasını indiriyoruz.
Firebase Console Proje Oluşturma
https://console.firebase.google.com adresinden Firebase Console’a giriş yaparak Create A Project diyerek projemizi oluşturuyoruz. Burada proje ismine dilediğiniz ismi verebilirsiniz. Ben kendi projeme Push Notification adını verdim. Sonraki ekranda Google Analytics etkinleştirmesini özellikle kapattım çünkü bu projede ihtiyacımız olmayacak. Başka bir yazımda ondan da bahsedeceğim.
Projemizi oluşturduktan sonra gelen ekranda ilk olarak IOS butonuna basarak IOS uygulamasını oluşturuyoruz.
IOS Uygulama Oluşturma
Açılan forma BundleID ve proje adını ekliyoruz, Register App e tıklayarak devam ediyoruz.
Burada dikkat etmemiz gereken konu, BundleID’nin bizim projemizle kesinlikle aynı olması.
GoogleService-Info.plist dosyasını indiriyoruz ve görseldeki gibi projemizin altına ekliyoruz.
Burada Copy items if needed seçeneğinin aktif olduğundan emin olun.
Console ekranına geri dönüp, Add Firebase SDK adımını atlıyorum, çünkü react-native-firebase paketi ile bunu zaten yaptık.
Get Çiğdem Güllü’s stories in your inbox
Join Medium for free to get updates from this writer.
4.adımdaki yönergeleri takip ederek, projemizin AppDelegate.m dosyasına kodları ekliyoruz.
Son adımı da tamamladıktan sonra Console ekranımıza geliyoruz ve oluşturduğumuz IOS projesinin üzerine tıklayarak proje ayarlarına gidiyoruz.
Proje ayarlarında, Could Messaging sekmesine gelerek , IOS app configurasyon bölümünden, developer hesabında oluşturduğumuz APNs key detaylarını buraya giriyoruz.
Burada APNs auth key kısmına indirdiğimiz .p8 uzantılı key dosyasını yüklüyoruz. Key ID kısmına, developer hesabında oluşturduğumuz Key’in detayında görebileceğiniz Key ID sini yazıyoruz. Team ID sini ise, developer sayfasında membership altında bulabilirsiniz. Upload butonuna tıklayarak configurasyonu bitiriyoruz.
Android Kurulumu
Console ekranına yeniden gelip, Add App diyerek bu kez projemize android uygulaması ekliyoruz.
Package name kısmına android/app/src/main içerisinde bulunan AndroidManifest.xml dosyasındaki package adını yazıyoruz ve Register App diyerek 2. adıma geçiyoruz.
google-service.json dosyasını indirerek, android/app/ klasörünün altına kopyalıyoruz. Next diyerek 3.adıma geçiyoruz.
Burada android/build.gradle dosyasına işaretlediğim kodları ekliyoruz. google() repositoryleri default olarak bulunmakta ancak siz yine de kontrol edin.
classpath 'com.google.gms:google-services:4.3.5'android/app/build.gradle dosyasına da aşağıdaki kodları ekliyoruz.
apply plugin: 'com.google.gms.google-services'
implementation platform('com.google.firebase:firebase-bom:27.0.0')
Next diyerek kurulumumuzu tamamlıyoruz. Kurulumlarımızı tamamladıktan sonra, packagerı kapatıp, uygulamaları tekrar çalıştırdıktan sonra sıra geldi, javascript tarafında bildirimlerimizi almaya.
Firebase.json Dosyası Oluşturma
Firebase.json, kullandığımız firebase modüllerinde yapacağımız configurasyonları tek bir dosya altında yönetebilmemizi sağlayan bir json dosyası.
https://rnfirebase.io/app/json-config adresinden detaylarını inceleyebilirsiniz.
Root path’de firebase.json dosyasını oluşturarak, içerisine aşağıdaki propertyi ekliyoruz.
{
“react-native”: {
“messaging_ios_auto_register_for_remote_messages”: true
}
}React Native Firebase Messaging, APNs ile IOS cihazlarda otomatik olarak eşleşiyor aslında. Eğer siz, bu eşleşmeyi manuel kontrol etmek isterseniz, yukarıdaki property’i false yapabilirsiniz.
Yukarıdaki property’nin default değeri true’dur. Burada firebase.json dosyasından bahsetmek için bu property’yi ekledim.
App.js dosyasını aşağıdaki şekilde düzenliyorum.
Burada ilk olarak, messaging().requestPermission() ile IOS icin kullanıcı izni istiyoruz. Android icin bu methodu çağırmamıza gerek yok, ancak yine de çağırmak isterseniz her zaman izin verildi olarak dönecektir.
messaging().getToken ile, Firebase’in cihaz için oluşturduğu unique token’ı çağırıyoruz. Bu sayede istediğimiz cihaza bildirim gönderebiliyoruz.
Firebase token expire olabiliyor. messaging().refreshToken() methodu ile, sisteminizde token’ı yenilemeniz gerekir.
Firebase Console Üzerinden Bildirim Gönderme
Tekrar Firebase Console ekranımıza gelerek oluşturduğumuz projeyi seçiyoruz ve sol menüde bulunan Cloud Messaging sekmesine gidiyoruz.
Send Your First Message’a tıklayarak yeni bildirim oluşturma ekranını açıyoruz . Bildirimimizin başlığını ve içeriğini yazıp, Send Test Message’ a tıklayarak, konsola yazdırdığımız token’ları buraya ekliyoruz.
Uygulamalarımızı arkaplana aldığımızda veya kapattığımızda , Test’e basarak bildirimlerimizi gönderiyoruz.
Elimden geldiğince detaylı ve herhangi bir adımı atlamadan anlatmaya çalıştım. Umarım faydalı bir yazı olmuştur.
Örnek kodları PushNotification adresinden indirip inceleyebilirsiniz. Herhangi bir sorunuz olursa, yorumlarda belirtebilirsiniz. Bir sonraki yazımda görüşmek üzere :)
