Las API se utilizan dentro de las aplicaciones de Android para interactuar con una base 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 datos existentes. En este artículo, veremos cómo publicar datos en la API en Android usando Volley en 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.
implementation ‘com.android.volley:volley:1.1.1’
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) // in the below line, we are adding different colors. val greenColor = Color(0xFF0F9D58)
Paso 5: trabajar con el archivo MainActivity.kt
Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt. Los comentarios se agregan dentro del código para una explicación más detallada.
Kotlin
import android.content.Context
import android.os.Bundle
import android.util.Log
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.android.volley.Request
import com.android.volley.Response
import com.android.volley.VolleyError
import com.android.volley.toolbox.StringRequest
import com.android.volley.toolbox.Volley
import com.example.newcanaryproject.ui.theme.*
import org.json.JSONException
import org.json.JSONObject
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 = "Volley POST 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.
postDataUsingVolley()
}
}
}
}
}
}
@Composable
fun postDataUsingVolley() {
// in the below line, we are creating a variable for our context
val ctx = LocalContext.current
// in the below line, we are creating variables for user name, job and response.
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 = "Volley POST 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.
postData(
userName.value.text, job.value.text, ctx, 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 = "Post 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 postData(
userName: String,
job: String,
ctx: Context,
res: MutableState<String>
) {
// in the below line, we are creating a variable for url.
var url = "https://reqres.in/api/users"
// creating a new variable for our request queue
val queue = Volley.newRequestQueue(ctx)
// making a string request to update our data and
// passing method as PUT. to update our data.
val request: StringRequest =
object : StringRequest(Request.Method.POST, url, object : Response.Listener<String?> {
override fun onResponse(response: String?) {
// in the below line, we are displaying a toast message as data updated.
Toast.makeText(ctx, "Data Posted to API..", Toast.LENGTH_SHORT).show()
try {
// in the below line, we are extracting data from our json object
// and passing our response to our json object.
val jsonObject = JSONObject(response)
// creating a string for our output.
val result =
"User Name : " + jsonObject.getString("name") + "\n" + "Job : " + jsonObject.getString(
"job"
)
// in the below line, we are setting
// our string to our text view.
res.value = result
} catch (e: JSONException) {
e.printStackTrace()
}
}
}, object : Response.ErrorListener {
override fun onErrorResponse(error: VolleyError?) {
// displaying toast message on response failure.
Toast.makeText(ctx, "Fail to post data..", Toast.LENGTH_SHORT)
.show()
}
}) {
override fun getParams(): Map<String, String>? {
// in the below line, we are creating a map for storing
// our values in key and value pair.
val params: MutableMap<String, String> = HashMap()
// in the below line, we are passing our key
// and value pair to our parameters.
params["name"] = userName
params["job"] = job
// at last we are
// returning our params.
return params
}
}
// below line is to make
// a json object request.
queue.add(request)
}
Ahora ejecute su aplicación para ver el resultado.
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA