React Native Firebase Push Notification Kurulumu (iOS ve Android için)

javascriptreactfirebase

6 ay önce 6 yorum

Merhaba arkadaşlar uzun bir süredir bu makaleyi yazmam gerektiğini düşünüyordum ve yazma zamanı geldi. React Native üzerine Firebase Push Notification kurmak için react-native-fcm kullanmalıyız. Bunun kurulumu ve tüm yapmamız gereken dokümanında var ancak biz tüm adımları anlatacağız.

Bu konu şu başlıkları da kapsayabilir:
react native firebase push kullanımı, react native firebase push örneği, firebase push notification kullanımı/kurulumu, react native push notification türkçe

Firebase hesabına sahip olmak ve proje oluşturmak

İlk başta bu işlemi yapmalıyız eğer zaten bir google hesabına sahipseniz hemen firebase ile bir proje oluşturabilirsiniz. console.firebase.google.com adresine girip Proje Ekle seçeneğine tıklayınız.

image

Ardından Projemize isim verelim, ben "RNPushApp" verdim.

image

Projemiz oluştuğuna göre artık bildirim göndermek için uygulama oluşturmaya geçebiliriz. Bunun için Sol panelGROW > Could Messaging sekmesine girelim. 

image

Şimdi burada duralım çünkü henüz uygulamamız hazır değil. Hemen uygulamamızı hazırlayalım. Biz boş bir proje üzerinden anlatalım. O zaman...

React Native uygulaması oluşturup FCM bağımlılığını kuralım

Uygulamamızı oluşturalım:

$ react-native init RNPushApp
$ cd RNPushApp/

Ardından react-native-fcm kurulumunu yapalım:

$ npm i react-native-fcm --save

Son olarak da git'i kuralım. Bu isteğe bağlı sadece değiişklikleri takip etmek açısından çok kullanışlı oluyor.

$ git init
$ git add .
$ git commit -m "first commit."

Uygulamamız böylelikle artık geliştirmeye hazır. Şimdi App.js dosyamızı tamamen şöyle düzenleyelim:

import React, { Component } from 'react';
import {
    Platform,
    Text,
    View,
} from 'react-native';

import FCM, {
    FCMEvent,
    WillPresentNotificationResult,
    NotificationType,
} from "react-native-fcm";

export default class App extends Component {
    async componentWillMount() {
        // herhangi bir bildirim etkileşiminde çalışır
        FCM.on(FCMEvent.Notification, notif => {
            console.log("Bildirim geldi", notif);

            if(Platform.OS ==='ios' && notif._notificationType === NotificationType.WillPresent && !notif.local_notification){
                // Bu bildirim yalnızca kullanıcı ön planda ise bildirimi göstermek isteyip istemediğinize karar vermektir.
                // genellikle görmezden gelebilirsiniz. sadece göster/gösterme yapar.
                notif.finish(WillPresentNotificationResult.All)
                return;
            }
        });

        // eğer token yenilenirse çalışır
        FCM.on(FCMEvent.RefreshToken, token => {
            console.log("TOKEN YENİLENDİ (refreshUnsubscribe)", token);
        });

        // Uygulamaya Push atmak için izin alıyoruz
        try {
            let result = await FCM.requestPermissions({badge: false, sound: true, alert: true});
        } catch(e){
            console.error(e);
        }

        // Firebase Cloud Message Token değerini getirir.
        FCM.getFCMToken().then(token => {
            console.log("TOKEN (getFCMToken)", token);
        });

        if(Platform.OS === 'ios') {
            // Eğer APNS istiyorsanız isteğe bağlı APNS TOKEN
            FCM.getAPNSToken().then(token => {
                console.log("APNS TOKEN (getAPNSToken)", token);
            });
        }
    }

    render() {
        return (
            <View>
                <Text>
                    React Native Firebase Push Notification Kurulumu Uygulaması.
                    Daha fazla bilgi için: <Text style={{color: 'blue'}}>github.com/abdurrahmanekr/rnpushapp</Text>
                </Text>
            </View>
        );
    }
}

Çok basit bir şekilde uygulama componentWillMount oldunda Push'a dair her şey'i yapmış olduk.

Şimdi ise ios ve android kurulumunu ayrı ayrı anlatalım.

iOS üzerine Firebase Push Notification Kurulumu

Bunun için ilk yapmamız gereken FCM bağımlılığını XCode üzerinen uygulamamıza adreslemek. Bunun için şu komutu çalıştıralım:

$ react-native link react-native-fcm

libRNFIRMessaging.a kütüphanesi eklenirken sıkıntı çıkarabiliyor o yüzden bir de RNPushApp > Build Phases > Link Binary With Libraries menüsüne gelip libRNFIRMessaging.a kütüphanesini kaldırıp tekrar eklemek gerekli.

ekran resmi 2018-04-27 oo 12 21 04

Bağımlılık kurulumu bu kadardı. Şimdi uygulamanın bazı ayarlarını değiştirelim. Öncelikle uygulamamızda kullanılmayan target'ları kaldıralım. tvOS kullanmıyoruz onu test'i ile beraber kaldıralım.

ekran resmi 2018-04-27 oo 12 47 55

Eğer mac'inizde pod kurulu değilse brew install pod komutu ile kurabilirsiniz. ios dizinine geçelim ve pod tanımlayalım.

$ cd ios && pod init

Sonra oluşan Podfile dosyasına Firebase bağımlığını ekleyelim:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNPushApp' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for RNPushApp
  pod 'Firebase/Messaging' #buraya ekledik

  target 'RNPushAppTests' do
    inherit! :search_paths
    # Pods for testing
  end

end

Şimdi pod kütüphanelerini kurabiliriz. Bunun için şu komutu çalıştıralım:

$ pod install

Kurulum başarılı ise tekrar uygulamanın dizinine geçelim ve önceleri XCode üzerinde açık olan projemizi kapatıp onun yerine ios/RNPushApp.xcworkspace projesini açalım. Bundan sonraki tüm işlemlerinizi buradan yürütmelisiniz.

AppDelegate.h dosyasını düzenleyelim:

+ @import UserNotifications;
+
+ @interface AppDelegate : UIResponder <UIApplicationDelegate,UNUserNotificationCenterDelegate>
- @interface AppDelegate : UIResponder <UIApplicationDelegate>

Ve tabii ki AppDelegate.m dosyasını da şu şekilde düzenleyelim:

+ #import "RNFIRMessaging.h"
  //...

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
  //...
+   [FIRApp configure];
+   [[UNUserNotificationCenter currentNotificationCenter] setDelegate:self];

    return YES;
 }

+
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
+ {
+   [RNFIRMessaging willPresentNotification:notification withCompletionHandler:completionHandler];
+ }
+
+ #if defined(__IPHONE_11_0)
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #else
+ - (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void(^)())completionHandler
+ {
+   [RNFIRMessaging didReceiveNotificationResponse:response withCompletionHandler:completionHandler];
+ }
+ #endif
+
+ //You can skip this method if you don't want to use local notification
+ -(void)application:(UIApplication *)application didReceiveLocalNotification:(UILocalNotification *)notification {
+   [RNFIRMessaging didReceiveLocalNotification:notification];
+ }
+
+ - (void)application:(UIApplication *)application didReceiveRemoteNotification:(nonnull NSDictionary *)userInfo fetchCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler{
+   [RNFIRMessaging didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
+ }

Buraya kadar herşey yolunda ise o zaman uygulamamızın erişimlerini düzenleyelim. Push Notification ve Background Modes içindeki Remote notifications açık olmalı. 

image

image

Önemli ayarlamalar da bitti. Öncelikle uygulamızın id'sini belirleyelim. com.rnpushapp olsun.

Tabi sizin bu id'niz apple geliştirici hesabınızda kayıtlı olması gerekiyor onun gibi bu konudan bağımsız işlemleri çoktan hallettiniz diye düşünerek anlatıyorum. Eğer bir sertifika veya uygulama id'si oluşturmadıysanız. Oluşturduktan sonra tekrar bu adımdan devam ediniz.

Uygulamızı bağlamak için firebase üzerinde ios uygulaması oluşturalım. O menüye geri gelelim. 

Gerekli id isim vs. alanları dolduralım.

ekran resmi 2018-04-27 oo 1 26 47

Sonraki adımda bize bir plist dosyasını projemize dahil etmemiz gerektiğini söylüyor bu dosyayı verdiği talimattaki gibi yerine getirelim. Dosyayı ios/GoogleService-Info.plist olarak koplayadıktan sonra XCode'a sürükleyip bırakınız. 

ekran resmi 2018-04-27 oo 1 27 57

2. adımı da yerine getirdiysek diğer adımları atlayabiliriz çünkü o adımları çoktan yaptık. Push'u test etmek için yapılması gereken birşey de ios development push sertifikanızın olması ve dışarıya p12 sertifikası çıkarabilmeniz. Bu sertifikayı Proje ayarlarıCloud Messaging > iOS uygulama yapılandırması > APNs Sertifikaları > Geliştirme APNs sertifikası bölmesinden yükleyebilirsiniz. (Not: Uygulamayı yayınlamak istiyorsanız üretim sertifikasını da yüklemelisiniz) Yüklediğinizde bir geliştirme sertifikanız olduğunu görmelisiniz.

image

Şimdi uygulamanızı gerçek bir iOS cihaz üzerine çalıştırmalısınız. Çalıştırdığımızda artık push atılabilir bir duruma gelmesi gerekiyor. Bunu anlamak için cihazı sallayalım ve açılan penceredeki Debug JS Remotely seçeneğine tıklayarak geliştirici penceresini açalım. Sonra console.log ile yazdırdığımız FCM değerini görelim:

image

Şimdi uygulamamıza Test olarak Push Notification atmak için Yine Cloud Messaging menüsüne gelelim ve "İlk Mesajınızı Gönderin" seçeneğine tıklayalım. Gerekli alanları aşağıdaki gibi dolduralım (FCM kayıt jetonu yerine console'a yazılan TOKEN değerini koplayadık):

image

Mesajı Gönder > Gönder ile komutu verelim. (Not: bu işlemleri yaparken uygulama çalışır durumda ve arkaplanda olmalı)

Ver artık Push Notification bizlere göründü:

b4308f6e-606a-4b53-a884-3c6fa8034da9

Böylelikle iOS üzerine yapmamız gereken tüm işleri halletmiş olduk. Sıra androidde :)

Android üzerine Firebase Push Notification Kurulumu

İlk önce fcm bağımlılığını android'e adresleyelim.

$ react-native link react-native-fcm

android/build.gradle dosyasında şu değişiklikleri yapalım:

  dependencies {
    classpath 'com.android.tools.build:gradle:2.0.0'
+   classpath 'com.google.gms:google-services:3.0.0'

android/app/build.gradle dosyasının en altına şu komutu ekleyelim:

apply plugin: 'com.google.gms.google-services'

android/app/src/main/AndroidManifest.xml Dosyasında şu düzenlemeleri yapalım:

  <application
    ...
    android:theme="@style/AppTheme">

+    <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>

+   <service android:name="com.evollu.react.fcm.MessagingService" android:enabled="true" android:exported="true">
+     <intent-filter>
+       <action android:name="com.google.firebase.MESSAGING_EVENT"/>
+     </intent-filter>
+   </service>

+   <service android:name="com.evollu.react.fcm.InstanceIdService" android:exported="false">
+     <intent-filter>
+       <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
+     </intent-filter>
+   </service>

    ...

Buraya yazdığımız @mipmap/ic_notif değerine dikkat edin uygulamamızda bu dosyaları arayacaktır. Bulamazsa uygulamamız derlenemez o yüzden isteğe bağlı olarak bu bildirim ikonu değiştirme işlemini yapmayabilirsiniz. 

Kullanmak istemiyorsanız yazdığımız şu değeri siliniz.

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/ic_notif"/>

Eğer kullanmak istiyorsanız android/app/src/main/res dizinindeki yerlere ic_notif ikonlarını tek tek eklemelisiniz. İkonları kendinize göre özelleştirebilirsiniz veya buradan kopyalayabilirsiniz.

Sonra android/app/build.gradle dosyasına react-native-fcm bağımlılığını ekleyelim:

 dependencies {
+    compile project(':react-native-fcm')
+    compile 'com.google.firebase:firebase-core:10.0.1' //this decides your firebase SDK version
+    compile 'com.google.firebase:firebase-messaging:10.0.1'
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
 }

android/app/src/main/java/com/<proje adı>/MainActivity.java dosyasını şu şekilde düzenleyelim:

+ import android.content.Intent;
...
public class MainActivity extends ReactActivity {
+ @Override
+    public void onNewIntent(Intent intent) {
+        super.onNewIntent(intent);
+        setIntent(intent);
+    }
}

Bildirime tıklama işlemini yapılandırmak için AndroidManifest.xml dosyasını şu şekilde düzenleyelim (bunu neden yapıyoruz?):

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:windowSoftInputMode="adjustResize"
+   android:launchMode="singleTop"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />
      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>

Android uygulamanın bildirimleri için izinleri

İzinleri eklemek için AndroidManifest.xml dosyasında şu değişiklikleri yapalım:

  <uses-permission android:name="android.permission.INTERNET" />
+ <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
+ <uses-permission android:name="android.permission.VIBRATE" />

  <application>
+      <receiver android:name="com.evollu.react.fcm.FIRLocalMessagingPublisher"/>
+      <receiver android:enabled="true" android:exported="true"  android:name="com.evollu.react.fcm.FIRSystemBootEventReceiver">
+          <intent-filter>
+              <action android:name="android.intent.action.BOOT_COMPLETED"/>
+              <action android:name="android.intent.action.QUICKBOOT_POWERON"/>
+              <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/>
+              <category android:name="android.intent.category.DEFAULT" />
+          </intent-filter>
+      </receiver>
  </application>

Firebase üzerinde Android uygulama oluşturma

Anasayfaya gelelim ve başka bir uygulama ekleme butonuna tıklayıp android'i seçelim.

image

Sonra uygulama id'sini ve adını yazalım

image

Sonra bizden verdiği dosyayı indirelim onu android/app dizinine atalım.

image

2. adımda tamamsa diğer adımları atlayabiliriz çünkü zaten halihazırdalar. 

Şimdi derleme aşamasına geçebiliriz.

Derlemeden önce birşeyden bahsedelim. android/build.gradle dosyasına google-services adında bir bağımlılık ekledik. Eğer bu bağımlılık sizin bilgisayarınızda yüklü olmazsa derleme başarısız olacaktır. O yüzden SDK Manager > SDK Tools açarak Support Repository> Google Repository değerini seçelim eğer güncelleme istiyorsa güncelleyelim.

image

Derlemek için android dizinine geçip gradlew komutunu çalıştıralım.

$ cd android && ./gradlew assemble

Herşey yolunda ise android/app/build/outputs/apk/app-debug.apk olarak oluşan dosyayı bir android cihaza yükleyelim. Uygulamayı yükleyince çalışan webpack-dev-server bulamayacağı için bir hata ile karşılaşabilirsiniz. Bunun için telefonu sallayın ve Dev Settings > Debug server host & port for device seçeneğine basın ve bilgisayarınızı ip'sini yazın (tabi bilgisayarınızda npm start ile projeyi yayına açmanız gerekiyor).

Uygulamamız eğer yayınlandıysa iOS'a yaptığımız gibi Debug modunda açalım ve console'a yazılan TOKEN (getFCMToken) değerini alıp aynı ios'a Cloud Messaging üzerinden gönderelim.

image
Kulaklarım falan görünüyor ama olsun :) Bildirimimiz geldi.

screenshot_2018-04-27-12-00-18-372

Yapmamız gerekenler bu kadardı. Siz FCM dokümanından daha çok bilgi elde edebilirsiniz. 

Bu Projenin Dosyaları

github.com/abdurrahmanekr/rnpushapp

Destekçiler ve iOS Hesabı

Detaysoft

Kaynaklar

React Native Firebase Cloud Messaging Eklentisi
github.com/evollu/react-native-fcm

Firebase ile ilgili tüm dokümanlar
firebase.google.com/docs

@mipmap/ic_notif ile iligi çıkan sorunun çözümü
github.com/evollu/react-native-fcm/issues/84

Could not find com.google.firebase:firebase-core:9.0.0 sorununun çözümü
github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/106

Yorumlar ({{totalCommentCount}})

  • tufan çağkan sökmen

    {{commentLike82Count}} beğenme 6 ay önce

    öncelikle bu türkçe kaynak için çok teşekkürler. burada merak ettiğim hususu sormak istiyorum; veritabanımda bazı işlemler gerçekleştiğinde (örneğin bir teste ait sonuç, admin tarafından girildiğinde) notification göndermek istiyorum. haliyle bu notificationı, yalnızca belirli bir kullanıcıma göndermek istiyorum. buradaki filtrelemeyi nasıl yapabiliyoruz? yani "yalnızca X id'sine sahip kullanıcıya bu notificationı gönder" ayrımını nasıl gerçekleştiriyoruz? kullanıcı, app kapalıyken bile bu bildirimi nasıl alabiliyor?
    Beğen Beğendin
  • Hasan

    {{commentLike83Count}} beğenme 6 ay önce

    hocam bunu bende merak ediyorum. Firestoreda misal uid ile birlikte mesajlari tutuyorum. firestorea yeni mesaj eklenince push notification ile nasil mesaj geldigini uidsi olan kisiye gosterecegim. Ve program acik olmasi lazim arkaplanda yazmissiniz. Kapaliyken bildirimi nasil alabiliriz?
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike84Count}} beğenme 5 ay önce

    Merhabalar sanırsam iki soru da aynı nitelikte. Sadece belirli bir kişiye push göndermek için gerekli olan sistemi makalede anlattım. Oraya token girerek sadece o kullanıcıya push atabilirsiniz. Sunucudan atmak için ise bu dokümanı kullanabilirsiniz https://firebase.google.com/docs/cloud-messaging/admin/legacy-fcm. Telefon kapalıyken de push gelir fakat ben debug atarken demek istemiştim. Yani kapalıyken push gelir bir sorun olmaz. Ben burada daha çok kurulumu anlatmak istedim firebase'e ait özellikleri diğer kaynaklardan takip etmenizi tavsiye ediyorum.
    Beğen Beğendin
  • Batu

    {{commentLike86Count}} beğenme 3 ay önce

    Selamlar, Eline saglik son derece guzel bir rehber olmus. Ancak unutulan bir kisim var eklemek isterim: Android icin SDK kurulumu yaparken Mainapplication.java dosyasina da import com.evollu.react.fcm.FIRMessagingPackage; seklinde import yapip, getPackages() fonksiyonunda return Arrays.<ReactPackage>asList( new MainReactPackage(), new FIRMessagingPackage() ); seklinde FIRMessagingPackage donmek gerekiyor. Bunun haricinde paket guncellemeleri yeterli. Firebase dokumanlarinda da mevcut. Tekrardan elinize saglik.
    Beğen Beğendin
  • Abdurrahman Eker

    {{commentLike87Count}} beğenme 3 ay önce

    Merhabalar, react-native link react-native-fcm komutu otomatik şekilde ekliyor ancak bazı paketlerde bu işi yapmadığından dolayı kendiniz eklemeniz gerekebiliyor. Bilgi için teşekkür ederim.
    Beğen Beğendin
  • Necmettin Çimen

    {{commentLike94Count}} beğenme 5 gün önce

    Hocam teşekkürler elinize sağlık :)
    Beğen Beğendin
  • Düşündüklerin nedir ?

    Abdurrahman Eker

    (1010 Eylül 11111001100)

  • Full Stack Developer at Detaysoft Turkey/Sivas
  • İnternette Avare Kodcu
  • github
  • linkedin
  • youtube
  • Yeni içeriklerden haberdar olmak ister misin ?