Pierwsze kroki z Firebase Data Connect

Z tego krótkiego wprowadzenia dowiesz się, jak utworzyć Firebase Data Connect w aplikacji za pomocą produkcyjnej instancji SQL.

W Firebase konsoli:

  • Dodaj Firebase Data Connect do projektu Firebase.
  • Utwórz schemat aplikacji za pomocą generowania schematu z pomocą AI w konsoli Firebase i wdroż go.
  • utworzyć instancję Cloud SQL dla aplikacji;
  • Dzięki Gemini w Firebase możesz wypełnić bazę danych przykładowymi danymi.
  • Twórz zapytania i mutacje z pomocą AI, które możesz wdrażać i wykorzystywać do lokalnego tworzenia kodu klienta.

Następnie w lokalnym środowisku programistycznym wykonaj te czynności:

  • Skonfiguruj narzędzia deweloperskie, w tym rozszerzenie Visual Studio Code, aby pracować z instancją produkcyjną.
  • Zsynchronizuj środowisko lokalne z zasobami utworzonymi w konsoli.
  • Generuj pakiety SDK o silnym typowaniu i używaj ich w aplikacji.

Proces w konsoli: użyj pomocy AI, aby zaprojektować schemat, a potem wdrożyć go w bazie danych

  1. Jeśli nie masz jeszcze projektu Firebase, utwórz go.
    1. W Firebasekonsoli kliknij Dodaj projekt i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
  2. Przejdź do sekcji Data Connect w konsoli Firebase.
  3. Kliknij przycisk Pierwsze kroki z Gemini.
  4. W wyświetlonym panelu przepływu pracy Generator schematów opisz aplikację, aby usługa Gemini mogła Ci pomóc w utworzeniu schematu GraphQL.
  5. Sprawdź schemat GraphQL, a następnie kliknij Uaktualnij i wdroż.

  6. Przenieś projekt na abonament Blaze. Umożliwia to utworzenie instancji Cloud SQL for PostgreSQL.

  7. Wybierz Utwórz nową instancję Cloud SQL. W wyświetlonym oknie wybierz lokalizację i nazwę bazy danych Cloud SQL for PostgreSQL.

    Wdrażany jest schemat aplikacji wraz z bazą danych PostgreSQL odpowiadającą temu schematowi.

Proces w konsoli: korzystanie z pomocy AI przy tworzeniu operacji dla klientów

Po wdrożeniu schematu możesz podjąć pierwsze kroki, aby udostępnić te dane w aplikacjach klienckich. W tym celu utwórz łącznik zapytań i mutacji, który wdrożysz na backendzie, a później wywołasz z klientów.

Nasze narzędzia wspomagane przez AI są po to, aby Ci pomóc.

  1. Gdy pojawi się odpowiedni komunikat, kliknij przycisk Generate operations with Gemini (Generuj operacje za pomocą Gemini).

  2. Po chwili w wyświetlonym panelu przepływu pracy Wygeneruj operacje przejrzyj listę zapytań i mutacji podaną przez Gemini na podstawie Twojego schematu.

  3. Kliknij każdy wiersz operacji, aby sprawdzić kod GraphQL, który ją definiuje. W razie potrzeby usuń niepotrzebne operacje za pomocą ikony kosza.

  4. Aby dodać operacje, kliknij przycisk + Dodaj. Następnie:

    1. Opisz operację w języku naturalnym.

      Przykład:

      List all products

    2. Sprawdź wygenerowany kod GraphQL.

    3. Jeśli operacja jest akceptowalna, kliknij Wstaw, aby dodać ją do listy operacji.

  5. Kontynuuj usuwanie i dodawanie operacji, aż zestaw operacji będzie odpowiedni.

  6. Aby wdrożyć tę listę operacji jako zestaw oprogramowania sprzęgającego, które można wywoływać po stronie klienta, wybierz nazwę oprogramowania sprzęgającego, a następnie kliknij Wdróż.

Proces w konsoli: użyj Gemini w Firebase, aby utworzyć mutację i wypełnić bazę danych

W poprzednich krokach utworzyliśmy Data Connect schemat składający się z odpowiednich typów elementów i wdrożyliśmy go w środowisku produkcyjnym. Oznacza to, że utworzyliśmy i wdrożyliśmy też bazę danych PostgreSQL z odpowiednimi tabelami.

Aby wypełnić bazę danych, możesz użyć Gemini w Firebase, aby przekształcić dane wejściowe w języku naturalnym w mutację GraphQL, która zaktualizuje jedną z tabel, oraz w zapytanie, które potwierdzi zmiany.

  1. Otwórz kartę Dane.

  2. Kliknij ikonę Pomóż mi napisać GraphQL pen_spark i w wyświetlonym polu wpisz dane wejściowe.

    Przykład:

    Add data for three sample products to my app.

  3. Kliknij Wygeneruj. Zwracana jest mutacja.

  4. Sprawdź dane wyjściowe. W razie potrzeby kliknij Edytuj, aby doprecyzować prompt, a następnie kliknij Wygeneruj ponownie.

  5. Następnie kliknij Wstaw, aby wstawić zmianę w edytorze danych.

  6. Kliknij Wykonaj.

Gdy uruchomisz mutację, dane zostaną zapisane w odpowiedniej tabeli w bazie danych PostgreSQL. W konsoli możesz utworzyć zapytanie, aby wyświetlić przechowywane dane:

  1. Powtórz poprzednie kroki, używając Pomóż mi napisać GraphQL pen_spark, aby utworzyć zapytanie.

  2. W wyświetlonym polu wpisz dane.

    Przykład:

    Query data for all sample products in my app.

  3. Kliknij Wygeneruj, a potem Uruchom.

Przepływ lokalny: wybierz narzędzia programistyczne

Teraz, gdy masz już dane w wdrożonej bazie danych i wdrożony łącznik, możesz kontynuować tworzenie schematu i łączników w lokalnym środowisku programistycznym.

Najpierw musisz skonfigurować środowisko lokalne. Data Connect oferuje 2 sposoby instalowania narzędzi deweloperskich.

Przepływ lokalny: konfigurowanie środowiska programistycznego

  1. Utwórz nowy katalog dla projektu lokalnego.

  2. Aby skonfigurować Data Connect środowisko deweloperskie i IDE w przeglądarce oraz wygenerować pakiety SDK klienta, uruchom to polecenie w nowo utworzonym katalogu.

      curl -sL https://firebase.tools/init/dataconnect | editor=true bash

    Skrypt próbuje zainstalować pakiet. Zainstalowane IDE udostępnia narzędzia, w tym wstępnie dołączone rozszerzenia VS Code, które pomagają zarządzać schematem, definiować zapytania i mutacje do użycia w aplikacji oraz generować pakiety SDK o silnym typowaniu.

    Skrypt synchronizuje też komponenty utworzone w konsoli Firebase z lokalnym katalogiem i generuje pakiety SDK klienta dla wszystkich aplikacji zarejestrowanych w projekcie.

Przepływ lokalny: konfigurowanie projektu lokalnego

Aby skonfigurować projekt lokalny, zainicjuj katalog projektu. W oknie IDE w panelu po lewej stronie kliknij ikonę Firebase, aby otworzyć interfejs rozszerzenia Data Connect VS Code:

  1. Kliknij przycisk Uruchom emulatory.

Przepływ lokalny: znajdź schemat i łącznik w środowisku lokalnym

Opcja automatycznej instalacji w systemie macOS lub Linux, której używasz do synchronizowania komponentów z istniejącym projektem, ma następujące skutki:
  • Synchronizuje wdrożony schemat.
    • Znajdź schemat: znajduje się on w katalogu projektu Firebase w pliku /dataconnect/schema/schema.gql.
  • Synchronizuje zapytania i mutacje w łączniku, który został wdrożony.
    • Znajdź łącznik: operacje znajdują się w katalogu projektu Firebase, w katalogu /dataconnect/connector/.

Przepływ lokalny: zrozumienie schematu

Przykład schematu: film

W Data Connect pola GraphQL są mapowane na kolumny. Typ Movie prawdopodobnie będzie miał id, title, imageUrl i genre. Data Connect rozpoznaje podstawowe typy danych String i UUID.

# File `/dataconnect/schema/schema.gql`

# By default, a UUID id key will be created by default as primary key.
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

Przykład schematu 1:1: MovieMetadata

W przypadku filmów możesz modelować metadane.

Na przykład w schema.gql możesz dodać ten fragment kodu lub kod opinii wygenerowany przez Gemini.

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

Zwróć uwagę, że pole movie jest zmapowane na typ Movie. Data Connect rozumie, że jest to relacja między Movie a MovieMetadata, i będzie zarządzać tą relacją w Twoim imieniu.

Więcej informacji o schematach Data Connect znajdziesz w dokumentacji

Przepływ lokalny: dodawanie większej ilości danych do tabel

W panelu edytora IDE zobaczysz przyciski CodeLens wyświetlane nad typami GraphQL w /dataconnect/schema/schema.gql. Podobnie jak w konsoli możesz utworzyć mutację, aby dodać dane do produkcyjnej bazy danych.

Aby dodać dane do tabeli, pracując lokalnie:

  1. W sekcji schema.gql kliknij przycisk Dodaj dane nad deklaracją jednego z typów (np. Movie, Product, Account, w zależności od charakteru aplikacji).
    Przycisk Dodaj dane w Code Lens w przypadku Firebase Data Connect
  2. Do katalogu roboczego dodawany jest nowy plik, <type>_insert.qgl, np. Movie_insert.gql lub Product_insert.gql. Wpisz na stałe dane w polach tego typu.
  3. Kliknij przycisk Uruchom (wersja produkcyjna).
    Przycisk uruchamiania Code Lens w przypadku Firebase Data Connect
  4. Powtórz poprzednie kroki, aby dodać rekord do innych tabel.

Aby szybko sprawdzić, czy dane zostały dodane:

  1. Wróć do schema.gql i kliknij przycisk Read data (Odczytaj dane) nad deklaracją typu.
  2. W pliku <type>_read.gql, np. Product_read.gql, kliknij przycisk Uruchom (produkcyjnie), aby wykonać zapytanie.

Więcej informacji o mutacjach Data Connect znajdziesz w dokumentacji

Proces lokalny: generowanie pakietów SDK

Schemat i operacje łącznika są synchronizowane lokalnie.

Możesz teraz używać rozszerzenia VS Code do generowania pakietów SDK klienta, aby zacząć wdrażać wywołania zapytań i mutacji w aplikacjach na iOS, Androida, w internecie i Flutterze.

  1. W interfejsie rozszerzenia kliknij przycisk Dodaj pakiet SDK do aplikacji.

  2. W wyświetlonym oknie wybierz katalog zawierający kod aplikacji. Data ConnectKod pakietu SDK zostanie wygenerowany i zapisany w tym katalogu.

  3. Wybierz platformę aplikacji, a następnie zwróć uwagę, że kod pakietu SDK jest od razu generowany w wybranym katalogu.

Przepływ lokalny: użyj pakietów SDK, aby wywołać zapytanie z aplikacji

Wcześniej wdrożono schemat i operacje w konsoli Firebase. Aby wywoływać operacje z aplikacji, możesz użyć pakietu SDK, który został wygenerowany w celu zaimplementowania wywołania zapytania ListMovies.Data Connect

Sieć

  1. Dodaj Firebase do aplikacji internetowej.

  2. W głównym pliku aplikacji React:

    • zaimportować wygenerowany pakiet SDK,
    • wywoływać metody Data Connect,
    import React from 'react';
import ReactDOM from 'react-dom/client';

// Generated queries.
// Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@movie-app/movies';

function App() {
  const [movies, setMovies] = useState<ListMoviesData['movies']>([]);
  useEffect(() => {
    listMovies.then(res => setMovies(res.data));
  }, []);
  return (
    movies.map(movie => <h1>{movie.title}</h1>);
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Swift

  1. Dodaj Firebase do aplikacji na iOS.

  2. Aby użyć wygenerowanego pakietu SDK, skonfiguruj go jako zależność w Xcode.

    Na górnym pasku nawigacyjnym Xcode wybierz File > Add Package Dependencies > Add Local (Plik > Dodaj zależności pakietu > Dodaj lokalnie) i wybierz folder zawierający wygenerowany plik Package.swift.

  3. W głównym delegacie aplikacji:

    • zaimportować wygenerowany pakiet SDK,
    • wywoływać metody Data Connect,
    import SwiftUI

import FirebaseDataConnect
// Generated queries.
// Update as needed with the package name of your generated SDK.
import <CONNECTOR-PACKAGE-NAME>

let connector = DataConnect.moviesConnector

struct ListMovieView: View {
@StateObject private var queryRef = connector.listMovies.ref()

    var body: some View {
        VStack {
            Button {
                Task {
                    do {
                        try await refresh()
                    } catch {
                        print("Failed to refresh: \(error)")
                    }
                }
            } label: {
                Text("Refresh")
            }

            // use the query results in a view
            ForEach(queryRef.data?.movies ?? []) { movie in
                    Text(movie.title)
                }
            }
    }
    @MainActor
    func refresh() async throws {
        _ = try await queryRef.execute()
    }

    struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListMovieView()
    }
}

Kotlin Android

  1. Dodaj Firebase do aplikacji na Androida.

  2. Aby użyć wygenerowanego pakietu SDK, skonfiguruj Data Connect jako zależność w Gradle.

    Zaktualizuj plugins i dependencies w app/build.gradle.kts.

    plugins {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest as of March 14, 2025.
  // Note, however, that the version of kotlin("plugin.serialization") must,
  // in general, match the version of kotlin("android").
  id("com.android.application") version "8.9.0"
  id("com.google.gms.google-services") version "4.4.2"
  val kotlinVersion = "2.1.10"
  kotlin("android") version kotlinVersion
  kotlin("plugin.serialization") version kotlinVersion
}

dependencies {
  // Use whichever versions of these dependencies suit your application.
  // The versions shown here were the latest versions as of March 14, 2025.
  implementation("com.google.firebase:firebase-dataconnect:16.0.0-beta04")
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.10.1")
  implementation("org.jetbrains.kotlinx:kotlinx-serialization-core:1.7.3")

  // These dependencies are not strictly required, but will very likely be used
  // when writing modern Android applications.
  implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:1.9.0")
  implementation("androidx.appcompat:appcompat:1.7.0")
  implementation("androidx.activity:activity-ktx:1.10.1")
  implementation("androidx.lifecycle:lifecycle-viewmodel-ktx:2.8.7")
  implementation("com.google.android.material:material:1.12.0")
}

  3. W głównym działaniu w aplikacji:

    • zaimportować wygenerowany pakiet SDK,
    • wywoływać metody Data Connect,
    import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.Lifecycle
import androidx.lifecycle.lifecycleScope
import androidx.lifecycle.repeatOnLifecycle
import kotlinx.coroutines.launch


private val connector = com.myapplication.MoviesConnector.instance

class MainActivity : AppCompatActivity() {

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    val textView: TextView = findViewById(R.id.text_view)

    lifecycleScope.launch {
      lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
        
        val result = connector.listMovies.runCatching { execute { } }
        
        val newTextViewText = result.fold(
          onSuccess = {
            val titles = it.data.movies.map { it.title }
            "${titles.size} movies: " + titles.joinToString(", ")
          },
          onFailure = { "ERROR: ${it.message}" }
        )
        textView.text = newTextViewText
      }
    }
  }
}

Flutter

  1. Dodaj Firebase do aplikacji Flutter.
  2. Zainstaluj interfejs wiersza poleceń flutterfiredart pub global activate flutterfire_cli.
  3. Uruchom flutterfire configure.
  4. W głównej funkcji aplikacji:
    • zaimportować wygenerowany pakiet SDK,
    • wywoływać metody Data Connect,
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';

// Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      ConstrainedBox(
        constraints: const BoxConstraints(maxHeight: 200),
        child: FutureBuilder(
            future: MoviesConnector.instance.listMovies().execute(),
            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,
                );
              }
              return const CircularProgressIndicator();
            }),
      )
    ])));
  }
}

Dalsze kroki

Sprawdź wdrożony projekt i odkryj więcej narzędzi:

  • Dodawaj dane do bazy danych, sprawdzaj i modyfikuj schematy oraz monitoruj usługę w Firebasekonsoli.Data Connect

Więcej informacji znajdziesz w dokumentacji. Na przykład po ukończeniu krótkiego wprowadzenia: