Mengirim notifikasi untuk aplikasi web menggunakan Cloud Messaging dan Cloud Functions

1. Ringkasan

Dalam codelab ini, Anda akan mempelajari cara menggunakan Cloud Functions for Firebase untuk menambahkan fungsi ke aplikasi web chat dengan mengirimkan notifikasi kepada pengguna aplikasi chat.

Codelab ini dimaksudkan sebagai lanjutan dari Codelab Web Firebase, yang di dalamnya Anda akan mempelajari cara membangun aplikasi chat menggunakan Firebase Web SDK. Jika Anda ingin mempelajari cara menggunakan platform Firebase di Web dengan membuat aplikasi chat, ikuti Codelab Web Firebase terlebih dahulu. Jika Anda sudah mengetahui cara menggunakan platform Firebase dan CLI, dan ingin mempelajari Firebase SDK untuk Cloud Functions, Anda berada di tempat yang tepat. Kami akan menunjukkan cara meng-clone Firebase Web Codelab yang telah selesai di bawah.

Yang akan Anda pelajari

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

Yang Anda butuhkan

• Kartu kredit. Cloud Functions for Firebase memerlukan paket Firebase Blaze, yang berarti Anda harus mengaktifkan penagihan di project Firebase menggunakan kartu kredit.
• IDE/editor teks pilihan Anda seperti WebStorm, Atom, atau Sublime.
• Terminal untuk menjalankan perintah shell dengan NodeJS v9 terinstal.
• Browser seperti Chrome.
• Kode contoh. Lihat langkah berikutnya untuk hal ini.

2. Mendapatkan kode contoh

Clone repositori GitHub dari command line:

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

Repositori firebase-codelabs berisi project contoh untuk beberapa platform. Codelab ini hanya menggunakan dua repositori berikut:

• cloud-functions-start—Memulai kode yang akan Anda bangun dalam codelab ini. Catatan: Ini adalah kode yang sama dengan kode akhir untuk Codelab Web Firebase.
• cloud-functions—Menyelesaikan kode untuk aplikasi contoh yang telah selesai.

Catatan: Jika ingin menjalankan aplikasi yang sudah selesai, Anda masih harus membuat project di Firebase Console. Lihat bagian Membuat project Firebase dan Menyiapkan aplikasi untuk mengetahui petunjuknya.

Mengimpor aplikasi awal

Dengan menggunakan IDE Anda, buka atau impor direktori cloud-functions-start dari direktori kode contoh. Direktori ini berisi kode awal untuk codelab yang terdiri dari Aplikasi Web Chat yang berfungsi penuh.

3. Membuat project Firebase dan Menyiapkan aplikasi

Buat project

Di Firebase Console, klik Add Project dan beri nama FriendlyChat.

Klik Buat Project.

Perlu diperhatikan bahwa meskipun project Anda akan diberi nama FriendlyChat, project tersebut akan diberi ID unik dalam bentuk friendlychat-1234, yang pada akhirnya digunakan untuk mengidentifikasi project Anda.

Upgrade ke paket Blaze

Untuk menggunakan Cloud Functions for Firebase, Anda harus mengupgrade project Firebase ke paket penagihan Blaze. Hal ini mengharuskan Anda menambahkan kartu kredit atau instrumen penagihan lainnya ke akun Google Cloud.

Semua project Firebase, termasuk yang menggunakan paket Blaze, masih memiliki akses ke kuota penggunaan gratis untuk Cloud Functions. Langkah-langkah yang diuraikan dalam codelab ini akan termasuk dalam batas penggunaan paket gratis. Namun, Anda akan melihat tagihan kecil (sekitar $0,03) dari Cloud Storage yang digunakan untuk menghosting image build Cloud Functions Anda.

Jika Anda tidak memiliki akses ke kartu kredit atau tidak nyaman melanjutkan paket Blaze, pertimbangkan untuk menggunakan Firebase Emulator Suite yang memungkinkan Anda mengemulasikan Cloud Functions secara gratis di komputer lokal.

Mengaktifkan Google Auth

Agar pengguna dapat login ke aplikasi, kita akan menggunakan autentikasi Google yang harus diaktifkan.

Di Firebase Console, buka bagian Build > Authentication > tab Sign-in method (atau klik di sini untuk membukanya). Kemudian, aktifkan Penyedia Login dengan Google lalu klik Simpan. Tindakan ini akan mengizinkan pengguna untuk login di aplikasi web dengan Akun Google mereka.

Selain itu, jangan ragu untuk menyetel nama aplikasi Anda yang dapat dilihat publik menjadi Chat Ramah:

Mengaktifkan Cloud Storage

Aplikasi menggunakan Cloud Storage untuk mengupload gambar. Untuk mengaktifkan Cloud Storage di project Firebase Anda, buka bagian Storage lalu klik tombol Get started. Ikuti langkah-langkahnya di sana, dan untuk lokasi Cloud Storage, akan ada nilai default untuk digunakan. Setelah itu, klik Selesai.

Menambahkan Aplikasi Web

Di Firebase Console, tambahkan aplikasi web. Untuk melakukannya, buka Setelan Project, lalu scroll ke bawah ke Tambahkan aplikasi. Pilih web sebagai platform dan centang kotak untuk menyiapkan Firebase Hosting, lalu daftarkan aplikasi dan klik Berikutnya untuk langkah selanjutnya, lalu klik Lanjutkan ke konsol.

4. Menginstal Antarmuka Command Line Firebase

Dengan Antarmuka Command Line (CLI) Firebase, Anda dapat menyalurkan aplikasi web secara lokal serta men-deploy aplikasi web dan Cloud Functions.

Untuk menginstal CLI, Anda harus menginstal npm, yang biasanya disertai dengan NodeJS.

Untuk menginstal atau mengupgrade CLI, jalankan perintah npm berikut:

npm -g install firebase-tools

Tidak berhasil? Anda mungkin perlu mengubah izin npm.

Untuk memastikan 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 Cloud Functions. Jika tidak, jalankan npm install -g firebase-tools untuk mengupgrade seperti yang ditunjukkan di atas.

Izinkan Firebase CLI dengan menjalankan:

firebase login

Pastikan Anda berada di direktori cloud-functions-start, lalu siapkan Firebase CLI untuk menggunakan Project Firebase Anda:

firebase use --add

Selanjutnya, pilih Project ID Anda dan ikuti petunjuknya. Jika diminta, Anda dapat memilih Alias apa pun, seperti codelab.

5. Men-deploy dan menjalankan aplikasi web

Setelah mengimpor dan mengonfigurasi project, Anda siap menjalankan aplikasi web untuk pertama kalinya. Buka jendela terminal, buka folder cloud-functions-start, lalu deploy aplikasi web ke Firebase hosting 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

Membuka aplikasi web

Baris terakhir harus menampilkan URL Hosting. Sekarang aplikasi web akan disalurkan dari URL ini, yang seharusnya dalam bentuk https://<project-id>.firebaseapp.com. Bukalah. Anda akan melihat UI aplikasi chat yang berfungsi.

Login ke aplikasi menggunakan tombol LOGIN DENGAN GOOGLE dan jangan ragu untuk menambahkan beberapa pesan dan memposting gambar:

Jika Anda login ke aplikasi untuk pertama kalinya di browser baru, pastikan Anda mengizinkan notifikasi saat diminta:

Kita harus mengaktifkan notifikasi di lain waktu.

Jika tidak sengaja mengklik Blokir, Anda dapat mengubah setelan ini dengan mengklik tombol 🔒 Secure di sebelah kiri URL di Chrome Omnibar dan mengalihkan panel di samping Notifications:

Tidak melihat opsi ini? Jika Anda berada dalam sesi browser samaran, perhatikan bahwa Firebase Cloud Messaging dinonaktifkan. Untuk menyelesaikan langkah ini, gunakan sesi browser reguler.

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

6. Direktori Functions

Dengan Cloud Functions, Anda dapat dengan mudah memiliki kode yang berjalan di Cloud tanpa harus menyiapkan server. Kami akan memberikan panduan tentang cara mem-build fungsi yang bereaksi terhadap peristiwa database Firebase Auth, Cloud Storage, dan Firebase Firestore. Mari kita mulai dengan Auth.

Saat menggunakan Firebase SDK untuk Cloud Functions, kode Functions Anda akan berada di direktori functions (secara default). Kode Functions Anda juga merupakan aplikasi Node.js sehingga memerlukan package.json yang memberikan beberapa informasi tentang aplikasi Anda dan mencantumkan dependensi.

Untuk memudahkan Anda, kami telah membuat file functions/index.js yang akan menjadi tempat kode Anda. Jangan ragu untuk memeriksa file ini sebelum melanjutkan.

cd functions
ls

Jika Anda tidak terbiasa dengan Node.js, mempelajarinya lebih lanjut sebelum melanjutkan codelab akan sangat membantu.

File package.json sudah mencantumkan dua dependensi yang diperlukan: Firebase SDK untuk Cloud Functions dan Firebase Admin SDK. Untuk menginstalnya secara lokal, buka folder functions dan jalankan:

npm install

Sekarang, mari kita lihat file index.js:

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.

Kita akan mengimpor modul yang diperlukan, lalu menulis tiga Fungsi sebagai pengganti TODO. Mari mulai dengan mengimpor modul Node yang diperlukan.

7. Mengimpor modul Cloud Functions dan Firebase Admin

Dua modul akan diperlukan selama codelab ini: firebase-functions mengaktifkan penulisan pemicu dan log Cloud Functions, sementara firebase-admin mengaktifkan penggunaan platform Firebase di server dengan akses admin untuk melakukan tindakan seperti menulis ke Cloud Firestore atau mengirim notifikasi FCM.

Catatan: Untuk menggunakan FCM dengan Admin SDK, aktifkan Cloud Messaging API di halaman setelan Cloud Messaging untuk project Anda.

Di file index.js, ganti TODO pertama dengan kode berikut:

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.

Firebase Admin SDK dapat dikonfigurasi secara otomatis saat di-deploy ke lingkungan Cloud Functions atau container Google Cloud Platform lainnya, dan ini terjadi saat kami memanggil admin.initializeApp() tanpa argumen.

Sekarang, mari kita tambahkan Fungsi yang berjalan saat pengguna login untuk pertama kalinya di aplikasi chat, dan kita akan menambahkan pesan chat untuk menyambut pengguna tersebut.

8. Menyambut Pengguna Baru

Struktur pesan chat

Pesan yang diposting ke feed chat FriendlyChat disimpan di Cloud Firestore. Mari kita lihat struktur data yang kita gunakan untuk pesan. Untuk melakukannya, posting pesan baru ke chat yang bertuliskan "Halo Dunia":

Hasilnya akan terlihat seperti ini:

Di Firebase Console, klik Firestore Database di bagian Build. Anda akan melihat koleksi pesan dan satu dokumen yang berisi pesan yang Anda tulis:

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

Menambahkan pesan selamat datang

Cloud Function pertama menambahkan pesan yang menyambut pengguna baru ke chat. Untuk itu, kita dapat menggunakan pemicu functions.auth().onCreate, yang menjalankan fungsi setiap kali pengguna login untuk pertama kalinya di aplikasi Firebase. Tambahkan fungsi addWelcomeMessages ke file index.js Anda:

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 ke objek exports khusus adalah cara Node untuk membuat fungsi dapat diakses di luar file saat ini dan diperlukan untuk Cloud Functions.

Dalam fungsi di atas, kita menambahkan pesan selamat datang baru yang diposting oleh "Firebase Bot" ke daftar pesan chat. Kami melakukannya dengan menggunakan metode add di koleksi messages di Cloud Firestore, tempat pesan chat disimpan.

Karena ini adalah operasi asinkron, kita perlu menampilkan Promise yang menunjukkan kapan Cloud Firestore selesai menulis sehingga Cloud Functions tidak dijalankan terlalu awal.

Mendeploy Cloud Functions

Cloud Functions hanya akan aktif setelah Anda men-deploy-nya. Untuk melakukannya, jalankan ini pada command line:

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

Tips: Pertama kali Anda men-deploy fungsi untuk sebuah project akan memerlukan waktu lebih lama dari biasanya, karena API diaktifkan di Project Google Cloud. Durasi deployment juga bergantung pada jumlah fungsi yang di-deploy dan akan meningkat seiring waktu Anda menambahkan lebih banyak fungsi.

Menguji fungsi

Setelah fungsi berhasil di-deploy, Anda harus memiliki pengguna yang login untuk pertama kalinya.

