Pierwsze kroki z Firebase Data Connect

Z tego krótkiego wprowadzenia dowiesz się, jak zacząć korzystać z usługi Firebase Data Connect, aby połączyć aplikacje internetowe i mobilne z bazą danych PostgreSQL. W ramach ćwiczenia:

  • Skonfiguruj lokalny katalog projektu Firebase Data Connect za pomocą VS Code i wiersza poleceń Firebase.
  • Generuj schematy, zapytania i mutacje Data Connect na podstawie pomysłów na aplikacje w języku naturalnym.
  • Używaj w aplikacjach pakietów SDK z silnym typowaniem, aby uruchamiać Data Connectzapytania i mutacje.
  • Aprowizuj instancję Cloud SQL for PostgreSQL, schemat Data Connect, zapytania i mutacje (wymaga planu Blaze).

Konfigurowanie lokalnego katalogu projektu

Narzędzia do programowania lokalnego dla Data Connect możesz zainstalować na 2 sposoby.

  1. Zainstaluj te wymagania wstępne:

  2. Utwórz katalog projektu i otwórz go w Visual Studio Code.

  3. Zainstaluj rozszerzenie Firebase Data Connect ze sklepu VS Code Marketplace.

  4. Kliknij przycisk Zaloguj się przez Google.

  5. Kliknij przycisk Połącz projekt Firebase.

  6. Kliknij przycisk Uruchom firebase init.

  7. Kliknij przycisk Start emulators (Uruchom emulatory), aby uruchomić emulator Data Connect z lokalną bazą danych PGlite.

Sprawdzanie schematu

Firebase Data Connect używa GraphQL do definiowania modelu danych. Dyrektywa @table mapuje typ GraphQL na tabelę PostgreSQL. Pola w mapie typów są mapowane na kolumny PostgreSQL. Relacje między tabelami możesz definiować za pomocą pól, które odwołują się do innych typów @table, w tym relacji wiele-do-wielu za pomocą tabel złączeń z złożonymi kluczami podstawowymi.

W konfiguracji domyślnej pliki schematu Data Connect znajdziesz w katalogu dataconnect/schema/. Oto 2 przykładowe tabele ze schematu szablonu filmu. Jeśli do wygenerowania schematu używasz Gemini, może on wyglądać inaczej.

type Movie @table {
  # Every table has an implicit primary key field that looks something like:
  #  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

type Review @table(key: ["movie", "user"]) {
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Więcej informacji o schematach Data Connect

Tworzenie zapytań i mutacji

Firebase Data Connect używa GraphQL do zapytań i mutacji. Definiujesz je w .gql plikach i wywołujesz je w aplikacji po nazwie. Składnia GraphQL zapewnia pakiety SDK o silnym typowaniu i elastyczny interfejs API do pobierania dokładnych danych potrzebnych aplikacji.

Wypełnianie bazy danych danymi początkowymi

Po uruchomieniu emulatora możesz wypełnić go danymi początkowymi. Możesz użyć podanego pliku dataconnect/seed_data.gql lub napisać własne mutacje.

Użyj przycisku Uruchom (lokalnie) w VS Code, aby wykonać mutacje i wypełnić lokalną bazę danych PGlite.

Przycisk uruchamiania CodeLens dla Firebase Data Connect

Sprawdzanie zapytań i mutacji

W konfiguracji domyślnej zapytania i mutacje Data Connect znajdziesz w katalogu dataconnect/example/.

Za pomocą zagnieżdżonych zapytań możesz precyzyjnie wysyłać zapytania o dane relacyjne.

query ListMovies @auth(level: PUBLIC, insecureReason: "Anyone can list all movies and their reviews.") {
  movies {
    title imageUrl genre
    reviews_on_movie {
      rating reviewDate
      user { username }
    }
  }
}

Data Connect pomaga tworzyć bezpieczne zapytania i mutacje za pomocą usługi Firebase Authentication.

Aby zapewnić bezpieczeństwo aplikacji, aplikacje internetowe i mobilne mogą uzyskiwać dostęp tylko do zapytań i mutacji z dyrektywami Data Connect@auth. Zapytania i mutacje mogą bezpiecznie uzyskiwać dostęp do identyfikatora UID uwierzytelniania Firebase za pomocą wyrażenia takiego jak {field}_expr: "auth.uid".

mutation AddReview($movieId: UUID!, $rating: Int!, $reviewText: String!) @auth(level: USER) {
  review_upsert(
    data: {
      userId_expr: "auth.uid"
      movieId: $movieId
      rating: $rating
      reviewText: $reviewText
    }
  )
}

Więcej informacji o zapytaniach Data Connect Więcej informacji o mutacjach Data Connect Więcej informacji o uwierzytelnianiu Data Connect

Generowanie zapytań i mutacji

Aby efektywnie korzystać z Data Connect, nie musisz być ekspertem w zakresie GraphQL. Możesz generować zapytania i mutacje Data Connect na podstawie opisów w języku naturalnym.

W dowolnym pliku .gql wpisz #, aby rozpocząć komentarz i opisać zapytanie lub mutację. Następnie kliknij przycisk Generate/Refine Operation (Generuj/doprecyzuj operację) w Code Lens, aby wygenerować operację GraphQL.

Przycisk generowania CodeLens dla Firebase Data Connect

Używanie wygenerowanego pakietu SDK w aplikacji

firebase init dataconnect automatycznie konfiguruje pakiety SDK bezpieczne pod względem typów dla aplikacji w Twoim projekcie. W razie potrzeby możesz dodać pakiet SDK ręcznie, klikając przycisk Dodaj pakiet SDK do aplikacji w rozszerzeniu VS Code lub uruchamiając polecenie firebase init dataconnect:sdk.

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';
    • Skonfiguruj aplikację, aby połączyć ją z Data Connectemulatorem:
    import { connectDataConnectEmulator } from 'firebase/data-connect';

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);
    • 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

    • Skonfiguruj aplikację, aby połączyć ją z Data Connectemulatorem:

      // Connect to the emulator on "127.0.0.1:9399"
connector.useEmulator()

// (alternatively) if you're running your emulator on non-default port:
// connector.useEmulator(port: 9999)

    • 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
    • Skonfiguruj aplikację, aby połączyć ją z Data Connectemulatorem:
    private val connector = com.myapplication.MoviesConnector.instance
  .apply {
    // Connect to the emulator on "10.0.2.2:9399" (default port)
    dataConnect.useEmulator()

    // (alternatively) if you're running your emulator on non-default port:
    // dataConnect.useEmulator(port = 9999)
  }
    • 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ń flutterfire dart 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';
    • Skonfiguruj aplikację, aby połączyć ją z Data Connectemulatorem:
    void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  runApp(const MyApp());
}
    • 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();
            }),
      )
    ])));
  }
}

Wdrażanie w środowisku produkcyjnym

Aby wdrożyć w wersji produkcyjnej schemat, zapytania i mutacje:

  1. Przenieś projekt Firebase na abonament Blaze.

  2. W rozszerzeniu Data Connect VS Code kliknij przycisk Wdróż w wersji produkcyjnej lub uruchom w terminalu:

    firebase deploy --only dataconnect

    Po wdrożeniu otwórz Firebasekonsolę, aby wyświetlić schemat i uruchamiać zapytania oraz mutacje.

Więcej informacji o pliku dataconnect.yaml Dowiedz się więcej o tym, jak Data Connect działa z Cloud SQL

Dalsze kroki

Po ukończeniu tego samouczka możesz wykonać te czynności: