Começar a usar o Firebase Data Connect

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

No console Firebase, você vai:

  • Adicione Firebase Data Connect ao seu projeto do Firebase.
  • Crie um esquema para um app no console do Firebase usando o Schema Assist e implante-o.
  • Provisione uma instância do Cloud SQL para seu app.
  • Com Gemini Code Assist, preencha seu banco de dados com dados de amostra.

Em seguida, no ambiente de desenvolvimento local, você vai:

  • Configure uma ferramenta 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.
  • Use as ferramentas de extensão para ajudar a implementar uma consulta que será usada no app.
  • Gere SDKs com tipagem forte e use-os no seu app.
  • Implante seu esquema, consulta e dados finais na nuvem.

Fluxo do console: projete seu esquema e implante no banco de dados

  1. Crie um projeto do Firebase, se ainda não tiver 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 do Schema Generator que aparece, descreva um app para que Gemini possa ajudar a criar um esquema 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 que você crie uma instância do Cloud SQL para PostgreSQL.

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

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

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

Ao concluir a etapa anterior, você criou um esquema Data Connect com tipos de entidade relevantes e o implantou na produção. Isso significa que um banco de dados do PostgreSQL com as tabelas correspondentes também foi criado e implantado.

Para preencher seu banco de dados, use o Gemini em Firebase para ajudar a usar as entradas de linguagem natural para definir uma mutação do GraphQL para atualizar uma das tabelas e uma consulta para confirmar as atualizações.

  1. Abra a guia Dados.

  2. Clique no ícone Quero ajuda para escrever em GraphQL pen_spark e, na caixa que aparece, digite sua entrada.

    Exemplo:

    Add data for three sample products to my app.

  3. Clique em Gerar. A mutação é retornada.

  4. Verifique a saída. Se necessário, clique em Editar para refinar a instrução e 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 a mutação, os dados são gravados na tabela aplicável no seu banco de dados do PostgreSQL. Você pode criar uma consulta no console para conferir os dados armazenados:

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

  2. Na caixa que aparece, digite sua entrada.

    Exemplo:

    Query data for all sample products in my app.

  3. Clique em Gerar e em Executar.

Fluxo local: escolha as ferramentas de desenvolvimento

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

Primeiro, você precisa configurar um ambiente local. O Data Connect oferece duas maneiras de instalar ferramentas de desenvolvimento.

Fluxo local: configurar o ambiente de desenvolvimento

  1. Crie um novo diretório para seu projeto local.

  2. Execute o comando abaixo no novo diretório que você criou.

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

    Esse script tenta configurar o ambiente de desenvolvimento para você e iniciar um ambiente de desenvolvimento integrado baseado em navegador. Esse ambiente de desenvolvimento integrado oferece ferramentas, incluindo uma extensão pré-empacotada do VS Code, para ajudar a gerenciar seu esquema e definir consultas e mutações a serem usadas no aplicativo, além de gerar SDKs fortemente tipados.

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

Fluxo local: configurar o diretório do projeto

Para configurar seu projeto local, inicialize o diretório do projeto. Na janela do ambiente de desenvolvimento integrado, no painel à esquerda, clique no ícone do Firebase para abrir a interface da extensão do Data Connect no 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 Run firebase init e conclua o fluxo.

  4. Clique no botão Start emulators.

Fluxo local: encontrar seu esquema no ambiente local

A etapa firebase init na seção anterior sincronizou o esquema implantado do console com o ambiente de desenvolvimento local.

Encontre seu esquema: ele está localizado no diretório do projeto do Firebase, no arquivo /dataconnect/schema/schema.gql.

Fluxo local: trabalhar com seu esquema

Exemplo de esquema: filme

Em Data Connect, os campos do GraphQL são mapeados para colunas. Um tipo Movie provavelmente terá id, title, imageUrl e genre. 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 tabela 1:1 de esquema: MovieMetadata

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

Por exemplo, em schema.gql, você pode adicionar o snippet ou o código de revisão 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 do ambiente de desenvolvimento integrado, os botões do CodeLens aparecem sobre os tipos do GraphQL em /dataconnect/schema/schema.gql. Assim como no console, é possível criar uma mutação para adicionar dados ao banco de dados de produção.

Para adicionar dados a uma tabela 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 app).
    Botão &quot;Adicionar dados&quot; da Lente de código para o Firebase Data Connect
  2. Um novo arquivo, <type>_insert.qgl, é adicionado ao diretório de trabalho, como Movie_insert.gql ou Product_insert.gql. Codifique os dados nos campos desse tipo.
  3. Clique no botão Run (Produção).
    Botão &quot;Run&quot; do Code Lens 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 a schema.gql, clique no botão Read data acima da declaração de tipo.
  2. No arquivo <type>_read.gql resultante, como Product_read.gql, clique no botão Run (Production) para executar a consulta.

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

Fluxo local: definir a consulta

Agora a parte divertida: consultas. Como desenvolvedor, você está acostumado a escrever consultas SQL em vez de consultas GraphQL. Por isso, isso pode parecer um pouco diferente no início. No entanto, o GraphQL é muito mais conciso e seguro do que o SQL bruto. E nossa extensão do VS Code facilita a experiência de desenvolvimento.

Para implementar uma consulta, adapte uma gerada com o CodeLens:

  1. Em /dataconnect/schema/schema.gql, acima de um tipo (Movie, Product, Account etc.), clique no botão CodeLens Read data.
  2. No arquivo <type>_read.gql resultante, teste a consulta clicando no botão Run (Production).
  3. Copie a consulta em funcionamento para /dataconnect/connector/queries.gql.

  4. Para implantar essa consulta, declare um nome exclusivo para ela.

    Por exemplo, no exemplo genérico a seguir, query_name pode ser ListMovies, ListProducts ou ListAccounts.

# File `/dataconnect/connector/queries.gql`

# @auth() directives control who can call each operation.
query <query_name> @auth(level: PUBLIC) {
   <table_name> {
     <field_1>
     <field_2>
     <field_3>
  }
}

Execute a consulta usando o botão do CodeLens.

Saiba mais sobre as consultas do Data Connect na documentação

Fluxo local: gerar SDKs

  1. Clique no botão Adicionar SDK ao app.

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

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

Fluxo local: implantar o esquema e a consulta na produção

Você trabalhou em uma iteração de desenvolvimento. Agora você pode implantar seu schema e consultas no servidor com a interface da extensão do Firebase ou a CLI Firebase, assim como fez com o schema.

Na janela do ambiente de desenvolvimento integrado, na interface da extensão do VS Code, clique no botão Deploy to production.

Após a implantação, acesse o console Firebase para verificar as atualizações do esquema (se aplicável) e se as operações foram enviadas para a nuvem. Você também pode conferir o esquema e executar suas operações no console. A instância do Cloud SQL para PostgreSQL será atualizada com o esquema e os dados gerados e implantados.

Saiba mais sobre como usar o emulador do Data Connect na documentação

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

Agora que seu esquema atualizado (se aplicável) e sua consulta foram implantados na produção, você pode usar o SDK gerado por Data Connect para implementar uma chamada para a consulta ListMovies.

Web Swift Kotlin para Android Flutter
  1. Adicione o Firebase ao seu app da Web.

  2. No arquivo principal do app React:

    • importar o SDK gerado;
    • chame os 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 '@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. Adicione o Firebase ao seu app para iOS.

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

    Na barra de navegação superior do Xcode, selecione File > Add Package Dependencies > Add Local e escolha a pasta que contém o Package.swift gerado.

  3. No representante principal do app:

    • importar o SDK gerado;
    • chame os 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()
    }
}
  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 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:

    • importar o SDK gerado;
    • chame os 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
      }
    }
  }
}
  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:
    • importar o SDK gerado;
    • chame os 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 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: