Iniciadores Rápidos
¿Cómo construir un backend para Gatsby?

37min
Introducción
En este tutorial, aprenderás cómo construir un backend para Gatsby utilizando Back4App. 
Te mostraremos cómo integrar las características de Back4App—como la gestión de bases de datos, funciones de Cloud Code, REST API y capacidades de consulta GraphQL, autenticación de usuarios y consultas en tiempo real (Live Queries)—para crear un backend seguro, escalable y robusto que se pueda acceder desde tu sitio Gatsby.
También verás cómo la configuración rápida de Back4App y su entorno intuitivo pueden reducir drásticamente el tiempo y el esfuerzo necesarios para manejar tareas de backend. 
Al final, sabrás exactamente cómo construir un backend para Gatsby que almacena y recupera datos, maneja la autenticación, integra funciones en la nube y más. 
Esto te prepara para incorporar fácilmente lógica personalizada, agregar APIs de terceros o expandir tu modelo de datos sin tener que preocuparte por el mantenimiento tradicional del servidor.
Lo que construirás y por qué es valioso
Integración Completa de Backend: Crearás una estructura de backend escalable para tu sitio Gatsby, incorporando Parse SDK, que es perfecta para necesidades de datos dinámicos.
Ahorro de Tiempo: Back4App proporciona herramientas como el Agente de IA, consultas en tiempo real y trabajos en la nube que aceleran la creación de backend.
Habilidades Extendibles: Después de terminar, podrás adaptar estos conceptos para características más avanzadas de Gatsby, como crear páginas en el tiempo de construcción o conectarte a funciones sin servidor para operaciones dinámicas.
Requisitos previos
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 de desarrollo básico de Gatsby
Puedes configurarlo instalando el Gatsby CLI y ejecutando:
Node.js (versión 14 o superior) instalado
Instalando Node.js﻿
Familiaridad con JavaScript y los conceptos de Gatsby
Documentación oficial de Gatsby.
Lee la documentación o un tutorial para principiantes si eres nuevo en Gatsby.
Asegúrate de tener estos requisitos configurados. Esto garantiza una experiencia fluida mientras creas un nuevo archivo para la configuración o ejecutas consultas GraphQL en tu entorno de Gatsby.
Paso 1 – Configuración del proyecto Back4App
Crear un nuevo proyecto
El primer paso en cómo construir un backend para Gatsby en Back4App es crear un nuevo proyecto. Si aún no lo has hecho:
Inicia sesión en tu cuenta de Back4App.
Haz clic en el botón “Nueva App” en tu panel.
Dale un nombre a tu app (por ejemplo, “Gatsby-Backend-Tutorial”).
﻿
Después de crear el proyecto, aparecerá en tu panel de control de Back4App. Usaremos este proyecto como el núcleo de nuestro backend.
Conectar el SDK de Parse
Back4App utiliza la Plataforma Parse para gestionar tus datos, ofrecer características en tiempo real, manejar la autenticación de usuarios y más. Para Gatsby, aún puedes npm install parse y luego integrarlo en tus archivos fuente:
Recupera tus claves de Parse:
En tu panel de control de Back4App, localiza tu ID de Aplicación y Clave de JavaScript, típicamente bajo “Configuración de la App” o “Seguridad y Claves.” También encontrarás la URL del Servidor de Parse (a menudo algo como https://parseapi.back4app.com).
﻿
Instala el SDK de Parse en tu sitio de Gatsby:
Bash
npm install parse
npm install parse
﻿
Crea un parseConfig.js en el directorio raíz de tu proyecto Gatsby o dentro de src/:
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;
// 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;
﻿
Cada vez que importes Parse desde parseConfig.js en tus archivos de Gatsby (por ejemplo, en gatsby-node.js, gatsby-browser.js, o páginas/componentes), tendrás una instancia preconfigurada lista para hacer consultas a tu backend de Back4App.
Paso 2 – Configuración de la Base de Datos
Creando un Modelo de Datos
En Back4App, los datos se gestionan como “clases” (similares a tablas) con campos para tus datos. Vamos a crear una clase “Todo” para la demostración. Mostraremos algunas formas en que puedes guardar y recuperar datos en Gatsby con Parse.
Navega a la sección “Base de datos” en tu panel de control de Back4app.
Crea una nueva clase (por ejemplo, “Todo”) y añade columnas como título (String) y isCompleted (Boolean).
Crear nueva clase
﻿
O puedes dejar que Parse cree automáticamente columnas cuando los objetos se guardan por primera vez desde tu código.
Creando un modelo de datos con el agente de IA
Back4App proporciona un agente de IA para ayudar a definir tu estructura de datos.
Abre el agente de IA desde tu panel de control de la aplicación o menú.
Describe tu modelo de datos (por ejemplo, “Por favor, crea un nuevo esquema de aplicación Todo con un título y estado de finalización.”).
Deja que el agente de IA genere el esquema por ti.
﻿
Lectura y escritura de datos usando SDK
Un fragmento de ejemplo en Gatsby podría verse así (por ejemplo, en una página basada en React o en gatsby-browser.js):
JS
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  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 Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
import Parse from '../parseConfig';

async function createTodoItem(title, isCompleted) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  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 Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);
  try {
    const results = await query.find();
    console.log('Fetched Todo items:', results);
    return results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Lectura y Escritura de Datos Usando REST API
Alternativamente, puedes interactuar con la base de datos a través de la REST API:
Bash
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
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
﻿
Lectura y Escritura de Datos Usando GraphQL API
Back4App también soporta una GraphQL API, por lo que podrías ejecutar consultas o mutaciones como:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Esto es especialmente conveniente si deseas que tu sitio de Gatsby obtenga datos a través de consultas GraphQL en el momento de la construcción.
Trabajando con Consultas en Vivo
Gatsby es un generador de sitios estáticos, pero aún puedes configurar conexiones dinámicas en tiempo real utilizando Parse Consultas en Vivo. Esto puede ser útil en código ejecutado en el navegador o en tus propios hooks sin servidor.
Habilitar Consultas en Vivo en tu panel de control de Back4app (bajo Configuración del Servidor).
Agregar la URL del Servidor de Consultas en Vivo a parseConfig.js:
JS
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io';
﻿
Suscribirse a una clase para notificaciones en tiempo real:
JS
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Esto enviará actualizaciones de datos en tiempo real a la interfaz de tu proyecto Gatsby.
Paso 3 – Aplicando Seguridad con ACLs y CLPs
¿Qué son ACLs y CLPs?
Las ACLs (Listas de Control de Acceso) te permiten definir permisos en objetos individuales, mientras que las CLPs (Permisos a Nivel de Clase) se aplican a clases enteras en tu base de datos de Back4App.
﻿
Configurando Permisos a Nivel de Clase
Ve a Base de datos en tu panel de control de Back4App.
Selecciona la clase (por ejemplo, Todo).
Haz clic en la pestaña Permisos a nivel de clase.
Configura si la clase es legible públicamente, requiere autenticación o está restringida a ciertos roles.
Uso de ACLs en el código
En tu código de Gatsby, puedes definir ACLs para cada nuevo objeto:
JS
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  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);
  }
}
async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  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);
  }
}
﻿
Paso 4 – Escribiendo funciones de Cloud Code
¿Por qué Cloud Code?
Con Cloud Code, puedes agregar lógica personalizada del lado del servidor a tu backend de Back4App. Esto es excelente para reglas de negocio, transformaciones de API REST, disparadores o validaciones de datos que desees mantener seguras y fuera del lado del cliente.
Ejemplo de función en la nube
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 };
});
// 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 Cloud Code
A través de Back4App CLI: Instala y configura el CLI, luego ejecuta b4a deploy.
A través del Dashboard: Ve a Cloud Code > Functions en tu dashboard, pega tu código en main.js, y haz clic en Deploy.
﻿
Llamando a tu función
Desde Gatsby/Parse SDK:
JS
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);
  }
}
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);
  }
}
﻿
Paso 5 – Configuración de la Autenticación
Clase de Usuario de Parse
Back4App utiliza la Parse.User clase para la autenticación. Por defecto, maneja el hash de contraseñas, sesiones y almacenamiento seguro.
Registro e Inicio de Sesión en Gatsby
JS
import Parse from '../parseConfig';

// SignUp
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);
  }
}

// Login
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);
  }
}
import Parse from '../parseConfig';

// SignUp
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);
  }
}

// Login
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);
  }
}
﻿
Después de iniciar sesión, puedes llamar a Parse.User.current() para verificar si un usuario ha iniciado sesión.
Inicio de Sesión Social
Puedes integrar Google, Facebook, Apple, y otros proveedores con configuraciones adicionales. Lee más en la Documentación de Inicio de Sesión Social.﻿
Paso 6 – Manejo del Almacenamiento de Archivos
Subiendo Archivos
Usa Parse.File para subir imágenes u otros archivos. Por ejemplo, en un componente de Gatsby:
JS
async function uploadImage(file) {
  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 uploadImage(file) {
  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);
  }
}
﻿
Luego puedes adjuntar este archivo a un Objeto Parse, almacenarlo y más tarde recuperar la URL del archivo para mostrarla en tu sitio de Gatsby.
Paso 7 – Verificación de Correo Electrónico y Restablecimiento de Contraseña
Por qué es importante
La verificación de correo electrónico confirma la dirección de correo del usuario, y los flujos de restablecimiento de contraseña mejoran la experiencia del usuario. Ambos se configuran fácilmente en Back4App.
Navega a la Configuración de Correo de tu aplicación en el panel de control.
Habilita la verificación de correo electrónico y configura la plantilla de correo electrónico para restablecimiento de contraseña.
Utiliza los métodos del SDK de Parse (por ejemplo, Parse.User.requestPasswordReset(email)) para activar los correos electrónicos de restablecimiento.
Paso 8 – Programación de Tareas con Cloud Jobs
Descripción General de Cloud Jobs
Utiliza Cloud Jobs para automatizar tareas recurrentes, como eliminar datos obsoletos o enviar resúmenes diarios. Por ejemplo:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  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);
  }
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  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);
  }
});
﻿
Luego prográmalo en Configuración de la Aplicación > Configuración del Servidor > Tareas en Segundo Plano.
Programando un trabajo en la nube
﻿
Paso 9 – Integrando Webhooks
Los Webhooks permiten que tu aplicación Back4App envíe solicitudes HTTP a servicios externos cuando ocurren eventos específicos, como la creación de un nuevo registro.
Ve a tu panel de control de Back4App > Más > WebHooks.
Agrega un nuevo Webhook, especificando la URL del endpoint para un servicio externo.
Selecciona qué desencadena el Webhook (por ejemplo, afterSave en la clase Todo).
Agregando un Webhook
﻿
También puedes integrarte con Slack o pasarelas de pago agregando el endpoint adecuado.
Paso 10 – Explorando el panel de administración de Back4App
La Admin App de Back4App es una interfaz centrada en el modelo para la gestión de datos. Puedes dar acceso seguro a usuarios no técnicos para realizar operaciones CRUD en tus clases.
Habilitando la Admin App
Ve a App Dashboard > Más > Admin App y haz clic en “Habilitar Admin App.”
Habilitar Admin App
﻿
Luego crea un usuario administrador y elige un subdominio para la interfaz de administración.
﻿
Ahora puedes iniciar sesión en tu Admin App para ver y modificar datos sin escribir código.
﻿
Conclusión
En este tutorial, descubriste cómo construir un backend para Gatsby usando Back4App. Has aprendido a:
Configurar una base de datos segura con clases, campos personalizados y relaciones.
Usar el SDK de Parse, junto con REST API y opciones de consulta GraphQL para transacciones de datos.
Configurar ACLs y CLPs para la seguridad de los datos.
Escribir y desplegar Cloud Code para extender la lógica de negocio y los triggers.
Gestionar la autenticación de usuarios con registro, inicio de sesión, restablecimiento de contraseña y verificación de correo electrónico.
Manejar el almacenamiento de archivos para imágenes y documentos.
Programar tareas automatizadas con Cloud Jobs.
Integrar servicios externos a través de Webhooks.
Aprovechar la Admin App para una fácil administración de datos.
Con estas habilidades, tu sitio de Gatsby puede aprovechar potentes características dinámicas mientras sigue beneficiándose de la renderización estática de Gatsby. A partir de aquí, puedes:
Expandir tu modelo de datos y agregar lógica empresarial avanzada.
Integrar más APIs externas para una plataforma verdaderamente integral.
Seguir la documentación oficial de Back4App para profundizar en seguridad, rendimiento y análisis.
Experimentar con las características de tiempo de construcción de Gatsby—por ejemplo, “crear páginas” a partir de datos dinámicos o configurar un “gatsby source” plugin para tu backend de Back4App.
Ahora tienes una base sólida para construir aplicaciones impulsadas por datos y a prueba de futuro con Gatsby y Back4App.
Actualizado 23 Jan 2025
¿Esta página le fue útil?
¿Cómo construir un backend para Flutter?
¿Cómo construir un backend para jQuery?