Criar com o Firebase Data Connect (Android)

1. Visão geral

Neste codelab, você vai integrar o Firebase Data Connect a um banco de dados do Cloud SQL para criar um app Android de avaliação de filmes. Você vai aprender a:

• Escrever um esquema GraphQL para o Firebase Data Connect
• Escrever consultas e mutações
• Implementar a autenticação de usuários para proteger seus dados

Pré-requisitos

• Versão mais recente do Android Studio
• Emulador Android com nível 23 da API ou mais recente

O que você vai aprender

• Como configurar o Firebase Data Connect com emuladores locais.
• Como projetar um esquema de dados usando o Data Connect e o GraphQL.
• Como escrever consultas e mutações para um app de resenhas de filmes.
• Como gerar o SDK Kotlin e usá-lo em um app Android.
• (Opcional) Como implantar um serviço do Data Connect na produção.

2. Configurar o projeto de amostra

Criar um projeto do Firebase

1. Faça login no console do Firebase usando sua Conta do Google.
2. Clique no botão para criar um projeto e insira um nome (por exemplo, Movie Review).
   
3. Clique em Continuar.
4. Se solicitado, leia e aceite os Termos do Firebase e clique em Continuar.
5. (Opcional) Ative a assistência de IA no console do Firebase (chamada de "Gemini no Firebase").
6. Neste codelab, você não precisa do Google Analytics. Portanto, desative a opção do Google Analytics.
7. Clique em Criar projeto, aguarde o provisionamento e clique em Continuar.

Fazer o download do código

Execute o comando a seguir para clonar o código de amostra deste codelab. Isso vai criar um diretório chamado codelab-dataconnect-android na sua máquina:

git clone https://github.com/firebaseextended/codelab-dataconnect-android.git

Se você não tiver o git na sua máquina, também é possível baixar o código diretamente do GitHub.

Adicionar configuração do Firebase

1. No console do Firebase, selecione "Visão geral do projeto" no painel de navegação à esquerda. Clique no botão "Android" para selecionar a plataforma. Quando um nome de pacote for solicitado, use com.google.firebase.example.dataconnect.
2. Clique em "Registrar app" e siga as instruções para fazer o download do arquivo google-services.json e movê-lo para o diretório app/ do código que você acabou de baixar. Depois clique em Avançar.

3. Configurar o Data Connect

Instalação

Instalação automática

Execute o seguinte comando no diretório codelab-dataconnect-android:

curl -sL https://firebase.tools/dataconnect | bash

Esse script tenta configurar o ambiente de desenvolvimento para você e iniciar um IDE baseado em navegador. Esse ambiente de desenvolvimento integrado oferece ferramentas, incluindo uma extensão do VS Code pré-agrupada, para ajudar você a gerenciar seu esquema e definir consultas e mutações a serem usadas no aplicativo, além de gerar SDKs fortemente tipados.

Depois de executar o script, o VS Code vai abrir automaticamente.

Observação: se você já tiver a versão para computador do VS Code instalada, o script vai abrir automaticamente. Se o script falhar, siga as etapas de instalação manual abaixo.

Instalação manual

1. Instale o Visual Studio Code
2. Instale o Node.js.
3. No VS Code, abra o diretório codelab-dataconnect-android.
4. Instale a extensão do Firebase Data Connect no Visual Studio Code Marketplace.

Inicializar o Data Connect no projeto

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

1. Clique no botão Fazer login com o Google. Uma janela do navegador será aberta. Siga as instruções para fazer login na extensão com sua Conta do Google.
2. Clique no botão Conectar um projeto do Firebase e selecione o projeto que você criou antes no console.

Clique no botão Executar firebase init e siga as etapas no terminal integrado.

Configurar a geração do SDK

Depois de clicar no botão "Executar firebase init", a extensão do Firebase Data Connect vai inicializar um diretório dataconnect/ para você.

No VS Code, abra o arquivo dataconnect/connector/connector.yaml para encontrar a configuração padrão. Para facilitar a visualização da geração de código neste codelab, mude o connectorId para movies e o pacote para com.google.firebase.example.dataconnect.generated:

connectorId: movies
generate:
  kotlinSdk:
    outputDir: ../../app/src/main/java
    package: com.google.firebase.example.dataconnect.generated

Para entender o que cada uma delas significa:

• connectorId: um nome exclusivo para este conector.
• outputDir: caminho onde o SDK Data Connect gerado será armazenado. Esse caminho é relativo ao diretório que contém o arquivo connector.yaml.
• package: o nome do pacote a ser usado no SDK gerado.

Iniciar os emuladores do Firebase

No VS Code, clique no botão Iniciar emuladores.

O emulador vai começar no terminal integrado. Se ele iniciar corretamente, você verá uma saída como esta:

Configurar o app Android para usar o emulador local

1. Abra o Android Studio.
2. Na tela de boas-vindas do Android Studio, clique no botão "Open" e selecione o diretório codelab-dataconnect-android. Aguarde a sincronização do Gradle.
3. Quando a sincronização do Gradle for concluída, abra o arquivo app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt e chame useEmulator():

import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.instance

class MainActivity : ComponentActivity() {
  ...

  // Initialize Firebase Data Connect
  MoviesConnector.instance.dataConnect.useEmulator("10.0.2.2", 9399)

  ...
}

4. Definir o esquema e pré-preencher o banco de dados

Nesta seção, você vai definir a estrutura e as relações entre as principais entidades do aplicativo de filmes em um esquema. Entidades como Movie, User e Review são mapeadas para tabelas de banco de dados, com relacionamentos estabelecidos usando o Firebase Data Connect e diretivas de esquema GraphQL.

Entidades e relacionamentos principais

O tipo Movie contém detalhes importantes, como título, gênero e tags, que o app usa para pesquisas e perfis de filmes. O tipo User rastreia interações do usuário, como avaliações e favoritos. O Review conecta os usuários a filmes, permitindo que o app mostre classificações e feedback gerados pelos usuários.

Tabela de usuários

O tipo "User" define uma entidade de usuário que interage com filmes deixando avaliações ou marcando filmes como favoritos.

No VS Code, abra o arquivo dataconnect/schema/schema.gql e remova o comentário (ou adicione) da definição da tabela User:

# Users
# Suppose a user can leave reviews for movies
# user  -> reviews is a one to many relationship,
# movie -> reviews is a one to many relationship
# movie <-> user is a many to many relationship
type User @table {
  id: String! @col(name: "user_auth")
  username: String! @col(name: "username", dataType: "varchar(50)")
  # The following are generated by the user: User! field in the Review table
  # reviews_on_user 
  # movies_via_Review
}

Tabela de filmes

O tipo "Movie" define a estrutura principal de uma entidade de filme, incluindo campos como título, gênero, ano de lançamento e classificação.

No VS Code, abra o arquivo dataconnect/schema/schema.gql e remova o comentário (ou adicione) da definição da tabela Movie:

# Movies
type Movie @table {
  # The below parameter values are generated by default with @table, and can be edited manually.
  # implies directive `@col(name: "movie_id")`, generating a column name
  id: UUID! @default(expr: "uuidV4()")
  title: String!
  imageUrl: String!
  genre: String
}

Tabela MovieMetadata

O tipo MovieMetadata estabelece uma relação individual com o tipo Movie. Ele inclui outros dados, como o diretor do filme.

No VS Code, abra o arquivo dataconnect/schema/schema.gql e remova o comentário (ou adicione) da definição da tabela MovieMetadata:

# Movie - MovieMetadata is a one-to-one relationship
type MovieMetadata @table {
  # @unique indicates a 1-1 relationship
  movie: Movie! @unique 
  # movieId: UUID <- this is created by the above reference
  rating: Float
  releaseYear: Int
  description: String
}

Tabela de revisão

O tipo "Review" representa a entidade de avaliação e vincula os tipos "User" e "Movie" em uma relação de muitos para muitos (um usuário pode deixar muitas avaliações, e cada filme pode ter muitas avaliações).

No VS Code, abra o arquivo dataconnect/schema/schema.gql e remova o comentário (ou adicione) da definição da tabela Review:

# Reviews
type Review @table(name: "Reviews", key: ["movie", "user"]) {
  id: UUID! @default(expr: "uuidV4()")
  user: User!
  movie: Movie!
  rating: Int
  reviewText: String
  reviewDate: Date! @default(expr: "request.time")
}

Campos e padrões gerados automaticamente

