Начните работу с Firebase Data Connect локально

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

  • Добавьте Firebase Data Connect в свой проект Firebase.
  • Настройте среду разработки, включая расширения Visual Studio Code, для работы с локальным экземпляром.
  • Затем мы покажем вам, как:
    • Используйте инструментарий расширения VS Code с Gemini Code Assist , чтобы:
      • Создать схему для приложения
      • Создавайте административные запросы и мутации для заполнения вашей локальной базы данных.
      • Помочь вам реализовать запросы и мутации для вашего приложения в развертываемом коннекторе
    • Протестируйте свои запросы и мутации с помощью образцов данных на локальном эмуляторе.
    • Создавайте строго типизированные SDK и используйте их в своем приложении
    • Разверните окончательную схему и коннектор в облаке (необязательно, при обновлении плана Blaze).

Выберите локальный поток развития

Data Connect предлагает вам два способа установки инструментов разработки и локальной работы.

Предпосылки

Чтобы воспользоваться этим кратким руководством, вам понадобится следующее.

  • Проект Firebase. Если вы ещё не создали его, создайте его в консоли Firebase .

Настройте среду разработки

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

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

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

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

Настройте каталог вашего проекта

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

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

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

Создать схему

В каталоге проекта Firebase, в файле /dataconnect/schema/schema.gql , начните определять схему GraphQL, например, для обзоров фильмов.

Используйте Gemini Code Assist для создания схемы

Чтобы создать схему приложения для обзора фильмов с помощью Gemini Code Assist :

  1. Щелкните значок расширения Data Connect VS Code, чтобы открыть его боковую панель.
  2. Нажмите «Создать схему и запросы с помощью ИИ» . Откроется окно чата Gemini Code Assist .
  3. В нижней части окна чата убедитесь, что включен режим агента .
  4. Щелкните по полю чата в нижней части окна чата и начните вводить на естественном языке описание типа приложения, которое вы создаете.
  5. Нажмите Enter, и Gemini отобразит команду сервера MCP, которую он выполнит, чтобы начать разработку схемы.
  6. Нажмите «Принять» . Через несколько секунд появится рекомендуемая схема. Ознакомьтесь с ней.

  7. Чтобы добавить код в schema.gql :

    1. Подождите, пока Gemini Code Assist предложит обновить файл.
    2. Нажмите «Принять» , чтобы изменить файл, или «Просмотреть изменения» перед фиксацией.

Фильм

В Data Connect поля GraphQL сопоставляются со столбцами. У фильма есть id , title , imageUrl и genre . Data Connect распознаёт примитивные типы данных: String и UUID ).

Скопируйте следующий фрагмент или раскомментируйте соответствующие строки в файле.

# 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

Вы можете увидеть определение типа, подобное следующему. Или вы можете скопировать следующий фрагмент или раскомментировать соответствующие строки в файле по умолчанию.

# 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 . Для добавления данных в локальную базу данных можно использовать кнопки «Добавить данные» и «Запустить (локально)» .

Чтобы добавить записи в таблицы Movie и MovieMetadata :

  1. В schema.gql нажмите кнопку Добавить данные над объявлением типа Movie .
    Кнопка CodeLens «Добавить данные» для Firebase Data Connect
  2. В сгенерированном файле Movie_insert.gql жестко закодируйте данные для трех полей.
  3. Нажмите кнопку «Запустить (локально)» .
    Кнопка запуска CodeLens для Firebase Data Connect
  4. Повторите предыдущие шаги, чтобы добавить запись в таблицу MovieMetadata , указав id вашего фильма в поле movieId , как указано в сгенерированной мутации MovieMetadata_insert .

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

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

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

Определить запрос

А теперь немного интереснее: определите запросы, которые понадобятся в вашем приложении. Как разработчик, вы привыкли писать запросы SQL, а не GraphQL, поэтому поначалу это может показаться немного необычным.

Однако GraphQL гораздо более лаконичен и типобезопасен, чем чистый SQL. А наше расширение VS Code упрощает разработку как запросов, так и мутаций.

Чтобы создать запрос с помощью Gemini Code Assist :

  1. Щелкните значок расширения Data Connect VS Code, чтобы открыть его боковую панель.
  2. Нажмите «Создать схему и запросы с помощью ИИ» . Откроется окно чата Gemini Code Assist .
  3. В нижней части окна чата убедитесь, что включен режим агента .
  4. Щелкните по полю чата в нижней части окна чата и начните вводить на естественном языке описание типа операции, которую вы хотите разработать.
  5. Нажмите Enter, и Gemini отобразит команду сервера MCP, которую он выполнит, чтобы начать разработку операции.
  6. Нажмите «Принять» . Через несколько секунд появится рекомендуемый запрос. Проверьте его.

  7. Чтобы добавить код в queries.gql :

    1. Подождите, пока Gemini Code Assist предложит обновить файл.
    2. Нажмите «Принять» , чтобы изменить файл, или «Просмотреть изменения» перед фиксацией.

Выполните запрос с помощью расположенной рядом кнопки CodeLens.

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

Создавайте SDK и используйте их в своем приложении

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

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

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

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

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

Вы можете использовать SDK, сгенерированный Data Connect , для реализации вызова запроса ListMovies . Затем этот запрос можно выполнить локально с помощью эмулятора Data Connect .

Интернет

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

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

    • импортируйте сгенерированный вами SDK
    • инструмент для подключения вашего приложения к эмулятору Data Connect
    • вызов методов 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 />);

Быстрый

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

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

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

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

    • импортируйте сгенерированный вами SDK
    • инструмент для подключения вашего приложения к эмулятору Data Connect
    • вызов методов 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()
    }
}

Котлин 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
    • вызов методов 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
      }
    }
  }
}

Трепетание

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

Разверните вашу схему и запрос в рабочей среде

После локальной настройки приложения вы можете развернуть схему и коннектор в облаке. Для настройки экземпляра Cloud SQL вам потребуется проект плана Blaze.

  1. Перейдите в раздел Data Connect консоли Firebase и создайте бесплатный пробный экземпляр Cloud SQL.

  2. В интегрированном терминале IDE запустите firebase init dataconnect и выберите идентификатор региона/службы, который вы только что создали на консоли.

  3. Выберите «Y» при появлении запроса «Файл dataconnect/dataconnect.yaml уже существует. Перезаписать?» .

  4. В окне IDE, в пользовательском интерфейсе расширения VS Code, нажмите кнопку Развернуть в производственную среду .

  5. После развёртывания перейдите в консоль Firebase , чтобы убедиться, что схема, операции и данные загружены в облако. Вы сможете просматривать схему и выполнять операции в консоли. Экземпляр Cloud SQL for PostgreSQL будет обновлён с учётом окончательно сгенерированной схемы и данных после развёртывания.

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

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

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

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