Panduan Mengirim Notifikasi Push React Native Android
Panduan ini akan mengajarkan Anda cara menggunakan Parse untuk mengirim notifikasi push ke aplikasi React Native Anda di Android. Anda akan mengatur Firebase dan mengonfigurasi aplikasi Back4App Anda untuk mengirimnya melalui dasbor dan fungsi Cloud Code.
Kapan saja, Anda dapat mengakses Proyek Android lengkap yang dibangun dengan tutorial ini di repositori Github kami
Untuk menyelesaikan tutorial ini, Anda akan membutuhkan:
- Sebuah akun aktif di Google, sehingga Anda dapat menggunakan Google Firebase.
Kirim notifikasi push dari Parse ke aplikasi React Native di Android, menggunakan dasbor Back4App dan fungsi Cloud Code.
Firebase adalah penyedia layanan yang paling banyak digunakan untuk mengirim dan menerima notifikasi push di Android. Ini digunakan oleh berbagai perusahaan saat ini, bersama dengan berbagai alat lainnya. Mari kita mulai dengan membuat proyek Firebase untuk aplikasi Anda mengikuti langkah 1 dan 2 dari dokumentasi ini.
Setelah membuat aplikasi Anda dan sebelum keluar dari konsol Firebase, pastikan untuk mengunduh dan menyimpan file google-services.json dan juga pergi ke pengaturan proyek, di tab “Cloud Messaging” dan ambil kunci berikut:
- Kunci server;
- ID Pengirim.

Untuk menghubungkan Proyek Firebase Anda dengan Back4App dan mengaktifkan pengiriman notifikasi push melalui Dasbor dan Kode Cloud Anda, ikuti langkah-langkah berikut:
- Temukan blok “Notifikasi push Android” dan klik pada PENGATURAN > EDIT. Blok “Notifikasi push Android” terlihat seperti ini:

3. Tambahkan Kunci Server Firebase keKunci API dan ID Pengirim keID Pengirim GCM.

4. Simpan dan Anda selesai.
Pada proyek React Native Anda, mari kita instal react-native-push-notification pustaka, yang akan mengintegrasikan aplikasi dengan Firebase dan memungkinkan Anda untuk menangani notifikasi yang diterima. Jalankan perintah berikut di direktori root proyek Anda:
Setelah menginstalnya, Anda masih perlu menambahkan beberapa konfigurasi ke android/app/src/main/AndroidManifest.xml, android/build.gradle dan android/app/build.gradle mengikuti pustaka dokumen.
Pastikan juga untuk menambahkan di AndroidManifest.xml file sebuah meta-data yang berisi id saluran notifikasi default untuk aplikasi Anda (mari kita gunakan guideChannel sebagai contoh kita). Anda dapat menambahkan nama langsung ke direktif atau menyertakannya dalam strings.xml file. Juga, tempatkan file google-services.json proyek Anda di android/app direktori.
Pada langkah berikutnya, kita akan belajar bagaimana menggunakan pustaka ini dan menggabungkannya dengan Parse.
Mari kita buat file dengan metode baru terkait dengan notifikasi push yang disebut PushNotificationMethods.js (atau PushNotificationMethods.tsx) dan tambahkan fungsi berikut, yang bertanggung jawab untuk menginisialisasi react-native-push-notification, membuat saluran notifikasi, dan juga mengatur Parse untuk mengenali konfigurasi push perangkat kita:
Dokumentasi Sumber Terbuka Informasi lebih lanjut tentang Parse.Installation dapat ditemukan di sini.
Perhatikan bahwa pengendali acara onNotification memiliki kode yang memicu notifikasi lokal di aplikasi setelah menerima notifikasi jarak jauh. Parse memerlukan kode ini karena Firebase tidak memicu notifikasi popup dengan data sendiri. Lebih lanjut tentang itu dan jenis notifikasi Android dapat dibaca di sini.
Panggil metode configurePushNotifications ini di App.js Anda (atau App.tsx) setelah menginisialisasi Parse dan sebelum mendeklarasikan konten App Anda.
Bangun dan jalankan aplikasi. Anda sekarang dapat melihat tabel Instalasi di dasbor Back4App aplikasi Anda dengan entri yang sesuai dengan aplikasi Anda.

Kami sekarang siap untuk mengirim notifikasi push pertama ke aplikasi kami. Ikuti langkah-langkah di bawah ini untuk mengirim pesan push melalui Dashboard Back4App:
- Klik pada Push > Kirim Push Baru dan buat audiens untuk notifikasi push Anda.

3. Tulis pesan Anda dan lihat pratinjau dengan mengklik opsi Android.

4. Jika Anda sudah meninjau notifikasi dorong dan ingin mengirimkannya, klik Kirim dorong.

Anda dapat menjelajahi opsi lain untuk Notifikasi Dorong di Dasbor Parse. Di sana, Anda juga dapat melihat Dorongan Sebelumnya yang Anda kirim dan Audiens yang Anda buat untuk mereka.
Dengan menggunakan panduan awal fungsi cloud, Anda dapat memisahkan metode yang dapat digunakan kembali dari front-end Anda dan mendapatkan kontrol penuh atas semua sumber daya backend Anda melalui kunci master.
Mari kita gunakan fungsi kode cloud untuk mengirim pesan dorong. Pertama, buat fungsi cloud yang disebut kirimDorong yang memanggil Parse.Push.send metode. Ada dua cara untuk memilih pengguna yang akan menerima notifikasi: men-query kelas Parse.Installation atau melalui nama saluran notifikasi. Lebih umum di Aplikasi Android untuk menggunakan saluran untuk membedakan antara pengguna, jadi mari kita gunakan itu. Pastikan untuk menerapkan fungsi ini di Back4App sebelum melanjutkan.
Dokumentasi Sumber Terbuka Silakan periksa dokumentasi sumber terbuka untuk detail lebih lanjut tentang kirim metode.
Mari kita panggil fungsi dari aplikasi React Native. Tambahkan fungsi ini ke PushNotificationMethods.js (atau PushNotificationMethods.tsx) file dan panggil di dalam tombol di layar utama aplikasi Anda:
Perhatikan bahwa kasus ini di mana pengguna diizinkan untuk memicu notifikasi push sendiri tidak umum, kami menggunakannya di sini hanya untuk menunjukkan betapa mudahnya mengintegrasikan pengiriman notifikasi push dengan Parse.
Di akhir panduan ini, Anda telah belajar bagaimana mengirim Notifikasi Push menggunakan Parse ke aplikasi React Native Anda di Android. Di panduan berikutnya, Anda akan belajar bagaimana mengirimnya di iOS.