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

35min
Introducción
En este tutorial, aprenderás cómo construir un backend completo para una aplicación Ionic utilizando Back4App. 
Cubriremos la gestión de bases de datos, funciones de Cloud Code, APIs REST y GraphQL, autenticación de usuarios, manejo de archivos y más. 
Nuestro objetivo es mostrarte cómo construir un backend para Ionic que sea seguro, escalable y fácil de mantener.
Usaremos el entorno intuitivo de Back4App para simplificar la configuración del lado del servidor, ahorrándote de configurar manualmente servidores o bases de datos. 
Aprenderás herramientas esenciales como programar tareas con Cloud Jobs, aplicar reglas de seguridad avanzadas e integrar webhooks con otros servicios. 
Al final, estarás listo para expandir este backend fundamental en un sistema listo para producción para tu aplicación Ionic.
Requisitos previos
Una cuenta de Back4App y un nuevo proyecto de Back4App
Comenzando con Back4App.
Si no tienes una cuenta, crea una gratis y sigue la guía anterior para configurar tu proyecto.
Entorno de desarrollo básico de Ionic
Asegúrate de tener el Ionic CLI instalado y poder crear y ejecutar una aplicación Ionic.
Node.js (versión 14 o superior) instalado
Descargar Node.js para gestionar dependencias y construir tu proyecto.
Familiaridad con JavaScript/TypeScript y conceptos de Ionic
Documentación oficial de Ionic.
Tener un buen dominio de las estructuras, componentes y ganchos de ciclo de vida de Ionic será útil.
Paso 1 – Crear un nuevo proyecto en Back4App y conectar
Inicia sesión en tu cuenta de Back4App.
Crea una nueva aplicación utilizando el botón “Nueva Aplicación” en tu panel de control de Back4App.
Nombra tu aplicación (por ejemplo, “Ionic-Backend-Tutorial”).
﻿
Este proyecto de Back4App es la base para tu backend. A diferencia de usar un SDK de Parse del lado del cliente, este tutorial demostrará cómo hacer llamadas a través de REST y GraphQL desde tu aplicación Ionic.
Recuperando tus credenciales
En el panel de Back4App, ve a Configuración de la Aplicación o Seguridad y Claves.
Anota tu ID de Aplicación, Clave API REST, y Punto de Acceso GraphQL. Necesitarás estos para enviar solicitudes desde tu aplicación Ionic.
Paso 2 – Configuración de la Base de Datos
Tener una base de datos bien estructurada es la columna vertebral de cada aplicación. El panel de Back4App facilita el diseño de modelos de datos y la gestión de relaciones.
1. Creando un Modelo de Datos
Ve a la Base de Datos sección en tu panel de Back4App.
Crea una nueva clase (por ejemplo, “Todo”) y añade columnas (por ejemplo, título como String, isCompleted como Boolean).
Crear Nueva Clase
﻿
2. Creando un Modelo de Datos Usando el Agente de IA
Abre el Agente de IA desde tu panel de control de Back4App.
Describe tu esquema deseado, como “Crea una clase Todo con campos para título (String) y isCompleted (Boolean).”
El Agente de IA generará el esquema automáticamente.
﻿
3. Lectura y Escritura de Datos usando REST API
Desde tu código Ionic, puedes ejecutar solicitudes HTTP. Por ejemplo, para 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
﻿
Para obtener todos los 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
﻿
Puedes integrar estas llamadas usando fetch, Axios, o cualquier biblioteca de cliente HTTP dentro de los archivos de servicio o componente de tu aplicación Ionic.
4. Leer y Escribir Datos usando la API de GraphQL
De manera similar, puedes enviar mutaciones y consultas de GraphQL desde tu aplicación Ionic. Por ejemplo, para crear un nuevo Todo:
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
    }
  }
}
﻿
Ejemplo Las llamadas REST o GraphQL pueden colocarse en un archivo de proveedor/servicio en tu estructura Ionic, y luego ser llamadas desde tus páginas.
5. Trabajando con Consultas en Vivo (Opcional)
Las Consultas en Vivo proporcionan actualizaciones en tiempo real a los datos de tu aplicación, aunque requieren el SDK de Parse o un enfoque de suscripción especializado. Si necesitas datos en tiempo real, puedes habilitar Consultas en Vivo desde la configuración de tu servidor Back4App. Normalmente usarías una conexión WebSocket para observar cambios en tus clases. Sin embargo, para llamadas estándar basadas en HTTP, puedes consultar periódicamente los puntos finales REST o GraphQL.
Paso 3 – Aplicando Seguridad con ACLs y CLPs
Resumen Breve
ACLs (Listas de Control de Acceso) te permiten establecer permisos de lectura/escritura en objetos individuales. CLPs (Permisos a Nivel de Clase) te permiten gestionar un acceso más amplio a nivel de clase. Estas características son cruciales para proteger datos privados y asegurar que solo los usuarios autorizados puedan modificar información.
Configurando Permisos a Nivel de Clase
En tu panel de control de Back4App, ve a Base de Datos > Permisos a Nivel de Clase.
Configura los valores predeterminados de tu clase (por ejemplo, solo los usuarios autenticados pueden crear nuevos Todos).
Configurando ACLs
Al crear o actualizar registros, puedes pasar ACL campos a través de 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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
﻿
Para más información, 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 JavaScript del lado del servidor para tareas como validación de datos, disparadores o integraciones. Puedes crear puntos finales personalizados para centralizar la lógica, lo cual es especialmente útil si deseas mantener el código fuera del cliente.
Ejemplo de Función y Disparadores
En tu main.js en el lado del servidor (Back4App), podrías escribir:
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Despliega esto a través del Back4App CLI o en la sección de Cloud Code del panel.
Llamando a Cloud Code desde Ionic
Puedes enviar una solicitud POST:
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
﻿
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Despliega esto a través del Back4App CLI o en la sección de Cloud Code del panel.
Recibirás una respuesta JSON que contiene cualquier dato devuelto o un mensaje de error.
Módulos NPM
Puedes instalar paquetes como axios en tu entorno de Cloud Code para integrar servicios de terceros. Inclúyelos en main.js:
JS
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
﻿
Despliega y llámalo de la misma manera que lo harías con cualquier función de Cloud Code.
Paso 5 – Configurando la Autenticación
Habilitando la Autenticación de Usuarios
El registro y el inicio de sesión de usuarios se pueden realizar con llamadas REST a la User clase. Por ejemplo, para registrarse:
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": "jon",
    "password": "somePassword",
    "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": "jon",
    "password": "somePassword",
    "email": "jon@example.com"
  }' \
  https://parseapi.back4app.com/users
﻿
Iniciar Sesión
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  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" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
﻿
Si tienes éxito, recibirás un sessionToken. Guárdalo de forma segura e inclúyelo en los encabezados de futuras solicitudes para operaciones autenticadas.
Inicios de Sesión Sociales
Puedes configurar inicios de sesión sociales (como Google o Facebook) configurando el flujo de OAuth a través de Back4App o utilizando proveedores externos. Consulta la Documentación de Inicio de Sesión Social para pasos detallados.
Paso 6 – Manejo del Almacenamiento de Archivos
Configurando el Almacenamiento de Archivos
Back4App ofrece almacenamiento de archivos seguro. Puedes adjuntar archivos a objetos o almacenarlos de forma independiente. Por ejemplo:
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/image.png" \
  https://parseapi.back4app.com/files/myImage.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/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
La respuesta incluirá una URL de archivo que puedes almacenar en una clase:
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
﻿
Consideraciones de Seguridad
Puedes habilitar reglas de seguridad de archivos en Configuraciones del Servidor de Back4App para requerir autenticación o limitar las cargas de archivos a roles específicos.
Paso 7 – Verificación de Correo Electrónico y Restablecimiento de Contraseña
Por qué la Verificación es Importante
La verificación de correo electrónico asegura la legitimidad de los correos electrónicos de los usuarios. El restablecimiento de contraseña proporciona una forma segura de recuperar credenciales perdidas. Esto ayuda a mantener la confianza y una adecuada gestión de usuarios en tu aplicación Ionic.
Configuración del Panel de Control de Back4App
Ve a Configuraciones de la Aplicación > Configuraciones de Correo Electrónico.
Habilita Verificación de Correo Electrónico.
Personaliza las plantillas de correo electrónico de verificación y restablecimiento de contraseña.
Paso 8 – Programación de Tareas con Trabajos en la Nube
Qué Hacen los Trabajos en la Nube
Los Trabajos en la Nube te permiten programar tareas recurrentes como la limpieza de datos o el envío de correos electrónicos de resumen. Los escribes en tu main.js:
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Después de la implementación:
Ve a Configuraciones de la Aplicación > Configuraciones del Servidor > Trabajos en Segundo Plano.
Programa cleanupOldTodos para que se ejecute diariamente.
Programación de un Trabajo en la Nube
﻿
Paso 9 – Integrando Webhooks
Los webhooks te permiten enviar datos a servicios externos cuando ocurren ciertos eventos en tu proyecto de Back4App. Si tu aplicación Ionic necesita activar una acción en Stripe o Slack después de crear un nuevo registro, puedes usar webhooks para automatizar eso.
Ve a Más > WebHooks en tu panel de control de Back4App.
Agrega un nuevo Webhook y establece su endpoint (por ejemplo, https://your-service.com/webhook-endpoint).
Elige el evento (por ejemplo, “Después de Guardar” en la clase Todo).
Agregando un Webhook
﻿
También puedes iniciar solicitudes salientes desde los triggers de Cloud Code en main.js usando bibliotecas HTTP estándar.
Paso 10 – Explorando el Panel de Administración de Back4App
El Back4App Admin App es una interfaz más simple para partes interesadas no técnicas. Proporciona una manera fácil de realizar operaciones CRUD en tus clases sin entrar en el panel principal de Parse.
Habilitando la Admin App
En el panel, ve a Más > Admin App.
Haz clic en Habilitar Admin App y crea un usuario administrador.
Elige un subdominio para acceder a tu interfaz de administrador.
Habilitar Admin App
﻿
﻿
Este panel te ayuda a gestionar datos sin escribir consultas, lo que lo hace ideal para clientes o miembros del equipo que prefieren una interfaz gráfica.
Conclusión
Al completar esta guía sobre cómo construir un backend para Ionic, has:
Creado un backend seguro en Back4App con modelos de datos robustos y relaciones.
Integrado con APIs REST y GraphQL para leer y escribir datos desde tu aplicación Ionic.
Implementado seguridad con ACLs y CLPs.
Desplegado Cloud Code para lógica personalizada y triggers.
Configurado la autenticación de usuarios y almacenamiento de archivos.
Configurado Cloud Jobs para programar tareas.
Aprovechado webhooks para integraciones externas.
Explorado el Panel de Administración para simplificar la administración de datos.
Con esta base, tu aplicación Ionic puede evolucionar hacia una plataforma lista para producción. Agrega más lógica, conecta APIs de terceros o ajusta las reglas de seguridad para que coincidan con tu caso de uso.
Próximos Pasos
Mejora tu construcción de producción implementando caché, acceso basado en roles y monitoreo de rendimiento.
Integra características avanzadas como consultas en tiempo real o autenticación multifactor.
Consulta la documentación oficial de Back4App para una exploración profunda de análisis, registros y ajuste de rendimiento.
Explora otros tutoriales que demuestran aplicaciones de chat, integraciones de IoT o características basadas en ubicación combinadas con los robustos servicios backend de Back4App.
﻿
Actualizado 23 Jan 2025
¿Esta página le fue útil?
¿Cómo construir un backend para Symfony?
¿Cómo construir un backend para Dart?