Начало работы с 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. Выберите «Создать новый экземпляр Cloud SQL» . В открывшемся диалоговом окне выберите расположение и имя для базы данных 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. Нажмите «Сгенерировать» . Мутация будет возвращена.

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

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

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

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

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

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

    Например:

    Query data for all sample products in my app.

  3. Нажмите «Создать» , затем «Запустить» .

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

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

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

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

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

  2. Чтобы настроить среду разработки Data Connect и IDE на основе браузера, а также сгенерировать клиентские SDK, выполните следующую команду в новом созданном вами каталоге.

      curl -sL https://firebase.tools/init/dataconnect | editor=true bash

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

    Скрипт также синхронизирует ресурсы, созданные вами в консоли Firebase , с вашим локальным каталогом и генерирует клиентские SDK для всех приложений, зарегистрированных вами для вашего проекта.

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

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

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

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

Параметр автоматической установки для macOS или Linux, используемый для синхронизации ресурсов с существующим проектом, имеет следующие эффекты:
  • Синхронизирует развернутую вами схему .
    • Найдите свою схему: она находится в каталоге вашего проекта 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

Операции вашей схемы и соединителя синхронизируются локально.

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

  1. В пользовательском интерфейсе расширения нажмите кнопку Добавить SDK в приложение .

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

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

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

Ранее вы развернули схему и операции в консоли Firebase . Для вызова операций из приложения вы можете использовать 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 .

Дополнительную информацию можно найти в документации. Например, после завершения краткого руководства: