Criando um Serviço de Notificação por Email Gratuito com AppScript · matheus1714

Imagem retirada de Pexels.

Introdução

Esses dias eu andei mexendo um pouco com AppScript e fiz uma automação com a planilha do Google Sheets e AppScript para fazer um envio de email automático. Achei bem interessante, pois foi minha primeira vez mexendo com isso e notei que tem muitas formas de usar o AppScript para fazer integração do Google Docs, Sheets, Slide e Gmail.

Com isso, pensei em escrever sobre isso como um projeto de serviço de notificação por email usando apenas essas ferramentas.

O que é AppScript?

O AppScript é uma plataforma de desenvolvimento baseada em Javascript. Ela permite que você crie scripts para automatizar e expandir funcionalidades do Google Work

Um detalhe importante é que os scripts criados no AppScript não são Javascript. Eles são apenas scripts usados para utilizar funcionalidades da Google e usam o Javascript como base. Além disso, esses scripts não são executados no browser, eles são executados no servidor. (Stack Overflow)

Na parte de automatização de tarefas, o AppScript permite a integração de serviços de API e a criação de gatilhos (triggers) que são executados devido a ações do usuário, como entrar em uma planilha, submeter um formulário ou ser executado de forma periódica, que é o que utilizaremos.

Outro detalhe importante que se relaciona apenas ao Google Sheets, Docs e Slide é que a identificação deles é feita via um identificador. Então quando tiver uma planilha, por exemplo, olhe a URL da página e note que ela vai estar com algo assim:

https://docs.google.com/spreadsheets/d/{id}/…

O identificador fica entre depois do /d e antes do primeiro /. É importante colocar o identificador, pois facilita a busca da planilha no Google Drive.

Para o funcionamento correto dos seus scripts, lembre-se de ter o nível de acesso necessário para o que se deseja fazer, normalmente o acesso de edição é melhor, pois já permite aplicar muitas alterações.

Criando Notificação

Para começar o projeto, crie uma planilha em algum lugar do seu Google Drive. Guarde o id dessa planilha vendo a URL da página.

Depois vamos criar uma estrutura de dados que depois irá acessar essa planilha. Vamos colocar uma coluna com nome, e outra com email. Na coluna de email coloque seu email pessoal

Nome	Email
Algum nome	seu email para testar

Depois disso vá em Extensões e clique na opção de AppScript.

Você vai chegar em uma tela semelhante a essa aqui:

Vamos editar o Code.gs, que é o arquivo usado para criar os scripts.

O objetivo é obter os dados da planilha e depois enviar um email para cada pessoa. O email vai ser construído de forma que o corpo dele vai ser: “Olá {name}. Estou enviando esse email para testar o AppScript”. Logo, é necessário ter uma função para obter os dados da planilha, outra para construir o corpo do email e outra para enviar o email.

É importante separar em funções separadas para facilitar no teste dessas funções no próprio AppScript e depois para reutilização para outras aplicações que deseje fazer.

Então, para construir a função de obter os dados da planilha, é necessário acessar a planilha, baseado no id dela, e depois retornar os dados como um array de objetos contendo nome e email. A função ficará assim:

/**
 * Função para obter nomes e emails de uma planilha específica.
 *
 * @param {string} sheetId
 * @return {Array<{ name: string, email: string }>}
 */
function getNameAndEmail(sheetId) {
  const spreadsheet = SpreadsheetApp.openById(sheetId);
  const sheet = spreadsheet.getSheets()[0];
  const range = sheet.getDataRange().getValues();


  const data = [];
  for(let i = 1; i < range.length; i++) {
    const user = {};
    user.name = range[i][0];
    user.email = range[i][1];
    data.push(user);
  }
  return data;
}

Note que primeiro eu obtive o objeto da planilha, depois eu escolhi a primeira aba nela. Em seguida eu obtive os range de dados. Por fim, eu fiz um looping para obter o array de objetos. Eu comecei a partir da primeira linha para evitar de pegar o cabeçalho.

Um detalhe que você deve estar se perguntando é porque eu coloquei a descrição da função logo acima. Bom, como o AppScript é baseado em Javascript, então é possível usar o @param e o @return para especificar as tipagem dos objetos de entrada e saída, respectivamente. Caso você copie o código, depois tente ver usar essa função e verifique o que acontece com o autocomplete do editor. Você vai notar que ele vai te ajudar a completar que os objetos retornados são um array e que nesse array tem um objeto que você pode obter as chaves name ou email.

Agora, para obter o conteúdo do email, vamos criar a função que será simplesmente:

/**
 * Função para obter o template do email.
 *
 * @return {string}
 */
function getTemplate() {
  return  'Olá {name}.\nEstou enviando esse email para testar o AppScript';
}

O que está entre chaves precisa ser exatamente o que está no vetor de objetos que criei anteriormente.

Por fim, para enviar o e-mail, basta criar a função:

/**
 * Função para enviar emails a uma lista de usuários.
 *
 */
function sendEmail() {
  const users = getNameAndEmail(SHEET_ID_WITH_NAME_AND_EMAIL);
  const template = getTemplate();


  users.forEach((user) => {
    const subject = "Email de Notificação Automática"
    const body = template
      ?.replace('{name}', user.name);


    if(user.email?.length) {
      MailApp.sendEmail({
        to: user.email,
        subject,
        body,
      });
    }
  });
}

Nessa função eu obtenho os usuários e o template. Em seguida, para cada usuário, eu crio um assunto para meu email, e crio o corpo do email baseado no template. Por fim, se o e-mail está preenchido, eu envio o e-mail.

Por fim, selecione a função sendEmail e aperte o botão “Run”. Quando você olhar seu email irá notar que terá recebido um email. Lembrando que como seria a primeira vez, ele vai pedir sua permissão para poder executar o script, então apenas aceita o que ele pedir.

Não parece complexo, certo?

Mas existem muitas melhorias possíveis que você pode implementar para melhorar tudo isso e uma delas irei mostrar na seção seguinte.

Melhorando Design do Email com HTML

Você deve ter notado que o objetivo foi cumprido, mas o design do email não está nada parecido com o que você deve receber de promoção de produtos ou outras notificações, certo?

Isso acontece, pois esses emails são construídos usando o HTML para poder personalizar um pouco mais a estrutura.

Além disso, a forma que é construído esse HTML contém várias restrições, pois os serviços de email não são adaptados ao formato que normalmente é usado para construir páginas web.

A estrutura básica ainda se mantém a mesma:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   
  </body>
</html>

Contudo, a centralização é toda feita via a tag table, ou seja, usar divs e display flex não irão funcionar. Será necessário usar margins e padding para isso. Além disso, outra recomendação é usar o CSS inline, ou seja, usar o css na própria tag e evitar usar variáveis css ou classes muito complexas.

Outros pontos são que o HTML do email não suporta Javascript, as imagens de fundo costumam ser bloqueadas para alguns serviços de email e não é possível customizar as fontes. Só é possível usar a fontes nativas como a Arial, por exemplo.

Como o objetivo desse post não é ensinar a criar emails responsivos, eu deixo aqui um link de um post muito bom que encontrei sobre o assunto: How to Create and Send a Responsive HTML Email.

Caso você só queira ver o resultado de um HTML bonito, basta usar um serviço para criar um HTML para você. Um que achei de forma gratuita para construir isso foi nesse site https://beefree.io/ que possui templates HTML para email gratuitos. Basta modificar um pouco depois.

Escolhi um dos templates, fiz a edição e ficou assim.

Lembre-se de colocar o identificador {name} para poder substituir depois via código.

Depois de exportar e copiar o HTML, no AppScript, vá no botão de + ao lado de Files e crie um arquivo HTML chamado Template. Deve ter sido criado um arquivo Template.html. Coloque seu código HTML lá. Depois vá em script e modifique a função getTemplate para:

function getTemplate() {
  return  HtmlService.createHtmlOutputFromFile('Template').getContent();
}

Faça uma pequena alteração na função sendEmail para aceitar o corpo html, em vez de apenas o corpo sem nada:

function sendEmail() {
...
    if(user.email?.length) {
      MailApp.sendEmail({
        to: user.email,
        subject,
        htmlBody: body, // Modificado Aqui
...
}

Quando você apertar o botão de “Run” novamente, deve receber algo assim:

Parece bem mais profissional, certo?

Isso foi apenas uma pequena melhoria, mas já faz total diferença para quem recebe o email.

Acionadores

Para finalizar, se você quiser uma periodicidade ou que uma ação seja executada nesses e-mails, você deve ir em acionadores que fica na aba lateral do AppScript:

Na página dos acionadores, clique em adicionar acionador e depois configure para o que você quer. Deixei aqui uma configuração para uma pessoa receber uma notificação por email toda semana em um horário específico:

Esse acionador irá enviar email para a lista de pessoas do sheet toda segunda de 8 às 9 da manhã.

Conclusão

Com isso, foi possível ter um overview de como o AppScript funciona na conexão de planilhas e envio de emails. Além disso, vimos que construir um email via HTML é complexo, mas existem vários templates gratuitos que podem ser alterados para uso. Por fim, foi mostrada a configuração de um acionador para enviar email de forma recorrente e automática.

O código completo se encontra aqui:

https://github.com/Matheus1714/app-script-email-notification/tree/main

Considerações Finais

Espero que tenha gostado desse post. Estou voltando a postar conteúdos do que aprendo agora e resolvi condensar algo que aprendi recentemente aqui.