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

39min
Introducción
En este tutorial, aprenderás cómo construir un backend para React Native utilizando Back4App. 
Nos centraremos en la compatibilidad multiplataforma e ilustrar cómo puedes integrar las características esenciales de Back4App para la gestión de datos, la autenticación de usuarios y los datos en tiempo real. 
Al aprovechar las API REST y GraphQL, puedes desarrollar tu proyecto de React Native para que funcione en las plataformas iOS y Android, asegurando una experiencia fluida a través de componentes nativos y aplicaciones móviles.
Implementar inicios de sesión seguros para usuarios, programar tareas y utilizar aplicaciones en tiempo real hará que tu viaje como desarrollador full stack sea más fácil. 
También verás cómo el entorno de Back4App puede reducir el tiempo necesario para configurar servicios que incluyen alojamiento, base de datos y capas de seguridad. 
Al final, tendrás una estructura de backend robusta que soporta tu aplicación de React Native y allana el camino para construir soluciones móviles a gran escala.
Después de completar esta guía, estarás listo para expandir tu aplicación con características avanzadas, integrar servicios de terceros o convertir tu proyecto en una plataforma lista para producción. 
¡Sumérgete en el desarrollo moderno de aplicaciones móviles con Back4App y React Native!
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, regístrate gratis. Luego, sigue la guía para preparar tu proyecto.
Entorno de desarrollo básico de React Native
Puedes usar el React Native CLI Quickstart o Expo CLI. Asegúrate de tener Node.js instalado.
Node.js (versión 14 o superior) instalado
Necesitas Node.js para instalar paquetes npm y ejecutar servidores de desarrollo locales. Instalando Node.js﻿
Familiaridad con JavaScript y conceptos básicos de React Native
Documentación oficial de React Native.
Si eres nuevo en el desarrollo de React Native, revisa primero la documentación o un tutorial para principiantes.
Asegúrate de tener estos requisitos previos en su lugar antes de comenzar. Tener tu proyecto de Back4App creado y tu entorno local de React Native configurado garantizará un proceso fluido.
Paso 1 – Crear un nuevo proyecto en Back4App y conectar
Crear un nuevo proyecto
El primer paso para construir backends móviles para tu aplicación React Native es crear un nuevo proyecto en Back4App. Sigue estos pasos:
Inicia sesión en tu cuenta de Back4App.
Haz clic en el botón “Nueva App” en tu panel de control de Back4App.
Dale un nombre a tu app (por ejemplo, “ReactNative-Backend-Tutorial”).
﻿
Una vez que se crea el proyecto, aparecerá en tu panel de control de Back4App. Usarás este nuevo proyecto para gestionar datos y configurar la seguridad de tu aplicación React Native.
Obteniendo las Claves de tu Aplicación
A diferencia de las aplicaciones React basadas en la web, el desarrollo de React Native a menudo requiere solicitudes HTTP directas para la recuperación y manipulación de datos. Dado que nos estamos enfocando en REST APIs (o GraphQL APIs) en lugar del SDK de Parse, aún necesitarás tus claves de Back4App para enviar solicitudes autenticadas.
Recupera tus Claves de Parse:
En el panel de control de Back4App, abre la Configuración de la Aplicación o la sección de Seguridad y Claves para encontrar tu ID de Aplicación, Clave de API REST, y Punto de Acceso GraphQL (generalmente https://parseapi.back4app.com/graphql).
Anota tu Clave de API REST:
La incluirás en los encabezados de fetch o axios de tu React Native para autenticar cada solicitud.
﻿
Este paso asegura que tus aplicaciones móviles puedan comunicarse de manera segura con Back4App.
Paso 2 – Configurando la Base de Datos
Back4App proporciona una amplia gama de opciones de backend para aplicaciones de React Native, incluidas capacidades robustas de gestión de datos. Puedes crear clases, agregar campos y definir relaciones a través del panel de control. Ya sea que estés construyendo aplicaciones en tiempo real o aplicaciones CRUD más simples, el panel de control de Back4App te ayuda a almacenar y organizar datos fácilmente.
Creando un Modelo de Datos
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).
Crear Nueva Clase
﻿
Back4App admite varios tipos de datos: String, Número, Booleano, Objeto, Fecha, Archivo, Puntero, Array, Relación, GeoPoint, y Polígono. También puedes permitir que Parse cree automáticamente campos cuando envíes nuevos datos.
Creando un Modelo de Datos con Agente de IA
Si lo prefieres, puedes usar el Agente de IA de Back4App:
Abre el Agente de IA desde tu Panel de Aplicaciones.
Describe tu modelo de datos en lenguaje sencillo (por ejemplo, “Crea una clase Todo con un título y campos isCompleted.”).
Deja que el Agente de IA cree el esquema por ti.
﻿
Esto puede ahorrar tiempo durante las primeras etapas de tu proyecto de React Native.
Lectura y Escritura de Datos usando REST API
Para el desarrollo típico de React Native, puedes usar la nativa fetch API o una biblioteca de terceros como axios para manejar APIs REST. A continuación se muestra un ejemplo usando cURL, que puedes adaptar para fetch:
POST (Crear un Todo):
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
﻿
GET (Obtener Todos):
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APPLICATION_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  https://parseapi.back4app.com/classes/Todo
﻿
En tu aplicación de React Native, puedes hacer lo mismo con fetch:
JS
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
async function getTodos() {
  try {
    const response = await fetch('https://parseapi.back4app.com/classes/Todo', {
      method: 'GET',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
    });
    const data = await response.json();
    console.log('Fetched Todos:', data.results);
    return data.results;
  } catch (error) {
    console.error('Error fetching Todos:', error);
  }
}
﻿
Lectura y Escritura de Datos usando la API de GraphQL
Si prefieres GraphQL, Back4App proporciona un endpoint de GraphQL. A continuación se muestra un ejemplo de mutación para crear un nuevo registro:
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
    }
  }
}
﻿
Puedes ejecutar consultas de GraphQL usando una biblioteca como apollo-client o incluso una simple fetch llamada:
JS
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
async function createTodoGraphQL() {
  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "Study React Native"
          isCompleted: false
        }
      }) {
        todo {
          objectId
          title
        }
      }
    }
  `;

  try {
    const response = await fetch('https://parseapi.back4app.com/graphql', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APPLICATION_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ query }),
    });
    const result = await response.json();
    console.log('GraphQL Response:', result);
  } catch (error) {
    console.error('Error creating Todo with GraphQL:', error);
  }
}
﻿
Trabajando con Consultas en Vivo (opcional)
Para datos en tiempo real, Back4App tiene Consultas en Vivo, aunque generalmente requiere el SDK de Parse. Como nos estamos enfocando en llamadas REST en este tutorial, puedes habilitar Consultas en Vivo en la Configuración del Servidor de tu aplicación si planeas usarlas más tarde. Los datos en tiempo real pueden ayudarte a mantener a los usuarios actualizados instantáneamente en una aplicación de React Native. Para un enfoque más simple, podrías sondear el servidor con tus propios intervalos o confiar en herramientas de terceros.
Paso 3 – Aplicando Seguridad con ACLs y CLPs
Resumen breve
Back4App asegura tu backend con ACLs (Listas de Control de Acceso) y CLPs (Permisos a Nivel de Clase). Estos te permiten proteger datos tanto a nivel de objeto como de clase. Son vitales para implementar permisos de usuario seguros en el desarrollo de aplicaciones móviles de calidad de producción.
Paso a paso
Permisos a Nivel de Clase (CLPs):
Ve a la sección Base de Datos de tu aplicación, abre cualquier clase y cambia a “Seguridad y Permisos.” Ajusta los permisos de lectura/escritura para varios roles de usuario o acceso público.
ACLs:
Puedes aplicar control de acceso por objeto incluyendo campos _ACL en tus solicitudes REST. Por ejemplo:
Para más detalles, consulta las Directrices de Seguridad de la Aplicación.
Paso 4 – Escribiendo Funciones de Cloud Code
Por qué Cloud Code
Cloud Code te permite ejecutar scripts del lado del servidor en Back4App para tareas como validaciones, disparadores y procesamiento de llamadas a API externas. Te ayuda a controlar la lógica que debe permanecer oculta del cliente, proporcionando mejor seguridad para tu proyecto de React Native.
Ejemplo de Función
A continuación se muestra un ejemplo que escribirías en tu main.js en el lado del servidor. Puedes llamarlo desde tu aplicación de React Native a través de REST:
JS
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
// main.js

Parse.Cloud.define('generateGreeting', async (request) => {
  const { name } = request.params;
  if (!name) {
    throw 'Name parameter is missing!';
  }
  return `Hello, ${name}! Welcome to our React Native app.`;
});
﻿
Despliegue
Back4app CLI:
Instala la CLI, configura tu clave de cuenta y ejecuta b4a deploy.
Tablero:
También puedes ir a Cloud Code > Functions, pega tu código en main.js, y haz clic en Desplegar.
﻿
Llamando a tu función (a través de REST)
Usa APIs REST directamente desde tu aplicación React Native:
JS
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
async function callCloudFunction(name) {
  try {
    const response = await fetch('https://parseapi.back4app.com/functions/generateGreeting', {
      method: 'POST',
      headers: {
        'X-Parse-Application-Id': 'YOUR_APP_ID',
        'X-Parse-REST-API-Key': 'YOUR_REST_API_KEY',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name }),
    });
    const data = await response.json();
    console.log('Greeting:', data.result);
  } catch (err) {
    console.error('Error calling Cloud Function:', err);
  }
}
﻿
Esta flexibilidad te convierte en un desarrollador full stack más eficiente, ya que puedes integrar la lógica de negocio sin exponer detalles sensibles en el cliente.
Paso 5 – Configurando la Autenticación
Habilitar o Configurar la Autenticación de Usuario
Back4App utiliza la Parse User clase para gestionar la autenticación de usuarios. Incluso si no estás utilizando el SDK de Parse en React Native, puedes registrarte, iniciar sesión o cerrar sesión utilizando solicitudes HTTP directas.
Registrar un Usuario (REST):
Bash
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 '{
       "username": "alice",
       "password": "secretPassword",
       "email": "[email protected]"
     }' \
  https://parseapi.back4app.com/users
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 '{
       "username": "alice",
       "password": "secretPassword",
       "email": "alice@example.com"
     }' \
  https://parseapi.back4app.com/users
﻿
Iniciar Sesión (REST):
Bash
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=secretPassword' \
  https://parseapi.back4app.com/login
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=secretPassword' \
  https://parseapi.back4app.com/login
﻿
Estas solicitudes devuelven un token de sesión que puedes almacenar en tu aplicación de React Native para gestionar las sesiones de usuario. Esto asegura que cada solicitud que realices pueda ser autorizada, construyendo experiencias móviles que se mantengan seguras.
Inicio de Sesión Social
Back4App admite inicios de sesión sociales (Google, Facebook, Apple) a través de flujos especializados. Necesitarás seguir el Documentación de Inicio de Sesión Social para configurar aplicaciones OAuth, y luego enviar los tokens apropiados a Back4App.
Paso 6 – Manejo del Almacenamiento de Archivos
Configurando el Almacenamiento de Archivos
Back4App puede almacenar archivos para tu aplicación React Native. Puedes adjuntarlos a objetos o subirlos directamente. Dado que estamos usando REST, a continuación se muestra un ejemplo de cómo subir un archivo (codificado en Base64):
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  -H "Content-Type: image/png" \
  --data-binary '@path_to_your_file.png' \
  https://parseapi.back4app.com/files/image.png
﻿
La respuesta devuelve una URL que puedes almacenar en tu base de datos. Desde tu aplicación React Native, puedes hacer esto con fetch enviando el archivo como un blob o datos de formulario.
Consideraciones de Seguridad
Para prevenir cargas no autorizadas, configura las opciones de fileUpload en tu Configuraciones del Servidor Parse. Por ejemplo, podrías permitir cargas solo de usuarios autenticados. Esto asegura que servicios como el almacenamiento de archivos permanezcan protegidos.
Paso 7 – Verificación de Correo Electrónico y Restablecimiento de Contraseña
Descripción General
Confirmar la propiedad del correo electrónico es clave para implementar flujos de usuario seguros. Back4App ofrece herramientas integradas para la verificación de correo electrónico y restablecimientos de contraseña.
Configuración del Panel de Control de Back4App
Abre la Configuración de tu Aplicación.
Habilita la verificación de correo electrónico en la Configuración de Correo Electrónico.
Personaliza las plantillas para los mensajes de restablecimiento de contraseña y verificación.
Código/Implementación
Un usuario que olvida su contraseña puede activar una solicitud de restablecimiento:
Bash
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 '{"email": "[email protected]"}' \
  https://parseapi.back4app.com/requestPasswordReset
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 '{"email": "alice@example.com"}' \
  https://parseapi.back4app.com/requestPasswordReset
﻿
Back4App envía un correo electrónico de restablecimiento de contraseña al usuario. Esta conveniencia te ahorra la configuración de servidores de correo separados en tu aplicación de React Native.
Paso 8 – Programación de Tareas con Cloud Jobs
Qué Hacen los Cloud Jobs
Los Cloud Jobs te ayudan a automatizar tareas recurrentes como la limpieza de datos o el envío de informes diarios. A continuación se muestra un ejemplo de trabajo en main.js:
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);
  }
});
﻿
Despliega este código, luego ve a Configuración del Servidor > Tareas en Segundo Plano para programarlo. Esto mantiene tus datos actualizados en tus plataformas iOS y Android sin intervención manual.
Programando un Cloud Job
﻿
Paso 9 – Integrando Webhooks
Definición
Los webhooks permiten que tu backend notifique a servicios externos cada vez que ocurre un evento. Por ejemplo, podrías notificar a Slack o a una pasarela de pago al crear un nuevo Todo.
Configuración
Ve a Más > WebHooks en tu panel de control de Back4App.
Agrega un nuevo Webhook apuntando a un endpoint externo deseado.
Establece disparadores para definir cuándo los cambios en los datos de tu aplicación React Native deberían activar el webhook.
Agregando un Webhook
﻿
También puedes codificar webhooks dentro de los disparadores de Cloud Code, lo que te permite enviar solicitudes HTTP o integrarte con APIs de terceros. Esto amplía las capacidades de tu backend a una amplia gama de servicios externos.
Antes de guardar WebHook
﻿
Paso 10 – Explorando el Panel de Administración de Back4App
Dónde encontrarlo
El Panel de Administración de Back4App es una interfaz fácil de usar para personas no técnicas para gestionar datos. Es especialmente útil para propietarios de productos, representantes de clientes o personal de soporte que necesitan acceso directo a su modelo de datos.
Características
Habilitar la Aplicación de Administración en su Panel de la Aplicación > Más > Aplicación de Administración.
Crear un Usuario Administrador (nombre de usuario/contraseña).
Elegir un Subdominio para un acceso rápido a la base de datos sin código.
Habilitar la Aplicación de Administración
﻿
Una vez que inicie sesión, sus usuarios o equipo pueden ver, editar o eliminar registros sin escribir ningún código. Este enfoque apoya una gestión de datos más rápida y colaboración.
Conclusión
En esta guía, aprendiste cómo construir un backend para aplicaciones de React Native, utilizando Back4App. Esto incluyó:
Crear un backend seguro e implementar compatibilidad multiplataforma para tu aplicación de React Native.
Configurar la gestión de datos con APIs REST y GraphQL.
Configurar ACLs y CLPs para proteger datos sensibles.
Escribir Cloud Code para la lógica del lado del servidor.
Manejar la autenticación de usuarios y la verificación de correos electrónicos.
Gestionar el almacenamiento de archivos con cargas directas.
Programar tareas en segundo plano con Cloud Jobs.
Usar Webhooks para integrar servicios externos.
Explorar el Panel de Administración de Back4App para una fácil administración de bases de datos.
Con estas herramientas y características, tu proyecto de React Native puede crecer hasta convertirse en una solución de pila completa confiable y escalable. Ahora estás equipado para manejar datos en tiempo real, seguridad de usuarios y otros aspectos cruciales de las aplicaciones móviles. Sigue explorando la Documentación de Back4App para perfeccionar tus habilidades y crear experiencias móviles poderosas en las plataformas iOS y Android.
Próximos Pasos
Fortalece tu aplicación de React Native con seguridad avanzada y control de acceso basado en roles.
Experimenta con actualizaciones en tiempo real utilizando Consultas en Vivo para aplicaciones en tiempo real (si es necesario).
Integra APIs externas y servicios incluyendo pasarelas de pago o inicios de sesión sociales.
Mejora el rendimiento a través de caché u optimizando funciones en la nube.
Profundiza más en la documentación oficial de Back4App para desbloquear características adicionales.
﻿
Actualizado 23 Jan 2025
¿Esta página le fue útil?
¿Cómo construir un backend para Xamarin?
¿Cómo construir un backend para Objective-C?