0

[Pokédex] Como desenvolvi meu primeiro aplicativo para Android utilizando Kotlin.

Rafael Cagliari
Rafael Cagliari

Deixar a zona de conforto dos tutoriais pode ser intimidador, mas também muito recompensador. Pensando nisso decidi relatar a minha experiência desenvolvendo meu primeiro aplicativo Android por conta própria, uma simples Pokédex.

Durante o período de desenvolvimento deste app eu estava no meio do Bootcamp everis Kotlin Developer, além do curso ‘Android Basics in Kotlin’ do Google (https://developer.android.com/courses/android-basics-kotlin/course?hl=pt).


Segue uma dica muito importante que me foi passada: escolha um projeto que você goste, algo que você irá querer mostrar para todos os seus amigos quando terminar. Isso é fundamental para se manter motivado, afinal você irá passar horas trabalhando neste projeto pessoal. Pensando nisso resolvi construir uma Pokédex para Android. Para aqueles que não tiveram infância, a Pokédex é um aparelho utilizado no desenho e nos jogos da série Pokémon para registrar os monstrinhos de bolso e acessar suas características.




Primeiro passo: Obtenção dos dados dos pokémons


O objetivo do app é mostrar uma lista com todos os 151 primeiros Pokémons da série, bem como suas características, dessa forma surgiu o primeiro desafio do projeto: obter os dados de alguma fonte.

Convencionalmente, é feita uma requisição destes dados por meio de uma API, entretanto para fins de simplicidade decidi baixar um arquivo JSON (https://github.com/Biuni/PokemonGO-Pokedex/blob/master/pokedex.json) e adiciona-lo diretamente ao projeto em app\assets


Arquivo JSON já adicionado ao projeto foi colocado dentro da pasta assets.


Fiz algumas alterações, ajustando o modelo do response, como por exemplo, adicionando uma nova propriedade ao JSON chamada desc para descrição. Em seguida, realizei o mapeamento do JSON, isto é, converti o response em objetos, representados por classes contendo as propriedades presentes no arquivo JSON (peso, id, nome, etc). Existem diversas ferramentas online para esta tarefa, dando mais praticidade ao desenvolvimento, como por exemplo: https://www.json2kotlin.com/.


Classe que representa o item Pokémon do response encontrado no arquivo JSON


Dentre as classes mapeadas temos: “Next Evolution” e “Previous Evolution”, que representam a parte do response do JSON que contém dados sobre os nomes e condições necessárias para a evolução de um Pokémon.


Classe NextEvolution, contendo as informações das próximas evoluções do Pokémon.


Para realizar a conversão de JSON para Objetos ,usei a biblioteca GSON. Para a leitura do JSON e conversão com o GSON, foi criado o seguinte código:



A função gsonFromJson( ) é responsável por fazer o parse do arquivo JSON, ou seja, a leitura do arquivo que está em app\assets e retornar uma String. Esse retorno é utilizado pela função gsonFromJson( ) e vai ser convertido em um objeto do tipo PokemonResponse, que consiste de uma lista de 151 objetos do tipo Pokemon.



Segundo passo: U.I - Lista de Pokémons e navegação


Lista dos 151 Pokémons utilizando RecyclerView


Até o momento criei uma lista com todos os Pokémons e seus dados em forma de objeto, agora irei popular a tela com eles.


Para a UI (interface do usuário) foram utilizados dois fragments, um para a lista de Pokémons e outro para a tela de detalhes. Para a primeira tela implementei um RecyclerView, definido pela documentação do Android como: [uma ferramenta que] “facilita e torna eficiente a exibição de grandes conjuntos de dados. Você fornece os dados e define a aparência de cada item, e a biblioteca RecyclerView, quando necessário, cria os elementos dinamicamente”.


Estes elementos exibidos pelo RecyclerView são os ViewHolders, que são criados sem dados associados, tendo então informações vinculadas através dos métodos da classe Adapter. Uma vez que deixar a tela, o ViewHolder terá seus dados desvinculados e ficará novamente “em branco”, sendo reciclado ao ser eventualmente chamado novamente pelo RecyclerView e recebendo novos dados conforme o usuário rolar a tela.

Ao declarar uma RecyclerView também é preciso associar um LayoutManager à mesma, que irá ditar a distribuição dos itens na tela (se ficarão na vertical ou horizontal). Um esquema simplificado aparece abaixo.



Nesta tela do app o ViewHolder vazio infla o layout “pokemon_item.xml”, que possui espaço para uma foto do Pokémon, id, nome e seu tipo (água, fogo, elétrico, etc), sendo preenchido com as propriedades do objeto Pokémon através de métodos da classe Adapter.

Na imagem abaixo a classe PokemonAdapter recebe uma lista de 151 objetos Pokémon , o ViewHolder faz referência ao layout “pokemon_item.xml” que foi definido no método onCreateViewHolder( ) e a função onBindViewHolder( ) associa o objeto pela posição ao ViewHolder.


Processoa de associação entre objeto/posição do ViewHolder pela classe Adapter.


Para o carregamento da imagem do Pokémon, bem como das demais imagens do app, utilizei a biblioteca Picasso, utilizada para o download e caching de imagens no Android. O link a ser carregado está presente na propriedade “img”.


A biblioteca Picasso carrega a imagem através do link atribuído à propriedade “img” do objeto pokemon.


Caso o usuário queira ver mais detalhes sobre uma criatura em específico (peso, descrição, evoluções, etc), ele deve clicar na foto do Pokémon, sendo direcionado a uma nova tela com maiores informações.

Para isto, utilizei o Navigation Component do Android, que gera automaticamente uma classe directions, para o fragmento da lista de Pokémons, a PokemonListFragmentDirections, contendo métodos para cada ação definida no destino de origem, neste caso apenas o fragment de detalhes.

O Navigation Component também permite transferir dados entre destinos através do Safe Args. Aproveitando esta funcionalidade, defini diversas propriedades para serem enviadas ao fragment de detalhes do Pokémon.


Passando propriedades como peso, nome e fraquezas por meio da classe PokemonListFragmentDirections pelo Safe Args.



Terceiro Passo: U.I — Tela de Detalhes


A tela de detalhes foi inspirada na estética dos jogos da série para GameBoy, utilizando imagens de sprites dos jogos. Além disso, ao navegar para este fragmento, o som original daquele Pokémon (nos jogos chamado de cry) é executado, igual ao presente no Gameboy. Por exemplo, este é o arquivo .mp3 executado para o cry do Charizard ao checar seus detalhes: https://play.pokemonshowdown.com/audio/cries/charizard.mp3.


Tela de detalhes do Pokémon, mostrando nome, id, peso, altura, descrição, tipos, fraquezas e árvore evolutiva.


Os dados transmitidos da tela anterior pelo Safe Args são acessados através de uma classe criada no destino de recebimento, a classe recebe o nome do destino + “Args”, neste caso PokemonDetailsFragmentArgs. Os argumentos são acessados através do uso da delegação de propriedade by navArgs( ).


A tela de detalhes do Pokémon é populada utilizando os dados transmitidos pelo Safe Args.


Os sprites dos pokémons foram carregados pelo Picasso a partir do site Pokémon Database (https://img.pokemondb.net/sprites/lets-go-pikachu-eevee/normal/charizard.png), substituindo o nome do Pokémon pela propriedade recebida via args.


Usando o Picasso para carregar as imagens dos sprites.


Para reproduzir o cry utilizei a mesma estratégia, a partir dos arquivos .mp3 do site Pokémon Showdown, carregados pela classe MediaPlayer( ).





Pokédex finalizada.


Este é o resultado final do projeto. O código completo está disponível no GitHub (https://github.com/rafael-cagliari/pokedex), caso você queria desenvolver a sua própria versão ou melhorar o app. Espero você tenha gostado deste artigo e que eu tenha te ajudado 😃.

Desenvolver este projeto me ajudou muito a entender e aplicar novos conceitos de Android e Kotlin. Pretendo no futuro próximo aprimorar o app consumindo os dados a partir de uma API ao invés de um arquivo JSON.








0
0

Comentários (3)

0
Rafael Cagliari

Rafael Cagliari

27/04/2021 14:39

Obrigado!

Também postei o artigo lá no medium, se alguém quiser seguir, pretendo escrever novos artigos em breve.


https://rafael-cagliari22.medium.com/pok%C3%A9dex-como-desenvolvi-meu-primeiro-aplicativo-para-android-utilizando-kotlin-e29c0afe8bb9

0
Kevin Pinheiro

Kevin Pinheiro

27/04/2021 11:09

Parabéns

0
Isaias Bueno

Isaias Bueno

27/04/2021 09:40

Incrível! Parabéns!

Estudando desenvolvimento mobile

Brasil