Fungsi Cloud untuk Firebase

1. Ikhtisar

Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase SDK untuk Google Cloud Functions guna menyempurnakan aplikasi Web Chat dan cara menggunakan Cloud Functions untuk mengirim notifikasi kepada pengguna aplikasi Chat.

3b1284f5144b54f6.png

Apa yang akan Anda pelajari?

  • Buat Google Cloud Functions menggunakan Firebase SDK.
  • Memicu Cloud Functions berdasarkan peristiwa Auth, Cloud Storage, dan Cloud Firestore.
  • Tambahkan dukungan Firebase Cloud Messaging ke aplikasi web Anda.

Apa yang Anda butuhkan?

  • Sebuah kartu kredit. Cloud Functions for Firebase memerlukan paket Firebase Blaze, yang berarti Anda harus mengaktifkan penagihan pada proyek Firebase menggunakan kartu kredit.
  • IDE / editor teks pilihan Anda seperti WebStorm , Atom atau Sublime .
  • Terminal untuk menjalankan perintah shell dengan NodeJS v9 diinstal.
  • Peramban seperti Chrome.
  • Kode sampel. Lihat langkah selanjutnya untuk ini.

2. Dapatkan kode sampel

Mengkloning repositori GitHub dari baris perintah:

git clone https://github.com/firebase/friendlychat

Impor aplikasi pemula

Menggunakan IDE Anda, buka atau impor android_studio_folder.png cloud-functions-start direktori dari direktori kode contoh. Direktori ini berisi kode awal untuk codelab yang terdiri dari Aplikasi Web Obrolan yang berfungsi penuh.

3. Buat proyek Firebase dan Siapkan aplikasi Anda

Buat proyek

Dalam Firebase Console , klik Add Project dan menyebutnya FriendlyChat.

Klik Buat Proyek.

Tingkatkan ke paket Blaze

Untuk menggunakan Cloud Fungsi untuk Firebase, Anda harus Upgade proyek Firebase Anda ke rencana penagihan Blaze . Ini akan mengharuskan Anda untuk menambahkan kartu kredit atau instrumen penagihan lain ke akun Google Cloud Anda.

Semua project Firebase, termasuk yang ada dalam paket Blaze, masih memiliki akses ke kuota penggunaan gratis untuk Cloud Functions. Langkah-langkah yang diuraikan dalam codelab ini akan termasuk dalam batas penggunaan tingkat gratis. Namun, Anda akan melihat biaya kecil ( sekitar $ 0,03 ) dari Cloud Storage yang digunakan untuk host Anda Cloud Fungsi membangun gambar.

Jika Anda tidak memiliki akses ke kartu kredit atau tidak nyaman melanjutkan dengan rencana Blaze, pertimbangkan untuk menggunakan Firebase Emulator Suite yang akan memungkinkan Anda untuk meniru Fungsi Cloud gratis pada komputer lokal Anda.

Aktifkan Google Auth

Untuk mengizinkan pengguna masuk ke aplikasi, kami akan menggunakan Google auth yang perlu diaktifkan.

Dalam Firebase Console, buka bagian Build> Authentication> Sign-in tab metode (atau klik di sini untuk pergi ke sana). Kemudian, mengaktifkan Google Sign-in Provider dan klik Simpan. Ini akan memungkinkan pengguna untuk masuk ke aplikasi web dengan akun Google mereka.

Juga, jangan ragu untuk menetapkan nama menghadapi publik dari aplikasi Anda ke Friendly Chat:

8290061806aacb46.png

Aktifkan Penyimpanan Cloud

Aplikasi ini menggunakan Cloud Storage untuk mengunggah gambar. Untuk mengaktifkan Cloud Storage pada proyek Firebase Anda, kunjungi bagian Storage dan klik tombol Get dimulai. Ikuti langkah-langkah di sana, dan untuk lokasi Cloud Storage, akan ada nilai default untuk digunakan. Klik Selesai sesudahnya.

