Erste Schritte mit Firebase Data Connect mit Flutter

In dieser Kurzanleitung erstellen und stellen Sie eine kleine Beispieldatenbank bereit und greifen über ein Flutter-Frontend darauf zu.

Vorbereitung

Für diese Kurzanleitung benötigen Sie Folgendes:

• Eine Umgebung mit den folgenden installierten Tools:
  • Node.js mit einem Paketmanager Ihrer Wahl. In dieser Anleitung wird npm vorausgesetzt.
  • Firebase CLI:

    npm i -g firebase-tools@latest

  • Das Flutter-Befehlszeilentool.
  • Die FlutterFire CLI

    dart pub global activate flutterfire_cli

• Ein Google-Konto.

Anleitung

mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

type Movie @table {
  title: String!
  imageUrl: String!
  genre: String
}

type MovieMetadata @table {
  movie: Movie! @unique
  rating: Float
  releaseYear: Int
  description: String
}

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

firebase deploy --only dataconnect

firebase dataconnect:execute dataconnect/seed_data.gql

firebase dataconnect:sdk:generate

class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

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());
}

flutter run

Nächste Schritte

Visual Studio Code-Erweiterung ausprobieren

Wenn Sie mit Data Connect entwickeln, empfehlen wir dringend die Verwendung der Visual Studio Code-Erweiterung. Auch wenn Sie Visual Studio Code nicht als primäre Entwicklungsumgebung verwenden, bietet die Erweiterung mehrere Funktionen, die die Entwicklung von Schemas und Vorgängen erleichtern:

• Ein GraphQL-Sprachserver, der Syntaxprüfung und automatische Vervollständigungsvorschläge speziell für Data Connect bietet
• CodeLens-Schaltflächen in der Zeile mit Ihrem Code, mit denen Sie Daten aus Ihren Schemadefinitionsdateien lesen und schreiben sowie Abfragen und Mutationen aus Ihren Vorgangsdefinitionen ausführen können.
• Generierte SDKs werden automatisch mit Ihren GraphQL-Definitionen synchronisiert.
• Vereinfachte Einrichtung des lokalen Emulators.
• Einfachere Bereitstellung in der Produktion.

Data Connect-Emulator für die lokale Entwicklung verwenden

In dieser Anleitung wurde gezeigt, wie Sie Data Connect-Schemas und ‑Vorgänge direkt in der Produktion bereitstellen. Wahrscheinlich möchten Sie jedoch keine Änderungen an Ihrer Produktionsdatenbank vornehmen, während Sie Ihre App aktiv entwickeln. Richten Sie stattdessen den Data Connect-Emulator ein und führen Sie Ihre Entwicklungsarbeiten damit durch. Der Emulator richtet eine lokale PGlite-Instanz ein, die sich ähnlich wie eine Live-Postgres-Instanz in Cloud SQL verhält.

Informationen zum Erstellen von Schemas und Vorgängen für Ihre App

Beim Entwickeln von Apps mit Data Connect ist das Design Ihrer Schemas und Vorgänge eine der ersten und wichtigsten Entwicklungsaufgaben, die Sie ausführen.

• Gemini in der Firebase Console ist ein KI-Tool, mit dem Data Connect-Schemas aus einer Beschreibung Ihrer App in natürlicher Sprache generiert werden können. Dieses Tool kann Ihnen den Einstieg erleichtern, insbesondere wenn Sie noch nie mit relationalen Datenbanken gearbeitet haben.
• Alternativ können Sie Datenbankschemas, Abfragen und Mutationen direkt mit GraphQL schreiben. Beginnen Sie mit der Seite Data Connect-Schemas entwerfen und lesen Sie dann die Folgeseiten, um zu erfahren, wie Sie Vorgänge schreiben.