¿Cómo construir un backend para jQuery?
En este tutorial, aprenderás cómo construir un backend para jQuery usando Back4app.
Integraremos las características esenciales de Back4app: gestión de bases de datos, Cloud Code, APIs REST y GraphQL, autenticación de usuarios y consultas en tiempo real, para crear un backend seguro y escalable.
Este backend se comunicará con tu frontend basado en jQuery a través de llamadas AJAX y otros métodos comunes de jQuery.
El entorno intuitivo de Back4app reduce el tiempo necesario para configurar servidores o bases de datos.
Siguiendo unos pocos pasos simples, obtendrás experiencia práctica con ACLs, permisos a nivel de clase, modelado de datos, cargas de archivos y más.
Al final de este tutorial, tendrás una base sólida para una aplicación completamente funcional basada en jQuery conectada a un backend de Back4app.
Estarás listo para agregar lógica personalizada, integrar APIs externas y asegurar tus datos con un control detallado.
Para completar este tutorial, necesitarás:
- Una cuenta de Back4app y un nuevo proyecto de Back4app Comenzando con Back4app. Si no tienes una cuenta, puedes crear una gratis. Sigue la guía anterior para preparar tu proyecto.
- Node.js (versión 14 o superior) instalado (Opcional) Aunque Node.js no es estrictamente necesario para jQuery en un navegador, puede que lo necesites para ejecutar servidores de prueba locales o instalar paquetes npm si deseas hacer pruebas locales. Instalando Node.js
Asegúrate de tener todos estos requisitos previos en su lugar antes de comenzar, para que puedas seguir sin problemas al construir tu front end basado en jQuery y conectarlo a Back4app.
Para comenzar tu proyecto de backend con jQuery, crea un nuevo proyecto de Back4app:
- 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, “jQuery-Backend-Tutorial”).
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/drXO0UqsgxhFvRDiVmsMb_image.png?format=webp)
Cuando se crea el proyecto, lo verás en tu panel de Back4app. Esta será la base de tus configuraciones de backend para jQuery.
Back4app utiliza la Plataforma Parse para datos y características en tiempo real. Si deseas usar el SDK de Parse directamente con jQuery, puedes cargarlo como un script en tu HTML.
Recupera tus Claves de Parse: En el panel de control de Back4app, abre “Configuraciones de la Aplicación” o “Seguridad y Claves” de tu aplicación para encontrar:
- ID de Aplicación
- Clave de JavaScript
- URL del Servidor Parse (usualmente https://parseapi.back4app.com)
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/F9teHXd_M8ERn1OPGirbi_image.png?format=webp)
Incluye el SDK de Parse en tu archivo HTML:
En un jQuery entorno, puedes cargar jQuery primero, luego Parse, e interactuar con los objetos de Parse en tus scripts. Esta conexión asegura que todas las llamadas de datos a tu backend de Back4app pasen a través de la Plataforma Parse.
Después de integrar el SDK de Parse, puedes guardar y recuperar datos de la base de datos de Back4app. Aquí hay un ejemplo simple de cómo crear y recuperar objetos “Todo” usando jQuery y Parse:
También puedes llamar a APIs REST usando cURL:
O usa GraphQL:
En el panel de Back4app:
- Ve a “Base de datos.”
- Crea una nueva clase (por ejemplo, “Todo”) y agrega columnas como título (String) y isCompleted (Boolean).
![Crear Nueva Clase Crear Nueva Clase](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/iaZ_P-7epc_LSMFIPlaZV_image.png?format=webp)
También puedes permitir que Parse cree columnas automáticamente la primera vez que guardes un objeto.
![Crear Columna Crear Columna](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/DEh9vyxdBTZcslXxkVQMA_image.png?format=webp)
Back4app tiene un Agente de IA para modelado de datos:
- Abre el Agente de IA en el panel o menú de tu aplicación.
- Describe tu modelo de datos (por ejemplo, “Crea una aplicación ToDo con un esquema de clase.”).
- Deja que el Agente de IA genere el esquema.
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/0snNZwHWzxuXlNu30n7IA_image.png?format=webp)
Si tienes una Categoría clase vinculada a muchos Todo elementos, puedes usar Punteros o Relaciones:
Para actualizaciones en tiempo real en tu aplicación jQuery:
- Habilitar Consultas en Vivo en tu panel de Back4app bajo Configuración del Servidor.
- Inicializar una suscripción de Consulta en Vivo:
Esta suscripción te notifica en tiempo real cada vez que se crea, actualiza o elimina un objeto “Todo”.
ACLs (Listas de Control de Acceso) y CLPs (Permisos a Nivel de Clase) te permiten controlar quién puede leer y escribir datos a nivel de objeto o clase.
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/PdAyrw1nqA1QQJFuCc-4t_image.png?format=webp)
Una ACL se establece en objetos individuales para limitar el acceso:
![Editar ACL Editar ACL](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/3YNfxEcv7CKdLC6ca8my6_image.png?format=webp)
Los CLPs controlan los permisos predeterminados para toda una clase:
- En tu Panel de Control de Back4app, abre la sección de Base de Datos.
- Selecciona tu clase (por ejemplo, “Todo”).
- Ve a la pestaña de Permisos a Nivel de Clase para configurar el acceso público, autenticado o basado en roles.
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/MF1Uf7HSJF03Xg6djap9m_image.png?format=webp)
Combina ACLs para la seguridad a nivel de objeto con CLPs para restricciones más amplias. Para más información, consulta Directrices de Seguridad de la Aplicación.
El Código en la Nube ejecuta JavaScript personalizado en el lado del servidor, permitiéndote agregar lógica de negocio, validaciones de datos o llamadas a APIs externas.
Coloca tu código en main.js (o un archivo similar), despliega a Back4app y deja que el servidor Parse maneje la ejecución. También puedes usar módulos de NPM para lógica más compleja.
- A través del Dashboard:
- En el dashboard de tu aplicación, ve a Cloud Code > Functions.
- Copia/pega la función en main.js.
- Haz clic en Deploy.
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/pGxBQFBhk4prMc8Ub-uho_image.png?format=webp)
Desde jQuery, puedes llamar a una función en la nube así:
Back4app emplea la Parse.User clase para la autenticación. El hash de contraseñas, los tokens de sesión y el almacenamiento seguro se manejan automáticamente.
Puedes recuperar el usuario actual:
Cerrar sesión:
Back4app admite Google, Facebook, Apple y otros proveedores de OAuth. Para más información, consulta la Documentación de inicio de sesión social.
Usa Parse.File para manejar las subidas:
Puedes almacenar el archivo en una clase asignándolo a un campo:
Recuperando la URL del archivo:
Puedes gestionar quién puede subir archivos modificando la configuración de subida de archivos en Parse Server:
Puedes ejecutar tareas rutinarias, como eliminar datos antiguos:
En el panel de control, ve a Configuración de la Aplicación > Configuración del Servidor > Trabajos en Segundo Plano para programarlo.
![Programando un Trabajo en la Nube Programando un Trabajo en la Nube](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/5wG60YnWIST74erryTb-u_image.png?format=webp)
Webhooks permiten que tu aplicación envíe solicitudes HTTP a un servicio externo cada vez que ocurren ciertos eventos:
- Ve a Más > WebHooks en tu panel de control de Back4app.
- Agrega un nuevo Webhook con tu punto final externo.
- Configura disparadores para eventos como “nuevo registro en la clase Todo.”
![Agregando un Webhook Agregando un Webhook](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/morUMdwsAbVQ1EmBfUfAA_image.png?format=webp)
Puedes integrar Slack o una pasarela de pago como Stripe enviando datos de eventos a través de webhooks.
![WebHook Antes de Guardar WebHook Antes de Guardar](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/fXvy4eRzabyWmN80OMyqW_image.png?format=webp)
La Aplicación de Administración de Back4app ofrece una interfaz web no técnica para operaciones CRUD.
Ir a App Dashboard > Más > Admin App y hacer clic en “Habilitar Admin App”:
![Habilitar Admin App Habilitar Admin App](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/5BTk1ntDh9JLXurObmm_o_image.png?format=webp)
Crear un Primer Usuario Administrador, lo que crea automáticamente un nuevo rol (B4aAdminUser) y clases en tu esquema:
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/u-pU1yBJJxa9KEM2psjXS_image.png?format=webp)
Elegir un Subdominio para acceder a la aplicación de administración:
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/_2b71RLDTlQW468017saY_image.png?format=webp)
Iniciar Sesión usando tus nuevas credenciales de administrador:
![Document image Document image](https://images.archbee.com/yD3zCY-NNBBIfd0uqcfR5/jOFU8C0qiFm6wiVZXS9l0_image.png?format=webp)
Una vez habilitada, esta aplicación de administración te permite gestionar datos o conceder acceso a los miembros del equipo sin necesidad de codificación.
En esta guía, aprendiste cómo construir un backend para jQuery con Back4app. Tú:
- Creaste un nuevo proyecto de Back4app como tu base de backend.
- Configuraste una base de datos, incluyendo el diseño del esquema y las relaciones de datos.
- Usaste ACLs y CLPs para una seguridad detallada.
- Desplegaste Cloud Code para lógica personalizada del lado del servidor.
- Configuraste la autenticación de usuarios, almacenamiento de archivos y actualizaciones en tiempo real.
- Programaste trabajos en segundo plano e integraste webhooks para servicios externos.
- Exploraste el Panel de Administración de Back4app para una gestión de datos más sencilla.
Ahora estás equipado para extender esta configuración básica de jQuery + Back4app en una solución de producción completa. Continúa integrando características avanzadas como inicio de sesión social o reglas de seguridad más detalladas. ¡Disfruta construyendo tus aplicaciones escalables y basadas en datos!
- Prepárate para producción: Agrega permisos avanzados basados en roles, estrategias de caché y optimización de rendimiento.
- Integra APIs de terceros: Para pagos, mensajería o análisis.
- Explora la documentación de Back4app: Profundiza en seguridad avanzada, registros o análisis.
- Crea aplicaciones del mundo real: Usa la simplicidad de jQuery combinada con los poderosos servicios de backend de Back4app.
![Doc contributor](https://s3.amazonaws.com/archbee-animals/cat.png)