Product
Crea una aplicación web desde cero en menos de cinco minutos con Meteor & Mailgun
Este artículo fue escrito por Vianney Lecroart, evangelizador pionero de Meteor y capitán del grupo de Meteor en París, Francia. Vianney escribió su primer programa a los seis años. Tras ocho años trabajando en una startup de juegos multijugador masivos en línea, decidió unirse al otro lado de la Fuerza y convertirse en emprendedor a tiempo completo. ¿Su startup? Si te gustan Asana o Trello, su proyecto te encantará. Síguelo en @acemtp ¡para no perderte nada!
Hace un par de semanas Meteor anunció su integración con Mailgun, lo que permite a cualquier aplicación de Meteor enviar emails sin esfuerzo. Hoy voy a mostrarte un ejemplo de lo rápido que puedes crear y poner en marcha una aplicación de prueba.
Para quienes se perdieron el último correo postal, Meteor es una plataforma de código abierto para crear aplicaciones web de la máxima calidad en una fracción del tiempo, tanto si eres especialista en programación como si acabas de empezar. Meteor también incluye una integración nativa con Mailgun para enviar emails sin ningún tipo de configuración al desplegar tu aplicación en la plataforma Meteor. Esta combinación hace que crear aplicaciones web con función de email sea extremadamente rápido y sencillo.
Preparados, listos… ¡a programar!
Para este ejemplo, utilizaré un caso de uso bastante común para una página web de registro: tu usuario necesita poder registrarse para recibir más información sobre un producto y recibir un email de confirmación. Veamos lo rápido que puedes publicarlo usando Meteor y Mailgun.
Los requisitos básicos son que quien se registre pueda rellenar un formulario con su dirección de email y hacer clic en un botón para recibir un email de confirmación. Para hacerlo más interesante, añadiremos que la página web debe estar publicada en internet, no en tu ordenador local, y que solo puedes utilizar un ordenador que no tenga nada instalado salvo la configuración por defecto de Mac (o Linux).
Que empiece la cuenta atrás. ¡Vamos allá, Meteor!
Instala Meteor (un minuto con conexión lenta)
Como no tenemos nada en el ordenador, necesitamos instalar Meteor:
$ curl https://install.meteor.com | sh
Crea el proyecto (dos segundos)
Ahora crea el proyecto de Meteor y empieza a trabajar en él:
$ meteor create meteoremailrn$ cd meteoremail
Dado que necesitamos poder enviar emails, también tenemos que instalar el paquete inteligente de email:
$ meteor add email
Este paquete se configura automáticamente para enviar emails (hasta 300 al día) a través de Mailgun sin ningún tipo de programación; ni siquiera necesitas proporcionar credenciales. Si necesitas enviar más de 300 emails al día, consulta el paso opcional de más abajo.
Rellena el archivo meteoremail.html (un minuto si escribes despacio)
Por defecto, Meteor nos crea el archivo HTML con una plantilla básica que muestra un botón y un texto, así que primero sustituimos este texto por defecto por este otro:
<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
El cuerpo (body) solo contiene la llamada para insertar la plantilla denominada email. Y la plantilla no es más que un cuadro de texto de entrada con una marca y un botón de entrada. El motivo por el que creamos una plantilla en lugar de poner el directamente en el cuerpo es que la captura de eventos se realiza en las plantillas.
Rellena el archivo meteoremail.js (dos minutos)
El archivo meteoremail.js contiene todo el código del cliente y del servidor. ¡Es la parte más compleja de este tutorial! He añadido comentarios en el código para que puedas ver exactamente lo que hace.
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
Eso es todo en cuanto al código.
Prueba el proyecto de forma local (diez segundos)
Para probarlo de forma local, solo tienes que escribir:
$ meteor
Abre tu navegador en http://localhost:3000. Deberías ver el botón. Ahora haz clic en él para mostrar el email en el terminal de salida del servidor.
Sube el proyecto a internet (ocho segundos)
Con la mayoría de las aplicaciones web, los obstáculos adicionales suelen empezar en este punto: conseguir un servidor, empaquetar el proyecto, subirlo al servidor, instalar y configurar Apache, Rails, PHP o lo que sea que utilices, instalar y configurar un demonio SMTP, y así sucesivamente…
Pero no te preocupes, ¡estás usando Meteor!
Escribe:
$ meteor deploy meteoremail
A continuación, abre el navegador en http://meteoremail.meteor.com… ¡Está vivo, está vivo… ESTÁ VIVO!
¡Haz clic en el botón, el email se enviará y se mostrará una confirmación al usuario!
¿Cómo es posible? Porque Meteor se encarga de todo. Cuando usas meteor deploy, Meteor crea el subdominio meteoremail.meteor.com, configura el servidor, empaqueta y sube el proyecto y lo publica.
Cuando añadimos el paquete de email de Meteor, la colaboración de Meteor con Mailgun permitió crear y vincular una cuenta de Mailgun de forma automática. Sin configurar nada, puedes enviar hasta 300 emails al día… ¡GRATIS!
¿Conclusión?
En menos de cinco minutos (¡la mayor parte del tiempo fue por escribir despacio!), pudimos crear Y desplegar un formulario de registro sencillo. ¿Cómo? Al ser un profesional inteligente que elige el mejor entorno de trabajo y, por supuesto, gracias a Meteor y Mailgun
Paso extra opcional
Supongamos que el interés por tu producto está despegando de verdad y 300 emails al día no son suficientes. También te gustaría tener un mayor acceso al seguimiento de las estadísticas de email, así como la capacidad de gestionar y analizar los emails entrantes. Puedes crear fácilmente una cuenta de Mailgun y vincularla a tu aplicación de Meteor.
Tras crear tu cuenta en Mailgun, obtén tu contraseña en la interfaz de administración, en la pestaña Dominio. A continuación, añade el siguiente código a la parte del servidor de tu proyecto de Meteor (no olvides cambiar YOURDOMAIN y YOURPASSWORD):
Meteor.startup(function () {rn process.env.MAIL_URL = 'smtp://postmaster%40YOURDOMAIN.mailgun.org:YOURPASSWORD@smtp.mailgun.org:587';rn});rn
¡Listo! Vuelve a desplegarlo y ahora usará tu cuenta de Mailgun para enviar todos los emails necesarios.
Puedes acceder a un tutorial más detallado en mi blog.
Dinos qué opinas en los comentarios o únete a la conversación en HackerNews!
