How to Build a CRUD Application with Aurelia? A Comprehensive Tutorial

descripción general en esta guía, aprenderás cómo crear una aplicación crud simple (crear, leer, actualizar, eliminar) utilizando el marco aurelia este tutorial explica cómo construir una aplicación capaz de manejar operaciones de datos esenciales integrando aurelia con back4app como tu servicio backend inicialmente, configurarás un proyecto de back4app titulado basic crud app aurelia para servir como tu robusto sistema de gestión de datos a continuación, esbozarás una estructura de base de datos escalable definiendo manualmente colecciones y campos—o utilizando el agente ai de back4app—para asegurar operaciones de datos confiables posteriormente, aprovecharás la aplicación administrativa de back4app, que ofrece una interfaz de arrastrar y soltar para gestionar tus datos sin esfuerzo finalmente, conectarás tu frontend de aurelia con back4app utilizando llamadas rest/graphql (o el sdk de parse donde sea aplicable), y asegurarás tu backend con un control de acceso detallado al final de este tutorial, tendrás una aplicación web lista para producción con funcionalidad crud completa, autenticación de usuarios y manejo seguro de datos perspectivas principales domina la construcción de aplicaciones crud con un servicio backend confiable adquiere habilidades prácticas para diseñar un backend escalable y vincularlo a un frontend de aurelia explora una interfaz de administración sin código (back4app admin app) para operaciones de datos sin problemas aprende a desplegar tu aplicación utilizando técnicas modernas, incluida la contenedorización requisitos previos antes de comenzar, asegúrate de tener lo siguiente una cuenta de back4app con un proyecto activo visita introducción a back4app https //www back4app com/docs/get started/new parse app si necesitas orientación una configuración de desarrollo de aurelia utiliza la cli de aurelia o una herramienta similar; asegúrate de tener node js (versión 14 o posterior) instalado conocimientos básicos en javascript, aurelia y apis rest consulta la documentación de aurelia https //aurelia io/docs para más detalles si es necesario paso 1 – configurando tu proyecto creando un nuevo proyecto en back4app inicia sesión en tu cuenta de back4app presiona el botón “nueva aplicación” desde tu panel de control ingresa el nombre del proyecto basic crud app aurelia y completa los pasos de configuración crear nuevo proyecto después de la creación, tu proyecto será visible en tu panel de control, listo para la configuración del backend y la gestión de datos paso 2 – diseñando el esquema de tu base de datos elaborando el modelo de datos para esta aplicación crud, definirás múltiples colecciones a continuación se presentan ejemplos de las colecciones requeridas junto con los campos y tipos de datos necesarios para apoyar las operaciones crud de manera efectiva 1\ colección de artículos campo tipo de dato detalles id objectid clave primaria generada 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 cuando se creó el elemento actualizado en fecha marca de tiempo cuando el elemento fue modificado por última vez 2\ colección de usuarios campo tipo de dato detalles id objectid clave primaria generada automáticamente nombre de usuario cadena identificador único para el usuario correo electrónico cadena dirección de correo electrónico única para la validación de la cuenta hash de contraseña cadena contraseña encriptada para la autenticación de usuarios creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha marca de tiempo de la última actualización de la cuenta puedes crear estas colecciones manualmente en el panel de control de back4app añadiendo una nueva clase para cada una y definiendo las columnas necesarias crear nueva clase configura fácilmente los campos de tu base de datos eligiendo el tipo de dato correcto, especificando los nombres de los campos, estableciendo valores predeterminados e indicando si el campo es obligatorio crear columna empleando el agente ai de back4app para la creación de esquemas el agente ai de back4app simplifica la generación de esquemas al permitirte describir tu modelo de datos a través de indicaciones esta herramienta crea automáticamente colecciones y campos basados en tus requisitos pasos para usar el agente ai lanza el agente ai abre tu panel de back4app y localiza el agente ai en la configuración del proyecto describe tu esquema ingresa una indicación detallada que describa las colecciones y campos que requieres revisa y confirma examina las sugerencias de esquema generadas y aplícalas a tu proyecto ejemplo de indicación create the following 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) este método acelera el proceso de creación de esquemas y garantiza una estructura consistente para tu aplicación paso 3 – activando la interfaz de administración y funcionalidad crud explorando la interfaz de administración la aplicación de administración de back4app es una solución robusta sin código que te permite gestionar tus datos de backend a través de una interfaz de arrastrar y soltar fácil de usar esta herramienta simplifica la ejecución de operaciones crud activando la aplicación de administración abre el menú “más” en tu panel de back4app selecciona “admin app” y luego haz clic en “habilitar admin app ” configura tus credenciales de administrador creando tu cuenta de administrador inicial, que también establece roles predeterminados (como b4aadminuser ) y colecciones del sistema habilitar admin app después de habilitar, inicia sesión en la admin app para comenzar a gestionar tus datos panel de admin app realizando operaciones crud con la admin app dentro de esta interfaz puedes crear entradas usa la opción “agregar registro” en una colección (por ejemplo, artículos) para agregar nuevos datos ver/modificar entradas haz clic en cualquier registro para inspeccionar sus detalles o hacer cambios eliminar entradas selecciona la opción de eliminar para eliminar datos que ya no son necesarios esta interfaz optimiza tus operaciones de datos, mejorando la experiencia del usuario con su diseño intuitivo paso 4 – vinculando aurelia con back4app con tu backend configurado y gestionado a través de la admin app, es hora de conectar tu frontend de aurelia a back4app utilizando rest o graphql puedes usar apis rest o graphql por ejemplo, para obtener elementos a través de rest // example rest request to get items async function fetchitems() { 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(); console log('items fetched ', data results); } catch (error) { console error('fetch error ', error); } } fetchitems(); integra estas llamadas a la api dentro de tus componentes de aurelia según sea necesario paso 5 – protegiendo tu backend implementando listas de control de acceso (acls) mejora la seguridad asignando acls a tus objetos de datos por ejemplo, para crear un elemento privado async function createsecureitem(itemdata, owneruser) { const items = parse object extend('items'); const item = new items(); item set('title', itemdata title); item set('description', itemdata description); // configure acl restrict access to the owner only const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('secure item created ', saveditem); } catch (error) { console error('error saving secure item ', error); } } configurando permisos a nivel de clase (clps) dentro del panel de control de back4app, ajusta los clps para cada colección para hacer cumplir las reglas de seguridad predeterminadas, asegurando que solo los usuarios autenticados o autorizados puedan acceder a información sensible paso 6 – gestionando la autenticación de usuarios configurando cuentas de usuario back4app utiliza la clase user de parse para manejar la autenticación en tu aplicación de aurelia, puedes gestionar el registro y el inicio de sesión de usuarios como se ilustra a continuación // src/resources/components/auth js import { observable } from 'aurelia framework'; import parse from ' / /parse config'; export class auth { @observable username = ''; @observable password = ''; @observable email = ''; async signup(event) { event preventdefault(); const user = new parse user(); user set('username', this username); user set('password', this password); user set('email', this email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('registration error ' + error message); } } } un patrón similar se puede implementar para el inicio de sesión y la gestión de sesiones funcionalidades adicionales, como la integración de inicio de sesión social, verificación de correo electrónico y restablecimiento de contraseña, se pueden configurar a través del panel de control de back4app paso 7 – desplegando tu frontend de aurelia a través de web deployment la función de web deployment de back4app te permite alojar tu aplicación de aurelia de manera eficiente al desplegar el código desde un repositorio de github en esta sección, prepararás tu build de producción, commitearás tu código en github, conectarás tu repositorio con web deployment y desplegarás tu sitio 7 1 crea tu build de producción abre el directorio de tu proyecto en la terminal ejecuta el comando de build au build env production este comando genera una dist carpeta que contiene tus activos estáticos optimizados confirma el build asegúrate de que la dist carpeta incluya un index html y los subdirectorios necesarios para javascript, css e imágenes 7 2 organiza y sube el código de tu proyecto tu repositorio de github debería albergar todos los archivos fuente para tu frontend de aurelia una estructura de ejemplo podría ser basic crud app aurelia frontend/ \| node modules/ \| public/ \| ` index html \| src/ \| | app js \| | parse config js \| ` resources/ \| | components/ \| | | items list js \| | ` auth js \| package json ` readme md archivos de ejemplo src/parse config js import parse from 'parse'; // insert your back4app credentials here parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; src/app js import { aurelia } from 'aurelia framework'; import environment from ' /environment'; export function configure(aurelia) { aurelia use standardconfiguration() developmentlogging(); if (environment debug) { aurelia use developmentlogging(); } aurelia start() then(() => aurelia setroot()); } este es un texto adicional en otro idioma comprometiendo tu código en github inicializa git en tu carpeta de proyecto (si no se ha hecho ya) git init prepara tus archivos git add confirma tus cambios git commit m "compromiso inicial del código fuente del frontend de aurelia" crea un repositorio en github (por ejemplo, basic crud app aurelia frontend ) sube tu código a github git remote add origin https //github com/tu nombre de usuario/basic crud app aurelia frontend git git push u origin main 7 3 vinculando tu repositorio de github con el despliegue web accede al despliegue web inicia sesión en tu panel de back4app, navega a tu proyecto (basic crud app aurelia) y selecciona la opción despliegue web conéctate a github sigue las instrucciones para integrar tu cuenta de github, otorgando a back4app acceso a tu repositorio elige tu repositorio y rama selecciona el repositorio (por ejemplo, basic crud app aurelia frontend ) y la rama (por ejemplo, main ) que contiene tu código 7 4 configuración del despliegue establezca los siguientes detalles de configuración comando de construcción si la dist carpeta no está preconstruida, especifique un comando (por ejemplo, au build env production ) para que back4app lo ejecute directorio de salida establezca esto en dist para que back4app sepa dónde se encuentran sus archivos estáticos variables de entorno agregue cualquier variable de entorno requerida (como claves api) en la configuración 7 5 contenerizando su aplicación aurelia (docker) si prefiere el despliegue con docker, incluya un dockerfile en su repositorio similar al siguiente \# use an official node image as the build environment from node 16 alpine as build \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy remaining files and build the app copy run au build env production \# use nginx to serve the production build from nginx\ stable alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configure la opción de despliegue de docker en despliegue web en consecuencia 7 6 desplegando tu aplicación presiona el botón de despliegue después de configurar el despliegue, haz clic en desplegar monitorea el proceso de construcción back4app obtendrá tu código de github, ejecutará el comando de construcción si es necesario, y desplegará tu aplicación en un contenedor recupera tu url una vez que el despliegue esté completo, back4app proporcionará la url donde se aloja tu aplicación aurelia 7 7 verificando tu despliegue abre la url proporcionada visita la url en tu navegador para ver tu sitio en vivo prueba la aplicación asegúrate de que tu aplicación se cargue correctamente, que las rutas funcionen como se espera, y que todos los activos (css, javascript, imágenes) se sirvan soluciona problemas si es necesario utiliza las herramientas de desarrollador del navegador para diagnosticar cualquier problema, y revisa los registros de despliegue de back4app si es necesario paso 8 – conclusión y direcciones futuras ¡felicidades! has construido con éxito una aplicación crud completa utilizando aurelia y back4app has configurado un proyecto llamado basic crud app aurelia , definido esquemas de base de datos completos para items y users, y gestionado tus datos utilizando la aplicación de administración de back4app también has integrado tu frontend de aurelia con el backend e implementado medidas de seguridad robustas próximos pasos mejora tu ui expande tu aplicación aurelia con vistas detalladas, funcionalidades de búsqueda y actualizaciones de datos en tiempo real agrega características avanzadas considera incorporar funciones en la nube, apis de terceros o permisos basados en roles explora más consulta la documentación de back4app https //www back4app com/docs y recursos adicionales de aurelia para obtener una guía más profunda sobre optimización y personalización ¡feliz codificación y buena suerte en tu viaje de desarrollo!