Começar a usar o Firebase Data Connect

Neste guia de início rápido, você aprenderá a:

  • Adicionar o Firebase Data Connect ao seu projeto do Firebase.
  • Configurar um ambiente de desenvolvimento, incluindo o Visual Studio Extensão de código para trabalhar com uma instância de produção.
  • Em seguida, mostraremos como:
    • Crie um esquema para um app de e-mails e implante na produção.
    • Defina consultas e mutações para o esquema.
    • Implante o protótipo final na produção.

Pré-requisitos

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

Adicionar o Data Connect ao seu projeto e criar uma fonte de dados

  1. Crie um projeto do Firebase, caso ainda não tenha feito isso.
    1. No Console do Firebase, clique em Adicionar projeto e siga as instruções na tela.
  2. Faça upgrade do seu projeto para o plano Blaze. Isso permite criar um bucket do Cloud SQL para a instância do PostgreSQL.

  3. Navegue até a seção "Conexão de dados" do Console do Firebase e siga o fluxo de trabalho de configuração do produto.

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

  5. Anote os nomes e IDs do projeto, serviço e 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 para prototipagem:

  • Se você for um desenvolvedor Kotlin para Android ou Web, poderá usar o VS Code desenvolvimento de software para prototipar esquemas e operações localmente enquanto se conecta a instância do Cloud SQL para PostgreSQL.
  • Se você é um desenvolvedor da Web, pode usar o IDX Development para criar protótipos em um espaço de trabalho do IDX usando um modelo IDX pré-configurado com o PostgreSQL, Extensão do VS Code com emulador do Data Connect e código do guia de início rápido configurar para você.

Desenvolvimento com VS Code

Se você prefere desenvolver localmente em vez de usar IDX, configure o Firebase VS Extensão de código para ajudar você a iterar seu desenvolvimento rapidamente.

  1. Crie um novo diretório para seu projeto local.
  2. Abra o VS Code no novo diretório.
  3. Faça o download da extensão, agrupada como um pacote VSIX, do Firebase Storage.

  4. No menu Exibir do VS Code, selecione Extensões.

  5. Na barra de título do painel Extensões, clique no ícone de menu. more_horiz e siga Instalar pelo VSIX...

.

Desenvolvimento com IDX

O IDX é um ambiente otimizado para o desenvolvimento de apps da Web. Se você é Desenvolvedor do Kotlin para Android, siga as etapas do guia do VS Code desenvolvimento.

Para configurar um modelo do Data Connect IDX:

  1. Acesse o modelo no site do Project IDX.
  2. Siga o fluxo de configuração.

Opcionalmente, você pode instalar um banco de dados PostgreSQL local para desenvolvimento local com o emulador do Data Connect. Essa configuração é abordada no final neste guia de início rápido.

Configurar seu projeto local

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

npm install -g firebase-tools

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

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 do interface da extensão de código.

Na interface da extensão do Firebase:

  1. Verifique se você fez login.
  2. Clique no botão Executar firebase init.
  3. Verifique a guia Terminal no painel inferior do VS Code para conferir os comandos.
  4. Selecione Data Connect como um recurso para usar neste diretório.
  5. Quando solicitado, forneça os IDs do projeto, do serviço e do banco de dados do projeto do Data Connect que você criou anteriormente no console.

Criar um esquema e uma consulta do Data Connect

Comece a usar o GraphQL para modelar usuários e e-mails. Você atualizará as fontes em:

  • /dataconnect/schema/schema.gql
  • /dataconnect/default-connector/queries.gql

Começar a desenvolver um esquema

No diretório do projeto do Firebase, anote a pasta dataconnect. Isso é em que você define o modelo de dados para um banco de dados do Cloud SQL usando o GraphQL.

No arquivo /dataconnect/schema/schema.gql, comece a definir um esquema que inclui usuários e e-mails.

Usuário

No Data Connect, os campos do GraphQL são mapeados para colunas. Os usuários têm um uid, name e o e-mail address. O Data Connect reconhece várias tipos de dados primitivos: String e Date;

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

# File `/dataconnect/schema/schema.gql`

type User @table(key: "uid") {
   uid: String!
   name: String!
   address: String!
}

Por padrão, o Firebase Data Connect adicionará uma chave UUID id se nenhuma for fornecidas. No entanto, neste caso, você quer que meu uid seja a chave primária, que usando a diretiva @table(key: "uid").

E-mail

Agora que você tem usuários, é possível modelar e-mails. Aqui você pode adicionar o tamanho (ou colunas) de dados de e-mail. Desta vez, omitimos a adição de uma chave primária porque você pode confiar no Data Connect para gerenciá-los.

# File `/dataconnect/schema/schema.gql`

type Email @table {
   subject: String!
   sent: Date!
   text: String!
   from: User!
}

O campo from é mapeado para um tipo de User. O Data Connect entende que essa é uma relação entre Email e User e gerenciará essa relação para você.

Implante o esquema na produção

Se você estiver usando a extensão do Firebase VS Code para trabalhar com sua de produção, implante o esquema antes de continuar. Depois implantar o esquema no banco de dados de produção, será possível o esquema no console.

  1. É possível usar a extensão do Firebase VS Code para implantar.
    • Na interface da extensão, no painel do Firebase Data Connect, clique em Implantar tudo.
  2. Talvez seja necessário revisar as alterações no esquema e aprovar imagens potencialmente destrutivas modificações. Será solicitado que você:
    • Revisar mudanças no esquema usando firebase dataconnect:sql:diff
    • Quando estiver satisfeito com as mudanças, aplique-as usando o fluxo iniciado firebase dataconnect:sql:migrate:

Executar mutações para adicionar dados às tabelas

No painel do editor do VS Code, é possível conferir os botões do CodeLens sobre o Tipos GraphQL em /dataconnect/schema/schema.gql. Como você implantou seu esquema para produção, é possível usar as opções Adicionar dados e Executar (produção) nos arquivos gerados resultantes para executar essas ações no seu back-end.

Para adicionar registros às tabelas User e Email:

  1. No schema.gql, clique no botão Adicionar dados acima do tipo User. declaração de serviço.
    Botão "Adicionar dados" do Code Lens para o Firebase Data Connect
  2. No arquivo User_insert.gql gerado, codifique os dados do três campos.
  3. Clique no botão Executar (produção).
    Botão "Executar" do Code Lens para o Firebase Data Connect
  4. Repita as etapas anteriores para adicionar um registro à tabela Email, fornecendo uid do usuário no campo fromUid, conforme solicitado Email_insert.

Escreva uma consulta para listar e-mails

Agora a parte divertida são as consultas. Como desenvolvedor, você está acostumado a escrever SQL em vez de consultas GraphQL, portanto, isso pode parecer um pouco diferente no começo. No entanto, o GraphQL é muito mais conciso e seguro do que o SQL bruto. E nosso VS Code facilita a experiência de desenvolvimento.

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

# File `/dataconnect/default-connector/queries.gql`

query ListEmails @auth(level: NO_ACCESS) {
  emails {
    id, subject, text, sent
    from {
      name
    }
  }
}

Execute a consulta usando o botão CodeLens próximo.

Um recurso muito interessante aqui é a capacidade de tratar as propriedades e relações como um gráfico. Como um e-mail tem um campo from que faz referência a uma Usuário, é possível aninhar no campo e receber informações sobre ele de volta.

Implantar seu protótipo completo para produção

Você trabalhou em uma iteração de desenvolvimento. Agora é possível implantar esquema, dados e consultas para o servidor com o Firebase interface de extensão ou a CLI do Firebase, assim como você fez com seu esquema.

Se você usar a extensão do Firebase VS Code para implantar, clique no botão Implantar tudo .

Após a implantação, você poderá conferir e executar operações no console . Seu serviço do Data Connect estará pronto para processar operações dos clientes. A instância do Cloud SQL para PostgreSQL será atualizada com o o esquema e os dados gerados finalmente implantados.

Instalar o PostgreSQL localmente (opcional)

Instalar o PostgreSQL localmente e integrá-lo ao emulador permite que você em um ambiente de desenvolvimento totalmente local.

Você pode instalar uma nova instância do PostgreSQL ou usar uma atual.

Instale o PostgreSQL

Instale o PostgreSQL versão 15.x seguindo as instruções para sua plataforma.

Observe o nome do host, a porta, o nome de usuário e a senha e os parâmetros relacionados gerados durante a sequência de instalação.

Para se conectar à instância do PostgreSQL, o emulador precisa:

  • Estes parâmetros de configuração
  • O nome do banco de dados do dataconnect.yaml e um nome inicializado na instância local.

Usar a instância local do PostgreSQL

Para usar uma instância local do PostgreSQL, atualize o Configurações do emulador do Data Connect.

firebase setup:emulators:dataconnect

Quando solicitado, insira a string de conexão do PostgreSQL neste formato: postgresql://postgresusername:postgrespassword@localhost:5432/postgresdatabase?sslmode=disable:

Para saber mais sobre a string de conexão, consulte Documentação do PostgreSQL.

Conectar-se à instância local do PostgreSQL

Com essa configuração concluída, para se conectar ao seu banco de dados local:

  1. No VS Code, no painel esquerdo, clique no ícone do Firebase para abrir interface da extensão do Firebase VS Code.
  2. Clique no botão Conectar ao PostgreSQL local.

Próximas etapas