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 za pomocą AI w konsoli Firebase i wdróż go.
  • Zarezerwuj wystąpienie Cloud SQL na potrzeby aplikacji.
  • W usłudze Gemini w Firebase wypełnij bazę danych przykładowymi danymi.
  • tworzyć zapytania i mutacje przy użyciu generowania operacji wspomaganej przez AI, które możesz wdrażać i stosować do lokalnego tworzenia kodu klienta.

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.
  • Wygeneruj typowane SDK i użyj ich w swojej aplikacji.

Proces w konsoli: użyj AI do zaprojektowania schematu, a potem wprowadź go do bazy 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. Przejdź do sekcji Data Connect w konsoli Firebase.
  3. Kliknij przycisk Rozpocznij korzystanie 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: tworzenie operacji dla klientów przy pomocy AI

Po wdrożeniu schematu możesz wykonać pierwsze czynności, aby udostępnić te dane aplikacjom klienta. W tym celu utwórz połącze zapytań i mutacji, które zostaną wdrożone na serwer, a potem wywoływane przez 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 Generowanie operacji sprawdź listę zapytań i mutacji udostępnionych przez Gemini na podstawie Twojego schematu.

  3. Kliknij każdy wiersz operacji, aby sprawdzić kod GraphQL definiujący tę operację. W razie potrzeby użyj kosza, aby usunąć operacje, których nie potrzebujesz.

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

    1. Opisz działanie za pomocą języka naturalnego.

      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. Usuwaj i dodaj operacje, aż zestaw operacji będzie zadowalający.

  6. Aby wdrożyć tę listę operacji jako zestaw oprogramowania sprzęgającego, który może wywołać klient, wybierz nazwę oprogramowania sprzęgającego, a potem kliknij Wdróż.

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

Po wykonaniu poprzednich kroków utworzyliśmy Data Connect schemat, który składa się z odpowiednich typów jednostek, i wdrożyliśmy go w środowisku produkcyjnym. Oznacza to, że utworzyliśmy i wdrożyliś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_spark Pomóż mi napisać zapytanie 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. Aby wyświetlić zapisane dane, możesz utworzyć w konsoli zapytanie:

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

  2. Wpisz tekst w wyświetlonym polu.

    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 i konektor, możesz kontynuować tworzenie schematu i konektorów 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ć IDE w przeglądarce. To środowisko IDE udostępnia narzędzia, w tym wstępnie skompilowane rozszerzenia VS Code, które ułatwiają zarządzanie schematem i definiowanie zapytań oraz mutacji do użycia w aplikacji. Umożliwia też 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 inicjowanie Firebase i dokończ proces.

  4. Kliknij przycisk Uruchom emulatory.

Lokalny proces: znajdowanie schematu i złącza w środowisku lokalnym

Krok firebase init w poprzedniej sekcji synchronizuje zasoby z lokalnym środowiskiem programistycznym:

  • Synchronizuje schemat, który został przez Ciebie wdrożony.
    • Znajdź schemat: znajduje się on w katalogu projektu Firebase, w pliku /dataconnect/schema/schema.gql.
  • Synchronizuje zapytania i mutacje w wdrożonym łączniku.
    • Znajdź łącznik: operacje znajdują się w katalogu projektu Firebase w katalogu /dataconnect/connector/.

Lokalny proces: poznaj schemat

Przykład schematu: film

W Data Connect pola GraphQL są mapowane na kolumny. Typ Movie może zawierać 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 dla Firebase Data Connect
  2. Do katalogu roboczego, np. Movie_insert.gql lub Product_insert.gql, dodawany jest 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 Read data (Pobierz 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: generowanie pakietów SDK

Operacje dotyczące schematu i złącza są synchronizowane lokalnie. Teraz możesz używać narzędzi lokalnych do generowania pakietów SDK klienta, aby zacząć wdrażać wywołania zapytań i mutacji w aplikacji na iOS, Androida, w przeglądarce i Flutterze.

  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: 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 konfiguracji 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 poznaj 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: