 |
| iphone (kredit: www.pexels.com) |
Assalamu'alaikum Wr. Wb.
Setelah sebelumnya kita membahas tentang bagaimana mensetting react native vector icon pada aplikasi React Native iOS selanjutnya kita akan membahas tentang bagaimana cara mensetting firebase pada applikasi React Native iOS kita. Firebase yang dikenal secara luas adalah sebuah layanan milik google yang memiliki kemampuan untuk realtime database, tetapi setelah kita mempelajari lebih lanjut kegunaan dari firebase juga tidak hanya itu, salah satu fitur yang disediakan firebase adalah layanan notifikasi untuk aplikasi kita, langsung saja cara mensetting firebase untuk push notification pada aplikasi React Native iOS adalah sebagai berikut:
Environment yang saya sendiri gunakan
- Node versi v12.17.0
- React Native versi 0.67.3
- Package @react-native-firebase/app versi ^15.1.1
- Package @react-native-firebase/messaging versi ^15.1.1
Untuk anda yang terbiasa membuat sebuah program menggunakan framework pasti sudah paham bahwa beda versi suatu framework atau package terkadang berbeda cara setup dan implementasinya pada project kita, ada kemungkinan untuk versi environment lain tidak jauh berbeda soal setup dan implementasi pada project anda atau tidak berbeda sama sekali, hanya saja untuk amannya saya menginformasikan environment yang sudah pasti dapat mengimplementasikan react native firebase messaging menggunakan langkah-langkah pada artikel saya.
- Siapkan project react native iOS anda
Hal pertama kali yang perlu anda siapkan adalah aplikasi react native anda, jika anda belum memilikinya anda pada membaca terlebih dahulu tutorialnya disini.
- Install package firebase di Project React Native iOS anda
Langkah selanjutnya adalah install package firebase ke project react native anda, ada dua package manager opsional yang bisa anda gunakan yaitu npm dan yarn, tetapi pada langkah kali ini kita akan menggunakan yarn yang perintahnya adalah sebagai berikut
yarn add @react-native-firebase/app
lalu
yarn add @react-native-firebase/messaging - Buat Project iOS di Firebase Console
Selanjutnya jika anda belum memiliki Projek Firebase, maka yang perlu anda lakukan adalah membuat Projek Firebase terlebih dahulu dengan masuk ke halaman firebase.google.com menggunakan akun google anda lalu tekan tombol "Buka Konsol", tambah Projek Firebase dengan mengeklik tombol "Add Project" lalu ikuti langkah langkah yang ada. Selanjutnya jika anda sudah berada di halaman awal konsole Projek Firebase anda dan ingin menambah aplikasi baru anda dapat mengeklik icon "Setting" di menu pojok kiri atas halaman, pilih "Project Setting", di menu General scroll ke bawah lalu pilih "Add app", pilih icon iOS, setelah masuk ke halaman baru lalu isi form bundle id dan nama aplikasi anda, lalu download file GooglePlist-Info.plist, langkah terakhir klik saja "Next" sampai selesai. - Download file GooglService-Info.plist dan pasang pada project anda
Setelah anda membuat project iOS di firebase langkah selanjutnya adalah memasang file GoogleService-info.plist di project React Native iOS anda, anda dapat mendownloadnya di Firebase Console -> masuk ke project anda -> klik icon pengaturan pada pojok kiri atas -> pilih Project settings -> scroll ke bawah pada project iOS anda -> tekan tombol icon dowload GoogleService-Info.plist. Setelah anda mendowload file GoogleService-Info.plist lalu masuk ke xcode melalui file .xcworkspace project anda, klik kanan pada project anda lalu pilih 'Add File to "Project Anda"', masukkan file GoogleService-Info.plist anda dan pastikan anda mencentang "copy as needed" lalu tekan oke. - Masukkan kode ke file Podfile
Masukkan kode berikut ke dalah file Podfile di dalam kode target dibawah tutup kurung kode use_react_native!
pod 'Firebase/Analytics'pod 'Firebase/Performance'
pod 'Firebase/Crashlytics'
pod 'Firebase/Messaging'
pod 'FirebaseCore', :modular_headers => true
pod 'GoogleUtilities', :modular_headers => true
dan masukkan kode berikut dibawah baris kode import yang berada di top kode file
$RNFirebaseAsStaticFramework = true - Masukkan kode ke file AppDelegate.m
Masukkan kode berikut ke dalam file AppDelegate.m pada top kode programs:
#import <Firebase.h>
Dan kode berikut di dalam didFinishLaunchingWithOptions
[FIRApp configure];
UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
center.delegate = self; - Masukkan kode berikut ke file AppDelegate.h
Masukkan kode berikut pada top file kode program
#import <UserNotifications/UNUserNotificationCenter.h>
Dan kode berikut di dalam kurung kurawal setelah kode @interface AppDelegate : UIResponder, tempelkan pada urutan terakhir
UNUserNotificationCenterDelegate - Jalankan pod install
Untuk menginstall semua pod yang dibutuhkan untuk memasang firebase messaging pada program React Native iOS anda yang perlu anda lakukan adalah masuk ke folder ios melalui terminal dan jalankan kode berikut:
pod install - Buat APNS key dan pasang pada Projek iOS anda di firebase
Masuk ke website apple.developer.com menggunakan apple Id yang digunakan pada Projek React Native iOS anda, pada menu sebelah kiri pilih menu Certificates, IDs, & Profiles, masukkan nama aplikasi anda, ceklis pada pilihan Apple Push Notifications services(APNs), lalu download file APNs yang telah anda buat, lalu pasangkan pada Projek React Native iOS anda pada firebase dengan masuk ke tombol dengan icon Setting -> Project Setting -> pilih tab Cloud Messaging -> pilih project ios anda -> lalu pada kolom file APNs tambahkan file APNs anda dengan mengeklik tombol Upload -> isi data yang dibutuhkan. - Pastikan Bundle Id pada Project sama dengan Bundle Id pada Firebase
Masuk ke projek React Native iOS anda, pilih target projek anda lalu pilih tab General, pada kolom Bundle Identifier pastikan Bundle Id anda sesuai dengan Bundle Id yang anda daftarkan pada firebase, lalu pilih tab Signing & Capabilities dan pastikan juga Bundle Id pada Kolom Bundle Identifier sesuai dengan Bundle Id yang anda daftarkan pada firebase. - Aktifkan push notifikasi menggunakan xCode
Pilih tab Signing & Capabilities dan klik icon tambah di sebelah kiri tab All, akan muncul jendela pop up, cari dan pilih Push Notifications dan Background Model lalu pada drob down Background Modes ceklis Background Fetch dan Remote Notifications. - Build Project React Native iOS anda
Sebenarnya ada dua opsi untuk membuild aplikasi React Native iOS anda, yang pertama menggunakan terminal dengan mengetikkan perintah berikut pada lokasi root project anda
npx react-native run-ios
Atau anda dapat membuild aplikasi React Native iOS anda menggunakan xCode dengan memilih emulator terlebih dahulu dan tekan tombol bericon "play"
0 Komentar