Firebaseのクラウド機能

1。概要

このコードラボでは、Firebase SDK for Google Cloud Functionsを使用してチャットウェブアプリを改善する方法と、クラウド関数を使用してチャットアプリのユーザーに通知を送信する方法を学習します。

3b1284f5144b54f6.png

あなたが学ぶこと

  • FirebaseSDKを使用してGoogleCloudFunctionsを作成します。
  • Auth、Cloud Storage、およびCloudFirestoreイベントに基づいてCloudFunctionsをトリガーします。
  • Firebase CloudMessagingのサポートをウェブアプリに追加します。

必要なもの

  • クレジットカード。 Cloud Functions for Firebaseには、Firebase Blazeプランが必要です。つまり、クレジットカードを使用してFirebaseプロジェクトで請求を有効にする必要があります。
  • など、お好みのIDE /テキストエディタWebStormアトム崇高
  • NodeJSv9がインストールされた状態でシェルコマンドを実行するための端末。
  • Chromeなどのブラウザ。
  • サンプルコード。これについては、次のステップを参照してください。

2.サンプルコードを取得します

クローンGitHubのリポジトリ、コマンドラインから:

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

スターターアプリをインポートする

IDEを使用して、を開くかインポートしますandroid_studio_folder.png cloud-functions-startサンプルコードディレクトリからディレクトリを。このディレクトリには、完全に機能するチャットWebアプリで構成されるコードラボの開始コードが含まれています。

3. Firebaseプロジェクトを作成し、アプリをセットアップします

プロジェクトを作成する

Firebaseコンソール追加のプロジェクトをクリックして、FriendlyChatそれを呼び出します。

プロジェクトの作成]クリックします。

Blazeプランにアップグレードする

Firebaseのためのクラウド機能を使用するためには、あなたにFirebaseプロジェクトをupgadeする必要がありますブレイズの料金プラン。これには、GoogleCloudアカウントにクレジットカードまたは別の請求手段を追加する必要があります。

Blazeプランのプロジェクトを含む、すべてのFirebaseプロジェクトは、引き続きCloudFunctionsの無料の使用割り当てにアクセスできます。このコードラボで概説されている手順は、無料利用枠の使用制限内に収まります。しかし、あなたは(小さな料金が表示されます$約0.03あなたのクラウド機能のビルドイメージをホストするために使用されているクラウドストレージからの)。

あなたはクレジットカードへのアクセス権を持っているか、または使用を検討し、ブレイズ計画を続行不快なない場合Firebaseエミュレータスイート、あなたのローカルマシン上の自由のためのクラウド機能をエミュレートすることができます。

Google認証を有効にする

ユーザーがアプリにログインできるようにするには、有効にする必要があるGoogle認証を使用します。

Firebaseコンソールで、[ビルド]セクション>認証>サインのメソッドタブを開きます(またはこちらをクリックしてくださいそこに行きます)。その後、Googleのサインインプロバイダを有効にし、[保存]クリックします。これにより、ユーザーは自分のGoogleアカウントでウェブアプリにログインできるようになります。

また、フレンドリーチャットにアプリの公開に面する名を設定して自由に感じます:

8290061806aacb46.png

クラウドストレージを有効にする

アプリはクラウドストレージを使用して写真をアップロードします。 、あなたのFirebaseプロジェクトにクラウドストレージを有効にするストレージのセクションを訪問し、取得開始ボタンをクリックします。そこで手順を実行すると、Cloud Storageの場所に、使用するデフォルト値があります。その後[完了]クリックします。

Webアプリを追加する

Firebase Consoleで、ウェブアプリを追加します。そのためには、に行くプロジェクト設定アプリを追加するには、下にスクロールします。プラットフォームとしてウェブを選び、ホスティングFirebaseを設定する]チェックボックスをオンにし、その後、アプリを登録し、最後にコンソールを続ける上でクリックすると、残りの工程のために[次へ]クリックします。

4.Firebaseコマンドラインインターフェースをインストールします

Firebaseコマンドラインインターフェース(CLI)を使用すると、ウェブアプリをローカルで提供し、ウェブアプリとクラウド機能をデプロイできます。

CLIをインストールするには、次のnpmコマンドを実行します。

npm -g install firebase-tools

CLIが正しくインストールされていることを確認するには、コンソールを開いて次のコマンドを実行します。

firebase --version

それはすべての最新のクラウド機能のために必要な機能があるように確認してくださいFirebase CLIのバージョンが4.0.0より上です。そうでない場合、実行はnpm install -g firebase-tools上記のようにアップグレードすること。

次のコマンドを実行して、FirebaseCLIを承認します。

firebase login

あなたがになっていることを確認しcloud-functions-start 、その後、あなたのFirebaseプロジェクトを使用するようにFirebase CLIを設定し、ディレクトリ:

