Product
Crie um web app do zero em menos de cinco minutos com Meteor & Mailgun
Esta publicação foi escrita por Vianney Lecroart, um evangelista pioneiro do Meteor e capitão do Meteor Group em Paris, França. Vianney escreveu seu primeiro programa quando tinha seis anos. Após oito anos trabalhando em uma startup de jogos online multijogador em massa, ele decidiu se juntar ao outro lado da Força e se tornar um empreendedor em tempo integral. Sua startup? Se você gosta do Asana ou Trello, vai gostar do projeto dele. Siga-o em @acemtp para ficar atento!
Há algumas semanas, o Meteor anunciou a integração com o Mailgun, o que permite que qualquer aplicativo Meteor envie e-mails sem esforço. Hoje, mostrarei um exemplo de como você pode colocar um aplicativo de amostra para funcionar rapidamente.
Para quem perdeu o último post anterior, o Meteor é uma plataforma de código aberto para a criação de web apps de alta qualidade em uma fração do tempo, seja você especialista em desenvolvimento ou alguém que está apenas começando. O Meteor também conta com uma integração nativa com o Mailgun para o envio de e-mails sem nenhuma configuração ao implantar o seu aplicativo na plataforma Meteor. Essa combinação torna a criação de web apps habilitados para e-mail algo extremamente rápido e simples.
Preparar, apontar, programar
Neste exemplo, usarei um caso de uso bastante comum para uma página de cadastro – o seu usuário precisa conseguir se cadastrar para receber informações adicionais sobre um produto e receber um e-mail de confirmação. Vamos ver com que rapidez você consegue colocar isso no ar usando o Meteor e o Mailgun.
Os requisitos básicos são que a pessoa registrada consiga preencher um formulário com o seu endereço de e-mail e clicar em um botão para receber um e-mail de confirmação. Para deixar tudo mais interessante, vamos adicionar que a página deve estar no ar na internet, e não no seu computador local, e você só tem autorização para usar um computador que não tenha nada instalado, exceto a instalação padrão do Mac (ou Linux).
Inicie o cronômetro. Vamos de Meteor!
Instalar o Meteor (um minuto com conexão lenta)
Como não temos nada no computador, precisamos instalar o Meteor:
$ curl https://install.meteor.com | sh
Criar o projeto (dois segundos)
Agora, crie o projeto do Meteor e comece a trabalhar nele:
$ meteor create meteoremailrn$ cd meteoremail
Como precisamos conseguir enviar e-mails, também precisamos instalar o smart package de e-mail:
$ meteor add email
Esse pacote é configurado automaticamente para enviar e-mails (até 300 por dia) pelo Mailgun sem nenhuma programação; você nem precisa fornecer credenciais. Se precisar enviar mais de 300 e-mails por dia, confira a etapa opcional abaixo.
Preencher o meteoremail.html (um minuto se você digita devagar)
Por padrão, o Meteor cria o arquivo HTML para nós com um modelo básico que exibe um botão e um texto; então, primeiro substituímos esse texto padrão por este:
<body>rn {{> email}}rn</body>rnrn<template name="email">rn {{#if done}}rn <p>Email sent! Thank you for your interest in us.</p>rn {{else}}rn <label for="email">rn Enter your email address to receive news about usrn </label><br/>rn <input type="text" id="email" size="45" />rn <input type="button" id="btn" value="Submit" />rn {{/if}}rn</template>rn
O corpo contém apenas a chamada para inserir o modelo chamado email. E o modelo é apenas uma caixa de entrada de texto com um marcador e um botão de entrada. O motivo pelo qual criamos um modelo em vez de colocar o diretamente no corpo é que a captura de eventos é feita nos modelos.
Preencher o meteoremail.js (dois minutos)
O meteoremail.js contém todo o código do cliente e do servidor. É a parte mais complexa deste tutorial! Adicionei comentários no código para que você possa ver exatamente o que ele está fazendo.
if (Meteor.isClient) {rn // On the client, track the DOM click event on the input.rn Template.email.events({rn 'click #btn': function () {rn // When someone clicks the button, call the server method `sendEmail`rn Meteor.call('sendEmail', $('#email').val());rn Session.set('done', true);rn }rn });rnrn Template.email.done = function () {rn return Session.equals('done', true);rn };rn}rnrnif (Meteor.isServer) {rn // On the server, define the sendEmail RPC functionrn Meteor.methods({rn sendEmail: function (email) {rn // Send the emailrn Email.send({rn to: email,rn from: 'acemtp@gmail.com',rn subject: 'Thank you for signing up for our project',rn text: 'We will share with you some news about us in a near future. See you soon!'rn });rn }rn });rn}rn
Isso é tudo para o código.
Testar o projeto localmente (dez segundos)
Para testar localmente, basta digitar:
$ meteor
Abra o navegador em http://localhost:3000. Você verá o botão. Agora, clique nele para exibir o e-mail no terminal de saída do servidor.
Colocar o projeto na internet (oito segundos)
Com a maioria dos web apps, os obstáculos adicionais geralmente começam agora: conseguir um servidor, empacotar o projeto, fazer o upload para o servidor, instalar e configurar apache/rails/php/o que você usar, instalar e configurar um daemon SMTP e assim por diante…
Mas não se preocupe, você está usando o Meteor!
Digite:
$ meteor deploy meteoremail
Depois, abra um navegador em http://meteoremail.meteor.com… Está vivo, está vivo… ESTÁ VIVO!
Clique no botão e o e-mail será enviado, além de exibir uma confirmação para o usuário!
Como isso é possível? Porque o Meteor cuida de tudo. Ao usar o meteor deploy, o Meteor cria o subdomínio meteoremail.meteor.com, configura o servidor, empacota e faz o upload do projeto e o coloca no ar.
Quando adicionamos o pacote de e-mail do Meteor, a parceria do Meteor com o Mailgun permitiu criar e vincular uma conta do Mailgun automaticamente. Sem configurar nada, você pode enviar até 300 e-mails por dia … de GRAÇA!
Conclusão?
Em menos de cinco minutos (a parte mais demorada foi culpa sua e de seus dedos lentos!), conseguimos criar E implantar um formulário de cadastro simples! Como? Sendo um desenvolvedor inteligente que escolhe o melhor framework, e claro, graças ao Meteor e ao Mailgun
Etapa opcional extra
Agora, digamos que o interesse em seu produto esteja realmente decolando e 300 e-mails por dia não sejam suficientes. Você também gostaria de ter mais acesso às estatísticas de rastreamento de e-mail e à capacidade de lidar com os e-mails recebidos e analisá-los. Você pode criar facilmente uma conta do Mailgun e vinculá-la ao seu aplicativo Meteor.
Após criar sua conta no Mailgun, pegue sua senha na interface de administração, na guia Domínio. Depois, adicione o seguinte código à parte do servidor do seu projeto Meteor (não se esqueça de alterar YOURDOMAIN e YOURPASSWORD):
Meteor.startup(function () {rn process.env.MAIL_URL = 'smtp://postmaster%40YOURDOMAIN.mailgun.org:YOURPASSWORD@smtp.mailgun.org:587';rn});rn
Tudo pronto! Basta implantá-lo novamente e agora ele usará a sua conta do Mailgun para enviar quantos e-mails forem necessários.
Você pode acessar um tutorial mais detalhado em meu blog.
Conte-nos o que achou nos comentários abaixo ou participe da discussão no HackerNews!
