Como usar o Planilhas Google como banco de dados com React via Next.js

Neste tutorial explicarei como usar o Planilhas Google como banco de dados para armazenar os resultados de uma enquete de usuário. Usei essa abordagem do React Google Sheets para diversas campanhas de marketing. Escolhi esse método em vez de uma solução de banco de dados mais tradicional por um motivo: recuperação de dados.

É claro que depende inteiramente dos seus requisitos, mas ter a capacidade de simplesmente compartilhar uma Planilha Google com um membro técnico ou não técnico da minha equipe – para que eles possam ver facilmente os dados capturados – provou, em mais de uma ocasião, ser realmente útil. de valor.

Os dados são enviados do navegador para uma ação do servidor que publica com segurança em uma planilha do Google, que armazena os dados. Para usar ações do servidor no React, usarei Next.js.

Nos links a seguir você encontrará uma visualização ao vivo e um repositório GitHub para o aplicativo de pesquisa de usuário concluído.

• https://nextjs-google-sheets-database.vercel.app
• https://github.com/PaulieScanlon/nextjs-google-sheets-database

Não abordarei como começar a usar o Next.js, portanto, consulte a documentação se não estiver familiarizado com o uso do Next.js.

O que são ações do servidor?

Ações do servidor são funções assíncronas executadas no servidor. Eles podem ser usados ​​​​no servidor React e nos componentes do cliente para lidar com envios de formulários e mutações de dados em aplicativos Next.js.

Usar uma ação de servidor permite POST dados do front-end para o back-end no mesmo projeto. Uma ação do servidor pode então ser usada para INSERIR dados com segurança em um banco de dados ou, no caso deste artigo, em uma planilha do Google.

A maneira de conseguir isso usando Next.js é ter uma página que trata do envio de uma solicitação para uma Ação do Servidor e uma Ação do Servidor que trata do recebimento da solicitação e da execução do INSERT.

Exemplo de ação do servidor Next.js

A página é salva em app/alguma página/page.tsx e envia uma solicitação para a ação salva em app/alguma página/alguma ação.ts

Você pode ver o src para este exemplo simples nos seguintes links:

• alguma página/page.tsx
• alguma-página/alguma-ação.ts

Neste exemplo, a Ação do Servidor simplesmente retorna o id string que foi passada quando a Action foi invocada. No exemplo da Pesquisa do usuário, a ação executaria um INSERT em um banco de dados do Planilhas Google e redirecionaria para uma página de resultados, onde uma segunda ação seria usada para recuperar os dados prontos para serem exibidos.

Mas antes de passar para qualquer código, você precisará concluir todas as etapas de configuração do Google.

Como configurar o Planilhas Google

Antes de começar a usar a Planilha Google, primeiro você precisa configurar o que o Google chama de conta de serviço. Você pode ler mais sobre contas de serviço no Google Docs: Entendendo a conta de serviço do Google.

Crie um projeto do Google Cloud

O primeiro passo é criar um projeto. Você configurará este projeto para que ele possa conceder acesso à API do Planilhas Google, por meio de um usuário/endereço de e-mail da conta de serviço, e usá-lo para gerar as chaves de API necessárias para “postar” dados na Planilha Google.

As etapas para criar um projeto do Google Cloud são descritas no guia a seguir: Conceda um papel do IAM usando o console do Google Cloud.

No link acima, comece clicando no Vá para o seletor de projetos botão.

Agora clique CRIAR PROJETO.

Dê um nome ao seu projeto e clique em CRIAR.

Agora você deve ser redirecionado para o painel de informações do projeto. Clique no APIs e serviços item de navegação na barra lateral.

Para ativar o acesso à API do Planilhas Google, clique no botão + ATIVAR APIS E SERVIÇOS botão.

Procure por “Google Sheets API” e selecione o API do Planilhas Google.

Para ativar o acesso à API do Planilhas Google, clique no botão HABILITAR botão.

Para criar as credenciais necessárias para a API do Planilhas Google, clique no botão CRIAR CREDENCIAIS botão.

Selecione os API do Planilhas Google e verifique o dados de aplicativos botao de radio. Você pode pular o Suas credenciais seção e basta clicar no FEITO botão.

Clique no IAM e administrador item de navegação na barra lateral e clique em Contas de serviço.

Clique em + CRIAR CONTA DE SERVIÇO para criar uma nova conta de serviço.

Crie uma conta de serviço para seu projeto dando a ele um Nome da conta de serviço, ID da conta de serviço e Descrição da conta de serviço. Quando estiver pronto, clique em CRIAR E CONTINUAR.

Colocou o Rolar para Proprietário e clique em CONTINUAR.

Você pode pular a etapa final e clicar FEITO quando você estiver pronto.

Verifique se as permissões para detalhes da conta de serviço estão corretas.

Na mesma tela clique nos mais pontos e selecione Gerenciar chaves.

No CHAVES guia, clique no ADICIONAR CHAVE botão e clique em Crie uma nova chave.

Selecione JSON como o tipo de chave e clique no botão CRIAR botão para baixar um arquivo .json contendo suas chaves.

O arquivo .json que você acabou de baixar será parecido com o mostrado abaixo. As duas chaves que você precisará salvar como variáveis ​​de ambiente são. chave privada e email_cliente.

No repositório de exemplo, criei as seguintes variáveis ​​de ambiente.

Veja o código no Gist.

Você pode ler mais sobre como configurar variáveis ​​de ambiente para Next.js no seguinte link:

• Variáveis ​​de ambiente – Next.js

Criando uma Planilha Google

Crie uma nova Planilha Google e uma cópia do eu ia na barra de endereço URL e adicione-o às variáveis ​​de ambiente.

Adicionar títulos de colunas à planilha do Google

Você pode adicionar quantos títulos desejar. É importante notar que os espaços são substituídos por sublinhados.

Compartilhe a Planilha Google

Com sua nova planilha criada, compartilhe-a com o endereço de e-mail da sua conta de serviço / o email_cliente do arquivo .json. Certifique-se de que a conta de serviço tenha editor acesso.

Criando uma enquete de usuário

Para criar a enquete do usuário, há uma página, um layout e uma ação de servidor para a votação e a página de resultados.

Nas etapas a seguir, explicarei como criar cada um deles. Há uma versão sem estilo da enquete do usuário disponível no seguinte branch do repositório: exemplo/mínimo. Ele contém apenas o código que você verá nas etapas a seguir.

Serviços e utilitários

Além das “páginas” você também precisará configurar o google-spreadsheet, o google-auth-library e o poll-config que contém os títulos vistos na interface.

Serviços

Instale as seguintes dependências:

Veja o código no Gist.

Crie um novo diretório na raiz do seu projeto e nomeie-o Serviços.

Crie um novo arquivo chamado google-planilha.ts e adicione o seguinte código:

Veja o código no Gist.

Você pode ler mais sobre a planilha do Google nos documentos.

Útil

Os títulos e IDs vistos na interface podem ser alterados para acomodar seus requisitos específicos; apenas certifique-se de que eles correspondam aos títulos da sua Planilha Google.

Crie um novo diretório na raiz do seu projeto e nomeie-o útil.

Crie um novo arquivo chamado poll-config.ts e adicione o seguinte código. O ID de cada um deve corresponder aos títulos das colunas da sua Planilha Google. O nome é o que será exibido na interface do usuário.

Veja o código no Gist.

Voto

Crie a página de votação

Crie um novo arquivo dentro do diretório do aplicativo chamado página.tsx e adicione o seguinte código:

Veja o código no Gist.

Esta página inclui um pouquinho do React useState para desativar os botões quando uma solicitação estiver em andamento. Para habilitar o React do lado do cliente em Next.js você pode usar o use client diretiva.

A lista é criada usando um array.map para iterar sobre os itens na configuração e um botão para cada item é retornado. Um onClick manipulador é adicionado a cada botão que chama o handleClick função e passa o id da configuração.

Crie o layout de votação

Crie um novo arquivo dentro do diretório do aplicativo chamado layout.tsx e adicione o seguinte código:

Veja o código no Gist.

Este é um layout padrão para a página de votação. Você pode alterar os metadados para atender às suas necessidades.

Crie a ação do servidor de votação

Crie um novo arquivo dentro do diretório do aplicativo chamado enviar-voto.ts e adicione o seguinte código:

Veja o código no Gist.

Esta ação do servidor é responsável por receber o id enviado na requisição feita pela página, e utiliza-o para encontrar a célula correta e incrementar a contagem em + 1.

Se a atualização da Planilha Google for bem-sucedida, ela redirecionará para /resultados. Se houver um erro, ele redireciona para a página de índice, mas adota um parâmetro de pesquisa de error=trueque determina se a mensagem de erro na página será exibida.

Resultados

Crie um novo diretório dentro do diretório do aplicativo chamado resultados.

Crie a página de resultados

Crie um novo arquivo dentro do diretório de resultados chamado página.tsx e adicione o seguinte código:

Veja o código no Gist.

Esta página é renderizada pelo servidor e não inclui nenhum React useState, portanto a diretiva use client não é necessária. Ao contrário de antes, neste componente eu iterativo sobre os resultados enviados de volta da ação do servidor obter todos os votos (que abordarei a seguir) e retorno um indicador de progresso, nome e porcentagem para cada item.

Crie o layout de resultados

Crie um novo arquivo dentro do diretório de resultados chamado layout.tsx e adicione o seguinte código:

Veja o código no Gist.

Este é um layout padrão para a página de resultados; você pode alterar os metadados para atender às suas necessidades.

Crie a ação do servidor de resultados

Crie um novo arquivo dentro do diretório do aplicativo chamado obter todos os votos.ts e adicione o seguinte código:

Veja o código no Gist.

Esta ação do servidor é responsável por consultar todos os dados da Planilha Google, iterando cada valor para produzir um total, um valor máximo e uma porcentagem para cada item. Esses valores são então retornados prontos para serem utilizados pela página de resultados.

Finalizado

E é isso, agora você tem um aplicativo de enquete de usuários que armazena dados em uma Planilha Google que pode ser compartilhada e visualizada por qualquer pessoa com acesso.

A postagem Como usar o Planilhas Google como banco de dados com React via Next.js apareceu pela primeira vez em The New Stack.