Panduan Mengirim Notifikasi Push React Native Android

notifikasi push untuk react native di android pendahuluan 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 repositori contoh javascript repositori contoh typescript prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan sebuah aplikasi react native yang dibuat dan terhubung ke back4app memahami cara mengdeploy fungsi cloud di back4app sebuah akun aktif di google, sehingga anda dapat menggunakan google firebase tujuan kirim notifikasi push dari parse ke aplikasi react native di android, menggunakan dasbor back4app dan fungsi cloud code 1 menyiapkan firebase 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 https //firebase google com/docs/android/setup#console 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 2 mengaktifkan notifikasi push di back4app untuk menghubungkan proyek firebase anda dengan back4app dan mengaktifkan pengiriman notifikasi push melalui dasbor dan kode cloud anda, ikuti langkah langkah berikut kunjungi situs web back4app , masuk, temukan aplikasi anda dan klik pada pengaturan server pengaturan server temukan blok “notifikasi push android” dan klik pada pengaturan pengaturan > edit edit blok “notifikasi push android” terlihat seperti ini 3\ tambahkan kunci server kunci server firebase ke kunci api kunci api dan id pengirim id pengirim ke id pengirim gcm id pengirim gcm 4\ simpan dan anda selesai 3 menginstal dan mengatur ketergantungan pada proyek react native anda, mari kita instal react native push notification 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/app/src/main/androidmanifest xml , android/build gradle android/build gradle dan android/app/build gradle android/app/build gradle mengikuti pustaka dokumen https //github com/zo0r/react native push notification pastikan juga untuk menambahkan di androidmanifest xml androidmanifest xml file sebuah meta data meta data yang berisi id saluran notifikasi default untuk aplikasi anda (mari kita gunakan guidechannel guidechannel sebagai contoh kita) anda dapat menambahkan nama langsung ke direktif atau menyertakannya dalam strings xml strings xml file juga, tempatkan file google services json google services json proyek anda di android/app android/app direktori 1 \<meta data 2 android\ name="com google firebase messaging default notification channel id" 3 android\ value="guidechannel" /> 4 \<! or > 5 \<meta data 6 android\ name="com google firebase messaging default notification channel id" 7 android\ value="@string/default notification channel id" /> pada langkah berikutnya, kita akan belajar bagaimana menggunakan pustaka ini dan menggabungkannya dengan parse 4 menangani notifikasi push mari kita buat file dengan metode baru terkait dengan notifikasi push yang disebut pushnotificationmethods js pushnotificationmethods js (atau pushnotificationmethods tsx pushnotificationmethods tsx ) dan tambahkan fungsi berikut, yang bertanggung jawab untuk menginisialisasi react native push notification react native push notification , membuat saluran notifikasi, dan juga mengatur parse untuk mengenali konfigurasi push perangkat kita javascript 1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3&#x9; 4 const channelid = 'guidechannel'; 5&#x9; 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47&#x9; 48 onregister async function (token) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken = token token; 51&#x9; 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58&#x9; 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 }1 import pushnotification from 'react native push notification'; 2 import parse from 'parse/react native'; 3&#x9; 4 const channelid string = 'guidechannel'; 5&#x9; 6 export async function configurepushnotifications() { 7 // initialize pushnotification 8 await pushnotification configure({ 9 // (required) called when a remote is received or opened, or local notification is opened 10 onnotification function (notification object) { 11 // process the notification 12 console log('notification ', notification); 13 // if notification is remote and has data, trigger local notification to show popup 14 // this is needed for parse sent notifications because firebase doesn't trigger popup 15 // notifications with data by itself 16 if ( 17 notification data !== undefined && 18 notification data data !== undefined 19 ) { 20 try { 21 // notification data comes as a stringified json, so parsing is needed 22 const notificationdata = json parse(notification data data); 23 // json parse notifications from the dashboard and cloud code 24 // should contain the default `title` and `message` parameters 25 let title string = 'notification title'; 26 if (notificationdata title !== undefined) { 27 title = notificationdata title; 28 } 29 let message string = 'noticiation message'; 30 if (notificationdata message !== undefined) { 31 message = notificationdata message; 32 } 33 // text parse notifications from the dashboard only have an `alert` parameter 34 if (notificationdata alert !== undefined) { 35 message = notificationdata alert; 36 } 37 pushnotification localnotification({ 38 channelid channelid, 39 title title, 40 message message, 41 }); 42 } catch (error any) { 43 console log(`error triggering local notification ${error}`); 44 } 45 } 46 }, 47&#x9; 48 onregister async function (token {os string; token string}) { 49 console log(`registered with device token ${token token}`); 50 let devicetoken string = token token; 51&#x9; 52 // create the notification channel, required for android notifications 53 await pushnotification createchannel({ 54 channelid channelid, 55 channelname 'guide channel', 56 }); 57 console log('notification channel created!'); 58&#x9; 59 // create a parse installation, that will link our application's push notification 60 // to the parse server 61 try { 62 const installationid = await parse getinstallationid(); 63 const installation = new parse installation(); 64 // make sure to change any needed value from the following 65 installation set('devicetype', 'android'); 66 installation set('gcmsenderid', 'your gcm sender id'); 67 installation set('pushtype', 'gcm'); 68 installation set('appidentifier', 'your app identifier(package name)'); 69 installation set('parseversion', '3 2 0'); 70 installation set('appname', 'back4appguidepushnotifications'); 71 installation set('appversion', '1 0'); 72 installation set('localeidentifier', 'pt br'); 73 installation set('badge', 0); // set initial notification badge number 74 installation set('timezone', 'america/sao paulo'); 75 installation set('installationid', installationid); 76 installation set('channels', \[channelid]); 77 installation set('devicetoken', devicetoken); 78 await installation save(); 79 console log(`created new parse installation ${installation}`); 80 } catch (error) { 81 console log(error message); 82 } 83 }, 84 popinitialnotification true, 85 requestpermissions true, 86 }); 87 } dokumentasi sumber terbuka informasi lebih lanjut tentang parse installation parse installation dapat ditemukan di sini https //docs parseplatform org/js/guide/#push notifications perhatikan bahwa pengendali acara onnotification 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 configurepushnotifications ini di app js app js anda (atau app tsx app tsx ) setelah menginisialisasi parse dan sebelum mendeklarasikan konten app app anda app js 1 // other imports 2 // 3 import {configurepushnotifications} from ' /src/pushnotificationmethods'; 4&#x9; 5 // your parse initialization configuration goes here 6 // 7&#x9; 8 // initialize pushnotifications 9 configurepushnotifications(); bangun dan jalankan aplikasi anda sekarang dapat melihat tabel instalasi instalasi di dasbor back4app aplikasi anda dengan entri yang sesuai dengan aplikasi anda 5 mengirim notifikasi push melalui dashboard kami sekarang siap untuk mengirim notifikasi push pertama ke aplikasi kami ikuti langkah langkah di bawah ini untuk mengirim pesan push melalui dashboard back4app pergi ke situs web back4app , masuk, temukan aplikasi anda dan klik pada dashboard dashboard klik pada push push > kirim push baru kirim push baru dan buat audiens untuk notifikasi push anda 3\ tulis pesan anda dan lihat pratinjau dengan mengklik opsi android android 4\ jika anda sudah meninjau notifikasi dorong dan ingin mengirimkannya, klik kirim dorong kirim dorong anda dapat menjelajahi opsi lain untuk notifikasi dorong di dasbor parse dasbor parse di sana, anda juga dapat melihat dorongan sebelumnya dorongan sebelumnya yang anda kirim dan audiens audiens yang anda buat untuk mereka 6 mengirim notifikasi dorong melalui cloud code dengan menggunakan panduan awal fungsi cloud https //www back4app com/docs/get started/cloud functions , 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 kirimdorong yang memanggil parse push send parse push send metode ada dua cara untuk memilih pengguna yang akan menerima notifikasi men query kelas parse installation 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 https //docs parseplatform org/js/guide/#sending options untuk detail lebih lanjut tentang kirim kirim metode 1 parse cloud define('sendpush', async (request) => { 2 try { 3 await parse push send({ 4 channels \[ 'guidechannel' ], 5 data { 6 message 'test message', 7 title 'back4app guide notification' 8 } 9 }, { usemasterkey true }); 10 return true; 11 } catch (error) { 12 return `error ${error}` 13 } 14 }); mari kita panggil fungsi dari aplikasi react native tambahkan fungsi ini ke pushnotificationmethods js pushnotificationmethods js (atau pushnotificationmethods tsx pushnotificationmethods tsx ) file dan panggil di dalam tombol di layar utama aplikasi anda 1 export async function sendnotification() { 2 try { 3 await parse cloud run('sendpush'); 4 console log('success!'); 5 } catch (error any) { 6 console log(`error ${error}`); 7 } 8 } 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 kesimpulan 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