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

Paso 1: Crea una cuenta en Bubble y Backblaze B2

Antes que nada, asegúrate de tener cuentas en Bubble.io y Backblaze B2. En caso de que no tengas una, ve a sus respectivos sitios web y crea una.

Para Bubble: https://bubble.io/
Para Backblaze B2: https://www.backblaze.com/b2/cloud-storage.html

Paso 2: Crea una nueva aplicación en Bubble

Primero, inicia sesión en tu cuenta de Bubble y crea una nueva aplicación. Haz clic en el botón "Nueva aplicación", proporciona un nombre para la aplicación y selecciona una plantilla si lo deseas. Una vez que estés satisfecho, haz clic en "Crear nueva aplicación".

Paso 3: Configura el Bucket en Backblaze B2

Ahora, cambia a Backblaze B2. Una vez que hayas iniciado sesión, debes crear un nuevo bucket que se utilizará para almacenar tus archivos a través de Bubble. Haz clic en el enlace "Buckets" en el menú de la izquierda, luego haz clic en el botón "Crear un Bucket". Dale a tu bucket un nombre único, selecciona el tipo de acceso que deseas para este bucket y haz clic en "Crear un Bucket".

Paso 4: Genera la clave API

Después de que se cree el bucket, necesitarás una clave API para permitir la interacción entre Bubble y Backblaze B2. Para ello, haz clic en el menú "Teclas de la aplicación" a la izquierda, luego haz clic en "Agregar una nueva clave de aplicación". Dale un nombre a la clave y otorga los permisos necesarios. Una vez hecho esto, haz clic en "Crear nueva clave". Importante: asegúrate de guardar esta clave en un lugar seguro, ya que Backblaze no te volverá a mostrar esta clave por motivos de seguridad.

Paso 5: Configura el Conector API en Bubble

Ahora, necesitas configurar Bubble para usar esta clave para interactuar con Backblaze B2. Regresa a Bubble y abre tu aplicación, luego navega hasta Plugins. Haz clic en "Agregar plugins", busca "Conector API" y agrégalo a tu aplicación.

Una vez que se agrega el Conector API, debes configurarlo. Haz clic en "Conector API" en la pestaña de Plugins. Haz clic en "Agregar otra API", nómbralo algo como "Backblaze B2".

Crearemos dos llamadas: una para cargar archivos y otra para listar los archivos.

Paso 6: Configura la Llamada 'Obtener URL de Subida'

En la API que has creado, haz clic en "Agregar otra llamada". Nombra esta llamada "Obtener URL de Subida". Usa la siguiente configuración:

• Método: POST
• Usar como: Acción
• URL: https://api.backblazeb2.com/b2api/v1/b2_get_upload\_url
• Key del header: Autorización | Valor: tu clave API de Backblaze
• Key del parámetro: bucketId | Valor: ID de tu bucket de Backblaze

Haz clic en Inicializar Llamada, si todo está configurado correctamente, deberías recibir un mensaje diciendo que la llamada ha sido configurada.

Paso 7: Configura la Llamada 'Subir Archivo'

Agrega otra llamada API, nómbrala "Subir Archivo". Esta llamada se usará para subir los archivos a Backblaze B2. Usa la siguiente configuración:

• Método: POST
• Usar como: Acción
• URL: Use Result from … 'Get Upload URL' uploadUrl
• Cuerpo:

{
"file_data": "Base64 encode file",
"file_name": "Name of the File"
}

• Los pares clave-valor de los Headers deben incluir:

• Authorization: Use Result from … 'Get Upload URL' authorizationToken

• X-Bz-File-Name: file_name

• Content-Type: content_type of the file

• X-Bz-Content-Sha1: do_not_verify

Aquí, 'Obtener URL de Subida' debe ser tu anterior llamada 'Obtener URL de Subida'. 'file_name' debe ser recuperado de forma dinámica a partir del archivo a subir. 'content_type' debe basarse en el tipo de archivo a subir.

Inicializa la llamada, y también debería estar configurada.

Paso 8: Configura Tu Flujo de Trabajo

Ahora, dependiendo de cómo quieras usarlo en tu aplicación Bubble, integrarás el flujo de trabajo con elementos. Como un ejemplo, si quieres subir un archivo cuando se hace clic en un botón, editarás el flujo de trabajo de ese botón:

• Agrega una nueva acción al flujo de trabajo de tu botón
• Elige 'Plugins' y selecciona 'Obtener URL de Subida' de la API de Backblaze
• Luego, como segunda acción en el flujo de trabajo, elige 'Subir Archivo' y establece los valores dinámicos según el requerimiento (nombre del archivo y tipo de contenido)

Después de estos pasos, tu aplicación Bubble ahora debería ser capaz de llamar a las APIs de Backblaze B2 a través del Conector API que configuraste, permitiéndote subir archivos al bucket que creaste.