Tambahkan Aplikasi Web

Di Firebase Console, tambahkan aplikasi web. Untuk melakukannya, pergi ke Pengaturan Proyek dan gulir ke bawah untuk Menambahkan aplikasi. Memilih web sebagai platform dan centang kotak untuk menyiapkan Firebase Hosting, kemudian mendaftar aplikasi dan klik Next untuk sisa langkah-langkah, terakhir mengklik Lanjutkan untuk menghibur.

4. Instal Antarmuka Baris Perintah Firebase

Firebase Command Line Interface (CLI) akan memungkinkan Anda untuk melayani aplikasi web secara lokal dan menerapkan aplikasi web dan Cloud Functions Anda.

Untuk menginstal atau memutakhirkan CLI, jalankan perintah npm berikut:

npm -g install firebase-tools

Untuk memverifikasi bahwa CLI telah diinstal dengan benar, buka konsol dan jalankan:

firebase --version

Pastikan versi Firebase CLI di atas 4.0.0 sehingga memiliki semua fitur terbaru yang diperlukan untuk Fungsi Cloud. Jika tidak, jalankan npm install -g firebase-tools untuk meng-upgrade seperti yang ditunjukkan di atas.

Otorisasi Firebase CLI dengan menjalankan:

firebase login

Pastikan Anda berada di cloud-functions-start direktori, kemudian mendirikan Firebase CLI untuk menggunakan Firebase Proyek Anda:

firebase use --add

Selanjutnya, pilih ID Proyek Anda dan ikuti petunjuknya. Bila diminta, Anda dapat memilih Alias apapun, seperti codelab .

5. Terapkan dan jalankan aplikasi web

Sekarang setelah Anda mengimpor dan mengonfigurasi proyek Anda, Anda siap menjalankan aplikasi web untuk pertama kalinya! Buka jendela terminal, menavigasi ke cloud-functions-start folder, dan menyebarkan aplikasi web untuk Firebase hosting yang menggunakan:

firebase deploy --except functions

Ini adalah output konsol yang akan Anda lihat:

i deploying database, storage, hosting
✔  database: rules ready to deploy.
i  storage: checking rules for compilation errors...
✔  storage: rules file compiled successfully
i  hosting: preparing ./ directory for upload...
✔  hosting: ./ folder uploaded successfully
✔ storage: rules file compiled successfully
✔ hosting: 8 files uploaded successfully
i starting release process (may take several minutes)...

✔ Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

Buka aplikasi web

Baris terakhir harus menampilkan URL Hosting. Aplikasi web sekarang harus disajikan dari URL ini, yang harus dalam bentuk https://<project-id>.firebaseapp.com. Buka. Anda akan melihat UI aplikasi obrolan yang berfungsi.

Masuk ke aplikasi dengan menggunakan tombol SIGN-IN DENGAN GOOGLE dan merasa bebas untuk menambahkan beberapa pesan dan gambar posting:

3b1284f5144b54f6.png

Jika Anda masuk ke aplikasi untuk pertama kalinya di browser baru, pastikan Anda mengizinkan pemberitahuan saat diminta: 8b9d0c66dc36153d.png

Kami harus mengaktifkan notifikasi di lain waktu.

Jika Anda telah sengaja mengklik Blok, Anda dapat mengubah pengaturan ini dengan mengklik tombol 🔒 Aman di sebelah kiri dari URL di Chrome Omnibar dan Toggling bar sebelah Pemberitahuan:

e926868b0546ed71.png

Sekarang, kita akan menambahkan beberapa fungsionalitas menggunakan SDK Firebase untuk Cloud Functions.

6. Direktori Fungsi

Cloud Functions memungkinkan Anda memiliki kode yang berjalan di Cloud dengan mudah tanpa harus menyiapkan server. Kita akan mempelajari cara membangun fungsi yang bereaksi terhadap peristiwa database Firebase Auth, Cloud Storage, dan Firebase Firestore. Mari kita mulai dengan Auth.

Bila menggunakan Firebase SDK untuk Fungsi Cloud, kode Fungsi Anda akan hidup di bawah functions direktori (secara default). Kode Fungsi Anda juga Node.js aplikasi dan karena itu membutuhkan package.json yang memberikan beberapa informasi tentang aplikasi dan daftar dependensi.

Untuk memudahkan Anda, kami telah menciptakan functions/index.js file di mana kode Anda akan pergi. Jangan ragu untuk memeriksa file ini sebelum melanjutkan.

cd functions
ls

Jika Anda tidak akrab dengan Node.js , belajar lebih banyak tentang hal itu sebelum melanjutkan codelab akan membantu.

The package.json file sudah daftar dua dependensi yang diperlukan: yang Firebase SDK untuk Fungsi Cloud dan Firebase Admin SDK . Untuk menginstalnya secara lokal, pergi ke functions folder dan menjalankan:

npm install

Mari kita sekarang memiliki lihat di index.js berkas:

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// TODO(DEVELOPER): Import the Cloud Functions for Firebase and the Firebase Admin modules here.

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

Kami akan mengimpor modul yang diperlukan dan kemudian menulis tiga Fungsi di tempat TODO. Mari kita mulai dengan mengimpor modul Node yang diperlukan.

7. Impor modul Cloud Functions dan Firebase Admin

Dua modul akan dibutuhkan selama codelab ini: firebase-functions memungkinkan menulis Cloud Fungsi pemicu dan log sementara firebase-admin memungkinkan menggunakan platform Firebase pada server dengan akses admin untuk melakukan tindakan seperti tertulis kepada Cloud Firestore atau mengirim pemberitahuan FCM.

Dalam index.js berkas, ganti pertama TODO dengan berikut ini:

index.js

/**
 * Copyright 2017 Google Inc. All Rights Reserved.
 * ...
 */

// Import the Firebase SDK for Google Cloud Functions.
const functions = require('firebase-functions');
// Import and initialize the Firebase Admin SDK.
const admin = require('firebase-admin');
admin.initializeApp();

// TODO(DEVELOPER): Write the addWelcomeMessage Function here.

// TODO(DEVELOPER): Write the blurImages Function here.

// TODO(DEVELOPER): Write the sendNotification Function here.

The Firebase Admin SDK dapat dikonfigurasi secara otomatis ketika dikerahkan ke Fungsi lingkungan Cloud atau wadah lainnya Google Cloud Platform, dan ini terjadi ketika kita sebut admin.initializeApp() tanpa argumen.

Sekarang, mari tambahkan Fungsi yang berjalan saat pengguna masuk untuk pertama kali di aplikasi obrolan, dan kita akan menambahkan pesan obrolan untuk menyambut pengguna.

8. Selamat Datang Pengguna Baru

Struktur pesan obrolan

Pesan yang diposting ke umpan obrolan FriendlyChat disimpan di Cloud Firestore. Mari kita lihat struktur data yang kita gunakan untuk sebuah pesan. Untuk melakukan ini, kirim pesan baru ke obrolan yang bertuliskan "Halo Dunia":

11f5a676fbb1a69a.png

Ini akan muncul sebagai:

fe6d1c020d0744cf.png

Dalam Firebase Console, klik pada Firestore database di bawah bagian Build. Anda akan melihat kumpulan pesan dan satu dokumen yang berisi pesan yang Anda tulis:

442c9c10b5e2b245.png

Seperti yang Anda lihat, pesan chat disimpan dalam Cloud Firestore sebagai dokumen dengan name , profilePicUrl , text , dan timestamp atribut ditambahkan ke messages koleksi.

Menambahkan pesan selamat datang

The Cloud Fungsi pertama menambahkan pesan yang menyambut pengguna baru untuk chatting. Untuk ini, kita dapat menggunakan pemicu functions.auth().onCreate , yang berjalan fungsi setiap kali pengguna tanda-in untuk pertama kalinya dalam aplikasi Firebase. Tambahkan addWelcomeMessages berfungsi ke dalam index.js berkas:

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  functions.logger.log('A new user signed in for the first time.');
  const fullName = user.displayName || 'Anonymous';

  // Saves the new welcome message into the database
  // which then displays it in the FriendlyChat clients.
  await admin.firestore().collection('messages').add({
    name: 'Firebase Bot',
    profilePicUrl: '/images/firebase-logo.png', // Firebase logo
    text: `${fullName} signed in for the first time! Welcome!`,
    timestamp: admin.firestore.FieldValue.serverTimestamp(),
  });
  functions.logger.log('Welcome message written to database.');
});

Menambahkan fungsi ini untuk khusus exports objek adalah cara Node ini membuat fungsi dapat diakses di luar file saat ini dan diperlukan untuk fungsi Cloud.

Dalam fungsi di atas, kami menambahkan pesan selamat datang baru yang diposting oleh "Firebase Bot" ke daftar pesan obrolan. Kami melakukan ini dengan menggunakan add metode pada messages koleksi di Cloud Firestore, yang mana pesan dari obrolan yang disimpan.

Karena ini adalah sebuah operasi asynchronous, kita perlu mengembalikan Janji yang menunjukkan saat Cloud Firestore memiliki tulisan selesai sehingga Fungsi Cloud tidak mengeksekusi terlalu dini.

Terapkan Fungsi Cloud

Cloud Functions hanya akan aktif setelah Anda menerapkannya. Untuk melakukannya, jalankan ini di baris perintah:

firebase deploy --only functions

Ini adalah output konsol yang akan Anda lihat:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
⚠  functions: missing necessary APIs. Enabling now...
i  env: ensuring necessary APIs are enabled...
⚠  env: missing necessary APIs. Enabling now...
i  functions: waiting for APIs to activate...
i  env: waiting for APIs to activate...
✔  env: all necessary APIs are enabled
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: creating function addWelcomeMessages...
✔  functions[addWelcomeMessages]: Successful create operation. 
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlypchat-1234/overview

Uji fungsi

Setelah fungsi berhasil diterapkan, Anda harus memiliki pengguna yang masuk untuk pertama kali.

  1. Buka aplikasi di browser Anda menggunakan URL hosting yang (dalam bentuk https://<project-id>.firebaseapp.com ).
  2. Dengan pengguna baru, masuk untuk pertama kalinya dalam aplikasi Anda menggunakan tombol Masuk.
  • Jika Anda telah masuk ke, app Anda dapat membuka Firebase Console Otentikasi dan menghapus akun Anda dari daftar pengguna. Kemudian, masuk lagi.

262535d1b1223c65.png

  1. Setelah Anda masuk, pesan selamat datang akan ditampilkan secara otomatis:

1c70e0d64b23525b.png

9. Moderasi gambar

Pengguna dapat mengunggah semua jenis gambar dalam obrolan, dan selalu penting untuk memoderasi gambar yang menyinggung, terutama di platform sosial publik. Dalam FriendlyChat, gambar yang diterbitkan untuk chatting disimpan ke Google Cloud Storage .

Dengan Fungsi Cloud, Anda dapat mendeteksi upload gambar baru menggunakan functions.storage().onFinalize pemicu. Ini akan berjalan setiap kali file baru diunggah atau diubah di Cloud Storage.

Untuk memoderasi gambar, kita akan melalui proses berikut:

  1. Periksa apakah gambar ditandai sebagai Dewasa atau hebat menggunakan API Cloud Vision .
  2. Jika gambar telah ditandai, unduh pada instance Fungsi yang sedang berjalan.
  3. Mengaburkan gambar menggunakan ImageMagick .
  4. Unggah gambar buram ke Cloud Storage.

Aktifkan Cloud Vision API

Karena kami akan menggunakan Google Cloud Vision API dalam fungsi ini, Anda harus mengaktifkan API pada proyek firebase Anda. Ikuti link ini , kemudian pilih proyek Firebase Anda dan memungkinkan API:

5c77fee51ec5de49.png

Instal dependensi

Untuk gambar yang moderat, kita akan menggunakan Google Cloud Vision Client Library untuk Node.js, @ google-awan / visi , untuk menjalankan gambar melalui API Cloud Vision untuk mendeteksi gambar yang tidak pantas.

Untuk menginstal paket ini ke Fungsi aplikasi Cloud Anda, menjalankan berikut npm install --save perintah. Pastikan bahwa Anda melakukan ini dari functions direktori.

npm install --save @google-cloud/vision@2.4.0

Ini akan menginstal paket lokal dan menambahkannya sebagai ketergantungan dinyatakan dalam Anda package.json berkas.

Impor dan konfigurasikan dependensi

Untuk mengimpor dependensi yang terpasang dan beberapa modul Node.js inti ( path , os dan fs ) yang kita perlukan di bagian ini, tambahkan baris berikut ke bagian atas Anda index.js berkas:

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision.ImageAnnotatorClient();
const {promisify} = require('util');
const exec = promisify(require('child_process').exec);

const path = require('path');
const os = require('os');
const fs = require('fs');

Karena fungsi Anda akan berjalan di dalam lingkungan Google Cloud, tidak perlu mengonfigurasi pustaka Cloud Storage dan Cloud Vision: keduanya akan dikonfigurasikan secara otomatis untuk menggunakan proyek Anda.

Mendeteksi gambar yang tidak pantas

Anda akan menggunakan functions.storage.onChange Cloud Fungsi pemicu, yang menjalankan kode Anda sesegera file atau folder yang dibuat atau dimodifikasi dalam ember Cloud Storage. Tambahkan blurOffensiveImages Fungsi ke dalam index.js berkas:

index.js

// Checks if uploaded images are flagged as Adult or Violence and if so blurs them.
exports.blurOffensiveImages = functions.runWith({memory: '2GB'}).storage.object().onFinalize(
    async (object) => {
      const imageUri = `gs://${object.bucket}/${object.name}`;
      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(imageUri);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.protos.google.cloud.vision.v1.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        functions.logger.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      functions.logger.log('The image', object.name, 'has been detected as OK.');
    });

Perhatikan bahwa kami menambahkan beberapa konfigurasi instance Cloud Functions yang akan menjalankan fungsi tersebut. Dengan .runWith({memory: '2GB'}) , kami meminta contoh mendapat 2GB memori daripada default, karena fungsi ini adalah memori intensif.

Saat fungsi dipicu, gambar dijalankan melalui Cloud Vision API untuk mendeteksi apakah itu ditandai sebagai dewasa atau kekerasan. Jika gambar terdeteksi sebagai tidak patut berdasarkan kriteria ini, kita mengaburkan gambar, yang dilakukan di blurImage fungsi seperti yang akan kita lihat selanjutnya.

mengaburkan gambar

Tambahkan berikut blurImage fungsi dalam Anda index.js berkas:

index.js

// Blurs the given image located in the given bucket using ImageMagick.
async function blurImage(filePath) {
  const tempLocalFile = path.join(os.tmpdir(), path.basename(filePath));
  const messageId = filePath.split(path.sep)[1];
  const bucket = admin.storage().bucket();

  // Download file from bucket.
  await bucket.file(filePath).download({destination: tempLocalFile});
  functions.logger.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await exec(`convert "${tempLocalFile}" -channel RGBA -blur 0x24 "${tempLocalFile}"`);
  functions.logger.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  functions.logger.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  functions.logger.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  functions.logger.log('Marked the image as moderated in the database.');
}

Dalam fungsi di atas, biner gambar diunduh dari Cloud Storage. Gambar kemudian kabur menggunakan ImageMagick ini convert alat, dan versi kabur adalah re-upload pada Storage Bucket. Selanjutnya, kami menghapus file pada instance Cloud Functions untuk mengosongkan beberapa ruang disk, dan kami melakukan ini karena instance Cloud Functions yang sama dapat digunakan kembali dan jika file tidak dibersihkan, ruang disk dapat habis. Terakhir, kami menambahkan boolean ke pesan obrolan yang menunjukkan bahwa gambar telah dimoderasi, dan ini akan memicu penyegaran pesan pada klien.

Menyebarkan Fungsi

Fungsi hanya akan aktif setelah Anda menerapkannya. Pada baris perintah, jalankan firebase deploy --only functions :

firebase deploy --only functions

Ini adalah output konsol yang akan Anda lihat:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: creating function blurOffensiveImages...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Uji fungsi

Setelah fungsi berhasil di-deploy:

  1. Buka aplikasi di browser Anda menggunakan URL hosting yang (dalam bentuk https://<project-id>.firebaseapp.com ).
  2. Setelah masuk ke aplikasi, unggah gambar: 4db9fdab56703e4a.png
  3. Pilih gambar ofensif terbaik Anda untuk meng-upload (atau Anda dapat menggunakan ini makan daging Zombie !) Dan setelah beberapa saat, Anda akan melihat menyegarkan posting Anda dengan versi kabur dari gambar: 83dd904fbaf97d2b.png

10. Pemberitahuan Pesan Baru

Di bagian ini, Anda akan menambahkan Fungsi Cloud yang mengirimkan pemberitahuan kepada peserta obrolan saat pesan baru diposting.

Menggunakan Firebase Cloud Messaging (FCM), Anda dipercaya bisa mengirim pemberitahuan kepada pengguna di seluruh platform. Untuk mengirim notifikasi ke pengguna, Anda memerlukan token perangkat FCM mereka. Aplikasi web obrolan yang kami gunakan sudah mengumpulkan token perangkat dari pengguna saat mereka membuka aplikasi untuk pertama kali di browser atau perangkat baru. Token ini disimpan di Cloud Firestore di fcmTokens koleksi.

Jika Anda ingin belajar bagaimana untuk mendapatkan token perangkat FCM pada aplikasi web, Anda dapat pergi melalui Firebase Web Codelab .

Kirim pemberitahuan

Untuk mendeteksi ketika pesan baru yang diposting, Anda akan menggunakan functions.firestore.document().onCreate Cloud Fungsi pemicu, yang menjalankan kode Anda jika benda baru dibuat pada jalur tertentu Cloud Firestore. Tambahkan sendNotifications berfungsi ke dalam index.js berkas:

index.js

// Sends a notifications to all users when a new message is posted.
exports.sendNotifications = functions.firestore.document('messages/{messageId}').onCreate(
  async (snapshot) => {
    // Notification details.
    const text = snapshot.data().text;
    const payload = {
      notification: {
        title: `${snapshot.data().name} posted ${text ? 'a message' : 'an image'}`,
        body: text ? (text.length <= 100 ? text : text.substring(0, 97) + '...') : '',
        icon: snapshot.data().profilePicUrl || '/images/profile_placeholder.png',
        click_action: `https://${process.env.GCLOUD_PROJECT}.firebaseapp.com`,
      }
    };

    // Get the list of device tokens.
    const allTokens = await admin.firestore().collection('fcmTokens').get();
    const tokens = [];
    allTokens.forEach((tokenDoc) => {
      tokens.push(tokenDoc.id);
    });

    if (tokens.length > 0) {
      // Send notifications to all tokens.
      const response = await admin.messaging().sendToDevice(tokens, payload);
      await cleanupTokens(response, tokens);
      functions.logger.log('Notifications have been sent and tokens cleaned up.');
    }
  });

Dalam Fungsi di atas, kita mengumpulkan semua pengguna token perangkat dari database Cloud Firestore dan mengirim pemberitahuan ke masing-masing menggunakan admin.messaging().sendToDevice fungsi.

Bersihkan token

Terakhir, kami ingin menghapus token yang tidak lagi valid. Ini terjadi ketika token yang pernah kita dapatkan dari pengguna tidak lagi digunakan oleh browser atau perangkat. Misalnya, ini terjadi jika pengguna telah mencabut izin pemberitahuan untuk sesi browser. Untuk melakukan hal ini, tambahkan berikut cleanupTokens berfungsi dalam Anda index.js berkas:

index.js

// Cleans up the tokens that are no longer valid.
function cleanupTokens(response, tokens) {
 // For each notification we check if there was an error.
 const tokensDelete = [];
 response.results.forEach((result, index) => {
   const error = result.error;
   if (error) {
     functions.logger.error('Failure sending notification to', tokens[index], error);
     // Cleanup the tokens that are not registered anymore.
     if (error.code === 'messaging/invalid-registration-token' ||
         error.code === 'messaging/registration-token-not-registered') {
       const deleteTask = admin.firestore().collection('fcmTokens').doc(tokens[index]).delete();
       tokensDelete.push(deleteTask);
     }
   }
 });
 return Promise.all(tokensDelete);
}

Menyebarkan Fungsi

Fungsi hanya akan aktif setelah Anda menerapkannya, dan untuk menerapkannya, jalankan ini di baris perintah:

firebase deploy --only functions

Ini adalah output konsol yang akan Anda lihat:

i  deploying functions
i  functions: ensuring necessary APIs are enabled...
✔  functions: all necessary APIs are enabled
i  functions: preparing functions directory for uploading...
i  functions: packaged functions (X.XX KB) for uploading
✔  functions: functions folder uploaded successfully
i  starting release process (may take several minutes)...
i  functions: updating function addWelcomeMessages...
i  functions: updating function blurOffensiveImages...
i  functions: creating function sendNotifications...
✔  functions[addWelcomeMessages]: Successful update operation.
✔  functions[blurOffensiveImages]: Successful updating operation.
✔  functions[sendNotifications]: Successful create operation.
✔  functions: all functions deployed successfully!

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

Uji fungsi

  1. Setelah fungsi telah dikerahkan berhasil, buka aplikasi di browser Anda menggunakan URL hosting yang (dalam bentuk https://<project-id>.firebaseapp.com ).
  2. Jika Anda masuk ke aplikasi untuk pertama kalinya, pastikan Anda mengizinkan pemberitahuan saat diminta: 8b9d0c66dc36153d.png
  3. Tutup tab aplikasi obrolan atau tampilkan tab lain: Pemberitahuan hanya muncul jika aplikasi berada di latar belakang. Jika Anda ingin belajar bagaimana menerima pesan saat aplikasi Anda adalah di latar depan, kita lihat dokumentasi kami .
  4. Menggunakan browser yang berbeda (atau jendela Penyamaran), masuk ke aplikasi dan kirim pesan. Anda akan melihat pemberitahuan yang ditampilkan oleh browser pertama: 45282ab12b28b926.png

11. Selamat!

Anda telah menggunakan Firebase SDK untuk Cloud Functions dan menambahkan komponen sisi server ke aplikasi chat.

Apa yang telah kita bahas

  • Membuat Cloud Functions menggunakan Firebase SDK untuk Cloud Functions.
  • Memicu Cloud Functions berdasarkan peristiwa Auth, Cloud Storage, dan Cloud Firestore.
  • Tambahkan dukungan Firebase Cloud Messaging ke aplikasi web Anda.
  • Deploy Cloud Functions menggunakan Firebase CLI.

Langkah selanjutnya

Belajarlah lagi