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

Cloud Messaging ve Cloud Functions'ı kullanarak bir web uygulaması için bildirim gönderme
Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Genel Bakış

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

Neler öğreneceksiniz?

Firebase SDK'sını kullanarak Google Cloud Functions oluşturun.
Auth, Cloud Storage ve Cloud Firestore etkinliklerine göre Cloud Functions'ı tetikleyin.
Web uygulamanıza Firebase Cloud Messaging desteği ekleyin.

Gerekenler

Kredi kartı. Cloud Functions for Firebase için Firebase Blaze planı gerekir. Bu nedenle, Firebase projenizde kredi kartı kullanarak faturalandırmayı etkinleştirmeniz gerekir.
WebStorm, Atom veya Sublime gibi tercih ettiğiniz IDE/metin düzenleyici.
NodeJS v9 yüklü olarak kabuk komutlarını çalıştıracak 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 kopyalayın:

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

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

IDE'nizi kullanarak örnek kod dizininden cloud-functions-start dizinini açın veya içe aktarın. Bu dizin, tamamen işlevsel bir Chat web uygulamasından oluşan codelab'in başlangıç kodunu içerir.

3. Firebase projesi oluşturun ve uygulamanızı ayarlayın

Proje oluşturma

Firebase Konsolu'nda Proje Ekle'yi tıklayın ve projeyi FriendlyChat olarak adlandırın.

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

Blaze planına yükseltme

Firebase için Cloud Functions ve Firebase için Cloud Storage'ı kullanmak istiyorsanız Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planında olması gerekir. Yani Cloud Faturalandırma hesabına bağlı olmalıdır.

Cloud Billing hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
Firebase ve Google Cloud'da yeniyseniz 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma hesabı almaya uygun olup olmadığınızı kontrol edin.
Bu kod laboratuvarını bir etkinlik kapsamında yapıyorsanız düzenleyen kişiye Cloud kredisi olup olmadığını sorun.

Kredi kartınız yoksa veya Blaze fiyatlandırma planını kullanmaya devam etmek istemiyorsanız yerel makinenizde Cloud Functions'ı ücretsiz olarak taklit etmenize olanak tanıyan Firebase Emulator Suite'i kullanabilirsiniz.

Blaze fiyatlandırma 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ındaki adımlar, ücretsiz katman kullanım sınırlarına uygundur. 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ı) alınır.

Projenizi Blaze planına yükseltmek için aşağıdaki adımları uygulayın:

Firebase konsolunda planınızı yükseltmeyi seçin.
Blaze planını seçin. Projenize bir Cloud Faturalandırma hesabı bağlamak için ekrandaki talimatları uygulayın.
Bu yükseltme kapsamında bir Cloud Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase Console'daki yükseltme akışına geri dönmeniz gerekebilir.

Google Auth'u etkinleştirme

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

Firebase Console'da Derleme bölümü > Kimlik doğrulama > Giriş yöntemi sekmesini açın (veya buraya 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 sayede kullanıcılar web uygulamasında Google Hesaplarıyla oturum açabilir.

Ayrıca, uygulamanızın herkese açık adını Samimi Sohbet olarak ayarlayabilirsiniz:

Cloud Storage for Firebase'i ayarlama

Uygulama, resim yüklemek için Cloud Storage'ı kullanır.

Firebase projenizde Cloud Storage for Firebase'i ayarlamak için:

Firebase konsolunun sol panelinde Derleme'yi genişletin ve ardından Depolama'yı seçin.
Başlayın'ı tıklayın.
Varsayılan Storage paketiniz için bir konum seçin.
US-WEST1, US-CENTRAL1 ve US-EAST1'deki paketler, Google Cloud Storage'ın "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
Depolama alanı paketiniz için güvenlik kuralları eklemeden bir uygulamayı dağıtmayın veya herkese açık olarak göstermeyin.
Oluştur'u tıklayın.

Web uygulaması ekleme

Firebase Konsolu'nda bir web uygulaması ekleyin. Bunun için Proje Ayarları'na gidin ve Uygulama ekle'ye gidin. Platform olarak web'i seçin ve Firebase Hosting'i ayarlama kutusunu işaretleyin. Ardından uygulamayı kaydedin ve adımların geri kalanı için İleri'yi, son olarak da Konsola devam et'i tıklayın.

4. Firebase Komut Satırı Arayüzü'nü yükleme

Firebase Komut Satırı Arayüzü (CLI), web uygulamasını yerel olarak yayınlamanıza ve web uygulamanızı ve Cloud Functions'ı 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 yüklendiğini doğrulamak için bir konsol açın ve aşağıdaki komutu çalıştırın:

