Firebase is back at Cloud Next on April 9 - 11. Register now.

Esta página foi traduzida pela API Cloud Translation.

Começar a usar o Firebase Data Connect
bookmark_border Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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

Adicione Firebase Data Connect ao seu projeto do Firebase.
Provisione uma instância do Cloud SQL para seu app.
Configure um ambiente de desenvolvimento que inclua uma extensão do Visual Studio Code para trabalhar com uma instância de produção.
Em seguida, vamos mostrar como:
- Criar um esquema para um app de filmes
- Definir as consultas e mutações que serão usadas no app
- Teste suas consultas e mutações com dados de amostra
- Gerar SDKs com tipagem forte e usá-los no seu app
- Implante seu esquema, consultas e dados finais na nuvem.

Criar um projeto do Firebase e um banco de dados do Cloud SQL

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.
Acesse a seção Data Connect do console Firebase e siga o fluxo de trabalho de configuração do produto.
Faça upgrade do seu projeto para o plano Blaze. Isso permite que você crie uma instância do Cloud SQL para PostgreSQL.

Observação: embora você configure o faturamento no upgrade do Blaze, não vai ser cobrado pelo uso de Data Connect ou da configuração padrão do Cloud SQL para PostgreSQL durante a visualização.
Selecione um local para o banco de dados do Cloud SQL para PostgreSQL.

Observação: se você quiser usar chaves de criptografia gerenciadas pelo cliente (CMEK), escolha Usar instância do Cloud SQL e selecione um banco de dados do Cloud SQL com CMEK.
Anote os nomes e os IDs do projeto, do serviço e do banco de dados para confirmar mais tarde.
Siga o fluxo de configuração restante e clique em Concluído.

Observação: pode levar até 15 minutos para concluir o provisionamento do Cloud SQL para a instância do PostgreSQL. É possível confirmar se o fluxo de configuração do Data Connect, incluindo o provisionamento do banco de dados, foi concluído usando o console do Google Cloud.

Escolher um fluxo de desenvolvimento

O Data Connect oferece duas maneiras de instalar ferramentas de desenvolvimento.

Configurar o ambiente para desenvolvedores

Crie um novo diretório para seu projeto local.
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.

Observação: se você já tiver a versão para computador do VS Code instalada, o script vai abri-la automaticamente.
Observação: se o script falhar, use as etapas de instalação manual.

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

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:

Clique no botão Fazer login com o Google.
Clique no botão Conectar um projeto do Firebase e selecione o projeto que você criou anteriormente no console.
Clique no botão Run firebase init e conclua o fluxo.
Clique no botão Start emulators.

Observação: no terminal integrado, verifique se os emuladores configurados são inicializados. Quando estiverem em execução, a interface da extensão será atualizada com os detalhes do emulador.

criar um esquema

No diretório do projeto do Firebase, no arquivo /dataconnect/schema/schema.gql, comece a definir um esquema GraphQL que inclua filmes.

Filme

Em Data Connect, os campos do GraphQL são mapeados para colunas. O tipo Movie tem id, title, imageUrl e genre. Data Connect reconhece os tipos de dados primitivos String e UUID.

Copie o snippet a seguir ou remova a marca de comentário das linhas correspondentes no arquivo.

# 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
}

MovieMetadata

Agora que você tem filmes, é possível modelar os metadados deles.

Copie o snippet a seguir ou remova a marca de comentário das linhas correspondentes no arquivo.

# 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

Implantar o esquema na produção

Você precisa implantar seu esquema antes de continuar.

Na interface da extensão, no painel Firebase Data Connect, clique em Implantar na produção.

Depois de implantar o esquema no banco de dados de produção, você poderá visualizá-lo no console do Firebase.

Adicionar dados às 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. Como você implantou o esquema na produção, use os botões Add data e Run (Production) para adicionar dados ao seu banco de dados no back-end.

Para adicionar registros à tabela Movie:

Em schema.gql, clique no botão Add data acima da declaração de tipo Movie.
No arquivo Movie_insert.gql gerado, codifique os dados dos quatro campos.
Clique no botão Run (Produção).
Repita as etapas anteriores para adicionar um registro à tabela MovieMetadata, fornecendo o id do seu filme no campo movieId, conforme solicitado na mutação MovieMetadata_insert gerada.

Para verificar rapidamente se os dados foram adicionados:

Em schema.gql, clique no botão Read data acima da declaração de tipo Movie.
No arquivo Movie_read.gql resultante, clique no botão Run (Production) para executar a consulta.

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

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.

Comece a editar o arquivo /dataconnect/connector/queries.gql. Se você quiser receber todos os filmes, use uma consulta como esta.

# 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
  }
}

Execute a consulta usando o botão do CodeLens.

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

Gerar SDKs

Clique no botão Adicionar SDK ao app.
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.

Observação: se você ainda não tem um diretório de app, é possível criar e selecionar um novo diretório para o código do SDK por enquanto e vincular ao app mais tarde.
Selecione a plataforma do app e observe que o código do SDK é gerado imediatamente no diretório selecionado.

Implantar o esquema e a consulta na produção

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

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

Depois de implantar, acesse o console Firebase para verificar se o esquema, as operações e os dados foram enviados para a nuvem. Você pode conferir o esquema e executar as operações no console também. A instância do Cloud SQL para PostgreSQL será atualizada com o esquema e os dados gerados de implantação final.

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

Usar os SDKs para chamar sua consulta de um app

Agora que o esquema e a 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

Adicione o Firebase ao seu app da Web.

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

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

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

Adicione o Firebase ao seu app Android.

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

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

Adicione o Firebase ao seu app Flutter.
Instale a CLI do FlutterFire dart pub global activate flutterfire_cli.
Execute flutterfire configure.
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 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:
Saiba mais sobre o desenvolvimento de esquema, consulta e mutação.
Saiba como gerar SDKs de cliente e chamar consultas e mutações do código do cliente para Web, Android, iOS e Flutter.