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

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

1. Genel Bakış

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

Neler öğreneceksiniz?

Firebase SDK'sını kullanarak Google Cloud Functions işlevleri oluşturun.
Auth, Cloud Storage ve Cloud Firestore etkinliklerine dayalı olarak Cloud Functions'ı tetikleyin.
Web uygulamanıza Firebase Cloud Messaging desteğini 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.
Tercih ettiğiniz WebStorm, Atom veya Sublime gibi bir IDE/metin düzenleyici.
NodeJS v9 yüklü olarak kabuk komutlarını çalıştıracak bir terminal.
Chrome gibi bir tarayıcı.
Örnek kod. Bu işlem 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 aktarın

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

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 Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
Firebase ve Google Cloud'u kullanmaya yeni başladıysanız 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma Hesabı için 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ı izleyin:

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 gerektiyse yükseltme işlemini tamamlamak için Firebase konsolunda yükseltme akışına geri dönmeniz gerekebilir.

Google Kimlik Doğrulama'yı etkinleştir

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 Google hesaplarını kullanarak web uygulamasında oturum açabilir.

Ayrıca, uygulamanızın herkese açık adını Dostça 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ü (KSA), web uygulamasını yerel olarak sunmanın yanı sıra web uygulamanızı ve Cloud Functions'ı dağıtmanızı sağlar.

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

npm -g install firebase-tools

CLI'ın doğru şekilde yüklendiğini doğrulamak için bir konsol açıp aşağıdaki komutu çalıştırın:

firebase --version

Cloud Functions'da gereken en yeni özelliklerin tümüne sahip olması için Firebase CLI sürümünün 4.0.0'dan büyük olduğundan emin olun. Değilse yukarıda gösterildiği şekilde yeni sürüme geçmek için npm install -g firebase-tools komutunu çalıştırın.

Firebase CLI'ı yetkilendirin. Bunun için şu komutu çalıştırın:

firebase login

cloud-functions-start dizininde olduğunuzdan emin olun ve Firebase Projenizi kullanmak için Firebase CLI'ı 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çın

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. Bir sohbet 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. Birkaç mesaj ve resim eklemekten çekinmeyin:

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

Yanlışlıkla Engelle'yi tıkladıysanız Chrome Çok Amaçlı Adres Çubuğu'nda URL'nin solundaki 🔒 Güvenli düğmesini tıklayarak ve Bildirimler'in yanındaki çubuğu açıp kapatarak 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 kurulumu gerekmeden kolayca Cloud'da ç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 functions dizininde (varsayılan olarak) bulunur. Functions kodunuz aynı zamanda bir Node.js uygulaması olduğundan uygulamanız hakkında bazı bilgiler veren ve bağımlılıkları listeleyen bir package.json gerektirir.

İşinizi kolaylaştırmak için kodunuzun ekleneceği functions/index.js dosyasını zaten 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 gidip ş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 Düğüm modüllerini içe aktararak başlayalım.

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

Bu codelab'de iki modül gereklidir: firebase-functions, Cloud Functions tetikleyicilerinin ve günlüklerinin yazılmasını etkinleştirir. firebase-admin ise yönetici erişimi olan bir sunucuda Firebase platformunu kullanarak Cloud Firestore'a yazma veya FCM bildirimleri gönderme gibi işlemler yapmanı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 başka Google Cloud Platform kapsayıcılarına dağıtıldığında otomatik olarak yapılandırılabilir. Bu durum, bağımsız değişken olmadan admin.initializeApp() çağrısı yaptığımızda 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 mesajlarının yapısı

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

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

Firebase konsolunda Build (Derleme) bölümünde Firestore Database'i (Firestore Veritabanı) tıklayın. İleti koleksiyonunu ve yazdığınız iletiyi içeren bir doküman göreceksiniz:

Gördüğünüz gibi sohbet mesajları, messages koleksiyonuna eklenen name, profilePicUrl, text ve timestamp özellikleriyle birlikte, Cloud Firestore'da 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ışından 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. Bu işlemi, sohbet mesajlarının depolandığı Cloud Firestore'daki messages koleksiyonunda bulunan add yöntemini kullanarak gerçekleştiriyoruz.

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ın 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 halihazırda oturum açtıysanız Firebase Console Authentication'ı açarak 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örüntülenir:

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, sohbette yayınlanan görüntüler Cloud Storage paketlerinde depolanır.

Cloud Functions ile functions.storage().onFinalize tetikleyicisini kullanarak yeni resim yüklemelerini algılayabilirsiniz. Bu işlem, Cloud Storage'da yeni bir dosya yüklendiğinde veya değiştirildiğinde çalıştırılır.

Resimleri denetlemek için şu süreci izleriz:

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 onu çalışan Functions örneğine indirin.
ImageMagick özelliğini 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ı ziyaret edin, ardından Firebase projenizi seçin ve API'yi etkinleştirin:

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

Görüntüleri yönetmek ve Node.js için Google Cloud Vision İstemci Kitaplığı'nı (@google-cloud/vision) Cloud Vision API aracılığıyla çalıştırarak uygunsuz görüntüleri tespit etmek amacıyla kullanırız.

Bu paketi Cloud Functions uygulamanıza yüklemek için aşağıdaki npm install --save komutunu çalıştırın. Bu işlemi 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ıları içe aktarma ve yapılandırma

Yüklü bağımlılıkları ve bu bölümde ihtiyaç duyacağımız bazı Node.js çekirdek modüllerini (path, os ve fs) içe aktarmak için index.js dosyanızın üst kısmı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ğı için Cloud Storage ve Cloud Vision kitaplıklarını yapılandırmanıza gerek yoktur. Bu kitaplıklar, projenizi kullanacak şekilde otomatik olarak yapılandırılır.

Uygunsuz resimleri algılama

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

İşlev tetiklendiğinde, resim Cloud Vision API üzerinden çalıştırılarak yetişkinlere uygun veya şiddet barındıran içerik olarak işaretlenip işaretlenmediği belirlenir. Resmin bu kriterlere göre uygunsuz olduğu tespit edilirse resmi bulanıklaştırırız. Bu işlem, sonrakinde göreceğimiz blurImage işlevinde yapılır.

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, görüntü ikili programı 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ı açmak için Cloud Functions örneğindeki dosyayı sileriz. Aynı Cloud Functions örneği yeniden kullanılabileceğinden ve dosyalar temizlenmezse disk alanı tükenebileceği için bu işlemi yaparız. 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 siz dağıttı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.

Bir web uygulamasında FCM cihaz jetonlarını nasıl alacağınızı öğrenmek istiyorsanız Firebase Web Codelab'e göz atabilirsiniz.

Bildirim gönderme

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

Jetonları temizleme

Son olarak, artık geçerli olmayan jetonları kaldırmak istiyoruz. Bu durum, önceden kullanıcıdan aldığımız jeton 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 ettiyse bu durum gerçekleşir. 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örmeniz gereken konsol çıkışı şudur:

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

İşlediklerimiz

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

1. Genel Bakış

Neler öğreneceksiniz?

Gerekenler

2. Örnek kodu alın

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

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

Proje oluşturma

Blaze planına yükseltin

Google Kimlik Doğrulama'yı etkinleştir

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

6. İşlevler Dizini

index.js

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

index.js

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

Chat mesajlarının 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ıkları yükleme

Bağımlıları 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!

İşlediklerimiz

Sonraki adımlar

Daha Fazla Bilgi