email

E-mails responsivos com a linguagem de marcação MJML

O MJML é um framework e linguagem de marcação para a criação de e-mails responsivos. Ele simplifica a escrita com uma linguagem simples e concisa (a Mailjet Markup Language) que é convertida para HTML.

Se você ainda não teve a oportunidade de ver o código HTML de um e-mail responsivo, costuma ser uma coisa muito bagunçada, pois os estilos são aplicados de forma inline e usa-se tabelas para a sua estruturação. Isso é feito para fazer com que o e-mail funcione no maior número possível de dispositivos.

Curso de
CONHEÇA O CURSO

Para você ter ideia, esse trecho de MJML de um dos e-mails que enviamos na TreinaWeb:

<mj-section>
  <mj-column full-width="full-width">
    <mj-image src="https://d2knvm16wkt3ia.cloudfront.net/og/java-jax-ws-rs.png" href="https://www.treinaweb.com.br" />
    <mj-text align="center" font-size="35px" line-height="1.1"> <a href="https://www.treinaweb.com.br">Python - Collections</a> </mj-text>
    <mj-text align="justify"> Estruturas de dados são pontos cruciais em qualquer linguagem de programação. Sendo que em cada uma, podem ser implementadas de uma forma diferente. Por isso que conhecer as particularidades e recursos da linguagem em relação a estrutura de
      dados, é imprescindível a qualquer um que queira dominar uma linguagem. </mj-text>
    <mj-text align="justify"> Neste ponto o Python não fica atrás, fornecendo estruturas comuns em outras linguagens, bem como estruturas exclusivas. Neste curso veremos como manipulá-las e conheceremos os métodos de cada estrutura disponível nesta linguagem. </mj-text>
    <mj-button width="100%" background-color="#54CF8A" href="https://www.treinaweb.com.br">SAIBA MAIS SOBRE O CURSO</mj-button>
  </mj-column>
</mj-section>

É convertido para esse HTML:

<div style="Margin:0px auto;max-width:600px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
        <tbody>
            <tr>
                <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
                    <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
                            <tr>
                                <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;">
                                        <tbody>
                                            <tr>
                                                <td style="width:550px;">
                                                    <a href="https://www.treinaweb.com.br" target="_blank" style="color: #444444;">
                                                        <img height="auto" src="https://d2knvm16wkt3ia.cloudfront.net/og/java-jax-ws-rs.png" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;" width="550">
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div style="font-family:Helvetica, arial, sans-serif;font-size:35px;line-height:1.1;text-align:center;color:#444444;">
                                        <a href="https://www.treinaweb.com.br" style="color: #444444;">Python - Collections</a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="justify" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div style="font-family:Helvetica, arial, sans-serif;font-size:16px;line-height:24px;text-align:justify;color:#444444;"> Estruturas de dados são pontos cruciais em qualquer linguagem de programação. Sendo que em cada uma, podem ser implementadas de uma forma diferente. Por isso que conhecer as particularidades e recursos da linguagem em relação a estrutura de dados, é imprescindível a qualquer um que queira dominar uma linguagem. </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="justify" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <div style="font-family:Helvetica, arial, sans-serif;font-size:16px;line-height:24px;text-align:justify;color:#444444;"> Neste ponto o Python não fica atrás, fornecendo estruturas comuns em outras linguagens, bem como estruturas exclusivas. Neste curso veremos como manipulá-las e conheceremos os métodos de cada estrutura disponível nesta linguagem. </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center" vertical-align="middle" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                                    <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;">
                                        <tr>
                                            <td align="center" bgcolor="#54CF8A" role="presentation" style="border:none;border-radius:3px;cursor:auto;padding:10px 25px;background:#54CF8A;" valign="middle">
                                                <a href="https://www.treinaweb.com.br" style="background: #54CF8A; color: #ffffff; font-family: Helvetica, arial, sans-serif; font-size: 13px; font-weight: normal; line-height: 120%; Margin: 0; text-decoration: none; text-transform: none;" target="_blank">
              SAIBA MAIS SOBRE O CURSO
            </a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Através desse exemplo já dá para você notar como o MJML ajuda na escrita e na clareza do que está sendo escrito.

E para escrever um e-mail usando MJML?

O intuito desse artigo não é o de masterizar o uso do MJML ou de te ensinar a passo a passo a sintaxe dessa linguagem de marcação. O MJML possui uma completa documentação que mostra passo a passo tudo o que pode ser desenvolvido com ele.

A ideia aqui é te dar o caminho da pedra, te apresentar os recursos disponíveis, o que você pode usar e te mostrar como converter o MJML para HTML em seu projeto.

A documentação:

A documentação do MJML não deve ser ignorada. Portanto, é um ótimo começo.

Try it live:

Você pode visualizar o resultado enquanto escreve no editor online disponível no site do MJML.

Templates:

O site oficial tem uma área com alguns templates para que você possa visualizar e tirar algumas ideias na hora de construir os seus e-mails.

A própria documentação fornece um template básico para você começar por ele, caso deseje.

E como vou converter o MJML para HTML?

O MJML precisa ser convertido para HTML para que então os seus e-mails sejam enviados. Há algumas formas de atingir esse objetivo. Vamos começar pelas manuais:

1) É possível converter MJML para HTML pelo editor online oficial.

2) É possível converter através da aplicação desktop disponível para Linux, macOS e Windows.

Agora, se dinamicamente/programaticamente você constrói o MJML e precisa convertê-lo “on the fly” antes dos envios, existem algumas opções:

