Bu sayfa, Cloud Translation API ile çevrilmiştir.

Bulut Mesajlaşma ve Bulut İşlevlerini kullanarak bir web uygulaması için bildirim gönderin

1. Genel Bakış

Bu kod laboratuvarında, sohbet uygulaması 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.

ne öğreneceksin

Firebase SDK'sını kullanarak Google Cloud Functions oluşturun.
Auth, Cloud Storage ve Cloud Firestore olaylarına dayalı olarak Bulut İşlevlerini tetikleyin.
Web uygulamanıza Firebase Bulut Mesajlaşma desteği ekleyin.

Neye ihtiyacın olacak

Kredi kartı. Firebase için Bulut İşlevleri, Firebase Blaze planını gerektirir; bu, Firebase projenizde bir kredi kartı kullanarak faturalandırmayı 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ırmak için 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ın

IDE'nizi kullanarak açın veya içe aktarın. örnek kod dizininden cloud-functions-start dizini. Bu dizin, tamamen işlevsel bir Sohbet Web Uygulamasından oluşan codelab iç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'u tıklayın.

Blaze planına yükseltin

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, Cloud Functions için ücretsiz kullanım kotalarına erişmeye devam eder. Bu kod laboratuvarında özetlenen adımlar, ücretsiz katman kullanım sınırları dahilinde olacaktır. Ancak, Cloud Functions yapı görüntülerinizi barındırmak için kullanılan Cloud Storage'dan küçük ücretler ( yaklaşık 0,03 USD ) göreceksiniz.

Bir kredi kartına erişiminiz yoksa veya Blaze planına devam etmekten rahatsızsanız, Cloud Functions'ı yerel makinenizde ücretsiz olarak taklit etmenize izin verecek olan Firebase Emulator Suite'i kullanmayı düşünün.

Google Auth'u etkinleştir

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

Firebase Konsolunda Oluşturma bölümü > Kimlik Doğrulama > Oturum açma yöntemi sekmesini açın (veya oraya gitmek için buraya 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 :

Bulut Depolamayı Etkinleştir

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

Bir Web Uygulaması Ekleyin

Firebase Konsolunda bir web uygulaması ekleyin. Bunu yapmak için Proje Ayarları'na gidin ve Uygulama ekle'ye gidin. Platform olarak web'i seçin ve Firebase Hosting'i kurmak için kutuyu işaretleyin, ardından uygulamayı kaydedin ve adımların geri kalanı için İleri'ye tıklayın, son olarak Continue to console seçeneğine 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 yüklendiğini doğrulamak için bir konsol açın ve şunu çalıştırın:

firebase --version

Cloud Functions için gereken en son ö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ükseltmek 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, ardından Firebase Projenizi kullanmak için Firebase CLI'yi kurun:

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ırmaya dağıtın:

firebase deploy --except functions

Bu, görmeniz gereken konsol çıktısıdır:

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ç

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 bazı mesajlar ve resimler eklemekten çekinmeyin:

Uygulamaya yeni bir tarayıcıda ilk kez giriş yapıyorsanız, istendiğinde bildirimlere izin verdiğinizden emin olun:

Daha sonra bildirimleri etkinleştirmemiz gerekecek.

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

Şimdi, Firebase SDK for Cloud Functions'ı kullanarak bazı işlevler ekleyeceğiz.

6. İşlevler Dizini

Bulut İşlevleri, bir sunucu kurmaya 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 ile başlayalım.

Firebase SDK for Cloud Functions'ı kullanırken, Functions kodunuz (varsayılan olarak) functions dizininin altında yer alacaktır. İşlevler kodunuz da 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ığı listeler: Firebase SDK for Cloud Functions ve Firebase Admin SDK . 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 YAPILACAKLAR yerine üç İşlev yazacağız. Gerekli Düğüm modüllerini içe aktarmakla başlayalım.

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

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

index.js dosyasında, 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 Admin SDK, 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ı ekleyeceğiz.

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:

Bu şu şekilde görünmelidir:

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

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

Karşılama mesajları ekleme

İlk Bulut İşlevi, yeni kullanıcıları sohbete davet eden bir mesaj ekler. Bunun için, bir kullanıcı Firebase uygulamasında ilk kez oturum açtığında işlevi çalıştıran functions.auth().onCreate tetikleyicisini 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şlevi özel exports nesnesine eklemek, Node'un işlevi geçerli dosyanın dışından erişilebilir hale getirme yöntemidir ve Bulut İşlevleri için gereklidir.

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

Bu eşzamansız bir işlem olduğundan, Bulut İşlevlerinin çok erken yürütülmesini önlemek için Cloud Firestore'un yazmayı bitirdiğini belirten Taahhüdü geri döndürmemiz gerekir.

Bulut İşlevlerini Dağıtın

Cloud Functions, yalnızca siz onları dağıttıktan sonra etkin olacaktır. Bunu yapmak için komut satırında şunu çalıştırın:

firebase deploy --only functions

Bu, görmeniz gereken konsol çıktısıdır:

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

Fonksiyonu test edin

İşlev başarıyla dağıtıldıktan sonra, ilk kez oturum açan bir kullanıcınız olması gerekir.

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

Uygulamada zaten oturum açtıysanız, Firebase Konsol Kimlik Doğrulaması'nı açabilir ve hesabınızı kullanıcılar listesinden silebilirsiniz. Ardından tekrar oturum açın.

Oturum açtıktan sonra, otomatik olarak bir karşılama mesajı görüntülenmelidir:

9. Görüntülerin moderasyonu

Kullanıcılar, sohbete her türden görüntüyü yükleyebilir ve özellikle halka açık sosyal platformlarda rahatsız edici görüntüleri denetlemek her zaman önemlidir. FriendlyChat'te, sohbette yayınlanan görüntüler Google Cloud Storage'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ışır.

Görüntüleri denetlemek için aşağıdaki süreçten geçeceğiz:

Cloud Vision API'yi kullanarak görüntünün Yetişkinlere Uygun veya Şiddet İçeren olarak işaretlenip işaretlenmediğini kontrol edin.
Görüntü işaretlendiyse çalışan Functions örneğine indirin.
ImageMagick kullanarak görüntüyü bulanıklaştırın.
Bulanık görüntüyü Cloud Storage'a yükleyin.

Cloud Vision API'yi etkinleştirin

Bu işlevde Google Cloud Vision API 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:

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

Görüntüleri denetlemek için, uygunsuz görüntüleri algılamak üzere Cloud Vision API aracılığıyla görüntüleri ç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 onları package.json dosyanıza beyan edilmiş 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 başına 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 kullanmak için otomatik olarak yapılandırılırlar.

Uygunsuz görüntüleri algılama

Bir Cloud Storage paketinde bir dosya veya klasör oluşturulduğunda veya değiştirildiğinde kodunuzu çalıştıran functions.storage.onChange Cloud Functions tetikleyicisini kullanıyor olacaksı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şlev yoğun bellek kullandığından, örneğin varsayılan yerine 2 GB bellek almasını istiyoruz.

İşlev tetiklendiğinde, yetişkinlere yönelik veya şiddet içeren olarak işaretlenip işaretlenmediğini tespit etmek için görüntü Cloud Vision API aracılığıyla çalıştırılır. Görüntünün bu kriterlere göre 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 işlevde, 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ık sürüm, Depolama Paketine yeniden yüklenir. Ardından, biraz disk alanı boşaltmak için Cloud Functions örneğindeki dosyayı sileriz ve bunu aynı Cloud Functions örneğinin yeniden kullanılabileceği ve dosyalar temizlenmezse disk alanı tükenebileceği için yaparız. Son olarak, sohbet mesajına görüntünün denetlendiğini belirten bir boole ekliyoruz ve bu, istemcide mesajın yenilenmesini tetikleyecek.

İşlevi dağıtın

İş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

Bu, görmeniz gereken konsol çıktısıdır:

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

Fonksiyonu test edin

İşlev başarıyla konuşlandırıldıktan sonra:

Barındırma URL'sini ( https://<project-id>.firebaseapp.com biçiminde) kullanarak uygulamanızı tarayıcınızda açın.
Uygulamada oturum açtıktan sonra bir resim yükleyin:
Yüklemek için en saldırgan resminizi seçin (veya bu et yiyen Zombi'yi kullanabilirsiniz!) ve birkaç dakika sonra, resmin bulanık bir versiyonuyla gönderi yenilemenizi görmelisiniz:

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, platformlardaki kullanıcılara güvenilir bir şekilde bildirimler gönderebilirsiniz. Bir kullanıcıya bildirim göndermek için, onun FCM cihaz belirtecine ihtiyacınız vardır. Kullanmakta olduğumuz sohbet web uygulaması, uygulamayı yeni bir tarayıcıda veya cihazda ilk kez açtıklarında kullanıcılardan cihaz belirteçlerini zaten 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 gönderildiğini algılamak için, belirli bir Cloud Firestore 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 İşlevde, tüm kullanıcıların cihaz belirteçlerini Cloud Firestore veritabanından topluyoruz ve bunların her birine admin.messaging().sendToDevice işlevini kullanarak 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 belirteç artık tarayıcı veya cihaz tarafından kullanılmadığında gerçekleşir. Örneğin, kullanıcı tarayıcı oturumu için bildirim iznini iptal ettiğinde bu olur. 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ın

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

firebase deploy --only functions

Bu, görmeniz gereken konsol çıktısıdır:

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

Fonksiyonu test edin

İşlev başarıyla dağıtıldıktan sonra, barındırma URL'sini kullanarak uygulamanızı tarayıcınızda açın ( https://<project-id>.firebaseapp.com biçiminde).
Uygulamaya ilk kez giriş yapıyorsanız, istendiğinde bildirimlere izin verdiğinizden emin olun:
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.
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:

11. Tebrikler!

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

Neleri ele aldık

Cloud Functions için Firebase SDK kullanarak Cloud Functions Yazma.
Auth, Cloud Storage ve Cloud Firestore olaylarına dayalı olarak Bulut İşlevlerini tetikleyin.
Web uygulamanıza Firebase Bulut Mesajlaşma desteği ekleyin.
Firebase CLI'yi kullanarak Cloud Functions dağıtın.

Sonraki adımlar

Diğer Cloud Function tetikleyici türleri hakkında bilgi edinin.
Firebase ve Cloud Functions'ı kendi uygulamanızla kullanın.

Bulut Mesajlaşma ve Bulut İşlevlerini kullanarak bir web uygulaması için bildirim gönderin

1. Genel Bakış

ne öğreneceksin

Neye ihtiyacın olacak

2. Örnek kodu alın

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

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

proje oluştur

Blaze planına yükseltin

Google Auth'u etkinleştir

Bulut Depolamayı Etkinleştir

Bir Web Uygulaması Ekleyin

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

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

Web uygulamasını aç

6. İşlevler Dizini

index.js

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

index.js

8. Yeni Kullanıcılara Hoş Geldiniz

Sohbet mesajları yapısı

Karşılama mesajları ekleme

index.js

Bulut İşlevlerini Dağıtın

Fonksiyonu test edin

9. Görüntülerin moderasyonu

Cloud Vision API'yi etkinleştirin

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

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

index.js

Uygunsuz görüntüleri algılama

index.js

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

index.js

İşlevi dağıtın

Fonksiyonu test edin

10. Yeni Mesaj Bildirimleri

Bildirim gönder

index.js

Jetonları temizleme

index.js

İşlevi dağıtın

Fonksiyonu test edin

11. Tebrikler!

Neleri ele aldık

Sonraki adımlar

Daha fazla bilgi edin

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