Una parte importante al explorar cualquier lenguaje de programación en la parte de la conexión a base de datos y plasmar la información de estas mismas en interfaces, cargar las tablas o listas mediante servicios web es lo más optimo, así que en este artículo les explicaré cómo diseñar listas conectadas a APIs en Android, específicamente usando Kotlin. Siendo este post la tercera entrega de diseño de interfaces, en seguida de los formularios, continuaremos el tema de listas por lo que te recomiendo echar un vistaso a la entrega pasada https://aprendiendocondomingo.com/2025/09/30/como-disenar-una-navegacion-y-listas-en-android-con-kotlin/.
¿Qué son las APIs? Las APIs son servicios web que pueden ser utilizados por terceros, convenientemente para este caso son las aplicaciones móviles, los servicios web forman parte de aplicaciones web y pueden ser integrados en otros proyectos siempre y cuando sean configurados correctamente los CORS, les dejo un ejemplo de una configuración ideal, al menos para este ejemplo.
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Authorization, X-API-KEY, Origin, X-Requested With, Content-Type, Accept, Access-Control-Request-Method");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Allow: GET, POST, OPTIONS");
if ($_SERVER["REQUEST_METHOD"] == "OPTIONS") {
http_response_code(200);
exit;
}
1. Configuración del proyecto
Para poder conectarnos a APIs es requerido que modifiquemos el archivo build.gradle.kts, el cual podremos localizar rapidamente si ponemos la vista en modo proyecto, al interior de la carpeta app.
Ubicado el archivo procedemos a colocar las siguientes tres dependencias, coloco los puntos suspensivos (…), porque toda configuración y código es diferente según el proyecto.
[build.gradle.kts]
plugins {
...
}
android {
...
}
dependencies {
...
implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation("com.squareup.retrofit2:converter-scalars:2.9.0")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")
}
Procederemos a buscar el archivo AndroidManifest.xml para añadir el siguiente permiso, dentro de la etiqueta manifest, al inicio:
<uses-permission android:name="android.permission.INTERNET" />
2. Implementación de API en nuestra lista
Colocamos una interface antes de la vista donde se ubica la lista, también vamos a globalizar el data class, retomando el ejemplo previo me quedaría así:
[MainActivity.kt]
...
data class ModeloProducto(val nombre: String, val precio: Double, val existencias: Int)
interface ApiService {
@GET("api.php?buscar")
suspend fun buscar(): List<ModeloProducto>
@POST("api.php?agregar")
@FormUrlEncoded
suspend fun agregar(
@Field("nombre") nombre: String,
@Field("precio") precio: Double,
@Field("existencias") existencias: Int
): Response<Unit>
}
val retrofit = Retrofit.Builder()
.baseUrl("https://aprendiendocondomingo.com/app/")
.addConverterFactory(ScalarsConverterFactory.create())
.addConverterFactory(GsonConverterFactory.create())
.build()
val api = retrofit.create(ApiService::class.java)
fun LstProductosContent(navController: NavHostController, modifier: Modifier) {
val productos = remember {
mutableStateListOf<ModeloProducto>()
}
LaunchedEffect(Unit) {
try {
val respuesta = api.buscar()
productos.clear()
productos.addAll(respuesta)
}
catch (e: Exception) {
Log.e("API", "Error al buscar: ${e.message}")
}
}
...
}
3. Implementación de la función de agregar de la API
El siguiente código perfectamente puede ir colocado en un botón en un formulario, al mismo tiempo, les dejo un segmento comentado que puede ser de utilidad según el caso.
scope.launch {
try {
api.agregar(nombre, precio.toDouble(), existencias.toInt())
Toast.makeText(context, "Producto agregado con éxito.", Toast.LENGTH_SHORT).show()
// El código comentado sirve para cuando queramos leer respuestas de texto después de enviar información
// Por supuesto hay que añadir el método a la apiService con el tipo de dato correspondiente
// val respuesta : Response<String> = api.hacerOtraCosa(dato1, dato2.toDouble())
// respuesta.body()
}
catch (e: Exception) {
Log.e("API", "Error al agregar: ${e.message}")
}
}
Conclusión
El artículo ha llegado a su fin, recomiendo apoyarse de los anteriores 2 artículos para una mejor implementación. Espero este post les sea de utilidad y estaré al tanto de cualquier comentario, gracias por su tiempo.
