Usando a API do ButtonDown para registrar seus assinantes através do Next.JS
Artigo publicado em 10 de março de 2021
––– visualizações
Eddwan Hallen
Instrutor & Co-fundador
O ButtonDown é uma ferramenta muito útil para registro e envio de newsletters. Já apresentamos anteriormente em um vídeo do nosso canal os passos para cadastro, configuração e envio da primeira newsletter utilizando a ferramenta. Agora, queremos avançar um pouquinho mais e utilizar a API do ButtonDown para registrar seus assinantes através do seu site, utilizando um componente no Next.js.
Criando o projeto
Abra uma janela do terminal e crie um projeto Next.js com o comando:
$ yarn create next-app
Durante a execução do comando ele perguntará o nome do projeto. Vamos chamá-lo de newsletter. Lembrando que o comando criará uma pasta no caminho onde você executou o comando com o nome do projeto.
$ yarn create next-app
yarn create v1.22.10
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "create-next-app@10.0.8" with binaries:
- create-next-app
✔ What is your project named? … newsletter
....
Initialized a git repository.
Success! Created newsletter at /Users/ehallend/Desktop/Youtube/newsletter
Inside that directory, you can run several commands:
yarn dev
Starts the development server.
yarn build
Builds the app for production.
yarn start
Runs the built app in production mode.
We suggest that you begin by typing:
cd newsletter
yarn dev
✨ Done in 38.56s.
Editando o projeto
Abra seu projeto com seu editor de códigos preferido e vamos ao que interessa:
1. Dentro do diretório pages do seu projeto, edite o arquivo index.js.
2. Remova todo o conteúdo desnecessário e deixe somente o código abaixo, para manter o mais simplificado possível e facilitar a compreensão:
import styles from "../styles/Home.module.css";
export default function Home() {
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>Registre-se na minha newsletter!</h1>
<p className={styles.description}>
<input type="email" placeholder="informe seu e-mail"></input>
<button type="submit">Registrar!</button>
</p>
</main>
</div>
);
}
3. Precisamos importar o componente useState do React para capturarmos o e-mail digitado na caixa de texto
import { useState } from "react";
4. Dentro da função Home(), vamos adicionar o estado inicial do email e uma função setEmail:
const [email, setEmail] = useState("");
5. No input e-mail vamos definir o valor inicial e também chamar a função setEmail quando alguma informação for inserida no campo:
<input
type="email"
placeholder="informe seu e-mail"
value={email}
onChange={(event) => {
setEmail(event.currentTarget.value);
}}
></input>
6. Vamos criar uma função subscribe que será executada quando o usuário clicar no botão "Registrar!":
Obs: A função subscribe faz uso de duas constantes que contém a API KEY e a URL do ButtonDown.
Obs2: Para saber mais detalhes sobre os campos passados dentro do body, acesse a documentação da API do ButtonDown aqui.
const API_KEY = "SUA API KEY";
const API_URL = "https://api.buttondown.email/v1/subscribers";
const subscribe = async (event) => {
event.preventDefault();
const response = await fetch(API_URL, {
body: JSON.stringify({
email: email,
tags: ["newsletter", "teste"],
}),
headers: {
"Content-Type": "application/json",
Authorization: `Token ${API_KEY}`,
},
method: "POST",
});
console.log(response);
return response;
};
7. Vamos chamar a função subscribe no botão "Registrar!":
<button type="submit" onClick={subscribe}>
Registrar!
</button>
8. Acesse o painel de gerenciamento do ButtonDown com a sua conta, navegue até o menu Programming, copie e cole sua API KEY na respectiva variável:
const API_KEY = "COLE SUA API KEY AQUI";
9. Execute o projeto com o comando yarn dev:
$ yarn dev
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled successfully
10. Acesse https://localhost:3000 com seu navegador preferido.
11. Abra as ferramentas de desenvolvedores e navegue até a Console.
Ao registrar um e-mail, você verá que as mensagens de sucesso ou erro serão apresentadas na console. E com isso terminamos nossa integração com a API.
A versão final do nosso arquivo index.js ficou dessa forma:
import styles from "../styles/Home.module.css";
import { useState } from "react";
export default function Home() {
const [email, setEmail] = useState("");
const API_KEY = "COLE SUA API KEY AQUI";
const API_URL = "https://api.buttondown.email/v1/subscribers";
const subscribe = async (event) => {
event.preventDefault();
const response = await fetch(API_URL, {
body: JSON.stringify({
email: email,
tags: ["newsletter", "teste"],
}),
headers: {
"Content-Type": "application/json",
Authorization: `Token ${API_KEY}`,
},
method: "POST",
});
console.log(response);
return response;
};
return (
<div className={styles.container}>
<main className={styles.main}>
<h1 className={styles.title}>Registre-se na minha newsletter!</h1>
<p className={styles.description}>
<input
type="email"
placeholder="informe seu e-mail"
value={email}
onChange={(event) => {
setEmail(event.currentTarget.value);
}}
></input>
<button type="submit" onClick={subscribe}>
Registrar!
</button>
</p>
</main>
</div>
);
}
O próximo passo é tratar e exibir mensagens na tela do usuário, mas isso é assunto para um próximo post.
Até mais pessoal!!!
Referências:
Registre-se na nossa newsletter
e mantenha-se informado sobre nossos novos treinamentos e artigos.