Cloud Messaging ve Cloud Functions'ı kullanarak bir web uygulaması için bildirim gönderme

1. Genel Bakış

Bu codelab'de, sohbet uygulamasının kullanıcılarına bildirimler göndererek bir sohbet web uygulamasına işlevsellik eklemek için Cloud Functions for Firebase'i nasıl kullanacağınızı öğreneceksiniz.

3b1284f5144b54f6.png

Ne öğreneceksin

  • Firebase SDK'yı kullanarak Google Cloud Functions oluşturun.
  • Auth, Cloud Storage ve Cloud Firestore olaylarına göre Bulut İşlevlerini tetikleyin.
  • Web uygulamanıza Firebase Cloud Messaging desteğini ekleyin.

İhtiyacınız olan şey

  • Kredi kartı. Firebase için Bulut İşlevleri, Firebase Blaze planını gerektirir; bu, Firebase projenizde faturalandırmayı kredi kartı kullanarak etkinleştirmeniz gerektiği anlamına gelir.
  • WebStorm , Atom veya Sublime gibi seçtiğiniz IDE/metin düzenleyicisi.
  • NodeJS v9 yüklüyken kabuk komutlarını çalıştıran bir terminal.
  • Chrome gibi bir tarayıcı.
  • Örnek kod. Bunun için bir sonraki adıma bakın.

2. Örnek kodu alın

GitHub deposunu komut satırından kopyalayın:

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

Başlangıç ​​uygulamasını içe aktar

IDE'nizi kullanarak açın veya içe aktarın android_studio_folder.png örnek kod dizininden cloud-functions-start dizinini seçin. Bu dizin, tamamen işlevsel bir Sohbet Web Uygulamasından oluşan codelab'in başlangıç ​​kodunu içerir.

3. Bir Firebase projesi oluşturun ve uygulamanızı kurun

Proje oluştur

Firebase Konsolunda Proje Ekle'ye tıklayın ve buna FriendlyChat adını verin.

Proje Oluştur'a tıklayın.

Blaze planına yükseltme

Cloud Functions for Firebase'i kullanmak için Firebase projenizi Blaze faturalandırma planına yükseltmeniz gerekir. Bu, Google Cloud hesabınıza bir kredi kartı veya başka bir faturalandırma aracı eklemenizi gerektirecektir.

Blaze planındakiler de dahil olmak üzere tüm Firebase projeleri hâlâ Cloud Functions'ın ücretsiz kullanım kotalarına erişebilir. Bu codelab'de özetlenen adımlar, ücretsiz kullanım kullanım sınırları dahilinde olacaktır. Ancak, Cloud Functions derleme görüntülerinizi barındırmak için kullanılan Cloud Storage'dan küçük ücretler ( yaklaşık 0,03 ABD doları ) göreceksiniz.

Kredi kartına erişiminiz yoksa veya Blaze planına devam etmekten rahatsızlık duyuyorsanız, Cloud Functions'ı yerel makinenizde ücretsiz olarak taklit etmenize olanak tanıyan Firebase Emulator Suite'i kullanmayı düşünün.

Google Auth'u etkinleştirin

Kullanıcıların uygulamada oturum açmasına izin vermek için etkinleştirilmesi gereken Google kimlik doğrulamasını kullanacağız.

Firebase Konsolu'nda Derleme bölümü > Kimlik Doğrulama > Oturum açma yöntemi sekmesini açın (veya oraya gitmek için burayı tıklayın ). Ardından Google Oturum Açma Sağlayıcısını etkinleştirin ve Kaydet'i tıklayın. Bu, kullanıcıların web uygulamasında Google hesaplarıyla oturum açmasına olanak tanır.

Ayrıca, uygulamanızın herkese açık adını Dostça Sohbet olarak ayarlamaktan çekinmeyin:

8290061806aacb46.png

Bulut Depolamayı Etkinleştir

Uygulama, resimleri yüklemek için Bulut Depolamayı kullanır. Firebase projenizde Cloud Storage'ı etkinleştirmek için Depolama bölümünü ziyaret edin ve Başlayın düğmesine tıklayın. Buradaki adımları izleyin; Bulut Depolama konumu için kullanılacak varsayılan bir değer olacaktır. Daha sonra Bitti'yi tıklayın.

Web Uygulaması Ekle

Firebase Console'da bir web uygulaması ekleyin. Bunu yapmak için Proje Ayarları'na gidin ve Uygulama ekle seçeneğine ilerleyin. Platform olarak web'i seçin ve Firebase Hosting kurulumuna ilişkin kutuyu işaretleyin, ardından uygulamayı kaydedin ve geri kalan adımlar için İleri'ye tıklayın ve son olarak Konsola devam et'e tıklayın.

4. Firebase Komut Satırı Arayüzünü Kurun

Firebase Komut Satırı Arayüzü (CLI), web uygulamasını yerel olarak sunmanıza ve web uygulamanızı ve Bulut İşlevlerinizi dağıtmanıza olanak tanır.

CLI'yi yüklemek veya yükseltmek için aşağıdaki npm komutunu çalıştırın:

npm -g install firebase-tools

CLI'nin doğru şekilde kurulduğunu doğrulamak için bir konsol açın ve şunu çalıştırın:

firebase --version

Cloud Functions için gereken en yeni özelliklerin tümüne sahip olması için Firebase CLI sürümünün 4.0.0'ın üzerinde olduğundan emin olun. Değilse, yukarıda gösterildiği gibi yükseltme yapmak için npm install -g firebase-tools çalıştırın.

Aşağıdakileri çalıştırarak Firebase CLI'yi yetkilendirin:

firebase login

cloud-functions-start dizininde olduğunuzdan emin olun ve ardından Firebase Projenizi kullanmak için Firebase CLI'yi ayarlayın:

firebase use --add

Ardından Proje Kimliğinizi seçin ve talimatları izleyin. İstendiğinde codelab gibi herhangi bir Takma Adı seçebilirsiniz.

5. Web uygulamasını dağıtın ve çalıştırın

Artık projenizi içe aktarıp yapılandırdığınıza göre web uygulamasını ilk kez çalıştırmaya hazırsınız! Bir terminal penceresi açın, cloud-functions-start klasörüne gidin ve aşağıdakileri kullanarak web uygulamasını Firebase barındırma hizmetine dağıtın:

firebase deploy --except functions

Görmeniz gereken konsol çıktısı budur:

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

Web uygulamasını açın

Son satır Barındırma URL'sini göstermelidir. Web uygulaması artık https://<project-id>.firebaseapp.com biçiminde olması gereken bu URL'den sunulmalıdır. Aç onu. Bir sohbet uygulamasının çalışan kullanıcı arayüzünü görmelisiniz.

GOOGLE İLE OTURUM AÇ düğmesini kullanarak uygulamada oturum açın ve birkaç mesaj eklemekten ve resim göndermekten çekinmeyin:

3b1284f5144b54f6.png

Uygulamada ilk kez yeni bir tarayıcıda oturum açıyorsanız istendiğinde bildirimlere izin verdiğinizden emin olun: 8b9d0c66dc36153d.png

Daha sonra bildirimleri etkinleştirmemiz gerekecek.

Yanlışlıkla Engelle'ye tıkladıysanız, Chrome Omnibar'da URL'nin solundaki 🔒 Güvenli düğmesini tıklayıp Bildirimler'in yanındaki çubuğu değiştirerek bu ayarı değiştirebilirsiniz:

e926868b0546ed71.png

Şimdi Cloud Functions için Firebase SDK'yı kullanarak bazı işlevler ekleyeceğiz.

6. İşlev Dizini

Bulut İşlevleri, bir sunucu kurmanıza gerek kalmadan Bulutta çalışan kodlara kolayca sahip olmanızı sağlar. Firebase Auth, Cloud Storage ve Firebase Firestore veritabanı olaylarına tepki veren işlevlerin nasıl oluşturulacağını inceleyeceğiz. Auth'la başlayalım.

Cloud Functions için Firebase SDK'yı kullanırken, Functions kodunuz, functions dizini altında yer alır (varsayılan olarak). İşlev kodunuz aynı zamanda bir Node.js uygulamasıdır ve bu nedenle uygulamanız hakkında bazı bilgiler veren ve bağımlılıkları listeleyen bir package.json ihtiyaç duyar.

İşinizi kolaylaştırmak için kodunuzun gideceği functions/index.js dosyasını zaten oluşturduk. Devam etmeden önce bu dosyayı incelemekten çekinmeyin.

cd functions
ls

Node.js'ye aşina değilseniz codelab'e devam etmeden önce onun hakkında daha fazla bilgi edinmek faydalı olacaktır.

package.json dosyası zaten iki gerekli bağımlılığı listeliyor: Cloud Functions için Firebase SDK'sı ve Firebase Admin SDK'sı . Bunları yerel olarak yüklemek için functions klasörüne gidin ve şunu çalıştırın:

npm install

Şimdi index.js dosyasına bir göz atalım:

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.

Gerekli modülleri içe aktaracağız ve ardından TODO'ların yerine üç İşlev yazacağız. Gerekli Node modüllerini içe aktararak başlayalım.

7. Cloud Functions ve Firebase Admin modüllerini içe aktarın

Bu codelab sırasında iki modül gerekli olacaktır: firebase-functions Cloud Functions tetikleyicilerinin ve günlüklerinin yazılmasına olanak sağlarken firebase-admin Cloud Firestore'a yazma veya FCM bildirimleri gönderme gibi eylemleri gerçekleştirmek için Firebase platformunun yönetici erişimi olan bir sunucuda kullanılmasına olanak tanır.

index.js dosyasındaki ilk TODO aşağıdakiyle değiştirin:

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 Yönetici SDK'sı, bir Cloud Functions ortamına veya diğer Google Cloud Platform kapsayıcılarına dağıtıldığında otomatik olarak yapılandırılabilir ve bu, hiçbir argüman olmadan admin.initializeApp() çağırdığımızda gerçekleşir.

Şimdi, bir kullanıcı sohbet uygulamasında ilk kez oturum açtığında çalışan bir İşlev ekleyelim ve kullanıcıyı karşılamak için bir sohbet mesajı ekleyelim.

8. Yeni Kullanıcılara Hoş Geldiniz

Sohbet mesajları yapısı

FriendlyChat sohbet akışına gönderilen mesajlar Cloud Firestore'da saklanır. Bir mesaj için kullandığımız veri yapısına bir göz atalım. Bunu yapmak için sohbete "Merhaba Dünya" yazan yeni bir mesaj gönderin:

11f5a676fbb1a69a.png

Bu şu şekilde görünmelidir:

fe6d1c020d0744cf.png

Firebase Konsolunda, Oluştur bölümünün altındaki Firestore Veritabanı'na tıklayın. Mesaj koleksiyonunu ve yazdığınız mesajı içeren bir belgeyi görmelisiniz:

442c9c10b5e2b245.png

Gördüğünüz gibi, sohbet mesajları Cloud Firestore'da name , profilePicUrl , text ve timestamp niteliklerinin messages koleksiyonuna eklendiği bir belge olarak depolanır.

Hoş geldiniz mesajları ekleme

İlk Bulut İşlevi, sohbete yeni kullanıcıları hoş karşılayan bir mesaj ekler. Bunun için, bir kullanıcı Firebase uygulamasında ilk kez oturum açtığında işlevi çalıştıran tetikleyici functions.auth().onCreate kullanabiliriz. addWelcomeMessages işlevini index.js dosyanıza ekleyin:

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

Bu işlevin özel exports nesnesine eklenmesi, Node'un işlevi geçerli dosyanın dışında erişilebilir hale getirme yoludur ve Bulut İşlevleri için gereklidir.

Yukarıdaki fonksiyonda "Firebase Bot" tarafından gönderilen yeni bir karşılama mesajını sohbet mesajları listesine ekliyoruz. Bunu sohbet mesajlarının saklandığı Cloud Firestore'daki messages koleksiyonunda add yöntemini kullanarak yapıyoruz.

Bu eşzamansız bir işlem olduğundan, Bulut İşlevlerinin çok erken yürütülmemesi için Cloud Firestore'un yazmayı bitirdiğini belirten Promise'ı geri göndermemiz gerekir.

Bulut İşlevlerini Dağıtın

Bulut İşlevleri yalnızca siz bunları dağıttıktan sonra etkin olacaktır. Bunu yapmak için komut satırında şunu çalıştırın:

firebase deploy --only functions

Görmeniz gereken konsol çıktısı budur:

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

İşlevi test edin

İşlev başarıyla dağıtıldığında, ilk kez oturum açan bir kullanıcıya sahip olmanız gerekir.

  1. Barındırma URL'sini ( https://<project-id>.firebaseapp.com biçiminde) kullanarak uygulamanızı tarayıcınızda açın.
  2. Yeni bir kullanıcıyla, Oturum Aç düğmesini kullanarak uygulamanızda ilk kez oturum açın.

262535d1b1223c65.png

  1. Oturum açtıktan sonra otomatik olarak bir hoş geldiniz mesajı görüntülenmelidir:

1c70e0d64b23525b.png

9. Görüntülerin denetlenmesi

Kullanıcılar sohbete her türlü görseli yükleyebilir ve özellikle halka açık sosyal platformlarda rahatsız edici görsellerin denetlenmesi her zaman önemlidir. FriendlyChat'te sohbette yayınlanan görüntüler Google Bulut Depolama'da depolanır.

Cloud Functions ile, functions.storage().onFinalize tetikleyicisini kullanarak yeni görüntü yüklemelerini tespit edebilirsiniz. Bu, Cloud Storage'a her yeni dosya yüklendiğinde veya değiştirildiğinde çalışacaktır.

Resimleri denetlemek için aşağıdaki süreçten geçeceğiz:

  1. Cloud Vision API'yi kullanarak görüntünün Yetişkinlere Yönelik veya Şiddet İçeren olarak işaretlenip işaretlenmediğini kontrol edin.
  2. Görüntü işaretlenmişse onu çalışan Functions örneğinden indirin.
  3. ImageMagick'i kullanarak görüntüyü bulanıklaştırın.
  4. Bulanık görüntüyü Cloud Storage'a yükleyin.

Cloud Vision API'yi etkinleştirin

Bu işlevde Google Cloud Vision API'yi kullanacağımız için Firebase projenizde API'yi etkinleştirmeniz gerekir. Bu bağlantıyı takip edin, ardından Firebase projenizi seçin ve API'yi etkinleştirin:

5c77fee51ec5de49.png

Bağımlılıkları yükle

Görüntüleri denetlemek amacıyla, uygunsuz görüntüleri tespit etmek amacıyla görüntüleri Cloud Vision API aracılığıyla çalıştırmak için Node.js için Google Cloud Vision İstemci Kitaplığı @google-cloud/vision'ı kullanacağız.

Bu paketi Cloud Functions uygulamanıza yüklemek için aşağıdaki npm install --save komutunu çalıştırın. Bunu functions dizininden yaptığınızdan emin olun.

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

Bu, paketi yerel olarak yükleyecek ve bunları package.json dosyanıza bildirilen bir bağımlılık olarak ekleyecektir.

Bağımlılıkları içe aktarın ve yapılandırın

Yüklenen bağımlılıkları ve bu bölümde ihtiyaç duyacağımız bazı Node.js çekirdek modüllerini ( path , os ve fs ) içe aktarmak için index.js dosyanızın üstüne aşağıdaki satırları ekleyin:

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

İşleviniz bir Google Cloud ortamında çalışacağından Cloud Storage ve Cloud Vision kitaplıklarını yapılandırmanıza gerek yoktur: projenizi kullanacak şekilde otomatik olarak yapılandırılırlar.

Uygunsuz görsellerin tespiti

Cloud Storage paketinde bir dosya veya klasör oluşturulduğunda ya da değiştirildiğinde kodunuzu çalıştıran functions.storage.onChange Cloud Functions tetikleyicisini kullanacaksınız. blurOffensiveImages İşlevini index.js dosyanıza ekleyin:

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

İşlevi çalıştıracak Cloud Functions örneğinin bazı yapılandırmalarını eklediğimizi unutmayın. .runWith({memory: '2GB'}) ile, bu işlevin bellek yoğun olması nedeniyle örneğin varsayılan yerine 2 GB bellek almasını istiyoruz.

İşlev tetiklendiğinde görüntü, yetişkinlere yönelik veya şiddet içeren olarak işaretlenip işaretlenmediğini tespit etmek için Cloud Vision API üzerinden çalıştırılır. Bu kriterlere göre görüntünün uygunsuz olduğu tespit edilirse, daha sonra göreceğimiz gibi, blurImage işlevinde yapılan görüntüyü bulanıklaştırıyoruz.

Görüntüyü bulanıklaştırma

index.js dosyanıza aşağıdaki blurImage işlevini ekleyin:

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

Yukarıdaki fonksiyonda görüntü ikili dosyası Cloud Storage'dan indirilir. Görüntü daha sonra ImageMagick'in convert aracı kullanılarak bulanıklaştırılır ve bulanıklaştırılmış sürüm, Depolama Kovasına yeniden yüklenir. Daha sonra, bir miktar disk alanı boşaltmak için Cloud Functions örneğindeki dosyayı sileriz ve bunu yapıyoruz çünkü aynı Cloud Functions örneği yeniden kullanılabilir ve dosyalar temizlenmezse disk alanı tükenebilir. Son olarak, sohbet mesajına görüntünün denetlendiğini belirten bir boole ekliyoruz ve bu, istemcide mesajın yenilenmesini tetikleyecektir.

İşlevi Dağıt

İşlev yalnızca siz onu dağıttıktan sonra etkin olacaktır. Komut satırında firebase deploy --only functions çalıştırın:

firebase deploy --only functions

Görmeniz gereken konsol çıktısı budur:

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

İşlevi test edin