1) Se registrar na API Oficial do MJML para que você receba uma credencial que te permitirá fazer uma requisição na API para converter MJML para HTML. É de grátis.

curl \ 
-X POST "https://api.mjml.io/v1/render" \ 
--user "APPLICATION-ID:SECRET-KEY" \ 
-d '{ 
"mjml":"<mjml><mj-body><mj-container><mj-section><mj-column><mj-text>Hello World</mj-text></mj-column></mj-section></mj-container></mj-body></mjml>" 
}'

2) O MJML é open-source e escrito em JavaScript. Ou seja, você próprio pode criar a sua API em NodeJS para a conversão do MJML para HTML. Veja no Github.

Como usamos o MJML na TreinaWeb

Na TreinaWeb usamos uma abordagem Serverless para essa conversão. Você não sabe o que é Serverless? Recomendo a leitura do artigo: Serverless: uma introdução.

Criamos uma função e fizemos o deploy dela na AWS Lambda, pois é na AWS onde administramos toda a nossa infraestrutura.

O código-fonte dessa função e do template do Serverless Framework para deploy na AWS, você encontra nesse repositório: KennedyTedesco/mjml-lambda.

Curso de
CONHEÇA O CURSO

A função é extremamente simples, ela apenas invoca o código do MJML para realizar a conversão:

import mjml2html from 'mjml';

export async function convert(event, context, callback) {
  return mjml2html(event.mjml, {
      beautify: true,
      minify: true,
      keepComments: false,
      validationLevel: 'skip'
  });
}

Uma vez que a lambda está disponível para uso, a invocamos em um de nossos sitemas usando a SDK da AWS para PHP. Uma possível forma de atingir esse objetivo usando o PHP:

$lambda = new \Aws\Lambda\LambdaClient([
    'version' => 'latest',
    'region' => 'us-east-1',
]);

$result = $lambda->invoke([
    'FunctionName' => 'mjml-prod-to-html',
    'InvocationType' => 'RequestResponse',
    'LogType' => 'None',
    'Payload' => json_encode(['mjml' => '<mjml>...',]),
]);

$result = json_decode($result->get('Payload')->getContents(), true);

$html = $result['html']; // O HTML convertido

No entanto, se fosse necessário expor essa função na Web para que qualquer um utilizasse, poderíamos usar o API Gateway na “frente” da lambda.

Dessa forma conseguimos manter o template dos nossos e-mails bem fáceis de serem desenvolvidos e alterados, além de que trazemos para a nossa infraestrutura a responsabilidade de fazer a conversão, para não ter que depender de um serviço de terceiro (a API BETA do MJML).

Espero que o MJML ajude a sua equipe a produzir lindos e-mails responsivos. Até a próxima!

Enviando email com Python e SMTP

O envio de emails é a melhor forma para se comunicar com os usuários de uma aplicação. Além de ser gratuito (na maioria das vezes), é seguro e muito utilizado em todo o mundo.

Pensando nisso, veremos neste artigo como enviar e-mails em aplicações Python utilizando SMTP.

Configurando servidor gmail

Em nosso exemplo, veremos como enviar um email utilizando o serviço do gmail (pois ele é o mais utilizado no mundo). Porém, antes de iniciar o desenvolvimento do nosso projeto, precisamos criar um token para ser utilizado como password, caso você utilize o recurso de autenticação em duas etapas (recurso que só permite que seu usuário seja autenticado caso você o libere em seu smartphone) ou não quer que sua senha seja utilizada em aplicações não seguras.

Criando token

Para criar um token que será utilizado como senha em nossa aplicação, precisamos ir até o seguinte link: https://security.google.com/settings/security/apppasswords.

Na página, vamos selecionar a opção “Outro” para definir um nome para nosso projeto. Em seguida, determinamos o nome da aplicação e geramos o token:

Ao clicar em “GERAR”, seremos redirecionados para a tela de login da nossa conta. Ao inserir o email e senha, clicamos em “Próxima” e nosso token será gerado com sucesso:

É essa “senha de app” que vamos utilizar para autenticar com nosso gmail na aplicação (lembre-se de copiá-la).

Criando script para envio de email

Nosso script será bem simples. Basicamente, vamos informar o email e senha (conforme gerada no tópico anterior) da conta que será usada para enviar o email, o destinatário e o conteúdo do email. Sendo assim, o código final será o seguinte:

import smtplib

server = smtplib.SMTP_SSL('smtp.gmail.com', 465)
server.login("seu_email@gmail.com", "senha_gerada_topico_anterior")
server.sendmail(
  "remetente@gmail.com",
  "destinatario@gmail.com",
  "Conteúdo da mensagem")
server.quit()

Basicamente, o código acima irá criar uma conexão com o serviço de SMTP do gmail por meio da porta 456, realizar o login com as credenciais do usuário e enviar o email conforme os parâmetros enviados pelo método sendmail(). Ao concluir o processo, finalizamos o servidor e o email deve chegar no destinatário.

Sendo assim, ao executar o código acima (você pode utilizar qualquer editor de texto, IDE ou terminal), o email será enviado com sucesso, chegando até o destinatário:

Conclusão

Neste artigo vimos o quão simples é enviar um email utilizando Python. Claro que há várias melhorias que podemos fazer (adicionar o assunto do email, enviar um código HTML como conteúdo do email), mas isso nós veremos em um outro artigo 🙂