Google I/O 2022 で発表された Firebase の最新情報をご覧ください。詳細

このページは Cloud Translation API によって翻訳されました。

Firebase Data Connect を使ってみる

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

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

前提条件

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

Linux、macOS、Windows
Visual Studio Code

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

Firebase プロジェクトをまだ作成していない場合は作成します。
1. Firebase コンソールで [プロジェクトを追加] をクリックし、画面の指示に従います。
プロジェクトを Blaze プランにアップグレードします。これにより、Cloud SQL for PostgreSQL インスタンスを作成できます。

注: Blaze のアップグレードでお支払い情報を設定しますが、プレビュー期間中の Data Connect またはデフォルトの Cloud SQL for PostgreSQL 構成の使用に対しては課金されません。
Firebase コンソールの [Data Connect] セクションに移動し、プロダクトの設定ワークフローに沿って操作します。
Cloud SQL for PostgreSQL データベースのロケーションを選択します。
後で確認できるように、プロジェクト、サービス、データベースの名前と ID をメモします。
残りのセットアップフローに沿って操作し、[完了] をクリックします。

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

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

Data Connect を使い始めるには、Visual Studio Code でアプリのプロトタイピングを行います。

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

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

ウェブまたは Kotlin Android のデベロッパーは、Cloud SQL for PostgreSQL インスタンスへの接続中にスキーマとオペレーションをローカルでプロトタイピングできます。また、（必要に応じて）PostgreSQL をローカルで実行することもできます。
ウェブデベロッパーは、IDX を使用して、PostgreSQL の事前構成済みの IDX テンプレート、Data Connect エミュレータを使用した VS Code 拡張機能、セットアップされたクイックスタートコードを使用して、IDX ワークスペースでプロトタイプを作成できます。

VS Code 開発

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

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

IDX の開発

IDX は、ウェブアプリ開発用に最適化された環境です。Kotlin Android デベロッパーは、[VS Code の開発] タブの手順に沿って操作します。

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

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

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

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

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

firebase experiments:enable dataconnect

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

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

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

Firebase 拡張機能の設定

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

Firebase Extensions UI での手順:

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

ターミナルのセットアップ

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

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

SDK コードを生成する場所を構成する

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

SDK の生成先を指定するには、dataconnect/connector/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

Data Connect Toolkit についての理解を深める

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

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

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

開発作業中、ツールキットを使用すると、ローカル環境や本番環境のリソースを操作できます。このクイックスタートでは、本番環境を操作します。

IDX における Data Connect の VS Code 拡張機能

拡張機能 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!
}

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

メール

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

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

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

from フィールドは User の型にマッピングされていることに注意してください。Data Connect は、これが Email と User の間のリレーションであることを理解し、このリレーションを管理します。

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

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

Firebase VS Code 拡張機能を使用してデプロイできます。
- 拡張機能 UI の [Firebase Data Connect] パネルで、[デプロイ] をクリックします。
または、Firebase CLI を使用することもできます。
```
firebase deploy
```
拡張機能フローまたは CLI フローでは、スキーマの変更を確認して、破壊的な可能性のある変更を承認する必要がある場合があります。次の操作を行うよう求められます。
- firebase dataconnect:sql:diff を使用してスキーマの変更を確認する
- 変更に問題がなければ、firebase dataconnect:sql:migrate で開始されたフローを使用して変更を適用します。

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

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

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

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

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

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

これらの CodeLens ボタンに関連する操作は、迅速かつ便利な操作です。この場合は、テーブルにデータを追加します。Data Connect は GraphQL ミューテーションを使用して、データベースを操作する方法とユーザーを記述します。このボタンを使用すると、データシードを迅速に行うための開発時オペレーションが作成されます。

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

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

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

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

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

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

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

@auth ディレクティブ

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

このクエリは非常に単純です。多対多の関係でより複雑な結合を実行すると、Data Connect の優れた機能が発揮されます。これについてはツールやドキュメントで学習します

クエリをテストする

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

このクエリに必要な引数を入力してから、クエリ名の上にある [CodeLens] ボタンをクリックします。クエリが実行されて結果が表示されるため、クエリが想定どおりに機能していることがわかります。

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

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

クライアントを作成して、クエリの呼び出しと Data Connect サービスからのレスポンスの処理のデモを行うことができます。

以前に connector.yaml ファイルで指定した場所に、自動生成されたソースを配置します。
Firebase をプロジェクトに追加してアプリを登録し、関連する Firebase Core SDK をインストールします。
- JavaScript の場合は、こちらの手順に従ってください。
- Kotlin については、こちらの手順を行ってください。
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")
      }
    }
  }
}

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

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

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

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

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

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

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

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

PostgreSQL をインストールする

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

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

インストールシーケンス中のホスト名、ポート、ユーザー名、パスワード、および関連パラメータの出力をメモします。

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

この設定構成パラメータは
dataconnect.yaml のデータベース名と、ローカルインスタンスで初期化された対応する名前のデータベース。

接続文字列で `.firebaserc` を更新する

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

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

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

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

VS Code の左側のパネルで Firebase アイコンをクリックして、Firebase VS Code 拡張機能 UI を開きます。
[ローカル PostgreSQL に接続] ボタンをクリックします。