Fazendo Requisição para API em um Template de E-mail

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!