Iniciadores Rápidos

¿Cómo construir un backend para jQuery?

40min

Introducción

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.

Requisitos previos

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.
  • Entorno básico de jQuery Puedes descargar jQuery desde el sitio web oficial .
  • 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
  • Familiaridad con JavaScript y conceptos básicos de jQuery Documentación oficial de jQuery.

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.

Paso 1 – Configuración del Proyecto de Back4app

Crear un Nuevo Proyecto

Para comenzar tu proyecto de backend con jQuery, crea un nuevo proyecto de Back4app:

  1. Inicia sesión en tu cuenta de Back4app.
  2. Haz clic en el botón “Nueva App” en tu panel de Back4app.
  3. Dale un nombre a tu app (por ejemplo, “jQuery-Backend-Tutorial”).
Document image


Cuando se crea el proyecto, lo verás en tu panel de Back4app. Esta será la base de tus configuraciones de backend para jQuery.

Conectar el SDK de Parse

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


Incluye el SDK de Parse en tu archivo HTML:

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.

Paso 2 – Configurando la Base de Datos

Guardar y Consultar Datos

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:

HTML


También puedes llamar a APIs REST usando cURL:

Bash


O usa GraphQL:

GraphQL


Diseño de Esquema y Tipos de Datos

En el panel de Back4app:

  1. Ve a “Base de datos.”
  2. Crea una nueva clase (por ejemplo, “Todo”) y agrega columnas como título (String) y isCompleted (Boolean).
Crear Nueva Clase
Crear Nueva Clase


También puedes permitir que Parse cree columnas automáticamente la primera vez que guardes un objeto.

Crear Columna
Crear Columna


Usando el Agente de IA

Back4app tiene un Agente de IA para modelado de datos:

  1. Abre el Agente de IA en el panel o menú de tu aplicación.
  2. Describe tu modelo de datos (por ejemplo, “Crea una aplicación ToDo con un esquema de clase.”).
  3. Deja que el Agente de IA genere el esquema.
Document image


Datos Relacionales

Si tienes una Categoría clase vinculada a muchos Todo elementos, puedes usar Punteros o Relaciones:

HTML


Consultas en Vivo

Para actualizaciones en tiempo real en tu aplicación jQuery:

  1. Habilitar Consultas en Vivo en tu panel de Back4app bajo Configuración del Servidor.
  2. Inicializar una suscripción de Consulta en Vivo:
HTML


Esta suscripción te notifica en tiempo real cada vez que se crea, actualiza o elimina un objeto “Todo”.

Paso 3 – Aplicando Seguridad con ACLs y CLPs

Mecanismo de Seguridad de Back4app

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


Listas de Control de Acceso (ACLs)

Una ACL se establece en objetos individuales para limitar el acceso:

HTML

HTML

HTML

Editar ACL
Editar ACL


Permisos a Nivel de Clase (CLPs)

Los CLPs controlan los permisos predeterminados para toda una clase:

  1. En tu Panel de Control de Back4app, abre la sección de Base de Datos.
  2. Selecciona tu clase (por ejemplo, “Todo”).
  3. Ve a la pestaña de Permisos a Nivel de Clase para configurar el acceso público, autenticado o basado en roles.
Document image


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.

Paso 4 – Escribir y Desplegar Funciones en la Nube

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.

Cómo Funciona

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.

JS


Despliega Tu Función

Bash

  • A través del Dashboard:
    1. En el dashboard de tu aplicación, ve a Cloud Code > Functions.
    2. Copia/pega la función en main.js.
    3. Haz clic en Deploy.
Document image


Llamando a Tu Función

Desde jQuery, puedes llamar a una función en la nube así:

HTML


Paso 5 – Configuración de la Autenticación de Usuarios

Autenticación de Usuarios en Back4app

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.

Configurando la Autenticación de Usuarios

HTML


Gestión de Sesiones

Puedes recuperar el usuario actual:

Text


Cerrar sesión:

Text


Integración de inicio de sesión social

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.

Paso 6 – Manejo del almacenamiento de archivos

Subiendo y recuperando archivos

Usa Parse.File para manejar las subidas:

HTML


Puedes almacenar el archivo en una clase asignándolo a un campo:

Text


Recuperando la URL del archivo:

Text


Seguridad de archivos

Puedes gestionar quién puede subir archivos modificando la configuración de subida de archivos en Parse Server:

JSON


Paso 7 – Programación de Tareas con Trabajos en la Nube

Trabajos en la Nube

Puedes ejecutar tareas rutinarias, como eliminar datos antiguos:

JS


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


Paso 8 – Integración de Webhooks

Webhooks permiten que tu aplicación envíe solicitudes HTTP a un servicio externo cada vez que ocurren ciertos eventos:

  1. Ve a Más > WebHooks en tu panel de control de Back4app.
  2. Agrega un nuevo Webhook con tu punto final externo.
  3. Configura disparadores para eventos como “nuevo registro en la clase Todo.”
Agregando un Webhook
Agregando un Webhook


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


Paso 9 – Explorando el Panel de Administración de Back4app

La Aplicación de Administración de Back4app ofrece una interfaz web no técnica para operaciones CRUD.

Habilitando la Aplicación de Administración

Ir a App Dashboard > Más > Admin App y hacer clic en “Habilitar Admin App”:

Habilitar Admin App
Habilitar Admin App


Crear un Primer Usuario Administrador, lo que crea automáticamente un nuevo rol (B4aAdminUser) y clases en tu esquema:

Document image


Elegir un Subdominio para acceder a la aplicación de administración:

Document image


Iniciar Sesión usando tus nuevas credenciales de administrador:

Document image


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.

Conclusió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!

Próximos Pasos

  • 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.