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

Paso 1: Crea tu aplicación Bubble.io

El primer paso para integrar Bubble.io con Wix eCommerce es crear tu aplicación en Bubble.io. Inicia sesión en tu cuenta de Bubble.io y haz clic en el botón “Nueva aplicación”. Esto iniciará el flujo de trabajo para la creación de la aplicación. Se te pedirá que nombres tu aplicación y definas el tipo de aplicación (ya sea una página única, varias páginas o una aplicación de portal, por ejemplo). Elige el tipo de aplicación que mejor se adapte a tus necesidades, completa el proceso y crea tu aplicación.

Paso 2: Ubica tu clave API de Bubble.io

Después de crear tu aplicación, el siguiente paso es localizar tu clave API de Bubble.io. Para encontrarla, ve a la pestaña “Configuración” en el panel de Bubble.io. En la sección "API", encontrarás la 'Clave API' de tu aplicación. Copia esta clave; la necesitarás para conectar tu aplicación Bubble.io a tu tienda Wix eCommerce.

Paso 3: Crea tu tienda Wix eCommerce

Si aún no lo has hecho, crea tu tienda Wix eCommerce. Esto se puede hacer iniciando sesión en tu cuenta de Wix y seleccionando la opción “Crear”. Serás guiado a través del proceso de creación, durante el cual elegirás una plantilla y configurarás los ajustes de tu tienda a tu gusto.

Paso 4: Accede a las herramientas de desarrollo de Wix

Una vez que tu tienda Wix esté configurada, es hora de acceder a las herramientas de desarrollo de Wix. Desde la página de inicio de tu cuenta de Wix, navega a 'Modo Desarrollador' en la parte superior derecha de tu pantalla, luego selecciona “Habilitar Corvid”. Esto abrirá un nuevo espacio de trabajo en tu editor que ofrece funcionalidades de desarrollo adicionales, una de las cuales es la integración con las APIs, como la de Bubble.io.

Paso 5: Conecta Wix y Bubble.io a través de API

Ahora es el momento de integrar Bubble.io con Wix eCommerce utilizando tu clave API. Para hacer esto, selecciona la sección 'Backend' en tu 'Modo Desarrollador' de Wix, abre el archivo 'http-functions.js' (este podría ser 'backend.js' o algo similar en versiones más recientes de Wix) y comienza a escribir tu función fetch para conectarte a la API de Bubble.io.

El código JavaScript para conectarte a la API de Bubble dependerá en gran medida de lo que quieras lograr con tu integración. Sin embargo, se verá algo así, utilizando el nombre de tu aplicación Bubble.io y tu clave API:

import {fetch} from 'wix-fetch';

export function bubbleGet(queryParams) {
    const url  = `https://appname.bubbleapps.io/version-test/api/1.1/obj/Thing`;

    return fetch(url, {
    method: 'get',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your_api_key'
             },
    }).then((httpResponse) => {
    if (httpResponse.ok) {
        return httpResponse.json();
    } else {
        return Promise.reject("Fetch did not succeed");
    }
    });
}

Reemplaza "appname" con el nombre de tu aplicación Bubble.io, "Thing" con el ítem que deseas obtener de tu aplicación Bubble.io y 'your_api_key' con tu clave API de Bubble actual.

Paso 6: Prueba la integración

Para asegurarte de que la integración ha sido exitosa, lo mejor es realizar una prueba. En tu tienda Wix, ejecuta una función que llame al base de datos de Bubble.io a través de la API establecida. Verifica que se devuelvan los resultados esperados. Si es así, ¡felicidades! Tu aplicación Bubble.io se ha integrado exitosamente con tu tienda Wix eCommerce.

Nota: Por favor, recuerda que el caso de uso en esta guía es básico, y las posibilidades de la integración entre Bubble.io y Wix eCommerce son mucho más amplias, lo que te permite crear sitios web de comercio electrónico complejos y dinámicos con muchas características. Si tienes necesidades avanzadas, considera contratar a un desarrollador profesional para asegurar los mejores resultados. Sin embargo, esta guía debería proporcionarte una base sólida para entender el proceso.