Pierwsze kroki z Firebase Data Connect na komputerze

Z tego krótkiego wprowadzenia dowiesz się, jak lokalnie tworzyć Firebase Data Connect w aplikacji bez konfigurowania produkcyjnej instancji SQL. W ramach ćwiczenia:

  • Dodaj Firebase Data Connect do projektu Firebase.
  • Skonfiguruj środowisko programistyczne, w tym rozszerzenia Visual Studio Code, aby pracować z lokalną instancją.
  • Następnie pokażemy Ci, jak:
    • Użyj narzędzi rozszerzenia VS Code, w tym Gemini Code Assist, aby:
      • Tworzenie schematu aplikacji
      • Twórz administracyjne zapytania i mutacje, aby wypełnić lokalną bazę danych.
      • pomagać w implementowaniu zapytań i mutacji w aplikacji w postaci oprogramowania sprzęgającego, które można wdrożyć;
    • Testowanie zapytań i mutacji za pomocą przykładowych danych w lokalnym emulatorze
    • Generowanie pakietów SDK o silnym typowaniu i używanie ich w aplikacji
    • Wdróż ostateczny schemat i oprogramowanie sprzęgające w chmurze (opcjonalnie, po przejściu na abonament Blaze).

Wybierz lokalny proces programowania

Data Connect oferuje 2 sposoby instalowania narzędzi deweloperskich i pracy lokalnej.

Wymagania wstępne

Aby skorzystać z tego przewodnika, musisz mieć:

  • Masz projekt Firebase. Jeśli jeszcze nie masz konta, utwórz je w Firebasekonsoli.

Konfigurowanie środowiska programistycznego

  1. Utwórz nowy katalog dla projektu lokalnego.

  2. Aby skonfigurować środowisko deweloperskie Data Connect i IDE w przeglądarce, uruchom to polecenie w nowym utworzonym katalogu.

    curl -sL https://firebase.tools/dataconnect | 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 oraz definiować zapytania i mutacje do użycia w aplikacji.

Konfigurowanie katalogu projektu

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 Zaloguj się przez Google.
  2. Kliknij przycisk Połącz z projektem Firebase i wybierz projekt utworzony wcześniej w konsoli.
  3. Kliknij przycisk Uruchom firebase init.

  4. Kliknij przycisk Uruchom emulatory.

Tworzenie schematu

W katalogu projektu Firebase w pliku /dataconnect/schema/schema.gql zacznij definiować schemat GraphQL, na przykład dotyczący recenzji filmów.

Tworzenie schematu za pomocą Gemini Code Assist

Aby utworzyć schemat aplikacji do recenzowania filmów za pomocą Gemini Code Assist:

  1. Kliknij ikonę rozszerzenia Data Connect VS Code, aby otworzyć jego pasek boczny.
  2. Kliknij Twórz schematy i zapytania za pomocą AI. Otworzy się okno czatuGemini Code Assist.
  3. U dołu okna czatu sprawdź, czy tryb Agent jest włączony.
  4. Kliknij pole czatu u dołu okna czatu i zacznij wpisywać opis w języku naturalnym, jaki rodzaj aplikacji chcesz utworzyć.
  5. Naciśnij Enter, a Gemini wyświetli polecenie serwera MCP, które wykona, aby rozpocząć tworzenie schematu.
  6. Kliknij Akceptuję. Po chwili pojawi się rekomendowany schemat. Sprawdź schemat.

  7. Aby dodać kod do pliku schema.gql:

    1. Poczekaj, aż Gemini Code Assist poprosi Cię o plik do zaktualizowania.
    2. Kliknij Zaakceptuj, aby zmodyfikować plik, lub Wyświetl zmiany przed zatwierdzeniem.

Film

W Data Connect pola GraphQL są mapowane na kolumny. Film ma id, title, imageUrl i genre. Data Connect rozpoznaje podstawowe typy danych: String i UUID.

Skopiuj ten fragment kodu lub odkomentuj odpowiednie wiersze w pliku.

# 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

Może pojawić się definicja typu podobna do tej poniżej. Możesz też skopiować ten fragment kodu lub odkomentować odpowiednie wiersze w pliku domyślnym.

# 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

Dodawanie danych do tabel

W panelu edytora IDE zobaczysz przyciski CodeLens wyświetlane nad typami GraphQL w /dataconnect/schema/schema.gql. Za pomocą przycisków Dodaj dane i Uruchom (lokalnie) możesz dodawać dane do lokalnej bazy danych.

Aby dodać rekordy do tabel Movie i MovieMetadata:

  1. W schema.gql kliknij przycisk Dodaj dane nad deklaracją typu Movie.
    Przycisk CodeLens Add data (Dodaj dane) w przypadku Firebase Data Connect
  2. W wygenerowanym pliku Movie_insert.gql wpisz na stałe dane w 3 polach.
  3. Kliknij przycisk Uruchom (lokalnie).
    Przycisk uruchamiania CodeLens dla Firebase Data Connect
  4. Powtórz poprzednie kroki, aby dodać rekord do tabeli MovieMetadata, podając id filmu w polu movieId zgodnie z instrukcjami w wygenerowanej mutacji MovieMetadata_insert.

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

  1. Wróć do schema.gql i kliknij przycisk Read data (Odczytaj dane) nad deklaracją typu Movie.
  2. W wygenerowanym pliku Movie_read.gql kliknij przycisk Uruchom (lokalnie), aby wykonać zapytanie.

Więcej informacji o mutacjach Data Connect znajdziesz w dokumentacji

Definiowanie zapytania

Teraz przejdźmy do przyjemniejszej części: zdefiniuj zapytania, których będziesz potrzebować w aplikacji. Jako deweloper przyzwyczaiłeś(-aś) się do pisania zapytań SQL, a nie GraphQL, więc na początku może to być nieco inne.

GraphQL jest jednak znacznie bardziej zwięzły i bezpieczny pod względem typów niż zwykły SQL. Nasze rozszerzenie VS Code ułatwia tworzenie zapytań i mutacji.

Aby utworzyć zapytanie za pomocą Gemini Code Assist:

  1. Kliknij ikonę rozszerzenia Data Connect VS Code, aby otworzyć jego pasek boczny.
  2. Kliknij Twórz schematy i zapytania za pomocą AI. Otworzy się okno czatuGemini Code Assist.
  3. U dołu okna czatu sprawdź, czy tryb Agent jest włączony.
  4. Kliknij pole czatu u dołu okna czatu i zacznij wpisywać opis w języku naturalnym, który wyjaśnia, jakie działanie chcesz opracować.
  5. Naciśnij Enter, a Gemini wyświetli polecenie serwera MCP, które wykona, aby rozpocząć opracowywanie operacji.
  6. Kliknij Akceptuję. Po chwili pojawi się rekomendowane zapytanie. Sprawdź zapytanie.

  7. Aby dodać kod do pliku queries.gql:

    1. Poczekaj, aż Gemini Code Assist poprosi Cię o plik do zaktualizowania.
    2. Kliknij Zaakceptuj, aby zmodyfikować plik, lub Wyświetl zmiany przed zatwierdzeniem.

Wykonaj zapytanie za pomocą przycisku CodeLens w pobliżu.

Więcej informacji o zapytaniach Data Connect znajdziesz w dokumentacji

Generowanie pakietów SDK i używanie ich w aplikacji

W panelu po lewej stronie IDE kliknij ikonę Firebase, aby otworzyć interfejs rozszerzenia Data Connect VS Code:

  1. 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.

Używanie pakietów SDK do wywoływania zapytania z aplikacji

Możesz użyć wygenerowanego pakietu SDK do zaimplementowania wywołania zapytania ListMovies.Data Connect Następnie możesz wykonać to zapytanie lokalnie za pomocą Data Connectemulatora.

Sieć

  1. Dodaj Firebase do aplikacji internetowej.

  2. W głównym pliku aplikacji React:

    • zaimportować wygenerowany pakiet SDK,
    • skonfigurować aplikację, aby połączyć ją z emulatorem Data Connect.
    • wywoływać metody Data Connect,
    import React from 'react';
import ReactDOM from 'react-dom/client';

import { connectDataConnectEmulator } from 'firebase/data-connect';

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

const dataConnect = getDataConnect(connectorConfig);
connectDataConnectEmulator(dataConnect, 'localhost', 9399);

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:

    • zaimportować wygenerowany pakiet SDK,
    • skonfigurować aplikację, aby połączyć ją z emulatorem Data Connect.
    • 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

// 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)

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,
    • skonfigurować aplikację, aby połączyć ją z emulatorem Data Connect.
    • 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
  .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)
  }


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,
    • skonfigurować aplikację, aby połączyć ją z emulatorem Data Connect.
    • 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,
  );
  
  MoviesConnector.instance.dataConnect
      .useDataConnectEmulator(Uri.base.host, 443, isSecure: true);
  
  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();
            }),
      )
    ])));
  }
}

Wdrażanie schematu i zapytania w wersji produkcyjnej

Po skonfigurowaniu lokalnego środowiska w aplikacji możesz wdrożyć schemat i łącznik w chmurze. Aby skonfigurować instancję Cloud SQL, musisz mieć projekt z abonamentem Blaze.

  1. Otwórz sekcję Data Connect w konsoli Firebase i utwórz bezpłatną wersję próbną instancji Cloud SQL.

  2. W zintegrowanym z IDE terminalu uruchom firebase init dataconnect i wybierz Region/Service ID (Region/Identyfikator usługi) utworzony w konsoli.

  3. Gdy pojawi się pytanie „Plik dataconnect/dataconnect.yaml już istnieje. Zastąpić?”, wybierz „Y”.

  4. W oknie IDE w interfejsie rozszerzenia VS Code kliknij przycisk Wdróż w środowisku produkcyjnym.

  5. Po wdrożeniu otwórz Firebasekonsolę, aby sprawdzić, czy schemat, operacje i dane zostały przesłane do chmury. Powinieneś(-aś) móc wyświetlić schemat i wykonywać operacje w konsoli. Instancja Cloud SQL for PostgreSQL zostanie zaktualizowana o ostateczny wdrożony wygenerowany schemat i dane.

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ę Data Connect w Firebasekonsoli.

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