Trabajando con External Connector: JSON

Puedes utilizar un External Connector para integrar datos de diferentes fuentes. En este artículo, vamos a cubrir cómo usarlo para integrar datos JSON  en tus gráficos.

1. Agregar el External Connector

Primero debes agregar un External connector a tu árbol (1) y hacer clic en Connect desde el panel de External Connector del Inspector (2)


En el panel del External Connector encontrarás dos opciones: JSON Get y JSON Local


Si no estás seguro de cuál usar, aquí hay algunos detalles adicionales:


Descripción Cómo funciona Es ideal para
JSON - Local Permite agregar un JSON fijo desde una entrada directa. Agrega el JSON directamente a Flowics, el esquema se genera automáticamente. Propósitos de prueba . Si aún no tienes acceso a un recurso JSON, pero tienes un JSON de ejemplo de la documentación de la API, puedes usarlo para comenzar a crear tus gráficos.
JSON - Get Permite recuperar contenido de cualquier punto final que devuelva un JSON mediante un método GET. Agrega la URL JSON a Flowics, el esquema se genera automáticamente. Obtener contenido de API externas ya existentes.


Detalles para JSON - Local

Al elegir usar un JSON - Local, el editor de gráficos solicitará la entrada JSON:

Para este ejemplo, usaremos la siguiente entrada:

 {
"ciudad": "Barcelona",
"temp": "30",
"pronóstico": [
{"date": "2021-06-03", "temp": "29"},
{"date": "2021-06-04", "temp": "28"},
{"date": "2021-06-05", "temp": "30"}]
}

Consejo: como puedes ver en la imagen de arriba, puedes expandir el tamaño de la entrada para trabajar más cómodo con el JSON que estás agregando.

Después de agregar la estructura JSON, se generará automáticamente un esquema:

Este esquema es editable, lo que te permite modificar las etiquetas que deseas ver al vincular la información.

Una vez que presionas crear, los datos se almacenan como la configuración del Connector, lo que te permitirá editarlos más tarde desde el inspector:

Puedes comenzar a crear tu árbol con nuestros building blocks, vinculando contenido y dando formato a los Gráficos:


Detalles para JSON - Get

JSON: Get utiliza un método GET para solicitar contenido de una URL, esperando un archivo JSON en la URL proporcionada. Por esta razón, al elegir este Connector, primero te pedirá que agregues la URL que aloja el contenido JSON.

En este ejemplo, usaremos la siguiente URL de la API de Open Weather https://api.openweathermap.org/data/2.5/weather?q=london&units=metric con un ID de la App. El App ID debe agregarse a la URL, ya que no se admite la autenticación basada en encabezados.

Una vez que hayas agregado la URL, el esquema se generará automáticamente.

Una vez que presionas crear, la URL y el esquema se almacenan en la configuración del Connector, lo que te permitirá cambiarlos más tarde.

Aunque el JSON Schema es inferido automáticamente, deberás revisarlo. En el caso de Image URLs probablemente sean inferidos como "String" y no "ImageUrl". Para poder reproducir las imágenes, necesitas cambiar el Schema de "type": "string" por "type": "ImageUrl"

Con los datos ya disponibles, puedes comenzar a crear tu árbol con nuestros building blocks, vincular contenido y dar formato a los gráficos:

Was this article helpful?