Las API se utilizan dentro de las aplicaciones de Android para interactuar con las bases de datos para realizar varias operaciones CRUD en los datos dentro de la base de datos, como agregar nuevos datos, leer los datos existentes y actualizar y eliminar los datos existentes. En este artículo, veremos cómo publicar 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 siguiente dependencia a su archivo build.gradle
Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.
// below dependency for using the 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: agregar un nuevo color en el archivo Color.kt
Vaya a aplicación > java > nombre del paquete de su aplicación > ui.theme > archivo Color.kt y agréguele el siguiente código.
Kotlin
import androidx.compose.ui.graphics.Color val Purple200 = Color(0xFF0F9D58) val Purple500 = Color(0xFF0F9D58) val Purple700 = Color(0xFF3700B3) val Teal200 = Color(0xFF03DAC5) // on below line we are adding different colors. val greenColor = Color(0xFF0F9D58)
Paso 5: crear una clase modelo para almacenar nuestros datos
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 y asígnele el nombre DataModel y agréguele el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
data class DataModel( // on below line we are creating variables for name and job var name: String, var job: String )
Paso 6: crear una clase de interfaz para nuestra llamada 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 Interfaz y nombre el archivo como RetrofitAPI y agréguele el código a continuación. Se agregan comentarios dentro del código para comprender el código con más detalle.
Kotlin
import retrofit2.Call
import retrofit2.http.Body
import retrofit2.http.GET
import retrofit2.http.POST
import retrofit2.http.PUT
interface RetrofitAPI {
// as we are making a post request to post a data
// so we are annotating it with post
// and along with that we are passing a parameter as users
@POST("users")
fun // on below line we are creating a method to post our data.
postData(@Body dataModel: DataModel?): Call<DataModel?>?
}
Paso 7: trabajar con el archivo MainActivity.java
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Se agregan comentarios dentro del código para comprender el código con más detalle.
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 {
// on below line we are specifying background color for our application
Surface(
// on below line we are specifying modifier and color for our app
modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background
) {
// on the below line we are specifying the theme as the 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(
// on below line we are specifying text to display in top app bar.
text = "Retrofit POST Request in Android",
// on below line we are specifying modifier to fill max width.
modifier = Modifier.fillMaxWidth(),
// on below line we are specifying text alignment.
textAlign = TextAlign.Center,
// on below line we are specifying color for our text.
color = Color.White
)
})
}) {
// on the below line we are calling the pop window dialog method to display ui.
postData()
}
}
}
}
}
}
@Composable
fun postData() {
val ctx = LocalContext.current
val userName = remember {
mutableStateOf(TextFieldValue())
}
val job = remember {
mutableStateOf(TextFieldValue())
}
val response = remember {
mutableStateOf("")
}
// on below line we are creating a column.
Column(
// on below line we are adding a modifier to it
// and setting max size, max height and max width
modifier = Modifier
.fillMaxSize()
.fillMaxHeight()
.fillMaxWidth(),
// on below line we are adding vertical
// arrangement and horizontal alignment.
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
// on below line we are creating a text
Text(
// on below line we are specifying text as
// Session Management in Android.
text = "Retrofit POST Request in Android",
// on below line we are specifying text color.
color = greenColor,
fontSize = 20.sp,
// on below line we are specifying font family
fontFamily = FontFamily.Default,
// on below line we are adding font weight
// and alignment for our text
fontWeight = FontWeight.Bold, textAlign = TextAlign.Center
)
//on below line we are adding spacer
Spacer(modifier = Modifier.height(5.dp))
// on below line we are creating a text field for our email.
TextField(
// on below line we are specifying value for our email text field.
value = userName.value,
// on below line we are adding on value change for text field.
onValueChange = { userName.value = it },
// on below line we are adding place holder as text as "Enter your email"
placeholder = { Text(text = "Enter your name") },
// on below line we are adding modifier to it
// and adding padding to it and filling max width
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// on below line we are adding text style
// specifying color and font size to it.
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
// on below line we ar adding single line to it.
singleLine = true,
)
// on below line we are adding spacer
Spacer(modifier = Modifier.height(5.dp))
// on below line we are creating a text field for our email.
TextField(
// on below line we are specifying value for our email text field.
value = job.value,
// on below line we are adding on value change for text field.
onValueChange = { job.value = it },
// on below line we are adding place holder as text as "Enter your email"
placeholder = { Text(text = "Enter your job") },
// on below line we are adding modifier to it
// and adding padding to it and filling max width
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
// on below line we are adding text style
// specifying color and font size to it.
textStyle = TextStyle(color = Color.Black, fontSize = 15.sp),
// on below line we ar adding single line to it.
singleLine = true,
)
// on below line we are adding spacer
Spacer(modifier = Modifier.height(10.dp))
// on below line we are creating a button
Button(
onClick = {
// on below line we are calling make payment method to update data.
postDataUsingRetrofit(
ctx, userName, job, response
)
},
// on below line we are adding modifier to our button.
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
// on below line we are adding text for our button
Text(text = "Post Data", modifier = Modifier.padding(8.dp))
}
// on below line we are adding a spacer.
Spacer(modifier = Modifier.height(20.dp))
// on 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 postDataUsingRetrofit(
ctx: Context,
userName: MutableState<TextFieldValue>,
job: MutableState<TextFieldValue>,
result: MutableState<String>
) {
var url = "https://reqres.in/api/"
// on 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()
// below the line is to create 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.postData(dataModel)
// on 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 posted 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()
// on 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
// 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 y vea el resultado de la aplicación.
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