firebase --version

Cloud Functions için gereken en yeni özelliklerin hepsine sahip olması amacıyla Firebase CLI sürümünün 4.0.0 veya daha yeni bir sürüm olduğundan emin olun. Aksi takdirde, yukarıda gösterildiği gibi yükseltmek için npm install -g firebase-tools komutunu çalıştırın.

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

firebase login

cloud-functions-start dizininde olduğunuzdan emin olduktan sonra Firebase CLI'yi Firebase projenizi kullanacak şekilde ayarlayın:

firebase use --add

Ardından proje kimliğinizi seçin ve talimatları uygulayın. İstendiğinde codelab gibi bir takma ad seçebilirsiniz.

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

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 web uygulamasını Firebase Hosting'e dağıtmak için aşağıdakilerden birini kullanın:

firebase deploy --except functions

Göreceğiniz konsol çıkışı şu şekildedir:

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

Son satırda barındırma URL'si gösterilir. Web uygulaması artık https://<project-id>.firebaseapp.com biçiminde olan bu URL'den yayınlanacaktır. Bu URL'yi açın. Chat uygulamasının çalışan kullanıcı arayüzünü görürsünüz.

GOOGLE İLE OTURUM AÇ düğmesini kullanarak uygulamada oturum açın ve mesaj ekleyip resim yayınlayabilirsiniz:

Uygulamada yeni bir tarayıcıda ilk kez oturum açarsanız istendiğinde bildirimlere izin verdiğinizden emin olun:

Bildirimlerin daha sonra etkinleştirilmesi gerekir.

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:

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

6. İşlevler Dizini

Cloud Functions, sunucu oluşturmak zorunda kalmadan bulutta kolayca çalışan kodlara sahip olmanızı sağlar. Firebase Auth, Cloud Storage ve Firebase Firestore veritabanı etkinliklerine yanıt veren işlevlerin nasıl oluşturulacağı açıklanmaktadır. Kimlik doğrulamasıyla başlayalım.

Cloud Functions için Firebase SDK'sını kullanırken Functions kodunuz varsayılan olarak functions dizininde bulunur. Functions kodunuz da bir Node.js uygulaması olduğundan, uygulamanız hakkında bazı bilgiler veren ve bağımlılıkları listeleyen bir package.json dosyasına ihtiyaç duyar.

İşinizi kolaylaştırmak için kodunuzun yerleştirileceği functions/index.js dosyasını oluşturduk. Devam etmeden önce bu dosyayı inceleyebilirsiniz.

cd functions
ls

Node.js hakkında bilginiz yoksa kod laboratuvarına devam etmeden önce bu konu hakkında daha fazla bilgi edinmeniz faydalı olacaktır.

package.json dosyasında zaten iki zorunlu bağımlılık listelenmiştir: 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 şu komutu çalıştırın:

npm install

Şimdi index.js dosyasına 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 aktarıp TODO'lar yerine üç işlev yazacağız. Gerekli Node modüllerini içe aktararak başlayalım.

7. Cloud Functions ve Firebase Yöneticisi modüllerini içe aktarma

Bu kod laboratuvarında iki modül gereklidir: firebase-functions, Cloud Functions tetikleyicileri ve günlükleri yazmanızı sağlar. firebase-admin ise Cloud Firestore'a yazma veya FCM bildirimleri gönderme gibi işlemleri yapmak için Firebase platformunu yönetici erişimi olan bir sunucuda kullanmanızı sağlar.

index.js dosyasında ilk TODO değerini 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'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. Bu, admin.initializeApp() işlevi hiçbir bağımsız değişken olmadan çağrıldığında gerçekleşir.

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

8. Yeni Kullanıcıları Karşılama

Chat mesajı yapısı

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

Bu, şu şekilde görünmelidir:

Firebase Konsolu'nda Derleme bölümünde Firestore Veritabanı'nı tıklayın. Mesajlar koleksiyonunu ve yazdığınız mesajı içeren bir dokümanı görürsünüz:

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

Karşılama mesajı ekleme

İlk Cloud işlevi, sohbete yeni kullanıcıları karşılayan bir mesaj ekler. Bunun için, 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 mevcut dosyanın dışında erişilebilir hale getirme yöntemidir ve Cloud Functions için gereklidir.

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

Bu ayarsız bir işlem olduğundan Cloud Functions'ın çok erken çalışmaması için Cloud Firestore'un ne zaman yazmayı bitirdiğini belirten Promise değerini döndürmemiz gerekir.

Cloud Functions'ı dağıtma

Cloud Functions işlevleri yalnızca dağıtıldıktan sonra etkin olur. Bunun için komut satırında şu komutu çalıştırın:

firebase deploy --only functions

Göreceğiniz konsol çıkışı şu şekildedir:

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 etme

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

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 oturum açtıysanız Firebase Console Kimlik Doğrulaması'nı açıp hesabınızı kullanıcı listesinden silebilirsiniz. Ardından tekrar oturum açın.

Oturum açtıktan sonra otomatik olarak bir karşılama mesajı gösterilir:

9. Resim moderasyon

Kullanıcılar sohbete her tür resim yükleyebilir. Özellikle herkese açık sosyal platformlarda rahatsız edici resimlerin denetlenmesi her zaman önemlidir. FriendlyChat'te sohbete yayınlanan resimler Cloud Storage paketlerinde depolanır.

Cloud Functions ile functions.storage().onFinalize tetikleyicisini kullanarak yeni resim yüklemelerini algılayabilirsiniz. Bu işlev, 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üreci uygularız:

Cloud Vision API'yi kullanarak resmin Yetişkin veya Şiddet barındıran olarak işaretlenip işaretlenmediğini kontrol edin.
Görüntü işaretlendiyse çalışan Functions örneğine indirin.
ImageMagick'i kullanarak resmi bulanıklaştırın.
Bulanıklaştırılmış resmi Cloud Storage'a yükleyin.

Cloud Vision API'yi etkinleştirme

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

Bağımlılık yükleme

Görüntüleri denetlemek için Node.js için Google Cloud Vision istemci kitaplığını (@google-cloud/vision) kullanırız. Bu kitaplık, uygunsuz görüntüleri tespit etmek için görüntüleri Cloud Vision API üzerinden çalıştırır.

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 işlem, paketi yerel olarak yükler ve package.json dosyanıza tanımlanmış bir bağımlılık olarak ekler.

Bağımlılıkları içe aktarma ve yapılandırma

Yüklenen bağımlılıkları ve bu bölümde ihtiyaç duyacağımız bazı Node.js temel 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ız gerekmez. Bu kitaplıklar, projenizi kullanacak şekilde otomatik olarak yapılandırılır.

Uygunsuz resimleri algılama

Bir Cloud Storage paketinde 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 iş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ğine bazı yapılandırmalar eklediğimizi unutmayın. .runWith({memory: '2GB'}) ile, bu işlev bellek yoğun olduğundan örneğin varsayılan yerine 2 GB bellek almasını istiyoruz.

İşlev tetiklendiğinde, görüntünün yetişkinlere uygun veya şiddet barındıran olarak işaretlenip işaretlenmediğini tespit etmek için Cloud Vision API'den geçirilir. Resim bu ölçütlere göre uygunsuz olarak algılanırsa bulanıklaştırırız. Bunu, aşağıda göreceğimiz gibi blurImage işlevinde yaparız.

Resmi 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, resim ikili dosyası Cloud Storage'dan indirilir. Ardından, ImageMagick'in convert aracı kullanılarak görüntü bulanıklaştırılır ve bulanıklaştırılmış sürüm Storage paketine yeniden yüklenir. Ardından, disk alanında yer açmak için Cloud Functions örneğindeki dosyayı siliyoruz. Bunu, aynı Cloud Functions örneğinin yeniden kullanılabilmesi ve dosyalar temizlenmezse disk alanının tükenmesi ihtimali nedeniyle yapıyoruz. Son olarak, sohbet mesajına resmin denetlenmiş olduğunu belirten bir boole değeri ekleriz. Bu işlem, istemcide mesajın yenilenmesini tetikler.

İşlevi dağıtma

İşlev yalnızca dağıtıldıktan sonra etkin olur. Komut satırında firebase deploy --only functions komutunu çalıştırın:

firebase deploy --only functions

Göreceğiniz konsol çıkışı şu şekildedir:

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 etme

İş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.
Uygulamada oturum açtıktan sonra bir resim yükleyin:
Yüklemek için en rahatsız edici resminizi seçin (veya bu et yiyen zombiyi kullanabilirsiniz). Birkaç dakika sonra, gönderinizin resmin bulanık bir versiyonuyla yenilendiğini görürsünüz:

10. Yeni Mesaj Bildirimleri

Bu bölümde, yeni bir mesaj yayınlandığında sohbet katılımcılarına bildirim gönderen bir Cloud Functions işlevi ekleyeceksiniz.

Firebase Cloud Messaging'i (FCM) kullanarak platformlar arası kullanıcılara güvenilir bir şekilde bildirim gönderebilirsiniz. Bir kullanıcıya bildirim göndermek için kullanıcının FCM cihaz jetonuna ihtiyacınız vardır. Kullandığımız sohbet web uygulaması, kullanıcılar uygulamayı yeni bir tarayıcıda veya cihazda ilk kez açtığında cihaz jetonlarını zaten toplamaktadır. Bu jetonlar, Cloud Firestore'daki fcmTokens koleksiyonunda depolanır.

Web uygulamasında FCM cihaz jetonlarını nasıl alacağınızı öğrenmek istiyorsanız Firebase Web Codelab'i inceleyebilirsiniz.

Bildirim gönderme

Yeni mesajların ne zaman yayınlandığını algılamak için functions.firestore.document().onCreate Cloud Functions tetikleyicisini kullanacaksınız. Bu tetikleyici, Cloud Firestore'un belirli bir yolunda yeni bir nesne oluşturulduğunda kodunuzu çalıştırır. 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 işlevde, tüm kullanıcıların cihaz jetonlarını Cloud Firestore veritabanından topluyoruz ve admin.messaging().sendToDevice işlevini kullanarak bunların her birine bir bildirim gönderiyoruz.

Jetonları temizleme

Son olarak, artık geçerli olmayan jetonları kaldırmak istiyoruz. Bu durum, kullanıcıdan aldığımız jeton artık tarayıcı veya cihaz tarafından kullanılmadığında ortaya çıkar. Örneğin, kullanıcı tarayıcı oturumunun bildirim iznini iptal ettiyse bu durum ortaya çıkar. 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ğıtma

İşlev yalnızca dağıtıldıktan sonra etkin olur. İşlevi dağıtmak için komut satırında şunları çalıştırın:

firebase deploy --only functions

Göreceğiniz konsol çıkışı şu şekildedir:

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 etme

İş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.
Uygulamada ilk kez oturum açıyorsanız istem gösterildiğinde bildirimlere izin verdiğinizden emin olun:
Sohbet uygulaması sekmesini kapatın veya farklı bir sekme gösterin: Bildirimler yalnızca uygulama arka plandaysa görünür. Uygulamanız ön plandayken nasıl mesaj alacağınızı öğrenmek istiyorsanız dokümanlarımıza göz atın.
Farklı bir tarayıcı (veya gizli pencere) kullanarak uygulamada oturum açın ve bir mesaj yayınlayın. İlk tarayıcı tarafından görüntülenen bir bildirim görürsünüz:

11. Tebrikler!

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

Ele aldığımız konular

Cloud Functions için Firebase SDK'yı kullanarak Cloud Functions oluşturma
Auth, Cloud Storage ve Cloud Firestore etkinliklerine göre Cloud Functions'ı tetikleyin.
Web uygulamanıza Firebase Cloud Messaging desteği ekleyin.
Firebase CLI'yi kullanarak Cloud Functions'i dağıtın.

Sonraki adımlar

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

Cloud Messaging ve Cloud Functions'ı kullanarak bir web uygulaması için bildirim gönderme Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

1. Genel Bakış

Neler öğreneceksiniz?

Gerekenler

2. Örnek kodu alın

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

3. Firebase projesi oluşturun ve uygulamanızı ayarlayın

Proje oluşturma

Blaze planına yükseltme

Google Auth'u etkinleştirme

Cloud Storage for Firebase'i ayarlama

Web uygulaması ekleme

4. Firebase Komut Satırı Arayüzü'nü yükleme

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

Web uygulamasını açma

6. İşlevler Dizini

index.js

7. Cloud Functions ve Firebase Yöneticisi modüllerini içe aktarma

index.js

8. Yeni Kullanıcıları Karşılama

Chat mesajı yapısı

Karşılama mesajı ekleme

index.js

Cloud Functions'ı dağıtma

İşlevi test etme

9. Resim moderasyon

Cloud Vision API'yi etkinleştirme

Bağımlılık yükleme

Bağımlılıkları içe aktarma ve yapılandırma

index.js

Uygunsuz resimleri algılama

index.js

Resmi bulanıklaştırma

index.js

İşlevi dağıtma

İşlevi test etme

10. Yeni Mesaj Bildirimleri

Bildirim gönderme

index.js

Jetonları temizleme

index.js

İşlevi dağıtma

İşlevi test etme

11. Tebrikler!

Ele aldığımız konular

Sonraki adımlar

Daha Fazla Bilgi

Cloud Messaging ve Cloud Functions'ı kullanarak bir web uygulaması için bildirim gönderme
Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.