Firebase Data Connect を使ってみる

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

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

前提条件

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

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 またはウェブ デベロッパーの方は、VS Code Google Cloud に接続しながら、ローカルでスキーマとオペレーションのプロトタイプを作成する 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 データベースをインストールできます。 実装しますこの設定についてはこのモジュールの ご覧ください。

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

通常の手順に沿って 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!
}

デフォルトでは、UUID id キーがない場合、Firebase Data Connect は UUID キーを追加します 表示されます。ただし、今回は 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 型の上の [データを追加] ボタンをクリックします。 の宣言が必要です。
    Firebase Data Connect の Code Lens データ追加ボタン
  2. 生成される User_insert.gql ファイルで、次の変数のデータのハードコードを行います。 3 つのフィールドがあります
  3. [Run (Production)] ボタンをクリックします。
    Firebase Data Connect の [Code] レンズの実行ボタン
  4. 上記の手順を繰り返して Email テーブルにレコードを追加し、次を指定します。 生成されたプロンプトに従って、ユーザーの uid を fromUid フィールドに入力します。 Email_insert ミューテーション。

クエリを定義する

次はクエリです開発者は 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 フィールドが User: フィールドにネストすると、ユーザーに関する情報を取得できます。

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

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

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

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

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

PostgreSQL をローカルにインストールしてエミュレータと統合すると、 プロトタイプを作成してテストできます。

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

PostgreSQL のインストール

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

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

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

次のステップ