Começar a usar o Firebase Data Connect localmente

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

  • 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 local.
  • 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 em um emulador local
    • Gerar SDKs com tipagem forte e usá-los no seu app
    • Implante seu esquema, consultas e dados finais na nuvem (opcional, com um upgrade do plano Blaze).

Escolher um fluxo de desenvolvimento local

O Data Connect oferece duas maneiras de instalar ferramentas de desenvolvimento e trabalhar localmente.

Pré-requisitos

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

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

  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 do GraphQL sobre filmes.

Filme

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

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

# By default, a UUID id key will be created by default as primary key.
# If you want to specify a primary key, say title, which you can do through
# the @table(key: "title") directive
type Movie @table {
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

MovieMetadata

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

Adicionar dados às tabelas

No painel do editor do ambiente de desenvolvimento integrado, os botões do CodeLens vão aparecer sobre os tipos do GraphQL em /dataconnect/schema/schema.gql. Use os botões Adicionar dados e Executar (local) para adicionar dados ao seu banco de dados local.

Para adicionar registros às tabelas Movie e MovieMetadata:

  1. Em schema.gql, clique no botão Add data acima da declaração de tipo Movie.
    Botão &quot;Adicionar dados&quot; do CodeLens para o Firebase Data Connect
  2. No arquivo Movie_insert.gql gerado, codifique os dados dos três campos.
  3. Clique no botão Run (Local).
    Botão &quot;Run&quot; do CodeLens 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 (Local) para executar a consulta.

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

Definir a consulta

Agora a parte divertida: vamos definir as consultas necessárias no seu aplicativo. 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.

Um recurso muito interessante é a capacidade de tratar as relações do banco de dados como um gráfico. Como um registro MovieMetadata tem um campo movie que faz referência a um filme, é possível aninhar no campo e receber informações sobre as informações do filme. Tente adicionar o tipo gerado movieMetadata_on_movie à consulta ListMovies.

query ListMovies @auth(level: PUBLIC) {
  movies {
    id
    title
    imageUrl
    genre
    movieMetadata_on_movie {
        rating
    }
  }
}

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

Gerar SDKs e usá-los no seu app

No painel esquerdo do ambiente de desenvolvimento integrado, clique no ícone do Firebase para abrir a interface da extensão do Data Connect no VS Code:

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

Implantar o esquema e a consulta na produção

Depois de configurar localmente o app, você pode implantar o esquema, os dados e as consultas na nuvem. Você vai precisar do plano Blaze para configurar uma instância do Cloud SQL.

  1. Navegue até a seção "Conexão de dados" do console Firebase e crie uma instância de teste do Cloud SQL.

  2. No Terminal integrado do ambiente de desenvolvimento integrado (IDE, na sigla em inglês), execute firebase init dataconnect e selecione o ID da região/serviço que você acabou de criar no console.

  3. Selecione "Y" quando for solicitado "O arquivo dataconnect/dataconnect.yaml já existe. Quer substituir?".

  4. Na interface da extensão do VS Code, clique no botão Deploy to production.

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

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: