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

Cloud Firestoreリアルタイム データベース

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

プロトタイプとテスト

注: Firebase Local Emulator Suite を調べる前に、Firebase 製品と Firebase 開発モデルについて理解することをお勧めします。お使いのプラットフォームでの開始方法を読んだ後、選択したプラットフォームですぐに実行できるクイックスタート アプリをダウンロードし、コードを読んで実行してください。 FriendlyEats クイックスタート アプリ ( iOS 、 Android 、またはWeb ) が適しています。

Local Emulator Suite には、Firebase Local Emulator Suite の紹介で説明されているように、いくつかの製品エミュレータが含まれています。本番環境で使用している 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 FunctionsとCloud 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プロパティに格納します。

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

2. firebase emulators:startでローカル エミュレーター スイートを起動します。 Cloud Functions とデータベース エミュレーターが起動し、相互運用するように自動的に構成されます。
3. http://localhost:4000でブラウザーの UI を表示します。ポート 4000 は UI のデフォルトですが、Firebase CLI によって出力されるターミナル メッセージを確認してください。利用可能なエミュレータのステータスに注意してください。この場合、Cloud Functions と Realtime Database エミュレーターが実行されます。
   UIメインページ
4. UI の [ Realtime Database ] タブで、データベース コンテンツ エディター コントロールを使用して、 message1ノードを含むmessagesノードを含む一連のノードを作成します。次に、キーがoriginalに設定され、値がtestに設定されたノードが含まれます。これにより、クラウド機能がトリガーされます。新しいuppercaseのプロパティがすぐに表示され、値がTESTであることに注意してください。
   ノードを作成する関数ごとに更新を観察する
5. [ログ] タブをチェックして、関数がデータベースを更新したときに inot エラーが発生しなかったことを確認します。

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

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

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

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

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

Kotlin+KTX

// 10.0.2.2 is the special IP address to connect to the 'localhost' of
// the host computer from an Android emulator.
val database = Firebase.database
database.useEmulator("10.0.2.2", 9000)
EmulatorSuite.kt

Java

// 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);
EmulatorSuite.java

迅速

    // In almost all cases the ns (namespace) is your project ID.
let db = Database.database(url:"http://localhost:9000?ns=YOUR_DATABASE_NAMESPACE")
ViewController.swift

Web version 9

ツリー シェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。

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

Web version 8

ツリー シェーク可能な Web v9 モジュラー SDK とバージョン 8 からのアップグレードの詳細をご覧ください。

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

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

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

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

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

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

• 認証エミュレーターをプロトタイピング ワークフローに追加する
• Realtime Database エミュレーターの機能について詳しく学ぶ
• Cloud Storage for Firebase エミュレータの機能について詳しく学ぶ
• Cloud Firestore エミュレータの機能について詳しく学ぶ
• アプリを Cloud Functions エミュレーターに接続する
• 拡張機能エミュレータを使用して請求コストを最小限に抑えながら、Firebase 拡張機能を評価する

次は何？

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

• 精選された一連のビデオと詳細なハウツーの例については、 Firebase Emulators Training Playlistに従ってください。
• セキュリティ ルールのテストと Firebase Test SDK を含む高度な使用例を調査します:セキュリティ ルールのテスト (Cloud Firestore) 、セキュリティ ルールのテスト (Realtime Database) 、セキュリティ ルールのテスト (Firebase 用クラウド ストレージ) 。