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/ 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/

Then generate a SENDGRID_API_KEY.

For raw email or email with attachment, you will need to register with digioh
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

/*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.

Blog

Build a bulk email and sms app with Vue and AWS SES, AWS SNS OR Twilio Part 3

Kevin Odongo

Script.js

Conclusion

Email

SMS

Join Our Newsletter. No Spam, Only the good stuff.

Related