Firebase için Bulut İşlevleri

1. Genel Bakış

Bu kod laboratuvarında, bir Chat Web uygulamasını geliştirmek için Google Cloud Functions için Firebase SDK'sının nasıl kullanılacağını ve Chat uygulamasının kullanıcılarına bildirim göndermek için Cloud Functions'ın nasıl kullanılacağını öğreneceksiniz.

3b1284f5144b54f6.png

ne öğreneceksin

  • Firebase SDK'sını kullanarak Google Cloud Functions oluşturun.
  • Auth, Cloud Storage ve Cloud Firestore etkinliklerine 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, bir kredi kartı kullanarak Firebase projenizde faturalandırmayı etkinleştirmeniz gerekeceği anlamına gelir.
  • Gibi seçtiğiniz IDE / metin editörü WebStorm , Atom veya Sublime .
  • NodeJS v9'un kurulu olduğu kabuk komutlarını çalıştırmak için bir terminal.
  • Chrome gibi bir tarayıcı.
  • Örnek kod. Bunun için sonraki adıma bakın.

2. Örnek kodu alın

Klon GitHub depo komut satırından:

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. android_studio_folder.png cloud-functions-start örnek kod dizinden dizin. Bu dizin, tamamen işlevsel bir Sohbet Web Uygulamasından oluşan kod laboratuvarı için başlangıç ​​kodunu içerir.

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

Proje oluştur

In Firebase Konsolundan , tıklayın Project ekleyin ve FriendlyChat diyoruz.

Proje oluşturma tıklayın.

Blaze planına yükseltin

Firebase için Bulut İşlevleri kullanmak için, sizin Firebase projeyi upgade zorunda kalacak Blaze faturalandırma planı . Bu, Google Cloud hesabınıza bir kredi kartı veya başka bir faturalandırma aracı eklemenizi gerektirir.

Blaze planındakiler de dahil olmak üzere tüm Firebase projeleri, Bulut İşlevleri için ücretsiz kullanım kotalarına erişmeye devam eder. Bu kod laboratuvarında özetlenen adımlar, ücretsiz kullanım kullanım sınırları dahilinde olacaktır. Ancak, (küçük ücretleri göreceksiniz $ 0.03 hakkında Cloud Fonksiyonlar yapı görüntüleri barındırmak için kullanılan Bulut Storage'den).

Eğer bir kredi kartına erişebilir veya kullanmayı düşünün, Blaze planı ile devam eden rahatsız etmezseniz Firebase Emulator Suite yerel makinede ücretsiz Bulut İşlevleri taklit sağlayacaktır.

Google Yetkilendirmeyi 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, Yapı bölümü açmak> Yetkilendirme> yöntem sekmede-yap (veya buraya tıklayın oraya gitmek). Ardından, Google Sign-in Sağlayıcı etkinleştirmek 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 Dostu Sohbet için uygulama herkes tarafından görülen adını ayarlamak için çekinmeyin:

8290061806aacb46.png

Bulut Depolamayı Etkinleştir

Uygulama, resimleri yüklemek için Bulut Depolamayı kullanır. Senin Firebase proje üzerinde Bulut Depolama etkinleştirmek Depolama bölümünü ziyaret 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. Sonra Done tıklayın.

Web Uygulaması Ekle

Firebase Konsolunda bir web uygulaması ekleyin. Bunu yapmak için şu adrese gidin Proje Ayarlar ve uygulama ekleyin gidin. Daha sonra uygulamayı kaydetmek ve son olarak konsola Devam tıklayarak, adımların kalanı için İleri'ye tıklayın, platform olarak web seçin ve Barındırma Firebase kurmak için kutuyu işaretleyin.

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

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

CLI'yi kurmak 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

Hepsi son Bulut Fonksiyonlar için gerekli özellikleri vardır, böylece emin olun Firebase CLI sürümü 4.0.0 üzerindedir. Değilse, koşmak npm install -g firebase-tools yukarıda gösterildiği gibi yükseltmek.

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

firebase login

Emin olan Make cloud-functions-start dizininde, sonra Firebase Project kullanmak Firebase CLI kurmak:

firebase use --add

Ardından, Proje Kimliğinizi seçin ve talimatları izleyin. İstendiğinde, gibi, herhangi bir Alias seçebilir codelab .

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

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, gezinmek açın cloud-functions-start klasörüne ve Firebase kullanarak barındırma web uygulamasını dağıtmak:

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çın

Son satır Barındırma URL'yi göstermesi gerekir. Web uygulaması şimdi 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.

SIGN-IN İLE GOOGLE düğmesini kullanarak uygulamasında Oturum açma ve bazı iletileri ve post resim eklemek için çekinmeyin:

3b1284f5144b54f6.png

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

Daha sonra bildirimleri etkinleştirmemiz gerekecek.

Yanlışlıkla Block tıkladıktan, Chrome Omnibar URL'nin solda 🔒 Güvenli düğmesini tıklayarak ve Bildirimler'in yanındaki çubuğu geçiş yaparak bu ayarı değiştirebilirsiniz:

e926868b0546ed71.png

Şimdi, Bulut İşlevleri için Firebase SDK'sını kullanarak bazı işlevler ekleyeceğiz.

6. İşlevler Dizini

Bulut İşlevleri, bir sunucu kurmak zorunda kalmadan Bulutta çalışan koda 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.

Bulut Fonksiyonlar için Firebase SDK kullanırken, Fonksiyonlar kodu altında yaşayacak functions (varsayılan olarak) dizinine. Kişisel Fonksiyonlar kodu da bir olduğunu node.js uygulaması ve bu nedenle ihtiyacı package.json uygulamanıza ve listeler bağımlılıkları hakkında bazı bilgiler verir.

Sizin için daha kolay hale getirmek için, önce oluşturduğunuz functions/index.js kodunuzu gidecek dosyayı. İlerlemeden önce bu dosyayı incelemekten çekinmeyin.

cd functions
ls

Eğer aşina değilseniz node.js önce daha fazla bu konuda öğrenme, codelab devam yararlı olacaktır.

package.json : dosyası zaten iki gerekli bağımlılıkları listeler Bulut Fonksiyonlar için Firebase SDK ve Firebase Yönetici SDK'yı . Yerel olarak yüklemek için şu adrese gidin functions klasörü ve çalıştırma:

npm install

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

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 yerine üç İşlev yazacağız. Gerekli Düğüm modüllerini içe aktararak başlayalım.

7. Bulut İşlevlerini ve Firebase Yönetici modüllerini içe aktarın

İki modül bu codelab sırasında gerekli olacaktır: firebase-functions ise Bulut Fonksiyonlar tetikler ve günlükleri yazma sağlayan firebase-admin böyle Bulut Firestore yazılı veya FCM bildirimleri göndermek gibi eylemleri yapmak için yönetici erişimi olan bir sunucu üzerinde Firebase platformunu kullanarak sağlar.

Gelen index.js dosyası, ilk değiştirin TODO takipçinizin:

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.

Bir Bulut İşlevleri çevreye veya diğer Google Cloud Platform kapsayıcılarına dağıtıldığında Firebase Yönetici SDK otomatik yapılandırılabilir ve biz diyoruz bu durumla admin.initializeApp() argüman olmadan.

Ş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 depolanı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, Yapı bölümünün altında Firestore Veritabanı tıklayın. Mesaj koleksiyonunu ve yazdığınız mesajı içeren bir belgeyi görmelisiniz:

442c9c10b5e2b245.png

Gördüğünüz gibi, sohbet iletileri ile belge olarak Bulut Firestore saklanır name , profilePicUrl , text ve timestamp eklenir nitelikler messages koleksiyonu.

Karşılama mesajları ekleme

İlk Bulut Fonksiyon sohbet yeni kullanıcılar ağırlıyor bir ileti ekler. Bunun için, tetikleyici kullanabilirsiniz functions.auth().onCreate fonksiyonunu kullanıcı Firebase uygulamasında ilk defa işaretler-her zaman çalışır. Ekle addWelcomeMessages senin içine işlev index.js dosyası:

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

Özel Bu işlevi ekleme exports nesnenin geçerli dosyanın işlevi erişilebilir dışında yapma düğümü'nü yoludur ve Bulut Fonksiyonlar için gereklidir.

Yukarıdaki işlevde, sohbet mesajları listesine "Firebase Bot" tarafından gönderilen yeni bir karşılama mesajı ekliyoruz. Biz kullanarak yapıyoruz add üzerinde yöntemini messages sohbet mesajları saklanır nerede Bulut Firestore, içinde koleksiyon.

Bu zaman uyumsuz bir işlem olduğundan, dönmek gerekir Promise Bulut İşlevleri çok erken yürütmek kalmamak Bulut Firestore bitmiş yazma sahip olduğunda gösteren.

Bulut İşlevlerini Dağıtın

Cloud Functions, yalnızca siz bunları dağıttıktan sonra etkinleşir. 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

işlevi test edin

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

  1. Barındırma URL kullanarak tarayıcınızda uygulamanızı açın (biçiminde https://<project-id>.firebaseapp.com ).
  2. Yeni bir kullanıcı ile Oturum Aç düğmesini kullanarak app ilk defa oturum.
  • Daha önce açmış varsa, açmak çok işlemi gerçekleştirebilirsiniz Firebase Konsol Authentication ve kullanıcıların listeden hesabınızı silin. Ardından, tekrar oturum açın.

262535d1b1223c65.png

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

1c70e0d64b23525b.png

9. Görüntü yönetimi

Kullanıcılar sohbete her tür görseli yükleyebilir ve özellikle halka açık sosyal platformlarda rahatsız edici görselleri ılımlı hale getirmek her zaman önemlidir. FriendlyChat olarak, sohbete yayınlanıyor görüntüleri içine saklanan Google Bulut Depolama .

Bulut Fonksiyonlar ile, kullanarak yeni resim yüklemelerini algılayabilir functions.storage().onFinalize tetik. 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:

  1. Görüntü kullanılarak Yetişkin veya şiddetli olarak işaretlenmiş olup olmadığını kontrol edin Bulut Vision API .
  2. Görüntü işaretlenmişse, onu çalışan Functions örneğine indirin.
  3. Kullanarak görüntüyü bulanıklaştır ImageMagick .
  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ızdan, firebase projenizde API'yi etkinleştirmeniz gerekir. Takip Bu bağlantıyı daha sonra Firebase projeyi seçin ve API etkinleştirmek:

5c77fee51ec5de49.png

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

Ilımlı görüntüler için biz node.js için Google Bulut Vizyon Müşteri Kütüphane kullanacağız @ google-bulut / vizyon , Bulut Vision API aracılığıyla görüntüleri çalışmasına uygunsuz resimleri algılamak için.

Cloud Fonksiyonlar app içine bu paketi yüklemek için aşağıdaki çalıştırmak npm install --save komutu. Emin dan bunu emin olun functions dizininde.

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

Bu lokal paketini kurup, bir ilan bağımlılık olarak bunları katacak package.json dosyası.

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

Yüklenen bağımlılıkları ve bazı node.js çekirdek modüllerini (aktarmak için path , os ve fs seni sonra üstüne aşağıdaki satırları ekleyin Bu bölümdeki gerekeceğini) index.js dosyası:

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

Sen kullanarak olacak functions.storage.onChange yakında bir dosya veya klasör olarak oluşturulan veya bir Cloud Storage değiştirilmiş olarak kod çalışır Bulut Fonksiyonlar tetiği. Ekle blurOffensiveImages senin içine Fonksiyonu index.js dosyası:

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. İle .runWith({memory: '2GB'}) , bu fonksiyon hafıza yoğun olduğu için örnek, hafıza ziyade varsayılan 2GB alır isteyen ediyoruz.

İşlev tetiklendiğinde, yetişkin veya şiddet içeren olarak işaretlenip işaretlenmediğini algılamak için görüntü Cloud Vision API üzerinden çalıştırılır. Görüntü bu kriterlere dayalı uygunsuz olduğu tespit edilirse, biz yapılır görüntüyü bulanık ediyoruz blurImage önümüzdeki göreceğimiz gibi işlevi.

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

Aşağıdaki ekleyin blurImage sizin de işlevini index.js dosyası:

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 en kullanılarak bulanık convert aracı ve bulanık versiyonu yeniden yüklenen Depolama Kova üzerindedir. Ardından, bir miktar 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 tetikleyecektir.

İşlevi Dağıt

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

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

işlevi test edin

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

  1. Barındırma URL kullanarak tarayıcınızda uygulamanızı açın (biçiminde https://<project-id>.firebaseapp.com ).
  2. Uygulamada oturum açtıktan sonra bir resim yükleyin: 4db9fdab56703e4a.png
  3. Yüklemesi için en iyi hücum resim seçin (veya bunu kullanabilirsiniz Zombi yeme eti !) Ve birkaç dakika sonra, resmin bulanık sürümü ile yazılan yenileme görmelisiniz: 83dd904fbaf97d2b.png

10. Yeni Mesaj Bildirimleri

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

Kullanılması Firebase Bulut Mesajlaşma (FKM), güvenilir bir platformlarında kullanıcılara bildirim gönderebilir. Bir kullanıcıya bildirim göndermek için FCM cihaz belirtecine ihtiyacınız vardır. Kullandığımız sohbet web uygulaması, uygulamayı yeni bir tarayıcıda veya cihazda ilk kez açtıklarında, kullanıcılardan cihaz belirteçlerini zaten toplar. Bu simgeler Cloud Firestore saklanır fcmTokens koleksiyonu.

Bir web uygulaması üzerinde FCM cihaz belirteçleri almak öğrenmek istiyorsanız, size geçebilir Firebase Web Codelab .

Bildirim gönder

Yeni mesajlar gönderildiğinde algılamak için, kullandığınız olacak functions.firestore.document().onCreate yeni bir nesne Bulut Firestore belirli bir yolda oluşturulduğunda kodunuzu çalışan Bulut Fonksiyonlar tetik. Ekle sendNotifications senin içine işlev index.js dosyası:

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 Fonksiyonu, biz Bulut Firestore veritabanından tüm kullanıcıların cihaz belirteçleri toplanıyor ve kullanarak bu her birine bir bildirim göndererek admin.messaging().sendToDevice fonksiyonu.

Belirteçleri temizleyin

Son olarak, artık geçerli olmayan belirteçleri kaldırmak istiyoruz. Bu, bir zamanlar kullanıcıdan aldığımız jeton artık tarayıcı veya cihaz tarafından kullanılmadığında olur. Örneğin, kullanıcı tarayıcı oturumu için bildirim iznini iptal ederse bu olur. Bunu yapmak için şunları ekleyin cleanupTokens sizin işlev index.js dosyası:

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

işlevi test edin

  1. Fonksiyon başarıyla dağıtmış sonra, barındırma URL'yi kullanarak tarayıcınızda uygulamayı açıp (biçiminde https://<project-id>.firebaseapp.com ).
  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. Eğer uygulama ön planda iken mesaj almak öğrenmek istiyorsanız, bir göz Dokümanlarımız .
  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.

Neyi kapsadık

  • Cloud Functions için Firebase SDK'sını kullanarak Cloud Functions Yazma.
  • Auth, Cloud Storage ve Cloud Firestore etkinliklerine 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

Daha fazla bilgi edin