Integración de Bubble.io y WordPress: Guía paso a paso 2024

Paso 1: Comienza con Bubble.io

Antes de comenzar con el proceso de integración, debes tener configurada tu aplicación en Bubble.io. Asumiendo que ya tienes una cuenta, comenzaremos desde ahí:

• Inicia sesión en tu cuenta de Bubble.io,
• Navega a tu panel de control,
• Selecciona la aplicación que deseas integrar con WordPress o crea una nueva aplicación.
• Una vez dentro de la aplicación, haz clic en "Configuración" en el menú principal.

Paso 2: Configura los Puntos Finales de la API en Bubble.io

Necesitarás comunicarte a través de APIs entre Bubble.io y WordPress. Primero, configura los puntos finales de la API en Bubble.io:

• En la página de configuración de la aplicación, haz clic en la pestaña "API",
• Marca la casilla que permite Data API,
• Marca la casilla para Esta aplicación expone una API POST/Flujo de trabajo,
• Haz clic en "Añadir un punto final" y nómbralo según tu preferencia (recuérdalo, lo necesitarás más tarde).

Paso 3: Configura los Datos Para Enviar a través de la API

A continuación, define qué datos quieres enviar a WordPress:

• Todavía en la página de la API, desplázate hacia abajo hasta el punto final que acabas de crear,
• Trabaja en la configuración POST,
• Define los tipos de datos que deseas enviar, por ejemplo, puedes incluir el nombre, el correo electrónico y la foto de perfil de un usuario,
• Para cada tipo de datos, proporciona una clave y define si es opcional o requerido.

Paso 4: Abre WordPress e Instala el Plugin de Rest API

Ahora es el momento de cambiar de plataforma e iniciar sesión en tu WordPress:

• Desde tu panel de control de WordPress, ve a "Plugins" > "Añadir nuevo",
• Usa la barra de búsqueda para buscar "Rest API - Filter Fields" y presiona enter. Este plugin ayuda a filtrar y simplificar los datos que recibes,
• Encuentra e instala el plugin llamado "REST API – Filter fields" de Arjun Jain,
• Después de instalarlo, no olvides activar el plugin.

Paso 5: Prueba el Plugin de Rest API

Antes de proceder, asegúrate de que el plugin funciona correctamente:

• En una nueva ventana o pestaña del navegador, escribe la URL de tu sitio de WordPress seguido de '/wp-json/' (ejemplo: https://tusitio.com/wp-json/),
• Presiona enter,
• Debería devolverte los datos JSON de tu sitio de WordPress.

Paso 6: Instala el Plugin Http Request

Un paso crucial al integrar Bubble.io y WordPress es facilitar la comunicación entre ambas plataformas. Aquí es donde entra en juego el plugin de Http Request:

• En tu panel de control de WordPress, ve a "Plugins" > "Añadir nuevo",
• Busca "Http Request",
• Encuentra e instala el plugin llamado "HTTP Requests" de KubiQ,
• Después de instalarlo, asegúrate de activar el plugin.

Paso 7: Configura una Acción con el Plugin HTTP Request

Ahora, crea una acción con el plugin Http Request:

• En tu panel de control de WordPress, ve a "HTTP Requests",
• Haz clic en "Add New",
• Proporciona un título para tu acción,
• Regresa a tu página de Bubble.io, copia la URL del punto final de la API que creaste antes y pégala en "URL to call",
• Establece el tipo de método como "POST",
• En la sección 'Headers', haz clic en 'add line' y establece ‘Key’ como ‘Content-Type’ y ‘Value’ como ‘application/json’,
• En JSON body, necesitas formatear los datos que deseas enviar utilizando la estructura:

  {
  "data": [{"Key1":"Key1Value", "Key2":"Key2Value", "KeyX":"KeyXValue"}]
  }
  

• Sustituye "Key1", "Key2", "KeyX" con las claves (tipos de datos) que configuraste en Bubble.io,
• Sustituye "Key1Value", "Key2Value", "KeyXValue" con los campos relevantes de WordPress.

Paso 8: Confirma que Toda la Configuración Funciona

El paso final es verificar que tu configuración funciona:

• Vuelve a la página de WordPress donde creaste tu solicitud HTTP,
• Haz clic en “Guardar cambios”,
• Luego haz clic en “Probar llamada” en el lado derecho de la página,
• En la página que aparece, si tu llamada de prueba fue exitosa, verás un código de estado 200,
• También puedes volver a tu aplicación Bubble.io y revisar los "Registros" > "Registros del servidor" para ver si llegaron los datos solicitados.

Recuerda que para esta guía, las acciones en WordPress desencadenarán eventos en Bubble y viceversa. Por lo tanto, debes tener una sólida comprensión de lo que acciones en WordPress deseas obtener datos o enviar datos a Bubble. ¡Disfruta de tu nuevo ambiente integrado de Bubble + WordPress!