このクイックスタートでは、アプリケーションで Firebase Data Connect を作成する方法について説明します。
- Firebase プロジェクトに Firebase Data Connect を追加します。
- 本番環境インスタンスで動作するように、Visual Studio Code 拡張機能を含む開発環境を設定します。
- その後、次の方法を説明します。
- 映画レビュー アプリのスキーマを作成し、本番環境にデプロイします。
- スキーマのクエリとミューテーションを定義します。
- 強力な型付けの SDK を生成し、アプリで使用する
- 最終的なスキーマ、クエリ、データを本番環境にデプロイします。
前提条件
このクイックスタートをローカル環境で使用するには、以下が必要です。
- Linux、macOS、Windows
- Visual Studio Code
Firebase プロジェクトに接続する
- Firebase プロジェクトをまだ作成していない場合は作成します。
- Firebase コンソールで [プロジェクトを追加] をクリックし、画面の指示に従います。
- Firebase コンソールの Data Connect セクションに移動し、製品設定ワークフローに沿って操作します。
プロジェクトを Blaze プランにアップグレードします。これにより、Cloud SQL for PostgreSQL インスタンスを作成できます。
Cloud SQL for PostgreSQL データベースのロケーションを選択します。
プロジェクト、サービス、データベースの名前と ID をメモして、後で確認できるようにします。
残りの設定フローに沿って、[完了] をクリックします。
開発環境を選択して設定する
Data Connect は、開発に 2 つの開発エクスペリエンスをサポートしています。
- Kotlin Android、iOS、Flutter、ウェブ デベロッパーは、VS Code 開発を使用して、Cloud SQL for PostgreSQL インスタンスに接続しながら、ローカルでスキーマとオペレーションを設計してテストできます。
- ウェブ デベロッパーは、IDX 開発を使用して、事前構成された IDX テンプレート(PostgreSQL、Data Connect エミュレータを含む VS Code 拡張機能、クイックスタート クライアント コードが設定されている)を使用して、IDX ワークスペースでプロトタイプを作成できます。詳しくは、Project IDX のサイトをご覧ください。
このクイックスタートでは、VS Code 拡張機能の開発フローに焦点を当てます。続行するには:
- ローカル プロジェクト用の新しいディレクトリを作成します。
- 新しいディレクトリで VS Code を開きます。
Visual Studio Code Marketplace から Firebase Data Connect 拡張機能をインストールします。
ローカル プロジェクトを設定する
通常の手順に沿って CLI をインストールします。npm がすでにインストールされている場合は、次のコマンドを実行します。
npm install -g firebase-tools
プロジェクト ディレクトリを設定する
ローカル プロジェクトを設定するには、プロジェクト ディレクトリを初期化します。
VS Code の左側のパネルで Firebase アイコンをクリックして、Firebase VS Code 拡張機能の UI を開きます。
- [Google でログイン] ボタンをクリックします。
- [Firebase プロジェクトを接続] ボタンをクリックして、コンソールで前に作成したプロジェクトを選択します。
- [Run firebase init] ボタンをクリックします。
- プロジェクトが Blaze プランを使用している場合は、[バックエンド リソースを今すぐ構成しますか?] プロンプトに [はい] と回答します。
[Start emulators] ボタンをクリックします。
スキーマの作成
Firebase プロジェクト ディレクトリの /dataconnect/schema/schema.gql
ファイルで、映画を含む GraphQL スキーマの定義を開始します。
映画
Data Connect では、GraphQL フィールドは列にマッピングされます。Movie
型には、id
、title
、imageUrl
、genre
があります。Data Connect は、プリミティブ データ型 String
と UUID
を認識します。
次のスニペットをコピーするか、ファイル内の対応する行のコメント化を解除します。
# File `/dataconnect/schema/schema.gql`
# By default, a UUID id key will be created by default as primary key.
type Movie @table {
id: UUID! @default(expr: "uuidV4()")
title: String!
imageUrl: String!
genre: String
}
MovieMetadata
映画が作成できたので、映画のメタデータをモデル化できます。
次のスニペットをコピーするか、ファイル内の対応する行をコメント化解除します。
# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
# This time, we omit adding a primary key because
# you can rely on Data Connect to manage it.
# @unique indicates a 1-1 relationship
movie: Movie! @unique
# movieId: UUID <- this is created by the above reference
rating: Float
releaseYear: Int
description: String
}
movie
フィールドは Movie
型にマッピングされています。Data Connect は、これが Movie
と MovieMetadata
のリレーションであることを理解し、このリレーションを管理します。
Data Connect スキーマの詳細については、ドキュメントをご覧ください
スキーマを本番環境にデプロイする
Firebase VS Code 拡張機能を使用して本番環境データベースを操作する場合は、続行する前にスキーマをデプロイする必要があります。スキーマを本番環境データベースにデプロイすると、コンソールでスキーマを表示できるようになります。
- Data Connect VS Code 拡張機能を使用してデプロイできます。
- 拡張機能の UI の Firebase Data Connect パネルで、[本番環境にデプロイ] をクリックします。
- スキーマの変更を確認し、破壊的な変更を承認する必要がある場合があります。次の操作を行うよう求められます。
firebase dataconnect:sql:diff
を使用してスキーマの変更を確認する- 変更に問題がなければ、
firebase dataconnect:sql:migrate
で開始したフローを使用して変更を適用します。
表にデータを追加する
VS Code エディタ パネルに、/dataconnect/schema/schema.gql
の GraphQL 型の上に CodeLens ボタンが表示されます。スキーマを本番環境にデプロイしたため、[データを追加] ボタンと [実行(本番環境)] ボタンを使用して、バックエンドのデータベースにデータを追加できます。
Movie
テーブルにレコードを追加するには:
schema.gql
で、Movie
型宣言の上にある [データを追加] ボタンをクリックします。
- 生成された
Movie_insert.gql
ファイルで、4 つのフィールドのデータをハードコードします。 - [実行(本番環境)] ボタンをクリックします。
- 前の手順を繰り返して
MovieMetadata
テーブルにレコードを追加し、生成されたMovieMetadata_insert
ミューテーションのプロンプトが表示されたら、movieId
フィールドに Movie のid
を指定します。
データが追加されたことをすばやく確認するには:
schema.gql
に戻り、Movie
型宣言の上にある [データを読み取る] ボタンをクリックします。- 生成された
Movie_read.gql
ファイルで、[実行(本番環境)] ボタンをクリックしてクエリを実行します。
Data Connect ミューテーションの詳細については、ドキュメントをご覧ください
クエリを定義する
次はクエリです。デベロッパーは GraphQL クエリではなく SQL クエリの作成に慣れているため、最初は少し違和感があるかもしれません。ただし、GraphQL は、未加工の SQL よりもはるかに簡潔で型安全です。また、VS Code 拡張機能により、開発が容易になります。
/dataconnect/connector/queries.gql
ファイルを編集します。すべての映画を取得するには、次のようなクエリを使用します。
# File `/dataconnect/connector/queries.gql`
# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
movies {
id
title
imageUrl
genre
}
}
近くの CodeLens ボタンを使用してクエリを実行します。
Data Connect クエリの詳細については、ドキュメントをご覧ください
SDK を生成し、アプリで使用する
- [Add SDK to app] ボタンをクリックします。
表示されたダイアログで、アプリのコードを含むディレクトリ(Data Connect)を選択します。SDK コードが生成され、そこに保存されます。
アプリ プラットフォームを選択し、選択したディレクトリに SDK コードがすぐに生成されることを確認します。
生成された SDK を使用して、クライアント アプリ(ウェブ、Android、iOS、Flutter)からクエリとミューテーションを呼び出す方法を学びます。
スキーマとクエリを本番環境にデプロイする
開発のイテレーションを完了しました。これで、スキーマの場合と同様に、Firebase Extensions UI または Firebase CLI を使用してスキーマ、データ、クエリをサーバーにデプロイできます。
Firebase VS Code 拡張機能を使用してデプロイする場合は、[本番環境にデプロイ] ボタンをクリックします。
デプロイしたら、Firebase コンソールに移動して、スキーマ、オペレーション、データがクラウドにアップロードされていることを確認します。スキーマを表示し、コンソールでオペレーションを実行できるはずです。Cloud SQL for PostgreSQL インスタンスは、最終的にデプロイされた生成されたスキーマとデータで更新されます。
Data Connect エミュレータの使用方法については、ドキュメントをご覧ください
次のステップ
デプロイされたプロジェクトを確認し、その他のツールを確認する。
Firebase コンソールで、データベースにデータを追加したり、スキーマを検査、変更したり、Data Connect サービスをモニタリングしたりします。詳しくは、ドキュメントをご覧ください。たとえば、クイックスタートを完了したので、次のようにします。
スキーマ、クエリ、ミューテーションの開発について学習する。
ウェブ、Android、iOS、Flutter のクライアント SDK を生成し、クライアント コードからクエリとミューテーションを呼び出す方法を学習する。