Objective

You will be creating a workflow in Twilio which queries the requested email data, according to a given search criteria, and sends their details to WhatsApp.

Project Context

Emails have become one of the most used digital communication mediums. But, sad truth, that since they are so aggressively used, it's quite difficult to keep up with them. Moreover, people keep on subscribing to new newsletters every now and then, which also adds to this cause.

So, in order to make our life a little bit easier, we can build a tool which will fetch us the various details from our mail box on query. Twilio is an efficient platform which provides us with the features needed to accomplish this. It's a message, email, call and notification automation tool/platform. We'll be utilizing some of it's features through this project.

Project Workflow

Working principle of the project is as follows:

email-alerts-on-whatsapp-sequence-diagram

High-Level Approach

  • Setup WhatsApp Sandbox in Twilio

    1.2-twilio-whatsapp-sandbox

  • Inside Twilio Functions Create New Service -> New Function

    1.3-twilio-functions

  • Complete the Code in Functions and Save and Deploy them. This will create a REST API endpoint which will be used by WhatsApp Sandbox to operate.

  • Configure WhatsApp Sandbox with functions URL

    1.4-twilio-whatsapp-sandbox-config

  • Test it on WhatsApp.

    1.5-whatsapp-testing

Primary goals

Objective

You will be creating a workflow in Twilio which queries the requested email data, according to a given search criteria, and sends their details to WhatsApp.

Project Context

Emails have become one of the most used digital communication mediums. But, sad truth, that since they are so aggressively used, it's quite difficult to keep up with them. Moreover, people keep on subscribing to new newsletters every now and then, which also adds to this cause.

So, in order to make our life a little bit easier, we can build a tool which will fetch us the various details from our mail box on query. Twilio is an efficient platform which provides us with the features needed to accomplish this. It's a message, email, call and notification automation tool/platform. We'll be utilizing some of it's features through this project.

Project Workflow

Working principle of the project is as follows:

email-alerts-on-whatsapp-sequence-diagram

High-Level Approach

  • Setup WhatsApp Sandbox in Twilio

    1.2-twilio-whatsapp-sandbox

  • Inside Twilio Functions Create New Service -> New Function

    1.3-twilio-functions

  • Complete the Code in Functions and Save and Deploy them. This will create a REST API endpoint which will be used by WhatsApp Sandbox to operate.

  • Configure WhatsApp Sandbox with functions URL

    1.4-twilio-whatsapp-sandbox-config

  • Test it on WhatsApp.

    1.5-whatsapp-testing

Primary goals

Configuring Twilio WhatsApp Sandbox

The Twilio Sandbox for WhatsApp is a pre-configured environment available through the Twilio Console in which you can prototype sending outbound messages, replying to incoming messages, and configuring things like message delivery callbacks.

Requirements

  • Go to Try WhatsApp in Programmable Messaging Section. You should see something like this 1.1-twilio-whatsapp-sandbox-walkthrough

  • After sending "join want-development" to the number, you should receive a confirmation like this 1.2-twilio-whatsapp-sandbox-confirm

  • You will see 2 sections. The first is "Send a One-Way WhatsApp Message" and second is "Two-Way Messaging". We highly recommend trying them out and take a look at the code used in those examples. (To skip use Next button).

  • When you are in Twilio Sandbox Configuration make sure that your WhatsApp number is in Sandbox Participants.

  • You will need to configure WhatsApp sandbox every 3 days, If you want to avoid this:

    • Buy a Phone Number on Twilio (costs about $1/month), and request WhatsApp Business Account on it.
    • Create a automation bot and deploy it somewhere, which will configure this for you.

References

Bring it On!

  • Try to add multiple numbers in the Sandbox by just sending join text.

Expected Outcome

It is expected that you'll be able to set up the WhatsApp Sandbox. We highly recommend going through the code for one-way and two-way messaging.