O esquema usa expressões como @default(expr: "uuidV4()") para gerar automaticamente IDs e carimbos de data/hora exclusivos. Por exemplo, o campo "id" nos tipos "Movie" e "Review" é preenchido automaticamente com um UUID quando um novo registro é criado.

Inserir dados simulados

Com o esquema definido, agora é possível pré-preencher o banco de dados com dados simulados para teste.

1. No VS Code, abra dataconnect/moviedata_insert.gql. Verifique se os emuladores na extensão do Firebase Data Connect estão em execução.
2. Você vai ver um botão "Executar (local)" na parte de cima do arquivo. Clique aqui para inserir os dados simulados de filmes no banco de dados.

3. Verifique o terminal de execução do Data Connect para confirmar se os dados foram adicionados corretamente.

Com os dados no lugar, siga para a próxima etapa e saiba como criar consultas no Data Connect.

5. Criar uma consulta para listar filmes

Comece criando uma consulta para listar filmes. Para cada filme, você vai buscar o ID, o título, o imageUrl e o gênero.

Definir a consulta

No VS Code, abra o arquivo dataconnect/connector/queries.gql e remova a marca de comentário (ou adicione) da consulta ListMovies:

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

Para testar a nova consulta, clique no botão "Executar (local)" para executar a consulta no banco de dados local. A lista de filmes do banco de dados vai aparecer na seção "result" do terminal de execução do Data Connect.

Chame-o do app Android

Agora que você testou a consulta no emulador do Data Connect, é hora de adicioná-la ao app.

No Android Studio, abra o arquivo app/src/main/java/com/google/firebase/example/dataconnect/MoviesScreen.kt e adicione o seguinte código para mostrar a lista de filmes em formato de grade:

import com.google.firebase.example.dataconnect.generated.ListMoviesQuery
import com.google.firebase.example.dataconnect.generated.MoviesConnector
import com.google.firebase.example.dataconnect.generated.execute
import com.google.firebase.example.dataconnect.generated.instance

@Composable
fun MoviesScreen(
    onMovieClicked: (id: String) -> Unit
) {
    var movies by remember { mutableStateOf(emptyList<ListMoviesQuery.Data.MoviesItem>()) }
    LaunchedEffect(Unit) {
        // Queries need to be executed in a coroutine context
        try {
          movies = MoviesConnector.instance.listMovies.execute().data.movies
        } catch (e: Exception) {
          // Will be done at a later step
        }
    }
    LazyVerticalGrid(GridCells.Adaptive(150.dp)) {
        items(movies) { movie ->
            MovieCard(
                movieId = movie.id.toString(),
                movieTitle = movie.title,
                movieImageUrl = movie.imageUrl,
                movieGenre = movie.genre,
                onMovieClicked = {
                    onMovieClicked(movie.id.toString())
                }
            )
        }
    }
}

Executar o app

No Android Studio, clique no botão "Run" para iniciar o app no emulador do Android.

Quando o app for iniciado, você vai ver uma tela como esta:

6. Criar a consulta de detalhes do filme

Agora que o app pode listar filmes, vamos criar uma consulta para mostrar os detalhes de cada um.

Definir a consulta

No VS Code, abra o arquivo dataconnect/connector/queries.gql e remova a marca de comentário (ou adicione) da consulta GetMovieById:

# Get movie by id
query GetMovieById($id: UUID!) @auth(level: PUBLIC) {
  movie(id: $id) {
    id
    title
    imageUrl
    genre
    metadata: movieMetadata_on_movie {
      rating
      releaseYear
      description
    }
    reviews: reviews_on_movie {
      id
      reviewText
      reviewDate
      rating
      user {
        id
        username
      }
    }
  }
}

Chame-o do app Android

No Android Studio, abra o arquivo app/src/main/java/com/google/firebase/example/dataconnect/MovieDetailScreen.kt e adicione o seguinte código:

importcom.google.firebase.example.dataconnect.generated.GetMovieByIdQuery
importcom.google.firebase.example.dataconnect.generated.MoviesConnector
importcom.google.firebase.example.dataconnect.generated.execute
importcom.google.firebase.example.dataconnect.generated.instance

@Composable
fun MovieDetailScreen(
    movieId: String
) {
    var movie by remember { mutableStateOf<GetMovieByIdQuery.Data.Movie?>(null) }
    LaunchedEffect(Unit) {
        movie = MoviesConnector.instance.getMovieById.execute(
            UUID.fromString(movieId)
        ).data.movie
    }
    if (movie == null) {
        LoadingScreen()
    } else {
        MovieDetails(
            movieTitle = movie!!.title,
            movieImageUrl = movie!!.imageUrl,
            movieGenre = movie!!.genre,
            movieRating = movie!!.metadata?.rating,
            movieReleaseYear = movie!!.metadata?.releaseYear,
            movieDescription = movie!!.metadata?.description,
        )
    }
}

Executar o app

No Android Studio, clique no botão "Run" para iniciar o app no emulador do Android.

7. Criar uma mutação para inserir usuários

Agora que o app consegue mostrar dados, é hora de adicionar novos dados dele. Para fazer isso com segurança, use o Firebase Authentication.

Para fins deste codelab, o app usa a autenticação anônima para fazer login dos usuários. No entanto, para um app mais seguro, considere usar um método de autenticação diferente, como autenticação por e-mail/senha ou um provedor de identidade federada.

Definir a mutação

No VS Code, abra o arquivo dataconnect/connector/mutations.gql e remova a marca de comentário (ou adicione) da consulta UpsertUser:

# Upsert (update or insert) a user's username based on their auth.uid
mutation UpsertUser($username: String!) @auth(level: USER) {
  user_upsert(
    data: {
      id_expr: "auth.uid"
      username: $username
    }
  )
}

Chame-o do app Android

No Android Studio, abra o arquivo app/src/main/java/com/google/firebase/example/dataconnect/MainActivity.kt e chame a mutação:

import com.google.firebase.example.dataconnect.generated.execute

LaunchedEffect(Unit) {
  // If there's no user signed in, sign in an anonymous user
  if (firebaseAuth.currentUser == null) {
    firebaseAuth.signInAnonymously().await()
    val newUsername = getRandomUsername()
    MoviesConnector.instance.upsertUser.execute(newUsername)
  }
}

Executar o app

No Android Studio, clique no botão "Run" para iniciar o app no emulador do Android.

8. Parabéns

Parabéns! Você adicionou o Firebase Data Connect a um app Android.

Agora você conhece as principais etapas necessárias para configurar o Data Connect, criar consultas e mutações e processar a autenticação do usuário.

A seguir

• Saiba mais sobre preços
• Saiba mais sobre como proteger operações
• Implantar na produção (próxima seção)
• Saiba como fazer uma pesquisa de similaridade vetorial.

Opcional: implante na produção

Até agora, este app só usou os emuladores do Firebase. Se quiser saber como implantar esse app em um projeto real do Firebase, continue para a próxima etapa.

9. (Opcional) Implante o app

Até agora, este app foi totalmente local. Todos os dados estão contidos no Pacote de emuladores do Firebase. Nesta seção, você vai aprender a configurar seu projeto do Firebase para que o app funcione em produção.

Ativar o Firebase Authentication

No console do Firebase, acesse a seção "Autenticação" e clique em "Começar". Acesse a guia "Método de login" e selecione a opção "Login anônimo" em "Provedores".

Ative o método de login anônimo e clique em "Salvar".

Implantar o esquema do Firebase Data Connect

Importante: se esta for a primeira vez que você implanta um esquema no seu projeto, esse processo vai criar uma instância do Cloud SQL PostgreSQL, o que pode levar cerca de 15 minutos. Não será possível fazer a implantação até que a instância do Cloud SQL esteja pronta e integrada ao Firebase Data Connect.

1. Na interface da extensão do Firebase Data Connect no VS Code, clique em Implantar na produção.
2. Talvez seja necessário analisar as mudanças de esquema e aprovar modificações potencialmente destrutivas. Você vai precisar:
   • Analisar as mudanças de esquema usando firebase dataconnect:sql:diff
   • Quando estiver tudo pronto, aplique as mudanças usando o fluxo iniciado por firebase dataconnect:sql:migrate.

Sua instância do Cloud SQL para PostgreSQL será atualizada com o esquema e os dados finais implantados. Você pode monitorar o status no console do Firebase.

Agora você pode clicar em "Executar (produção)" no painel "Firebase Data Connect", assim como fez com os emuladores locais, para adicionar dados ao ambiente de produção.