Alguns meses atrás eu construí uma aplicação que usa dados de uma planilha do google (SpreadSheet). O objetivo era realizar o gerenciamento de um cardápio através do Google SpreadSheet, ao mesmo tempo que as alterações na planilha refletissem no cardápio digital.

Ok, depois da motivação que tive pra fazer o uso do Google Spreadsheet como base de dados, vamos ver como implementar essa bagaça.

Observações

Você deve copiar o ID do documento em 1, depois definir o compartilhamento da planilha para que qualquer um que tenha o link possa acessar o documento em 2 e 3.

INFORMAÇÃO IMPORTANTE

Para o SpreadSheet reconhecer uma linha como labels das colunas, você deverá adicionar algum tipo de formatação em qualquer coluna que você desejar. Esse passo é importante para podermos definir as respesctivas colunas com os dados correspondentes no parser.

• Planilha de exemplo

  
  A imagem acima ilustra que a coluna nascimento está com formatação de data.

• Saída de exemplo

  
  O SpreadSheet definiu as labels para as colunas.

Caso não faça esse passo, o atributo label ficará com uma string vazia.

Vamos pro código.

Aqui só vou mostrar os trechos de código que faz a recuperação e o parser dos dados da planilha.

Obtendo dos dados

• Planilha

Com o ID da sua planilha copiada, substitua o ID do exemplo abaixo.

const spreadsheetID = '1Hrhw7xC5NFxNyblD7aZ7afD1DFzHlSsQidav0e6Hshw'
const url = `https://docs.google.com/spreadsheets/d/${spreadsheetID}/gviz/tq?tqx=out:json`

let data = await fetch(url)
    .then(res => res.text())
    .then(text => JSON.parse(text.substr(47).slice(0, -2)))

Por Ben Borgers

• Saída

Parser dos dados.

function parser({table}){
  return table.rows
    .map(row => [ ...table.cols.map((col, index) => ({[col.label]: row.c[index].v,}))])
    .map(data => data.reduce((acc, value) =>  ({...acc, ...value}), {}))
}

• Execução

const spreadsheetID = '1Hrhw7xC5NFxNyblD7aZ7afD1DFzHlSsQidav0e6Hshw'
const url = `https://docs.google.com/spreadsheets/d/${spreadsheetID}/gviz/tq?tqx=out:json`

let data = await fetch(url)
    .then(res => res.text())
    .then(text => JSON.parse(text.substr(47).slice(0, -2)))

console.log(parser(data));

• Saída

Exemplo

App: https://pizzariacolosso.github.io/digital-menu/
Source: https://github.com/dannRocha/digital-menu

Conclusão

Acho interessante essa obordagem de consumo de dados, mas eu penso que não deva ser usado como implementação definitiva. Por exemplo, a aplicação do menu digital que construí, teve que ser corrigida, exatamente no ponto de consumo de dados, porque a URL antiga de acesso aos dados agora necessita de autenticação.