Começar a usar o Firebase Data Connect

Neste guia de início rápido, você vai aprender a criar Firebase Data Connect no aplicativo com uma instância SQL de produção.

No console do Firebase, você vai:

  • Adicione Firebase Data Connect ao seu projeto do Firebase.
  • Crie e implante um esquema para um app com geração de esquema assistida por IA no console do Firebase.
  • Provisione uma instância do Cloud SQL para seu app.
  • Com o Gemini no Firebase, preencha seu banco de dados com dados de amostra.
  • Crie consultas e mutações com geração de operações assistida por IA, que você pode implantar e usar para desenvolver código do cliente localmente.

Em seguida, no ambiente de desenvolvimento local, faça o seguinte:

  • Configure um conjunto de ferramentas de desenvolvimento, incluindo uma extensão do Visual Studio Code, para trabalhar com sua instância de produção.
  • Sincronize seu ambiente local com os recursos criados no console.
  • Gere SDKs fortemente tipados e use-os no seu app.

Fluxo do console: use a assistência de IA para projetar seu esquema e implante-o no banco de dados

  1. Se você ainda não tiver um projeto do Firebase, crie um.
    1. No console do Firebase, clique em Adicionar projeto e siga as instruções na tela.
  2. Navegue até a seção Data Connect do console Firebase.
  3. Clique no botão Começar a usar o Gemini.
  4. No painel de fluxo de trabalho Gerador de esquema que aparece, descreva um app para que o Gemini possa ajudar a criar um esquema do GraphQL com você.
  5. Revise o esquema do GraphQL e clique em Fazer upgrade e implantar.

  6. Faça upgrade do seu projeto para o plano Blaze. Isso permite criar uma instância do Cloud SQL para PostgreSQL.

  7. Selecione Criar uma instância do Cloud SQL. Na caixa de diálogo que aparece, selecione um local e um nome para seu banco de dados do Cloud SQL para PostgreSQL.

    O esquema do app é implantado, junto com um banco de dados PostgreSQL correspondente a esse esquema.

Fluxo do console: use a assistência de IA para criar operações para seus clientes

Depois que o esquema for implantado, você poderá dar os primeiros passos para disponibilizar esses dados nos apps clientes. Para isso, crie um conector de consultas e mutações para implantar no back-end e depois chamar dos clientes.

Nossas ferramentas de assistência de IA estão aqui para ajudar.

  1. Quando solicitado, clique no botão Gerar operações com o Gemini.

  2. Depois de alguns instantes, no painel de fluxo de trabalho Gerar suas operações que aparece, revise a lista de consultas e mutações fornecidas pelo Gemini com base no seu esquema.

  3. Clique em cada linha de operação para analisar o código GraphQL que define essa operação. Se necessário, use o controle da lixeira para excluir operações que não são mais necessárias.

  4. Para adicionar operações, clique no botão + Adicionar. Depois, siga estas instruções:

    1. Descreva sua operação em linguagem natural.

      Exemplo:

      List all products

    2. Revise o GraphQL gerado.

    3. Se a operação for aceitável, clique em Inserir para adicioná-la à sua lista de operações.

  5. Continue removendo e adicionando operações até que o conjunto seja aceitável.

  6. Para implantar essa lista de operações como um conjunto de conectores chamáveis pelo cliente, escolha o nome do conector e clique em Implantar.

Fluxo do console: use o Gemini no Firebase para criar uma mutação e preencher seu banco de dados

Ao concluir as etapas anteriores, você criou um esquema Data Connect que consiste em tipos de entidades relevantes e o implantou na produção. Isso significa que um banco de dados PostgreSQL com tabelas correspondentes também foi criado e implantado.

Para preencher seu banco de dados, use o Gemini no Firebase para inserir dados com mutações que atualizam uma ou mais tabelas.

  1. Abra a guia Dados.

  2. Clique no ícone Quero ajuda para escrever em GraphQL pen_spark e no ícone Dados de inicialização.

  3. Clique em Gerar. As mutações para preencher seus dados são retornadas.

  4. Verifique a saída. Se necessário, clique em Editar para refinar o comando e clique em Gerar novamente.

  5. Em seguida, clique em Inserir para inserir a mutação no editor de dados.

  6. Clique em Executar.

Quando você executa as mutações, os dados são gravados nas tabelas aplicáveis no seu banco de dados PostgreSQL. Você pode criar uma consulta no console para ver os dados armazenados:

  1. Repita as etapas anteriores usando o recurso Quero ajuda para escrever em GraphQL pen_spark para criar uma consulta.

  2. Na caixa exibida, digite sua entrada.

    Exemplo:

    Query data for all sample products in my app.

  3. Clique em Gerar e em Executar.

Fluxo local: escolher ferramentas de desenvolvimento

Agora que você tem dados no banco de dados implantado e implantou um conector, pode continuar o desenvolvimento do esquema e dos conectores no ambiente de desenvolvimento local.

Primeiro, configure um ambiente local. O Data Connect oferece duas maneiras de instalar ferramentas de desenvolvimento.

Pré-requisitos

Para usar este guia de início rápido, você precisa do seguinte:

Fluxo local: configurar o ambiente de desenvolvimento

  1. Crie um novo diretório para seu projeto local.
  2. Abra o VS Code no novo diretório.
  3. Instale a extensão do Firebase Data Connect no Visual Studio Code Marketplace.

Fluxo local: configurar seu projeto local

Para configurar seu projeto local, inicialize o diretório dele. Na janela do IDE, no painel à esquerda, clique no ícone do Firebase para abrir a interface da extensão Data Connect VS Code:

  1. Clique no botão Fazer login com o Google.
  2. Clique no botão Conectar um projeto do Firebase e selecione o projeto que você criou anteriormente no console.

  3. Clique no botão Executar firebase init e conclua o fluxo.

  1. Clique no botão Iniciar emuladores.

Fluxo local: encontre seu esquema e conector no ambiente local

A etapa firebase init na seção anterior sincroniza recursos com seu ambiente de desenvolvimento local:
  • Ele sincroniza o esquema que você implantou
    • Encontre seu esquema: ele está localizado no diretório do projeto do Firebase, no arquivo /dataconnect/schema/schema.gql.
  • Ele sincroniza as consultas e mutações no conector que você implantou
    • Encontre seu conector: as operações estão localizadas no diretório do projeto do Firebase, no diretório /dataconnect/connector/.

Fluxo local: entender seu esquema

Exemplo de esquema: filme

Em Data Connect, os campos do GraphQL são mapeados para colunas. Um tipo Movie provavelmente teria id, title, imageUrl e genre. O Data Connect reconhece os tipos de dados primitivos String e 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
}

Exemplo de esquema 1:1: MovieMetadata

Com filmes, é possível modelar metadados de filmes.

Por exemplo, em schema.gql, você pode adicionar o snippet a seguir ou revisar o código gerado por 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
}

O campo movie é mapeado para um tipo de Movie. Data Connect entende que essa é uma relação entre Movie e MovieMetadata e vai gerenciar essa relação para você.

Saiba mais sobre os esquemas do Data Connect na documentação

Fluxo local: adicione mais dados às suas tabelas

No painel do editor da IDE, você pode ver os botões do CodeLens aparecerem sobre os tipos GraphQL em /dataconnect/schema/schema.gql. Assim como fez no console, você pode criar uma mutação para adicionar dados ao banco de dados de produção.

Para adicionar dados a uma tabela trabalhando localmente:

  1. Em schema.gql, clique no botão Adicionar dados acima da declaração de um dos seus tipos (como Movie, Product, Account, dependendo da natureza do seu app).
    Botão &quot;Adicionar dados&quot; do CodeLens para o Firebase Data Connect
  2. Um novo arquivo, <type>_insert.qgl, é adicionado ao seu diretório de trabalho, como Movie_insert.gql ou Product_insert.gql. Codifique os dados nos campos para esse tipo.
  3. Clique no botão Executar (produção).
    Botão &quot;Executar&quot; do CodeLens para o Firebase Data Connect
  4. Repita as etapas anteriores para adicionar um registro a outras tabelas.

Para verificar rapidamente se os dados foram adicionados:

  1. De volta ao schema.gql, clique no botão Ler dados acima da declaração de tipo.
  2. No arquivo <type>_read.gql resultante, como Product_read.gql, clique no botão Executar (produção) para executar a consulta.

Saiba mais sobre mutações do Data Connect na documentação

Fluxo local: gerar SDKs

Seu esquema e as operações do conector são sincronizados localmente.

Agora você pode usar a extensão do VS Code para gerar SDKs de cliente e começar a implementar chamadas para consultas e mutações em apps iOS, Android, Web e Flutter.

  1. Na interface da extensão, clique no botão Adicionar SDK ao app.

  2. Na caixa de diálogo que aparece, selecione um diretório com o código do seu app. O código do SDK Data Connect será gerado e salvo lá.

  3. Selecione a plataforma do app e observe que o código do SDK é gerado imediatamente no diretório selecionado.

Fluxo local: use os SDKs para chamar sua consulta de um app

Antes, você implantou seu esquema e operações no console do Firebase. Para chamar operações do seu app, use o SDK que o Data Connect gerou para implementar uma chamada à sua consulta ListMovies.

Web

  1. Adicione o Firebase ao seu app da Web.

  2. No arquivo principal do seu app React:

    • importe o SDK gerado
    • chamar métodos 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 '@dataconnect/generated';

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. Adicione o Firebase ao seu app iOS.

  2. Para usar o SDK gerado, configure-o como uma dependência no Xcode.

    Na barra de navegação superior do Xcode, selecione Arquivo > Adicionar dependências de pacote > Adicionar local e escolha a pasta que contém o Package.swift gerado.

  3. No delegado principal do app:

    • importe o SDK gerado
    • chamar métodos 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 Android

  1. Adicione o Firebase ao seu app Android.

  2. Para usar o SDK gerado, configure Data Connect como uma dependência no Gradle.

    Atualize plugins e dependencies no seu 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. Na atividade principal do app:

    • importe o SDK gerado
    • chamar métodos 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. Adicione o Firebase ao seu app Flutter.
  2. Instale a CLI do flutterfire dart pub global activate flutterfire_cli.
  3. Execute flutterfire configure.
  4. Na função principal do app:
    • importe o SDK gerado
    • chamar métodos 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();
            }),
      )
    ])));
  }
}

Próximas etapas

Revise o projeto implantado e descubra mais ferramentas:

  • Adicione dados ao banco de dados, inspecione e modifique os esquemas e monitore o serviço do Data Connect no console do Firebase.

Acesse mais informações na documentação. Por exemplo, como você concluiu o guia de início rápido: