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:

• Criar um esquema GraphQL para o Firebase Data Connect
• Gravar consultas e mutações
• Implementar a autenticação do usuário para proteger seus dados

Pré-requisitos

• Versão mais recente do Android Studio
• Emulador do Android com o 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 análise de filmes.
• Como gerar o SDK do Kotlin e usá-lo em um app Android.
• (Opcional) Como implantar um serviço do Data Connect para produção.

2. Configurar o projeto de exemplo

Criar um projeto do Firebase

1. Faça login no console do Firebase com sua Conta do Google.
2. No Console do Firebase, clique em "Adicionar projeto".
3. Insira um nome para seu projeto do Firebase (por exemplo, "Avaliação de filmes") e clique em "Continuar".
4. Talvez seja necessário ativar o Google Analytics. Para este codelab, sua seleção não importa.
5. Depois de aproximadamente um minuto, o projeto do Firebase estará pronto. Clique em Continuar.

Fazer o download do código

Execute o comando a seguir para clonar o código de exemplo 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 poderá fazer o download do código diretamente do GitHub.

Adicionar a 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 salvar. Em seguida, clique em "Próxima".

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 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 com tipagem forte.

Depois de executar o script, o VS Code será aberto 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, use as etapas de instalação manual abaixo.

Instalação manual

1. Instalar 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 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 do 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 anteriormente no console.

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

Configurar a geração do SDK

Depois de clicar no botão "Run 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 conectorId 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 significado de cada um deles:

• connectorId: um nome exclusivo para esse conector.
• outputDir: caminho em que o SDK do 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 Start emulators.

O emulador vai ser iniciado no terminal integrado. Se ele for iniciado corretamente, você verá uma saída semelhante a 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 as diretivas de esquema do 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 as interações do usuário, como avaliações e adição aos favoritos. Review conecta usuários a filmes, permitindo que o app mostre classificações e feedback gerados pelo usuário.

Tabela de usuários

O tipo de usuário define uma entidade de usuário que interage com filmes deixando avaliações ou adicionando filmes aos favoritos.

No VS Code, abra o arquivo dataconnect/schema/schema.gql e descomente (ou adicione) a 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 "Filme" 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 descomente (ou adicione) a 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 um-para-um com o tipo Movie. Ele inclui dados adicionais, como o diretor do filme.

No VS Code, abra o arquivo dataconnect/schema/schema.gql e descomente (ou adicione) a 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 "Avaliação" representa a entidade de avaliação e vincula os tipos "Usuário" e "Filme" 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 descomente (ou adicione) a 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 "Filme" e "Avaliação" é preenchido automaticamente com um UUID quando um novo registro é criado.

Inserir dados simulados

Com o esquema definido, agora você pode pré-preencher o banco de dados com dados fictícios para testes.

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 encontrar um botão "Run (local)" na parte de cima do arquivo. Clique aqui para inserir os dados fictícios do filme no banco de dados.

3. Verifique o terminal de execução da conexão de dados para confirmar se os dados foram adicionados.

Com os dados em vigor, siga para a próxima etapa e aprenda a 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) a consulta ListMovies:

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

Para testar a nova consulta, clique no botão "Run (local)" para executar a consulta no seu 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.

Ligar 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 um 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())
                }
            )
        }
    }
}

Execute o aplicativo

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

Quando o app for iniciado, você 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 deles.

Definir a consulta

No VS Code, abra o arquivo dataconnect/connector/queries.gql e remova a marca de comentário (ou adicione) a 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
      }
    }
  }
}

Ligar 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,
        )
    }
}

Execute o aplicativo

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 pode mostrar dados, é hora de adicionar novos dados dele. Para fazer isso com segurança, use o Firebase Authentication.

Para este codelab, o app usa a autenticação anônima para fazer login dos usuários, mas, 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 federado.

Definir a mutação

No VS Code, abra o arquivo dataconnect/connector/mutations.gql e remova a marca de comentário (ou adicione) a 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
    }
  )
}

Ligar 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)
  }
}

Execute o aplicativo

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ê sabe 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 realizar pesquisas de similaridade vetorial.

Opcional: implantar na produção

Até agora, esse app só usou os emuladores do Firebase. Se você quiser aprender a implantar esse app em um projeto real do Firebase, siga para a próxima etapa.

9. (Opcional) Implantar o app

Até agora, esse app foi totalmente local, e 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 na 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" nos provedores.

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

Implantar o esquema do Firebase Data Connect

Importante: se esta é a primeira vez que você implanta um esquema no projeto, esse processo vai criar uma instância do PostgreSQL do Cloud SQL, o que pode levar cerca de 15 minutos. Não será possível implantar 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 para o VS Code, clique em Deploy to production.
2. Talvez seja necessário analisar as mudanças no esquema e aprovar modificações potencialmente destrutivas. Você vai precisar:
   • 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

Sua instância do Cloud SQL para PostgreSQL será atualizada com o esquema e os dados finais implantados. É possível monitorar o status no Console do Firebase.

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