3 noviembre, 2023
Agregamos las dependencias en el gradle, se define la clase viewModel, el modelo de datos, se implementa una interfaz para retrofit y en la actividad principal llamamos a ViewModel()
Suscríbete a nuestro canal en Youtube
SuscríbirseEm 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:
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"}]
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)
}
}
}
Creamos un archivo Data Class de Kotlin que tenga la siguiente estructura
package codea.app.productos
data class Product(
val id: Int = 0,
val name : String = "",
val price : String = ""
)
Definimos la ApiService para instanciar Retrofit, no sin antes definir la ruta y el método que devolverá el json del servidor.
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!!
}
}
}
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'
....
}
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
)
}
}
}
package codea.app.productos
data class ProductState (
val products:List<Product> = emptyList(),
val isLoading: Boolean = false
)
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)
}
}
}
}
}
Leido 1442 veces | 0 usuarios
6 descargas
Para descargar el código crea una cuenta
Crear cuenta© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024