Uso en el conector API de Bubble

En este vídeo, aprenderás a utilizar el conector API de Bubble para ampliar significativamente la funcionalidad de Bubble y, por tanto, de tu aplicación web. Esto se hace integrando APIs, es decir, interfaces de programación (puede encontrar más información sobre elconcepto aquí).

Como ejemplo, tomemos la API de GIPHY, que puedes encontrar en https://developers.giphy.com/. Allí creamos una cuenta de desarrollador y luego una app propia con la API de GIPHY. A continuación, echamos un vistazo a la documentación de la API de GIPHY. Puede encontrarlo en: https://developers.giphy.com/docs/api/

A continuación, instalamos el Conector API en Bubble. Vaya a Plugins y busque el Conector oficial de la API en Bubble.

Crea allí una nueva API con el nombre de API GIPHY.

La autenticación es una clave privada en URL. En la documentación de GIPHY tenemos la API Key y la añadimos en Bubble. A continuación, definimos el punto final de la búsqueda en Bubble. Hacemos una llamada GET y de la documentación obtenemos la petición de URL: https://api.giphy.com/v1/gifs/search

A continuación, determinamos los parámetros de la API. La clave es la consulta (q) y como valor por defecto tomamos "porsche", esto es completamente a su gusto.

Este valor no es privado. Por lo tanto, puede desactivar la casilla aquí.

Por último, Bubble nos da la función para probar la llamada a la API. El botón se llama Initialize API Call. Si la API es correcta, ahora obtenemos la información directamente de la API como respuesta.

Bubble asigna automáticamente un tipo de datos a cada respuesta de la API, que puede cambiar en cualquier momento.

Una vez que hemos inicializado con éxito la API en el Conector de la API, el siguiente paso es acceder a ella en la pestaña Flujo de trabajo o Diseño, respectivamente. Para ello, creamos un campo de entrada, que llamamos Palabra Clave Giphy. A continuación creamos un Grupo de Repetición. En la Fuente de Datos seleccionamos Obtener Datos de la API externa y elegimos nuestra Búsqueda de la API de GIPHY . Dejamos que Bubble establezca el tipo a Contenido automáticamente. En el Grupo de Repetición definimos ahora una Imagen, que rellenamos dinámicamente con los datos de la API de GIPHY. Luego tomamos un campo de texto para rellenarlo con datos de nuestra API (nombre de usuario, por ejemplo).

Si ahora vamos a la vista previa, podemos ver cómo nuestra aplicación Bubble se comunica con la API de GIPHY y prácticamente hemos definido nuestra propia API en Bubble.

Transcripción del vídeo

Hola, mi nombre es Chris Strobl y hoy voy a mostrarte cómo puedes conectar tus propias APIs en Bubble, a través del Conector de API y para ello utilizaremos la API de GIPHY. Lo primero es crear una cuenta, iniciar sesión y pulsar "Empezar". Cuando estés en "Get started", verás el SDK Overview, pero usaremos la API normal. Lo primero que hacemos es crear una aplicación para ello. Tomamos la API. Seleccione la API. Siguiente paso; y crear esta aplicación. Ahora obtendrá una clave API aquí. Al mismo tiempo, abra la documentación. Ve a la API y mira los puntos finales. Entramos una vez en el punto final de la búsqueda. Ahora entramos en Bubble.io.

Y vaya a Plugins e instale el Conector API. Y este Conector API ahora te permite desarrollar tu propia API y primero vamos a Añadir otra API. Llamamos a esta API "GIPHY" y ahora tenemos diferentes opciones de autenticación, como hoy estamos haciendo un tutorial muy sencillo y estamos trabajando con el Conector de la API por primera vez, usaremos la clave privada en la URL. También hay APIs públicas y, por supuesto, también hay APIs encriptadas muy complicadas, especialmente para los pagos.

Pero tomamos una clave privada en la URL. Aquí ves el nombre de la clave y el valor de la clave y si vamos a la documentación de GIPHY, ves que GIPHY dice que es una api_key y que es una cadena. Eso significa que copiamos api_key aquí mismo y lo pegamos en el nombre de la clave y como valor de la clave coges tu clave API de GIPHY para el valor de la clave de desarrollo también puedes coger lo mismo. Esto es opcional. Si ahora queremos definir esta llamada a la API, es decir, la comunicación con la API, tenemos una interacción entre la documentación y la burbuja.

Vamos a GIPHy Developers y miramos el Search Endpoint y vemos que nos da acceso y accede a la biblioteca, la biblioteca de millones de gifs y stickers, escribiendo una palabra o una frase. ¿Cómo funciona eso? Bajamos y vemos que tenemos la URL, la URL de la API por así decirlo. Esto tiene los siguientes parámetros que se requieren, que son la API_key y la cadena. Estos dos son necesarios. Y luego tenemos un montón de parámetros opcionales, como "cuántos es el límite".

Es decir, la primera, es decir, la clave de la API, que ya tenemos arriba en la autenticación: Clave de la API. Y ahora para los parámetros, yo diría que llamamos a esta API "Búsqueda". Esto es posible, por un lado, como datos o acción. Como queremos que nos devuelvan datos y no controlar un flujo de trabajo en esta API, es Data. Y obtenemos de vuelta un archivo JSON y aquí tienes las diferentes formas de trabajar con una API. Simplemente, GET nos da datos. Es decir, obtenemos datos. POST envía datos y PUT y PATCH y DELETE trabajan con datos. Tenemos una API de búsqueda, es decir, una API que obtiene datos. A continuación, volvemos a la documentación y tomamos esta URL para los gifs.

Los copiamos aquí y añadimos https:// y ahora necesitamos los parámetros. Es decir, el parámetro 1, como hemos visto, junto a la api_key es la consulta, que es "q:". Y esta consulta busca palabras clave en GIPHY para devolver imágenes. Esto significa que buscamos con la consulta "q:". Qué es lo que hacemos: Volvemos, añadimos "q" y tomamos como valor, por ejemplo, "Porsche". Otro parámetro es ahora, si vuelves a la documentación, no obligatorio, pero posible: Límite.

Es decir, ¿cuántos objetos queremos recuperar? Hacemos un límite aquí y lo ponemos en 20. Ahora todavía tengo privado y opcional aquí. Privado significa que no podemos manipular cómo enviamos la API a través de nuestra aplicación, es decir, a través del flujo de trabajo. Si eliminamos lo privado, como hicimos aquí con la consulta, aún podemos cambiar el parámetro más adelante en la aplicación. Opcional, por otro lado, significa que no necesitamos el parámetro en absoluto. Lo siguiente es que inicialicemos. Esto significa que esta llamada a la API se envía una vez y se puede ver aquí que obtenemos todos los datos de vuelta de la API y que la API ha sido perfectamente inicializada. En los campos de aquí se puede ver que Bubble hace automáticamente una sugerencia en cuanto a los datos. Por ejemplo, texto, números o incluso valores booleanos. Por ejemplo, el usuario está verificado. Esto es muy importante si quieres guardar los datos de la API más tarde. Que también se ve aquí, por así decirlo, "Ok, ¿qué me devuelve en absoluto?

Al mismo tiempo, si haces clic en Mostrar datos sin procesar aquí abajo en el Conector de la API, verás que el JSON vuelve con bastante precisión. Ahora vamos a pulsar guardar. Quiero volver a mostrarte brevemente lo que ocurre si te equivocas. Es decir, sucede muy a menudo cuando se define una API que no se ajusta de inmediato. Así que en lugar de buscar, simplemente hago la búsqueda con T. Reiniciamos. Y vemos: obtenemos un error de la API de Bubble. Eso significa que vemos directamente si funciona o no. Volvemos a buscar. Inicializar. Y ya vemos: ahora todo funciona. Ahora lo guardamos todo. Quiero mostrarte cómo puedes usar todo en el frontend. Entramos en el editor de diseño y lo primero que hacemos es crear un campo de búsqueda de entrada. Es decir, aquí tomamos Teclado para GIPHY y hacemos Texto como campo. A continuación, tomaremos un grupo de repetición, que ha demostrado ser muy valioso para representar las API. Vas a DataSource obtener datos de la API externa y aquí está nuestra búsqueda API GIPHY.

Y dice que el parámetro de consulta aquí se rellena con Porsche. Quasi, lo que está ahí por defecto. Vamos a Insertar datos dinámicos, Entrada y tomamos el valor de la misma. Si se pulsa Cerrar, introducimos los datos aquí. Verás, nos devuelven diferentes, pero queremos los datos de la API. Bubble.io ahora también te sugiere cambiar el tipo de contenido, así que pulsamos "sí" y recuperamos los datos de la búsqueda. Y hagámoslo un poco más pequeño a 2 filas, hagamos la lista completa. Hemos acotado todo y al lado tenemos una imagen e Insertar datos dinámicos, Datos de búsqueda de la celda actual, URL original de la imagen y al lado Insertar datos dinámicos, Título y el nombre de usuario del creador. Si ahora vamos a la vista previa, verá que tenemos nuestra consulta estándar de Porsche, que estaba allí cuando la iniciamos, y si ahora introducimos una consulta diferente, por ejemplo "Ferrari".

Entonces obtenemos Ferraris y si introducimos "Volkswagen", obtenemos Volkswagen. Con la API de GIPHY, puedes ver lo excelente que es la ampliación de Bubble a través del conector de la API y este conector de la API es también el primer paso para desarrollar plugins en Bubble por ti mismo. Y te deseo que sigas teniendo éxito con Bubble y hasta pronto.