Firebase向けのクラウド機能

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

1。概要

このコードラボでは、Firebase SDK for Google CloudFunctionsを使用してChatWebアプリを改善する方法と、CloudFunctionsを使用してChatアプリのユーザーに通知を送信する方法を学習します。

3b1284f5144b54f6.png

あなたが学ぶこと

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

必要なもの

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

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

コマンドラインからGitHubリポジトリのクローンを作成します。

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

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

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

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

プロジェクトを作成する

Firebase Consoleで、[プロジェクトの追加]をクリックして、 FriendlyChatという名前を付けます。

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

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

Cloud Functions for Firebaseを使用するには、FirebaseプロジェクトをBlaze課金プランにアップグレードする必要があります。これには、クレジットカードまたは別の請求手段をGoogleCloudアカウントに追加する必要があります。

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

クレジットカードにアクセスできない場合、またはBlazeプランを続行することに不安がある場合は、ローカルマシンで無料でCloudFunctionsをエミュレートできるFirebaseEmulatorSuiteの使用を検討してください。

Google認証を有効にする

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

Firebase Consoleで、[ビルド]セクション>[認証]>[ログイン方法]タブを開きます(または、ここをクリックしてそこに移動します)。次に、 Googleサインインプロバイダーを有効にして、[保存]をクリックします。これにより、ユーザーは自分のGoogleアカウントでウェブアプリにログインできるようになります。

また、アプリの公開名をFriendlyChatに設定してください。

8290061806aacb46.png

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

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

Webアプリを追加する

Firebase Consoleで、ウェブアプリを追加します。これを行うには、 [プロジェクト設定]に移動し、[アプリの追加]まで下にスクロールします。プラットフォームとしてウェブを選択し、Firebase Hostingを設定するためのチェックボックスをオンにしてから、アプリを登録し、残りの手順で[次へ]をクリックして、最後に[コンソールに進む]をクリックします。

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

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

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

npm -g install firebase-tools

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

firebase --version

Cloud Functionsに必要なすべての最新機能を備えているように、FirebaseCLIのバージョンが4.0.0より上であることを確認してください。そうでない場合は、 npm install -g firebase-toolsを実行して、上記のようにアップグレードします。

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

firebase login

cloud-functions-startディレクトリにいることを確認してから、Firebaseプロジェクトを使用するようにFirebaseCLIを設定します。

firebase use --add

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

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

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

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

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

誤って[ブロック]をクリックした場合は、ChromeオムニバーのURLの左側にある🔒 [セキュリティで保護]ボタンをクリックし、[通知]の横のバーを切り替えることでこの設定を変更できます。

e926868b0546ed71.png

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

6.関数ディレクトリ

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

Firebase SDK for Cloud Functionsを使用する場合、Functionsコードはfunctionsディレクトリ(デフォルト)の下にあります。 FunctionsコードもNode.jsアプリであるため、アプリに関する情報を提供し、依存関係を一覧表示するpackage.jsonが必要です。

簡単にするために、コードを配置するfunctions/index.jsファイルをすでに作成しています。先に進む前に、このファイルを自由に調べてください。

cd functions
ls

Node.jsに慣れていない場合は、コードラボを続行する前にNode.jsについて詳しく学ぶと役に立ちます。

package.jsonファイルには、 Firebase SDK forCloudFunctionsとFirebaseAdminSDKの2つの必要な依存関係が既にリストされています。それらをローカルにインストールするには、 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モジュールをインポートします

このコードラボでは、2つのモジュールが必要になります。firebase firebase-functionsを使用するとCloud Functionsのトリガーとログを書き込むことができ、firebase firebase-adminを使用すると、管理者アクセス権を持つサーバーでFirebaseプラットフォームを使用して、CloudFirestoreへの書き込みやFCM通知の送信などのアクションを実行できます。

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.

Firebase Admin SDKは、CloudFunctions環境または他のGoogleCloud Platformコンテナーにデプロイすると自動的に構成できます。これは、引数なしでadmin.initializeApp()を呼び出すと発生します。

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

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

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

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

