Quickstarters
CRUD Samples
Construyendo una aplicación CRUD con Jetpack Compose?
29 min
descripción general en esta guía, aprenderás a desarrollar una aplicación crud (crear, leer, actualizar, eliminar) utilizando jetpack compose para android ilustraremos cómo gestionar las operaciones de datos de manera efectiva integrando tu aplicación con back4app el proyecto comienza configurando una instancia de back4app llamada basic crud app jetpackcompose , que servirá como una sólida infraestructura de backend esbozaremos cómo diseñar un esquema de base de datos óptimo definiendo colecciones y campos específicos, ya sea manualmente o aprovechando las herramientas impulsadas por ia de back4app esto asegura que la estructura de datos de tu aplicación sea lo suficientemente robusta para operaciones crud sin problemas a continuación, configurarás la consola de administración de back4app, una interfaz fácil de usar y de arrastrar y soltar que simplifica la gestión de datos, facilitando la realización de acciones crud finalmente, conectarás tu frontend de jetpack compose con back4app, utilizando ya sea el sdk de android de parse (donde sea aplicable) o llamadas directas a la api rest, mientras aplicas medidas de seguridad sólidas con controles de acceso avanzados al final de este tutorial, tendrás una aplicación de android que soporta la funcionalidad crud esencial, completa con autenticación de usuario y manejo seguro de datos lo que aprenderás cómo construir una aplicación basada en crud en android utilizando jetpack compose métodos para crear un backend escalable con back4app estrategias para utilizar la intuitiva consola de administración de back4app para la manipulación de datos técnicas de integración con el sdk de android de parse o apis rest requisitos previos antes de continuar, asegúrate de tener lo siguiente listo una cuenta de back4app con un proyecto recién creado si necesitas ayuda, consulta introducción a back4app https //www back4app com/docs/get started/new parse app una configuración de desarrollo de android con android studio asegúrate de tener instalada la última versión de android studio junto con kotlin familiaridad con kotlin, jetpack compose y apis restful para un repaso rápido, visita la documentación de jetpack compose https //developer android com/jetpack/compose paso 1 – iniciando tu proyecto creando un proyecto en back4app inicia sesión en tu cuenta de back4app selecciona la opción “nueva aplicación” desde tu panel de control nombra tu proyecto basic crud app jetpackcompose y completa el proceso de configuración crear nuevo proyecto después de configurar, tu proyecto será visible en la consola de back4app, sentando las bases para la configuración de tu backend paso 2 – creando el esquema de tu base de datos esbozando tu estructura de datos para esta aplicación crud, definirás varias colecciones a continuación se presentan colecciones de muestra junto con los campos y tipos de datos necesarios, asegurando que tu backend esté bien preparado para manejar datos 1\ colección artículos esta colección se utiliza para almacenar detalles sobre cada entrada campo tipo detalles id objectid identificador único generado automáticamente título cadena nombre o título del artículo descripción cadena una breve descripción del artículo creado en fecha marca de tiempo de cuando se agregó el artículo actualizado en fecha marca de tiempo para la última actualización 2\ colección usuarios esta colección gestiona los perfiles de usuario y los datos de autenticación campo tipo descripción id objectid clave primaria generada automáticamente nombre de usuario cadena identificador único de usuario correo electrónico cadena la dirección de correo electrónico única del usuario hash de contraseña cadena contraseña encriptada para seguridad creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha última actualización de la cuenta puedes agregar manualmente estas colecciones y campos a través del panel de control de back4app creando nuevas clases y especificando las columnas necesarias crear nueva clase puedes establecer cada columna eligiendo un tipo de dato, nombrándola, asignando valores predeterminados y determinando si es obligatoria crear columna aprovechando la ia de back4app para la configuración del esquema la herramienta de ia de back4app puede automatizar la creación de tu esquema de base de datos interpretando un aviso que describe tus colecciones y campos deseados esta función acelera significativamente la configuración del proyecto cómo usar la herramienta de ia accede a la herramienta de ia inicia sesión en tu consola de back4app y navega a la sección de ia ingresa la descripción de tu esquema proporciona un aviso detallado que describa las colecciones y sus campos correspondientes revisa y aplica después de la generación, examina el esquema propuesto e intégralo en tu proyecto ejemplo de aviso de ia create the following collections in my back4app project collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto assigned) \ updated at date (auto updated) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto assigned) \ updated at date (auto updated) usar este método de ia asegura que tu base de datos esté estructurada correctamente y optimizada para las necesidades de tu aplicación paso 3 – activando la consola de administrador y gestionando funciones crud introducción a la consola de administrador la consola de administrador de back4app es una solución versátil sin código que te permite supervisar y manipular tus datos de backend sin esfuerzo su interfaz intuitiva admite operaciones crud de arrastrar y soltar, lo que hace que la gestión de datos sea sencilla activando la consola de administración dirígete a la sección “más” en tu panel de control de back4app selecciona “consola de administración” y luego elige “activar consola de administración ” configura tus credenciales de administrador registrando tu primer usuario administrador, lo que también establece los roles y colecciones del sistema necesarios habilitar aplicación de administración una vez activada, inicia sesión en la consola de administración para gestionar tus colecciones panel de control de la aplicación de administración realizando acciones crud a través de la consola dentro de la consola de administración, puedes agregar registros utiliza la función “agregar registro” dentro de una colección (por ejemplo, artículos) para insertar nuevas entradas ver/editar registros haz clic en cualquier registro para revisar o modificar sus campos eliminar registros selecciona la opción de eliminar para eliminar registros obsoletos esta interfaz simplificada aumenta la productividad al hacer que las operaciones de backend sean accesibles y eficientes paso 4 – conectando jetpack compose con back4app ahora que tu backend está configurado, es hora de vincular tu aplicación de android construida con jetpack compose a back4app opción a utilizando el sdk de parse para android agrega la dependencia del sdk de parse actualiza tu build gradle archivo implementation 'com parse\ parse android\ latest version' inicializa parse en tu clase de aplicación crea o actualiza tu clase de aplicación (por ejemplo, myapplication kt ) // myapplication kt package com example basiccrud import android app application import com parse parse class myapplication application() { override fun oncreate() { super oncreate() parse initialize( parse configuration builder(this) applicationid("your application id") clientkey("your client key") server("https //parseapi back4app com") build() ) } } implementa crud en una pantalla de compose por ejemplo, crea una pantalla para listar elementos // itemsscreen kt package com example basiccrud import androidx compose foundation layout import androidx compose foundation lazy lazycolumn import androidx compose foundation lazy items import androidx compose material button import androidx compose material text import androidx compose runtime import androidx compose ui modifier import androidx compose ui unit dp import com parse parseobject import com parse parsequery import kotlinx coroutines dispatchers import kotlinx coroutines withcontext @composable fun itemsscreen() { var items by remember { mutablestateof(listof\<parseobject>()) } launchedeffect(unit) { withcontext(dispatchers io) { val query = parsequery getquery\<parseobject>("items") try { val result = query find() items = result } catch (e exception) { e printstacktrace() } } } column(modifier = modifier padding(16 dp)) { text(text = "items", modifier = modifier padding(bottom = 8 dp)) lazycolumn { items(items) { item > row( modifier = modifier fillmaxwidth() padding(8 dp), horizontalarrangement = arrangement spacebetween ) { text(text = item getstring("title") ? "sin título") button(onclick = { / activar acción de edición / }) { text(text = "editar") } } } } } } opción b usando rest o graphql si prefieres no usar el sdk de parse, puedes interactuar con back4app directamente usando apis restful o graphql por ejemplo, para recuperar elementos a través de rest suspend fun fetchitems() { try { val response = khttp get( url = "https //parseapi back4app com/classes/items", headers = mapof( "x parse application id" to "your application id", "x parse rest api key" to "your rest api key" ) ) // process json response accordingly } catch (e exception) { e printstacktrace() } } integra estas llamadas a la api en tus componentes de compose según sea necesario paso 5 – asegurando tu backend implementación de listas de control de acceso (acls) mejora la seguridad de los datos asignando acls a tus objetos por ejemplo, para crear un registro accesible solo por su propietario suspend fun createsecureitem(itemdata map\<string, string>, owneruser parseobject) { val item = parseobject("items") item put("title", itemdata\["title"]) item put("description", itemdata\["description"]) // define acl so that only the owner has read/write privileges val acl = parseacl(owneruser) acl publicreadaccess = false acl publicwriteaccess = false item acl = acl try { item save() println("secure item saved successfully") } catch (e exception) { e printstacktrace() } } configurando permisos a nivel de clase (clps) dentro de tu consola de back4app, ajusta los clps para cada colección esto asegura que solo los usuarios autorizados o autenticados puedan acceder a datos sensibles paso 6 – gestionando la autenticación de usuarios configurando cuentas de usuario back4app utiliza la clase de usuario incorporada de parse para gestionar la autenticación en tu aplicación jetpack compose, maneja el registro e inicio de sesión del usuario utilizando el sdk de parse a continuación se muestra un ejemplo de una pantalla de registro utilizando compose // signupscreen kt package com example basiccrud import androidx compose foundation layout import androidx compose material button import androidx compose material outlinedtextfield import androidx compose material text import androidx compose runtime import androidx compose ui modifier import androidx compose ui unit dp import com parse parseuser @composable fun signupscreen() { var username by remember { mutablestateof("") } var email by remember { mutablestateof("") } var password by remember { mutablestateof("") } column(modifier = modifier padding(16 dp)) { outlinedtextfield( value = username, onvaluechange = { username = it }, label = { text("username") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(8 dp)) outlinedtextfield( value = email, onvaluechange = { email = it }, label = { text("email") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(8 dp)) outlinedtextfield( value = password, onvaluechange = { password = it }, label = { text("password") }, modifier = modifier fillmaxwidth() ) spacer(modifier = modifier height(16 dp)) button(onclick = { val user = parseuser() user username = username user email = email user setpassword(password) user signupinbackground { e > if (e == null) { println("user registered successfully!") } else { println("registration error ${'$'}{e message}") } } }) { text(text = "sign up") } } } puedes implementar pantallas similares para el inicio de sesión y la gestión de sesiones funciones adicionales como inicio de sesión social, verificación de correo electrónico y recuperación de contraseña se pueden gestionar a través de la consola de back4app paso 7 – (no aplicable) nota la implementación a través de la web no es aplicable en el contexto de esta aplicación móvil paso 8 – reflexiones finales y próximos pasos ¡felicidades! ahora has desarrollado una aplicación crud completa utilizando jetpack compose y back4app has configurado un proyecto llamado basic crud app jetpackcompose , diseñado un esquema de base de datos efectivo para items y users, y utilizado la consola de administración de back4app para una gestión de datos sencilla además, integraste tu frontend de android con back4app, aplicando medidas de seguridad robustas en el camino ¿qué sigue? expande tu ui de compose mejora tu aplicación con características adicionales como vistas detalladas de elementos, capacidades de búsqueda y actualizaciones de datos en vivo incorpora más lógica de backend considera usar funciones en la nube, integrar apis de terceros o implementar controles de acceso basados en roles aprendizaje adicional explora la documentación de back4app https //www back4app com/docs y tutoriales adicionales de compose para optimizar el rendimiento y explorar integraciones personalizadas al seguir este tutorial, ahora tienes las herramientas para construir un backend crud seguro y eficiente para tus aplicaciones de android utilizando jetpack compose y back4app ¡feliz codificación!