Funkcje chmury dla Firebase

Podczas tego ćwiczenia z programowania dowiesz się, jak używać pakietu Firebase SDK dla Google Cloud Functions do ulepszania internetowej aplikacji Chat oraz jak używać Cloud Functions do wysyłania powiadomień do użytkowników aplikacji Chat.

3b1284f5144b54f6.png

Czego się nauczysz

  • Utwórz Google Cloud Functions za pomocą pakietu Firebase SDK.
  • Uruchamiaj funkcje chmury na podstawie zdarzeń Auth, Cloud Storage i Cloud Firestore.
  • Dodaj obsługę Firebase Cloud Messaging do swojej aplikacji internetowej.

Co będziesz potrzebował

  • Karta kredytowa. Cloud Functions dla Firebase wymaga abonamentu Firebase Blaze, co oznacza, że ​​musisz włączyć rozliczenia w projekcie Firebase przy użyciu karty kredytowej.
  • Edytor IDE / tekstu do wyboru, takich jak WebStorm , Atom lub Sublime .
  • Terminal do uruchamiania poleceń powłoki z zainstalowanym NodeJS v8.
  • Przeglądarka taka jak Chrome.
  • Przykładowy kod. Zobacz następny krok.

Sklonować repozytorium GitHub z wiersza poleceń:

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

Zaimportuj aplikację startową

Używając swojego IDE, otwórz lub zaimportuj android_studio_folder.png cloud-functions-start katalog z przykładowego katalogu kodu. Ten katalog zawiera kod startowy ćwiczenia z programowania, które składa się z w pełni funkcjonalnej aplikacji Chat Web App.

Utwórz projekt

W konsoli Firebase kliknij Dodaj projekt i nazywają to FriendlyChat.

Kliknij Utwórz projekt.

Przejdź na plan Blaze

W celu korzystania z funkcji Chmura Firebase trzeba będzie uaktualnić Twojego projektu Firebase do abonamentu Blaze . Będzie to wymagało dodania karty kredytowej lub innego instrumentu rozliczeniowego do konta Google Cloud.

Wszystkie projekty Firebase, w tym te objęte abonamentem Blaze, nadal mają dostęp do bezpłatnych limitów użytkowania Cloud Functions. Kroki opisane w tym ćwiczeniu z programowania będą mieścić się w limitach użycia warstwy bezpłatnej. Jednak widać niewielkie opłaty ( około $ +0,03 ) z Cloud Storage, który jest używany do obsługi obrazów w chmurze Funkcje kompilacji.

Jeśli nie masz dostępu do karty kredytowej lub są niewygodne kontynuowanie planu Blaze, należy rozważyć użycie Firebase Emulator Suite , który pozwoli Ci naśladować funkcji Chmura za darmo na komputerze lokalnym.

Włącz uwierzytelnianie Google

Aby umożliwić użytkownikom logowanie się do aplikacji, użyjemy uwierzytelniania Google, które musi być włączone.

W konsoli Firebase otworzyć sekcję> Uwierzytelnianie> Zaloguj kartę w metodzie Develop (lub kliknij tutaj , aby przejść tam) trzeba włączyć logowania Google Provider i kliknij Zapisz. Umożliwi to użytkownikom logowanie się do aplikacji internetowej przy użyciu swoich kont Google.

Również czuć się swobodnie ustawić nazwę zwróconą ku publicznego swojej aplikacji na pogawędkę:

8290061806aacb46.png

Włącz przechowywanie w chmurze

Aplikacja używa Cloud Storage do przesyłania zdjęć. Aby włączyć Cloud Storage na Firebase wizyty projektu sekcję przechowywania i kliknij przycisk Get Started. Następnie kliknij dostał po pojawieniu się zastrzeżenie o zasadach bezpieczeństwa.

842ad84821323ef5.png

Interfejs wiersza poleceń Firebase (CLI) umożliwia lokalną obsługę aplikacji internetowej oraz wdrażanie aplikacji internetowej i Cloud Functions.

Aby zainstalować lub zaktualizować CLI, uruchom następujące polecenie npm:

npm -g install firebase-tools

Aby sprawdzić, czy CLI zostało poprawnie zainstalowane, otwórz konsolę i uruchom:

firebase --version

Upewnij się, że wersja Firebase CLI jest powyżej 4.0.0 tak, że posiada wszystkie najnowsze funkcje wymagane dla funkcji Cloud. Jeśli nie, uruchom npm install -g firebase-tools , aby uaktualnić, jak pokazano powyżej.

Autoryzuj interfejs wiersza polecenia Firebase, uruchamiając:

firebase login

Upewnij się, że jesteś w cloud-functions-start katalogu skonfiguruj Firebase CLI używać Firebase Projektu:

firebase use --add

Następnie wybierz swój identyfikator projektu i postępuj zgodnie z instrukcjami. Gdy pojawi się monit, można wybrać dowolny alias takich jak codelab na przykład.

Teraz, po zaimportowaniu i skonfigurowaniu projektu, jesteś gotowy do uruchomienia aplikacji internetowej po raz pierwszy. Otwórz konsolę na cloud-functions-start folderu i uruchom firebase deploy --except functions będzie wdrożyć tylko aplikację internetową do Firebase hosting:

firebase deploy --except functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Otwórz aplikację internetową

Ostatni wiersz powinien wyświetlać URL Hosting. Aplikacja internetowa powinna być teraz obsługiwana z tego adresu URL, który powinien mieć format https://<identyfikator-projektu>.firebaseapp.com. Otwórz to. Powinieneś zobaczyć działający interfejs aplikacji czatu.

Zalogować się do aplikacji za pomocą przycisku logowania z Google i nie krępuj się dodać kilka wiadomości i umieszczać obrazki:

3b1284f5144b54f6.png

Jeśli logujesz się do aplikacji po raz pierwszy w nowej przeglądarce, upewnij się, że zezwalasz na powiadomienia, gdy zostaniesz o to poproszony: 8b9d0c66dc36153d.png

Będziemy musieli włączyć powiadomienia w późniejszym czasie.

Jeśli przypadkowo kliknięciu bloku można zmienić to ustawienie, klikając na przycisk 🔒 bezpiecznego po lewej stronie adresu URL w Chrome Omnibar i wybierając Powiadomienia> Zawsze zezwalaj na tej stronie:

e926868b0546ed71.png

Teraz dodamy kilka funkcji za pomocą pakietu SDK Firebase dla Cloud Functions.

Cloud Functions umożliwia łatwe posiadanie kodu działającego w chmurze bez konieczności konfigurowania serwera. Pokażemy Ci, jak tworzyć funkcje reagujące na zdarzenia Firebase Auth, Cloud Storage i Firebase Realtime Database. Zacznijmy od Auth.

Podczas korzystania z Firebase SDK dla funkcji Chmura, kod funkcje będą żyć pod functions katalogu (domyślnie). Twój kod funkcji jest również node.js app i dlatego potrzebuje package.json który daje pewne informacje na temat aplikacji i list zależności.

Aby ułatwić Państwu mamy już stworzył functions/index.js plik gdzie Twój kod pójdzie. Zachęcamy do sprawdzenia tego pliku przed przejściem dalej.

cd functions
ls

Jeśli nie są zaznajomieni z node.js to pomoże, aby dowiedzieć się więcej na ten temat przed kontynuowaniem codelab.

Plik package.json już wymienia dwa wymagane zależności: z Firebase SDK dla funkcji chmurze oraz Firebase Admin SDK . Aby zainstalować je lokalnie uruchomić npm install z functions folderu:

npm install

Rzućmy teraz okiem na index.js pliku:

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.

Najpierw zaimportujemy wymagane moduły, a następnie napiszemy trzy funkcje zamiast TODO. Najpierw zaimportujmy wymagane moduły Node.

Będzie wymagane podczas tego codelab dwa moduły, moduł firebase-functions Moduł pozwala nam napisać funkcje Chmura wywołać zasady, natomiast firebase-admin moduł pozwala nam korzystać z platformy Firebase na serwerze z uprawnieniami administratora, na przykład zapisu Cloud Firestore lub wysyłaj powiadomienia FCM.

W index.js pliku zastąpi pierwszy TODO z następującymi zasadami:

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.

Pakiet Firebase Admin SDK można skonfigurować automatycznie po wdrożeniu w środowisku Cloud Functions lub innych kontenerach Google Cloud Platform. To, co robimy powyżej Dzwoniąc admin.initializeApp();

Teraz dodajmy funkcję, która uruchamia się, gdy użytkownik loguje się po raz pierwszy w Twojej aplikacji do czatu, i dodamy wiadomość na czacie, aby powitać użytkownika.

Struktura wiadomości na czacie

Wiadomości publikowane w kanale czatu FriendlyChat są przechowywane w Cloud Firestore. Przyjrzyjmy się strukturze danych, której używamy do wiadomości. Aby to zrobić, opublikuj nową wiadomość na czacie o treści „Hello World”:

11f5a676fbb1a69a.png

Powinno to wyglądać tak:

fe6d1c020d0744cf.png

W swojej Firebase konsoli aplikacji kliknij Database sekcji Develop. Powinieneś zobaczyć kolekcję wiadomości i jeden dokument zawierający wiadomość, którą napisałeś:

442c9c10b5e2b245.png

Jak widać, wiadomości czatu są przechowywane w chmurze FireStore jako dokument z name , profilePicUrl , text i timestamp atrybuty dodane do messages kolekcji.

Dodawanie wiadomości powitalnych

Pierwsza funkcja Chmura dodaje komunikat wita nowych użytkowników na czacie. W tym celu możemy użyć wyzwalacza functions.auth().onCreate który wykonuje funkcję każdym razem, gdy użytkownik loguje się-w po raz pierwszy w swojej aplikacji Firebase. Dodać addWelcomeMessages funkcjonować w swoim index.js pliku:

index.js

// Adds a message that welcomes new users into the chat.
exports.addWelcomeMessages = functions.auth.user().onCreate(async (user) => {
  console.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(),
  });
  console.log('Welcome message written to database.');
});

Dodanie tej funkcji do specjalnych exports obiektu jest sposób dokonywania węzła funkcję dostępną poza bieżącym pliku i jest wymagany dla funkcji Cloud.

W powyższej funkcji dodajemy nową wiadomość powitalną wysłaną przez "Bota Firebase" do listy wiadomości czatu. Robimy to za pomocą add metody na messages kolekcji w chmurze FireStore czyli tam, gdzie przechowywane są wiadomości z czatu.

Ponieważ jest to operacja asynchroniczna, musimy zwrócić Obietnica wskazujący gdy zapis Chmura Firestore zakończył, tak, że funkcje nie wyjść wykonanie zbyt wcześnie.

Wdróż funkcję

Funkcja będzie aktywna dopiero po jej wdrożeniu. W biegu linii poleceń firebase deploy --only functions :

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję!

Po pomyślnym wdrożeniu funkcji będziesz potrzebować użytkownika, który zaloguje się po raz pierwszy.

  1. Otwórz swoją aplikację w przeglądarce przy użyciu adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Z nowym użytkownikiem, zaloguj się, po raz pierwszy w swojej aplikacji, używając przycisk Zaloguj.

262535d1b1223c65.png

  1. Po zalogowaniu się automatycznie powinna wyświetlić się wiadomość powitalna:

1c70e0d64b23525b.png

Użytkownicy mogą przesyłać wszystkie rodzaje obrazów na czacie i zawsze ważne jest, aby moderować obraźliwe obrazy, szczególnie na publicznych platformach społecznościowych. W FriendlyChat obrazów, które są publikowane na czacie są przechowywane w Google Cloud Storage .

Z funkcji Cloud, można wykryć nowe przesyłanie obrazu przy użyciu functions.storage().onFinalize wyzwalania. Będzie działać za każdym razem, gdy nowy plik zostanie przesłany lub zmodyfikowany w Cloud Storage.

Aby moderować obrazy, przejdziemy przez następujący proces:

  1. Sprawdzić, czy obraz jest oznaczony jako dorosły lub Gwałtowny pomocą API Chmura Vision
  2. Jeśli obraz został oznaczony, pobierz go na uruchomioną instancję funkcji
  3. Rozmycie obrazu przy użyciu ImageMagick
  4. Prześlij zamazany obraz do Cloud Storage

Włącz interfejs API Cloud Vision

Ponieważ w tej funkcji będziemy używać interfejsu Google Cloud Vision API, musisz włączyć interfejs API w swoim projekcie Firebase. Śledź ten link , wybierz Firebase projekt i włączyć API:

5c77opłata51ec5de49.png

Zainstaluj zależności

Aby moderować obrazy, potrzebujemy kilku pakietów Node.js:

  • Google Cloud Vision Client Library for node.js: @ google-Chmura / wizja uruchomić obraz za pośrednictwem interfejsu API Chmura Vision do wykrywania nieodpowiednich obrazów.
  • Node.js biblioteka pozwala nam uruchomić procesy: dziecko-proces-obietnica uruchomienia ImageMagick od narzędzia wiersza polecenia ImageMagick jest wstępnie zainstalowany na wszystkich funkcji instancji.

