使用SendGrid宇宙函数发送电子邮件

我们最近发布了Cosmic Functions （公开测试版）。 我们很高兴能帮助团队构建出色的现代产品以及新的无服务器解决方案。

在这个简短的教程中，我将向您展示如何启动并运行SendGrid电子邮件功能，以通过SendGrid发送电子邮件（以查看更多示例功能登录并进入“ 存储桶”>“设置”>“功能” ）。

部署功能

1.安装功能

要安装SendGrid功能，请转至您的存储桶>设置>功能 ，找到SendGrid功能，然后单击“安装功能”。

2.添加密钥，然后部署

安装该功能后，您将被重定向到页面以添加您的AWS凭证和环境变量。 请按照以下步骤添加您的AWS信誉（如果您没有方便的话）。

转到您的SendGrid帐户，然后在“设置”>“ API密钥”中找到您的API 密钥 （您可能需要创建一个新密钥 ），并将其作为值添加到SENDGRID_API_KEY。

一旦添加了密钥，请单击“部署功能”，一分钟后，您的功能将被部署并准备接受请求。

编写网络联系表

接下来，让我们创建一个联系表来访问新部署的端点。 请按照以下步骤安装React Starter ：

npm i -g cosmic-cli
cosmic init react-starter
cosmic develop

现在转到您的应用程序代码库，转到位于pages / default.js中的默认页面组件，然后将其编辑为如下所示：

import React from 'react'
import Router from 'next/router'
import bucket from '../config'
import Page from '../components/page'
import PageNotFound from '../components/404'
import Header from '../components/header'
import Footer from '../components/footer'
import Nav from '../components/nav'
class DefaultPage extends React . Component  {
  static async getInitialProps({ req, query }) {
    let slug = query.slug
    if (!slug)
      slug = 'home'
    let page
    try {
      const res = await bucket.getObject({ slug })
      page = res.object
    } catch (e) {
      page = {
        title : 'Page not found' ,
        component : '404'
      }
    }
    return { page }
  }
  handleSubmit(e) {
    e.preventDefault()
    const email = e.target.email.value
    const first_name = e.target.first_name.value
    const last_name = e.target.last_name.value
    var url = 'https://your-cosmic-function-endpoint-here.lambda.aws.com' // ADD YOUR ENDPOINT HERE
    var data = {
      to : 'your_email@gmail.com' , // EDIT THIS TO YOUR EMAIL
      from : email,
      subject : `Contact form submission: ${first_name} ${last_name} ` ,
      text_body : `Contact form submission: ${first_name} ${last_name} ` ,
      html_body : `Contact form submission: <br /><b> ${first_name} ${last_name} </b><br /> ${email} `
    }
    fetch(url, {
      method : 'POST' ,
      body : JSON .stringify(data),
      headers :{
        'Content-Type' : 'application/json'
      }
    }).then( res => res.json())
    .then( response => console .log( 'Success:' , JSON .stringify(response)))
    .catch( error => console .error( 'Error:' , error));
  }
  render() {
    return (
      < div >
         <Header page={ this.props.page }/>
        <div className="main">
          {this.props.page.component && this.props.page.component==='404' ? (
            <PageNotFound />
          ) : (
            <Page page={this.props.page} />
          )}
          <Nav />
          <form onSubmit={this.handleSubmit}>
            <div>
              <input type="email" name="email" placeholder="Email"/>
            </div>
            <div>
              <input type="text" name="first_name" placeholder="First Name"/>
            </div>
            <div>
              <input type="text" name="last_name" placeholder="Last Name"/>
            </div>
            <div>
              <button type="submit">Send Email</button>
            </div>
          </form>
        </div>
        <Footer />
      </div>
    );
  }
}

export default DefaultPage

请注意以下几点：

1.我们添加了一个form元素来接受电子邮件，名字和姓氏的输入。
2.我们添加了handleSubmit方法来处理表单提交，该提交采用表单的值并将数据发送到我们的Cosmic Function端点。

就是这样！ 现在，我们有了一个端点，该端点从表单接收数据并将其发送到SendGrid API进行处理。

好处

更少的代码

我们不必担心在我们的应用程序中构建API端点来将数据发送到SendGrid。

更少的配置麻烦

我们不必担心配置麻烦，例如可能会泄露客户端的密钥。 我们不必与其他任何人共享API密钥，只需与端点共享即可。 Config在Cosmic Function中作为环境变量处理。

可重用

我们可以在需要发送电子邮件的任何其他应用程序中使用此端点。

希望您喜欢SendGrid函数的快速浏览，现在可以进行安装和部署了（转到“ 存储桶”>“设置”>“函数” ）。 如果您有任何疑问或意见，请告诉我。 在Twitter上与我们联系，并加入我们的Slack社区 。

From: https://hackernoon.com/sending-emails-with-the-sendgrid-cosmic-function-bcf0e42035ff