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 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 a geração de operações assistida por IA, que pode ser implantada e usada para desenvolver código de cliente localmente.

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.
  • Gere SDKs com tipagem forte e use-os no seu app.

Fluxo do console: use a assistência de IA para projetar seu esquema e implantá-lo 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.
  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 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 tornar esses dados acessíveis nos apps de cliente criando um conector de consultas e mutações para implantar no back-end e, mais tarde, chamar de clientes.

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

  1. Quando solicitado, clique no botão Generate operations with Gemini.

  2. Após alguns instantes, no painel de fluxo de trabalho Generate your operations que aparece, analise 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 do GraphQL que define essa operação. Se necessário, use o controle de lixeira para excluir as operações que não são 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 à lista de operações.

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

  6. Para implantar essa lista de operações como um conjunto de conectores invocá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 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 no Firebase para ajudar a usar as entradas de linguagem natural para definir uma mutação do GraphQL e 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 e implantou um conector, 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 extensões pré-empacotadas 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 o esquema e o conector no ambiente local

A etapa firebase init na seção anterior sincroniza os 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 o conector: as operações estão localizadas no diretório do projeto do Firebase, no diretório /dataconnect/connector/.

Fluxo local: entenda 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 trabalhar localmente e adicionar dados a uma tabela:

  1. Em schema.gql, clique no botão Add data 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: gerar SDKs

As operações de esquema e conector são sincronizadas localmente. Agora você pode usar ferramentas locais para gerar SDKs do cliente e começar a implementar chamadas para consultas e mutações em apps para iOS, Android, Web e Flutter.

  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: 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

  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 />);

Swift

  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()
    }
}

Kotlin para 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 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
      }
    }
  }
}

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:
    • 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 conheça mais ferramentas:

  • Adicione dados ao seu 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: