Concrete Logo
Hamburger button

Google Spreadsheet como backend JSON *on steroids*

  • Blog
  • 18 de Julho de 2014
Share

Dando sequência ao post sobre como utilizar uma Google Spreadsheet como backend JSON, vamos abordar agora a possibilidade de utilizá-la como um “banco de dados” para o seu backend retornando JSON a partir de uma query estruturada. Os recursos disponíveis podem ser vistos aqui.

Para ir direto ao ponto, vamos utilizar os mesmos dados e estruturas, bem como as mesmas informações sobre a planilha que utilizamos no primeiro post. Mas vamos precisar importar e utilizar a API JavaScript disponibilizada pela própria Google (neste link). Para saber mais sobre os recursos disponíveis na API, veja aqui.

Assim, até o momento temos:
– Planilha e seus dados

– Chave do Documento

– Google JavaScript API

O endpoint de consulta à planilha muda, e agora será o seguinte: https://spreadsheets.google.com/tq?key=<chave-documento>

As queries de consulta também mudam um pouco. Enquanto nas chamadas do primeiro post nós nos referíamos às colunas pelo nome que as demos, como Fabricante e Modelo, agora nós vamos referenciar pela identificação da coluna propriamente dita, como A, B, C e assim por diante. Então, para a nossa tabela, são elas:  A (Fabricante), B (Modelo) e C (Unidades).

A maneira como iteramos sobre o resultado tambem mudará, pois como agora os dados de retorno dependerão da projeção que queremos fazer em cima deles, os mesmos virão na forma de Array e o valor acessivel por meio da variável V (value). Para a query “select *”, por exemplo, teríamos:

Se a query fosse “select A, sum(C) group by A” teríamos:

Não tem muito mistério. Agora, com essas informações em mãos, vamos ao que interessa: consultar a planilha e consumir o JSON retornado pela mesma.

A estrutura de HTML que utilizaremos é a seguinte:

Nosso código JavaScript (com Framework jQuery) será composto por:

O exemplo live encontra-se no JSFiddle em: https://jsfiddle.net/jfelipesp/5rJfD/

Na próxima semana, mostraremos a maneira mais fácil e indolor de exibir o resultado de suas queries utilizando a API de Gráficos da Google, que já foi mostrada neste post aqui.

Se tiver alguma dúvida ou sugestão, é só deixar aqui que respondemos.