11f5a676fbb1a69a.png

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

fe6d1c020d0744cf.png

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

442c9c10b5e2b245.png

ご覧のとおり、チャットメッセージは、 nameprofilePicUrltext 、およびtimestamp属性がmessagesコレクションに追加されたドキュメントとしてCloudFirestoreに保存されます。

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

最初のCloudFunctionは、新しいユーザーをチャットに歓迎するメッセージを追加します。このために、トリガー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オブジェクトに追加することは、現在のファイルの外部で関数にアクセスできるようにするNodeの方法であり、CloudFunctionsに必要です。

上記の関数では、「FirebaseBot」によって投稿された新しいウェルカムメッセージをチャットメッセージのリストに追加しています。これを行うには、チャットのメッセージが保存されるCloudFirestoreのmessagesコレクションでaddメソッドを使用します。

これは非同期操作であるため、Cloud Firestoreが書き込みを終了したことを示すPromiseを返す必要があります。これにより、CloudFunctionsの実行が早すぎないようになります。

クラウド機能のデプロイ

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 Console Authenticationを開いて、ユーザーのリストからアカウントを削除できます。その後、再度サインインします。

262535d1b1223c65.png

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

1c70e0d64b23525b.png

9.画像のモデレート

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

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

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

  1. Cloud Vision APIを使用して、画像に成人または暴力のフラグが付けられているかどうかを確認します。
  2. イメージにフラグが付けられている場合は、実行中のFunctionsインスタンスにダウンロードします。
  3. ImageMagickを使用して画像をぼかします。
  4. ぼやけた画像をクラウドストレージにアップロードします。

CloudVisionAPIを有効にする

この関数ではGoogleCloudVision APIを使用するため、FirebaseプロジェクトでAPIを有効にする必要があります。このリンクをたどって、Firebaseプロジェクトを選択し、APIを有効にします。

5c77fee51ec5de49.png

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

画像をモデレートするには、Node.js用のGoogleCloudVisionクライアントライブラリ@google-cloud/visionを使用してCloudVisionAPIを介して画像を実行し、不適切な画像を検出します。

このパッケージをCloudFunctionsアプリにnpm install --save --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関数で実行されます。

画像をぼかす

index.jsファイルに次のblurImage関数を追加します。

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ツールを使用して画像をぼかし、ぼかしたバージョンをストレージバケットに再アップロードします。次に、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 Cloud Messaging (FCM)を使用すると、プラットフォーム間でユーザーに確実に通知を送信できます。ユーザーに通知を送信するには、ユーザーのFCMデバイストークンが必要です。私たちが使用しているチャットWebアプリは、ユーザーが新しいブラウザーまたはデバイスで初めてアプリを開いたときに、ユーザーからデバイストークンを既に収集しています。これらのトークンは、CloudFirestoreのfcmTokensコレクションに保存されます。

ウェブアプリでFCMデバイストークンを取得する方法を知りたい場合は、 FirebaseWebCodelabを利用できます。

通知を送信する

新しいメッセージが投稿されたことを検出するには、 functions.firestore.document().onCreate Cloud Functionsトリガーを使用します。このトリガーは、CloudFirestoreの特定のパスで新しいオブジェクトが作成されたときにコードを実行します。 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.');
    }
  });

上記の関数では、Cloud Firestoreデータベースからすべてのユーザーのデバイストークンを収集し、 admin.messaging().sendToDevice関数を使用してこれらの各トークンに通知を送信しています。

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

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

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 forCloudFunctionsを使用したCloudFunctionsのオーサリング。
  • Auth、Cloud Storage、およびCloudFirestoreイベントに基づいてCloudFunctionsをトリガーします。
  • FirebaseCloudMessagingのサポートをウェブアプリに追加します。
  • FirebaseCLIを使用してCloudFunctionsをデプロイします。

次のステップ

もっと詳しく知る