firebase use --add

次に、プロジェクトIDを選択し、指示に従います。プロンプトが表示されたら、次のような、任意のエイリアスを選択することができますcodelab

5.Webアプリをデプロイして実行します

プロジェクトをインポートして構成したので、初めてWebアプリを実行する準備が整いました。 、ターミナルウィンドウを開くためにナビゲートcloud-functions-startフォルダ、およびFirebaseを使用してホスティングするWebアプリケーションをデプロイします。

firebase deploy --except functions

これは、表示されるはずのコンソール出力です。

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アプリを開きます

最後の行は、ホスティングURLが表示されますこれで、WebアプリはこのURLから提供されます。このURLはhttps:// <project-id> .firebaseapp.comの形式である必要があります。それを開く。チャットアプリの機能するUIが表示されます。

SIGN-IN WITH GOOGLE]ボタンを使って、アプリにサインし、いくつかのメッセージやポスト画像を追加して自由に感じます:

3b1284f5144b54f6.png

新しいブラウザで初めてアプリにサインインする場合は、プロンプトが表示されたら通知を許可するようにしてください。 8b9d0c66dc36153d.png

後で通知を有効にする必要があります。

あなたが誤ってブロックをクリックした場合は、クロームOmnibar内のURLの左端に🔒セキュアボタンをクリックし、通知の横のバーをトグルすることによって、この設定を変更することができます。

e926868b0546ed71.png

次に、Firebase SDK for CloudFunctionsを使用していくつかの機能を追加します。

6.関数ディレクトリ

Cloud Functionsを使用すると、サーバーをセットアップしなくても、クラウドで実行されるコードを簡単に作成できます。 Firebase Auth、Cloud Storage、FirebaseFirestoreデータベースイベントに反応する関数を作成する方法について説明します。 Authから始めましょう。

クラウドの機能のためにFirebase SDKを使用する場合は、あなたの関数のコードは、下の生きるfunctions (デフォルト)ディレクトリ。あなたの関数のコードもあるのNode.jsのアプリ、したがって、必要package.jsonあなたのアプリとリストの依存性に関するいくつかの情報を提供します。

あなたのためにそれを簡単にするために、我々はすでに作成したfunctions/index.jsあなたのコードが入りますファイルを。先に進む前に、このファイルを自由に調べてください。

cd functions
ls

あなたが精通していない場合のNode.js 、コードラボを続行する前に、それについての詳細を学ぶことは役立つだろう。

package.jsonファイルには、すでに2つの必要な依存関係を示しています:クラウド関数のFirebase SDKFirebase管理SDK 。ローカルにインストールするには、に行くfunctionsフォルダと実行します。

npm install

それでは見てみましょうindex.jsファイルを:

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.

必要なモジュールをインポートしてから、TODOの代わりに3つの関数を記述します。必要なノードモジュールのインポートから始めましょう。

7. CloudFunctionsとFirebaseAdminモジュールをインポートします

二つのモジュールこのコードラボの間に必要になりますfirebase-functionsしながら、クラウド機能のトリガとログを書き込むことができますfirebase-admin 、このようなクラウドFirestoreへの書き込みやFCM通知の送信などのアクションを行うために管理者アクセス権を持つサーバー上でFirebaseプラットフォームを使用できます。

index.jsファイル、最初に置き換えるTODO次のように:

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.

クラウド機能の環境やその他のGoogle Cloud Platformのコンテナに配備されたときFirebase管理SDKを自動的に構成することができ、そして私たちが呼ぶとき、これは起こりますadmin.initializeApp()引数なしで。

それでは、ユーザーがチャットアプリに初めてサインインしたときに実行される関数を追加し、ユーザーを歓迎するチャットメッセージを追加します。

8.新規ユーザーを歓迎します

チャットメッセージの構造

FriendlyChatチャットフィードに投稿されたメッセージは、CloudFirestoreに保存されます。メッセージに使用するデータ構造を見てみましょう。これを行うには、「HelloWorld」という新しいメッセージをチャットに投稿します。

11f5a676fbb1a69a.png

これは次のように表示されます。

fe6d1c020d0744cf.png

Firebaseコンソールで、[ビルド]セクションの下にFirestoreデータベースをクリックしてください。メッセージコレクションと、作成したメッセージを含む1つのドキュメントが表示されます。

442c9c10b5e2b245.png

あなたが見ることができるように、チャットメッセージを持つ文書としてクラウドFirestoreに格納されているnameprofilePicUrltext 、およびtimestampに追加された属性messagesコレクション。

ウェルカムメッセージの追加

最初のクラウド機能は、チャットに新しいユーザーを歓迎メッセージを追加します。このために、我々は、トリガを使用することができますfunctions.auth().onCreate機能にユーザーFirebaseアプリで初めてサインインするたびに実行されます。追加addWelcomeMessagesあなたに機能をindex.jsファイル:

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

特別にこの機能を追加しexportsオブジェクトは、現在のファイルの機能にアクセス可能外を作るノードの方法であり、クラウドの機能のために必要とされます。

上記の機能では、「FirebaseBot」によって投稿された新しいウェルカムメッセージをチャットメッセージのリストに追加しています。私たちは、使用してこれをやっているaddのメソッドをmessagesチャットのメッセージが保存される場所であるクラウドFirestore、でコレクション。

これは非同期操作ですので、我々は返す必要があり約束がクラウド機能があまりにも早く実行されませんので、クラウドFirestoreは、書き込みが終了したときを示します。

クラウド機能のデプロイ

Cloud Functionsは、デプロイした後にのみアクティブになります。これを行うには、コマンドラインでこれを実行します。

firebase deploy --only functions

これは、表示されるはずのコンソール出力です。

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

機能をテストする

関数が正常にデプロイされたら、初めてサインインするユーザーが必要になります。

  1. (の形でホスティングURLを使ってブラウザでアプリを開きhttps://<project-id>.firebaseapp.com )。
  2. 新しいユーザーを使用すると、[ログイン]ボタン使用して、あなたのアプリに初めてサインインします。
  • あなたはすでに、アプリに署名した場合は、開くことができFirebaseコンソール認証とユーザーのリストからアカウントを削除します。その後、再度サインインします。

262535d1b1223c65.png

  1. サインインすると、ウェルカムメッセージが自動的に表示されます。

1c70e0d64b23525b.png

9.画像のモデレート

ユーザーはチャットですべての種類の画像をアップロードできます。特に公共のソーシャルプラットフォームでは、不快な画像をモデレートすることが常に重要です。 FriendlyChatでは、チャットに公開されている画像がに保存されているGoogleのクラウドストレージ

クラウド機能を使用すると、使用して新しいイメージのアップロード検出することができますfunctions.storage().onFinalizeトリガーを。これは、新しいファイルがCloudStorageにアップロードまたは変更されるたびに実行されます。

画像をモデレートするには、次のプロセスを実行します。

  1. 画像を使用してアダルトや暴力としてフラグが設定されているかどうかをチェックし、クラウドビジョンAPIを
  2. イメージにフラグが付けられている場合は、実行中のFunctionsインスタンスにダウンロードします。
  3. 使用した画像ブラーのImageMagickを
  4. ぼやけた画像をクラウドストレージにアップロードします。

Cloud VisionAPIを有効にする

この関数ではGoogleCloud Vision APIを使用するため、FirebaseプロジェクトでAPIを有効にする必要があります。フォローこのリンクを、あなたのFirebaseプロジェクトを選択し、APIを有効にします:

5c77fee51ec5de49.png

依存関係をインストールする

適度な画像に、我々は、Node.jsのためにGoogleクラウドビジョンクライアントライブラリを使用します@グーグル、クラウド/ビジョンを、クラウドビジョンAPIを介してイメージを実行するために不適切な画像を検出します。

あなたのクラウド機能アプリにこのパッケージをインストールするには、以下を実行npm install --saveコマンドを。あなたはからこれを行うことを確認してくださいfunctionsディレクトリ。

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

これは、パッケージをローカルにインストールして、あなたの中で宣言依存関係として追加しますpackage.jsonファイル。

依存関係をインポートして構成する

インストールされた依存関係と、いくつかのNode.jsのコアモジュール(インポートするにはpathosfs私たちはあなたの先頭に次の行を追加し、このセクションの必要があること) index.jsファイルを:

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

関数はGoogleCloud環境内で実行されるため、CloudStorageライブラリとCloudVisionライブラリを構成する必要はありません。プロジェクトを使用するように自動的に構成されます。

不適切な画像の検出

あなたは使うことになるでしょうfunctions.storage.onChangeファイルまたはフォルダがクラウドストレージバケットに作成または変更されるとすぐにあなたのコードを実行し、クラウド機能のトリガーを、。追加blurOffensiveImagesあなたに機能をindex.jsファイル:

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

関数を実行するCloudFunctionsインスタンスの構成をいくつか追加したことに注意してください。 .runWith({memory: '2GB'})私たちは、この関数はメモリ集約的であるため、インスタンスは、メモリ2GBのではなく、デフォルト値を取得することを要求しています。

関数がトリガーされると、画像はCloud Vision APIを介して実行され、成人または暴力としてフラグが付けられているかどうかが検出されます。画像は、これらの基準に基づいて、不適切として検出された場合、我々は中に行われている画像、ぼやけているblurImage我々は次の表示されますとしての機能を。

画像をぼかす

以下の追加blurImageあなたに機能をindex.jsファイル:

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

上記の関数では、イメージバイナリがCloudStorageからダウンロードされます。画像は、その後のImageMagickの使用ぼやけるconvertツールを、そしてぼやけたバージョンは、Storageバケットに再アップロードされます。次に、Cloud Functionsインスタンス上のファイルを削除してディスク領域を解放します。これは、同じCloud Functionsインスタンスが再利用される可能性があり、ファイルがクリーンアップされていない場合、ディスク領域が不足する可能性があるためです。最後に、画像がモデレートされたことを示すブール値をチャットメッセージに追加します。これにより、クライアントでメッセージの更新がトリガーされます。

関数をデプロイする

関数は、デプロイした後にのみアクティブになります。コマンドラインで、実行firebase deploy --only functions

firebase deploy --only functions

これは、表示されるはずのコンソール出力です。

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

機能をテストする

関数が正常にデプロイされたら:

  1. (の形でホスティングURLを使ってブラウザでアプリを開きhttps://<project-id>.firebaseapp.com )。
  2. アプリにサインインしたら、画像をアップロードします。 4db9fdab56703e4a.png
  3. アップロードするためにあなたの最高の攻撃画像を選択します(または、あなたは、この使用することができますゾンビを食べる肉を!)と、しばらくした後、あなたは画像のぼやけたバージョンを使用してポストリフレッシュが表示されます。 83dd904fbaf97d2b.png

10.新しいメッセージ通知

このセクションでは、新しいメッセージが投稿されたときにチャットの参加者に通知を送信するクラウド関数を追加します。

使用Firebaseクラウドメッセージング(FCM)を、あなたは確実にプラットフォーム間でのユーザーに通知を送信することができます。ユーザーに通知を送信するには、ユーザーのFCMデバイストークンが必要です。私たちが使用しているチャットWebアプリは、ユーザーが新しいブラウザーまたはデバイスでアプリを初めて開いたときに、ユーザーからデバイストークンを既に収集しています。これらのトークンは、クラウドFirestoreに格納されているfcmTokensコレクション。

あなたはWebアプリケーション上でFCMデバイストークンを取得する方法を学習したい場合は、通過することができFirebaseウェブコードラボ

通知を送信する

新しいメッセージが投稿されたときに検出するには、使用されますfunctions.firestore.document().onCreateクラウドは、新しいオブジェクトがクラウドFirestoreの指定されたパスに作成されたときにコードを実行するトリガを、関数。追加sendNotificationsあなたに関数をindex.jsファイル:

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

上記の関数では、クラウドFirestoreデータベースからすべてのユーザーのデバイストークンを集めており、使用して、これらのそれぞれに通知を送信admin.messaging().sendToDevice機能。

トークンをクリーンアップします

最後に、無効になったトークンを削除します。これは、ユーザーから取得したトークンがブラウザまたはデバイスで使用されなくなった場合に発生します。たとえば、これは、ユーザーがブラウザセッションの通知権限を取り消した場合に発生します。これを行うには、以下の追加cleanupTokensあなたの中で機能index.jsファイル:

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

関数をデプロイする

この関数は、デプロイした後にのみアクティブになります。デプロイするには、コマンドラインで次のコマンドを実行します。

firebase deploy --only functions

これは、表示されるはずのコンソール出力です。

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

機能をテストする

  1. 関数が正常に展開されたら、(の形でホスティングURLを使用して、あなたのブラウザでアプリを開くhttps://<project-id>.firebaseapp.com )。
  2. 初めてアプリにサインインする場合は、プロンプトが表示されたら通知を許可するようにしてください。 8b9d0c66dc36153d.png
  3. チャットアプリのタブを閉じるか、別のタブを表示します。通知は、アプリがバックグラウンドにある場合にのみ表示されます。アプリがフォアグラウンドである間、メッセージを受信する方法を学習したい場合は、見てい私たちのマニュアルを参照して
  4. 別のブラウザ(またはシークレットウィンドウ)を使用して、アプリにサインインし、メッセージを投稿します。最初のブラウザに通知が表示されます。 45282ab12b28b926.png

11.おめでとうございます!

Firebase SDK for Cloud Functionsを使用し、チャットアプリにサーバー側コンポーネントを追加しました。

私たちがカバーしたこと

  • Firebase SDK for CloudFunctionsを使用してCloudFunctionsをオーサリングします。
  • Auth、Cloud Storage、およびCloudFirestoreイベントに基づいてCloudFunctionsをトリガーします。
  • Firebase CloudMessagingのサポートをウェブアプリに追加します。
  • FirebaseCLIを使用してCloudFunctionsをデプロイします。

次のステップ

もっと詳しく知る