Jetpack Compose como consumir uma api com usando Retrofi e arquitetura MVVM em 6 passos
Antes de começar, gostaria de mencionar que ainda estou aprendendo, e decidi criar este artico com intuido de ajudar pessoas que tambem estão aprendendo, além de me forçar a criar um passo a passo de como consumir uma api, afinal ensinar talvez seja a melhor forma de aprender,
Meu Linkedin: https://www.linkedin.com/in/iago-carvalho-b096a21b8/ bora aumentar essas conexões em
git do projeto : https://github.com/iagocarvalho07/ValorantApp
dito isso,vamos fazer um combinado, vou me esforçar para criar conteudo pratico facil e bem visual com imagens e codigos para facilitar sua compreenção, e quem estiver disposto a ler, vai se esforçar um pouco pra tentar entender ^^
espero de verdade que isto lhe ajude de alguma maneira
let´s go
Este artigo abordará o processo de consumo de uma API utilizando Retrofit, uma biblioteca popular para comunicação de rede em aplicativos Android, juntamente com Kotlin e Jetpack Compose.
Nos dias de hoje, consumir APIs é uma tarefa crucial para o desenvolvimento de aplicativos móveis modernos. Retrofit se destaca como uma ferramenta poderosa que simplifica significativamente a comunicação com servidor e otimiza a transferência de dados.
Vamos explorar como Retrofit funciona em combinação com a linguagem de programação Kotlin e a biblioteca Jetpack Compose. Kotlin é conhecido por sua concisão e segurança de tipo, tornando-o uma escolha popular para o desenvolvimento de aplicativos Android. Jetpack Compose, por sua vez, é uma nova biblioteca para criação de interfaces do usuário declarativas e reativas.
Você aprenderá como configurar o Retrofit em um projeto Kotlin e como criar uma interface para descrever as chamadas da API. Iremos abordar também a estruturação do código para organizar as chamadas da API de forma eficiente,
Tentaremos abordar esse processo em 6 passos:
estaremos consumindo a API do jogo valorante a qual pode ser encontrada aqui :
https://dash.valorant-api.com/endpoints/agents
o Repositorio do projeto:
Passo 1: Configurar o Retrofit:
Adicionar as permições de acesso a internet em seu arquivo AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET"/>
em seu arquivo build.gradel(Module : app)
adicione essas Dependencias
// Retrofit
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
// Gson Converter
implementation 'com.google.code.gson:gson:2.10.1'
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
são dependencias do retrofir e gson converte, são bibliotecas que facilitarão nosso desenvolvimento e consumo de APIs,
lembre-se de consultar o site oficial das bibliotecas para pegar sempre a versão mais atualizada
site: https://square.github.io/retrofit/
apos colar essas dependencias em seu arquivo gradle, clique em Sync Now no canto superior direito, dete modo o Android baixara todas os arquivos nescessarios para o consumo da Api
Etapa 2: definir o modelo de dados
para esta esta, podemos utilizar um Plugin que facilita a criação de classes e modelos de dados vindo da Api
Site oficial do puglin: https://plugins.jetbrains.com/plugin/9960-json-to-kotlin-class-jsontokotlinclass-
Discrição do proprio puglin: definir o modelo de Gerandor de classe Kotlin de qualquer string/JSONSchema JSON legal ou qualquer URL que retorne uma string/JSONSchema JSON como resposta.
apos a instalação do puglin, crie um package, em meu app criei com nome de Model, (nome comum para modelo de dados)
dentro de package crie outro pacote com o nome do end point que consumira, isso e apenas para facilitar a organização,
aqui criei com o nome de respose: em seu package clique com o botão direito, vá em new, e uma nova forma decriar arquivos esta disponivel, graças ao puglin: Kotlin data class file
Qual nova aba se abrira, nela podemos passar a Url do end point que queremos consumir :
cliando em Retrieve contente from Http URL:
Image 1 : para facilitar o entendimento :
Imagen 2 : coloque a Url que quer criar o modelo de dados, neste caso estaremos usando a URL:
https://valorant-api.com/v1/agents
Imagen 3 : esqueva o nome da classe que desejar em Class name, e clique em Generate
Seguindo este passo a passo sera possivel criar um modelo de dados de maneira simples e facil para posteriormente consumir a api, esta etapa criara as classes e arquivos de forma organizada em seu app, e ficara mais o menos assim: ^^
Agora estamos prontos para Iniciar a Configuração do Retrofit :
Passo 3: Configure o Retrofit
Para fins de Separação de codigo e tornar seu App mais limpo e de facil visualização crie um package com nome de Network, dentro deste pacote e então crie uma interface de serviço Retrofit para definir os endpoints da API. Crie um novo arquivo Kotlin chamado ValorantService.kt (o nome pode ser oque quizer, mas usando o Service e um padrão para desenvolvedores)
adicione o seguinte código:
interface ValorantService {
@GET("agents")
suspend fun getCreditCars(): ModelValorant
}
a ) a anotação @GET serve para adicionarmos o end point da api
b) criamos uma função suspensa para usarmos as ferrementas do kotlin a nosso favor, isso permite que o codigo seja chamado em segundo plano evitando o travamente da tela ou main traid se preferir
Em seguida, crie uma instância do Retrofit para realizar solicitações de rede. Crie um novo arquivo Kotlin chamado ValorantApi.kt e adicione o seguinte código:
object ValorantApi {
private const val BASE_URL = "https://valorant-api.com/v1/"
private val retrofit: Retrofit by lazy {
Retrofit.Builder()
.baseUrl(BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.build()
}
val valorantApiService: ValorantService by lazy {
retrofit.create(ValorantService::class.java)
}
}
C) a private const val BASE_URL. recebe o end point da api porem sem o parte final onde adiconamos na etapa anterior, isso serve para que possamos adicionar outros end pontis da api de forma simple ao nosso codigo, como por exemplo :
o @GET("weapons") recebe outro end point para outra chamada da api, so a tituto de exeplo ^^
Etapa 4: criar o repositório
Crie uma classe de repositório para lidar com operações de dados. Crie um novo arquivo Kotlin chamado ValorantRepository.kt e adicione o seguinte código:
class ValorantRespository() {
private val valorantAgentsRepo = ValorantApi.valorantApiService
suspend fun getValorantCards(): ModelValorant{
return valorantAgentsRepo.getCreditCars()
}
suspend fun getDetalhesValorant(): ModelValorant {
return valorantAgentsRepo.getCreditCars()
}
}
A ) a varial vel privada valoranteAgentsRepo recebe os dados vindos do objeto criadado na estapa anterior ValoranteApi
e recebe sua fvariavel valoranteApiService
B ) a função getvaloranteCards, enda os daddos Da Model Valorante que criamos na etapa 2
C ) essa função retorna a variavel valoranteAgentsRepo chamando a função getCreditCars do arquivo ValoranteService
Etapa 5: Implementando o ViewModel
Crie uma classe ViewModel para gerenciar os dados de sua interface do usuário combinável. Crie um novo arquivo Kotlin chamado AgentsValorantViewModel.kt e adicione o seguinte código:
class AgentsValorantViewModel(): ViewModel() {
private val respository = ValorantRespository()
private val _valorantAgents = MutableLiveData<ModelValorant>()
val valorantAgents: LiveData<ModelValorant> = _valorantAgents
fun fetValorantAgents(){
viewModelScope.launch {
try {
val agents = respository.getValorantCards()
_valorantAgents.value = agents
}catch (e: Exception){
Log.d("EXC", "fetValorantAgents: ${e.message.toString()}")
}
}
}
}
A ) a variavel, repository recebe os dados vendos da Class ValorantRepository, criada na etapa anterior
B ) criamos uma variavel privada _valorantAgents que recebe um MutableLiveData que observa os dados de classe ModelValorante, Criada na etapa 2
C) e uma varial ValoranteAgents que posteriormente vai receber os dados que a varialvel privada obtiver da api, essa varialvel que sera instanciada na nossa Ui Futuramente.
D ) a Função fetValorantAgents recebe um viewmodelScope, isso e nescessario pois as funções da vindas do repositorio e de outras classes foram marcadas como suspensa
E ) no bloco de codigo try catch, tentamos chamar a api e passar os dados da api para a variavel privada _valorantAgents
caso de errado mostrara um log com o motivo da exeption
Etapa 6 : Crie uma Composable Ui
@Composable
fun AgentsValorantScreen(
navController: NavController,
viewModel: AgentsValorantViewModel = viewModel()
) {
val valorantCards by viewModel.valorantAgents.observeAsState(null)
val overlap = (-110).dp
LaunchedEffect(Unit) {
viewModel.fetValorantAgents()
}
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
if (valorantCards == null) {
CircularProgressIndicator()
} else {
LazyColumn(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.spacedBy(overlap),
) {
itemsIndexed(valorantCards!!.data) { index, valorantCards ->
AsyncImage(model = valorantCards.displayIcon, contentDescription = "")
Text(text = valorantCards.displayName)
}
}
}
}
A) a função comsable AgetsValorantScreen, recebe um parametro viewmodel, o qual herda os dados da AgentsValorantViewModel, detro do bloco de codgo da função a variavel valorantCards recebe essa viewmodel e observa os dados com a função onserveAsState, aqui os dados ja estão prontos para serem exibidos o restante e estilização e criação de sua Ui
B ) utilizando o LazyColumn, podemos mostra todos os dados vindos da Api em forma de colula, Se tudo ocorreu como planejado, os dados vindos da API ficarão da seguinte forma:
Bom Acabamos por aqui, agora fica o desafio, estilizar a Tela De forma que de gosto de ver, boa sorte.
Esta foi minha estilização:
Repositorio no git: https://github.com/iagocarvalho07/ValorantApp
