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.
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/appKemudian 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">Lalu pada file /android/settings.gradle tambahkan kode di bawah ini:
<intent-filter>
<action android:name="com.google.firebase.MESSAGING_EVENT" />
</intent-filter>
</service>
</application>
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:
4 Comments
ketika di push notif di firebase app langsung keluar
ReplyDeleteLibrary nya sudah di linking dengan benar belum?
Deletebang kalau kita pingin buat push notifikasi untuk spesifik user gmn?
ReplyDeletemisalkan kita sudah punya data akun member di server kita, nah push notifikasinya berdasarkan data member tersebut, mohon tutorialnya bang. makasih.
harus punya data token tiap user dulu, jadi setiap login register token, pas mau kirim get token
Delete