Push Notification untuk Aplikasi Ionic

Firebase Push Notification untuk Aplikasi Ionic – Beserta cara menangani error instalasinya

https://akashsarkar.com/wp-content/uploads/2019/04/image-4.png

Firebase Push Notification untuk Aplikasi Ionic – Beserta cara menangani error instalasinya

Notifikasi push adalah cara paling efektif untuk membuat pengguna Anda tetap terlibat. Hampir setiap aplikasi seluler modern memiliki semacam fitur pemberitahuan push di dalamnya. Ini adalah panduan langkah demi langkah untuk mengimplementasikan notifikasi push di aplikasi Ionic Anda menggunakan Firebase. Kami akan menggunakanPlugin Cordova Firebase dan AngularFire2 plugin untuk mencapai ini.

Langkah 1: Pengaturan Awal

Mari kita mulai proyek ionik baru

ionic start firebaseDemo blank --type=ionic-angular

Instal Plugin Cordova Firebase

ionic cordova plugin add cordova-plugin-firebase

npm install --save @ionic-native/firebase

Instal AngularFire2 untuk mengakses database Firestore

npm install --save angularfire2 firebase

Mari impor semua yang dibutuhkan di file app.module.ts

//…

import { Firebase } from '@ionic-native/firebase/ngx';

import { AngularFireModule } from 'angularfire2';

import { AngularFirestoreModule } from 'angularfire2/firestore';

const firebase = {

apiKey: "api-key",

authDomain: "project-id.firebaseapp.com",

databaseURL: "https://project-id.firebaseio.com",

projectId: "project-id",

storageBucket: "project-id.appspot.com",

messagingSenderId: "sender-id",

}

@NgModule({

imports: [

//...

AngularFireModule.initializeApp(firebase),

AngularFirestoreModule

],

providers: [

//...

Firebase,

FcmProvider

]

})

 

Langkah 2: Buat Penyedia

Sekarang kita akan membuat penyedia untuk menghasilkan, menyimpan token FCM di database Firestore dan mendengarkan pesan masuk. Ketik perintah di bawah ini di terminal untuk menghasilkan penyedia.

ionic generate provider fcm

Impor dependensi dan nyatakan metode yang diperlukan di file fcm.ts

import { HttpClient } from '@angular/common/http';

import { Injectable } from '@angular/core';

import { Firebase } from '@ionic-native/firebase/ngx';

import { Platform } from 'ionic-angular';

import { AngularFirestore } from 'angularfire2/firestore';

@Injectable()

export class FcmProvider {

constructor(

public firebaseNative: Firebase,

public afs: AngularFirestore,

private platform: Platform

) {}

// Generate the FCM token

async getToken() { }

// Save the token to firestore

private saveTokenToFirestore(token) {}

// Listen to incoming FCM messages

listenToNotifications() {}

}

 

Sekarang, kita perlu membuat token FCM di dalam metode getToken ()
async getToken() {

let token;

token = await this.firebaseNative.getToken()

return this.saveTokenToFirestore(token)

}

Sekarang kita perlu menyimpan token FCM ke database Firestore. Seorang pengguna dapat memiliki banyak perangkat. Jadi, Anda mungkin ingin menyimpan id pengguna bersama dengan token FCM.

private saveTokenToFirestore(token) {
if (!token) return;
const devicesRef = this.afs.collection('devices')
const docData = {
token,
userId: 'testUser',
}
return devicesRef.doc(token).set(docData)
}

Sekarang, kita akan memodifikasi metode listenToNotifications () untuk mendengarkan pesan masuk.

listenToNotifications() {

return this.firebaseNative.onNotificationOpen()

}

Sekarang, kita akan memanggil metode getToken () di dalam konstruktor file app.component.ts . Jika Anda memiliki fungsionalitas login yang dibangun di dalam aplikasi Anda, Anda mungkin ingin membuat token FCM selama proses login. Namun, untuk saat ini kami akan membuat token pada saat menjalankan aplikasi. Jadi file app.component.ts akan terlihat seperti ini.

import { Component } from '@angular/core';

import { Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';

import { FcmProvider } from '../providers/fcm/fcm'

@Component({

templateUrl: 'app.html'

})

export class MyApp {

rootPage:any = HomePage;

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, fcm: FcmProvider) {

platform.ready().then(() => {

// Okay, so the platform is ready and our plugins are available.

// Here you can do any higher level native things you might need.

statusBar.styleDefault();

splashScreen.hide();

// Get a FCM token

fcm.getToken()

});

}

}

 

