Firebase Data Connect を使ってみる

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

• Firebase プロジェクトに Firebase Data Connect を追加します。
• Visual Studio を含む開発環境をセットアップする 本番環境インスタンスで動作するコード拡張。
• その後、次の方法を紹介します。 <ph type="x-smartling-placeholder">
  </ph>
  • メールアプリのスキーマを作成し、本番環境にデプロイします。
  • スキーマのクエリとミューテーションを定義します。
  • 最終的なスキーマ、クエリ、データを本番環境にデプロイします。

前提条件

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

• Linux、macOS、Windows
• Visual Studio Code

Firebase プロジェクトに接続する

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

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

3. Firebase コンソールの Data Connect セクションに移動します。 製品設定ワークフローに従います

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

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

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

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

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

• Kotlin Android、iOS、ウェブのデベロッパーの方は、 VS Code 開発を使用して、ローカルでスキーマとオペレーションを設計し、テストし、 Cloud SQL for PostgreSQL インスタンスに接続します
• ウェブ デベロッパーは、IDX 開発を使用して、事前構成された IDX テンプレート（PostgreSQL を含む）、Data Connect エミュレータを含む VS Code 拡張機能、クイックスタート コードを使用して IDX ワークスペースで開発できます。詳しくは、 プロジェクト IDX のサイト。

このクイックスタートでは、VS Code 拡張機能の開発フローに焦点を当てます。続行するには:

1. ローカル プロジェクト用の新しいディレクトリを作成します。
2. 新しいディレクトリで VS Code を開きます。

3. VSIX パッケージとしてバンドルされた拡張機能を Firebase Storage からダウンロードします。

4. VS Code の [表示] メニューで、[拡張機能] を選択します。

5. [拡張機能] パネルのタイトルバーで、メニュー アイコンをクリックします。 more_horiz を選択してから、 VSIX からのインストール...

必要に応じて、ローカル開発用にローカル PostgreSQL データベースをインストールできます。 Data Connect エミュレータを使用します。この設定についてはこのモジュールの ご覧ください。

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

通常の手順に沿って CLI をインストールします。npm がすでにインストールされている場合は、次のコマンドを実行します。

npm install -g firebase-tools

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

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

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

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

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

スキーマの作成

Firebase プロジェクト ディレクトリの /dataconnect/schema/schema.gql ファイルで、ユーザーとメールアドレスを含む GraphQL スキーマの定義を開始します。

ユーザー

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 キーを追加します（指定されていない場合）。ただし、今回は uid を主キーにする必要があります。 @table(key: "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 拡張機能を 使用する場合は、続行する前にスキーマをデプロイする必要があります。スキーマを本番環境データベースにデプロイすると、コンソールでスキーマを確認できるようになります。

1. Firebase VS Code 拡張機能を使用してデプロイできます。
   • 拡張機能 UI で、Firebase Data Connect パネルの [ デプロイ。
2. スキーマの変更を確認し、有害な可能性がある変更を承認する必要があるかもしれません あります。次の操作を行うよう求められます。 <ph type="x-smartling-placeholder">
   </ph>
   • firebase dataconnect:sql:diff を使用してスキーマの変更を確認する
   • 変更に問題がなければ、 firebase dataconnect:sql:migrate。

表にデータを追加する

VS Code エディタ パネルに、/dataconnect/schema/schema.gql の GraphQL 型の上に CodeLens ボタンが表示されます。Deployment は [Add data] と [Run (Production)] の ボタンをクリックすると、バックエンドのデータベースにデータを追加できます。

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

1. schema.gql で、User 型宣言の上にある [データを追加] ボタンをクリックします。
   
2. 生成された User_insert.gql ファイルで、3 つのフィールドのデータをハードコードします。
3. [実行（本番環境）] ボタンをクリックします。
   
4. 前の手順を繰り返して Email テーブルにレコードを追加し、生成された Email_insert ミューテーションのプロンプトが表示されたら、fromUid フィールドにユーザーの uid を指定します。

クエリを定義する

次はクエリです開発者は 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
    }
  }
}

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

データベースのリレーションシップをグラフのように扱える点は、非常に魅力的な機能です。Email には、メールアドレスを参照する from フィールドが User: フィールドにネストすると、ユーザーに関する情報を取得できます。

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

開発のイテレーションを完了しました。これで、スキーマの場合と同様に（#deploy-schema）、Firebase 拡張機能の UI または Firebase CLI を使用して、スキーマ、データ、クエリをサーバーにデプロイできます。

Firebase VS Code 拡張機能を使用してデプロイする場合は、[デプロイ] ボタンをクリックします。

デプロイすると、コンソールでオペレーションを表示して実行できるようになります。 できます。Data Connect サービスでオペレーションを処理できるようになります 許可します。Cloud SQL for PostgreSQL インスタンスは、Cloud SQL 最終的にデプロイされたスキーマとデータです。

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

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

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

PostgreSQL をインストールする

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

• macOS: Postgres.app をダウンロードしてインストールします。
• Windows: PostgreSQL のダウンロード ページの EDB インストーラを使用します。
• Docker:Docker コマンドを pull して実行します。 pgvector/pgvector:pg15 個の画像、 PostgreSQL 15.x とベクトル サポートの両方を提供します。
• Linux: 上記のイメージでは Docker を使用することをおすすめしますが、 一般的なディストリビューション向けの別の手順をご覧ください。

認証中にホスト名、ポート、ユーザー名、パスワード、および関連パラメータの出力をメモしておきます。 確認します。

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

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

ローカル PostgreSQL インスタンスを使用する

既存のローカル PostgreSQL インスタンスを使用するには、Data Connect エミュレータの設定を更新します。

firebase setup:emulators:dataconnect

プロンプトが表示されたら、次の形式で PostgreSQL 接続文字列を入力します。 postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable。

接続文字列の詳細については、PostgreSQL のドキュメントをご覧ください。

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

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

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

次のステップ