Using IMAP library to fetch emails.

  • There are 2 libraries which can be use for operations related to Emails.
    • IMAP is used for reading the emails.
    • SMTP is used for sending emails to others.
  • IMAP is the only one you need to know for this project, but after completion you can also add functionality to send emails using SMTP.
  • We utilized IMAP-simple which is wrapped on imap-node library. We used it because of ease of functionality. But you can use any of them.
  • If you get an error in starting with code DEPTH_ZERO_SELF_SIGNED_CERT, there's a work around for that: add tlsOptions: { rejectUnauthorized: false }property in the config object along with user, password...etc.

Requirements

  • If you are using Gmail, you will need to either get App Passwords (recommended) or disable 2 way auth and turn on less secure access.
    • We recommend using App-password because that way you won't have to remove 2 way auth. Click here to see steps to create App Passwords.
    • Guide for Less Secure Access.
  • Whether you are using App Passwords or Less Secure Access, you must not put password in the main code file (In case your intent is to put code on GitHub or anywhere else publicly).
  • You will need to code an async function that will use IMAP library methods to fetch the email data and print it or maybe return it.
  • We recommend first making a working async function on your local machine, then copying it to the Twilio Functions, because debugging there is a bit difficult.

References

Bring it On!

  • Try exploring different ways of using search criteria (which is first parameter of connection.search method).

Expected Outcome

On using your local machine for coding the functions you must see the emails corresponding to the search criteria as output of the function.

Intro to Twilio Functions

Twilio Functions is a serverless environment where developers can directly write code and access the code from an API endpoint for free.

Requirements

  • First create a Twilio service in Twilio Functions available under Runtime section in Main Menu.

  • After creating a Twilio service, you can add functions in it, which will be separate endpoints for the API.

    In the image you can see 2 endpoints (/todayisawesome, /chips) and 1 asset (Seagull.png).

    2.1-twilio-functions

  • You will need to add all the required libraries in Dependencies from the Settings section.

  • We strongly recommend adding sensitive information like passwords into Environment Variables (You need to find out yourself how to access ENV variables in the code).

  • As you can see the above image that the URL of service is mongoose-8911.twil.io, and suppose the function we created is /chips, so we need to put mongoose-8911.twil.io/chips in When a message comes in input box of WhatsApp Sandbox Configuration (Don't forget to SAVE).

  • Write a code in the function which will send "Hello How are you?" back if the user messages "Hello", other wise send "Not Found" back.

  • If you are facing any problems, jump to the last task to know how debugging works, then come back.

References

Expected Outcome

After completion of this task it is expected to have the functionality that when you send the message "Hello" on WhatsApp to the Twilio number, it sends back "Hello How are you", other wise it sends back "Not Found".

Integrating the IMAP function into Twilio Functions

Integration will enable Twilio Function to fetch email data and send it to configured WhatsApp Number.

Requirements

  • In this task we will put the async IMAP function that we created and debugged, on our local machine, into the Twilio Functions.
  • Edit some code from Task-3, which sends "Hello How are you". Now it should send the string data returned from IMAP function.
  • For starters, only send back From, To and Subject data, as there is a 1600 character limit on the message text.

Bring it On!

  • Try to add more option eg if user sends text "check unseen" then it returns all the unseen messages.
  • If message is greater than 1600 characters, divide the message in parts (in case of attempting to fetch email body).
  • Try to implement a workflow such the Twilio itself sends a message whenever an email comes, instead of querying for the same.

Expected Outcome

After successful completion of this task you should be able to get the Email details on your WhatsApp.

How Debugging Works

You can see the Debugger icon ("Bug") in the top right corner of Twilio function window
5.1-twilio-functions-debugger
It looks like this
5.2-twilio-debugger-dashboard
You can see Response and Request body of every event.
5.3-twilio-debugger-event

Requirements

  • Try to use the debugger for efficient error resolving if needed.

Tip

  • The main part is the Request Inspector inside an Event, which contains the body of response.
  • All error occurred during an API call can be seen here.
  • All the console.logs can be seen inside the Response's body.

Bring it On!

  • If your project is big, you can set up a function which will send all logs as a file (maybe try to send the logs to your email using SMTP library).

Expected Outcome

You are expected to efficiently debug Twilio Functions if required.