Firebase Data Connect を使ってみる

ヒント: Firebase Data Connect の限定公開プレビュー プログラムに参加して、Firebase の最初の SQL ソリューションの詳細をご覧ください。このプロダクトの先行ユーザーとして、アプリ開発エクスペリエンスをモダナイズするための Firebase の新たな取り組みを直接体験する機会が得られます。Firebase Data Connect のプロダクト ページからご登録ください。

プレビュー: Firebase Data Connect は限定公開プレビュー版です。SLA または非推奨ポリシーの対象ではなく、下位互換性のない方法で変更される可能性があります。限定公開プレビューの期間中、Data Connect とそのドキュメントが更新され、改善されます。プロダクトの限定公開プレビュー リリースは、本番環境のアプリでは使用できません。

注: Firebase Data Connect サービスと、このガイドで説明しているほとんどのツールとソースにアクセスするには、限定公開プレビュー プログラムに登録する必要があります。

このクイックスタートの学習内容は次のとおりです。

• Firebase Data Connect を Firebase プロジェクトに追加します。
• 本番環境インスタンスと連携するように、Visual Studio Code 拡張機能を含む開発環境をセットアップします。
• その後、次の方法を説明します。
  • メールアプリのサンプルを使用してスキーマを作成します。
  • スキーマのクエリとミューテーションを定義します。
  • 自動生成された SDK を使用して、クライアントからこれらのクエリとミューテーションを呼び出します。
  • 最終プロトタイプを本番環境にデプロイする

前提条件

このクイックスタートを使用するには、次のものが必要です。

• Linux、macOS、Windows
• Visual Studio Code

プロジェクトにデータ接続を追加してデータソースを作成する

1. まだ作成していない場合は、Firebase プロジェクトを作成します。
   1. Firebase コンソールで [プロジェクトを追加] をクリックし、画面上の手順に沿って操作します。

2. プロジェクトを Blaze プランにアップグレードします。これにより、Cloud SQL for PostgreSQL インスタンスを作成できます。

   注: Blaze のアップグレードで課金を設定しても、プレビュー期間中は、Data Connect またはデフォルトの Cloud SQL for PostgreSQL 構成の使用に対しては課金されません。

3. Firebase コンソールの [Data Connect] セクションに移動し、プロダクトの設定ワークフローに従います。

4. CloudSQL for PostgreSQL データベースのロケーションを選択します。

5. 後で確認できるように、プロジェクト、サービス、データベースの名前と ID をメモします。

6. 残りの設定フローに沿って操作し、[完了] をクリックします。

   注: Cloud SQL for PostgreSQL インスタンスのプロビジョニングが完了するまで 20 分ほどかかることがあります。

開発環境を選択して設定する

データ接続を開始するには、まず Visual Studio Code でアプリのプロトタイピングを行います。

必要に応じて、Data Connect エミュレータを使用してローカル開発用にローカル PostgreSQL データベースをインストールできます。この設定については、このクイックスタート ガイドの最後で説明します。

Data Connect は、プロトタイピング用に 2 つの開発エクスペリエンスをサポートしています。

• ウェブまたは Kotlin Android のデベロッパーは、Cloud SQL for PostgreSQL インスタンスに接続しながら、スキーマとオペレーションのプロトタイプをローカルで作成できます。また、必要に応じて PostgreSQL をローカルで実行することもできます。

• ウェブ デベロッパーの場合、IDX を使用して IDX ワークスペースでプロトタイプを作成できます。これには、PostgreSQL、Data Connect エミュレータを使用した VS Code 拡張機能、クイックスタート コードを含む事前構成済みの IDX テンプレートを使用できます。

VS Code 開発

IDX を使用せずにローカルで開発する場合は、Firebase VS Code 拡張機能を設定すると、ウェブ用、Android 用 Kotlin、近日提供予定の iOS 用の SDK 生成を使用して、開発を迅速に繰り返すことができます。

