В этом кратком руководстве вы узнаете, как создать Firebase Data Connect в своем приложении с помощью производственного экземпляра SQL. Вы будете:
- Добавьте Firebase Data Connect в свой проект Firebase.
- Предоставьте экземпляр Cloud SQL для своего приложения.
- Настройте среду разработки, включая расширение Visual Studio Code, для работы с производственным экземпляром.
- Тогда мы покажем вам, как:
- Создание схемы для приложения для просмотра фильмов
- Определите запросы и мутации , которые будут использоваться в вашем приложении.
- Протестируйте свои запросы и мутации с помощью образцов данных.
- Создавайте строго типизированные SDK и используйте их в своем приложении.
- Разверните окончательную схему, запросы и данные в облаке.
Создайте проект Firebase и базу данных Cloud SQL.
- Если вы еще этого не сделали, создайте проект Firebase.
- В консоли Firebase нажмите «Добавить проект» и следуйте инструкциям на экране.
- Перейдите в раздел Data Connect консоли Firebase и следуйте инструкциям по настройке продукта.
Обновите свой проект до плана Blaze. Это позволит вам создать экземпляр Cloud SQL для PostgreSQL.
Выберите местоположение для базы данных Cloud SQL для PostgreSQL.
Запишите имена и идентификаторы проекта, службы и базы данных для подтверждения позже.
Следуйте оставшейся процедуре настройки и нажмите «Готово» .
Выберите поток разработки
Data Connect предлагает два способа установки инструментов разработки.
Настройка среды разработки
- Создайте новый каталог для вашего локального проекта.
Запустите следующую команду в новом созданном каталоге.
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:
- Нажмите кнопку «Войти через Google» .
- Нажмите кнопку «Подключить проект Firebase» и выберите в консоли проект, который вы создали ранее.
- Нажмите кнопку «Запустить инициализацию Firebase» и завершите процесс.
Нажмите кнопку «Запустить эмуляторы» .
Создать схему
В каталоге проекта Firebase в файле /dataconnect/schema/schema.gql
начните определять схему GraphQL, включающую фильмы.
Фильм
В 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
}
ФильмМетаданные
Теперь, когда у вас есть фильмы, вы можете моделировать метаданные фильма.
Скопируйте следующий фрагмент или раскомментируйте соответствующие строки в файле.
# 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 см. в документации.
Разверните свою схему в рабочей среде
Прежде чем продолжить, вам необходимо развернуть схему.
В пользовательском интерфейсе расширения на панели Firebase Data Connect нажмите «Развернуть в производство» .
После развертывания схемы в рабочей базе данных вы сможете просмотреть ее в консоли Firebase .
Добавьте данные в свои таблицы
На панели редактора IDE вы можете увидеть, как кнопки CodeLens появляются над типами GraphQL в /dataconnect/schema/schema.gql
. Поскольку вы развернули свою схему в рабочей среде, вы можете использовать кнопки «Добавить данные» и «Запустить (производственная)», чтобы добавить данные в свою базу данных на серверной стороне.
Чтобы добавить записи в таблицу Movie
:
- В
schema.gql
нажмите кнопку «Добавить данные» над объявлением типаMovie
. - В создаваемом файле
Movie_insert.gql
данные жесткого кода для четырех полей. - Нажмите кнопку «Запустить (Производство)» .
- Повторите предыдущие шаги, чтобы добавить запись в таблицу
MovieMetadata
, указавid
вашего фильма в полеmovieId
, как это было предложено в сгенерированной мутацииMovieMetadata_insert
.
Для быстрой проверки данных добавлено:
- Вернувшись в
schema.gql
, нажмите кнопку «Читать данные» над объявлением типаMovie
. - В полученном файле
Movie_read.gql
нажмите кнопку «Выполнить» (производство) , чтобы выполнить запрос.
Узнайте больше о мутациях Data Connect в документации.
Определите свой запрос
Теперь самое интересное, запросы. Как разработчик, вы привыкли писать запросы SQL, а не запросы GraphQL, поэтому поначалу это может показаться немного другим. Однако GraphQL гораздо более краток и типобезопасен, чем чистый SQL. А наше расширение VS Code упрощает разработку.
Начните редактировать файл /dataconnect/connector/queries.gql
. Если вы хотите получить все фильмы, используйте такой запрос.
# File `/dataconnect/connector/queries.gql`
# @auth() directives control who can call each operation.
# Anyone should be able to list all movies, so the auth level
# is set to PUBLIC
query ListMovies @auth(level: PUBLIC) {
movies {
id
title
imageUrl
genre
}
}
Выполните запрос, используя расположенную рядом кнопку CodeLens.
Дополнительные сведения о запросах Data Connect см. в документации.
Создание SDK
- Нажмите кнопку «Добавить SDK в приложение» .
В появившемся диалоговом окне выберите каталог, содержащий код вашего приложения. Код Data Connect SDK будет создан и сохранен там.
Выберите платформу своего приложения и обратите внимание, что код SDK сразу же создается в выбранном вами каталоге.
Разверните свою схему и запросите ее в рабочей среде
Вы прошли итерацию разработки. Теперь вы можете развернуть свою схему, данные и запросы на сервере с помощью пользовательского интерфейса расширения Firebase или интерфейса командной строки Firebase , так же, как вы это делали со своей схемой.
В окне IDE в пользовательском интерфейсе расширения кода VS нажмите кнопку «Развернуть в производство» .
После развертывания перейдите в консоль Firebase , чтобы убедиться, что схема, операции и данные загружены в облако. У вас должна быть возможность просматривать схему и выполнять операции на консоли. Экземпляр Cloud SQL для PostgreSQL будет обновлен с учетом окончательной развернутой сгенерированной схемы и данных.
Подробную информацию об использовании эмулятора Data Connect можно найти в документации.
Используйте SDK для вызова вашего запроса из приложения
Теперь, когда ваша схема и запрос развернуты в рабочей среде, вы можете использовать SDK, созданный Data Connect , для реализации вызова вашего запроса ListMovies
.
- Добавьте Firebase в свое веб- приложение.
В главном файле вашего приложения 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 />);
- Добавьте Firebase в свое приложение для iOS .
Чтобы использовать сгенерированный SDK, настройте его как зависимость в Xcode.
В верхней панели навигации Xcode выберите «Файл» > «Добавить зависимости пакета» > «Добавить локальный» и выберите папку, содержащую сгенерированный
Package.swift
.В главном делегате вашего приложения:
- импортируйте сгенерированный 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() } }
- Добавьте Firebase в свое приложение для Android .
Чтобы использовать сгенерированный 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") }
В основной деятельности вашего приложения:
- импортируйте сгенерированный 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 } } } }
- Добавьте Firebase в свое приложение Flutter .
- Установите flutterfire CLI
dart pub global activate flutterfire_cli
. - Запустите
flutterfire configure
. - В основной функции вашего приложения:
- импортируйте сгенерированный 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 . Дополнительную информацию можно найти в документации. Например, после завершения краткого руководства:
Узнайте больше о разработке схем, запросов и мутаций.
Узнайте о создании клиентских SDK, вызове запросов и мутациях из клиентского кода для Интернета , Android , iOS и Flutter .