Начало работы с Firebase Data Connect

В этом кратком руководстве вы узнаете, как создать Firebase Data Connect в своем приложении с использованием производственного экземпляра SQL.

В консоли Firebase вы сможете:

  • Добавьте Firebase Data Connect в свой проект Firebase.
  • Создайте схему для приложения с помощью генерации схемы с помощью ИИ в консоли Firebase и разверните ее.
  • Предоставьте экземпляр Cloud SQL для вашего приложения.
  • Используя Gemini в Firebase , заполните свою базу данных образцами данных .
  • Создавайте запросы и мутации с помощью генерации операций с помощью ИИ, которые можно развернуть и использовать для локальной разработки клиентского кода.

Затем в вашей локальной среде разработки вы:

  • Настройте инструменты разработки, включая расширение Visual Studio Code, для работы с вашим производственным экземпляром.
  • Синхронизируйте локальную среду с ресурсами, созданными в консоли.
  • Создавайте строго типизированные SDK и используйте их в своем приложении.

Консольный поток: используйте помощь ИИ для разработки схемы, а затем разверните ее в своей базе данных

  1. Создайте проект Firebase, если вы еще этого не сделали.
    1. В консоли Firebase нажмите Добавить проект , затем следуйте инструкциям на экране.
  2. Перейдите в раздел Data Connect консоли Firebase .
  3. Нажмите кнопку «Начать работу с Gemini» .
  4. На появившейся панели рабочего процесса генератора схем опишите приложение, чтобы Gemini мог помочь вам создать схему GraphQL.
  5. Просмотрите схему GraphQL, затем нажмите «Обновить и развернуть» .

  6. Обновите свой проект до плана Blaze. Это позволит вам создать экземпляр Cloud SQL для PostgreSQL.

  7. Выберите Create a new Cloud SQL instance. В появившемся диалоговом окне выберите местоположение и наименование для вашей базы данных Cloud SQL for PostgreSQL.

    Развертывается схема вашего приложения вместе с базой данных PostgreSQL, соответствующей этой схеме.

Поток консоли: используйте помощь ИИ для создания операций для ваших клиентов

После развертывания схемы вы можете предпринять первые шаги по обеспечению доступности этих данных из клиентских приложений, создав коннектор запросов и мутаций для развертывания на бэкэнде и последующего вызова из клиентов.

Наши инструменты искусственного интеллекта готовы вам помочь.

  1. При появлении запроса нажмите кнопку «Создать операции с Gemini» .

  2. Через несколько мгновений на появившейся панели «Создайте рабочий процесс операций» просмотрите список запросов и мутаций, предоставленных Gemini на основе вашей схемы.

  3. Щелкните каждую строку операции, чтобы просмотреть код GraphQL, который определяет эту операцию. При необходимости используйте элемент управления мусорной корзиной, чтобы удалить ненужные операции.

  4. Чтобы добавить операции, нажмите кнопку + Добавить . Затем:

    1. Опишите вашу операцию естественным языком.

      Например:

      List all products

    2. Просмотрите сгенерированный GraphQL.

    3. Если операция приемлема, нажмите «Вставить» , чтобы добавить ее в список операций.

  5. Продолжайте удалять и добавлять операции, пока ваш набор операций не станет приемлемым.

  6. Чтобы развернуть этот список операций как набор коннекторов , вызываемых клиентом, выберите имя коннектора, затем нажмите кнопку «Развернуть» .

Поток консоли: использование Gemini в Firebase для создания мутации и заполнения базы данных

Выполнив предыдущие шаги, вы создали схему Data Connect , состоящую из соответствующих типов сущностей, и развернули ее в рабочей среде, то есть также создали и развернули базу данных PostgreSQL с соответствующими таблицами .

Для заполнения базы данных вы можете использовать Gemini в Firebase , который поможет вам использовать входные данные на естественном языке для определения мутации GraphQL для обновления одной из ваших таблиц и запроса для подтверждения ваших обновлений.

  1. Откройте вкладку «Данные» .

  2. Нажмите на значок «Помогите мне написать GraphQL pen_spark» и в появившемся поле введите свой текст.

    Например:

    Add data for three sample products to my app.

  3. Нажмите Generate . Мутация будет возвращена.

  4. Просмотрите вывод. При необходимости нажмите «Изменить» , чтобы уточнить запрос, и нажмите «Регенерировать» .

  5. Затем нажмите «Вставить» , чтобы вставить мутацию в редактор данных.

  6. Нажмите «Выполнить» .

При запуске мутации данные записываются в соответствующую таблицу в вашей базе данных PostgreSQL. Вы можете создать запрос в консоли для просмотра сохраненных данных:

  1. Повторите предыдущие шаги, используя Помогите мне написать GraphQL pen_spark для создания запроса.

  2. В появившемся поле введите свои данные.

    Например:

    Query data for all sample products in my app.

  3. Нажмите «Создать» , затем «Выполнить» .

Локальный поток: выберите инструменты разработки

Теперь, когда у вас есть данные в развернутой базе данных и вы развернули коннектор, вы можете продолжить разработку схемы и коннекторов в локальной среде разработки.

Сначала вам нужно настроить локальную среду. Data Connect предлагает вам два способа установки инструментов разработки.

Локальный поток: настройка среды разработки

  1. Создайте новый каталог для вашего локального проекта.

  2. Выполните следующую команду в новом каталоге, который вы создали.

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

    Этот скрипт пытается настроить среду разработки для вас и запустить IDE на основе браузера. Эта IDE предоставляет инструменты, включая предварительно упакованные расширения VS Code, чтобы помочь вам управлять вашей схемой и определять запросы и мутации, которые будут использоваться в вашем приложении, а также генерировать строго типизированные SDK.

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

Локальный поток: настройте каталог своего проекта

Чтобы настроить локальный проект, инициализируйте каталог проекта. В окне IDE на левой панели щелкните значок Firebase, чтобы открыть пользовательский интерфейс расширения Data Connect VS Code:

  1. Нажмите кнопку «Войти через Google» .
  2. Нажмите кнопку Подключить проект Firebase и выберите проект, который вы создали ранее в консоли.

  3. Нажмите кнопку «Запустить firebase init» и завершите процесс.

  4. Нажмите кнопку «Запустить эмуляторы» .

Локальный поток: найдите свою схему и соединитель в локальной среде

Шаг firebase init в предыдущем разделе синхронизирует ресурсы с вашей локальной средой разработки:

  • Синхронизирует развернутую вами схему .
    • Найдите свою схему: она находится в каталоге вашего проекта Firebase, в файле /dataconnect/schema/schema.gql .
  • Он синхронизирует запросы и мутации в развернутом вами коннекторе .
    • Найдите свой коннектор: операции находятся в каталоге вашего проекта Firebase, в каталоге /dataconnect/connector/ .

Локальный поток: поймите свою схему

Пример схемы: Фильм

В Data Connect поля GraphQL сопоставляются со столбцами. Тип Movie , скорее всего, будет иметь id , title , imageUrl и genre . Data Connect распознает примитивные типы данных String и 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
}

Пример схемы таблицы 1:1: MovieMetadata

С помощью фильмов вы можете моделировать метаданные фильмов.

Например, в schema.gql можно добавить следующий фрагмент или код обзора, сгенерированный 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
}

Обратите внимание, что поле movie сопоставлено с типом Movie . Data Connect понимает, что это связь между Movie и MovieMetadata , и будет управлять этой связью для вас.

Подробнее о схемах Data Connect читайте в документации.

Локальный поток: добавьте больше данных в свои таблицы

На панели редактора IDE вы можете увидеть кнопки CodeLens, появляющиеся над типами GraphQL в /dataconnect/schema/schema.gql . Так же, как вы делали это в консоли, вы можете создать мутацию для добавления данных в вашу производственную базу данных.

Работая локально, чтобы добавить данные в таблицу:

  1. В schema.gql нажмите кнопку Добавить данные над объявлением одного из ваших типов (например, Movie , Product , Account , в зависимости от характера вашего приложения).
    Кнопка добавления данных Code Lens для Firebase Data Connect
  2. Новый файл <type>_insert.qgl добавляется в ваш рабочий каталог, например Movie_insert.gql или Product_insert.gql . Жестко закодируйте данные в полях для этого типа.
  3. Нажмите кнопку «Запустить (Производство)» .
    Кнопка запуска Code Lens для Firebase Data Connect
  4. Повторите предыдущие шаги, чтобы добавить запись в другие таблицы.

Для быстрой проверки данных добавлено:

  1. Вернувшись в schema.gql , нажмите кнопку «Прочитать данные» над объявлением типа.
  2. В полученном файле <type>_read.gql , например Product_read.gql , нажмите кнопку «Выполнить (Производство)» , чтобы выполнить запрос.

Подробнее о мутациях Data Connect читайте в документации.

Локальный поток: генерация SDK

Ваши операции схемы и коннектора синхронизируются локально. Теперь вы можете использовать локальные инструменты для генерации клиентских SDK, чтобы начать реализацию вызовов запросов и мутаций в приложениях iOS, Android, веб и Flutter.

  1. Нажмите кнопку Добавить SDK в приложение .

  2. В появившемся диалоговом окне выберите каталог, содержащий код для вашего приложения. Код Data Connect SDK будет сгенерирован и сохранен там.

  3. Выберите платформу вашего приложения и обратите внимание, что код SDK немедленно сгенерируется в выбранном вами каталоге.

Локальный поток: используйте SDK для вызова вашего запроса из приложения

Теперь, когда обновленная схема (если применимо) и ваш запрос развернуты в рабочей среде, вы можете использовать SDK, сгенерированный Data Connect для реализации вызова вашего запроса ListMovies .

Веб

  1. Добавьте Firebase в свое веб- приложение.

  2. В основном файле вашего приложения React:

    • импортируйте сгенерированный вами SDK
    • вызов методов 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 />);

Быстрый

  1. Добавьте Firebase в свое приложение iOS .

  2. Чтобы использовать сгенерированный SDK, настройте его как зависимость в Xcode.

    В верхней навигационной панели Xcode выберите Файл > Добавить зависимости пакета > Добавить локальный и выберите папку, содержащую сгенерированный Package.swift .

  3. В главном делегате вашего приложения:

    • импортируйте сгенерированный вами SDK
    • вызов методов 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()
    }
}

Котлин Android

  1. Добавьте Firebase в свое приложение Android .

  2. Чтобы использовать сгенерированный SDK, настройте Data Connect как зависимость в Gradle.

    Обновите plugins и dependencies в вашем 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. В основной деятельности вашего приложения:

    • импортируйте сгенерированный вами SDK
    • вызов методов 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
      }
    }
  }
}

Трепетание

  1. Добавьте Firebase в свое приложение Flutter .
  2. Установите flutterfire CLI dart pub global activate flutterfire_cli .
  3. Запустите flutterfire configure .
  4. В основной функции вашего приложения:
    • импортируйте сгенерированный вами SDK
    • вызов методов 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();
            }),
      )
    ])));
  }
}

Следующие шаги

Просмотрите свой развернутый проект и найдите больше инструментов:

  • Добавляйте данные в базу данных, проверяйте и изменяйте схемы, а также отслеживайте работу службы Data Connect в консоли Firebase .

Получите дополнительную информацию в документации. Например, поскольку вы завершили быстрый старт: