使用 Meteor+ Mailgun ，五分钟构建一个邮件订阅服务

xinzhix·2013年02月08日 11:12

Meteor 是一个可以让初学者也能用非常短的时间构建高质量 WebApps 的开源代码框架，推出 3 个月后获得千万美元融资，详细说明可见 36Kr 之前的 Meteor 报道；Mailgun 是一个简便高效的邮件发送云服务，和 MailChimp 类似，最近 Meteor 新版本集成了 Mailgun 的邮件服务，无需任何配置即可实现发送邮件功能。下面就是五分钟教程，来自 Meteor 早起天使投资人及 Meteor 巴黎兴趣组成员 Vianney Lecroart，最早发布在他的博客上。教程实现的功能是，用户访问你的应用地址，输入电子邮件，点击订阅按钮，然后就可以收到一封订阅成功的欢迎邮件。

Meteor 是一个可以让初学者也能用非常短的时间构建高质量 WebApps 的开源代码框架，推出不久即获得千万美元融资，详细说明可见 36Kr 之前的 Meteor 报道；Mailgun 是一个简便高效的邮件发送云服务，和 MailChimp 类似，最近 Meteor 新版本集成了 Mailgun 的邮件服务，无需任何配置即可实现发送邮件功能。

下面就是五分钟教程，Meteor 巴黎兴趣组成员 Vianney Lecroart，最早发布在他的博客上。教程实现的功能是，用户访问你的应用地址，输入电子邮件，点击订阅按钮，然后就可以收到一封订阅成功的欢迎邮件。

以下操纵在 Mac 电脑下进行，Linux 环境相似。Windows 下可能需要使用 SSH 隧道连接 *UNIX 环境或使用虚拟机。我们开始吧！

1）安装 Meteor 开发环境（正常网络一分钟左右安装完毕）：

$ curl https://install.meteor.com | sh

（已使用过 Meteor 可升级新版或者跳过，提示权限问题可将命令末尾 sh 替换为 sudo su）

2）创建 Meteor 应用（kryptonemail换成你你想要的应用名称）：

$ meteor  create kryptonemail

3）进入 Meteor 应用文件夹，添加 email 服务：

cd meteoremail
$ meteor add email

接下来有两步骤，要修改 App 的 HTML 模板和 JS 文件，App 应用文件夹下默认创建了这两文件，如我的是：
kryptonemail.html 和 kryptonemail.js 。

HTML 修改：

<body>
  {{> email}}
</body>

<template name="email">
  {{#if done}}
    <p>Email sent! Thank you for your interest in us.</p>
  {{else}}
    <label for="email">Enter your email address to receive news about us</label><br/>
    <input type="text" id="email" size="45" />
    <input type="button" id="btn" value="Submit" />
  {{/if}}
</template>

Javascrips 文件：

if(Meteor.isClient) {
  // on the client, we just have to track the DOM click event on the input.
  Template.email.events({
    'click #btn': function () {
      // if someone click on the button ( tag), then we ask the server to execute the function sendEmail (RPC call)
      Meteor.call('sendEmail', $('#email').val());
      Session.set('done', true);
    }
  });
  Template.email.done = function () { return Session.equals('done', true); }
}

if(Meteor.isServer) {
  // on the server, we create the sendEmail RPC function
  Meteor.methods({
    sendEmail: function(email) {
      // send the email!
      Email.send({to:email, from:'acemtp@gmail.com', subject:'Thank you for signing up for our project', text:'We will share with you some news about us in a near future. See you soon!'});
    }
  });
}