1. ローカル プロジェクト用の新しいディレクトリを作成します。
2. 新しいディレクトリで VS Code を開きます。
3. VSIX パッケージとしてバンドルされた拡張機能を Firebase Storage からダウンロードします。
4. VS Code の [View] メニューから [Extensions] を選択します。
5. [拡張機能] パネルのタイトルバーで、メニュー アイコン more_horiz をクリックし、VSIX からインストールする...の手順を行います。

注: この拡張機能には、Marketplace の GraphQL Syntax Highlighting 拡張機能が含まれています。インストールする他の GraphQL 拡張機能は、VSIX ファイルにバンドルされた GraphQL サポートと競合する可能性があります。

IDX 開発

IDX はウェブアプリ開発用に最適化された環境です。Kotlin Android デベロッパーは、[VS Code 開発] タブの手順を実施してください。

Data Connect IDX テンプレートを設定するには:

1. Project IDX のサイトからテンプレートにアクセスします。
2. セットアップ フローに沿って操作します。

ローカル プロジェクトを設定する

注: IDX を使用していない場合は、このセクションの手順に沿って操作してください。

通常の手順に沿って CLI をインストールします。

次に、Firebase Data Connect テストを有効にします。

firebase experiments:enable dataconnect

注: 既存の CLI のインストールを使用している場合は、必ず最新バージョンに更新してください。

ローカル プロジェクトを設定するため、プロジェクト ディレクトリを初期化し、コードの生成に必要ないくつかの構成ファイルを更新します。

プロジェクト ディレクトリを設定する

プロジェクト ディレクトリを初期化します。

Firebase Extensions の設定

VS Code の左側のパネルで Firebase アイコンをクリックして、Firebase VS Code 拡張機能の UI を開きます。

Firebase Extensions UI で次の操作を行います。

1. ログインしていることを確認します。
2. Firebase コンソールで、データベースのプロビジョニングを含む Data Connect 設定フローが完了していることを確認します。
3. [Run firebase init] ボタンをクリックします。
4. VS Code の下部パネルの [Terminal] タブでプロンプトを確認します。
5. このディレクトリで使用する機能として [Data Connect] を選択します。
6. プロンプトが表示されたら、コンソールで前に作成した Data Connect プロジェクトのプロジェクト ID、サービス ID、データベース ID を入力します。

端末のセットアップ

1. 必要に応じて、firebase login を使用してログインします。
2. Firebase コンソールで、データベースのプロビジョニングを含む Data Connect 設定フローが完了していることを確認します。
3. 画面上の指示に沿って、firebase init を実行してディレクトリを Firebase プロジェクトとして初期化します。
4. このディレクトリで使用する機能として [Data Connect] を選択します。
5. プロンプトが表示されたら、コンソールで前に作成した Data Connect プロジェクトのプロジェクト ID、サービス ID、データベース ID を入力します。

どちらのフローでも、firebase.json ファイルと .firebaserc ファイル、重要な dataconnect.yaml ファイルと connector.yaml ファイルを含む dataconnect サブディレクトリがローカル作業ディレクトリに作成されます。

SDK コードの生成場所を設定する

スキーマの編集中に、Data Connect が SDK コードを自動的に生成します。

SDK の生成場所を指定するには、dataconnect/connector/connector.yaml で初期コネクタのファイルを更新します。

注: IDX では、サンプル connector.yaml がすでに提供されています。

connectorId: "my-connector"
authMode: "PUBLIC"
generate:
  javascriptSdk:
    outputDir: "../../js-email-generated"
    package: "@email-manager/emails"
    packageJsonDir: "../../"
  kotlinSdk:
    outputDir: "../kotlin-email-generated"
    package: com.myemailapplication

注: ウェブ SDK の場合、Data Connect は npm link を使用して SDK をインストールするため、生成された SDK は node_modules パスと同じレベルのディレクトリか、node_modules にアクセスできる子ディレクトリに出力する必要があります。

データ接続ツールキットの使い方

Data Connect Toolkit は、スキーマ開発、クエリとミューテーションの管理を Visual Studio Code から直接行うことができる Firebase VS Code 拡張機能のコンポーネントです。

ツールキットの機能を確認するには:

