A integração de dados dinâmicos em templates de e-mail é uma necessidade crescente no mundo do desenvolvimento web. Imagine criar um e-mail personalizado para cada usuário, com informações atualizadas no momento da renderização. Para isso, vamos usar um framework chamado JSX Mail. Com o JSX Mail, fazer requisições dentro de um template de e-mail não é apenas possível, mas também se torna uma tarefa acessível e eficiente.
Iniciando o Projeto
Para começar, vamos criar uma pasta e iniciar seu projeto com Node.js. Basta copiar e colar o comando abaixo no seu terminal:
mkdir requesting-api-from-render
cd requesting-api-from-render
yarn init -y
Agora, instale e configure o JSX Mail no seu projeto. É super simples, apenas copie e cole o comando abaixo no seu terminal:
yarn add jsx-mail @jsx-mail/core
yarn jsxm init
Este processo cria algumas pastas e arquivos para você. Se não entender muito bem, você pode ler mais detalhes sobre esses arquivos aqui.
Desenvolvendo o Template de E-mail
No diretório do projeto, localize a pasta mail/templates. Dentro dela, crie um arquivo com o nome my-first.jsx. Este será seu primeiro template de e-mail com JSX Mail. Adicione um conteúdo simples:
export default function MyFirst() {
return <h1>Hello!</h1>;
}
Visualizando o Template
Agora, você tem um template básico pronto para ser personalizado. Antes de personalizar seu template, vamos visualizá-lo em tempo real no seu navegador. Execute o comando abaixo:
yarn jsxm preview
Abra seu navegador em http://localhost:3256 e selecione o template my-first.
Fazendo Requisições
A mágica acontece com a função onRender. Este recurso permite executar operações antes da renderização do template, como buscar dados de uma API. Atualize seu template para incluir esta função:
export async function onRender({ name }) {
const url = `https://api.github.com/users/${name}`;
const response = await fetch(url);
const user = await response.json();
return {
bio: user.bio,
};
}
Este código busca informações de um usuário do GitHub como exemplo prático. Lembre-se de que a função deve ter exatamente o nome onRender e ser exportada do arquivo do seu template, como mostrado acima.
Preparando o Template para os Dados da API
Agora, vamos lidar com algumas props. No JSX Mail, sempre que se fala em props em um template de e-mail, você precisa exportar um objeto com a tipagem delas. Adicione o código abaixo também no arquivo do seu template de e-mail:
export const props = {
name: String('Theryston'),
bio: String(),
};
Esse código indica ao JSX Mail: “Este template recebe as props name e bio, e ambas são strings”. O parâmetro Theryston, passado para a função String do JavaScript, serve para dizer ao JSX Mail: “Use a string Theryston como valor para essa prop no preview”. Isso garante um valor mock para a sua prop.
Modifique seu template de e-mail para exibir o name e a bio. Aqui está o código:
export default function MyFirst({ name, bio }) {
return (
<div>
<h1>Hello {name}</h1>
<p>{bio}</p>
</div>
);
}
Renderizando o Template de E-mail
Agora vamos para a etapa final: renderizar seu template de e-mail. O processo transforma seu código JSX em HTML e CSS, permitindo enviar esse resultado como corpo do e-mail.
Antes de renderizar, o JSX Mail precisa preparar o seu template. Esse processo envolve um build dos arquivos, otimização e upload das imagens, entre outros. Isso parece complexo, mas é simples. Pare o preview e execute o comando abaixo:
yarn jsxm prepare
Feito isso, vamos começar o processo de renderização. Crie um arquivo index.js na raiz do seu projeto e coloque o seguinte código:
const jsxMail = require('jsx-mail');
jsxMail
.render('my-first', { name: 'John' })
.then((html) => console.log(html));
Essa função recebe o nome do template e as props. Note que informamos apenas a prop name, pois a bio será buscada automaticamente pela função onRender.
O HTML do seu template será retornado assim que a promise da função render for resolvida. Agora você pode usar esse HTML como preferir, por exemplo, com o Nodemailer.
Conclusão e Recursos Adicionais
Com estas etapas, você está pronto para criar templates de e-mail ricos e dinâmicos com o JSX Mail. Para explorar mais, visite o site oficial do JSX Mail. Não esqueça de apoiar nosso repositório no GitHub marcando ele com uma star. Explore e tire o máximo proveito deste framework inovador!
