Começar a usar o Firebase Data Connect

Observação: o Firebase Data Connect está no Acesso antecipado. O Data Connect está sujeito aos "Termos das ofertas pré-GA" na seção Termos específicos de serviço dos Termos de Serviço do Google Cloud Platform. Os recursos pré-GA estão disponíveis "no estado em que se encontram" e podem ter suporte limitado. Para mais informações, consulte as descrições da fase de lançamento.

Neste guia de início rápido, você vai aprender a criar Firebase Data Connect no seu app.

Observação: siga este guia de início rápido se você quiser adicionar Data Connect a um dos seus projetos do Firebase no plano Blaze, criar um serviço Data Connect e provisionar um banco de dados do Cloud SQL para criar protótipos. Se você preferir usar o plano do Spark e criar protótipos localmente com um emulador e um banco de dados local, confira o começo do desenvolvimento local.

• Adicione Firebase Data Connect ao seu projeto do Firebase.
• 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:
  • Crie um esquema para um app de avaliação de filmes e implante na produção.
  • Defina consultas e mutações para seu esquema.
  • Gerar SDKs com tipagem forte e usá-los no seu app
  • Implante seu esquema, consulta e dados finais na produção.

Encontre um repositório de apps de início rápido e crie um app Data Connect com todos os recursos seguindo nosso codelab para Web. Os codelabs para Android e iOS serão lançados em breve.

Pré-requisitos

Para usar este guia de início rápido no seu ambiente local, você vai precisar do seguinte.

• Linux, macOS ou Windows
• Visual Studio Code

Conectar ao seu projeto do Firebase

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. Acesse a seção Data Connect do console Firebase e siga o fluxo de trabalho de configuração do produto.

3. 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.

4. Selecione um local para o banco de dados do CloudSQL para PostgreSQL.

5. Anote os nomes e os IDs do projeto, do serviço e do banco de dados para confirmar mais tarde.

6. 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 e configurar um ambiente de desenvolvimento

O Data Connect oferece suporte a duas experiências de desenvolvimento:

• Se você é um desenvolvedor de Kotlin Android, iOS, Flutter ou Web, use o desenvolvimento do VS Code para projetar e testar esquemas e operações localmente enquanto se conecta à sua instância do Cloud SQL para PostgreSQL.
• Se você é um desenvolvedor da Web, pode usar o Desenvolvimento de IDX para criar protótipos em um espaço de trabalho IDX usando um modelo IDX pré-configurado com PostgreSQL, a extensão VS Code com o emulador Data Connect e o código de cliente de início rápido configurado para você. Confira mais informações no site do Project IDX.

Este guia de início rápido se concentra no fluxo de desenvolvimento da extensão do VS Code. Para continuar:

1. Crie um novo diretório para seu projeto local.
2. Abra o VS Code no novo diretório.

3. Instale a extensão Firebase Data Connect no Visual Studio Code Marketplace.

   Observação: a extensão inclui a extensão de destaque de sintaxe GraphQL do marketplace. Outras extensões do GraphQL que você instalar podem entrar em conflito com o suporte ao GraphQL brindeado na extensão do Firebase Data Connect.

Configurar o projeto local

Observação: se você não estiver usando o IDX, siga as etapas desta seção.

Instale a CLI seguindo as instruções normais. Se o npm já estiver instalado, execute o seguinte comando:

npm install -g firebase-tools

Observação: se você estiver usando uma instalação de CLI, atualize para a versão mais recente.

Configurar o diretório do projeto

Para configurar seu projeto local, inicialize o diretório do projeto.

No painel à esquerda do VS Code, clique no ícone do Firebase para abrir a interface da extensão do Firebase 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.
4. Se o projeto estiver no plano Blaze, responda "Sim" à pergunta "Você quer configurar seus recursos de back-end agora?".

5. Clique no botão Start emulators.

   Observação: no terminal integrado, verifique se os emuladores configurados foram inicializados. Quando eles 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

Se você estiver usando a extensão do Firebase para o VS Code para trabalhar com seu banco de dados de produção, será necessário implantar seu esquema antes de continuar. Depois de implantar o esquema no banco de dados de produção, você poderá conferir o esquema no console.

Observação: o provisionamento da instância do Cloud SQL para PostgreSQL pode levar até 15 minutos. Não será possível implantar até que a instância esteja pronta. Antes de implantar seu esquema, confirme se o fluxo de configuração do Data Connect, incluindo o provisionamento do banco de dados, foi concluído usando o console Google Cloud.

1. Você pode usar a extensão do Data Connect para VS Code para implantar.
   • Na interface da extensão, no painel Firebase Data Connect, clique em Implantar na produção.
2. Talvez seja necessário analisar as mudanças no esquema e aprovar modificações potencialmente destrutivas. Você vai precisar:
   • Analisar as mudanças no esquema usando firebase dataconnect:sql:diff
   • Quando estiver tudo pronto, aplique as mudanças usando o fluxo iniciado por firebase dataconnect:sql:migrate.

Adicionar dados às tabelas

No painel do editor do VS Code, 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:

1. Em schema.gql, clique no botão Add data acima da declaração de tipo Movie.
   
2. No arquivo Movie_insert.gql gerado, codifique os dados dos quatro campos.
3. Clique no botão Run (Produção).
   
4. 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:

1. Em schema.gql, clique no botão Read data acima da declaração de tipo Movie.
2. 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: as 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 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.

Dica: use o Gemini no Firebase para criar e testar consultas GraphQL no console do Firebase. Saiba mais em Usar a assistência de IA para consultas e mutações.

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

Gerar SDKs e usá-los no seu app

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

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

   Observação: se você ainda não tem um diretório de app, crie e selecione um novo diretório para o código do SDK por enquanto e vincule-o ao app mais tarde.

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

Saiba como usar o SDK gerado para chamar consultas e mutações de apps clientes (Web, Android, iOS, Flutter).

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.

Se você usar a extensão do Firebase para o VS Code para implantar, 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ê poderá acessar 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

Próximas etapas

Revise o projeto implantado e conheça 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.