Pierwsze kroki z Firebase Data Connect

Z tego krótkiego wprowadzenia dowiesz się, jak utworzyć Firebase Data Connect w swojej aplikacji przy użyciu produkcyjnej instancji SQL.

W konsoli Firebase:

  • Dodaj Firebase Data Connect do projektu Firebase.
  • Utwórz schemat aplikacji w konsoli Firebase za pomocą narzędzia Schema Assist i wdróż go.
  • Zarezerwuj wystąpienie Cloud SQL na potrzeby aplikacji.
  • Za pomocą Gemini Code Assist wypełnij bazę danych przykładowymi danymi.

Następnie w lokalnym środowisku programistycznym:

  • Skonfiguruj narzędzia programistyczne, w tym rozszerzenie Visual Studio Code, aby działały z Twoim środowiskiem produkcyjnym.
  • Zsynchronizuj środowisko lokalne z zasobami utworzonymi w konsoli.
  • Użyj narzędzia do rozszerzeń, aby zaimplementować zapytanie, które będzie używane w aplikacji.
  • Wygeneruj pakiety SDK z typami ścisłymi i użyj ich w swojej aplikacji.
  • Wdróż ostateczny schemat, zapytanie i dane w chmurze.

Procedura w konsoli: zaprojektuj schemat i wdróż go w bazie danych

  1. Jeśli nie masz jeszcze projektu Firebase, utwórz go.
    1. W konsoli Firebase kliknij Dodaj projekt i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie.
  2. Otwórz sekcję Data Connect w konsoli Firebase.
  3. Kliknij przycisk Rozpocznij pracę z Gemini.
  4. W wyświetlonym panelu Generatora schematów opisz aplikację, aby Gemini mógł Ci pomóc w tworzeniu schematu GraphQL.
  5. Sprawdź schemat GraphQL, a potem kliknij Uaktualnij i wdróż.

  6. Przejdź w projekcie na abonament Blaze. Dzięki temu możesz utworzyć instancję 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.

    Schemat aplikacji jest wdrażany wraz z bazą danych PostgreSQL odpowiadającą temu schematowi.

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

W poprzednim kroku utworzyliśmy Data Connect schemat, który składa się z odpowiednich typów jednostek, i wdrażaliśmy go w produkcji. Oznacza to, że utworzyliśmy i wdrażaliśmy także bazę danych PostgreSQL z odpowiednimi tabelami.

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

  1. Otwórz kartę Dane.

  2. Kliknij ikonę pen_sparkPomóż mi napisać GraphQL, a następnie 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 dostosować prompt, a potem kliknij Wygeneruj ponownie.

  5. Następnie kliknij Wstaw, aby wstawić mutację do edytora 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ć zapisane dane:

  1. Powtórz poprzednie kroki, aby utworzyć zapytanie za pomocą prompta Pomóż mi napisać zapytanie GraphQL pen_spark.

  2. W wyświetlonym polu wpisz tekst.

    Przykład:

    Query data for all sample products in my app.

  3. Kliknij kolejno Wygeneruj i Uruchom.

Lokalny proces: wybór narzędzi programistycznych

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

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

Sekwencja lokalna: konfigurowanie środowiska programistycznego

  1. Utwórz nowy katalog dla lokalnego projektu.

  2. W nowym katalogu uruchom to polecenie.

      curl -sL https://firebase.tools/dataconnect | bash

    Ten skrypt próbuje skonfigurować środowisko programistyczne i uruchomić środowisko IDE w przeglądarce. To środowisko IDE udostępnia narzędzia, w tym wstępnie skompilowane rozszerzenie VS Code, które ułatwia zarządzanie schematem i definiowanie zapytań oraz mutacji do wykorzystania w aplikacji, a także generowanie silnie typowanych pakietów SDK.

alias dataconnect='curl -sL https://firebase.tools/dataconnect | bash'

Proces lokalny: konfigurowanie katalogu projektu

Aby skonfigurować projekt lokalny, zainicjuj katalog projektu. W oknie IDE w panelu po lewej stronie kliknij ikonę Firebase, aby otworzyć interfejs Data Connect w rozszerzeniu 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 inicjalizację Firebase i dokończ proces.

  4. Kliknij przycisk Uruchom emulatory.

Lokalny proces: znajdowanie schematu w środowisku lokalnym

Krok firebase init w poprzedniej sekcji zsynchronizował wdrożony schemat z konsoli z lokalnym środowiskiem programistycznym.

Znajdź schemat: znajduje się on w katalogu projektu Firebase, w pliku /dataconnect/schema/schema.gql.

Przepływ lokalny: praca ze schematem

Przykład schematu: film

W Data Connect pola GraphQL są mapowane na kolumny. Typ Movie może mieć wartości id, title, imageUrl i genre. Data Connect rozpoznaje proste 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 tabeli 1:1: MovieMetadata

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

Na przykład w miejscu schema.gql możesz dodać ten fragment kodu lub kod sprawdzający 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 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 schema.gql kliknij przycisk Dodaj dane nad deklaracją jednego z Twoich 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, np. Movie_insert.gql lub Product_insert.gql, jest dodawany nowy plik <type>_insert.qgl. zakodować dane w polach tego typu;
  3. Kliknij przycisk Uruchom (wersja produkcyjna).
    Przycisk Uruchom Code Lens w Firebase Data Connect
  4. Powtórz poprzednie kroki, aby dodać rekord do innych tabel.

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

  1. W pliku schema.gql nad deklaracją typu kliknij przycisk Odczytaj dane.
  2. W utworzonym pliku <type>_read.gql, np. Product_read.gql, kliknij przycisk Uruchom (wersja produkcyjna), aby wykonać zapytanie.

Więcej informacji o mutacjach w Data Connect znajdziesz w dokumentacji

Lokalny proces: definiowanie zapytania

Teraz czas na zabawę – zapytania. Jako programista jesteś przyzwyczajony do pisania zapytań SQL, a nie zapytań GraphQL, więc na początku może to być nieco dziwne. Jednak GraphQL jest znacznie bardziej zwięzły i bezpieczny pod względem typów niż zwykły SQL. Nasz dodatek do VS Code ułatwia programowanie.

Aby zaimplementować zapytanie, możesz dostosować zapytanie wygenerowane za pomocą CodeLens:

  1. W /dataconnect/schema/schema.gql nad typem (Movie, Product, Account itp.) kliknij przycisk CodeLens Czytaj dane.
  2. W utworzonym pliku <type>_read.gql przetestuj zapytanie, klikając przycisk Uruchom (wersja produkcyjna).
  3. Skopiuj działające zapytanie do /dataconnect/connector/queries.gql.

  4. Aby to zapytanie można było wdrożyć, nadaj mu unikalną nazwę.

    Na przykład w tym ogólnym przykładzie query_name może być ListMovies, ListProducts lub ListAccounts.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
query <query_name> @auth(level: PUBLIC) {
   <table_name> {
     <field_1>
     <field_2>
     <field_3>
  }
}

Wykonaj zapytanie za pomocą przycisku CodeLens.

.

Więcej informacji o zapytaniach Data Connect znajdziesz w dokumentacji

Lokalny proces: generowanie pakietów SDK

  1. Kliknij przycisk Dodaj pakiet SDK do aplikacji.

  2. W wyświetlonym oknie wybierz katalog zawierający kod aplikacji. Data Connect Kod pakietu SDK zostanie wygenerowany i tam zapisany.

  3. Wybierz platformę aplikacji, a potem zwróć uwagę, że kod SDK zostanie natychmiast wygenerowany w wybranym katalogu.

Lokalny proces: wdrożenie schematu i zapytania do wersji produkcyjnej

Przeszedłeś przez iterację procesu tworzenia. Teraz możesz wdrożyć schemat i zapytania na serwerze za pomocą interfejsu użytkownika rozszerzenia Firebase lub wiersza poleceń Firebase, tak jak w przypadku schematu.

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

Po wdrożeniu przejdź do konsoli Firebase, aby sprawdzić, czy aktualizacje schematu (jeśli są dostępne) i operacje zostały przesłane do chmury. Schemat powinien być widoczny, a operacje można wykonywać w konsoli. Instancja Cloud SQL for PostgreSQL zostanie zaktualizowana za pomocą ostatecznego wdrożenia wygenerowanego schematu i danych.

Więcej informacji o używaniu emulatora Data Connect znajdziesz w dokumentacji

Lokalny proces: wywoływanie zapytania z aplikacji za pomocą pakietów SDK

Teraz, gdy zaktualizowany schemat (jeśli dotyczy) i zapytanie zostały wdrożone w wersji produkcyjnej, możesz użyć pakietu SDK wygenerowanego przez Data Connect, aby zaimplementować wywołanie zapytania ListMovies.

Sieć

  1. Dodaj Firebase do aplikacji internetowej.

  2. W pliku głównym aplikacji React:

    • zaimportować wygenerowany pakiet SDK;
    • wywołać 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żywać wygenerowanego pakietu SDK, skonfiguruj go jako zależność w Xcode.

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

  3. W głównym delegacie aplikacji:

    • zaimportować wygenerowany pakiet SDK;
    • wywołać 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 na Androidzie

  1. Dodaj Firebase do aplikacji na Androida.

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

    Zaktualizuj wartości 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 aplikacji:

    • zaimportować wygenerowany pakiet SDK;
    • wywołać 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ń flutterfire dart pub global activate flutterfire_cli.
  3. Uruchom flutterfire configure.
  4. W głównej funkcji aplikacji:
    • zaimportować wygenerowany pakiet SDK;
    • wywołać 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ę Data Connect w konsoli Firebase.

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