Jetpack Compose: criando Deep links e testando o Navigation

Armazenando informações com o Saved State Handle - Apresentação

Olá, pessoal! Eu sou Alex Felipe, instrutor da Alura, e te desejo boas-vindas ao curso de Jetpack Compose: Criando Deep links e testando o Navigation.

Alex é um homem negro de pele clara, com cabelos raspados. Seus olhos são castanho-escuros. Está vestindo uma camisa preta lisa, usa brincos pequenos e redondos. Está sentado em uma cadeira gamer preta, com um microfone mais à frente do instrutor. Ao fundo, há uma parede na cor branca com uma luz gradiente azul do lado direito e roxa do lado esquerdo.

Nesse curso usaremos o Panucci, um projeto android que simula um aplicativo de restaurante. A partir dele, utilizaremos novas técnicas do Navigation como:

• Save State Handle
• Deep links
• Testes Automatizados

Essas são técnicas muito importantes, afinal elas proporcionam mais dinamismo no nosso aplicativo.

Podemos utilizar o Save State Handle quando encerramos um fluxo, como em uma finalização de pedido que precisamos indicar ao usuário que o pedido foi realizado, por exemplo.

Já, se precisarmos apresentar um conteúdo muito específico a partir de um link, podemos utilizar o Deep link.

Para garantir que tudo está funcionando podemos utilizar uma ferramenta do Navigation chamada testes automatizados. Ela é essencial para garantir o funcionamento de todo fluxo do aplicativo.

Para fazer esse curso você precisa saber a implementar o Navigation com o Compose. Para isso, indicamos o curso de Type Safety com Navigation, nele você pode aprender tudo o que é necessário para iniciar seus estudos.

Gostou do conteúdo? Te espero na primeira aula!

Armazenando informações com o Saved State Handle - Apresentando projeto

Antes de começarmos o curso, vamos apresentar as melhorias e mudanças que fizemos no projeto, que é uma continuação do curso de Type Safety.

Para entender as principais mudanças de código, acessamos o commit no GitHub.

Logo no início identificamos uma atualização na biblioteca de testes e abaixo a remoção de alguns imports.

No projeto anterior, no momento em que configuramos cada um dos destinos, como o checkoutScreen, mandávamos o controlador dentro dele e assim efetuávamos a navegação.

A mudança nessa versão do projeto é que elevamos o onPopBackStak para que nosso NavHost seja responsável. Dessa forma não precisamos mandar o controlador para cada um dos destinos, quem fica responsável por fazer a ação de navegação é o próprio controlador.

Essa mudança foi feita em todos os destinos, elevamos cada um desses eventos para que o controlador seja feito pelo NavHost.

Além disso, anteriormente, no próprio evento da tela indicávamos que iriamos fazer uma navegação. Com a atualização do código mantemos apenas a ação que a tela deve ter, ou seja, indicar que foi feito.

Assim, por exemplo, quando houver um clique em um produto, quem determinará se será uma navegação para uma tela ou outro lugar é o destino, configurado por meio do Type Safety e proporcionando melhoria na escrita e leitura do nosso código. Se clicarmos no arquivo PanucciNavHost.kt notamos que ele é o responsável por fazer a navegação de todos os destinos.

Fizemos a remoção de alguns imports do SampleData.kt e se analisarmos o fim do código encontramos indicações referentes a mudança no nome dos eventos, assim como ocorreu nos demais. A única diferença é que ele mostra as mudanças no código de tela.

A tela de destaques, que é a tela inicial, também teve modificações no viewModel. Criamos um código para gerar novos IDs para cada produto. Isso foi feito propositalmente para simular e testar que o acesso dos produtos por essa tela da falha.

Por fim, tivemos a atualização do plugin gradle para o android, pois estamos utilizando a versão atualizada Android Studio Flamingo | 2022.2 Beta 1.

Caso você queira entender essas mudanças de forma mais detalhada, recomendamos que você acesse o commit e analise todo o código.

Agora que você já sabe como nosso projeto está organizado, vamos começar a explorá-lo e adicionar novas funcionalidades.

Até a próxima aula!

Armazenando informações com o Saved State Handle - Analisando navegação do app

Agora que já entendemos as mudanças do nosso projeto, estamos quase prontos para fazer a primeira melhoria.

Antes disso, para que você entenda as mudanças que faremos, vamos apresentar uma situação muito comum que está acontecendo no nosso aplicativo.

Analisando situações de navegação do App

Primeiro acessamos a tela de pedidos. Em "Destaques do dia", clicamos no botão "Pedir", assim somos direcionados para a tela de pedidos.

Feito isso, ao chegar no momento final, ou seja, de efetuar o pedido clicando no botão "Pedir", o aplicativo atualiza e não indica o que aconteceu. Dessa forma não conseguimos saber se a ação deu certo ou se houve algum problema.

Em situações como essa é muito importante aplicarmos técnicas de melhoria para que o aplicativo garanta uma melhor experiência para o usuário.

Poderíamos solucionar esse problema criando, por exemplo, uma nova tela. Dessa forma, ao clicar no botão "Pedir", ela indicaria ao usuário as informações do pedido.

Porém, ao invés disso, utilizaremos um novo recurso. Por meio dele conseguiremos trafegar informações no nosso aplicativo e dessa forma, independente da tela, conseguiremos apresentar uma mensagem que indicará se o pedido foi realizado ou se houve algum problema.

Essa ferramenta é o Saved State Handle. Ele armazena informações simples em uma estrutura de chave-valor, possibilitando tanto armazenar como a recuperar partes do aplicativo.

Na próxima aula aprenderemos como funciona a implementação do Saved State Handle com o Navigation.

Sobre o curso Jetpack Compose: criando Deep links e testando o Navigation

O curso Jetpack Compose: criando Deep links e testando o Navigation possui 188 minutos de vídeos, em um total de 66 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Armazenando informações com o Saved State Handle
• Saved State Handle no ViewModel
• Navegando por Deep Links
• Criando testes para o Navigation
• Testando fluxos de navegação
• Testando o fluxo de navegação do app