Firebase Cloud Messaging (FCM) adalah salahsatu fitur yang disediakan oleh Google Firebase, FCM sendiri sekarang menjadi salah satu Push Notification yang paling banyak digunakan oleh perusahaan-perusahaan besar. Kenapa pakai FCM, jawabannya adalaha FCM saat ini masih gratis untuk digunakan seacara unlimited, dokumentasi yang jelas serta komunitas yang mendukung. Di tutorial ini kita menggunakn Library React Native terbaru dan Firebase gradle terbaru.

https://www.konsepkoding.com/2020/04/tutorial-push-notification-firebase.html
Push Notification Firebase Cloud Messaging React Native V6
Pada tutorial Konsep Koding kali ini akan kita belajar bersama mengenai Push Notification di React Native menggunakan FCM. 


Apa Yang Dibutuhkan?

1. Text Editor (VScode, Sublime dll)
2. Sudah Setup React Native di PC
3. Android Stuido + SDK
4. Xcode jika inginrunning di iOS
5. Akun Firebase

Apa Yang Akan Kita Pelajari?

1. Instalasi Dan Setup Firebase
2. Membuat Akun Firebase
3. Koding Firebase react Native

Memulai Koding Dan Setup

Ok Pertama kamu harus memiliki akaun google terlebih dahulu, setelah itu silahkan kunjungin consile firebase untuk membuat project baru di : https://console.firebase.google.com/ setelah itu buat sebuah project baru firebase .

Fcm React Native 
Fcm React Native 



Fcm React Native 

Jika berhasil kamu bisa masuk ke dalam dashboard Firebase seperti gambar di bawah ini:



Kemudian pada tulisan Get started by adding Firebase to your app pilih Icon android dan isi form seperti gambar di bawah ini oh ya sebelumnya pastikan kamu telah membuat project react native dengan perintah npx react-native init rn_konsepkoding



Catatan penting:
1. package name kamu bisa melihatnya di bagian AndroidManifest.xml
2. App Nickname tereserah kamu namanya

Setelah itu download google-services.json taruh di folder android/app seperti gambar di bawah ini :



Konfigurasi Gradle Project

Ubah file android/build.gradle  menjadi seperti kode di bawah ini:
buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
    }
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.4.2")
        // Tambahkan ini
        classpath 'com.google.gms:google-services:4.3.3'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
Lalu ubah file andorid/app/build.gradle menjadi seperti kode di bawah ini:

apply plugin: 'com.android.application'
// Add this line
apply plugin: 'com.google.gms.google-services'
dependencies {
  // add the Firebase SDK for Google Analytics
  implementation 'com.google.firebase:firebase-analytics:17.2.2'
  // add SDKs for any other desired Firebase products
  // https://firebase.google.com/docs/android/setup#available-libraries
}

Setelah itu run project kita : npx react-native run-android  jika berhasil akan seperti gambar di bawah ini :

Setup Library

Buka terminal kamu, pastikan sudah di root project aplikasi dan jalankan perintah di bawah ini :
npm install --save @react-native-firebase/app
Kemudian install messaging module

npm i @react-native-firebase/messaging 

Setelah itu di android/app/build.gradle tambahkan library android firebase seperti kode di bawah ini:
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    implementation 'com.google.firebase:firebase-analytics:17.2.2'
    // Tambahkan ini untuk messaging
    implementation project(path: ":@react-native-firebase_messaging")

Kemudian pada AndroidManifest.xml tambahka permision di bawah ini :
 
 <!-- Tambahkan ini -->
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <uses-permission android:name="android.permission.VIBRATE" /> 

Lalu tambahkan kode ini di AndroidManifest.xml untuk event dari firebase kita

<application ...>
  ...
<service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
    <intent-filter>
      <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
  </service>
</application>
Lalu pada file /android/settings.gradle tambahkan kode di bawah ini:
include ':@react-native-firebase_messaging'
project(':@react-native-firebase_messaging').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/messaging/android')

Setelah itu untuk memastikan silahkan run lagi project anda, untuk memastikan sudah berhasil dan tidak ada error lagi.

Kemudian ini kode React Native nya yang berfungsi untuk menerima notifkasi aplikasi dari FCM, pada file App.js ubah kode nya  menjadi seperti kode di bawah ini :


Setelah itu run kembali projeck kamu dan silahkan ke firebase console dibagian Cloud Messaging. Silahkan kirim push notification anda:



Kemudian setelah itu silahkan klik Publish  dan jika kamu berhasil mengikuti langkah-langkah di atas maka aplikasi project yang kamu buat akan seperti gambar di bawah ini:


Sekian semoga Tutorial Push Notification Firebase Cloud Messaging React Native V6 dapat bermanfaat dan membantu kamu yang sedang setup FCM terbaru dari React Native, kamu bisa melihat dokumentasinya disini.

Baca Tutorial Lainnya: