Erste Schritte mit Firebase SQL 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:
  • Ein Google-Konto.

Anleitung

Anleitung

1. Projekt initialisieren

Erstellen Sie ein neues Verzeichnis und initialisieren Sie darin ein Firebase-Projekt. Wählen Sie bei entsprechender Aufforderung die folgenden Optionen aus:

  • Erstellen Sie ein neues Firebase-Projekt.
  • Erstellen Sie kein Schema mit Gemini. In diesem Tutorial verwenden Sie ein vorgefertigtes Beispielschema.
  • Erstellen Sie eine neue Cloud SQL-Instanz.
  • Flutter-Vorlage erstellen
 
mkdir myproj ; cd myproj
firebase login --reauth
firebase init dataconnect

2. Beispielhafte GraphQL-Definitionen ansehen

In SQL Connect definieren Sie alle Datenbankschemas und ‑vorgänge mit GraphQL. Als Sie Ihr Projekt initialisiert haben, hat die Firebase-Befehlszeile einige Beispieldefinitionen erstellt, damit Sie loslegen können.

 dataconnect/schema/schema.gql (Auszug) 
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 (Auszug) 
query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
  }
}

3. Schemas und Vorgänge bereitstellen

Wenn Sie Änderungen an Ihren Datenbankschemas, Abfragen oder Mutationen vornehmen, müssen Sie sie bereitstellen, damit die Änderungen in der Datenbank wirksam werden.

 
firebase deploy --only dataconnect

4. Datenbank mit Beispieldaten füllen

Anhand dieser Startdaten können Sie die Beispiel-App testen. Beachten Sie, dass Sie in diesem Schritt beliebigen GraphQL-Code ausführen, was für administrative Aufgaben zulässig ist.

 
firebase dataconnect:execute dataconnect/seed_data.gql

5. Dart-Client-SDK generieren

Mit diesem Befehl werden Ihre GraphQL-Definitionen verwendet, um eine Dart-Bibliothek speziell für Ihre Datenbank zu generieren. Sie verwenden diese Bibliothek in Ihrer Client-App, um alle Datenbankvorgänge auszuführen.

Sie können Bibliotheken für mehrere Plattformen generieren, darunter Kotlin für Android, Swift für iOS und JavaScript für das Web, indem Sie connector.yaml Definitionen hinzufügen.

 
firebase dataconnect:sdk:generate
 Automatisch generiertes Dart SDK (Auszug) 
class ExampleConnector {
  ListMoviesVariablesBuilder listMovies() {
    return ListMoviesVariablesBuilder(dataConnect);
  }

  // ...
}

6. Flutter-App einrichten

Führen Sie diese Befehle aus, um die Flutter-App für die Verwendung Ihres Firebase-Projekts einzurichten.

Wenn Sie vom flutterfire-Befehl dazu aufgefordert werden, wählen Sie das zuvor erstellte Firebase-Projekt und die gewünschten Plattformen aus.

 
cd flutter_app
flutter pub add firebase_core firebase_data_connect
flutterfire configure

7. Flutter-Beispielclient schreiben

Ersetzen Sie den Inhalt von flutter_app/lib/main.dart durch diese einfache Flutter-App.

Die App führt den erforderlichen Datenbankzugriff mit einer Funktion aus dem generierten SDK aus.

 
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. App testen

Starten Sie den Entwicklungsserver, um die Beispiel-App in Aktion zu sehen.

 
flutter run

Nächste Schritte

SQL Connect-VS Code-Erweiterung ausprobieren

Wenn Sie mit SQL Connect entwickeln, empfehlen wir dringend die Verwendung der SQL Connect-VS 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 SQL 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.
  • Vereinfachte Bereitstellung in der Produktion.

SQL Connect-Emulator für die lokale Entwicklung verwenden

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

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

Wenn Sie Apps mit SQL Connect entwickeln, ist das Design Ihrer Schemas und Vorgänge eine der ersten und wichtigsten Entwicklungsaufgaben, die Sie erledigen müssen.

  • Gemini in der Firebase-Konsole ist ein KI-Tool, mit dem SQL 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 den Informationen unter SQL Connect-Schemas entwerfen und lesen Sie dann auf den Folgeseiten, wie Sie Vorgänge schreiben.