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

  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.

  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.

Escolher um fluxo de desenvolvimento

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

Configurar o ambiente para desenvolvedores

  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'

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.

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:

  1. Em schema.gql, clique no botão Add data acima da declaração de tipo Movie.
    Botão &quot;Adicionar dados&quot; da lente do código para o Firebase Data Connect
  2. No arquivo Movie_insert.gql gerado, codifique os dados dos quatro campos.
  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 à 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.

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

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.

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ê poderá acessar o esquema e executar suas 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: