How to send an Email using Angular, Sails.js, and Mailgun

Gần đây mình có dành thời gian để tìm kiếm hướng dẫn về cách gửi email từ dịch vụ Mailgun bằng cách sử dụng Angular2 làm giao diện người dùng và Sails.js làm back-end.Mình đã tìm thấy hướng dẫn tuyệt vời này sử dụng gói e-mail-bui-mail, nhưng vì mình đã sử dụng Angular2 nên mình cần thêm vài bước nữa.Hầu hết các hướng dẫn của Mailgun mình tìm thấy cho thấy cách sử dụng Express.js, và bởi vì mình mới dùng đến Sails và phải tìm hiểu thêm một chút. Nhưng, một giải pháp khá hay đã được tìm thấy! Và hôm nay mình muốn chia sẻ nó với các bạn. Một số lưu ý:

• Mình đang sử dụng một tên miền sandbox với Mailgun.Để kiểm tra rằng một email đang được gửi, bạn sẽ cần thêm một địa chỉ email đã được xác minh vào tài khoản Mailgun của bạn và sử dụng địa chỉ email đó trong form của bạn. Nếu bạn không sử dụng tên miền sandbox, bạn sẽ phải định cấu hình các bản ghi DNS và xác minh tên miền.
• Hướng dẫn này giả định bạn đã thiết lập ứng dụng Angular2 và ứng dụng Sails của bạn.

1.Mailgun account

Setup Mailgun account của bạn.

2. Thông tin quan trọng

Ghi nhớ tất cả các thông tin quan trọng sau: Secret API Key, Sandbox Domain, Default SMTP Login, và Default Password(bạn sẽ sử dụng nó trong config Sails của bạn).

3. Add một mail address

Add một email address vào Authorized Recipient, bạn có thể test Mailgun service mà không cần adding thông tin credit card hoặc mua custom domain.

1.mailgun.js

Install mailgun.js trong sails app của bạn

npm install mailgun.js --save

2.sails-hook-email

Install the sails-hook-email package

npm install sails-hook-email  --save

3.model.js file và controller.js

Create một model.js file và controller.js file sử dụng sails generate api command.Tên của nó là email.

sails generate api email

4.email.js

Trong email.js model file của bạn, cấu trúc của model tương tự đối tượng gửi từ client side(chúng ta sẽ làm việc đó trong phần Angular2)

module.exports = {

  attributes: {
    from: {
      type: 'string'
    },
    to: {
      type: 'string'
    },
    name: {
      type: 'string'
    },
    text: {
      type: 'string'
    }
  }
};

5.EmailController.js

Ở trong EmailController.js file của bạn, sử dụng:

sails.hooks.email.send(template, data, options, cb)

Đó là một function để gửi email của bạn.

module.exports = {

	create: function (req, res) {
		const email = req.body
		sails.hooks.email.send(
		 "sendEmail",
		 {
			 Name: email.name,
		 },
		 {
			 to: email.to,
			 subject: "Welcome Email"
		 },
		 function(err) {
			 console.log(err || "Mail Sent!");
		 	}
		 )
	 }
};

First argument ở trong sails.hooks.email.send(template, data, options, cb) function là tên của view template chúng ta sẽ sử dụng.Chúng ta sẽ cần tạo template file trong views folder.Đường dẫn của view templates mặc định là views/emailTemplates.Hãy theo dõi cấu trúc dưới đây để tạo view của bạn:

your-sails-app/views/emailTemplates/sendEmail/html.ejs

6.email.js Mailgun config

Trong sails config folder của bạn, tạo một file có tên email.js.Đó là nơi bạn sẽ set Mailgun config của bạn, sử dụng Default SMTP Login and Default Password của bạn.Lưu ý rằng set testMode thành false, nếu không thì email được gửi là một tệp .txt thay vì nó thực sự được gửi đi.

module.exports.email = {
  service: "Mailgun",
  auth: {
    user: "postmaster@sandboxXXXXXXXXXXXXXXXXXXXXX.mailgun.org",
    pass: "XXXXXXXXXXXXXXXXXXXXX"
  },
  from: "email@your-domain",
  templateDir: "views/emailTemplates",
  testMode: false
}

7.models.js migrate

Trong models.js của bạn file nằm ở trong config folder, set migrate thành alter.Setting controller đó sẽ auto-migration strategy khi bạn run Sails app.Alter sẽ keep lại data của bạn nhưng sẽ thay đổi tables của bạn nếu làm thế này trong models.

migrate: 'alter'

8.cors.js

Trong cors.js file trong config folder, set AllRoutes thành true, và origin thành *.CORS là một cơ chế cho phép tập lệnh trình duyệt trên các trang được phân phối từ các tên miền khác để nói chuyện với máy chủ của bạn.Bởi mặc định, CORS là disable trong Sails.Các setting sau cho phép Angular app của bạn có thể tương tác với API của bạn.

allRoutes: true,
origin: '*',

1.form

Trong component file html của bạn, tạo form của bạn giữ được thông tin user.Ít nhất, bạn sẽ cần email của họ.Bind một onSubmit() function để click event trong button submit.Trong ví dụ dưới đây, Mình sẽ collect user nam, email address và message và pass các values đó như một argument trong onSubmit function.

<form>
  <md-input-container>
  <input mdInput  type="text" class="form-control"
        required
        name="name" #name placeholder="name">
  </md-input-container>
  <md-input-container>
  <input mdInput type="email" class="form-control"
        required
        name="email" #email placeholder="email">
  </md-input-container>
  <md-input-container>
  <input mdInput  type="text" class="form-control"
        required
        name="message" #message placeholder="message">
  </md-input-container>
  <button md-raised-button class="btn btn-default"  type="button" (click)="onSubmit(name.value, email.value, message.value)">Submit</button>
</form>

2.form.component.ts

Trong config file form.component.ts của bạn, thêm onSubmit() function của bạn và pass chúng vào 3 arguments.Trong function đó, bạn sẽ calling EmailService của bạn(cái mà chúng ta sẽ create trong step #3) và send các gía trị của nó từ form của bạn.

onSubmit(name, email, message) {
  this._emailService.sendEmail({
    from: 'Mailgun Sandbox <postmaster@sandboxXXXXXXXXXXXXXXXXXXXXX.mailgun.org>',
    to: email,
    name: name,
    text: message,
  })
  .subscribe(
    () => {},
    err => console.log(err)
  );
} 

3.Email service

Tạo email service của bạn, nơi sẽ makes http call tới Mailgun service.Nhớ là bạn có thể sử dụng ng generate command để set up nhanh hơn như một service.

ng generate service email

3a.form.component.ts

Trở lại file form.component.ts của bạn để import EmailService của bạn và add nó vào trong constructor function.

import { EmailService } from '../email.service';
......
constructor(
  private _emailService: EmailService
) {}

3b.providers trong app.module.ts

Cung cấp service trong thuộc tính providers trong app.module.ts file.Với cách đó, chúng ta có thể sử dụng EmailService trong tất cả components thuộc về AppModule của chúng ta.

...
providers: [
   EmailService
]
...

4.email.service.ts

Trong file email.service.ts của bạn, thêm đoạn code sau vào:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class EmailService {

  constructor(private http:  Http) { }

  sendEmail(data) {
    return this.http.post('http://localhost:1337/email/', data)
    .map(res => res.json())
    .catch(this._errorHandler);
  }

  private _errorHandler(error: Response) {
    console.error(error);
    return Observable.throw(error || 'Server Error')
  }

}

Function sendEmail() sẽ send data từ form của bạn tới email API bạn đã tạo trong sails của bạn.Từ đây, Sails sẽ sử dụng Mailgun credentials của bạn để gửi thông tin tới Mailgun service, nó sẽ trả về trong tempale email.Nếu bạn follow tất cả các các step trên, bạn có thể thấy một email trong verified email account mà bạn đã add vào Mailgun. Ví dụ trên hy vọng sẽ hữu ích cho các bạn khi gửi mail hoặc bạn đang mày mò về angular2. Thao khảo: https://blog.upstate.agency/how-to-send-an-email-using-angular-sails-js-and-mailgun-95226ad51064