React-Native Firebase Android Push Notification

Merhabalar,

Bu yazımızda React-Native ile yazılmış bir uygulamaya firebase üzerinden push notification gönderimini öğreneceğiz. Konuya öncelikle yeni bir proje oluşturarak başlayalım.

react-native init pushNotificationExample

Projemizi oluşturduktan sonra https://firebase.google.com/ adresine gidiyoruz. Açılan sayfada Get Started butonuna tıklayarak uygulamamız için bir firebase projesi oluşturmaya başlıyoruz.

Karşımıza çıkan sayfada Proje Ekle butonuna tıklıyoruz. Sonrasında aşağıdaki gibi bir pop-up açılıyor. Burada Proje Adı yazıyoruz ve Analytics konumu seçiyoruz. Son olarak şartları da kabul edip Proje Oluştur butonuna basarak projemizi oluşturmuş oluyoruz.

Proje oluşturulduktan sonra karşımıza gelen ekran aşağıdaki gibidir.

Açılan sayfada önce sol menüden Cloud Messaging butonuna tıklıyoruz. Devamında da yine sayfanın sağ tarafından Android logosuna tıklıyoruz.

Bu adımdan sonra oluşturmuş olduğumuz React-Native uygulamasına geri dönüyoruz. Uygulamayı bir editör ile açıp /android/app/src/main/AndroidManifest.xml dosyasını açıyoruz ve burada paket adını kopyalıyoruz.

Kopyaladıktan sonra firebase tarafına tekrar dönüp projemizi eklemeye devam ediyoruz. Birinci adımda sadece az önce kopyalamış olduğumuz paket adını Android Paket Adı alanına yapıştırıp Uygulamayı Kaydet butonuna tıklıyoruz.

İkinci adımda bize oluşturmuş olduğumuz uygulama için bir yapılandırma dosyası veriyor. Bu yapılandırma dosyasını indirip /android/app klasörü altına kopyalıyoruz.

Dosyayı kopyaladıktan sonra uygulamamıza React-Native Firebase paketini eklememiz gerekiyor. Bunun için komut penceresinde uygulama klasörü açıkken sırasıyla aşağıdaki satırları çalıştırıyoruz.

npm install --save react-native-firebase 

react-native link react-native-firebase

Burada paketi ekledikten sonra bir de uygulamada bazı dosyalarda değişiklik yapmamız gerekiyor. Bu değişiklikler sırasıyla;

/android/app/src/main/java/com/pushnotificationexample dosyasındaki kütüphanelerin arasına

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;

ekliyoruz. Yine aynı dosya içerisinde getPackages bölümüne

new RNFirebasePackage(),
new RNFirebaseMessagingPackage()

satırlarını ekliyoruz. Yapılan değişikliklerin ekran görüntüsü aşağıdaki gibidir.

/android/settings.gradle dosyasına

include ':react-native-firebase'                       
project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android')

Son olarak /android/app/build.gradle dosyasına

implementation "com.google.firebase:firebase-messaging:17.3.4"

satırını ekliyoruz. Yine ekran görüntüsü aşağıdaki gibidir.

3. Adımda yukarıdaki pakete ek olarak bir de 2 dosyamızda değişiklik yapmamızı istiyor. Öncelikle

İlk verdiği satırı /Android/build.gradle dosyası içerisinde dependencies altına ekliyoruz.

Kalan 2 satırı ise /Anroid/App/build.gradle dosyasına ekliyoruz. Kalan 2 satırdan ilkini dependencies altına, ikincisini ise dosyanın en sonuna ekleyebilirsiniz. Ekran görüntüsü aşağıdaki gibidir.

Bu işlemleri de tamamladıktan sonra sonraki butonuna basıp gelen 4. adımda bu adımı atla diyebilirsiniz.

Bu adımı atladıktan sonra React-Native projemize tekrar geri dönüyoruz.

Projemiz root dizininde bulunan App.js dosyasını açıyoruz. Hemen react-native kütüphanesi altına firebase kütüphanemizi ekliyoruz. İlgili satır aşağıdaki gibidir.

import firebase from 'react-native-firebase'

