Firebaseのクラウド機能

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

あなたが学ぶこと

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

必要なもの

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

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

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

firebase-codelabsリポジトリには、複数のプラットフォーム用のサンプルプロジェクトが含まれています。このコードラボは、次の2つのリポジトリのみを使用します。

あなたはこのコードラボで積み上げだろうと-The開始コードをクラウド機能が起動します。注：これは、Firebase WebCodelabの最終的なコードと同じコードです。
クラウド機能は、完成したサンプルアプリケーションの完全なコードを-THE。

注：あなたが完成し、アプリケーションを実行したい場合、あなたはまだFirebaseコンソールでプロジェクトを作成する必要があります。手順については、Firebaseプロジェクトとセットアップアプリのセクションの作成を参照してください。

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

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

プロジェクトを作成する

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

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

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

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

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

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

Google認証を有効にする

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

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

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

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

アプリはクラウドストレージを使用して写真をアップロードします。あなたの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インスタンス。

プロジェクトをインポートして構成したので、初めてWebアプリを実行する準備が整いました。で、コンソールを開き、 cloud-functions-startフォルダと実行firebase deploy --except functionsこれが唯一の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アプリはhttps：// <project-id> .firebaseapp.comの形式である必要があるこのURLから提供されるはずです。それを開く。チャットアプリの機能するUIが表示されます。

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

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

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

あなたが誤ってブロックをクリックした場合は、クロームOmnibarでのURLの左側に🔒セキュアボタンをクリックし、通知を選択することで、この設定を変更することができます>このサイトでは常に許可します：

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

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

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

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

cd functions
ls

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

package.jsonファイルには、すでに2つの必要な依存関係を示しています：クラウド関数のFirebase SDKとFirebase管理SDK 。彼らはローカルで実行するインストールするにはnpm installから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つの関数を記述します。まず、必要なノードモジュールをインポートしましょう。

2つのモジュールが、このコードラボの際必要となりますfirebase-functionsながらモジュールは、クラウド機能は、ルールをトリガ書くことを可能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環境または他のGoogleCloudPlatformコンテナにデプロイすると自動的に構成できます。これは、私たちが呼び出すときに上何をすべきかですadmin.initializeApp();

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

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

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

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

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

あなたが見ることができるように、チャットメッセージを持つ文書としてクラウドFirestoreに格納されているname 、 profilePicUrl 、 textおよび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) => {
  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.');
});

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

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

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

関数をデプロイする

関数は、デプロイした後にのみアクティブになります。コマンドラインの実行にfirebase deploy --only 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

機能をテストする

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

（の形でホスティングURLを使ってブラウザでアプリを開きhttps://<project-id>.firebaseapp.com ）。
新しいユーザーを使用すると、[ログイン]ボタンを使用して、あなたのアプリに初めてサインインします。

既にアプリで署名した場合は、開くことができFirebaseコンソール認証]セクションをし、ユーザのリストからアカウントを削除します。その後、再度サインインします。

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

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

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

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

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

Cloud VisionAPIを有効にする

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

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

画像をモデレートするには、いくつかのNode.jsパッケージが必要です。

Node.jsのためのGoogleクラウドビジョンクライアントライブラリ： Googleのクラウド/ビジョン@不適切な画像を検出するために、クラウドビジョンのAPIを介して画像を実行します。
私たちは、プロセスを実行できるようにAのNode.jsライブラリ：子プロセス-約束はImageMagickのコマンドラインツールので、ImageMagickのを実行するためには、すべての関数インスタンスにプリインストールされています。

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

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

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

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

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

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

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

私たちが持つ、機能を実行するクラウド機能インスタンスのいくつかの設定を追加したことを注意.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});
  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.');
}

上記の関数では、イメージバイナリが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

機能をテストする

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

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

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

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

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

通知を送信する

新しいメッセージは、あなたが使用しています掲載されているときを検出するために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);
      console.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) {
     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);
}

関数をデプロイする

関数は、デプロイした後にのみアクティブになります。コマンドラインの実行に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: 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

機能をテストする

関数が正常に展開されたら、（の形でホスティングURLを使用して、あなたのブラウザでアプリを開くhttps://<project-id>.firebaseapp.com ）。
初めてアプリにサインインする場合は、プロンプトが表示されたら通知を許可するようにしてください。
チャットアプリのタブを閉じるか、別のタブを表示します。通知は、アプリがバックグラウンドにある場合にのみ表示されます。あなたのアプリを見ていフォアグラウンドにあるときにメッセージを受信する方法を学習したい場合は、当社のドキュメントを。
別のブラウザ（またはシークレットウィンドウ）を使用して、アプリにサインインし、メッセージを投稿します。最初のブラウザに通知が表示されます。

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

私たちがカバーしたこと

Firebase SDK for CloudFunctionsを使用してCloudFunctionsをオーサリングします。
Auth、Cloud Storage、CloudFirestoreイベントに基づいてクラウド機能をトリガーします。
Firebase CloudMessagingのサポートをウェブアプリに追加します。
FirebaseCLIを使用してクラウド関数をデプロイしました。

次のステップ

学ぶ他のクラウド機能のトリガータイプ。
独自のアプリでFirebaseとCloudFunctionsを使用します。

Firebaseのクラウド機能

あなたが学ぶこと

必要なもの

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

プロジェクトを作成する

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

Google認証を有効にする

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

Webアプリを開きます

index.js

index.js

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

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

index.js

関数をデプロイする

機能をテストする

Cloud VisionAPIを有効にする

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

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

index.js

不適切な画像の検出

index.js

画像をぼかす

index.js

関数をデプロイする

機能をテストする

通知を送信する

index.js

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

index.js

関数をデプロイする

機能をテストする

私たちがカバーしたこと

次のステップ

もっと詳しく知る