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.
  • WebStorm , Atom veya Sublime gibi seçtiğiniz IDE/metin düzenleyicisi.
  • 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

GitHub deposunu komut satırından klonlayı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. android_studio_folder.png cloud-functions-start dizini, örnek kod dizininden. 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

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 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, Cloud Functions derleme 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 olanak sağlayacak Firebase Emulator Suite'i kullanmayı düşünün.

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, Oluştur 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 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.

Web Uygulaması Ekle

Firebase Konsolunda bir web uygulaması ekleyin. Bunu yapmak için Proje Ayarları'na gidin ve Uygulama ekle seçeneğine 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 Konsola devam et seçeneğine tıklayın.

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

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.

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

firebase login

cloud-functions-start dizininde olduğunuzdan emin olun, 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

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

Son satır, Barındırma URL'sini göstermelidir. 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.

GOOGLE İLE OTURUM AÇ düğmesini kullanarak uygulamada oturum açın ve bazı mesajlar eklemekten ve resimler göndermekten ç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 Engelle'yi 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, 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.

Cloud Functions için Firebase SDK'sını kullanırken, Functions kodunuz functions dizini altında (varsayılan olarak) yaşayacaktı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.

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

cd functions
ls

Node.js hakkında bilginiz yoksa codelab'e devam etmeden önce bu konuda daha fazla bilgi edinmek faydalı olacaktır.

package.json dosyası zaten iki gerekli bağımlılığı listeler: Cloud Functions için Firebase SDK ve Firebase Admin SDK . Bunları yerel olarak kurmak 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 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

Bu kod laboratuvarı sırasında iki modül gerekli olacaktır: 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 yapmak için yönetici erişimine sahip bir sunucuda Firebase platformunun kullanılmasını sağlar.

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 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, bağımsız değişken 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 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, 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ı, messages koleksiyonuna eklenen name , profilePicUrl , text ve timestamp niteliklerine sahip bir belge olarak Cloud Firestore'da depolanır.

Karşılama mesajları ekleme

İlk Bulut İşlevi, sohbete yeni kullanıcıları 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 functions.auth().onCreate tetikleyicisini kullanabiliriz. index.js dosyanıza addWelcomeMessages işlevini 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ışında erişilebilir kılma yöntemidir ve Bulut İşlevleri için gereklidir.

Yukarıdaki işlevde, sohbet mesajları listesine "Firebase Bot" tarafından gönderilen yeni bir karşılama mesajı 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ülmemesi için Cloud Firestore'un yazmayı ne zaman bitirdiğini belirten Sözü döndürmemiz gerekir.

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'sini ( https://<project-id>.firebaseapp.com ) 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 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'te, sohbette yayınlanan resimler Google Cloud Storage'da depolanır.

Cloud Functions ile, functions.storage().onFinalize tetikleyicisini kullanarak yeni görüntü yüklemelerini algılayabilirsiniz. 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. Cloud Vision API'yi kullanarak görüntünün Yetişkin veya Şiddet olarak işaretlenip işaretlenmediğini kontrol edin.
  2. Görüntü işaretlenmişse, onu çalışan Functions örneğine indirin.
  3. ImageMagick 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ızdan, 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 için, uygunsuz görüntüleri algılamak üzere görüntüleri Cloud Vision API aracılığıyla çalıştırmak için @google-cloud/vision olan Node.js için Google Cloud Vision İstemci Kitaplığı'nı 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 bildirilmiş 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 en ü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 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ğu veya değiştirildiği anda 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, örneğin varsayılan yerine 2 GB bellek almasını istiyoruz, çünkü bu işlev bellek yoğundur.

İş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 göre uygunsuz olarak algılanırsa, 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 Kovasına yeniden yüklenir. 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 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'sini ( https://<project-id>.firebaseapp.com ) 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 saldırgan resminizi seçin (veya bu et yiyen Zombi'yi kullanabilirsiniz!) ve birkaç dakika sonra, gönderinizin resmin bulanık bir versiyonuyla yenilendiğini 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.

Firebase Cloud Messaging'i (FCM) kullanarak, kullanıcılara platformlar arasında 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ı, uygulamayı yeni bir tarayıcıda veya cihazda ilk kez açtıklarında, kullanıcılardan cihaz belirteçlerini zaten toplar. Bu jetonlar, fcmTokens koleksiyonundaki Cloud Firestore'da depolanır.

Bir web uygulamasında FCM cihaz belirteçlerini nasıl alacağınızı öğrenmek istiyorsanız 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. index.js dosyanıza sendNotifications işlevini 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, Cloud Firestore veritabanından tüm kullanıcıların cihaz belirteçlerini topluyoruz ve admin.messaging().sendToDevice işlevini kullanarak bunların her birine bir bildirim gönderiyoruz.

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 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 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. İşlev başarıyla dağıtıldığında, barındırma URL'sini ( https://<project-id>.firebaseapp.com ) 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 dökümanlarımıza 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.

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