Build a bulk email and sms app with Vue and AWS SES, AWS SNS OR Twilio Part 3
Tags: webdev, aws, twilio, tutorial
Published: 2021-01-16 19:08:14

In this part, we are going to focus on integrating our application with Twilio. In conclusion, will create a table on pricing so you can understand which product to use in your application.

Let's begin by installing all the required packages

```
yarn add twilio
yarn add @sendgrid/mail
```

Once done get your credentials from Twilio and sendgrid 

You need to register an account with Twilio here [https://www.twilio.com/](https://www.twilio.com/) and generate a phone number. Get your SID and AUTH_TOKEN.

For email, you will need to register an account with SendGrid [https://signup.sendgrid.com/](https://signup.sendgrid.com/)

Then generate a SENDGRID_API_KEY.

For raw email or email with attachment, you will need to register with digioh 
[https://digioh.com/sendgrid](https://digioh.com/sendgrid)

Once we have everything together let's create a .env file and add our creditials

```
VUE_APP_SENDGRID_API_KEY = 
VUE_APP_TWILIO_ACCOUNT_SID = 
VUE_APP_TWILIO_AUTH_TOKEN = 
```
Next, add a script.js file to your application.

# Script.js

```javascript
/*eslint-disable*/
var accountSid = process.env.VUE_APP_TWILIO_ACCOUNT_SID; // Your Account SID from www.twilio.com/console
var authToken = process.env.VUE_APP_TWILIO_AUTH_TOKEN;   // Your Auth Token from www.twilio.com/console
const client = require('twilio')(accountSid, authToken, {
    lazyLoading: true
});
const sgMail = require("@sendgrid/mail");
sgMail.setApiKey(process.env.VUE_APP_SENDGRID_API_KEY);

// send bulk email
export const sendbulkemail = item => {
  const msg = {
    to: item.addresses,
    from: "crudavid36@gmail.com",
    subject: `${item.subject}`,
    text: `${item.content}`,
    html: `<html><body><div style="font-weight: 500; margin-bottom:10px">${item.title}<div><div>${item.content}</div></body></html>`
  };
  sgMail
  .send(msg)
 
};
// send bulk raw email
// Unfortunately you cant send attachment with Sendgrid
// You will have to use https://digioh.com/sendgrid
export const sendbulkRawemail = item => {
  //
};
// send bulk sms
export const sendbulksms = item => {
  client.messages
    .create({
      body: `${item.content}`,
      from: "+1#########",
      to: `${item.addresses}`
    })
    .then(message => console.log(message.sid)).catch(Error => { console.log(Error)})
};

// ============================

// sort email addresses
export const sortsenderemail = item => {
  // this will hold our final items
  let array = [];
  // get the email and phone numbers and sort them
  const response = item.split(",");
  // loop through the response and check the validity of each email
  response.forEach(e => {
    let item = checkvalidityofemail(e);
    if (item === true) {
      // if email is valid send to array
      array.push(e.trim());
    }
  });
  // end
  // return array
  return array;
};

// sort phone numbers
export const sortsenderphone = item => {
  // this will hold our final items
  let array = [];
  // get the email and phone numbers and sort them
  const response = item.split(",");
  // loop through the response and check the validity of each email
  response.forEach(e => {
    let item = checkvalidityofphone(e);
    if (item === true) {
      // if email is valid send to array
      array.push(e.trim());
    }
  });
  // end
  // return array
  return array;
};

// This function checks the format of an email
// Those that wont pass will be eliminated
const checkvalidityofemail = item => {
  // eslint-disable-next-line no-useless-escape
  let pattern = /(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
  return pattern.test(item);
};

// This function checks the format of a phone number
// Those that wont pass will be elimited
const checkvalidityofphone = item => {
  // eslint-disable-next-line prettier/prettier
    let pattern = /^\+[1-9]\d{1,14}$/g;
  return pattern.test(item);
};
// ==================================

```

This will be a complete guide on how to build and integrate a bulk email application using Twilio and SendGrid.

# Conclusion

Let's conclude by comparing a few things

###Email
This is my opinion and anyone can suggest otherwise. AWS SES leads in this and would be great to be incorporated in a bulk application. AWS SNS wins in the pricing battle and would be ideal for SMS notifications. 
*Pricing is for Airtel in Kenya they charge less for AWS SMS than from Twilio.

| Product        | Pricing          |
| ---------------|:----------------:|
| AWS SES        | 0.0001 per email |
| sendGrid       | 0.00015 per email|

### SMS
| Product        | Pricing             |
| ---------------|:-------------------:|
| AWS SNS        | 0.05126 per message |
| Twilio         | 0.0645 per message  |
 

I hope this was helpful to anyone currently building a bulk email and SMS application. Thanks for reading this will share a tutorial video in the coming days.