1. Buka aplikasi Anda di browser menggunakan URL hosting (dalam bentuk https://<project-id>.firebaseapp.com).
2. Dengan pengguna baru, login untuk pertama kalinya di aplikasi Anda menggunakan tombol Login.

• Jika sudah login ke aplikasi, Anda dapat membuka Autentikasi Firebase Console dan menghapus akun Anda dari daftar pengguna. Kemudian, login lagi.

3. Setelah Anda login, pesan selamat datang akan otomatis ditampilkan:

Log: Jika pesan selamat datang tidak muncul atau jika Anda mengalami masalah lain lebih lanjut, periksa kembali output command line untuk menemukan error selama deployment. Jika terlihat berhasil, buka Log Cloud Functions untuk melihat apakah ada pesan error yang muncul. Anda juga dapat memverifikasi bahwa fungsi berhasil di-deploy dan melihat berapa kali fungsi tersebut telah dijalankan dengan beralih ke tab DASHBOARD.

9. Moderasi gambar

Pengguna dapat mengupload semua jenis gambar dalam chat. Oleh karena itu, Anda perlu memoderasi gambar yang menyinggung, terutama di platform media sosial publik. Di FriendlyChat, gambar yang dipublikasikan ke chat disimpan ke Google Cloud Storage.

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

Untuk memoderasi gambar, kita akan melalui proses berikut:

1. Periksa apakah gambar ditandai sebagai Dewasa atau Kekerasan menggunakan Cloud Vision API.
2. Jika gambar telah ditandai, download gambar pada instance Functions yang sedang berjalan.
3. Buramkan gambar menggunakan ImageMagick.
4. Upload gambar yang diburamkan ke Cloud Storage.

Mengaktifkan Cloud Vision API

Karena kita akan menggunakan Google Cloud Vision API dalam fungsi ini, Anda harus mengaktifkan API di project Firebase. Ikuti link ini, lalu pilih project Firebase Anda dan aktifkan API:

Catatan: Anda harus mengaktifkan penagihan untuk menggunakan API ini. Meskipun sebagian besar hal yang Anda lakukan dalam codelab ini harus dilakukan dalam paket tanpa biaya, ada risiko yang mungkin dikenakan kepada Anda, bergantung pada penggunaan Anda. Untuk menghindari hal ini, pastikan Anda menonaktifkan penagihan di akhir codelab ini.

Jika Anda tidak ingin mengaktifkan Penagihan, lewati bagian ini dan lanjutkan ke Notifikasi Pesan Baru.

Menginstal dependensi

Untuk memoderasi gambar, kami akan menggunakan Library Klien Google Cloud Vision untuk Node.js, @google-cloud/vision, untuk menjalankan gambar melalui Cloud Vision API untuk mendeteksi gambar yang tidak pantas.

Untuk menginstal paket ini ke aplikasi Cloud Functions Anda, jalankan perintah npm install --save berikut. Pastikan Anda melakukannya dari direktori functions.

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

Tindakan ini akan menginstal paket secara lokal dan menambahkannya sebagai dependensi yang dideklarasikan di file package.json Anda.

Mengimpor dan mengonfigurasi dependensi

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

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, Anda tidak perlu mengonfigurasi library Cloud Storage dan Cloud Vision: keduanya akan dikonfigurasi secara otomatis untuk menggunakan project Anda.

Mendeteksi gambar yang tidak pantas

Anda akan menggunakan pemicu Cloud Functions functions.storage.onChange, yang menjalankan kode segera setelah file atau folder dibuat atau diubah di bucket Cloud Storage. Tambahkan Fungsi blurOffensiveImages ke dalam file index.js Anda:

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 kita telah menambahkan beberapa konfigurasi instance Cloud Functions yang akan menjalankan fungsi tersebut. Dengan .runWith({memory: '2GB'}), kita meminta agar instance mendapatkan memori sebesar 2 GB, bukan default, karena fungsi ini menggunakan banyak memori.

Ketika fungsi dipicu, gambar akan dijalankan melalui Cloud Vision API untuk mendeteksi apakah gambar ditandai sebagai dewasa atau kekerasan. Jika gambar terdeteksi sebagai tidak pantas berdasarkan kriteria ini, kami akan memburamkan gambar tersebut, yang dilakukan dalam fungsi blurImage seperti yang akan kita lihat berikutnya.

Memburamkan gambar

Tambahkan fungsi blurImage berikut di file index.js Anda:

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.');
}

Pada fungsi di atas, biner gambar didownload dari Cloud Storage. Gambar kemudian diburamkan menggunakan alat convert ImageMagick, dan versi yang diburamkan akan diupload ulang di Bucket Penyimpanan. Selanjutnya, kita menghapus file di instance Cloud Functions untuk mengosongkan sejumlah ruang disk, dan kita melakukannya karena instance Cloud Functions yang sama dapat digunakan kembali dan jika file tidak dibersihkan, ruang disk dapat habis. Terakhir, kita menambahkan boolean ke pesan chat yang menunjukkan bahwa gambar dimoderasi, dan ini akan memicu pemuatan ulang pesan pada klien.

Men-deploy Fungsi

Fungsi ini hanya akan aktif setelah Anda men-deploy-nya. Pada command line, 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

Menguji fungsi

Setelah fungsi berhasil di-deploy:

1. Buka aplikasi Anda di browser menggunakan URL hosting (dalam bentuk https://<project-id>.firebaseapp.com).
2. Setelah login ke aplikasi, upload gambar:
3. Pilih gambar terbaik yang menyinggung untuk diupload (atau Anda dapat menggunakan Zombie pemakan daging) dan setelah beberapa saat, postingan Anda akan dimuat ulang dengan versi gambar yang diburamkan:

10. Notifikasi Pesan Baru

Di bagian ini, Anda akan menambahkan Cloud Function yang mengirimkan notifikasi kepada peserta chat saat pesan baru diposting.

Dengan menggunakan Firebase Cloud Messaging (FCM), Anda dapat mengirim notifikasi kepada pengguna di seluruh platform secara andal. Untuk mengirim notifikasi kepada pengguna, Anda memerlukan token perangkat FCM mereka. Aplikasi web chat yang kita gunakan sudah mengumpulkan token perangkat dari pengguna saat mereka membuka aplikasi untuk pertama kalinya di browser atau perangkat baru. Token ini disimpan di Cloud Firestore dalam koleksi fcmTokens.

Jika ingin mempelajari cara mendapatkan token perangkat FCM di aplikasi web, Anda dapat membuka Codelab Web Firebase.

Mengirim notifikasi

Untuk mendeteksi kapan pesan baru diposting, Anda akan menggunakan pemicu Cloud Functions functions.firestore.document().onCreate, yang menjalankan kode saat objek baru dibuat di jalur Cloud Firestore tertentu. Tambahkan fungsi sendNotifications ke dalam file index.js Anda:

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.');
    }
  });

Pada Fungsi di atas, kita mengumpulkan token perangkat semua pengguna dari database Cloud Firestore dan mengirimkan notifikasi ke setiap token menggunakan fungsi admin.messaging().sendToDevice.

Membersihkan token

Terakhir, kita ingin menghapus token yang sudah tidak valid. Hal ini terjadi jika token yang pernah kita dapatkan dari pengguna tidak lagi digunakan oleh browser atau perangkat. Misalnya, hal ini terjadi jika pengguna telah mencabut izin notifikasi untuk sesi browser. Untuk melakukannya, tambahkan fungsi cleanupTokens berikut di file index.js Anda:

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);
}

Men-deploy Fungsi

Fungsi ini hanya akan aktif setelah Anda men-deploy-nya, dan untuk men-deploy-nya, jalankan perintah ini di command line:

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

Menguji fungsi

1. Setelah fungsi berhasil di-deploy, buka aplikasi di browser menggunakan URL hosting (dalam bentuk https://<project-id>.firebaseapp.com).
2. Jika Anda login ke aplikasi untuk pertama kalinya, pastikan Anda mengizinkan notifikasi saat diminta:
3. Tutup tab aplikasi chat atau tampilkan tab lain: Notifikasi hanya muncul jika aplikasi berada di latar belakang. Jika ingin mempelajari cara menerima pesan saat aplikasi berada di latar depan, lihat dokumentasi kami.
4. Menggunakan browser lain (atau jendela Samaran), login ke aplikasi dan posting pesan. Anda akan melihat notifikasi yang ditampilkan oleh browser pertama:

Catatan: jika Anda mencoba menyesuaikan codelab ini untuk menjangkau layanan pihak ketiga di luar Google, Anda harus beralih ke paket berbayar. Lihat halaman harga untuk detail lebih lanjut.

11. Selamat!

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

Yang telah kita bahas

• Menulis Cloud Functions menggunakan Firebase SDK untuk Cloud Functions.
• Picu Cloud Functions berdasarkan peristiwa Auth, Cloud Storage, dan Cloud Firestore.
• Tambahkan dukungan Firebase Cloud Messaging ke aplikasi web Anda.
• Men-deploy Cloud Functions menggunakan Firebase CLI.

Langkah Berikutnya

• Pelajari jenis pemicu Cloud Function lainnya.
• Menggunakan Firebase dan Cloud Functions dengan aplikasi Anda sendiri.

Pelajari Lebih Lanjut

• firebase.google.com/docs/functions
• firebase.google.com