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

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

Firebase Data Connect を使ってみる

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

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

前提条件

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

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 拡張機能を設定すると、開発を迅速に反復できます。

ローカルプロジェクト用の新しいディレクトリを作成します。
新しいディレクトリで 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

ローカルプロジェクトを設定するには、プロジェクトディレクトリを初期化します。

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

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

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

Firebase Extensions UI での手順:

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

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

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

これで設定は完了です。それでは、Data Connect を使って開発を始めましょう。

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

/dataconnect/schema/schema.gql
/dataconnect/default-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 で開始されたフローを使用して変更を適用します。

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

VS Code エディタパネルで、/dataconnect/schema/schema.gql の GraphQL 型の上に CodeLens ボタンが表示されます。

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

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

スキーマを本番環境にデプロイしたため、schema.gql の [Add data] CodeLens ボタンと、生成されたファイルの [Run (Production)] ボタンを使用すると、バックエンドでこれらのアクションを実行できます。

User テーブルと Email テーブルにレコードを追加するには:

schema.gql で、User 型宣言の上にある [データを追加] ボタンをクリックします。
生成される User_insert.gql ファイルで、3 つのフィールドのデータをハードコードします。
[Run (Production)] ボタンをクリックします。
上記の手順を繰り返して Email テーブルにレコードを追加します。生成された Email_insert ミューテーションでプロンプトに従って、fromUid フィールドにユーザーの uid を指定します。

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

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

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

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

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

近くにある CodeLens ボタンを使用してクエリを実行します。

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

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

開発のイテレーションに取り組みました。これで、スキーマを使用した場合と同様に、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 に接続] ボタンをクリックします。