Integrando Google Sheets em Graphics usando JSON Push

Ao integrar dados de uma Google Sheet no Flowics Graphics, você geralmente faz isso com o Google Sheets Data Provider, mas isso significa que toda vez que você atualiza os dados, é necessário fazer uma sincronização manual no Controle Remoto.

Este artigo explicará uma alternativa a esse fluxo de trabalho para que, com a ajuda do JSON Push Connector, você possa sincronizar os dados diretamente da Google Sheet.

Gerando o pacote gráfico com o conector JSON Push

A primeira coisa que você precisa fazer é definir o formato JSON com o qual você vai trabalhar. O exemplo a seguir é feito com um JSON muito simples com apenas dois valores, pois você estará controlando um Scorebug e obterá apenas a pontuação Home e Away da Google Sheet.

O JSON é o seguinte:

{

"Home": 1,

"Away": 2

}

Depois de ter o formato JSON pronto, você deve seguir as próximas etapas:

Criar um novo pacote gráfico.
Adicionar o JSON Push Connector
Você verá uma tela que diz "Complete the Dataset settings", lá você deve colar o formato JSON que você preparou anteriormente.
E, em seguida, clique em "Gerar a partir de exemplo". Isso gerará automaticamente o esquema a ser usado pelo conector.
Ao criar o conector você receberá o Push Instructions que você precisará posteriormente para enviar os dados da Google Sheet.

Saiba mais sobre como adicionar um JSON Push Data Connector aqui.

Gerando a Google Sheet com o Scripting necessário para enviar dados ao JSON Push Connector

O próximo passo será criar a Google Sheet com os dados que você vai enviar para o JSON Push e também adicionar o script para que esses dados cheguem automaticamente ao nosso gráfico.

Os passos são os seguintes:

Crie uma nova Google Sheet.
Em seguida, dê o formato à Sheet e atribua os dados.
Agora você vai adicionar o Scripting. Para isso, o que você precisa fazer é clicar na opção "Extensões" no menu acima e selecionar a opção "Apps Script".
Uma vez no editor de código, cole o código a seguir. Tem duas funções: uma para o placar Home e outra para o placar Away. Leve em consideração que alguns detalhes devem ser personalizados.

//********************************************************************************* function ScoreUPHome() { const apiUrl = "Aqui você precisa inserir o URL que obteve do Push Instructions"; var val1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua Sheet").getRange('B2').getValue(); var newval1 = val1 + 1;SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua Sheet" ).getRange('B2').setValue(newval1); var val2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua 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 = "Aqui você precisa inserir o URL que obteve do Push Instructions" ; var val1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua Sheet" ).getRange('B6').getValue(); var newval1 = val1 + 1;SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua Sheet" ).getRange('B6').setValue(newval1); var val2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua 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); }

Entendendo o código

API Url : Você está registrando a variável que conterá a URL do endpoint que extraímos do JSON Push. Basicamente, é saber para onde enviar os dados.
SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua Sheet" ).getRange('B6').getValue(): Esta função permite que você leia o valor atribuído a uma célula específica da Google Sheet que você declara.
SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Nome da sua Sheet" ).getRange('B6').setValue(): Esta função permite definir um valor para uma célula específica da Google Sheet que você declara.
Data: Nesta variável, você registrará o JSON que enviará ao conector. Nesse caso, você está lendo os valores das células da Google Sheet.
Options: Nesta variável, você está definindo as opções utilizadas pelo comando URLFetchApp, aqui está a definição de cada uma:
- contentType: String o tipo de conteúdo (o padrão é 'application/x-www-form-urlencoded').
- method: String o método HTTP para a solicitação: get, delete, patch, post ou put. O padrão é GET.
- payload: String do payload (ou seja, o corpo POST) para a solicitação. Certos métodos HTTP (por exemplo, GET) não aceitam uma carga útil. Pode ser uma string, um array, um blob ou um objeto JavaScript.
fetch(url, params): Faz uma solicitação para buscar uma URL usando parâmetros avançados opcionais. Isso funciona tanto em HTTP quanto em HTTPS.

5. Uma vez que as funções tenham sido concluídas com sucesso, você deve salvar o script e executá-lo.

Será solicitada a autorização necessária para:

Clique em Revisar permissões
Selecione a conta que você está usando
Clique em Avançado
Vá para Thenameofyourscript (Unsafe)
Clique em Permitir

6. Agora você precisa adicionar alguns botões para atribuir as funções que você acabou de criar a eles. Para adicionar os botões, volte para a Google Sheet e clique no menu Inserir e depois em Desenho.

7. Selecione o tipo de Bisel em Formas para criar um tipo de botão.

8. Coloque um texto em cima, salve e feche.

9. Siga o mesmo processo para adicionar um segundo botão.

10. Uma vez que você tenha os dois botões, clique com o botão direito do mouse no botão e, no Menu, selecione a opção Atribuir Script.

11. Atribua o script correspondente a cada botão. Para isso, você precisa escrever o nome da função.

Conectando os dados nos gráficos Flowics

Depois de receber os dados em seu conector JSON Push, basta criar o gráfico e fazer a vinculação aos dados correspondentes.

Para isso você precisa:

No seu pacote de gráficos, adicione alguns textos para conectá-los ao provedor de dados JSON Push.
Vincule os textos.

Seu gráfico ficará como a imagem abaixo:

3. Publique o pacote gráfico e prossiga para testar o script da Google Sheet. Cada vez que você clicar no botão, um gol deve ser adicionado à equipe correspondente.