Erste Schritte mit Firebase Data Connect lokal

In dieser Kurzanleitung erfahren Sie, wie Sie Firebase Data Connect lokal in Ihrer Anwendung erstellen, ohne eine Produktions-SQL-Instanz einzurichten.

  • Fügen Sie Firebase Data Connect zu Ihrem Firebase-Projekt hinzu.
  • Entwicklungsumgebung einschließlich Visual Studio einrichten Codeerweiterung für eine lokale Instanz.
  • Anschließend zeigen wir Ihnen, wie Sie:
    • Schema für eine Film-App erstellen
    • Definieren Sie Abfragen und Mutationen, die in Ihrer App verwendet werden
    • Abfragen und Mutationen mit Beispieldaten mit einem lokalen Emulator testen
    • Stark typisierte SDKs generieren und in Ihrer App verwenden
    • Stellen Sie das endgültige Schema, die Abfragen und die Daten in der Cloud bereit (optional, Blaze-Plan erforderlich).

Vorbereitung

Für diese Kurzanleitung benötigen Sie Folgendes.

Entwicklungsumgebung einrichten

Sie benötigen Visual Studio Code, um das Schema zu verwalten und Abfragen zu definieren, die in Ihrer Anwendung verwendet werden. Ein stark typisiertes SDK wird automatisch für Sie generiert:

  1. Erstellen Sie ein neues Verzeichnis für Ihr lokales Projekt.
  2. Öffnen Sie VS Code im neuen Verzeichnis.
  3. Installieren Sie die Firebase Data Connect-Erweiterung aus dem Visual Studio Code Marketplace.

Projektverzeichnis einrichten

Initialisieren Sie Ihr Projektverzeichnis, um Ihr lokales Projekt einzurichten. Im VS-Code auf das Firebase-Symbol, um die Benutzeroberfläche der Data Connect VS Code-Erweiterung:

  1. Klicken Sie auf die Schaltfläche Über Google anmelden.
  2. Klicken Sie auf die Schaltfläche Firebase-Projekt verbinden und wählen Sie das gewünschte Projekt aus. die Sie zuvor in der Console erstellt haben.
  3. Klicken Sie auf die Schaltfläche firebase init ausführen.
  4. Klicken Sie auf die Schaltfläche Emulator starten.

Schema erstellen

Definieren Sie in Ihrem Firebase-Projektverzeichnis in der Datei /dataconnect/schema/schema.gql ein GraphQL-Schema für Filme.

Film

In Data Connect werden GraphQL-Felder Spalten zugeordnet. Film hat id, title, imageUrl und genre. Data Connect erkennt primitive Datentypen: String und UUID.

Kopieren Sie das folgende Snippet oder entfernen Sie die Kommentarzeichen in den entsprechenden Zeilen in der Datei.

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

Kopieren Sie das folgende Snippet oder entfernen Sie die Kommentarzeichen für die entsprechenden Zeilen in der Datei.

# 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
}

Beachten Sie, dass das Feld movie dem Typ Movie zugeordnet ist. Data Connect ist sich bewusst, dass es sich um eine Beziehung zwischen Movie und MovieMetadata handelt, und verwaltet diese Beziehung für Sie.

Weitere Informationen zu Data Connect-Schemas in der Dokumentation

Daten in Tabellen einfügen

Im VS Code-Editorbereich sehen Sie CodeLens-Schaltflächen über dem GraphQL-Typen in /dataconnect/schema/schema.gql. Mit den Schaltflächen Daten hinzufügen und Ausführen (lokal) können Sie Ihrer lokalen Datenbank Daten hinzufügen.

So fügen Sie den Tabellen Movie und MovieMetadata Einträge hinzu:

  1. Klicken Sie in schema.gql über der Typdeklaration Movie auf die Schaltfläche Daten hinzufügen.
    Code Lens-Schaltfläche „Daten hinzufügen“ für Firebase Data Connect
  2. Codieren Sie in der generierten Movie_insert.gql-Datei Daten für die drei Felder.
  3. Klicken Sie auf die Schaltfläche Run (Local) (Ausführen (Lokal)).
    Code Lens-Schaltfläche „Ausführen“ für Firebase Data Connect
  4. Wiederholen Sie die vorherigen Schritte, um der Tabelle MovieMetadata einen Eintrag hinzuzufügen. Geben Sie die uid Ihres Films im Feld movie ein, wie im generierte MovieMetadata_insert-Mutation.

So prüfen Sie schnell, ob Daten hinzugefügt wurden:

  1. Klicken Sie in schema.gql auf die Schaltfläche Daten lesen.
  2. Klicken Sie in der resultierenden Datei Movie_read.gql auf die Schaltfläche Run (Local), führen Sie die Abfrage aus.

Weitere Informationen zu Data Connect-Mutationen in der Dokumentation

Abfrage definieren

Jetzt kommt der Spaß: Definieren wir die Abfragen, die Sie in Ihrer Anwendung benötigen. Als Entwickler sind Sie daran gewöhnt, SQL-Abfragen anstelle von GraphQL-Abfragen zu schreiben Abfragen ausführen. Das kann sich also auf den ersten Blick etwas anders anfühlen. GraphQL ist jedoch viel prägnanter und typsicherer als reines SQL. Und unser VS-Code vereinfacht die Entwicklung.

Bearbeiten Sie die Datei /dataconnect/connector/queries.gql. Wenn Sie möchten Um alle Filme abzurufen, verwenden Sie eine Abfrage wie diese.

# 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
  }
}

Führen Sie die Abfrage mit der CodeLens-Schaltfläche in der Nähe aus.

Eine wirklich spannende Funktion ist die Möglichkeit, die Beziehungen der Datenbank als Graph darzustellen. Da MovieMetadata das Feld movie hat, das auf einen Film verweist, können Sie diese Informationen Informationen zum Film zurück. Versuchen Sie, den generierten Typ movieMetadata_on_movie zum ListMovies-Abfrage zu erstellen.

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

Weitere Informationen zu Data Connect-Abfragen in der Dokumentation

SDKs generieren und in Ihrer App verwenden

Klicken Sie im linken Bereich von VS Code auf das Firebase-Symbol, um die Benutzeroberfläche der Data Connect-VS Code-Erweiterung zu öffnen:

  1. Klicken Sie auf die Schaltfläche SDK zur App hinzufügen.
  2. Wählen Sie im angezeigten Dialogfeld ein Verzeichnis mit Code aus. für Ihre App. Data Connect Der SDK-Code wird dort generiert und gespeichert.

  3. Wählen Sie Ihre App-Plattform aus. Der SDK-Code wird dann sofort im ausgewählten Verzeichnis generiert.

Hier erfahren Sie, wie Sie mit dem generierten SDK Abfragen und Mutationen vom Client aufrufen (Web, Android, iOS, Flutter).

Schema und Abfrage für die Produktion bereitstellen

Sobald Ihre App lokal eingerichtet ist, können Sie Schemas, Daten und Abfragen in die Cloud übertragen. Sie benötigen einen Blaze-Tarif, um eine Cloud SQL-Instanz einzurichten.

  1. Rufen Sie in der Firebase-Konsole den Data Connect-Abschnitt auf und erstellen Sie eine kostenlose Cloud SQL-Testinstanz.

  2. Führen Sie im integrierten Terminal von VS Code firebase init dataconnect aus und wählen Sie die Region/Dienst-ID aus, die Sie gerade in der Console erstellt haben.

  3. Wählen Sie Y aus, wenn Sie dazu aufgefordert werden: File dataconnect/dataconnect.yaml already vorhanden, überschreiben?“.

  4. Klicken Sie in der Benutzeroberfläche von Data Connect VS Code Extension auf Deploy in Production (In Produktion bereitstellen). Schaltfläche.

  5. Rufen Sie nach der Bereitstellung die Firebase-Konsole auf. um zu prüfen, ob das Schema, die Vorgänge und die Daten in die Cloud hochgeladen wurden. Sie sollten das Schema sehen und Ihre Vorgänge auch in der Console ausführen können. Die Cloud SQL for PostgreSQL-Instanz wird mit dem endgültig bereitgestellten generierten Schema und den Daten aktualisiert.

Nächste Schritte

Überprüfen Sie Ihr bereitgestelltes Projekt und entdecken Sie weitere Tools:

  • In der Firebase Console können Sie Ihrer Datenbank Daten hinzufügen, Ihre Schemas prüfen und ändern sowie Ihren Data Connect-Dienst überwachen.

Weitere Informationen finden Sie in der Dokumentation. Da Sie beispielsweise die Kurzanleitung abgeschlossen: