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

生成された Flutter SDK を使用する

Firebase Data Connect クライアント SDK を使用すると、Firebase アプリからサーバーサイドのクエリとミューテーションを直接呼び出すことができます。Data Connect サービスにデプロイするスキーマ、クエリ、ミューテーションを設計するのと並行して、カスタムクライアント SDK を生成します。次に、この SDK のメソッドをクライアントロジックに統合します。

別の場所でも説明しましたが、Data Connect クエリとミューテーションはクライアントコードによって送信され、サーバーで実行されるわけではありません。代わりに、デプロイ時に Data Connect オペレーションは Cloud Functions のようにサーバーに保存されます。つまり、既存のユーザー（古いバージョンのアプリなど）を壊さないように、対応するクライアントサイドの変更をデプロイする必要があります。

そのため、Data Connect には、サーバーにデプロイされたスキーマ、クエリ、ミューテーションのプロトタイプを作成できるデベロッパー環境とツールが用意されています。また、プロトタイピング中にクライアントサイド SDK を自動的に生成します。

サービスアプリとクライアントアプリの更新を繰り返し行うと、サーバーサイドとクライアントサイドの両方の更新をデプロイできるようになります。

クライアント開発のワークフローとは何ですか？

スタートガイドに沿って、Data Connect の開発フロー全体を学びました。このガイドでは、スキーマから Flutter SDK を生成し、クライアントクエリとミューテーションを操作する方法について詳しく説明します。

まとめると、生成された Flutter SDK をクライアントアプリで使用するには、次の前提条件の手順を行います。

Flutter アプリに Firebase を追加します。
flutterfire CLI dart pub global activate flutterfire_cli をインストールします。
flutterfire configure を実行します。

次に、以下のリソースをご覧ください。

アプリのスキーマを開発します。
SDK の生成を設定します。
- Data Connect VS Code 拡張機能の [アプリに SDK を追加] ボタンを使用する
- connector.yaml を更新する。
クライアントコードを初期化してライブラリをインポートします。
クエリの呼び出しとミューテーションを実装します。
Data Connect エミュレータを設定して使用し、反復処理を行います。

Flutter SDK を生成する

Firebase CLI を使用して、アプリで Data Connect 生成 SDK を設定します。init コマンドは、現在のフォルダ内のすべてのアプリを検出し、生成された SDK を自動的にインストールします。

firebase init dataconnect:sdk

プロトタイピング中に SDK を更新する

Data Connect VS Code 拡張機能がインストールされている場合、生成された SDK は常に最新の状態に保たれます。

Data Connect VS Code 拡張機能を使用しない場合は、Firebase CLI を使用して生成された SDK を最新の状態に保つことができます。

firebase dataconnect:sdk:generate --watch

ビルドパイプラインで SDK を生成する

Firebase CLI を使用して、CI/CD ビルドプロセスで Data Connect SDK を生成できます。

firebase dataconnect:sdk:generate

クライアントコードを設定する

Data Connect アプリを初期化する

まず、Firebase の標準設定手順に沿ってアプリを初期化します。

次に、Data Connect プラグインをインストールします。

flutter pub add firebase_data_connect

Data Connect Flutter SDK を初期化する

Data Connect の設定に使用した情報（Firebase コンソールの [Data Connect] タブで確認可能）を使用して、Data Connect インスタンスを初期化します。

ライブラリをインポートする

クライアントコードを初期化するには、一般的な Data Connect インポートと、生成された特定の SDK インポートの 2 つのインポートセットが必要です。

// general imports
import 'package:firebase_data_connect/firebase_data_connect.dart';

// generated queries and mutations from SDK
import 'generated/movies.dart';

クライアントサイドでクエリを使用する

生成されたコードには、事前定義されたクエリ参照がすでに含まれています。必要なのは、それらをインポートして execute を呼び出すことだけです。

import 'generated/movies.dart';

await MoviesConnector.instance.listMovies().execute();

SDK のクエリメソッドを呼び出す

これらのアクションショートカット関数を使用した例を次に示します。

import 'generated/movies.dart';

function onBtnClick() {
  // This will call the generated Dart from the CLI and then make an HTTP request to the server.
  MoviesConnector.instance.listMovies().execute().then(data => showInUI(data)); // == MoviesConnector.instance.listMovies().ref().execute();
}

任意のフィールド

一部のクエリには省略可能なフィールドがあります。このような場合、Flutter SDK はビルダーメソッドを公開し、個別に設定する必要があります。

たとえば、createMovie を呼び出すときに rating フィールドは省略可能であるため、ビルダー関数で指定する必要があります。

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi"}).rating(5).execute();

変更を購読する

変更をサブスクライブできます（クエリを実行するたびに更新されます）。

QueryRef<ListMoviesData, void> listRef = MoviesConnector.instance.listMovies().ref();

// subscribe will immediately invoke the query if no execute was called on it previously.
listRef.subscribe().listen((data) {
  updateUIWithMovies(data.movies);
});

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();
await listRef.execute(); // will update the subscription above`

列挙型フィールドの変更を処理する

アプリのスキーマには列挙型を含めることができ、GraphQL クエリでアクセスできます。

アプリの設計が変更されたら、サポートされている新しい列挙値を追加できます。たとえば、アプリのライフサイクルの後半で、AspectRatio 列挙型に FULLSCREEN 値を追加するとします。

Data Connect ワークフローでは、ローカル開発ツールを使用してクエリと SDK を更新できます。

ただし、クライアントの更新バージョンをリリースする前に、以前にデプロイされたクライアントが破損する可能性があります。

復元力のある実装の例

生成された SDK では、不明な値の処理が強制されます。つまり、クライアントコードは EnumValue オブジェクトを Known または Unknown にアンラップする必要があります。

final result = await MoviesConnector.instance.listMovies().execute();

if (result.data != null && result.data!.isNotEmpty) {
  handleEnumValue(result.data![0].aspectratio);
}

void handleEnumValue(EnumValue<AspectRatio> aspectValue) {
  if (aspectValue.value != null) {
    switch(aspectValue.value!) {
      case AspectRatio.ACADEMY:
        print("This movie is in Academy aspect");
        break;
      case AspectRatio.WIDESCREEN:
        print("This movie is in Widescreen aspect");
        break;
      case AspectRatio.ANAMORPHIC:
        print("This movie is in Anamorphic aspect");
        break;
      case AspectRatio.IMAX:
        print("This movie is in IMAX aspect");
    }
  } else {
    print("Unknown aspect ratio detected: ${aspectValue.stringValue}");
  }
}

クライアントサイドでミューテーションを使用する

ミューテーションはクエリと同じ方法でアクセスできます。

await MoviesConnector.instance.createMovie({ title: 'Empire Strikes Back', releaseYear: 1980, genre: "Sci-Fi" }).rating(5).execute();

Flutter アプリのプロトタイプを作成してテストする

ローカルエミュレータを使用するようにクライアントを計測する

Data Connect エミュレータは、Data Connect VS Code 拡張機能または CLI から使用できます。

エミュレータに接続するためのアプリの計測は、どちらのシナリオでも同じです。

import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'generated/movies.dart';

MoviesConnector.instance.dataConnect
          .useDataConnectEmulator('127.0.0.1', 9399);

// Make calls from your app
QueryRef<ListMoviesData, void> ref = MoviesConnector.instance.listMovies.ref();

本番環境リソースに切り替えるには、エミュレータへの接続に関する行をコメントアウトします。

Dart SDK のデータ型

Data Connect サーバーは、一般的な GraphQL データ型を表します。これらは SDK で次のように表されます。

データ接続タイプ	Dart
タイムスタンプ	firebase_data_connect.Timestamp
Int（32 ビット）	整数
日付	DateTime
UUID	文字列
Int64	整数
浮動小数点数	double
ブール値	ブール値
すべて	firebase_data_connect.AnyValue

生成された Flutter SDK を使用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。