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, chame 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 em Firebase para ajudar você a usar suas entradas de linguagem natural para definir uma mutação do GraphQL para atualizar uma das suas 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 aparecer, 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 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 a mutação, os dados são gravados na tabela aplicável no 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 os filmes, é possível modelar os metadados deles.

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 que contenha 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 '@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 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: