Flutter を使用して Firebase SQL Connect を使ってみる

このクイックスタートでは、小さなサンプル データベースを作成してデプロイし、 Flutter フロントエンドからアクセスします。

前提条件

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

  • 次のツールがインストールされた環境。
  • Google アカウント。

チュートリアル

チュートリアル

1. プロジェクトの初期化

新しいディレクトリを作成し、そのディレクトリで Firebase プロジェクトを初期化します。プロンプトが表示されたら、 次のオプションを選択します。

  • 新しい Firebase プロジェクトを作成します。
  • Gemini でスキーマを作成しません（このチュートリアルでは、事前構築済みの サンプル スキーマを使用します）。
  • 新しい Cloud SQL インスタンスを作成します。
  • Flutter テンプレートを作成します。
 
mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

2. GraphQL の定義例を確認する

SQL Connect では、GraphQL を使用してすべてのデータベース スキーマとオペレーションを定義します。プロジェクトを初期化すると、Firebase CLI によって、作業を開始するための定義例が作成されます。

 dataconnect/schema/schema.gql（抜粋） 
type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}
 dataconnect/example/queries.gql（抜粋） 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

3. スキーマとオペレーションをデプロイする

データベース スキーマ、クエリ、ミューテーションを変更した場合は、変更をデータベースに反映させるために デプロイする必要があります。

 
firebase deploy --only dataconnect

4. サンプルデータでデータベースにシードを設定する

このシードデータを使用すると、サンプルアプリをテストするときに確認できます。注 このステップでは、管理タスクで許可されている任意の GraphQL を実行できます。

 
firebase dataconnect:execute dataconnect/seed_data.gql

5. Dart クライアント SDK を生成する

このコマンドは、GraphQL の定義を使用して、データベース専用の Dart ライブラリを生成します。このライブラリは、クライアント アプリですべてのデータベース オペレーションを実行するために使用します。

`connector.yaml` に定義を追加することで、Android 用の Kotlin、iOS 用の Swift、ウェブ用の JavaScript など、複数のプラットフォーム用のライブラリを生成できます。

 
firebase dataconnect:sdk:generate
 自動生成された Dart SDK（抜粋） 
class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

6. Flutter アプリを設定する

次のコマンドを実行して、Firebase プロジェクトを使用するように Flutter アプリを設定します。

flutterfire コマンドのプロンプトが表示されたら、先ほど作成した Firebase プロジェクト を選択し、ターゲットとするプラットフォームを選択します。

 
cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

7. サンプル Flutter クライアントを作成する

flutter_app/lib/main.dart の内容を、このシンプルな Flutter アプリに置き換えます。

このアプリは、生成された SDK の関数を使用して、必要なデータベース アクセスを完了します。 

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_data_connect/firebase_data_connect.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/dataconnect_generated/generated.dart';
import 'package:flutter_app/firebase_options.dart';

class MyApp extends StatelessWidget {
  late final Future<QueryResult<ListMoviesData, void>>
  _movieListFuture;

  MyApp({super.key}) {
    _movieListFuture = ExampleConnector.instance
        .listMovies()
        .execute();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FutureBuilder(
        future: _movieListFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return ListView.builder(
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) => Card(
                child: Text(
                  snapshot.data?.data.movies[index].title ?? "",
                ),
              ),
              itemCount: snapshot.data?.data.movies.length ?? 0,
            );
          }
          return const CircularProgressIndicator();
        },
      ),
    );
  }
}

Future<void> main() async {
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

8. アプリを試す

開発用サーバーを起動して、サンプルアプリの動作を確認します。

 
flutter run

次のステップ

SQL Connect VS Code 拡張機能を試す

SQL Connect で開発する場合は、 SQL Connect VS Code 拡張機能を使用することを強くおすすめします。 Visual Studio Code を主要な開発 環境として使用していない場合でも、この拡張機能には、スキーマとオペレーション の開発をより便利にするための機能がいくつか用意されています。

  • GraphQL 言語サーバー。 SQL Connect に固有の構文チェックとオートコンプリート候補を提供します。
  • コードに沿った CodeLens ボタン。スキーマ 定義ファイルからデータの読み取りと書き込みを行い、オペレーション定義からクエリとミューテーションを実行できます。
  • 生成された SDK を GraphQL の定義と自動的に同期します。
  • ローカル エミュレータの設定を簡素化します。
  • 本番環境へのデプロイを簡素化します。

ローカル開発に SQL Connect エミュレータを使用する

このチュートリアルでは、SQL Connect スキーマとオペレーションを本番環境に直接デプロイする方法について説明しましたが、アプリを積極的に開発している間は、本番環境データベースを変更しないことをおすすめします。代わりに、 SQL Connect エミュレータ を設定し、本番環境ではなくエミュレータに対して開発作業を行います。エミュレータは、ライブ PostgreSQL インスタンスと同様に動作するローカル PGlite インスタンスを Cloud SQL に設定します。

アプリのスキーマと オペレーションを作成する方法を学ぶ

SQL Connect でアプリを開発する場合、スキーマとオペレーションの設計 は、最初に行う最も重要な開発タスクの 1 つです。

  • コンソールの FirebaseGemini は、アプリの自然言語の説明から SQL Connect スキーマを生成できる AI ツールです。このツールを使用すると、特にリレーショナル データベースを初めて使用する場合に、すぐに作業を開始できます。
  • または、GraphQL を使用してデータベース スキーマ、クエリ、ミューテーション を直接作成することもできます。まず、 設計SQL Connectスキーマのガイダンスから始め、 次のページに進んでオペレーションの作成方法を学習します。

SQL Connect からリアルタイム アップデートを取得する方法を学ぶ

SQL Connect を使用すると、変化するデータに リアルタイムで 反応するクライアント アプリケーションを作成できます。SQL Connect からリアルタイム アップデートを取得するをご覧ください。