Aby zainstalować te dwa pakiety do swojej chmurze Funkcje aplikacji, uruchom następujące npm install --save polecenie. Upewnij się, że masz to zrobić z functions katalogu.

npm install --save @google-cloud/vision@0.12.0 child-process-promise@2.2.1

Będzie to zainstalować dwa pakiety lokalnie i dodaj je jako deklarowanych zależności w swojej package.json pliku.

Importuj i konfiguruj zależności

Aby importować dwie zależności, które zostały zainstalowane i niektóre moduły node.js rdzeń ( path , os i fs ), że musimy w tej sekcji należy dodać następujące linie do góry index.js pliku:

index.js

const Vision = require('@google-cloud/vision');
const vision = new Vision();
const spawn = require('child-process-promise').spawn;

const path = require('path');
const os = require('os');
const fs = require('fs');

Ponieważ Twoja funkcja będzie działać w środowisku Google Cloud, nie ma potrzeby konfigurowania bibliotek Cloud Storage i Cloud Vision: zostaną one automatycznie skonfigurowane do korzystania z Twojego projektu.

Wykrywanie nieodpowiednich obrazów

Będziesz pomocą functions.storage.onChange Chmura Funkcje spust który uruchamia swój kod tak szybko, jak plik lub folder zostanie utworzony lub zmodyfikowany w Cloud Storage. Dodaj blurOffensiveImages funkcji do swojego index.js pliku:

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 image = {
        source: {imageUri: `gs://${object.bucket}/${object.name}`},
      };

      // Check the image content using the Cloud Vision API.
      const batchAnnotateImagesResponse = await vision.safeSearchDetection(image);
      const safeSearchResult = batchAnnotateImagesResponse[0].safeSearchAnnotation;
      const Likelihood = Vision.types.Likelihood;
      if (Likelihood[safeSearchResult.adult] >= Likelihood.LIKELY ||
          Likelihood[safeSearchResult.violence] >= Likelihood.LIKELY) {
        console.log('The image', object.name, 'has been detected as inappropriate.');
        return blurImage(object.name);
      }
      console.log('The image', object.name, 'has been detected as OK.');
    });

Zauważ, że dodaliśmy trochę konfigurację Cloud Funkcje instancji, który będzie działał z funkcji, z .runWith({memory: '2GB'}) jesteśmy z prośbą o wystąpienie dostaje 2GB pamięci zamiast domyślnego, to pomoże jak to funkcja wymaga dużej ilości pamięci.

Po uruchomieniu funkcji obraz jest uruchamiany przez interfejs Cloud Vision API w celu wykrycia, czy jest oznaczony jako dla dorosłych czy z przemocą. Jeśli obraz jest wykrywany jako nieodpowiednie oparciu o te kryteria mamy rozmyciu obrazu, który odbywa się w blurImage funkcji, które zobaczymy w przyszłym.

Zamazywanie obrazu

Dodaj następujący blurImage funkcję w swojej index.js pliku:

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});
  console.log('Image has been downloaded to', tempLocalFile);
  // Blur the image using ImageMagick.
  await spawn('convert', [tempLocalFile, '-channel', 'RGBA', '-blur', '0x24', tempLocalFile]);
  console.log('Image has been blurred');
  // Uploading the Blurred image back into the bucket.
  await bucket.upload(tempLocalFile, {destination: filePath});
  console.log('Blurred image has been uploaded to', filePath);
  // Deleting the local file to free up disk space.
  fs.unlinkSync(tempLocalFile);
  console.log('Deleted local file.');
  // Indicate that the message has been moderated.
  await admin.firestore().collection('messages').doc(messageId).update({moderated: true});
  console.log('Marked the image as moderated in the database.');
}

W powyższej funkcji plik binarny obrazu jest pobierany z Cloud Storage. Następnie obraz jest rozmazany przy użyciu ImageMagick za convert narzędzie i niewyraźne wersja jest re-upload na Bucket Storage. Następnie usuwamy plik z instancji Cloud Functions, aby zwolnić trochę miejsca na dysku. Robimy to, ponieważ ta sama instancja Cloud Functions może zostać ponownie wykorzystana, a jeśli pliki nie zostaną wyczyszczone, może zabraknąć dysku. Na koniec dodajemy wartość logiczną do wiadomości czatu, wskazując, że obraz został zmoderowany, co spowoduje odświeżenie wiadomości na kliencie.

Wdróż funkcję

