🚧 Publicação em construção

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 backend? Sim, publicando uma planilha para a web como CSV, é possível que um site sem backend tenha conteúdo dinâmico, sem precisar programar um backend. 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 backend. 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 simples, com histórico
  • Publicaçã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.
  3. Acesse "Arquivo > Compartilhar > Publicar na Web"
  4. No popup que aparecer, você pode selecionar "Documento inteiro" ou apenas a página que está editando
  5. Altere para "Valores separados por vírgula (CSV)"
  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

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 (sem acentos, cedilha, espaços, entre outros).

Como o Google possui um cache de alguns minutos para este 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 estes passos, já é possível montar um conteúdo dinâmico no seu site:

Onde posso utilizar essa ideia

Sabe aquele site simples que você quer exibir algum conteúdo de forma dinâmica sem precisar programar um backend inteiro? Então, é uma alternativa legal neste 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 você não ter nenhuma barreira a mais para servir um conteúdo de forma dinâmica. Sem precisar abrir o VSCode para escrever novos conteúdos, nem configurar painel de API externa.

Vale destacar que não é recomendável utilizar isso em produção, porque se o Google 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 frontend 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 da minha ideia maluca! Esta é uma publicação piloto para uma nova categoria no meu blog pessoal. Meu portfólio: renan.nz