Cara melaksanakan pemberitahuan tolak dalam React Native (Android)

Pernah terfikir tentang pemberitahuan yang kami terima daripada apl yang kami pasang? atau Bagaimanakah Swiggy atau Zomato memprovokasi kami untuk memesan makanan pada jam 3 pagi dengan pemberitahuan kreatif mereka? ?

Mari kita mendalami konsep pemberitahuan!

Apakah pemberitahuan?

pemberitahuan ialah mesej atau makluman yang dihantar oleh apl untuk memaklumkan pengguna tentang kemas kini, acara atau tindakan, biasanya dihantar di luar antara muka apl.

Kini terdapat dua jenis pemberitahuan seperti yang ditunjukkan di bawah -

Pemberitahuan Tolak

Pemberitahuan tolak ialah mesej atau makluman yang dihantar daripada pelayan ke apl apabila apl tidak berjalan secara aktif di latar depan. Ia digunakan terutamanya untuk memastikan pengguna terlibat dengan menghantar kemas kini, peringatan atau kandungan yang diperibadikan. Pemberitahuan tolak dihantar melalui perkhidmatan sistem pengendalian seperti Apple Push Notification Service (APN) untuk iOS atau Firebase Cloud Messaging (FCM) untuk Android.

Cara pemberitahuan tolak berfungsi:

1. Pendaftaran: Apabila apl dipasang atau mula-mula dibuka, apl itu meminta token peranti unik daripada perkhidmatan pemberitahuan tolak OS (APN atau FCM).
2. Komunikasi Pelayan: Apl menghantar token ini ke pelayan hujung belakang apl, yang menyimpannya untuk kegunaan masa hadapan.
3. Menghantar Pemberitahuan: Pelayan menghantar muatan pemberitahuan (mengandungi tajuk, mesej, butang tindakan, dll.) kepada perkhidmatan pemberitahuan tolak (APN/FCM) dengan token peranti.
4. Penghantaran: Perkhidmatan pemberitahuan tolak menghantar mesej ke peranti masing-masing, walaupun apl tidak berjalan.

Pemberitahuan Dalam Apl

Pemberitahuan dalam apl ialah mesej atau makluman yang dipaparkan kepada pengguna semasa mereka menggunakan apl itu secara aktif. Tidak seperti pemberitahuan tolak, ini tidak memerlukan campur tangan pelayan dan dicetuskan dalam apl itu sendiri, biasanya hasil daripada tindakan pengguna atau peristiwa apl.

Cara pemberitahuan dalam apl berfungsi:

1. Pencetus Peristiwa: Apabila peristiwa tertentu berlaku di dalam apl (seperti pengguna mencapai pencapaian atau ciri yang memerlukan perhatian), apl boleh mencetuskan pemberitahuan dalam apl.
2. Paparan: Pemberitahuan ditunjukkan sebagai sepanduk, modal atau pop timbul dalam UI apl, membimbing pengguna atau memaklumkan mereka tentang acara tersebut.
3. Logik Tersuai: Pemberitahuan dalam apl dikendalikan secara langsung oleh kod apl dan boleh ditunjukkan secara dinamik berdasarkan keadaan dalaman atau logik apl.

---

Pelaksanaan dalam apl android React Native:

Sekarang kita tahu tentang pemberitahuan dan jenisnya, tiba masanya untuk melaksanakan ciri tersebut dalam apl asli reaksi anda sendiri. Panduan ini adalah untuk melaksanakan hanya pemberitahuan tolak dalam apl android asli React sahaja, jika anda mahu untuk pemberitahuan iOS atau dalam apl, tulis ulasan dan saya akan menyiarkannya dengan pasti!

Untuk bermula, kami akan menggunakan perkhidmatan pihak ketiga yang dipanggil OneSignal. Saya baru-baru ini menjumpai platform ini dan terkejut dengan perkhidmatan yang mereka tawarkan.

Mengenai OneSignal:

OneSignal ialah perkhidmatan pemberitahuan tolak yang membolehkan pembangun apl menghantar pemberitahuan yang disasarkan kepada pengguna merentas pelbagai platform, termasuk apl mudah alih, tapak web dan e-mel. Ia menyokong pemberitahuan push, dalam apl dan web, menyediakan ciri seperti pembahagian, automasi, ujian A/B dan analitik masa nyata. OneSignal digunakan secara meluas untuk meningkatkan penglibatan dan pengekalan pengguna dengan menawarkan penyelesaian yang mudah disepadukan untuk menghantar mesej yang diperibadikan. Peringkat percuma mereka terdiri daripada 10,000/bulan Penghantaran E-mel Percuma, Penghantaran Tolak Mudah Alih Tanpa Had, Aliran Kerja Perjalanan, Patuh GDPR, Ujian A/B

