Quickstarters
CRUD Samples
¿Cómo construir una aplicación CRUD con SwiftUI?
29 min
descripción general en esta guía, aprenderás a desarrollar una aplicación crud (crear, leer, actualizar y eliminar) completamente funcional utilizando swiftui swiftui es un marco para construir interfaces de usuario para ios, ipados, watchos, tvos, visionos y macos usaremos back4app como el servicio backend para gestionar nuestros datos este tutorial te guiará a través de la configuración de tu proyecto back4app, el diseño de tu esquema de base de datos, la integración con swiftui utilizando llamadas a la api y la seguridad de tu backend lo que aprenderás cómo construir una aplicación crud que maneje operaciones de datos sin problemas técnicas para diseñar un backend robusto y escalable métodos para conectar una interfaz de swiftui con back4app utilizando apis rest cómo gestionar datos de manera segura con controles de acceso avanzados requisitos previos cuenta de back4app asegúrate de haberte registrado y de haber configurado un nuevo proyecto en back4app consulta back4app quickstart https //www back4app com/docs/get started/new parse app para obtener ayuda entorno de swiftui confirma que tienes xcode instalado y un proyecto básico de swiftui creado familiaridad tener conocimientos básicos de swift, swiftui y apis restful será útil antes de comenzar paso 1 – estableciendo tu proyecto en back4app iniciar un nuevo proyecto en back4app accede a tu panel de back4app iniciando sesión en tu cuenta selecciona “nueva aplicación” para comenzar un nuevo proyecto nombra tu proyecto por ejemplo, basic crud app swiftui , y sigue las instrucciones en pantalla para completar la configuración crear nuevo proyecto una vez que tu proyecto esté creado, aparecerá en tu panel, listo para ser configurado para operaciones de backend paso 2 – creando tu esquema de base de datos definiendo tu modelo de datos para esta aplicación crud, necesitas definir varias colecciones (clases) a continuación se presentan ejemplos que describen colecciones clave junto con sus campos y tipos 1\ colección artículos esta colección almacena detalles sobre cada entrada campo tipo propósito id objectid clave primaria generada automáticamente título cadena nombre o título del artículo descripción cadena breve explicación sobre el artículo creado en fecha marca de tiempo que indica la creación actualizado en fecha marca de tiempo de la última actualización 2\ colección usuarios esta colección contiene credenciales de usuario y detalles del perfil campo tipo propósito id objectid identificador único generado automáticamente nombre de usuario cadena nombre de usuario único para iniciar sesión correo electrónico cadena la dirección de correo electrónico única del usuario hash de contraseña cadena contraseña encriptada para la autenticación creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha marca de tiempo de la última modificación de la cuenta puedes configurar estas clases manualmente a través del panel de control de back4app creando nuevas clases y añadiendo columnas para cada campo crear nueva clase utiliza las herramientas del panel de control para definir el nombre del campo, tipo, valor predeterminado y estado requerido crear columna aprovechando el agente ai de back4app el agente ai de back4app simplifica el proceso de generación de esquemas puede producir automáticamente el esquema de su base de datos basado en un aviso textual cómo utilizar el agente ai localiza el agente ai inicia sesión y navega a la sección del agente ai en la configuración de tu proyecto envía la descripción de tu esquema ingresa un aviso detallado que describa las colecciones y campos deseados revisa e implementa después de la generación, verifica el esquema y aplica los cambios ejemplo de aviso create these collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ created at date (auto generated) \ updated at date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ password hash string \ created at date (auto generated) \ updated at date (auto updated) esta función ahorra tiempo y asegura consistencia en la configuración de su base de datos paso 3 – gestionando datos con la interfaz de administración descripción general de la interfaz de administración la aplicación de administración de back4app es una herramienta sin código que simplifica la gestión de datos su interfaz intuitiva de arrastrar y soltar te permite realizar operaciones crud sin esfuerzo activando la interfaz de administración ve al menú “más” en tu panel de back4app selecciona “admin app” y luego elige “habilitar admin app ” configura credenciales crea tu usuario administrador inicial, que configura los roles del sistema automáticamente habilitar admin app después de la activación, inicia sesión en la admin app para gestionar tus colecciones panel de control de admin app operaciones crud en la interfaz de administración crear usa la opción “agregar registro” en cualquier colección (por ejemplo, artículos) para agregar nuevos datos leer/actualizar haz clic en un registro para ver detalles y modificar campos eliminar elimina registros usando la función de eliminar cuando ya no sean necesarios esta interfaz mejora la usabilidad y simplifica las operaciones diarias de datos paso 4 – integrando swiftui con back4app con tu backend en su lugar, es hora de conectar tu aplicación swiftui a back4app uso de llamadas a la api rest en swiftui en lugar de depender del sdk, utilizaremos llamadas a la api rest para interactuar con back4app desde nuestra aplicación swiftui ejemplo recuperando elementos crea una nueva vista de swiftui (por ejemplo, itemslistview\ swift ) y agrega el siguiente código import swiftui import combine struct item identifiable, codable { let id string let title string let description string } class itemsviewmodel observableobject { @published var items \[item] = \[] private var cancellables = set\<anycancellable>() func fetchitems() { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") urlsession shared datataskpublisher(for request) map { $0 data } decode(type itemsresponse self, decoder jsondecoder()) receive(on dispatchqueue main) sink(receivecompletion { completion in if case let failure(error) = completion { print("error fetching items \\(error)") } }, receivevalue { response in self items = response results }) store(in \&cancellables) } } struct itemsresponse codable { let results \[item] } struct itemslistview view { @stateobject private var viewmodel = itemsviewmodel() var body some view { navigationview { list(viewmodel items) { item in vstack(alignment leading) { text(item title) font( headline) text(item description) font( subheadline) } } navigationtitle("items") onappear { viewmodel fetchitems() } } } } struct itemslistview previews previewprovider { static var previews some view { itemslistview() } } esta vista obtiene datos de back4app a través de rest y los muestra en una lista operaciones adicionales de api creando nuevos elementos usa urlsession con una solicitud post para agregar nuevas entradas actualizando elementos implementa solicitudes put para modificar datos existentes eliminando elementos utiliza solicitudes delete para eliminar datos integra estas operaciones de red dentro de tus vistas de swiftui según sea necesario paso 5 – asegurando tu backend implementando controles de acceso protege tus datos configurando listas de control de acceso (acl) para tus objetos por ejemplo, para crear un registro de ítem seguro func createsecureitem(title string, description string, ownerid string) { guard let url = url(string "https //parseapi back4app com/classes/items") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let itemdata \[string any] = \[ "title" title, "description" description, "acl" \[ ownerid \["read" true, "write" true], " " \["read" false, "write" false] ] ] request httpbody = try? jsonserialization data(withjsonobject itemdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("error creating item \\(error)") } } resume() } configurando permisos a nivel de clase dentro de tu panel de back4app, ajusta los permisos a nivel de clase (clps) para cada colección para hacer cumplir quién puede leer o escribir datos por defecto paso 6 – implementando autenticación de usuario estableciendo cuentas de usuario back4app utiliza una clase de usuario para manejar la autenticación en tu aplicación swiftui, gestiona el registro y el inicio de sesión a través de llamadas a la api rest ejemplo registro de usuario func signupuser(username string, password string, email string) { guard let url = url(string "https //parseapi back4app com/users") else { return } var request = urlrequest(url url) request httpmethod = "post" request addvalue("your application id", forhttpheaderfield "x parse application id") request addvalue("your rest api key", forhttpheaderfield "x parse rest api key") request addvalue("application/json", forhttpheaderfield "content type") let userdata \[string any] = \[ "username" username, "password" password, "email" email ] request httpbody = try? jsonserialization data(withjsonobject userdata) urlsession shared datatask(with request) { data, response, error in if let error = error { print("sign up error \\(error)") } else { print("user registered successfully") } } resume() } este enfoque se puede extender para el inicio de sesión de usuarios y la gestión de sesiones paso 7 – conclusión y mejoras futuras ¡gran trabajo! has construido con éxito una aplicación crud básica utilizando swiftui y back4app creaste un proyecto titulado basic crud app swiftui , diseñaste tu esquema de base de datos para items y users, y conectaste tu frontend de swiftui al backend a través de llamadas a la api rest además, aprendiste cómo asegurar tus datos con acls e implementar la autenticación de usuarios ¿qué sigue? expande tu ui mejora tu interfaz de swiftui con vistas detalladas, animaciones y elementos interactivos características avanzadas incorpora lógica adicional del backend como funciones en la nube o actualizaciones de datos en tiempo real explora más visita la documentación de back4app https //www back4app com/docs para obtener más información sobre cómo optimizar tu aplicación e integrar funcionalidades más avanzadas siguiendo esta guía, ahora tienes las habilidades esenciales para crear un backend crud robusto y escalable para tus aplicaciones swiftui utilizando back4app ¡disfruta construyendo e innovando!