How to Build a CRUD App with Backbone.js? A Step-by-Step Tutorial

introducción en esta guía, aprenderás cómo crear una aplicación crud funcional (crear, leer, actualizar, eliminar) utilizando backbone js este tutorial te ayudará a entender las operaciones básicas de una aplicación web mostrándote cómo construir un sistema crud que manipule y gestione datos de manera efectiva comenzarás configurando un proyecto de back4app titulado basic crud app backbone para servir como un backend confiable para tu aplicación después de eso, diseñarás un esquema de base de datos flexible definiendo colecciones y campos específicos, ya sea manualmente o con la ayuda del agente de ia de back4app este proceso asegura que la estructura de tus datos esté adaptada para interacciones crud sin problemas a continuación, utilizarás la intuitiva aplicación administrativa de back4app, que cuenta con una interfaz de arrastrar y soltar, para manejar fácilmente tus colecciones de datos esta herramienta simplifica las operaciones crud, haciendo que la gestión de datos en el backend sea sencilla finalmente, conectarás tu frontend de backbone js a back4app utilizando la api rest y la guía se basa en llamadas api estándar para interactuar con tu backend también aprenderás cómo asegurar tus datos con controles de acceso robustos al final de este tutorial, habrás construido una aplicación web lista para producción que soporta funcionalidades crud e incluye autenticación de usuarios junto con características avanzadas de gestión de datos conclusiones clave domina el arte de construir aplicaciones crud que manejen datos de manera efectiva utilizando un servicio backend confiable descubre estrategias para crear un diseño de base de datos escalable e integrarlo con un frontend de backbone js aprende a usar las funciones de arrastrar y soltar de la aplicación de administración de back4app para simplificar las tareas de crear, leer, actualizar y eliminar familiarízate con los métodos de implementación, incluida la contenedorización de docker, para lanzar rápidamente tu aplicación requisitos previos antes de comenzar, asegúrate de tener una cuenta de back4app y un proyecto activo consulta introducción a back4app https //www back4app com/docs/get started/new parse app si necesitas orientación una configuración de desarrollo de backbone js puedes incluir backbone js a través de un gestor de paquetes como npm o enlazando directamente desde un cdn un conocimiento básico de javascript, backbone js y apis restful consulta la documentación de backbone js https //backbonejs org/#getting started para un repaso si es necesario paso 1 – inicialización del proyecto creando tu proyecto de back4app inicie sesión en su cuenta de back4app haga clic en el botón “nueva aplicación” desde su panel de control nombre de su proyecto basic crud app backbone y siga las instrucciones para configurarlo crear nuevo proyecto una vez que su proyecto esté creado, será visible en su panel de control, listo para ser configurado como su backend para la aplicación paso 2 – creando el esquema de la base de datos definiendo su modelo de datos para esta aplicación crud, configurará varias colecciones a continuación se presentan colecciones de ejemplo con los campos y tipos que necesita para establecer su esquema, asegurando que su aplicación pueda realizar todas las operaciones crud 1\ colección de artículos esta colección contendrá detalles para cada artículo campo tipo de dato descripción 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 que indica cuándo se agregó el elemento actualizado en fecha marca de tiempo para la actualización más reciente 2\ colección de usuarios esta colección almacena detalles de usuarios e información de autenticación 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 del usuario hash de contraseña cadena contraseña hash segura creado en fecha marca de tiempo de creación de la cuenta actualizado en fecha última marca de tiempo de modificación de los datos del usuario puedes crear estas colecciones manualmente a través del panel de control de back4app añadiendo una nueva clase para cada colección y configurando los campos correspondientes crear nueva clase simplemente elige un tipo de dato, establece el nombre del campo, proporciona un valor predeterminado si es necesario y marca el campo como obligatorio crear columna aprovechando el agente ai de back4app para la creación de esquemas el agente ai de back4app es una herramienta útil dentro de tu panel que ayuda a automatizar la creación de esquemas de bases de datos al ingresar un aviso descriptivo para tus colecciones y campos deseados, el agente ai puede generar rápidamente la estructura de base de datos necesaria, ahorrándote tiempo y asegurando consistencia cómo usar el agente ai accede al agente ai inicia sesión en tu panel de back4app y localiza el agente ai en la navegación o en la configuración del proyecto detalla tu modelo de datos ingresa un aviso que describa las colecciones y campos que necesitas revisa e implementa evalúa el esquema sugerido y aplica los cambios a tu proyecto ejemplo de aviso create the following collections for 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) utilizar el agente ai asegura que tu esquema esté correctamente estructurado para los requisitos de tu aplicación paso 3 – activando la aplicación de administración y gestionando operaciones crud presentando la aplicación de administración la aplicación de administración de back4app es una interfaz sin código que te permite gestionar eficientemente tus datos de backend su diseño intuitivo de arrastrar y soltar hace que ejecutar operaciones crud como agregar, ver, modificar y eliminar registros sea increíblemente simple activando la aplicación de administración abre el menú “más” desde tu panel de back4app selecciona “aplicación de administración” y luego elige “habilitar aplicación de administración ” configura tus credenciales de administrador creando la cuenta de administrador inicial este paso también establece roles (como b4aadminuser ) y colecciones del sistema habilitar aplicación de administración después de la activación, inicia sesión en la aplicación de administración para manejar tus datos sin problemas panel de control de la aplicación de administración gestionando operaciones crud usando la aplicación de administración dentro de la aplicación de administración puedes agregar nuevas entradas usa la opción “agregar registro” en cualquier colección (por ejemplo, artículos) para crear nuevas entradas ver/modificar registros haz clic en un registro para inspeccionar o alterar sus detalles eliminar registros utiliza la función de eliminar para borrar datos no deseados esta interfaz mejora la experiencia del usuario al simplificar todas las tareas de gestión de datos paso 4 – conectando backbone js con back4app ahora que tu backend está configurado, es hora de integrar tu frontend de backbone js con back4app usando backbone js con llamadas a la api rest dado que el sdk de parse no está diseñado para backbone js, utilizarás los modelos, colecciones y vistas integrados de backbone junto con llamadas a la api rest para interactuar con back4app configurando tus modelos y colecciones de backbone comience definiendo un modelo para sus elementos y una colección correspondiente por ejemplo // models/item js var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items', idattribute 'objectid', defaults { title '', description '' } }); export default item; // collections/itemscollection js import item from ' /models/item'; var itemscollection = backbone collection extend({ model item, url 'https //parseapi back4app com/classes/items', parse function(response) { return response results; } }); export default itemscollection; construyendo una vista de backbone para interacciones crud crea una vista para renderizar la lista de elementos y manejar acciones del usuario como agregar, editar y eliminar // views/itemsview\ js import backbone from 'backbone'; import from 'underscore'; import itemscollection from ' /collections/itemscollection'; var itemsview = backbone view\ extend({ el '#app', initialize function() { this collection = new itemscollection(); this listento(this collection, 'sync update', this render); this collection fetch({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' } }); }, events { 'click #add item' 'additem', 'click delete item' 'deleteitem', 'click edit item' 'edititem', 'click #save edit' 'saveedit' }, render function() { var template = template(` \<h2>items\</h2> \<div> \<input id="new title" type="text" placeholder="title"> \<input id="new description" type="text" placeholder="description"> \<button id="add item">add item\</button> \</div> \<ul> <% collection each(function(item) { %> \<li data id="<%= item id %>"> \<strong><%= item get('title') %>\</strong> <%= item get('description') %> \<button class="edit item">edit\</button> \<button class="delete item">delete\</button> \</li> <% }); %> \</ul> \<div id="edit section" style="display\ none;"> \<input id="edit title" type="text"> \<input id="edit description" type="text"> \<button id="save edit">save\</button> \</div> `); this $el html(template({ collection this collection })); return this; }, additem function() { var title = this $('#new title') val(); var description = this $('#new description') val(); var newitem = this collection create( { title title, description description }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, wait true, success function() { console log('item added successfully '); }, error function(error) { console error('failed to add item ', error); } } ); }, deleteitem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); item destroy({ headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item removed '); }, error function(error) { console error('error deleting item ', error); } }); }, edititem function(e) { var itemid = $(e currenttarget) closest('li') data('id'); var item = this collection get(itemid); this $('#edit section') show(); this $('#edit title') val(item get('title')); this $('#edit description') val(item get('description')); this currenteditid = itemid; }, saveedit function() { var newtitle = this $('#edit title') val(); var newdescription = this $('#edit description') val(); var item = this collection get(this currenteditid); item save( { title newtitle, description newdescription }, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function() { console log('item updated '); }, error function(error) { console error('update failed ', error); } } ); this $('#edit section') hide(); } }); export default itemsview; esta vista obtiene elementos de back4app utilizando la api rest y te permite agregar, editar y eliminar registros paso 5 – asegurando tu backend implementando listas de control de acceso (acls) protege tus datos configurando acls en tus objetos por ejemplo, para restringir el acceso a un elemento únicamente a su creador function createsecureitem(itemdata, owner) { var item = backbone model extend({ urlroot 'https //parseapi back4app com/classes/items' }); var item = new item(); item set({ title itemdata title, description itemdata description }); // assume a custom api call or configuration that assigns acls based on the owner // here you would include acl headers or a similar mechanism as needed item save(null, { headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key' }, success function(saveditem) { console log('secure item created ', saveditem); }, error function(err) { console error('error creating secure item ', err); } }); } configurando permisos a nivel de clase (clps) dentro de tu panel de back4app, configura clps para cada colección para asegurar que solo los usuarios autorizados puedan acceder o modificar datos sensibles paso 6 – autenticación de usuarios configuración de cuentas de usuario en backbone js back4app utiliza un sistema de gestión de usuarios similar a la clase user de parse para la autenticación en tu aplicación backbone js, puedes manejar el registro y el inicio de sesión de usuarios utilizando llamadas ajax a la api rest de back4app por ejemplo, para registrar un nuevo usuario function signupuser(username, password, email) { $ ajax({ url 'https //parseapi back4app com/users', method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json' }, data json stringify({ username username, password password, email email }), success function(response) { alert('user registered successfully!'); }, error function(error) { alert('error during registration ' + error responsejson error); } }); } un método similar se puede aplicar para iniciar sesión y gestionar sesiones de usuarios paso 7 – desplegando tu frontend de backbone js la función de despliegue web de back4app te permite alojar tu aplicación backbone js sin problemas al vincular tu repositorio de github 7 1 creando una construcción de producción abre tu directorio de proyecto en una terminal ejecuta tu proceso de construcción si estás utilizando un corredor de tareas o un empaquetador (como webpack o gulp), ejecuta el comando (por ejemplo, npm run build ) para generar activos estáticos optimizados confirma la construcción asegúrate de que el directorio de salida de tu construcción contenga el archivo html principal y todas las carpetas de activos necesarias 7 2 organizando y subiendo tu código fuente tu repositorio de github debe incluir todos los archivos fuente de tu aplicación backbone js una estructura típica podría ser basic crud app backbone/ \| bower components/ \| public/ \| └── index html \| src/ \| ├── models/ \| │ └── item js \| ├── collections/ \| │ └── itemscollection js \| ├── views/ \| │ └── itemsview\ js \| └── app js \| package json \| readme md archivo de configuración de ejemplo src/app js import backbone from 'backbone'; import itemsview from ' /views/itemsview'; $(document) ready(function() { new itemsview(); }); empujando a github inicializa git (si no se ha hecho) git init prepara tus archivos git add confirma tus cambios git commit m "confirmación inicial del código frontend de backbone js" crea un repositorio en github (por ejemplo, basic crud app backbone ) empuja tu repositorio git remote add origin https //github com/your username/basic crud app backbone git git push u origin main 7 3 integrando tu repositorio con el despliegue web de back4app accede a la sección de despliegue web en tu panel de back4app, ve a tu proyecto y haz clic en la opción de despliegue web vincula tu cuenta de github sigue las instrucciones para autorizar a back4app a acceder a tu repositorio selecciona tu repositorio y rama elige tu repositorio basic crud app backbone y la rama principal 7 4 configuración de despliegue proporcionar configuraciones adicionales comando de construcción si no existen activos preconstruidos, especifique el comando (por ejemplo, npm run build ) para construir su aplicación directorio de salida designe la carpeta (por ejemplo, public o dist ) que contiene sus archivos estáticos variables de entorno agregue cualquier clave de api o configuraciones necesarias 7 5 dockerizando su proyecto backbone js si elige docker para el despliegue, incluya un dockerfile similar a \# use an official node image to build the application from node 16 alpine as builder \# set working directory workdir /app \# copy package files and install dependencies copy package json / run npm install \# copy the entire project and build the app copy run npm run build \# use nginx to serve the static files from nginx\ stable alpine copy from=builder /app/public /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] configura back4app para usar la implementación de docker si lo deseas 7 6 lanzando tu aplicación haz clic en el botón de despliegue una vez que tu configuración esté lista, presiona desplegar monitorea la construcción back4app obtendrá tu código, ejecutará el proceso de construcción y desplegará tu aplicación en contenedor obtén tu url en vivo después del despliegue, se proporcionará una url donde se aloja tu aplicación backbone js 7 7 verificando tu despliegue visita la url proporcionada abre la url en tu navegador para confirmar que tu aplicación se carga correctamente prueba la funcionalidad asegúrate de que la navegación, la obtención de datos y las operaciones crud funcionen como se espera soluciona problemas utiliza las herramientas del navegador y los registros de back4app para resolver cualquier problema paso 8 – conclusión y direcciones futuras ¡gran trabajo! has construido con éxito una aplicación crud utilizando backbone js y back4app has configurado un proyecto llamado basic crud app backbone , definido colecciones detalladas para items y usuarios, y gestionado tu backend utilizando la admin app además, integraste tu frontend de backbone js a través de llamadas a la api rest y aplicaste medidas de seguridad esenciales próximos pasos mejorar el frontend expande tu aplicación de backbone js con vistas más detalladas, capacidades de búsqueda y actualizaciones en tiempo real agregar nuevas funciones considera integrar lógica de backend más avanzada, apis de terceros o controles de acceso refinados aprendizaje adicional visita la documentación de back4app https //www back4app com/docs para obtener más información sobre mejoras de rendimiento e integraciones personalizadas al seguir este tutorial, ahora tienes la experiencia para crear un backend crud robusto y escalable para tu aplicación de backbone js utilizando back4app ¡disfruta programando y explorando nuevas funciones!