ViewModel usando Retrofit en una app Kotlin con JetPack Compose

Em este tutorial de Kotlin y JetPack Compose voy a implementar un proyecto que consume una Api Rest en Laravel PHP, donde inflaré el componente LazyColum con datos de una lista de productos usando la arquitectura MVVM o Model VIew ViewModel .. Voy a desarrollar los componentes necesarios para lograr tal objetivo de forma sencilla.

Indice:

1. Definimos la Api Rest 
2. Creación del proyecto en Android Studio con el nombre de productos
3. Definimos la clase model product
4. Implementamos la ApiService y método para leer la lista de productos
5. Implementamos el ViewModel ProductViewModel
6. Implementamos la View ProductScreen
7. Probamos la app

Definimos la Api Rest 

El Json que responde la ruta de la ApiRest en laravel es:

[{"id":1,"name":"Lapiceros","price":"12.80"},{"id":2,"name":"Cuadernos","price":"50.70"},{"id":3,"name":"Borradores","price":"12.80"},{"id":4,"name":"Regla","price":"32.43"},{"id":5,"name":"Goma","price":"23.90"},{"id":6,"name":"Archivador","price":"91.00"},{"id":7,"name":"Engrapador","price":"3.00"},{"id":8,"name":"Clip","price":"1.00"},{"id":9,"name":"Taza","price":"122.00"},{"id":10,"name":"Rosas","price":"32.00"},{"id":11,"name":"Vino","price":"12.00"}]

Creación del proyecto en Android Studio con el nombre de productos

MainActivity.kt

package codea.app.productos

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val viewModel: ProductViewModel by viewModels()
        setContent {
            ProductScreen(viewModel)
        }
    }
}

Definimos la clase model product

Creamos un archivo Data Class de Kotlin que tenga la siguiente estructura

Product.kt

package codea.app.productos

data class Product(
    val id: Int = 0,
    val name : String = "",
    val price : String = ""
)

Implementamos la ApiService y método para leer la lista de productos

Definimos la ApiService para instanciar Retrofit, no sin antes definir la ruta y el método que devolverá el json del servidor.

ApiService.kt

package codea.app.productos

import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET

interface ApiService {

    @GET("products")
    suspend fun getProducts(): List<Product>

    companion object{
        private var apiService: ApiService? = null
        private var url:String = "http://192.168.1.9/bazar/public/api/"
        fun getInstace():ApiService{
            if(apiService == null){
                apiService = Retrofit.Builder()
                    .baseUrl(url)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build()
                    .create(ApiService::class.java)
            }
            return apiService!!
        }
    }   


}

build.gradle

En el gradle implementamos la dependencia de Retrofit

dependencies {

....

implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation 'com.squareup.retrofit2:converter-gson:2.4.0'

....

}

Implementamos el ViewModel ProductViewModel

ProductViewModel.kt

package codea.app.productos

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.launch

class ProductViewModel: ViewModel() {

    var state by mutableStateOf(ProductState())
    private set

    var response:List<Product> by mutableStateOf(listOf())
    private set

    init {
        viewModelScope.launch {

            state = state.copy(
                isLoading = true
            )

            val apiService = ApiService.getInstace()
            val productList = apiService.getProducts()
            response = productList

            state = state.copy(
                isLoading = false,
                products = response
            )

        }
    }
}

ProductState.kt

package codea.app.productos

data class ProductState (
    val products:List<Product> = emptyList(),
    val isLoading: Boolean = false
)

Implementamos la View ProductScreen

ProductScreen.kt

package codea.app.productos

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Card
import androidx.compose.material.CircularProgressIndicator
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ProductScreen(productViewModel: ProductViewModel) {
    val state = productViewModel.state

    if (state.isLoading){
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center
        ){
            CircularProgressIndicator()
        }
    }
    LazyColumn(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround
    ){
        itemsIndexed(items = productViewModel.response){ index, item ->
        Card(
            modifier=Modifier
                .padding(8.dp)
                .fillMaxSize()
                .background(Color.White)
        ){
            Column(
                modifier = Modifier.padding(10.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = item.id.toString())
                Text(text = item.name)
                Text(text = item.price)
            }
        }

        }

    }

}

Probamos la app

Leido 3575 veces | 4 usuarios