---

Berbalik kepada panduan, kerana kita sudah tahu bahawa pemberitahuan tolak memerlukan pengendalian sisi pelayan melalui FCM (Firebase Cloud Messaging) oleh itu terdapat beberapa langkah untuk diikuti:

1. Sediakan projek firebase (abaikan dua langkah pertama jika anda sudah mempunyai projek firebase):

   • Pergi ke firebase console dan log masuk ke akaun anda.
   • Buat projek dari sini dan ikuti langkah-langkahnya
   • Setelah projek anda dibuat pergi ke tetapan projek dari bar sisi
   • Navigasi ke akaun perkhidmatan dari bar dan ia sepatutnya kelihatan seperti ini
   • Klik pada Jana kunci peribadi baharu dan ini akan memuat turun fail json, simpan dengan teliti di tempat yang selamat, kami akan memerlukannya semasa menyediakan OneSignal.

2. Sediakan OneSignal

   • Pergi ke OneSignal dan buat akaun.
   • Selepas membuat akaun, ikuti langkah persediaan dan buat organisasi dan sekarang, anda akan melihat halaman untuk menambah apl.
   • Dalam halaman ini berikan nama apl anda dan pilih Google Android (FCM) untuk kes kami. dan klik pada Konfigurasikan Platform Anda
   • Kini anda akan dialihkan ke halaman ini di mana kami akan menggunakan fail json akaun perkhidmatan yang dimuat turun semasa konfigurasi firebase Muat naik json dan kemudian Simpan & Teruskan
   • Pada halaman seterusnya pilih React Native/Expo sebagai SDK sasaran dan kemudian Simpan & Teruskan sekali lagi
   • Dalam skrin seterusnya anda akan mendapat ID Apl anda, ini adalah id sulit dan menggunakan id ini sesiapa sahaja boleh mencetuskan pemberitahuan dalam apl anda, jadi berhati-hati dengan rahsia ini.

Kami telah selesai dengan persediaan dalam firebase dan OneSignal, kini satu-satunya tugas yang tinggal ialah beberapa Kopi dengan Kod

Tambahkan OneSignal pada apl anda dan konfigurasikannya

• Langkah 1: Tambahkan OneSignal pada apl anda dengan menjalankan arahan ini dahulu

                       npm i react-native-onesignal

• Langkah 2: Dalam index.js atau App.tsx atau App.js anda, mana-mana punca projek anda, import OneSignal

             import { OneSignal } from 'react-native-onesignal';

dan anda telah menambah coretan kod ini untuk memulakan OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

Anda boleh membungkusnya di dalam cangkuk useEffect untuk penyepaduan dan ketersambungan yang lancar dengan OneSignal.

Ini akan memulakan peranti dengan ID unik dihidupkan untuk OneSignal dan anda boleh menyemaknya dalam langganan di bar sisi. Setiap peranti yang dimulakan akan dikenal pasti dengan OneSignal ID unik ini dan anda boleh menetapkannya secara manual juga jika anda mempunyai pengguna dengan id unik mereka sendiri dengan menggunakan coretan kod ini:

                         OneSignal.login(userId)

Setelah pengguna berjaya melanggan, ia akan dipaparkan dalam papan pemuka seperti ini

Sekarang anda mungkin menghadapi beberapa isu dengan OneSignal tidak digunakan dengan betul atau beberapa ralat kritikal jadi berikut ialah bahagian yang boleh anda ikuti yang membantu saya menyelesaikan isu tersebut.

• Langkah 3: Di dalam androidappbuild.gradle anda tambahkan coretan kod ini

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• Langkah 4: Dalam android untuk menyediakan kebenaran yang diperlukan untuk pemberitahuan tolak, dalam androidappsrcmainAndroidManifest.xml tambah

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

sebelum teg aplikasi. Kebenaran INTERNET adalah pilihan walau bagaimanapun kerana ia mungkin didayakan secara lalai.

Boom? Semua langkah dilindungi untuk melaksanakan pemberitahuan tolak dan anda boleh menghantar pemberitahuan ujian daripada papan pemuka OneSignal itu sendiri.

Cuba sendiri dan jika ada keraguan anda boleh komen di bawah. Ikuti untuk panduan yang lebih terperinci!

Rujukan:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

Selamat pengekodan!??‍?

Atas ialah kandungan terperinci Cara melaksanakan pemberitahuan tolak dalam React Native (Android). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!