Começar a usar o Firebase Data Connect

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

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

Pré-requisitos

Para usar este guia de início rápido no seu ambiente local, você precisará dos itens a seguir.

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.

  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 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 do Firebase Data Connect no Marketplace do Visual Studio Code.

Configurar o projeto local

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

npm install -g firebase-tools

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.

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.

  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 revisar as alterações de esquema e aprovar modificações potencialmente destrutivas. Você vai precisar fazer o seguinte:
    • 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 seu esquema na produção, é possível usar os botões Adicionar dados e Executar (produção) para adicionar dados ao 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 de 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 os dados foram adicionados:

  1. Em schema.gql, clique no botão Ler dados 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 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 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á.

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

Implante 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 VS Code para implantar, clique no botão Implantar na produção.

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

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: