Projeto: app Dogglers

1. Antes de começar

Este codelab apresenta um novo app, chamado Dogglers, que você criará por conta própria. O codelab mostra os passos para concluir o projeto do app Dogglers, incluindo a configuração dele e os testes no Android Studio.

Este codelab é diferente dos outros deste curso. Ao contrário dos codelabs anteriores, o objetivo deste codelab não é fornecer um tutorial passo a passo sobre como criar um app. A ideia é configurar um projeto que será concluído de forma independente, com instruções sobre como concluir o app e verificar seu trabalho por conta própria.

Em vez do código da solução, fornecemos um conjunto de testes como parte do download do app. Você executará esses testes no Android Studio (mostraremos como fazer isso posteriormente neste codelab) e verá se o código é aprovado. Isso pode levar algumas tentativas. Até mesmo desenvolvedores profissionais raramente passam em todos os testes na primeira vez. Depois que seu código passar em todos os testes, considere o projeto como concluído.

Entendemos que talvez você queira apenas uma solução para conferir seu trabalho. Não fornecemos o código da solução deliberadamente, porque queremos que você pratique como é ser um desenvolvedor profissional. Isso pode exigir o uso de diferentes habilidades que você ainda não tem prática, como:

  • pesquisar no Google os termos, mensagens de erro e códigos do app que você não reconhece;
  • testar o código, ler erros e fazer mudanças no código para testá-lo novamente;
  • voltar ao conteúdo anterior nas Noções básicas do Android para atualizar o que você aprendeu;
  • comparar um código conhecido (ou seja, o fornecido no projeto ou o anterior da solução em outros apps da Unidade 2) com o que você está escrevendo.

Isso pode parecer complicado no início, mas temos 100% de certeza de que, se você concluiu a Unidade 2, já pode começar o projeto. Leve o tempo que precisar e não desista. Você consegue.

Pré-requisitos

  • Este projeto é destinado a usuários que concluíram a Unidade 2 do curso Princípios básicos do Android em Kotlin.

O que você criará

  • Você criará um app chamado Dogglers que exibe informações em uma RecyclerView usando as habilidades aprendidas na Unidade 2.

Pré-requisitos

  • Um computador com o Android Studio instalado.

2. Visão geral do app

Este é o projeto do app Dogglers.

No Google, chamamos carinhosamente nossos colegas de trabalho de Googlers. Como muitos Googlers têm animais de estimação, achamos que seria divertido criar um app chamado Dogglers para nossos amigos caninos. Sua tarefa é implementar o Dogglers, que mostra listas de rolagem com cães de estimação de Googlers, além de informações sobre cada um, como nome, idade, hobbies e uma foto. Neste projeto, você criará layouts para os itens do RecyclerView no app Dogglers e implementará um adaptador para que a lista de cachorros possa ser apresentada de três maneiras: por rolagem horizontal, rolagem vertical e grade de rolagem vertical.

Ao iniciar o app, você vai ter opções para layouts horizontais, verticais e de grade.

9e1186e8d2cff595.png

A primeira opção é uma visualização de reciclagem de rolagem vertical com itens que ocupam a largura total da tela.

dc2852940d6994e7.png

A segunda opção mostra a lista de cachorros em uma visualização de reciclagem de rolagem horizontal.

b959082c9491381d.png

A terceira opção mostra os cães em um layout de grade com rolagem vertical, em que dois deles são mostrados em cada linha.

438b19a77ecfaaba.png

Todos esses layouts usam a mesma classe de adaptador. Sua tarefa será criar os layouts dos cards de reciclagem e, em seguida, implementar o adaptador para que cada item seja preenchido com as informações de cada cachorro.

3. Primeiros passos

Fazer o download do código do projeto

O nome da pasta é android-basics-kotlin-dogglers-app. Selecione essa pasta ao abrir o projeto no Android Studio.

  1. Navegue até a página do repositório do GitHub fornecida para o projeto.
  2. Verifique se o nome da ramificação corresponde ao especificado no codelab. Por exemplo, na captura de tela a seguir, o nome da ramificação é main.

1e4c0d2c081a8fd2.png

  1. Na página do GitHub do projeto, clique no botão Code, que vai mostrar uma janela pop-up.

1debcf330fd04c7b.png

  1. Na janela pop-up, clique no botão Download ZIP para salvar o projeto no seu computador. Aguarde a conclusão do download.
  2. Localize o arquivo no computador, que provavelmente está na pasta Downloads.
  3. Clique duas vezes para descompactar o arquivo ZIP. Isso vai criar uma nova pasta com os arquivos do projeto.

Abrir o projeto no Android Studio

  1. Inicie o Android Studio.
  2. Na janela Welcome to Android Studio, clique em Open.

d8e9dbdeafe9038a.png

Observação: caso o Android Studio já esteja aberto, selecione a opção File > Open.

8d1fda7396afe8e5.png

  1. No navegador de arquivos, vá até a pasta descompactada do projeto, que provavelmente está na pasta Downloads.
  2. Clique duas vezes nessa pasta do projeto.
  3. Aguarde o Android Studio abrir o projeto.
  4. Clique no botão Run 8de56cba7583251f.png para criar e executar o app. Confira se ele é criado da forma esperada.

O projeto é organizado em pacotes separados. Embora a maioria das funcionalidades já esteja implementada, será necessário implementar o DogCardAdapter. Você também precisará modificar dois arquivos de layout. Outros arquivos são discutidos conforme necessário nas instruções abaixo.

c181caccdddc5c2e.png

Implementar o layout

Os layouts vertical e horizontal são idênticos. Portanto, você só precisa implementar um único arquivo de layout para ambos. O layout de grade exibe as mesmas informações, mas o nome, a idade e os hobbies do cachorro são empilhados verticalmente. Nesse caso, você precisará de um layout separado. Os dois layouts exigem quatro visualizações diferentes para exibir informações sobre cada cachorro.

  1. Uma ImageView com a foto do cachorro
  2. Uma TextView com o nome do cachorro
  3. Uma TextView com a idade do cachorro
  4. Uma TextView com os hobbies do cachorro

Você também perceberá um estilo em cada card mostrando uma borda e uma sombra. Isso é gerenciado pela MaterialCardView, já adicionada aos arquivos de layout no projeto inicial. Em cada MaterialCardView, há um ConstraintLayout em que você precisará adicionar as visualizações restantes.

Há dois arquivos XML com os quais você precisará trabalhar para implementar os layouts: vertical_horizontal_list_item.xml para os layouts horizontal e vertical e grid_list_item.xml para o layout de grade.

  1. Crie o layout de listas verticais e horizontais.

Abra vertical_horizontal_list_item.xml e, no ConstraintLayout interno, crie o layout para corresponder à imagem.

6464da5b34a739ed.png

  1. Crie o layout de grade.

Abra grid_list_item.xml e, no ConstraintLayout interno, crie o layout para corresponder à imagem.

dfa4b5f0acda0ec6.png

Implementar o adaptador

Após definir os layouts, a próxima tarefa é implementar o adaptador da RecyclerView. Abra DogCardAdapter.kt no pacote adapter. Você vai ver muitos comentários TODO, que ajudam a explicar o que é preciso implementar.

1bd9c8014cd1070e.png

Há cinco etapas para implementar o adaptador.

  1. Defina uma variável ou constante para a lista de dados sobre os cachorros. A lista pode ser encontrada no pacote data em um objeto chamado DataSource e tem esta aparência:
object DataSource {

   val dogs: List<Dog> = listOf( ...

}

A propriedade dogs é do tipo List<Dog>. A classe Dog é encontrada no pacote model e define quatro propriedades: uma imagem (representada por um ID do recurso) e três propriedades de String.

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

Defina a variável estabelecida no DogCardAdapter para a lista dogs no objeto DataSource.

  1. Implemente o DogCardViewHolder. O armazenador de visualização tem que vincular as quatro visualizações que precisam ser definidas para cada card de visualização de reciclagem. O mesmo armazenador de visualização será compartilhado com os layouts grid_list_item e vertical_horizontal_list_item, já que todas as visualizações são compartilhadas entre os dois layouts. O DogCardViewHolder precisa incluir propriedades para os seguintes IDs de visualização: dog_image, dog_name, dog_age e dog_hobbies.
  2. Em onCreateViewHolder(), é recomendado inflar o layout grid_list_item ou vertical_horizontal_list_item. Como saber qual layout usar? Na definição do adaptador, é possível ver que um valor chamado layout do tipo Int é transmitido ao criar uma instância do adaptador.
class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

Isso corresponde a um valor definido no objeto Layout, localizado no pacote const.

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

O valor do layout será 1, 2 ou 3, mas é possível compará-lo com os identificadores VERTICAL, HORIZONTAL e GRID do objeto Layout.

Para o layout GRID, infle o layout grid_list_item. Já para os layouts HORIZONTAL e VERTICAL, infle o layout vertical_horizontal_list_item. O método retornará uma instância DogCardViewHolder, que representa o layout inflado.

  1. Implemente getItemCount() para retornar o tamanho da lista de cachorros.
  2. Por fim, você precisa implementar onBindViewHolder() para definir os dados em cada card de visualização de reciclagem. Use a position para acessar os dados corretos do cachorro na lista, depois defina a imagem e o nome dele. Use os recursos de string, dog_age e dog_hobbies, para formatar a idade e os hobbies adequadamente.

Quando terminar de implementar o adaptador, execute o app no emulador para verificar se está tudo certo.

4. Testar o app

O projeto Dogglers contém um destino "androidTest" com vários casos de teste.

5a6691e43e85409d.png

Como executar os testes

Para executar os testes, escolha uma das seguintes opções:

Para um único caso de teste, abra uma classe de caso de teste e clique na seta verde à esquerda da declaração da classe. Em seguida, selecione a opção "Run" no menu. Isso vai executar todos os testes do caso.

a2be071431d93972.png

Na maioria das vezes, convém executar apenas um teste, por exemplo, se apenas um teste for reprovado e os outros forem aprovados. Você pode executar um único teste da mesma forma que faria com todo o caso de teste. Use a seta verde e selecione a opção Run.

4dbc8422f9d3551.png

Se você tiver vários casos de teste, também pode executar todo o conjunto deles. Assim como na execução do app, você encontra essa opção no menu Run.

be4b7b8805335082.png

O Android Studio usa como padrão o último destino que você executou (app, destinos de teste etc.). Portanto, se o menu ainda mostrar Run > Run 'app', você poderá executar o destino de teste selecionando Run > Run.

6d0de7b74787e91.png

Em seguida, escolha o destino do teste no menu pop-up.

c0d58fc64ea5c33d.png

Os resultados da execução dos testes vão aparecer na guia Run. No painel à esquerda, você verá uma lista de testes reprovados, se houver algum. Os testes reprovados são marcados com um ponto de exclamação vermelho ao lado do nome da função. Os testes aprovados são marcados com uma marca de seleção verde.

5c90c852965bbc3f.png

Se um teste for reprovado, o texto do resultado fornecerá informações para ajudar você a corrigir o problema.

31167a1fa7383f46.png

Por exemplo, na mensagem de erro acima, o teste está verificando se uma string contendo a palavra "Nox" é exibida. No entanto, o teste é reprovado. O texto não foi encontrado, o que significa que provavelmente ainda não está sendo exibido.