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 Development を使用してプロトタイプを作成できる PostgreSQL で事前構成された IDX テンプレートを使用して、IDX ワークスペースで Data Connect エミュレータとクイックスタート コードを使用した VS Code 拡張機能 自動的に設定されます。詳しくは、 プロジェクト 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 エディタパネルで、CodeLens ボタンが /dataconnect/schema/schema.gql の GraphQL 型。Deployment は [Add data] と [Run (Production)] の ボタンをクリックすると、バックエンドのデータベースにデータを追加できます。

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

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

クエリを定義する

次はクエリです開発者は クエリよりも効率的です。 ただし、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: フィールドにネストすると、ユーザーに関する情報を取得できます。

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

開発のイテレーションに取り組みました。これで、Kubernetes クラスタを スキーマ、データ、クエリをサーバーに送信し、 スキーマの場合と同様に、拡張機能 UI または Firebase CLI を使用します。 （#deploy-schema）。

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 に接続] ボタンをクリックします。

次のステップ