Cómo conectar API externa a Bravo Studio

Por
Juanjo Espada

Cómo conectar API externa a Bravo Studio

Antes de empezar, como siempre, un poco de contexto. Si no sabes qué herramienta es Bravo Studio, te cuento: se trata de un constructor de apps que se basa en fusionar un diseño de Figma o Adobe XD con un backend, generalmente en Airtable. Una auténtica maravilla para diseñadores y demás builders que quieren prestar un especial cuidado al diseño.

Si has visto parte de los contenidos de la membresía, o has revisado nuestro curso básico de Bravo Studio, habrás comprobado lo sencilla que es la integración de esa herramienta con Airtable, gracias a su configurador. Un par de pasos y tienes totalmente listo un backend conectando ambas herramientas.

Pero, ¿qué pasa cuando queremos que nuestra aplicación tenga datos de terceras fuentes? Fuentes extraídas, por ejemplo, de APIs que nos ofrecen información sobre un tema en concreto.

En esta pequeña guía vamos a ver cómo podemos conectar Bravo con una API que nos va arrojar resultados de fútbol y otra que nos va a aportar una previsión meteorológica.

Si no conoces nada de Bravo, antes de empezar, te recomendaría que le echases un vistazo al curso básico que tenemos en SharingAway. En él aprenderás a crear, desde cero, una app en Bravo Studio.

Conectar Bravo Studio con una app de fútbol desde Rapid Api

Si no conoces Rapid Api, no sé a qué esperas para buscar y navegar por esta web. Es un almacén enorme de APIs, gratuitas y de pago, que harán las delicias de tu imaginación.

Gracias a ella podemos construir, por ejemplo, una app que nos arroje los resultados de fútbol de una liga en concreto.

Vamos a verlo.

Lo primero, tenemos que irnos a Rapid Api y bucear hasta encontrar lo que buscamos. En nuestro caso vamos a utilizar esta de API-FOOTBALL. Simplemente nos tendremos que suscribir, elegir un plan y, en algunos casos, poner una tarjeta de crédito por si nos pasamos de las llamadas que tiene para el plan gratuito. (Nada grave, puedes cancelar en cualquier momento y borrar tu tarjeta).

Vale, una vez tenemos esto, nos vamos a encontrar con una pantalla como veis a continuación.

Tenemos diferentes tipos de eventos que podemos consultar, como clasificaciones, partidos, estadísticas por equipo… Es una locura esta API. Y podemos hacer cosas muy chulas.

Para probar esta API, os dejo que trasteéis vosotros. Para encontrar la liga en concreto que queréis, tenéis que suscribiros también en esta web, https://dashboard.api-football.com/ y buscar la sección APIs, a la derecha, elegir la API que queréis, marcar en IDs y buscar exactamente lo que necesitáis.

En nuestro caso vamos a hacer una llamada para que nos liste los partidos de la liga en Primera División de toda la temporada.

Para la primera llamada, tenemos que buscar el ID de la liga. Puedes ver cómo lo hacemos en el siguiente gif:

Tenemos el número, nos vamos a Rapid Api. Vamos a seleccionar la llamada de tipo “Fixture”, a la derecha de la pantalla y, en concreto, “Fixture by League Id”.

En la sección central, bajamos y donde pone “League” pegamos el número que acabamos de consultar en la documentación de la API. En season ponemos la temporada que queremos, en nuestro caso, 2022. Pulsamos en Test Endpoint y nos vamos a la sección de Code Snippet.

En esta sección de Code Snippet tenemos ya todo lo que necesitamos para configurar nuestra API en Bravo. Necesitamos la url de la API, los Header (entre ellos la API Key) y los parámetros.

En Bravo, nos vamos a API collections, creamos una nueva colección y lo hacemos seleccionando “Start From Scratch”.

Vamos a configurar la llamada. La llamaremos “Resultados” y en ella pegaremos la URL del endpoint.

En los Headers pegaremos los valores de X-RapidAPI-Key (con tu API Key) y X-RapidAPI-Host (api-football-v1.p.rapidapi.com)

En Query Parameters pegaremos los parámetros relativos al filtro que hacemos, por liga y temporada.

params: {league: '140', season: '2022'}

Con esto ya podemos dar a SEND y ver la magia:

Ahora, sólo tenemos que ver qué datos nos interesa coger de esta API e incorporarlos a nuestro diseño uniendo los diferentes elementos del diseño a los campos seleccionados. Quedaría algo como así:

Conectar Bravo Studio con una app de previsión de tiempo con WeatherApi

A estas alturas ya te habrás dado cuenta lo sencillo que es conectar una API externa. Vamos a hacerlo todavía más sencillo. Verás. Ahora vamos a huir de Rapid Api y nos vamos a meter de lleno en otra API que directamente nos va a dar sus endpoints. Esta es WeatherApi: https://www.weatherapi.com/

Lo único que tenemos que hacer es suscribirnos para poder tener nuestra API key, que encontraremos en “My Account”.

Lo que tenemos que hacer ahora es a la documentación https://www.weatherapi.com/api-explorer.aspx

Aquí es tan sencillo como buscar la localización que queremos, poner nuestra clave API y pulsar en “Show response”.

Listo. Nos da una url que es la que deberemos pegar en Bravo para hacer la llamada.

Como puedes ver nos arroja una gran cantidad de datos que podemos pasar a nuestra app. Además, si queremos que los datos de la predicción nos vengan en español bastará con agregar a la url &lang=es y lo tendremos.

Como has podido comprobar, las posibilidades que se abren aquí son infinitas. Cualquier API que contenga un conjunto de datos puede ser usada sin problemas en Bravo.

Acabo y te animo a que dejes volar la imaginación y a compartirlo por la comunidad de SharingAway.

¡Nos vemos pronto!

Juanjo Espada
Creando auténticas locuras con Bravo 📲

Únete a nuestra escuela y comunidad de NoCode

Más de 100h de formación NoCode en vídeo, comunidad en Slack, descuentos en las mejores herramientas y eventos de comunidad.

Ver todo lo que ofrecéis