Funkcja będzie aktywna dopiero po jej wdrożeniu. W biegu linii poleceń firebase deploy --only functions :

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję!

Po pomyślnym wdrożeniu funkcji:

  1. Otwórz swoją aplikację w przeglądarce przy użyciu adresu URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Po zalogowaniu się do aplikacji prześlij obraz: 4db9fdab56703e4a.png
  3. Wybierz najlepszy ofensywny zdjęcie przesłać (lub można użyć tego mięsa jeść zombie !), A po kilku chwilach powinieneś zobaczyć Twój wpis odświeżanie z niewyraźne wersji obrazka: 83dd904fbaf97d2b.png

W tej sekcji dodasz funkcję chmury, która wysyła powiadomienia do uczestników czatu, gdy zostanie opublikowana nowa wiadomość.

Korzystanie Firebase Cloud Messaging (FCM) można wysyłać powiadomienia do użytkowników w wieloplatformowym i niezawodny sposób. Aby wysłać powiadomienie do użytkownika, potrzebujesz jego tokena urządzenia FCM. Używana przez nas aplikacja internetowa do czatu zbiera już tokeny urządzeń od użytkowników, gdy po raz pierwszy otwierają aplikację w nowej przeglądarce lub na nowym urządzeniu. Te żetony są przechowywane w chmurze FireStore w fcmTokens kolekcji.

Jeśli chcesz dowiedzieć się, jak dostać żetony urządzeń FCM w aplikacji internetowej można przejść przez Firebase internetowej Codelab .

Wysyłaj powiadomienia

Aby wykryć, kiedy nowe wiadomości są publikowane będziesz pomocą functions.firestore.document().onCreate Chmura Funkcje wyzwalania który uruchamia swój kod, gdy nowy obiekt jest tworzony w danej ścieżce Cloud FireStore. Dodać sendNotifications funkcjonować w swoim index.js pliku:

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);
      console.log('Notifications have been sent and tokens cleaned up.');
    }
  });

W funkcji powyżej zbieramy żetony urządzenie wszystko użytkowników z bazy danych Chmura FireStore i wysłanie powiadomienia do każdego z nich za pomocą admin.messaging().sendToDevice funkcyjny.

Oczyść tokeny

Na koniec chcemy usunąć tokeny, które nie są już ważne. Dzieje się tak, gdy token, który raz otrzymaliśmy od użytkownika, nie jest już używany przez przeglądarkę lub urządzenie. Na przykład dzieje się tak, gdy użytkownik wycofał uprawnienia do powiadamiania dla swojej sesji przeglądarki. W tym celu należy dodać następujące cleanupTokens funkcji w index.js pliku:

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

Wdróż funkcję

Funkcja będzie aktywna dopiero po jej wdrożeniu. W biegu linii poleceń firebase deploy --only functions :

firebase deploy --only functions

To jest wyjście konsoli, które powinieneś zobaczyć:

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

Przetestuj funkcję!

  1. Gdy funkcja wdrożył z sukcesem otworzyć aplikację w przeglądarce za pomocą URL hostingu (w postaci https://<project-id>.firebaseapp.com ).
  2. Jeśli logujesz się do aplikacji po raz pierwszy, zezwól na powiadomienia po wyświetleniu monitu: 8b9d0c66dc36153d.png
  3. Zamknij kartę aplikacji czatu lub wyświetl inną kartę: Powiadomienia pojawiają się tylko wtedy, gdy aplikacja działa w tle. Jeśli chcesz nauczyć się odbierać wiadomości podczas gdy aplikacja jest na pierwszym planie przyjrzeć się naszej dokumentacji .
  4. Używając innej przeglądarki (lub okna incognito), zaloguj się do aplikacji i opublikuj wiadomość. Powinieneś zobaczyć powiadomienie wyświetlane przez pierwszą przeglądarkę: 45282ab12b28b926.png

Korzystasz z pakietu SDK Firebase dla funkcji Cloud Functions i dodajesz do aplikacji do czatu komponenty po stronie serwera.

Co omówiliśmy

  • Tworzenie Cloud Functions przy użyciu pakietu SDK Firebase dla Cloud Functions.
  • Uruchamiaj funkcje w chmurze na podstawie zdarzeń Auth, Cloud Storage i Cloud Firestore.
  • Dodaj obsługę Firebase Cloud Messaging do swojej aplikacji internetowej.
  • Wdrożono Cloud Functions przy użyciu interfejsu wiersza polecenia Firebase.

Następne kroki

Ucz się więcej