Cómo construir una aplicación CRUD básica con Marionette.js: Una guía paso a paso

introducción en esta guía, aprenderás cómo crear una aplicación crud completa (crear, leer, actualizar, eliminar) utilizando marionette js este tutorial te muestra cómo configurar una aplicación que gestiona operaciones de datos de manera eficiente comenzaremos configurando un proyecto de back4app llamado basic crud app marionettejs , que sirve como un potente backend para tu aplicación después de configurar tu proyecto, diseñarás un esquema de base de datos flexible definiendo colecciones y campos, ya sea manualmente o con la ayuda del agente de ia de back4app este enfoque asegura que tu backend esté bien organizado y sea capaz de manejar operaciones crud de manera confiable a continuación, utilizarás la aplicación administrativa de back4app, una interfaz de arrastrar y soltar, para gestionar tus colecciones sin esfuerzo, permitiéndote realizar operaciones de crear, leer, actualizar y eliminar con facilidad finalmente, integrarás tu frontend de marionette js con back4app utilizando rest/graphql (o el sdk de parse, si es aplicable), asegurando que tu backend permanezca seguro con controles de acceso avanzados al final de este tutorial, tendrás una aplicación web lista para producción que soporta operaciones crud junto con autenticación de usuarios y gestión segura de datos conclusiones clave construir aplicaciones crud que gestionen datos de manera efectiva utilizando un backend robusto obtener información sobre cómo crear un backend escalable y conectarlo a un frontend de marionette js aprender a usar una interfaz de gestión sin código (back4app admin app) para simplificar las operaciones de datos entender las técnicas de despliegue, incluida la contenedorización con docker, para lanzar rápidamente su aplicación requisitos previos antes de comenzar, asegúrese de tener lo siguiente una cuenta de back4app con un nuevo proyecto configurado para obtener orientación, consulte introducción a back4app https //www back4app com/docs/get started/new parse app un entorno de desarrollo de marionette js puede usar una plantilla o kit de inicio para marionette js asegúrese de que node js (versión 14 o superior) esté instalado un conocimiento básico de javascript, marionette js y apis rest consulte la documentación de marionette js https //marionettejs com/docs/master/ para más detalles paso 1 – configuración del proyecto creando un nuevo proyecto en back4app inicie sesión en su cuenta de back4app haga clic en el botón “nueva aplicación” en su panel de control nombre de su proyecto basic crud app marionettejs y complete los avisos crear nuevo proyecto después de crear el proyecto, aparecerá en su panel de control, proporcionando la base para la configuración y gestión del backend paso 2 – diseñando su esquema de base de datos creando su modelo de datos para esta aplicación crud, definirá varias colecciones aquí hay ejemplos de colecciones que podría crear, incluidos los campos y tipos de datos que impulsarán su base de datos 1\ colección de artículos esta colección contiene los detalles de cada artículo campo tipo de dato descripción id objectid identificador único generado automáticamente título cadena nombre del artículo descripción cadena un breve resumen sobre el artículo creado en fecha marca de tiempo de cuando se creó el elemento actualizado en fecha marca de tiempo para la última actualización 2\ colección de usuarios esta colección almacena las credenciales de usuario y los detalles del perfil campo tipo de dato descripción id objectid identificador único generado automáticamente nombre de usuario cadena identificador único para el usuario correo electrónico cadena dirección de correo electrónico única hash de contraseña cadena contraseña encriptada para la autenticación del usuario creado en fecha marca de tiempo para la creación de la cuenta actualizado en fecha marca de tiempo para la última actualización de la cuenta puedes agregar manualmente estas colecciones en el panel de control de back4app creando una nueva clase para cada una y definiendo sus respectivos campos crear nueva clase puedes crear campos seleccionando un tipo de dato, proporcionando un nombre, estableciendo valores predeterminados y marcándolos como obligatorios si es necesario crear columna utilizando el agente ai de back4app para la creación de esquemas el agente ai de back4app simplifica la creación de esquemas generando colecciones y campos a partir de un aviso descriptivo cómo usar el agente ai lanza el agente ai accede a él a través del menú de tu panel de control de back4app o la configuración del proyecto describe tu modelo de datos pega un aviso detallado que describa las colecciones y campos que necesitas revisa y confirma examina el esquema sugerido y aplícalo a tu proyecto 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) este método ahorra tiempo y asegura consistencia en el esquema de tu base de datos paso 3 – activando la aplicación de administración y realizando operaciones crud descripción general de la aplicación de administración la aplicación de administración de back4app ofrece una interfaz sin código, de arrastrar y soltar para gestionar tus datos de backend simplifica las operaciones crud como crear, leer, actualizar y eliminar registros habilitando la aplicación de administración abre el menú “más” en tu panel de back4app selecciona “admin app” luego haz clic en “habilitar admin app ” configura tus credenciales de administrador creando un usuario administrador, lo que también configura roles predeterminados como b4aadminuser habilitar admin app después de la activación, inicia sesión en la admin app para gestionar tus colecciones panel de admin app usando la admin app para tareas crud crear registros usa el botón “agregar registro” para insertar nuevas entradas en una colección leer/actualizar registros haz clic en un registro para ver o modificar sus detalles eliminar registros elimina registros obsoletos utilizando la opción de eliminar esta interfaz intuitiva mejora la interacción del usuario al simplificar la gestión de datos paso 4 – conectando marionette js con back4app con tu backend configurado y gestionado a través de la admin app, el siguiente paso es integrar tu frontend de marionette js con back4app opción a usando el sdk de parse (si es aplicable) instala el sdk de parse npm install parse inicializa parse en tu aplicación de marionette js crea un archivo de configuración (por ejemplo, app/parseconfig js ) // app/parseconfig js import parse from 'parse'; // inserta tus credenciales de back4app aquí parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; integra parse en una vista de marionette por ejemplo, crea una vista para obtener y renderizar elementos // app/views/itemsview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<h2>elementos\</h2> \<ul> <% items foreach(function(item) { %> \<li><%= item get("title") %> — <%= item get("description") %>\</li> <% }); %> \</ul> `), initialize() { this items = \[]; this fetchitems(); }, async fetchitems() { const items = parse object extend("items"); const query = new parse query(items); try { const results = await query find(); this items = results; this render(); } catch (error) { console error("error al obtener elementos ", error); } }, serializedata() { return { items this items }; } }); opción b usando rest o graphql si el sdk de parse no es una opción, puedes interactuar con back4app utilizando llamadas rest o graphql por ejemplo, para recuperar elementos a través de rest // example rest call to retrieve 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('retrieved items ', data results); } catch (error) { console error('error retrieving items ', error); } } fetchitems(); incorpora estas llamadas a la api en tus vistas o controladores de marionette js según sea necesario paso 5 – asegurando tu backend configurando listas de control de acceso (acls) asegura tus datos configurando acls en los objetos por ejemplo, para crear un elemento accesible solo para su propietario async function createprivateitem(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 solely to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); item setacl(acl); try { const saveditem = await item save(); console log('created private item ', saveditem); } catch (error) { console error('error saving private item ', error); } } configurando permisos a nivel de clase (clps) en el panel de back4app, configura clps para cada colección para hacer cumplir las reglas de acceso predeterminadas, asegurando que solo los usuarios autorizados puedan acceder a datos sensibles paso 6 – autenticación de usuario creación de cuentas de usuario back4app utiliza la clase user de parse para gestionar la autenticación en tu aplicación marionette js, maneja el registro y el inicio de sesión de usuarios como se muestra a continuación // app/views/authview\ js import { view } from 'backbone marionette'; import parse from ' /parseconfig'; export default view\ extend({ template template(` \<form id="signup form"> \<input type="text" id="username" placeholder="username" required /> \<input type="password" id="password" placeholder="password" required /> \<input type="email" id="email" placeholder="email" required /> \<button type="submit">sign up\</button> \</form> `), events { 'submit #signup form' 'handlesignup' }, async handlesignup(e) { e preventdefault(); const username = this $('#username') val(); const password = this $('#password') val(); const email = this $('#email') val(); const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); alert('registration successful!'); } catch (error) { alert('sign up error ' + error message); } } }); se puede seguir un patrón similar para el inicio de sesión y el manejo de sesiones funciones adicionales como el inicio de sesión social o restablecimientos de contraseña se pueden configurar a través del panel de back4app paso 7 – desplegando tu frontend de marionette js con despliegue web la función de despliegue web de back4app te permite alojar tu frontend de marionette js sin problemas al vincular tu repositorio de github 7 1 – construyendo tu versión de producción navega a tu directorio de proyecto en una terminal ejecuta el comando de construcción npm run build esto genera una build carpeta que contiene archivos estáticos optimizados (html, js, css, imágenes) confirma la construcción asegúrate de que la build carpeta incluya un archivo index html junto con los activos requeridos 7 2 – organizando y subiendo tu código fuente tu repositorio debe contener todo el código fuente de tu frontend de marionette js un ejemplo de estructura de archivos es basic crud app marionettejs frontend/ ├── node modules/ ├── public/ │ └── index html ├── app/ │ ├── app js │ ├── parseconfig js │ └── views/ │ ├── itemsview\ js │ └── authview\ js ├── package json └── readme md ejemplo de archivo de configuración app/parseconfig js // app/parseconfig 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; ejemplo de archivo de aplicación app/app js import marionette from 'backbone marionette'; import itemsview from ' /views/itemsview'; // initialize the marionette application const app = new marionette application({ region '#app' }); app on('start', function() { const itemsview = new itemsview(); app showview(itemsview); }); app start(); comprometiéndose a github inicializa un repositorio git (si no se ha hecho ya) git init prepara tus archivos git add confirma tus cambios git commit m "compromiso inicial para el frontend de marionette js" crea un repositorio en github (por ejemplo, basic crud app marionettejs frontend ) envía tu código git remote add origin https //github com/tu nombre de usuario/basic crud app marionettejs frontend git git push u origin main 7 3 – integrando su repositorio con despliegue web acceder al despliegue web en su panel de back4app, seleccione su proyecto (basic crud app marionettejs) y haga clic en despliegue web conectar a github siga las instrucciones para vincular su cuenta de github para que back4app pueda acceder a su repositorio seleccionar repositorio y rama elija el repositorio (por ejemplo, basic crud app marionettejs frontend ) y la rama (por ejemplo, main ) que contiene su código 7 4 – configurando su despliegue especificar configuraciones adicionales comando de construcción si falta una carpeta de construcción preconstruida, establece el comando de construcción (por ejemplo, npm run build ) back4app ejecutará esto durante el despliegue directorio de salida indica build como la carpeta que contiene tus archivos estáticos variables de entorno proporciona cualquier variable de entorno necesaria (como claves api) en la configuración de despliegue 7 5 – dockerizando tu aplicación marionette js si prefieres docker para el despliegue, contenedora tu aplicación incluyendo un dockerfile en tu repositorio \# use an official node image for building the app from node 16 alpine as build \# set working directory workdir /app \# copy dependency files and install dependencies copy package json / run npm install \# copy the app source code copy \# build the application run npm run build \# use nginx to serve the build files from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configura el despliegue web para usar la opción docker si lo deseas 7 6 – desplegando tu aplicación haz clic en el botón desplegar finaliza la configuración de tu despliegue y haz clic en desplegar monitorea la construcción back4app tomará tu código de github, ejecutará el comando de construcción y desplegará tu contenedor obtén tu url una vez desplegado, back4app proporcionará una url donde se aloja tu aplicación marionette js 7 7 – verificando tu despliegue visita la url proporcionada abre la url de despliegue en tu navegador prueba la aplicación asegúrate de que la aplicación se cargue correctamente y que toda la funcionalidad (rutas, activos) esté operativa soluciona problemas si es necesario utiliza las herramientas de desarrollador del navegador y revisa los registros de despliegue en back4app si ocurren problemas paso 8 – conclusión y próximos pasos ¡bien hecho! has construido con éxito una aplicación crud utilizando marionette js y back4app has configurado un proyecto llamado basic crud app marionettejs , creado colecciones de base de datos detalladas para items y users, y gestionado tus datos a través de la admin app también conectaste tu frontend de marionette js a tu backend e implementaste medidas de seguridad sólidas mejoras futuras refina tu frontend agrega características como vistas detalladas, capacidades de búsqueda y actualizaciones en tiempo real expande la funcionalidad del backend considera integrar cloud functions, apis de terceros o controles de acceso avanzados basados en roles aprendizaje adicional explora recursos adicionales en la documentación de back4app https //www back4app com/docs para optimizaciones e integraciones más avanzadas al seguir este tutorial, ahora posees el conocimiento para construir una aplicación crud robusta y escalable utilizando marionette js y back4app ¡feliz codificación!