Langkah 3: Buat proyek baru di Firebase

https://i2.wp.com/akashsarkar.com/wp-content/uploads/2019/04/image-3.png?w=900&ssl=1

Buat proyek proyek baru dari dasbor Firebase dan ikuti langkah-langkahnya. Setelah mengisi langkah-langkah yang diperlukan, unduh file google-services.json dan letakkan di root di proyek Ionic Anda.

https://i2.wp.com/akashsarkar.com/wp-content/uploads/2019/04/image-4.png?fit=900%2C477&ssl=1

Buat database baru (Cloud Firestore) di dalam proyek Firebase Anda. Anda harus memiliki izin baca dan tulis. Sekarang, tambahkan koleksi dan beri nama ‘perangkat’. Seharusnya terlihat seperti ini.

https://i2.wp.com/akashsarkar.com/wp-content/uploads/2019/04/image-6.png?fit=900%2C502&ssl=1

Langkah 4: Pemecahan Masalah (Opsional)

Sekarang jalankan aplikasinya. Anda mungkin mendapatkan kesalahan.

What went wrong:

Execution failed for task ‘:app:fabricGenerateResourcesDebug’.

Crashlytics Developer Tools error.

Jika Anda mendapatkan kesalahan ini, buka platform\ android \ build.gradle dan ganti

classpath ‘com.google.gms:google-services:4.1.0’

Dengan

classpath ‘com.google.gms:google-services:4.2.0’

Sekali lagi jika Anda melihat

Error: Uncaught (in promise): TypeError: Object(…) is not a function

TypeError: Object(…) is not a function

at new AngularFirestore (http://localhost:8100/build/vendor.js:67771:88)

at _createClass (http://localhost:8100/build/vendor.js:11579:20)

at _createProviderInstance$1 (http://localhost:8100/build/vendor.js:11543:26)

at resolveNgModuleDep (http://localhost:8100/build/vendor.js:11528:17)

at _createClass (http://localhost:8100/build/vendor.js:11573:68)

at _createProviderInstance$1 (http://localhost:8100/build/vendor.js:11543:26)

at resolveNgModuleDep (http://localhost:8100/build/vendor.js:11528:17)

at NgModuleRef_.get (http://localhost:8100/build/vendor.js:12765:16)

at resolveDep (http://localhost:8100/build/vendor.js:13255:45)

at createClass (http://localhost:8100/build/vendor.js:13119:85)

at c (http://localhost:8100/build/polyfills.js:3:19752)

at Object.reject (http://localhost:8100/build/polyfills.js:3:19174)

at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:54543:16)

at NavControllerBase._failed (http://localhost:8100/build/vendor.js:54536:14)

at http://localhost:8100/build/vendor.js:54583:59

at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)

at Object.onInvoke (http://localhost:8100/build/vendor.js:5396:33)

at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)

at r.run (http://localhost:8100/build/polyfills.js:3:10143)

at http://localhost:8100/build/polyfills.js:3:20242

Install lagi rxjs versi 6.0

npm i rxjs@^6.0 rxjs-compat

Sekarang, jika Anda menjalankan aplikasi, token FCM Anda akan ditambahkan ke Cloud Firestore.

https://i2.wp.com/akashsarkar.com/wp-content/uploads/2019/04/image-8.png?fit=900%2C496&ssl=1

Langkah 5: Mengirim Pemberitahuan

Sekarang, untuk mengirim notifikasi, buka dasbor Firebase dan pilih proyek Anda. Klik pada Cloud Messaging di bawah Grow.

https://i2.wp.com/akashsarkar.com/wp-content/uploads/2019/04/image-9.png?fit=900%2C544&ssl=1

Di layar ini isi detail yang diperlukan untuk mengirim pemberitahuan. Jika Anda melakukan semuanya dengan benar, Anda akan mendapatkan pemberitahuan seperti ini.

https://i2.wp.com/akashsarkar.com/wp-content/uploads/2019/04/Screenshot_20190421-154816.png?resize=341%2C605&ssl=1

Kode sumber lengkap tersedia di https://github.com/sky741126/Ionic-Firebase-Notification

Jika Anda memiliki saran atau pertanyaan, silakan tinggalkan komentar di bawah ini. Jika Anda menyukai artikel ini atau ingin membantu saya, mohon pertimbangkan untuk menyumbang apa pun yang Anda bisa.

 

Tinggalkan Balasan

Need Help? Chat with us
Scroll to Top