DEV Community

Cover image for Build a bulk email and sms app with Vue and AWS SES, AWS SNS OR Twilio Part 3
Kevin Odongo
Kevin Odongo

Posted on

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

#webdev #aws #twilio #tutorial

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
Enter fullscreen mode Exit fullscreen mode

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 =
Enter fullscreen mode Exit fullscreen mode

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); }; // ==================================
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)