Esse post será escrito de forma manual e sem revisão por IA, para os cansados de texto "perfeito" que querem um conteúdo mais casual

Você sabia que é possível usar uma planilha do Google Sheets como back-end? Sim, publicando uma planilha para a web como CSV, é possível que um site sem back-end (servido de forma estática) tenha conteúdo dinâmico, sem precisar programar um. Isso não é uma recomendação de arquitetura, e sim uma ideia maluca de projeto, haha. Vamos explorar:

Na verdade, a planilha aqui serve como uma fonte de dados externa, pois não podemos considerar ela totalmente como um back-end (justamente por não ter todas as características de um). Apesar disso, utilizar o Google Sheets expõe algumas camadas prontas, que não precisaríamos nos preocupar ao lançar um site estático:

  • Autenticação e autorização: quem cuida de todo esse mecanismo de quem pode alterar o conteúdo é o Google
  • Versionamento: por padrão, as planilhas do Google disponibilizam um controle de versão com histórico
  • Publicação e edição de conteúdo: é possível publicar a planilha como CSV, e depois consultá-la através de um fetch GET pelo nosso site

Como fazer

  1. Crie uma planilha no Google Sheets
  2. Defina uma tabela para servir o conteúdo: pode ser um catálogo de produtos, cardápio de restaurante, tabela de preços, matriz de planos, perguntas frequentes, etc. thumb
  3. Acesse "Arquivo > Compartilhar > Publicar na Web" thumb
  4. No popup que aparecer, você pode selecionar "Documento inteiro" ou apenas a página que está editando thumb
  5. Altere para "Valores separados por vírgula (CSV)" thumb
  6. Certifique-se de que a opção "Republicar automaticamente quando houver alterações" esteja marcada, para maior comodidade
  7. Clique em "Publicar"
  8. Copie o link que aparecer thumb

Para acessar o conteúdo pelo nosso site, podemos fazer um fetch via JavaScript. Utilizando uma biblioteca como o Papaparse, é possível fazer o parse do CSV para JSON:

fetch("https://docs.google.com/spreadsheets/d/e/2PACX-1vTD87LNoWs96sBTbetT25WI4OIy9xxSszPvQ-B7eUOwRZOgnTXVvcVT5lRxFz-IhRIdHSfOsQlqxjtI/pub?output=csv")
  .then((response) => response.text())
  .then((data) => Papa.parse(data, { header: true }))
  .then((json) => console.log('Conteúdo:', json.data))
  .catch((err) => console.log('Erro ao baixar conteúdo:', err));

O { header: true } indica ao Papaparse que seu CSV possui um cabeçalho. Por isso, é interessante que sua tabela no Sheets tenha nomes de colunas com caracteres fáceis do parser reconhecer, evitando acentos, cedilha, espaços, entre outros.

thumb

Como o Google possui um cache de alguns minutos para esse endpoint, também podemos adicionar um parâmetro na URL para tentar forçar que o conteúdo sempre esteja atualizado, a cada requisição:

"https://docs.google.com/spreadsheets/d/e/2PACX-1vTD87LNoWs96sBTbetT25WI4OIy9xxSszPvQ-B7eUOwRZOgnTXVvcVT5lRxFz-IhRIdHSfOsQlqxjtI/pub?output=csv&cache=" + new Date().getTime()

Com esses passos, já é possível montar um conteúdo dinâmico no seu site:

thumb

Onde posso utilizar essa ideia

Sabe aquele site simples que você quer exibir algum conteúdo de forma dinâmica sem precisar programar um back-end inteiro? Então, é uma alternativa legal para esse caso.

Ah, mas eu posso utilizar uma lib que gera os conteúdos de forma estática no build time, ou utilizar um serviço de API CMS para isso.

Tudo bem, ninguém impede você de fazer isso. A ideia dessa alternativa é justamente não ter nenhuma barreira a mais para servir um conteúdo de forma dinâmica. Você não vai precisar abrir o VSCode, criar um arquivo e commitar para escrever novos conteúdos, nem configurar painel de API externa.

Vale destacar que não é recomendável utilizar isso em larga escala, porque se o Google Sheets cair ou resolver banir temporariamente seu IP, o conteúdo vai quebrar. Além disso, qualquer erro no preenchimento provavelmente vai quebrar o parse do CSV.

Custo zero

Com isso, você pode hospedar o front-end facilmente em serviços como o Cloudflare Pages ou GitHub Pages, e o conteúdo dinâmico é servido pelo Sheets de forma gratuita também. É claro que existem limites, principalmente para planos free, mas para um projetinho pessoal são alternativas muito bacanas!

Conclusão

Espero que tenham gostado dessa ideia! Caso tenham outras sugestões e abordagens para esse cenário, vamos debater nos comentários 🤝

Essa foi uma publicação piloto para uma nova categoria no meu blog pessoal.

Meu portfólio: renan.nz