1. まだ開いていない場合は、VS Code で Firebase プロジェクト ディレクトリを開きます。
2. VS Code の左側のパネルで Firebase アイコンをクリックして、Firebase VS Code 拡張機能の UI を開きます。

開発作業全体を通して、ツールキットを使用すると、本番環境リソースだけでなく、ローカル環境ともやり取りできます。このクイックスタートでは、本番環境を操作します。

拡張機能の UI には次のような便利な機能があります。

VS Code のプライマリ サイドバーで次の操作を行います。

プライマリ サイドバー

• [構成] パネル。Google にログインして Firebase プロジェクトを選択できます。
• [Firebase Data Connect] パネル。組み込みのエミュレータを制御し、本番環境にリソースをデプロイできます。
• [FDC Explorer] パネル。スキーマに基づいて自動生成された暗黙的なクエリとミューテーションが一覧表示されます。

VS Code の下のパネルで、次の操作を行います。

下部パネル

• [Data Connect Execution] タブ。リクエストでデータの受け渡し、認証の模倣、結果の表示を行うためのツールがあります。

アプリの開発を開始する前に、拡張機能のいくつかの機能を確認してください。

カスタム CodeLens を試す	schema.gql、queries.gql、mutations.gql ファイル内のリソースを扱う場合、完全な構文コードブロックを記述すると、宣言されたテーブルとオペレーションに対して実行できるアクションがカスタム CodeLens によって表示されます。 テーブルの場合、CodeLens を使用してミューテーションを生成し、バックエンド データベースにデータを追加できます。 クエリとミューテーションについては、CodeLens を使用して、ローカルまたは本番環境のリソースに対してオペレーションを実行できます。
リクエストの認証レベルを設定する	下のパネルの [Data Connect Execution] パネルの [構成] タブでは、オペレーションのシミュレートされた認証レベルを選択できます。
クエリとミューテーションに変数を入力する	同じ [Configuration] タブで、オペレーションのペイロードを入力できます。
履歴、レスポンス、エラーを検査する	また、[Configuration] タブでは、[History] タブと [Results] タブでデバッグ情報を確認できます。

Data Connect のスキーマとクエリを作成する

これで設定は完了です。これで、Data Connect を使用して開発を開始できます。

GraphQL を使用してユーザーとメールをモデル化します。ソースを更新する場所:

• /dataconnect/schema/schema.gql
• /dataconnect/connector/queries.gql

スキーマの開発を開始する

Firebase プロジェクト ディレクトリで、dataconnect フォルダをメモします。ここでは、GraphQL を使用して Cloud SQL データベースのデータモデルを定義します。

/dataconnect/schema/schema.gql ファイルで、ユーザーとメールを含むスキーマの定義を開始します。

ユーザー

Data Connect では、GraphQL フィールドは列にマッピングされます。ユーザーは uid、name、メール address を持っています。Data Connect は、いくつかのプリミティブ データ型（String と Date）を認識します。

次のスニペットをコピーするか、ファイル内の対応する行をコメント化解除します。

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

デフォルトでは、UUID id キーが指定されていない場合は、Firebase Data Connect によって UUID キーが追加されます。ただし、この場合は、@table(key: "uid") ディレクティブを使用して uid を主キーにできます。

メール

ユーザーができるようになったので、メールをモデル化できます。ここでは、メールデータの一般的なフィールド（または列）を追加できます。ここでは、Data Connect で管理できるため、主キーの追加を省略しています。

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   date: Date!
   text: String!
   from: User!
}

from フィールドは User 型にマッピングされています。Data Connect は、これが Email と User の間の関係であると認識し、この関係を管理します。

スキーマを本番環境にデプロイする

Firebase VS Code 拡張機能を使用して本番環境のデータベースを操作するため、続行する前にスキーマをデプロイする必要があります。

注: Cloud SQL for PostgreSQL インスタンスのプロビジョニングには、最大 20 分かかることがあります。インスタンスの準備ができるまでデプロイできません。

1. Firebase VS Code 拡張機能を使用してデプロイできます。
   • 拡張機能 UI の [Firebase Data Connect] パネルで [Deploy] をクリックします。

2. Firebase CLI を使用することもできます。

   firebase deploy
   

3. 拡張機能または CLI のフローで、スキーマの変更を確認し、破壊的な変更を承認する必要があります。次の操作を行うよう求められます。

   • firebase dataconnect:sql:diff を使用してスキーマの変更を確認する
   • 変更が完了したら、firebase dataconnect:sql:migrate で開始されたフローを使用して変更を適用します。

生成されたスキーマ拡張を確認する

メールスキーマを編集すると、スキーマ拡張、クエリ、ミューテーション、フィルタ、テーブル リレーションが自動的に生成されます。生成されたコードは、次の 2 つの方法で表示できます。

• Firebase 拡張機能 UI の [FDC Explorer] パネルで、生成された暗黙的なクエリとミューテーションのリストを確認できます。
• ローカルで生成されたすべてのコードは、.dataconnect/schema ディレクトリのソースで確認できます。

ミューテーションを実行してテーブルにデータを追加する

/dataconnect/schema/schema.gql の GraphQL 型の上に CodeLens のボタンが表示されます。

開発時のクエリとミューテーション

これらの CodeLens ボタンに関連する操作は、すばやく便利なアクションです。この例では、テーブルにデータを追加します。Data Connect は、GraphQL ミューテーションを使用して、データベースに対する操作方法と操作方法を説明します。このボタンを使用すると、開発時オペレーションを作成して、データを迅速にシーディングできます。

スキーマを本番環境にデプロイしたら、[実行（本番環境）] ボタンを使用して、バックエンドでこれらのアクションを実行できます。

注: ウェブ デベロッパーの場合、IDX テンプレートには各テーブルに提供されるシードデータが多数含まれています。クリックすると、1 つずつ追加することも、組み合わせて 1 つのミューテーションを作成することもできます。

メールを一覧表示するクエリを作成します

次はクエリです開発者にとって、GraphQL クエリではなく SQL クエリを記述することに慣れているため、最初は少し違うように感じるかもしれません。ただし、GraphQL は未加工の SQL よりもはるかに簡潔でタイプセーフです。VS Code の拡張機能により 開発も簡単になります

/dataconnect/connector/queries.gql ファイルの編集を開始します。すべてのメールを取得するには、次のようなクエリを使用します。

# File `/dataconnect/connector/queries.gql`

query listEmails @auth(level: PUBLIC) {
  emails {
    id, subject, text, date
    from {
      name
    }
  }
}

ここでの非常に便利な機能は、データベースの関係をグラフのように扱う機能です。メールにはユーザーを参照する from フィールドがあるため、このフィールドにネストすると、ユーザーに関する情報を取得できます。

@auth ディレクティブ

この例では、@auth ディレクティブを最大限に活用していませんが、コンセプトは非常に強力です。これにより、データベースに対するオペレーションの承認ポリシーを決定します。

このクエリはかなり単純です。多対多のリレーションを持つ複雑な結合を実行すると、Data Connect の優れた機能が最大限に発揮されます。これについては、ツールやドキュメントを見ながら詳しく学習します。

クエリをテストする

これでクエリが作成されました。クライアント コードに統合する前に、クエリが機能するかどうかを確認します。データ接続のデベロッパー エクスペリエンスには、[Data Connect Execution] パネルでクエリ結果の反復処理とテストを迅速に行う機能もあります。

このクエリに必要な引数を指定して、クエリ名の上にある [CodeLens] ボタンをクリックします。これにより、クエリが実行され、結果が表示され、期待どおりに動作していることを確認します。

クライアント SDK コードとクライアント アプリからデータをクエリする

開発サイクルを完了するには、このクエリをクライアント コードに統合します。

Data Connect サービスからクエリを呼び出してレスポンスを処理する方法を示すクライアントを作成できます。

注: IDX テンプレートを使用している場合は、スケルトン ウェブアプリ フレームワークのコードなど、出発点となるソースがあります。

1. 以前に connector.yaml ファイルに指定した場所で、自動生成されたソースを見つけます。

2. Firebase をプロジェクトに追加し、アプリを登録して、関連する Firebase Core SDK をインストールします。

   • JavaScript の場合は、こちらの手順をご覧ください。
   • Kotlin の場合は、こちらの手順に従ってください。

3. IDX を使用していない場合は、クライアントを設定して、コマンドラインから呼び出すことができます。

JavaScript

ソースファイル clientTest.js を作成し、次のコードをコピーします。

const { initializeApp } = require("firebase/app");
const {
  connectDataConnectEmulator,
  getDataConnect,
} = require("firebase/data-connect");
const { listEmails, connectorConfig } = require("@email-manager/emails");

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const dc = getDataConnect(app, connectorConfig);

// Remove the following line to connect directly to production
connectDataConnectEmulator(dc, "localhost", 9399);

listEmails().then(res => {
  console.log(res.data.emails);
  process.exit(0);
});
    

クライアントを実行できます

    node clientTest.js
    

Kotlin Android

ソースファイル clientTest.kt を作成し、次のコードをコピーします。

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    lifecycleScope.launch {
      val connector = MyConnector.instance
      connector.dataConnect.useEmulator() // Remove to connect to production
      try {
        println(connector.listEmails.execute().data.emails)
      } catch (e: Throwable) {
        println("ERROR: $e")
      }
    }
  }
}
    

この場合、次のようになります。

1. アクティビティを実行します。
2. Android の logcat 出力を確認します。

完成したプロトタイプを本番環境にデプロイする

開発のイテレーションに取り組んできました。これで、スキーマの場合と同様に、Firebase Extensions UI または Firebase CLI を使用して、スキーマ、データ、クエリ、ミューテーションをサーバーにデプロイできます。

デプロイすると、Data Connect サービスはクライアントからのオペレーションを処理できるようになります。Cloud SQL for PostgreSQL インスタンスは、最後にデプロイされた、生成されたスキーマとデータで更新されます。

（省略可）PostgreSQL をローカルにインストールする

PostgreSQL をローカルにインストールしてエミュレータと統合すると、完全なローカル開発環境でプロトタイプを作成できます。

PostgreSQL の新しいインスタンスをインストールするか、既存のインスタンスを使用できます。

PostgreSQL をインストールする

ご使用のプラットフォームの手順に沿って PostgreSQL バージョン 15.x をインストールします。

注: 今後のアクセスに備えて、ユーザー名とパスワードをメモしておいてください。

• macOS。Postgres.app をダウンロードしてインストールします。
• Windows: PostgreSQL のダウンロード ページにある EDB インストーラを使用します。
• Docker: pgvector/pgvector:15 イメージを pull して実行します。このイメージには、PostgreSQL 15.x とベクター サポートの両方が含まれています。
• Linux: 上記のイメージで Docker を使用することをおすすめしますが、一般的なディストリビューションの別の手順を使用することもできます。

インストール シーケンス中に出力されたホスト名、ポート、ユーザー名、パスワード、関連するパラメータをメモします。

PostgreSQL インスタンスに接続するには、エミュレータに次のものが必要です。

• これらの設定構成パラメータ
• dataconnect.yaml のデータベース名と、それに応じて名前が付けられた、ローカル インスタンスで初期化されたデータベース。

.firebaserc を接続文字列で更新します。

ローカル PostgreSQL のユーザー名とパスワードなど、ローカルの PostgreSQL 構成の詳細を接続文字列として使用し、.firebaserc ファイルの次のキーに追加します。

{
  "projects": {},
  ...,
  ...,
  "dataconnectEmulatorConfig": {
    "postgres": {
      "localConnectionString": "postgresql://postgresusername:postgrespassword@localhost:5432?sslmode=disable"
    }}
}

ローカル PostgreSQL インスタンスに接続する

この構成が完了したら、ローカル データベースに接続します。

1. VS Code の左側のパネルで Firebase アイコンをクリックして、Firebase VS Code 拡張機能の UI を開きます。
2. [Connect to Local PostgreSQL] ボタンをクリックします。

次のステップ

ヒント: このチュートリアルでは、限定公開プレビュー プログラムへの参加に興味がおありでしたら、Firebase Data Connect プロダクト ページからご登録ください。