Cómo crear una aplicación CRUD con Svelte?

descripción general en este tutorial, aprenderás cómo construir una aplicación crud completa (crear, leer, actualizar, eliminar) utilizando svelte utilizaremos back4app como nuestra plataforma backend, que ofrece un backend robusto de bajo código para gestionar los datos de tu aplicación esta guía explica cómo configurar un proyecto de back4app, diseñar un esquema de datos versátil e implementar operaciones crud dentro de una aplicación svelte inicialmente, crearás un proyecto de back4app titulado basic crud app svelte este proyecto forma la base de tu configuración backend, donde definirás tu esquema de datos ya sea manualmente o con la ayuda del agente ai integrado de back4app a continuación, explorarás la aplicación administrativa de back4app—una interfaz fácil de usar para la gestión de datos—que te permitirá realizar operaciones crud de manera sencilla finalmente, conectarás tu aplicación svelte a back4app, utilizando ya sea el sdk de javascript de parse o llamadas directas a la api rest/graphql, asegurando un manejo seguro de los datos al final de este tutorial, tendrás una aplicación svelte completamente funcional que realiza tareas crud básicas junto con una autenticación de usuario segura lo que aprenderás cómo configurar una aplicación crud basada en svelte con un backend flexible métodos para organizar tu backend y conectarlo a tu aplicación svelte cómo aprovechar la aplicación administrativa de back4app para operaciones de datos sin problemas estrategias para desplegar tu aplicación svelte, incluyendo la contenedorización con docker requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app con un proyecto activo ¿necesitas ayuda? visita back4app guía de inicio https //www back4app com/docs/get started/new parse app para obtener orientación una configuración de desarrollo de svelte puedes usar un editor de código como vscode y asegurarte de que node js esté instalado familiaridad básica con svelte, javascript y apis rest revisa la documentación de svelte https //svelte dev/docs si es necesario paso 1 – configurando tu proyecto lanzando un nuevo proyecto en back4app inicia sesión en tu cuenta de back4app haz clic en el botón “nueva aplicación” en tu panel nombra tu proyecto basic crud app svelte y sigue las instrucciones en pantalla para completar la configuración crear nuevo proyecto después de crear tu proyecto, lo verás en tu panel, que sirve como la base para configurar tu backend paso 2 – creando el esquema de datos estructurando tus datos para esta aplicación crud, necesitas definir algunas colecciones en tu proyecto de back4app a continuación se presentan ejemplos de las colecciones y campos clave necesarios para soportar tus operaciones crud en svelte 1\ colección de items esta colección almacena información para cada artículo campo tipo detalles id objectid identificador único generado automáticamente título cadena nombre o título del artículo descripción cadena descripción breve del artículo creadoen fecha marca de tiempo cuando se creó el elemento actualizadoen fecha marca de tiempo para la última actualización del artículo 2\ colección de usuarios esta colección gestiona las credenciales de usuario y los detalles de autenticación campo tipo detalles id objectid identificador único generado automáticamente nombre de usuario cadena nombre de usuario único para cada usuario correo electrónico cadena dirección de correo electrónico del usuario hashdecontraseña cadena contraseña encriptada para la autenticación creadoen fecha marca de tiempo de creación de la cuenta actualizadoen fecha marca de tiempo para la última actualización de la cuenta puedes crear estas colecciones y definir campos directamente desde tu panel de control de back4app crear nueva clase puedes agregar campos eligiendo el tipo apropiado, nombrando el campo, estableciendo valores predeterminados y marcándolo como obligatorio crear columna usando el agente de ia de back4app para generación rápida de esquemas el agente de ia integrado en back4app puede configurar automáticamente tu esquema de datos basado en una descripción simple esta herramienta agiliza el proceso de configuración y asegura que tu esquema esté optimizado para operaciones crud cómo utilizar el agente de ia abre el agente de ia en la configuración de tu proyecto en el panel de back4app, encuentra el agente de ia detalla tus requisitos de esquema proporciona un aviso claro que describa las colecciones y campos que necesitas revisa y confirma revisa el esquema propuesto y confirma para aplicarlo ejemplo de aviso create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) este método ahorra tiempo y asegura que tu esquema de backend esté perfectamente alineado con las necesidades de tu aplicación paso 3 – gestionando datos con la aplicación de administración descripción general de la aplicación de administración la aplicación de administración de back4app ofrece un entorno sin código para gestionar tus datos de backend con su interfaz de arrastrar y soltar, puedes realizar fácilmente operaciones como agregar, editar y eliminar registros activando la aplicación de administración ve al menú “más” en tu panel de back4app selecciona “aplicación de administración” y luego haz clic en “habilitar aplicación de administración ” configura tu cuenta de administrador siguiendo las indicaciones para establecer tus credenciales este proceso también configurará roles (como b4aadminuser ) y otras configuraciones del sistema habilitar aplicación de administración una vez habilitada, inicia sesión en la aplicación de administración para gestionar eficazmente los datos de tu proyecto panel de administración de la aplicación cómo usar la aplicación de administración insertar nuevos registros utiliza la función “agregar registro” en una colección (como artículos) para introducir nuevos datos examinar o editar registros haz clic en un registro para ver sus detalles o modificar sus campos eliminar registros elimina entradas de datos obsoletas o innecesarias esta interfaz intuitiva hace que gestionar tus datos de backend sea sencillo y eficiente paso 4 – conectando tu aplicación svelte a back4app ahora que tu backend está configurado, es hora de vincular tu aplicación svelte a back4app opción a usando el sdk de javascript de parse instala el sdk usa npm o yarn para instalar el sdk de javascript de parse npm install parse inicializa parse en tu aplicación svelte en tu archivo principal de javascript (por ejemplo, src/main js ), inicializa parse // src/main js import parse from 'parse'; parse initialize("your application id", "your javascript key"); parse serverurl = 'https //parseapi back4app com'; // tu código de inicialización de la aplicación svelte sigue implementa funciones crud crea un módulo (por ejemplo, src/services/items js ) para manejar operaciones crud // src/services/items js import parse from 'parse'; export async function fetchitems() { const query = new parse query("items"); try { const results = await query find(); return results; } catch (error) { console error("error al obtener elementos ", error); return \[]; } } export async function additem(title, description) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); try { await item save(); console log("¡elemento creado con éxito!"); } catch (error) { console error("error al crear el elemento ", error); } } export async function updateitem(objectid, newtitle, newdescription) { const query = new parse query("items"); try { const item = await query get(objectid); item set("title", newtitle); item set("description", newdescription); await item save(); console log("¡elemento actualizado con éxito!"); } catch (error) { console error("error al actualizar el elemento ", error); } } export async function removeitem(objectid) { const query = new parse query("items"); try { const item = await query get(objectid); await item destroy(); console log("¡elemento eliminado con éxito!"); } catch (error) { console error("error al eliminar el elemento ", error); } } opción b usando apis rest/graphql si el sdk de parse no es ideal para tu caso de uso, puedes invocar directamente los endpoints rest o graphql de back4app por ejemplo, para recuperar elementos a través de rest export async function getitemsrest() { try { const response = await fetch('https //parseapi back4app com/classes/items', { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); const data = await response json(); return data results; } catch (error) { console error("rest error fetching items ", error); return \[]; } } integra estas llamadas a la api dentro de tus componentes svelte según sea necesario paso 5 – asegurando tu backend uso de listas de control de acceso (acls) mejora la seguridad de tus datos configurando acls en tus objetos por ejemplo, para crear un elemento visible solo para su propietario import parse from 'parse'; export async function createprivateitem(title, description, owner) { const item = parse object extend("items"); const item = new item(); item set("title", title); item set("description", description); const acl = new parse acl(); acl setreadaccess(owner, true); acl setwriteaccess(owner, true); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { await item save(); console log("private item successfully created!"); } catch (error) { console error("error saving private item ", error); } } configurando permisos a nivel de clase (clps) configura clps directamente en tu panel de control de back4app para restringir el acceso de modo que solo los usuarios autenticados puedan interactuar con ciertas colecciones paso 6 – implementando la autenticación de usuarios en svelte configurando cuentas de usuario back4app aprovecha la colección de usuarios integrada de parse para gestionar la autenticación en tu aplicación svelte, implementa funciones de registro e inicio de sesión similares a los ejemplos a continuación import parse from 'parse'; export async function registeruser(username, password, email) { const user = new parse user(); user set("username", username); user set("password", password); user set("email", email); try { await user signup(); console log("user registered successfully!"); } catch (error) { console error("registration error ", error); } } export async function loginuser(username, password) { try { const user = await parse user login(username, password); console log("user logged in ", user get("username")); } catch (error) { console error("login failed ", error); } } este enfoque se puede extender para gestionar sesiones, restablecimientos de contraseña y características adicionales de autenticación paso 7 – desplegando tu aplicación svelte back4app simplifica el proceso de despliegue puedes desplegar tu aplicación svelte utilizando varios métodos, incluida la contenedorización con docker 7 1 compila tu aplicación svelte compila tu aplicación ejecuta tu comando de compilación de svelte, típicamente npm run build revisa la compilación asegúrate de que los archivos generados (generalmente en la public o build carpeta) incluyan todos los activos necesarios 7 2 ejemplo de estructura del proyecto una estructura típica de proyecto svelte podría verse así basic crud app svelte/ \| public/ \| | build/ \| | global css \| | index html \| src/ \| | components/ \| | | itemlist svelte \| | | itemform svelte \| | services/ \| | | items js \| | | auth js \| | app svelte \| | main js \| package json \| readme md 7 3 contenerizando tu aplicación svelte si prefieres un despliegue en contenedores, crea un dockerfile en la raíz de tu proyecto \# use a node js image to build the app from node 16 alpine as build \# set the working directory workdir /app \# copy package files and install dependencies copy package json package lock json / run npm install \# copy the rest of the project files and build the app copy run npm run build \# use a lightweight server to serve the built files from nginx\ alpine copy from=build /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 despliegue a través de back4app web deployment vincula tu repositorio de github aloja tu proyecto svelte en github configura el despliegue en back4app en el panel de back4app, elige la web deployment opción, conecta tu repositorio (por ejemplo, basic crud app svelte ), y selecciona tu rama objetivo define la configuración de construcción especifica tu comando de construcción (como npm run build ) y apunta al directorio de salida de la construcción despliega tu aplicación haz clic en desplegar y monitorea los registros hasta que tu aplicación esté en línea paso 8 – conclusión y mejoras futuras ¡felicidades! has construido una aplicación crud basada en svelte que se conecta a back4app has configurado un proyecto llamado basic crud app svelte , configurado colecciones para items y usuarios, y gestionado tus datos a través de la aplicación de administración de back4app luego integraste tu frontend de svelte utilizando el sdk de javascript de parse (o rest/graphql) y añadiste medidas de seguridad robustas ¿qué sigue? expandir funcionalidad añadir características como búsqueda avanzada, vistas detalladas o actualizaciones en tiempo real mejorar la lógica del backend experimentar con funciones en la nube, integraciones de api de terceros o control de acceso basado en roles profundizar tu aprendizaje explorar más tutoriales y la documentación de back4app https //www back4app com/docs para optimizar tu aplicación ¡feliz codificación y disfruta construyendo tu aplicación crud en svelte!