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
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
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.
Top comments (0)