Las aplicaciones de Android utilizan las API dentro de las aplicaciones de Android para acceder a los datos de las bases de datos. Podemos realizar varias operaciones utilizando API, como leer, escribir y actualizar nuestros datos en la base de datos. En este artículo, veremos cómo actualizar datos en la API usando Retrofit en Android usando Jetpack Compose.
Nota: si busca código Java para Jetpack Compose, tenga en cuenta que Jetpack Compose solo está disponible en Kotlin. Utiliza funciones como rutinas, y el manejo de las anotaciones @Composable está a cargo de un compilador Kotlin. No hay ningún método para que Java acceda a estos. Por lo tanto, no puede usar Jetpack Compose si su proyecto no es compatible con Kotlin.
Implementación paso a paso
Paso 1: crea un nuevo proyecto en Android Studio
Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Al elegir la plantilla, seleccione Actividad de redacción vacía. Si no encuentra esta plantilla, intente actualizar Android Studio a la última versión. Demostramos la aplicación en Kotlin, así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.
Paso 2: agregue la dependencia a continuación a su archivo build.gradle
A continuación se muestra la dependencia de Volley que usaremos para obtener los datos de la API. Para agregar esta dependencia, vaya a la aplicación > Gradle Scripts > build.gradle(app) y agregue la dependencia a continuación en la sección de dependencias.
// below dependency for using retrofit. implementation 'com.squareup.retrofit2:retrofit:2.9.0' implementation 'com.squareup.retrofit2:converter-gson:2.5.0'
Después de agregar esta dependencia, sincronice su proyecto y ahora muévase hacia la parte AndroidManifest.xml.
Paso 3: agregar permisos de Internet en el archivo AndroidManifest.xml
Vaya a la aplicación > AndroidManifest.xml y agréguele el siguiente código.
XML
<!--permissions for INTERNET--> <uses-permission android:name="android.permission.INTERNET"/>
Paso 4: crear una clase modelo
Vaya a aplicación > java > nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java/Kotlin y nombre su clase como DataModel y agréguele el siguiente código. Los comentarios se agregan en el código para una explicación más detallada.
Kotlin
data class DataModel( // in the below line, we are creating // variables for name and job var name: String, var job: String )
Paso 5: crear una clase de interfaz para la llamada a la API
Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Kotlin, selecciónelo como RetrofitAPI y agréguele el código siguiente. Los comentarios se agregan en el código para una explicación más detallada.
Kotlin
import retrofit2.Call
import retrofit2.http.Body
import retrofit2.http.GET
import retrofit2.http.PUT
interface RetrofitAPI {
// as we are making a put request to update a data
// so we are annotating it with put
// and along with that we are passing a parameter as users
@PUT("api/users/2")
// in the below line, we are creating a method to put our data.
fun updateData(@Body dataModel: DataModel?): Call<DataModel?>?
}
Paso 6: trabajar con el archivo MainActivity.kt
Vaya a la aplicación > java > el nombre del paquete de su aplicación > archivo MainActivity.kt y agréguele el siguiente código. Los comentarios se agregan en el código para una explicación más detallada.
Kotlin
import android.app.Activity
import android.content.Context
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.*
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import com.example.newcanaryproject.ui.theme.*
import retrofit2.Call
import retrofit2.Callback
import retrofit2.Response
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import java.util.*
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NewCanaryProjectTheme {
// in the below line, we are specifying background color for our application
Surface(
// in the below line, we are specifying modifier and color for our app
modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background
) {
//in the below line, we are specifying theme as scaffold.
Scaffold(
// in scaffold we are specifying top bar.
topBar = {
// inside top bar we are specifying background color.
TopAppBar(backgroundColor = greenColor,
// along with that we are specifying title for our top bar.
title = {
// in the top bar we are specifying tile as a text
Text(
// in the below line, we are specifying text to display in top app bar.
text = "Retrofit PUT Request in Android",
// in the below line, we are specifying modifier to fill max width.
modifier = Modifier.fillMaxWidth(),
// in the below line, we are specifying text alignment.
textAlign = TextAlign.Center,
// in the below line, we are specifying color for our text.
color = Color.White
)
})
}) {
// in the below line, we are calling pop window dialog method to display ui.
updateData()
}
}
}
}
}
}
@Composable
fun updateData() {
val ctx = LocalContext.current
val userName = remember {
mutableStateOf(TextFieldValue())
}
val job = remember {
mutableStateOf(TextFieldValue())
}
val response = remember {
mutableStateOf("")
}
// in the below line, we are creating a column.
Column(
// in the below line, we are adding a modifier to it
// and setting max size, max height and max width
modifier = Modifier
.fillMaxSize()
.fillMaxHeight()
.fillMaxWidth(),
// in the below line, we are adding vertical
// arrangement and horizontal alignment.
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
// in the below line, we are creating a text
Text(
// in the below line, we are specifying text as
// Session Management in Android.
text = "Retrofit PUT Request in Android",
// in the below line, we are specifying text color.
color = greenColor,
fontSize = 20.sp,
// in the below line, we are specifying font family
fontFamily = FontFamily.Default,
// in the below line, we are adding font weight
// and alignment for our text
fontWeight = FontWeight.Bold, textAlign = TextAlign.Center
)
//in the below line, we are adding spacer
Spacer(modifier = Modifier.height(5.dp))
// in the below line, we are creating a text field for our email.
TextField(
// in the below line, we are specifying value for our email text field.
value = userName.value,
// in the below line, we are adding on value change for text field.
onValueChange = { userName.value = it },
// in the below line, we are adding place holder as text as "Enter your email"
placeholder = { Text(text = "Enter your name") },
// in the below line, we are adding modifier to it
// and adding padding to it and filling max width
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// in the below line, we are adding text style
// specifying color and font size to it.
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
// in the below line, we ar adding single line to it.
singleLine = true,
)
// in the below line, we are adding spacer
Spacer(modifier = Modifier.height(5.dp))
// in the below line, we are creating a text field for our email.
TextField(
// in the below line, we are specifying value for our email text field.
value = job.value,
// in the below line, we are adding on value change for text field.
onValueChange = { job.value = it },
// in the below line, we are adding place holder as text as "Enter your email"
placeholder = { Text(text = "Enter your job") },
// in the below line, we are adding modifier to it
// and adding padding to it and filling max width
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// in the below line, we are adding text style
// specifying color and font size to it.
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
// in the below line, we ar adding single line to it.
singleLine = true,
)
// in the below line, we are adding spacer
Spacer(modifier = Modifier.height(10.dp))
// in the below line, we are creating a button
Button(
onClick = {
// in the below line, we are calling make payment method to update data.
updateDataUsingRetrofit(
ctx, userName, job, response
)
},
// in the below line, we are adding modifier to our button.
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
// in the below line, we are adding text for our button
Text(text = "Update Data", modifier = Modifier.padding(8.dp))
}
// in the below line, we are adding a spacer.
Spacer(modifier = Modifier.height(20.dp))
// in the below line, we are creating a text for displaying a response.
Text(
text = response.value,
color = Color.Black,
fontSize = 20.sp,
fontWeight = FontWeight.Bold, modifier = Modifier
.padding(10.dp)
.fillMaxWidth(),
textAlign = TextAlign.Center
)
}
}
private fun updateDataUsingRetrofit(
ctx: Context,
userName: MutableState<TextFieldValue>,
job: MutableState<TextFieldValue>,
result: MutableState<String>
) {
var url = "https://reqres.in/"
// in the below line, we are creating a retrofit
// builder and passing our base url
val retrofit = Retrofit.Builder()
.baseUrl(url)
// as we are sending data in json format so
// we have to add Gson converter factory
.addConverterFactory(GsonConverterFactory.create())
// at last we are building our retrofit builder.
.build()
// the below line is creating an instance for our retrofit api class.
val retrofitAPI = retrofit.create(RetrofitAPI::class.java)
// passing data from our text fields to our model class.
val dataModel = DataModel(userName.value.text, job.value.text)
// calling a method to create an update and passing our model class.
val call: Call<DataModel?>? = retrofitAPI.updateData(dataModel)
// in the below line, we are executing our method.
call!!.enqueue(object : Callback<DataModel?> {
override fun onResponse(call: Call<DataModel?>?, response: Response<DataModel?>) {
// this method is called when we get response from our api.
Toast.makeText(ctx, "Data updated to API", Toast.LENGTH_SHORT).show()
// we are getting a response from our body and
// passing it to our model class.
val model: DataModel? = response.body()
// in the below line, we are getting our data from model class
// and adding it to our string.
val resp =
"Response Code : " + response.code() + "\n" + "User Name : " + model!!.name + "\n" + "Job : " + model!!.job
// in the below line, we are setting our string to our response.
result.value = resp
}
override fun onFailure(call: Call<DataModel?>?, t: Throwable) {
// we get error response from API.
result.value = "Error found is : " + t.message
}
})
}
Ahora ejecute su aplicación para ver el resultado.
Salida :
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA