Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

アプリを接続してプロトタイピングを開始します

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

Firebase Local Emulator Suite を使用する前に、Firebase プロジェクトを作成し、開発環境をセットアップし、プラットフォームの Firebase SDK を選択してインストールしたことを、プラットフォームのFirebase の開始に関するトピックに従って確認してください: AppleAndroidまたはウェブ

プロトタイプとテスト

Local Emulator Suite には、Firebase Local Emulator Suite の紹介で説明されているように、いくつかの製品エミュレータが含まれています。本番環境で使用している Firebase プロダクトに応じて、個々のエミュレータやエミュレータの組み合わせでプロトタイプを作成してテストできます。

Firebase データベースと関数エミュレーター間の相互作用
完全な Local Emulator Suiteの一部としてのデータベースおよび Cloud Functions エミュレーター。

このトピックでは、ローカル エミュレーター スイートのワークフローを紹介するために、一般的な製品の組み合わせ (Firebase データベースと、そのデータベースでの操作によってトリガーされるクラウド機能) を使用するアプリで作業していると仮定します。

Firebase プロジェクトをローカルで初期化した後、Local Emulator Suite を使用した開発サイクルには通常、次の 3 つのステップがあります。

  1. エミュレーターと Emulator Suite UI を使用してインタラクティブに機能のプロトタイプを作成します。

  2. データベース エミュレーターまたは Cloud Functions エミュレーターを使用している場合は、アプリをエミュレーターに接続するための 1 回限りの手順を実行します。

  3. エミュレーターとカスタム スクリプトを使用してテストを自動化します。

Firebase プロジェクトをローカルで初期化する

CLI をインストールする、最新バージョンに更新してください。

curl -sL firebase.tools | bash

まだ行っていない場合は、現在の作業ディレクトリを Firebase プロジェクトとして初期化し、画面上のプロンプトに従って、 Cloud FunctionsCloud FirestoreまたはRealtime Databaseのいずれかを使用していることを指定します。

firebase init

プロジェクト ディレクトリには、Firebase 構成ファイル、データベース用の Firebase セキュリティ ルール定義ファイル、クラウド関数コードを含むfunctionsディレクトリ、およびその他のサポート ファイルが含まれます。

インタラクティブにプロトタイプを作成する

Local Emulator Suite は、新機能のプロトタイプを迅速に作成できるように設計されており、スイートに組み込まれたユーザー インターフェイスは、最も便利なプロトタイプ作成ツールの 1 つです。これは、Firebase コンソールをローカルで実行することに少し似ています。

Emulator Suite UI を使用すると、データベースの設計を反復したり、クラウド機能を含むさまざまなデータフローを試したり、セキュリティ ルールの変更を評価したり、ログをチェックしてバックエンド サービスのパフォーマンスを確認したりできます。その後、最初からやり直したい場合は、データベースをクリアして、新しいデザインのアイデアからやり直してください。

Local Emulator Suite を次のように起動すると、すべて利用可能になります。

firebase emulators:start

仮想アプリのプロトタイプを作成するために、データベース内のテキスト エントリを変更する基本的なクラウド関数をセットアップしてテストし、Emulator Suite UI でそのデータベースを作成して入力し、それをトリガーしてみましょう。

  1. プロジェクト ディレクトリのfunctions/index.jsファイルを編集して、データベースの書き込みによってトリガーされるクラウド関数を作成します。既存のファイルの内容を次のスニペットに置き換えます。この関数は、 messages階層内のノードへの変更をリッスンし、ノードのoriginalのプロパティの内容を大文字に変換し、結果をそのノードのuppercaseプロパティに格納します。
  2.   const functions = require('firebase-functions');
    
      exports.makeUppercase = functions.database.ref('/messages/{pushId}/original')
          .onCreate((snapshot, context) => {
            const original = snapshot.val();
            console.log('Uppercasing', context.params.pushId, original);
            const uppercase = original.toUpperCase();
            return snapshot.ref.parent.child('uppercase').set(uppercase);
          });
      
  3. firebase emulators:startでローカル エミュレーター スイートを起動します。 Cloud Functions とデータベース エミュレーターが起動し、相互運用するように自動的に構成されます。
  4. http://localhost:4000でブラウザーの UI を表示します。ポート 4000 は UI のデフォルトですが、Firebase CLI によって出力されるターミナル メッセージを確認してください。利用可能なエミュレータのステータスに注意してください。この場合、Cloud Functions と Realtime Database エミュレーターが実行されます。
    私のイメージ
  5. UI の [ Realtime Database ] タブで、データベース コンテンツ エディター コントロールを使用して、 message1ノードを含むmessagesノードを含む一連のノードを作成します。次に、キーがoriginalに設定され、値がtestに設定されたノードが含まれます。これにより、クラウド機能がトリガーされます。新しいuppercaseのプロパティがすぐに表示され、値がTESTであることに注意してください。
    私のイメージ私のイメージ
  6. [ログ] タブをチェックして、関数がデータベースを更新したときに inot エラーが発生しなかったことを確認します。

アプリ内データベース アクセス コードに触れたり、テスト スイートを再コンパイルおよび再実行したりすることなく、探しているデータ フローが得られるまで、クラウド関数コードとインタラクティブなデータベース編集を簡単に繰り返すことができます。

アプリをエミュレーターに接続する

インタラクティブなプロトタイピングがうまく進み、デザインが決まったら、適切な SDK を使用してデータベース アクセス コードをアプリに追加する準備が整います。引き続きデータベース タブを使用し、機能については Emulator Suite UI の [ログ] タブを使用して、アプリの動作が正しいことを確認します。

Local Emulator Suite はローカル開発ツールであることを忘れないでください。本番データベースへの書き込みは、ローカルでプロトタイピングしている関数をトリガーしません。

アプリがデータベースに書き込みを行うように切り替えるには、Realtime Database エミュレーターでテスト クラスまたはアプリ内構成を指定する必要があります。

アンドロイド
        // 10.0.2.2 is the special IP address to connect to the 'localhost' of
        // the host computer from an Android emulator.
        FirebaseDatabase database = FirebaseDatabase.getInstance();
        database.useEmulator("10.0.2.2", 9000);
迅速
    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://localhost:9000?ns=YOUR_DATABASE_NAMESPACE")

Web version 9

import { getDatabase, connectDatabaseEmulator } from "firebase/database";

const db = getDatabase();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  connectDatabaseEmulator(db, "localhost", 9000);
} 

Web version 8

var db = firebase.database();
if (location.hostname === "localhost") {
  // Point to the RTDB emulator running on localhost.
  db.useEmulator("localhost", 9000);
} 

カスタム スクリプトを使用してテストを自動化する

最後の全体的なワークフロー ステップです。アプリ内で機能のプロトタイプを作成し、すべてのプラットフォームで有望に見えたら、最終的な実装とテストに進むことができます。単体テストと CI ワークフローでは、 execコマンドを使用して、エミュレーターの起動、スクリプト化されたテストの実行、およびエミュレーターのシャットダウンを 1 回の呼び出しで行うことができます。

firebase emulators:exec "./testdir/test.sh"

個々のエミュレーターをさらに詳しく調べる

基本的なクライアント側のワークフローがどのように見えるかを確認したので、サーバー側のアプリ開発に使用する方法など、スイート内の個々のエミュレーターの詳細に進むことができます。

次は何?

上記にリンクされている特定のエミュレーターに関連するトピックを必ずお読みください。それで: