Consumindo dados do Google SpreadSheet em JavaScript
Tags: javascript, beginners, vue, spreadsheet
Published: 2021-08-21 22:24:42

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wakjs6lr5tm48ogb8pq9.png)
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
![Imagem ilustra a definiçao de uma colunas com formataçao de data](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkfz43yfesfsu2cdz07v.png)
A imagem acima ilustra que a  coluna ***nascimento*** está com formatação de data.

- ### Saída de exemplo
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyzdjx5s2gcoqkakarkn.png)
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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zuqo1h8gzqdn1xd216m.png)
- [Planilha](https://docs.google.com/spreadsheets/d/1Hrhw7xC5NFxNyblD7aZ7afD1DFzHlSsQidav0e6Hshw/)

Com o ID da sua planilha copiada, substitua o ID do exemplo abaixo.
```js
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](https://benborgers.com/posts/google-sheets-json)

- Saída
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdznylqb1le1dhpht6vo.png)

## Parser dos dados.
```js
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
```js
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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nfxe70ncqcnydu2sw0c.png)

## Exemplo
App: [https://pizzariacolosso.github.io/digital-menu/](https://pizzariacolosso.github.io/digital-menu/)
Source: [https://github.com/dannRocha/digital-menu](https://github.com/dannRocha/digital-menu)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbcrk1v48ttwo9fzm0ga.png)

## 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***](https://pizzariacolosso.github.io/digital-menu/) 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.