¿Cómo construir un backend para BackboneJS?

introducción en este tutorial, aprenderás a construir un backend completo para una aplicación backbonejs utilizando back4app recorreremos la integración de características esenciales de back4app, como la gestión de bases de datos, funciones de cloud code, apis rest y graphql, autenticación de usuarios y consultas en tiempo real (live queries), para crear un backend seguro, escalable y robusto que se comunique sin problemas con tu frontend de backbonejs también verás cómo la configuración rápida y el entorno intuitivo de back4app pueden reducir drásticamente el tiempo y el esfuerzo en comparación con la configuración manual de servidores y bases de datos a lo largo del camino, adquirirás experiencia práctica con funcionalidades clave, incluyendo características de seguridad avanzadas, programación de tareas con cloud jobs y configuración de webhooks para integraciones externas al final de este tutorial, estarás bien preparado para mejorar esta configuración básica en una aplicación lista para producción, o incorporar fácilmente lógica personalizada y apis de terceros según sea necesario requisitos previos para completar este tutorial, necesitarás una cuenta de back4app y un nuevo proyecto de back4app comenzando con back4app https //www back4app com/docs/get started/new parse app si no tienes una cuenta, puedes crear una gratis sigue la guía anterior para preparar tu proyecto entorno de desarrollo básico de backbonejs puedes configurarlo incluyendo backbonejs https //backbonejs org/ en tu proyecto asegúrate de tener node js instalado en tu máquina si planeas servir o empaquetar tu aplicación backbone localmente node js (versión 14 o superior) instalado necesitarás node js para instalar paquetes npm y ejecutar servidores de desarrollo locales instalando node js https //nodejs org/en/download/ familiaridad con javascript y conceptos básicos de backbonejs documentación oficial de backbonejs https //backbonejs org/ si eres nuevo en backbone, revisa la documentación oficial o un tutorial para principiantes antes de comenzar asegúrate de tener todos estos requisitos previos en su lugar antes de comenzar tener tu proyecto de back4app configurado y tu entorno local de backbonejs listo te ayudará a seguir más fácilmente paso 1 – configuración del proyecto de back4app crear un nuevo proyecto el primer paso para construir tu backend de backbonejs en back4app es crear un nuevo proyecto si aún no has creado uno, sigue estos pasos inicia sesión en tu cuenta de back4app haz clic en el botón “nueva app” en tu panel de back4app dale un nombre a tu app (por ejemplo, “backbonejs backend tutorial”) una vez que se crea el proyecto, lo verás listado en tu panel de back4app este proyecto será la base para todas las configuraciones de backend discutidas en este tutorial conectar el sdk de parse back4app se basa en la plataforma parse para gestionar tus datos, proporcionar características en tiempo real, manejar la autenticación de usuarios y más conectar tu aplicación backbonejs a back4app implica instalar el paquete npm de parse (o incluir el script del sdk de parse) e inicializarlo con las credenciales de tu panel de back4app recupera tus claves de parse en tu panel de back4app, navega a la sección “configuraciones de la app” o “seguridad y claves” de tu app para encontrar tu id de aplicación y clave de javascript también encontrarás la url del servidor de parse (a menudo en el formato https //parseapi back4app com ) instala el sdk de parse en tu proyecto npm install parse si estás usando yarn, puedes instalarlo con yarn add parse inicializa parse en tu aplicación backbonejs típicamente, crearías un archivo (por ejemplo, parseconfig js ) en el directorio de tu aplicación src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; este archivo asegura que cada vez que importes o hagas referencia a parse en tu aplicación backbonejs, esté preconfigurado para conectarse a tu instancia específica de back4app al completar este paso, has establecido una conexión segura entre tu front end de backbonejs y el backend de back4app todas las solicitudes y transacciones de datos se enrutan de manera segura a través de este sdk, reduciendo la complejidad de las llamadas manuales rest o graphql (aunque aún puedes usarlas cuando sea necesario) paso 2 – configurando la base de datos guardando y consultando datos con tu proyecto de back4app configurado y el sdk de parse integrado en tu aplicación backbonejs, ahora puedes comenzar a guardar y recuperar datos a continuación, se muestra un ejemplo simple de uso de objetos parse desde una estructura amigable con backbone definiendo un modelo import parse from ' /parseconfig'; // define a parse powered backbone model const todomodel = parse object extend('todo'); export default todomodel; creando y guardando datos import todomodel from ' /todomodel'; async function createtodoitem(title, iscompleted) { const todo = new todomodel(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todoquery = new parse query(todomodel); try { const results = await todoquery find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } alternativamente, puedes usar los endpoints de la api rest de back4app curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo back4app también proporciona una interfaz graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } estas diversas opciones te permiten integrar operaciones de datos de la manera que mejor se adapte a tu proceso de desarrollo, ya sea a través del sdk de parse, rest o graphql diseño de esquema y tipos de datos por defecto, parse permite la creación de esquemas sobre la marcha , pero también puedes definir tus clases y tipos de datos en el panel de control de back4app para tener más control navega a la sección “base de datos” en tu panel de control de back4app crea una nueva clase (por ejemplo, “todo”) y agrega columnas relevantes, como título (string) y iscompleted (boolean) back4app también admite varios tipos de datos string , number , boolean , object , date , file , pointer , array , relation , geopoint , y polygon puedes elegir el tipo apropiado para cada campo si lo prefieres, también puedes dejar que parse cree automáticamente estas columnas cuando guardes un objeto desde tu aplicación backbonejs por primera vez back4app ofrece un agente de ia que puede ayudarte a diseñar tu modelo de datos abre el agente de ia desde el panel de control de tu app o en el menú describe tu modelo de datos en un lenguaje simple (por ejemplo, “por favor, crea una nueva aplicación todo en back4app con un esquema de clase completo ”) deja que el agente de ia cree el esquema por ti usar el agente de ia puede ahorrarte tiempo al configurar tu arquitectura de datos y asegurar la consistencia en tu aplicación datos relacionales si tienes datos relacionales – digamos, un categoría objeto que apunta a múltiples todo elementos – puedes usar punteros o relaciones en parse por ejemplo // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const todomodel = parse object extend('todo'); const todo = new todomodel(); // construct a pointer to the category const category = parse object extend('category'); const categorypointer = new category(); categorypointer id = categoryobjectid; // set fields todo set('title', title); todo set('category', categorypointer); try { return await todo save(); } catch (err) { console error('error creating task with category relationship ', err); } } async function fetchtodoswithcategory() { const todomodel = parse object extend('todo'); const query = new parse query(todomodel); // include pointer data query include('category'); try { return await query find(); } catch (err) { console error('error fetching todos with category ', err); } } cuando llamas a include('category') , obtienes los detalles de la categoría junto a cada todo, haciendo que tus datos relacionales sean accesibles sin problemas consultas en vivo para actualizaciones en tiempo real, back4app proporciona consultas en vivo en una aplicación backbonejs, puedes suscribirte a cambios en una clase específica habilitar consultas en vivo en tu panel de back4app bajo configuraciones del servidor asegúrate de que “consultas en vivo” esté activado inicializar una suscripción a consultas en vivo en tu código src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; import parse from ' /parseconfig'; async function subscribetotodos(callback) { const todoquery = new parse query('todo'); const subscription = await todoquery subscribe(); subscription on('create', (newtodo) => { console log('new todo created ', newtodo); callback('create', newtodo); }); subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo); callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo); callback('delete', deletedtodo); }); return subscription; } al suscribirte, recibes notificaciones en tiempo real cada vez que se crea, actualiza o elimina un nuevo todo esta función es particularmente valiosa para aplicaciones colaborativas o dinámicas donde múltiples usuarios necesitan ver los últimos datos sin actualizar la página paso 3 – aplicando seguridad con acls y clps mecanismo de seguridad de back4app back4app toma la seguridad en serio al proporcionar listas de control de acceso (acls) y permisos a nivel de clase (clps) estas características te permiten restringir quién puede leer o escribir datos a nivel de objeto o de clase, asegurando que solo los usuarios autorizados puedan modificar tus datos listas de control de acceso (acls) un acl se aplica a objetos individuales para determinar qué usuarios, roles o el público pueden realizar operaciones de lectura/escritura por ejemplo async function createprivatetodo(title, owneruser) { const todomodel = parse object extend('todo'); const todo = new todomodel(); todo set('title', title); // create an acl granting read/write access only to the owner const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } cuando guardas el objeto, tiene un acl que impide que cualquier persona, excepto el usuario especificado, lo lea o lo modifique permisos a nivel de clase (clps) los clps rigen los permisos predeterminados de toda una clase, como si la clase es legible o escribible públicamente, o si solo ciertos roles pueden acceder a ella ve a tu panel de back4app , selecciona tu aplicación y abre la base de datos sección selecciona una clase (por ejemplo, “todo”) abre los permisos a nivel de clase pestaña configura tus valores predeterminados, como “requiere autenticación” para leer o escribir, o “sin acceso” para el público estos permisos establecen la línea base, mientras que los acls ajustan los permisos para objetos individuales un modelo de seguridad robusto combina típicamente tanto clps (restricciones amplias) como acls (restricciones específicas por objeto) para más información, ve a directrices de seguridad de la aplicación paso 4 – escribir y desplegar funciones en la nube el código en la nube es una característica del entorno de parse server que te permite ejecutar código javascript personalizado en el lado del servidor, sin necesidad de gestionar tus servidores o infraestructura al escribir código en la nube, puedes extender tu backend de back4app con lógica de negocio adicional, validaciones, disparadores e integraciones que se ejecutan de manera segura y eficiente en el servidor parse cómo funciona cuando escribes cloud code, normalmente colocas tus funciones de javascript, triggers y cualquier módulo npm requerido en un main js (o app js ) archivo este archivo se despliega en tu proyecto de back4app, que se ejecuta dentro del entorno de parse server dado que estas funciones y triggers se ejecutan en el servidor, puedes confiar en que manejan lógica confidencial, procesan datos sensibles o realizan llamadas a api solo del backend, procesos que quizás no quieras exponer directamente al cliente todo el cloud code para tu aplicación de back4app se ejecuta dentro del parse server que es gestionado por back4app, por lo que no tienes que preocuparte por el mantenimiento del servidor, la escalabilidad o la provisión cada vez que actualizas y despliegas tu main js archivo, el parse server en ejecución se actualiza con tu último código // main js // 1 import necessary modules and other cloud code files const axios = require('axios'); const report = require(' /reports'); // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object; if (!todo get('title')) { throw new error('todo must have a title'); } }); con la capacidad de instalar y usar módulos npm, cloud code se vuelve increíblemente flexible, permitiéndote integrarte con apis externas, realizar transformaciones de datos o ejecutar lógica compleja del lado del servidor casos de uso típicos lógica de negocios por ejemplo, puedes calcular la puntuación de un usuario en un juego agregando múltiples propiedades de objeto, y luego almacenar esos datos automáticamente validaciones de datos asegúrate de que ciertos campos estén presentes o de que un usuario tenga los permisos correctos antes de guardar o eliminar un registro disparadores realiza acciones cuando los datos cambian (por ejemplo, envía una notificación cuando un usuario actualiza su perfil) integraciones conéctate con apis o servicios de terceros por ejemplo, podrías integrarte con pasarelas de pago, notificaciones de slack o plataformas de marketing por correo electrónico directamente desde cloud code aplicación de seguridad agrega una capa adicional de seguridad validando y sanitizando los parámetros de entrada en tus funciones de cloud code despliega tu función a continuación se muestra una función simple de cloud code que calcula la longitud de una cadena de texto enviada desde el cliente main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); desplegando a través de back4app cli 1 instalar el cli para linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash para windows descarga el b4a exe archivo de la página de lanzamientos https //github com/back4app/parse cli/releases 2 configura tu clave de cuenta b4a configure accountkey 3 despliega tu código en la nube b4a deploy desplegando a través del panel de control en el panel de control de tu aplicación, ve a cloud code > functions copia/pega la función en el main js editor haz clic en deploy llamando a tu función desde backbonejs usando el sdk de parse import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } también puedes llamarlo a través de rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength o a través de graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } esta flexibilidad te permite integrar tu lógica personalizada en tu frontend de backbonejs o cualquier otro cliente que soporte rest o graphql paso 5 – configurando la autenticación de usuarios autenticación de usuario en back4app back4app aprovecha la clase parse user como base para la autenticación por defecto, parse maneja el hash de contraseñas, los tokens de sesión y el almacenamiento seguro esto significa que no tienes que configurar flujos de seguridad complejos manualmente configurando la autenticación de usuario en una aplicación backbonejs, puedes crear un nuevo usuario con import parse from ' /parseconfig'; async function signupuser(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 signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } a través de rest, un inicio de sesión podría verse así curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login gestión de sesiones después de un inicio de sesión exitoso, parse crea un token de sesión que se almacena en el objeto de usuario en tu aplicación, puedes acceder al usuario que ha iniciado sesión actualmente const currentuser = parse user current(); if (currentuser) { console log('currently logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } parse maneja automáticamente las sesiones basadas en tokens en segundo plano, pero también puedes gestionarlas o revocarlas manualmente esto es útil cuando necesitas cerrar sesión await parse user logout(); integración de inicio de sesión social back4app y parse pueden integrarse con proveedores populares de oauth, como google o facebook , instalando paquetes adicionales o utilizando adaptadores existentes las instrucciones detalladas varían, así que consulta la documentación de inicio de sesión social https //www back4app com/docs/platform/sign in with apple // example facebook login (conceptual example) const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; verificación de correo electrónico y restablecimiento de contraseña para habilitar la verificación de correo electrónico y el restablecimiento de contraseña navega a la configuración de correo electrónico en tu panel de control de back4app habilita la verificación de correo electrónico para asegurar que los nuevos usuarios verifiquen la propiedad de sus direcciones de correo electrónico configura la dirección del remitente , las plantillas de correo electrónico y tu dominio personalizado si lo deseas estas características mejoran la seguridad de la cuenta y la experiencia del usuario al validar la propiedad del correo electrónico y proporcionar un método seguro de recuperación de contraseña paso 6 – manejo del almacenamiento de archivos subida y recuperación de archivos parse incluye la parse file clase para manejar las cargas de archivos, que back4app almacena de forma segura import parse from ' /parseconfig'; async function uploadimage(file) { // file is typically from an \<input type="file" /> in a webpage const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } recuperar la url del archivo es sencillo const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your backbone view or html element seguridad de archivos parse server proporciona configuraciones flexibles para gestionar la seguridad de la carga de archivos por ejemplo { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } enableforpublic cuando se establece en verdadero, permite que cualquier persona, independientemente del estado de autenticación, suba archivos enableforanonymoususer controla si los usuarios anónimos (invitados) pueden subir archivos enableforauthenticateduser especifica si solo los usuarios autenticados pueden subir archivos paso 7 – programación de tareas con cloud jobs cloud jobs cloud jobs en back4app te permiten programar y ejecutar tareas rutinarias en tu backend, como limpiar datos antiguos o enviar un correo electrónico de resumen diario un cloud job típico podría verse así // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo'); const query = new parse query(todo); // for example, remove todos older than 30 days const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); despliega tu cloud code con el nuevo trabajo (a través de cli o el panel de control) ve al panel de control de back4app > configuraciones de la app > configuraciones del servidor > trabajos en segundo plano programa el trabajo para que se ejecute diariamente o en el intervalo que mejor se adapte a tus necesidades los trabajos en la nube te permiten automatizar el mantenimiento en segundo plano u otros procesos periódicos, sin requerir intervención manual paso 8 – integrando webhooks webhooks permiten que tu aplicación back4app envíe solicitudes http a un servicio externo cada vez que ocurren ciertos eventos esto es poderoso para integrarse con sistemas de terceros como pasarelas de pago (por ejemplo, stripe), herramientas de marketing por correo electrónico o plataformas de análisis navega a la configuración de webhooks en tu panel de back4app > más > webhooks y luego haz clic en agregar webhook configura un endpoint (por ejemplo, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) configura los disparadores para especificar qué eventos en tus clases de back4app o funciones de cloud code activarán el webhook por ejemplo, si deseas notificar a un canal de slack cada vez que se crea un nuevo todo crea una aplicación de slack que acepte webhooks entrantes copia la url del webhook de slack en tu panel de back4app, establece el endpoint a esa url de slack para el evento “nuevo registro en la clase todo ” también puedes agregar encabezados http personalizados o cargas útiles si es necesario también puedes definir webhooks en cloud code haciendo solicitudes http personalizadas en disparadores como beforesave, aftersave paso 9 – explorando el panel de administración de back4app la aplicación de administración de back4app es una interfaz de gestión basada en la web diseñada para usuarios no técnicos para realizar operaciones crud y manejar tareas rutinarias de datos sin escribir ningún código proporciona una interfaz centrada en el modelo , amigable para el usuario que simplifica la administración de bases de datos, la gestión de datos personalizados y las operaciones a nivel empresarial habilitando la aplicación de administración habilítala yendo a app dashboard > más > aplicación de administración y haciendo clic en el botón “habilitar aplicación de administración” crea un primer usuario administrador (nombre de usuario/contraseña), lo que genera automáticamente un nuevo rol (b4aadminuser) y clases (b4asetting, b4amenuitem y b4acustomfield) en el esquema de tu aplicación elige un subdominio para acceder a la interfaz de administración y completa la configuración iniciar sesión utilizando las credenciales de administrador que creaste para acceder a tu nuevo panel de control de la aplicación de administrador una vez habilitada, la aplicación de administrador de back4app facilita la visualización, edición o eliminación de registros de tu base de datos, sin requerir el uso directo del panel de control de parse o código de backend con controles de acceso configurables, puedes compartir de manera segura esta interfaz con miembros del equipo o clientes que necesiten una forma clara y fácil de gestionar datos conclusión al seguir este tutorial completo, has creó un backend seguro para una aplicación backbonejs en back4app configuró una base de datos con esquemas de clase, tipos de datos y relaciones integró consultas en tiempo real (consultas en vivo) para actualizaciones de datos inmediatas aplicó medidas de seguridad utilizando acls y clps para proteger y gestionar el acceso a los datos implementó funciones de cloud code para ejecutar lógica de negocio personalizada en el lado del servidor configuró la autenticación de usuarios con soporte para verificación de correo electrónico y restablecimiento de contraseñas gestionó cargas de archivos y recuperación, con controles de seguridad de archivos opcionales programó trabajos en la nube para tareas automatizadas en segundo plano usó webhooks para integrarse con servicios externos exploró el panel de administración de back4app para la gestión de datos con un sólido frontend de backbonejs y un robusto backend de back4app, ahora está bien equipado para desarrollar aplicaciones ricas en funciones, escalables y seguras continúe explorando funcionalidades más avanzadas, integre su lógica de negocio y aproveche el poder de back4app para ahorrarle innumerables horas en la administración de servidores y bases de datos ¡feliz codificación! próximos pasos construir una aplicación backbonejs lista para producción extendiendo este backend para manejar modelos de datos más complejos, estrategias de caché y optimizaciones de rendimiento integrar características avanzadas como flujos de autenticación especializados, control de acceso basado en roles o apis externas (como pasarelas de pago) consulta la documentación oficial de back4app para profundizar en seguridad avanzada, ajuste de rendimiento y análisis de registros explora otros tutoriales sobre aplicaciones de chat en tiempo real, paneles de iot o servicios basados en ubicación puedes combinar las técnicas aprendidas aquí con