Começar a usar o Firebase Data Connect localmente

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

  • 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, é necessário ter o plano Blaze).

Pré-requisitos

Para usar este guia de início rápido, você precisa do seguinte:

Configurar o ambiente para desenvolvedores

Você vai precisar do Visual Studio Code para gerenciar o esquema e definir as consultas. que será usado em seu aplicativo, e um SDK fortemente tipado será geradas automaticamente para você:

  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.

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 Data Connect do 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 em questão. que criamos anteriormente no console.
  3. Clique no botão Executar o 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 primitivos tipos de dados: 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 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 VS Code, vão aparecer botões do CodeLens sobre o Tipos GraphQL em /dataconnect/schema/schema.gql. Use o botão Adicionar dados e Run (Local) adicionam dados ao seu banco de dados local.

Para adicionar registros às tabelas Movie e MovieMetadata:

  1. No schema.gql, clique no botão Adicionar dados acima do tipo Movie. declaração de serviço.
    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 do três campos.
  3. Clique no botão Run (Local).
    Botão &quot;Executar&quot; do Code Lens para o Firebase Data Connect
  4. Repita as etapas anteriores para adicionar um registro à tabela MovieMetadata. fornecendo o uid do filme no campo movie, conforme solicitado no gerada por uma mutação MovieMetadata_insert.

Para verificar rapidamente se os dados foram adicionados:

  1. Em schema.gql, clique no botão Ler dados.
  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 que você precisará em 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 CodeLens próximo.

Um recurso muito interessante aqui é a capacidade de tratar as propriedades e relações como um gráfico. Como um MovieMetadata tem um campo movie que faz referência a um filme, você pode aninhar no campo e obter informações sobre o informações do filme. Tente adicionar o tipo gerado movieMetadata_on_movie ao 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 app

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

  1. Clique no botão Add SDK to 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 sua plataforma de aplicativos e observe que o código do SDK é imediatamente gerado no diretório selecionado.

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

Implantar o esquema e a consulta na produção

Depois de configurar o local no app, é possível implantar o esquema, dados e consultas para a nuvem. Você vai precisar do plano Blaze para configurar uma instância do Cloud SQL.

  1. Navegue até a seção Data Connect do console do Firebase e crie uma instância de teste sem custo financeiro do Cloud SQL.

  2. No Terminal integrado ao VS Code, execute o comando firebase init dataconnect e Selecione o ID da região/serviço que você acabou de criar no console.

  3. Selecione Y quando a mensagem "File dataconnect/dataconnect.yaml já" for exibida existe, Substituir?".

  4. Na interface da extensão do Data Connect no 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 a versão final o esquema e os dados gerados foram implantados.

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.

Confira mais informações na documentação. Por exemplo, como você concluiu o guia de início rápido: