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 następnie 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 wdróż.

  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 Wygeneruj operacje za pomocą Gemini.

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

  3. Kliknij każdy wiersz operacji, aby sprawdzić kod GraphQL, który ją definiuje. W razie potrzeby użyj ikony kosza, aby usunąć operacje, których nie potrzebujesz.

  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że być wywoływane przez klienta, wybierz nazwę oprogramowania sprzęgającego, a następnie kliknij Wdróż.

Proces w konsoli: używanie Gemini w Firebase do tworzenia mutacji i wypełniania bazy 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 dodać dane z mutacjami, które aktualizują co najmniej jedną z Twoich tabel.

  1. Otwórz kartę Dane.

  2. Kliknij ikonę Pomóż mi pisać w GraphQL pen_spark i kliknij kartę Dane początkowe.

  3. Kliknij Wygeneruj. Zwracane są mutacje, które wypełniają Twoje dane.

  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 uruchamiasz mutacje, dane są zapisywane w odpowiednich tabelach 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: konfigurowanie projektu lokalnego

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.

  1. W katalogu projektu uruchom to polecenie.

    Skrypt instaluje wiersz poleceń Firebase i rozszerzenie Data Connect VS Code oraz przeprowadza Cię przez firebase init dataconnect, aby skonfigurować projekt. Jeśli nie masz zainstalowanej aplikacji VS Code na komputerze, skrypt otworzy ją w przeglądarce.

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

  2. Otwórz ekran rozszerzenia Data Connect VS Code, klikając ikonę Firebase w panelu po lewej stronie Visual Studio Code.

  3. Aby uruchomić emulator z lokalną bazą danych PGlite, kliknij Start emulators (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ładowy schemat: film

W Data Connect pola GraphQL są mapowane na kolumny. Typ Movie prawdopodobnie będzie zawierać 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 filmów.

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 mapowane na typ Movie. Data Connect rozumie, że jest to relacja między Movie a MovieMetadata, i będzie zarządzać nią 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 dla 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ąć implementować 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:

    • Zaimportuj wygenerowany pakiet SDK:
    // Update as needed with the path to your generated SDK.
import { listMovies, ListMoviesData } from '@dataconnect/generated';
    • Wywołuj metody Data Connect.
    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 pakiet Package.swift.

  3. W głównym delegacie aplikacji:

    • Zaimportuj Data Connectpakiet SDK i wygenerowany pakiet SDK:

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

let connector = DataConnect.moviesConnector

    • Wywołaj metody Data Connect:

      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:

    • Pobierz instancję oprogramowania sprzęgającego z wygenerowanego pakietu SDK:
    private val connector = com.myapplication.MoviesConnector.instance
    • Wywołuj metody Data Connect.
    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:

    • Zaimportuj wygenerowany pakiet SDK:
    // Generated queries.
// Update as needed with the path to your generated SDK

import 'movies_connector/movies.dart';
    • Wywołuj metody Data Connect.
    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: