Seja o site de seu portfólio ou um site de produto SaaS, você precisa de uma página de contato dedicada para visitantes e clientes em potencial para que eles possam entrar em contato com você. Normalmente, essa página inclui um formulário que os visitantes podem preencher para enviar uma mensagem ou fazer uma pergunta. Mas onde e como você armazena essas respostas?
Configurar um banco de dados com o único propósito de armazenar os envios de formulários não é a opção mais conveniente. Com Next.js e o API do Notion , você pode usar o recurso de banco de dados para salvar todos os envios diretamente no seu espaço de trabalho do Notion. Isso é especialmente útil se você já usa o Notion como uma ferramenta de gerenciamento de projeto e pode reunir tudo em um só lugar.
Pré-requisitos
Você precisará de um conhecimento básico de Next.js ( ou React) para este tutorial. Todo o código que escreveremos nas rotas da API Next.js também pode ser usado em seu servidor Node.js, caso você não esteja usando Next.js.
Neste tutorial, vamos cover:
Configurando um banco de dados Notion Construindo uma página de contato com Next.js Estilizando a página com módulos CSS Usando variáveis de ambiente em Next.js Usando rotas de API Next.js para interagir com a API Notion via SDK
Setting up the Notion database
Primeiro, vamos configurar nosso banco de dados Notion e criar uma nova integração para acessá-lo via API do Notion. Visite o site do Notion e comece criando uma nova página para o banco de dados. Você pode ser solicitado a fazer login se nunca tiver usado o Notion antes.
Criando uma nova página do Notion com o banco de dados de tabelas
No canto inferior esquerdo da tela, clique em + Nova Página e nomeie como preferir. Vou chamá-lo de “Envios de formulários de contato” por enquanto. Agora, clique em Tabela na seção do banco de dados para criar um banco de dados tabular para armazenar as respostas do formulário.
Você pode modificar o banco de dados para seus requisitos adicionando novas propriedades e/ou editar os existentes para a mesa. Aqui estão as propriedades e seus tipos que iremos armazenar em nosso banco de dados do Notion:
Nome: tipo de propriedade do título Email: tipo de propriedade de email Objetivo: selecionar o tipo de propriedade Mensagem: tipo de propriedade de texto Contactado em: cria um tipo de propriedade de tempo é gerado automaticamente quando o envio do formulário é adicionado à tabela
Agora que nosso banco de dados Notion está pronto, vamos criar uma nova integração para conectar o banco de dados ao nosso aplicativo Next.js.
Criando uma integração for Notion e Next.js
Para criar uma nova integração, vá para página My Integrations do Notion e clique em + Nova Integração . Você precisará preencher as informações básicas e selecionar a área de trabalho na qual criou a página de contato. Quando terminar, você será redirecionado para uma tela como esta:
Tela de integração do Notion
Copie e armazene o token de integração interno em algum lugar seguro, pois precisaremos dele mais tarde, quando interagirmos com a API do Notion. Não compartilhe este token com mais ninguém.
Conectando a integração com a página
Finalmente, para conectar o banco de dados do Notion à nossa integração recém-criada, retorne à página Envios de formulários de contato e clique em Compartilhar , localizado no canto superior direito da tela. Selecione sua integração e clique em Convidar para permitir o acesso de edição.
Isso é tudo para a parte de configuração. É hora de passar para o código.
Configurando o aplicativo Next.js
Você pode usar a ferramenta create-next-app para inicializar rapidamente um novo aplicativo Next.js executando este comando em seu terminal:
npx create-next-app # ou yarn create next-app
Em seguida, abra a pasta do projeto em seu editor de texto favorito ou IDE. Vamos instalar alguns pacotes npm antes de executar o servidor de desenvolvimento Next.js.
Usaremos dois pacotes: react-toastify para exibir notificações do sistema em envios de formulários e @ notionhq/client para usar o Notion JavaScript SDK para interagir com a API Notion.
npm install react-toastify @ notionhq/client # ou yarn add react-toastify @ notionhq/client
Inicie o servidor de desenvolvimento executando npm run dev em seu terminal. Ao visitar http://localhost: 3000 , você verá uma tela como esta:
Saída de código padrão Next.js
Criação e estilo do formulário de contato
Vamos substituir o código padrão gerado pela ferramenta create-next-app por nossa página de contato personalizada com um formulário. Abra o arquivo pages/index.js e cole o dado abaixo:
import styles from’../styles/Home.module.css’; exportar a função padrão Home () {return (
); }
Sinta-se à vontade para modificar as entradas e certifique-se de que seu banco de dados do Notion também tenha as mesmas entradas. Agora vamos enfeitar o formulário com CSS.
Vá para styles/Home.module.css e substitua os estilos nesse arquivo pelos estilos fornecidos abaixo:
.container {height: 100vh; display: flex; justificar-conteúdo: centro; alinhar-itens: centro; cor de fundo: # 0093e9; imagem de fundo: gradiente linear (160deg, # 0093e9 0%, # 80d0c7 100%); }.form {background: white; preenchimento: 2rem 1.5rem; raio da borda: 6px; sombra da caixa: 2px 4px 8px rgba (0, 0, 0, 0,1); largura máxima: 600px; }.title {margin: 0 0 1.5rem; }.form label {display: block; transformação de texto: maiúsculas; tamanho da fonte: 0.9rem; margem inferior: 0,5 rem; cor: # 334155; }.form input,.form select,.form textarea {width: 100%; fronteira: nenhum; plano de fundo: # f4f4f5; preenchimento: 0.75rem 0.5rem; tamanho da fonte: 1rem; margem inferior: 1,25 rem; raio da borda: 4px; }.form input: focus,.form select: focus,.form textarea: focus {outline: 2px solid # 0093e9; }.inputs {display: flex; justify-content: espaço entre; }.inputs div {flex: 1; }.inputs div: first-child {margin-right: 1rem; }.btn {cor de fundo: # 0093e9; imagem de fundo: gradiente linear (160deg, # 0093e9 0%, # 80d0c7 100%); preenchimento: 0.5rem 1rem; fronteira: nenhum; cor branca; tamanho da fonte: 1rem; intensidade da fonte: Negrito; raio da borda: 4px; sombra da caixa: 2px 2px 5px rgba (0, 0, 0, 0,1); cursor: ponteiro; }
Assim como as entradas, você pode brincar com os estilos para personalizá-los de acordo com sua preferência. Visite http://localhost: 3000 e você verá uma página semelhante a esta:
Página e formulário de contato
Nada mal ! Ainda temos que configurar os estados de entrada e o manipulador de envio de formulário, mas voltaremos a ele mais tarde, após configurar nossas rotas de API.
Armazenamento de dados confidenciais em variáveis de ambiente
É uma boa prática armazenar todas as informações confidenciais-como o token de integração interno do Notion e o ID do banco de dados do Notion-como variáveis de ambiente para que você possa alterá-las facilmente mais tarde quando necessário e para evitar expô-las ao navegador. > Portanto, crie um novo arquivo chamado.env.local dentro do diretório raiz do projeto. Dentro desse arquivo, armazenaremos a variável NOTION_API_KEY, que é o token de integração interno, e NOTION_DATABASE_ID, que podemos obter no URL do banco de dados Notion.
O URL para seu banco de dados Notion pode ser algo como isto .
O texto selecionado no URL indica o ID do banco de dados
O ID do banco de dados é o alfanumérico antes de? v=, que é 491b722c931a42208cfff667dcb58a12.
Certifique-se de usar seu próprio token de integração e ID do banco de dados. Veja como seu arquivo.env.local deve ficar:
NOTION_API_KEY=secret_qidbxxxxxxxxxxxxxxxxxxxxxxxxxxMYitF6IM NOTION_DATABASE_ID=491b722c931a42208cfff667dcb58a12
Interagir com a API do Notion para ir para as páginas API/Next. renomeie o arquivo hello.js para submit-form.js. A rota da API para este arquivo estará disponível em http://localhost: 3000/api/submit-form . Usaremos o JavaScript SDK oficial do Notion para interagir com nosso banco de dados do Notion.
Primeiro, precisamos importar o cliente do pacote @notionhq/client SDK e criar uma nova instância dele. Esta instância leva um objeto com o valor da chave de autenticação definido para o token de integração, que pode ser acessado usando process.env.NOTION_API_KEY.
Na função de manipulador, o método de solicitação HTTP pode ser acessado usando req.method. Como estamos apenas antecipando solicitações POST de nosso front-end Next.js, podemos responder com 405 Método não permitido para outros tipos de solicitações.
const {Client}=require (‘@ notionhq/client’); const notion=new Client ({auth: process.env.NOTION_API_KEY,}); exportar manipulador de função assíncrona padrão (req, res) {if (req.method!==’POST’) {return res.status (405).json ({mensagem: `$ {req.method} solicitações não são permitidas`} ); } tente {const {nome, e-mail, propósito, mensagem}=JSON.parse (req.body); aguarde notion.pages.create ({pai: {database_id: process.env.NOTION_DATABASE_ID,}, propriedades: {Nome: {título: [{texto: {conteúdo: nome,},},],}, E-mail: {e-mail: email,}, Objetivo: {selecionar: {nome: propósito,},}, Mensagem: {rich_text: [{texto: {conteúdo: mensagem,},},],},},}); res.status (201).json ({msg:’Sucesso’}); } catch (error) {res.status (500).json ({msg:’Houve um erro’}); }}
Para adicionar uma nova resposta de formulário ao nosso banco de dados Notion, use o método notion.pages.create (). Se você nunca usou o Notion antes, é importante notar que cada entrada do banco de dados é uma página no Notion. Este método recebe um objeto com o objeto pai e o objeto de propriedades como um parâmetro.
No objeto pai, defina o database_id para o ID do seu banco de dados Notion, que pode ser acessado via process.env.NOTION_DATABASE_ID O objeto de propriedades pode parecer complicado à primeira vista, mas a documentação do objeto de valor de propriedade tem exemplos para vários tipos de propriedade, como rich_text, number, title, select e mais.
Finalmente, inclua todo o método notion.pages.create () dentro de um bloco try… catch para capturar erros e responda de acordo. Sua rota de API agora está pronta para interagir com seu banco de dados Notion.
Adicionando funcionalidade ao formulário de contato
Embora o formulário de contato esteja pronto em termos de layout e design, nós ainda para adicionar funcionalidade a ele. Vamos fazer isso agora:
Adicionando estado às entradas de formulário usando o gancho useState () Criando um manipulador de envio para o formulário que chamará nossa rota de API Exibindo notificações de brinde de acordo com a resposta
Vamos codificar essas funcionalidades nas páginas/index.js.
//Para lidar com estados de entrada import {useState} de’react’;//Para exibir toast import {ToastContainer, toast} from’react-toastify’; import’react-toastify/dist/ReactToastify.min.css’; importar estilos de’../styles/Home.module.css’; função padrão de exportação Home () {//Estados de entrada const [name, setName]=useState (”); const [email, setEmail]=useState (”); const [propósito, setPurpose]=useState (”); const [mensagem, setMessage]=useState (”);//Manipulador de envio de formulário const submitForm=async (e)=> {e.preventDefault (); const res=await fetch (‘http://localhost: 3000/api/submit-form’, {method:’POST’, body: JSON.stringify ({name, email, purpose, message}),});//Sucesso se o código de status for 201 if (res.status===201) {toast (‘Obrigado por nos contatar!’, {Type:’success’}); } else {toast (‘Verifique novamente suas entradas.’, {type:’error’}); }}; return (
); }
Para manipular estados de entrada, podemos usar o gancho useState () e atribuir a cada entrada um valor e um manipulador onChange de acordo para torná-lo uma entrada controlada.
Agora crie uma função assíncrona chamada submitForm que faz uma solicitação POST para nossa rota de API em http://localhost: 3000/api/submit-form usando fetch (). Os estados de entrada podem ser enviados no corpo.
Assim que a solicitação for feita, podemos verificar o código de status da solicitação. O código de status 201 indica que a resposta foi adicionada com sucesso ao banco de dados do Notion. Caso contrário, ele produzirá o código de status 500, que denota um erro.
Para adicionar toast, importe a função toast () e o componente ToastContainer do react-toastify. Além disso, importe o arquivo CSS de react-toastify/dist/ReactToastify.min.css para estilizá-los.
Adicione o componente
Testando o formulário
Vamos testar nosso formulário de contato para ver se está funcionando. Preencha o formulário com as entradas adequadas. Você notará um brinde com êxito ao enviar o formulário.
Envio bem-sucedido do formulário
Ao enviar uma resposta incorreta, como um propósito inválido, o brinde de erro aparecerá.
Envio malsucedido do formulário
Você pode verificar isso com sua noção banco de dados para confirmar se as respostas são armazenadas conforme pretendido.
Respostas do formulário no conceito
Conclusão
O conceito é uma ferramenta poderosa para equipes e indivíduos. Com a API Notion, você nunca precisará configurar um banco de dados ou usar um serviço de terceiros para gerenciar as respostas do formulário de contato. Você pode até compartilhar com sua equipe e visualizar as respostas de várias maneiras-de graça! Espero que tenha gostado deste tutorial.