İşlev başarıyla dağıtıldıktan sonra:

  1. Barındırma URL'sini ( https://<project-id>.firebaseapp.com biçiminde) kullanarak uygulamanızı tarayıcınızda açın.
  2. Uygulamada oturum açtıktan sonra bir resim yükleyin: 4db9fdab56703e4a.png
  3. Yüklemek için en iyi rahatsız edici görselinizi seçin (veya bu et yiyen Zombi'yi kullanabilirsiniz!) ve birkaç dakika sonra gönderinin, görselin bulanık bir versiyonuyla yenilendiğini görmelisiniz: 83dd904fbaf97d2b.png

10. Yeni Mesaj Bildirimleri

Bu bölümde, yeni bir mesaj gönderildiğinde sohbet katılımcılarına bildirim gönderen bir Bulut İşlevi ekleyeceksiniz.

Firebase Cloud Messaging'i (FCM) kullanarak farklı platformlardaki kullanıcılara güvenilir bir şekilde bildirim gönderebilirsiniz. Bir kullanıcıya bildirim göndermek için FCM cihaz belirtecine ihtiyacınız vardır. Kullandığımız sohbet web uygulaması, kullanıcılar uygulamayı yeni bir tarayıcı veya cihazda ilk kez açtıklarında zaten cihaz belirteçlerini topluyor. Bu belirteçler, fcmTokens koleksiyonundaki Cloud Firestore'da depolanır.

Bir web uygulamasında FCM cihaz belirteçlerini nasıl alacağınızı öğrenmek isterseniz Firebase Web Codelab'i inceleyebilirsiniz.

Bildirim gönder

Yeni mesajların ne zaman yayınlandığını tespit etmek için, Cloud Firestore'un belirli bir yolunda yeni bir nesne oluşturulduğunda kodunuzu çalıştıran functions.firestore.document().onCreate Cloud Functions tetikleyicisini kullanacaksınız. sendNotifications işlevini index.js dosyanıza ekleyin:

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

Yukarıdaki Fonksiyonda, Cloud Firestore veritabanından tüm kullanıcıların cihaz tokenlarını topluyoruz ve admin.messaging().sendToDevice fonksiyonunu kullanarak bunların her birine bir bildirim gönderiyoruz.

Jetonları temizleme

Son olarak artık geçerli olmayan jetonları kaldırmak istiyoruz. Bu, bir zamanlar kullanıcıdan aldığımız jetonun artık tarayıcı veya cihaz tarafından kullanılmaması durumunda meydana gelir. Örneğin, kullanıcı tarayıcı oturumu için bildirim iznini iptal ettiğinde bu durum meydana gelir. Bunu yapmak için index.js dosyanıza aşağıdaki cleanupTokens işlevini ekleyin:

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

İşlevi Dağıt

İşlev yalnızca siz onu dağıttıktan sonra etkin olacaktır ve dağıtmak için şunu komut satırında çalıştırın:

firebase deploy --only functions

Görmeniz gereken konsol çıktısı budur:

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

İşlevi test edin

  1. İşlev başarıyla dağıtıldıktan sonra, barındırma URL'sini ( https://<project-id>.firebaseapp.com biçiminde) kullanarak uygulamanızı tarayıcınızda açın.
  2. Uygulamada ilk kez oturum açıyorsanız istendiğinde bildirimlere izin verdiğinizden emin olun: 8b9d0c66dc36153d.png
  3. Sohbet uygulaması sekmesini kapatın veya farklı bir sekme görüntüleyin: Bildirimler yalnızca uygulama arka plandaysa görünür. Uygulamanız ön plandayken nasıl mesaj alacağınızı öğrenmek istiyorsanız belgelerimize göz atın.
  4. Farklı bir tarayıcı (veya Gizli pencere) kullanarak uygulamada oturum açın ve bir mesaj gönderin. İlk tarayıcı tarafından görüntülenen bir bildirim görmelisiniz: 45282ab12b28b926.png

11. Tebrikler!

Cloud Functions için Firebase SDK'sını kullandınız ve bir sohbet uygulamasına sunucu tarafı bileşenleri eklediniz.

Neleri ele aldık?

  • Cloud Functions için Firebase SDK'yı kullanarak Cloud Functions yazma.
  • Auth, Cloud Storage ve Cloud Firestore olaylarına göre Bulut İşlevlerini tetikleyin.
  • Web uygulamanıza Firebase Cloud Messaging desteğini ekleyin.
  • Firebase CLI'yi kullanarak Bulut İşlevlerini dağıtın.

Sonraki adımlar

Daha fazla bilgi edin