Prática: adicione um ViewModel ao Dessert Clicker

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

1. Antes de começar

Introdução

O Dessert Clicker funciona com dados e estado in-line. Neste exercício, você vai remover o estado, os dados e a lógica in-line da MainActivity e mover para um ViewModel.

Abstrair a lógica do app da visualização para um ViewModel é uma prática moderna de desenvolvimento do Android. Essa prática oferece os seguintes benefícios:

• O código fica mais legível para outros desenvolvedores.
• O código fica mais testável.
• Vários desenvolvedores podem trabalhar em um app de forma simultânea sem interferir no trabalho de outros.

O código da solução está disponível no final deste codelab, mas tente resolver os exercícios antes de conferir as respostas. Considere a solução como uma das maneiras de implementar o app.

Pré-requisitos

• Curso de Noções básicas do Android no Compose com o codelab ViewModel e estado no Compose

O que é necessário

• Um computador com acesso à Internet e o Android Studio instalado
• O código da solução para o app Dessert Clicker

O que você vai criar

Nestes exercícios, você vai melhorar a arquitetura do app Dessert Clicker adicionando um ViewModel para processar os dados e a lógica dele.

Os exercícios estão divididos em seções para concluir as etapas a seguir separadamente:

• Atualizar e adicionar as dependências necessárias.
• Criar uma classe ViewModel.

2. Fazer o download do código inicial

1. No Android Studio, abra a pasta basic-android-kotlin-compose-training-dessert-clicker.
2. Abra o código do app Dessert Clicker no Android Studio.

3. Configurar dependências

1. Adicione a seguinte variável ao arquivo build.gradle do projeto:

buildscript {
   ext {
       ...
       lifecycle_version = '2.5.1'
   }
}

2. Adicione a dependência abaixo ao arquivo app/build.gradle:

dependencies {
    ...implementation "androidx.lifecycle:lifecycle-viewmodel-compose:$lifecycle_version"
}

4. Criar uma classe de estado da interface

No momento, o elemento combinável DessertClickerApp() na MainActivity contém os dados e o estado que direcionam a IU.

Crie uma classe de dados com todos os dados necessários para a IU. Os dados dessa classe substituem os dados que o elemento combinável DessertClickerApp() gerencia.

5. Criar uma classe ViewModel

Crie uma classe ViewModel usando o componente ViewModel do Jetpack. Você vai usar o ViewModel para gerenciar o estado da UI.

6. Transferir a lógica e os dados do app para o ViewModel

Transfira a lógica da MainActivity para o ViewModel e disponibilize os dados do estado da IU usando a classe de estado da IU que você criou. Exclua toda a lógica de gerenciamento de dados e estados da MainActivity.

Tente realizar essa tarefa por conta própria. Se necessário, consulte o codelab ViewModel e estado no Compose para orientações.

7. Chamar o ViewModel

Use os dados e métodos fornecidos pelo ViewModel para direcionar a interface na MainActivity.

8. Código da solução