Integrando Google Sheets en Graphics usando JSON Push

Al integrar datos de una Google Sheets en Flowics Graphics, generalmente lo haces con el Google Sheets Data Provider, pero eso significa que cada vez que actualizas los datos, necesitas realizar una sincronización manual en el Control Remoto de Flowics.

Este artículo explicará una alternativa a este flujo de trabajo para que con la ayuda del JSON Push Connector puedas sincronizar los datos directamente desde la Google Sheet.

Generar el paquete gráfico con el conector JSON Push

Lo primero que necesitas hacer es definir el formato JSON con el que vas a trabajar. El siguiente ejemplo está hecho con un JSON muy simple con solo dos valores, ya que controlará un Scorebug y solo obtendrá la puntuación del local y visitante de la Google Sheet.

El JSON es el siguiente:

{

"Home": 1,

"Away": 2

}

Una vez que tengas listo el formato JSON, necesitas seguir los siguientes pasos:

Crear un nuevo paquete de gráficos.
Agregar el conector de inserción JSON
Vas a ver una pantalla que dice "Complete the Dataset settings", allí tienes que pegar el formato JSON que habías preparado previamente.
Y luego haga clic en "Generar a partir del ejemplo". Esto generará automáticamente el esquema que utilizará el conector.
Al crear el conector recibirás el Push Instructions que necesitarás posteriormente para enviar los datos desde la Hoja de Google.

Obtenga más información sobre cómo agregar un Data Connector inserción JSON aquí.

Generando la Hoja de Google con el Scripting necesario para enviar datos al JSON Push Connector

El siguiente paso será crear la Hoja de Google con los datos que vas a enviar al JSON Push y además añadir el scripting para que estos datos lleguen automáticamente a nuestra gráfica.

Los pasos son los siguientes:

Crea una nueva Google Sheet.
Luego dale el formato y asigna los datos.
Ahora vas a agregar el Scripting. Para eso, lo que necesitas hacer es clic en la opción "Extensiones" en el menú principal y seleccionar la opción "Apps Script".
Una vez en el editor de código, pega el siguiente código. Tiene dos funciones: una para el marcador local y otra para el marcador visitante. Ten en cuenta que algunos detalles deben ser personalizados.

//********************************************************************************* function ScoreUPHome() { const apiUrl = "Aquí necesitas insertar la URL que obtienes desde Push Instructions"; var val1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet").getRange('B2').getValue(); var newval1 = val1 + 1;SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet" ).getRange('B2').setValue(newval1); var val2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet" ).getRange('B6').getValue(); //Make a POST request with a JSON payload. var data = {   'Home': newval1,   'Away': val2, }; var options = {   'method' : 'post',   'contentType': 'application/json',   // Convert the JavaScript object to a JSON string.   'payload' : JSON.stringify(data) }; UrlFetchApp.fetch(apiUrl, options); } //********************************************************************************* function ScoreUPAway() { const apiUrl = "Aquí necesitas insertar la URL que obtienes desde Push Instructions" ; var val1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet" ).getRange('B6').getValue(); var newval1 = val1 + 1;SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet" ).getRange('B6').setValue(newval1); var val2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet" ).getRange('B2').getValue(); //Make a POST request with a JSON payload. var data = {   'Home': val2,   'Away': newval1, }; var options = {   'method' : 'post',   'contentType': 'application/json',   // Convert the JavaScript object to a JSON string.   'payload' : JSON.stringify(data) }; UrlFetchApp.fetch(apiUrl, options); }

Entendiendo el código

API Url: Estás registrando la variable que contendrá la URL del endpoint que tomamos del JSON Push. Básicamente, es saber dónde empujar los datos.
SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet").getRange('B6').getValue(): Esta función te permite leer el valor asignado a una celda específica de la Google Sheet que declara.
SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nombre de tu Sheet").getRange('B6').setValue(): Esta función te permite establecer un valor en una celda específica de la Google Sheet que declara.
Data: En esta variable vas a registrar el JSON que vas a enviar al conector. En este caso, está leyendo los valores de las celdas de la Google Sheet.
Options: En esta variable, estás definiendo las opciones que usa el comando URLFetchApp, aquí está la definición de cada una:
- contentType: escribe el tipo de contenido (el valor predeterminado es 'application/x-www-form-urlencoded').
- method: encadena el método HTTP para la solicitud: get, delete, patch, post o put. El valor predeterminado es GET.
- payload: string del payload (es decir, el cuerpo POST) para la solicitud. Ciertos métodos HTTP (por ejemplo, GET) no aceptan un payload. Puede ser un string, un array, un blob o un objeto de JavaScript.
fetch(url, params): realiza una solicitud para obtener una URL utilizando parámetros avanzados opcionales. Esto funciona tanto en HTTP como en HTTPS.

5. Una vez que las funciones se hayan completado con éxito, necesitas guardar el script y ejecutarlo.

Se te pedirá la autorización que necesitas para:

Haga clic en Revisar permisos
Selecciona la cuenta que estás utilizando
Haz clic en Avanzado
Ve al nombre de tu script (Unsafe)
Haz clic en Permitir

6. Ahora necesitas agregar un par de botones para asignarles las funciones que acabas de crear. Para agregar los botones, regresa a la Google Sheet y haz clic en el menú Insertar y luego en Dibujo.

7. Selecciona el tipo Bisel de Formas para crear un tipo de botón.

8. Coloca un texto encima, luego guarda y cierra.

9. Sigue el mismo proceso para agregar un segundo botón.

10. Una vez que tengas los dos botones, haz clic con el botón derecho sobre el dibujo del botón y, en el menú, selecciona la opción Asignar script.

11. Asigna el script correspondiente a cada botón. Para eso, necesitas escribir el nombre de la función.

Conexión de los datos en los gráficos de Flowics

Una vez que hayas recibido los datos en tu conector JSON Push, solo necesitas crear el gráfico y hacer el enlace a los datos correspondientes.

Para eso necesitas:

Desde tu paquete gráfico, agrega un par de textos para conectarlos al proveedor de datos JSON Push.
Vincula los textos.

Tu gráfico se verá como la imagen a continuación:

3. Publica el paquete gráfico y procede a probar el script desde la Google Sheet. Cada vez que hagas clic en el botón, se debe agregar un gol al equipo correspondiente.