Yine React-Native kütüphanesine AsyncStorage bileşenini de dahil ediyoruz. Sonrasında projemize aşağıdaki metodu ekliyoruz. Bu eklemiş olduğumuz metot ile kullanıcının Token bilgisini alacağız.

  async getToken() {
    let fcmToken = await AsyncStorage.getItem('fcmToken');
    console.log("before fcmToken: ", fcmToken);
    if (!fcmToken) {
      fcmToken = await firebase.messaging().getToken();
      if (fcmToken) {
        console.log("after fcmToken: ", fcmToken);
        await AsyncStorage.setItem('fcmToken', fcmToken);
      }
    }
  }

Yukarıdaki metodu kullanmak için öncelikle kullanıcıdan izin istememiz gerekiyor. İzin istemek için ise kullanmamız gereken metot aşağıdaki gibidir.

async requestPermission() {
    firebase.messaging().requestPermission()
      .then(() => {
        this.getToken();
      })
      .catch(error => {
        console.log('permission rejected');
      });
  }

Bu eklemiş olduğumuz iki metot öncesinde ise kullanıcının daha önce izin verip vermediğini kontrol etmek için aşağıdaki metodu kullanıyoruz.

  async checkPermission() {
    firebase.messaging().hasPermission()
      .then(enabled => {
        if (enabled) {
          console.log("Permission granted");
          this.getToken();
        } else {
          console.log("Request Permission");
          this.requestPermission();
        }
      });
  }

Eklemiş olduğumuz kod bloklarını sondan başa doğru tekrar açıklayacak olursak; Öncelikle son metot ile kullanıcının izin verip vermediğini kontrol ediyoruz. Eğer izin vermişse doğrudan kullanıcının token bilgisini alıyoruz. Eğer izin vermemiş ise 2. metot ile kullanıcıdan önce izin istiyoruz. Kullanıcı bu adımda izin verdiği taktirde tekrar kullanıcının token bilgisini alıyoruz. İzin vermediği taktirde ise işlemi burada kesmiş oluyoruz.

Tüm bu metotları tetiklemek için ise aşağıdaki bloğu ekliyoruz.

async componentDidMount() {
    this.checkPermission();
  }

Buradan sonra gönderim yapabilmek için uygulamayı bir cihaz üzerinde açıp token bilgisini almanız gerekiyor. Ben konuyla ilgili GenyMotion uygulamasını kullanıyorum. Yine daha önceki yazılarımızdan birinde Android studio ve Genymotion kullanımından bahsetmiştik. Kurmuş olduğumuz uygulamayı Genymotion aracılığı ile açıyoruz.

Burada önce sağ üst köşedeki Open GAPPS butonuna basarak sanal cihazımıza Google Play yüklüyoruz. Bu yükleme işlemi tamamlandıktan sonra sanal cihazımız bi kere yeniden başlıyor. Yeniden başlama işlemi tamamlandıktan sonra tekrar uygulamamızı açıp CTRL + M butonlarına basıyoruz. Yukarıdaki ekran görüntüsündeki menü açılıyor. Açılan menüden Debug JS Remotely seçeneğini işaretliyoruz. Sonrasında tarayıcıda http://10.0.3.2:8081/debugger-ui gibi bir link açılıyor. Bu linki http://localhost:8081/debugger-ui olarak güncelliyoruz. Şimdi uygulamamıza geri dönebiliriz. Uygulamamızı yeniden başlayıp tarayıcımıza geri dönüyoruz. F12 tuşuna basıp console sekmesine geldiğimiz zaman cihaza ait token bilgisini görüntüleyeceğiz.

Buradaki token bilgisini kopyalayıp Firebase tarafına geri dönüyoruz. Aşağıdaki butona tıklayarak ilk mesajımızı oluşturma ve gönderme işlemine başlıyoruz.

Açılan pencereden bildirim metnimizi girdikten sonra cihazda test edin butonuna basıyoruz. Az önce tarayıcıda görüntülediğimiz token bilgisini buraya yapıştırıyoruz.

Sonrasında diğer adımlarıdaki alanlarda herhangi bir değişiklik yapmadan işleme devam edebilirsiniz. Sadece 2. adımda uygulamanızı seçmeniz gerekiyor. Tüm adımları tamamladıktan sonra sanal cihazımıza aşağıdaki gibi bir bildirim gelecektir.

Eğer bildirim oluşturuken başlık alanını da girseydik yukarıdaki ekranda uygulama adı yerine de bildirim başlığı görünecekti.

Konuyla ilgili kodlara buradan ulaşabilirsiniz

Start the Discussion!

Your email address will not be published. Required fields are marked *