The Ultimate To-Do List: Adding Texting with Twilio [TUTORIAL Part 2]
Who else feels like their to-do list is a mile long? Sometimes, I look at mine and think…
Sure, there are plenty of articles out there on how to “get organized.” Being an engineer though, I’d rather build something myself. Enter the Ultimate To-Do List app! You can build the v1 version of the app yourself with this tutorial.
I tested this out over the weeks and, while I am loving this app, it’s missing a key component. Texting. I’m always on my phone and I’d love reminders outside of the Slack app to keep me on track.
Read on for how to add Twilio’s texting to your Ultimate To-Do List app with RapidAPI Webhooks.
STEP 0: GET TWILIO CREDENTIALS
We’ve got a great blog post on How Connect to the Twilio API, which will guide you through the steps of getting your API credentials and setting up a new phone number. If you have already setup the Twilio API, then you can skip right to step 1!
Step 1: Setting Up Twilio Webhooks
If you thought adding Slack webhooks in the last tutorial was easy, well, you’ll like this part. My project is already using the Node.js RapidAPI SDK, which means adding another API is nothing more than adding the new code snippet to my project. No more importing different SDKs or downloading new libraries to add another API. RapidAPI gives me access to many APIs through a single SDK.
To use Twilio, just navigate to the webhookEvent function and follow the configuration settings provided, which are as follows:
- Go to Twilio and setup your incoming phone numbers
- Select a Twilio phone number that you’ll be using for your project
- Set the URL for when “a message comes in” to your RapidAPI webhooks URL
Once you’ve setup the webhooks on the Twilio developer dashboard, all you have to do is copy and paste the code snippet from RapidAPI. Here’s the code snippet that I’ll be using:
const RapidAPI = require('rapidapi-connect');
const rapid = new RapidAPI("******************************", "******************************");
rapid.listen('Twilio', 'webhookEvent', {
})
.on('join', () => {
/* YOUR CODE GOES HERE */
})
.on('message', (message) => {
/* YOUR CODE GOES HERE */
console.log(message);
})
.on('error', (error) => {
/* YOUR CODE GOES HERE */
console.log(error);
})
.on('close', (reason) => {
/* YOUR CODE GOES HERE */
});That’s all the setup require to get a second webhook working in your application. Like I said, pretty easy!
Step 2 : Parsing the Incoming SMS and Handling the Function Callbacks
In the last tutorial, I created a function to parse the text from our Slack message. Since the function takes in a string as input and returns numerical callbacks for each situation, we can use the same function to parse our Twilio SMS message too. By using the same function from last time, I just need to handle the callbacks in the same way when parseText is called. Here’s what the code looks like to handle the callbacks:
rapid.listen('Twilio', 'webhookEvent', {
})
.on('join', () => {
})
.on('message', (message) => {
var text = message.Body;
var firstSpace = text.indexOf(' ');
var len = text.length;
var text = text.substring(firstSpace+1, len);
console.log(message);
parseText(message.Body, function(res) {
// add
if(res == 1){
addToDatabase(text).then(res => {
getNoteToPrintTwilio().then((data) => {
sendListAsText(data);
});
});
// remove
} else if(res == 2){
var number = parseInt(text) - 1;
markAsDone(number).then(res => {
getNoteToPrintTwilio().then((data) => {
sendListAsText(data);
});
});
// add text
} else if(res == 3){
getNoteToPrintTwilio().then((data) => {
sendListAsText(data);
});
// print
} else if(res == 4){
addToDatabase(message.Body).then(res => {
getNoteToPrintTwilio().then((data) => {
sendListAsText(data);
});
});
} else {
console.log('ELSE: ' + text);
}
});
})
.on('error', (error) => {
console.log(error);
})
.on('close', (reason) => {
});Similar to the last project, I’ll use an addToDatabase function This function takes in a string and adds it to the database.. I’m still using MongoDB paired with Mongoose for my database, but you can use whatever DB you like.
Step 3 : Sending To-do List to Phone
Every time an action (add, remove, print) occurs through my application, I want to send an updated list back to my phone. This will allow me to always have the latest data from my to-do list. I’ve created two functions for this: getNoteToPrintTwilio and sendListAsText. getNoteToPrintTwilio is a function which pulls all of the data from the database and sendListAsText uses that data and sends it as a text through Twilio. Here are the functions that I made:
function getNoteToPrintTwilio(){
var res;
var ret = '';
return new Promise((resolve, reject) => {
Note.find({}).exec(function(err, result) {
if(!err){
for(var key in result) {
ids.push(result[key]._id);
var number = parseInt(key) + 1;
if(result[key].isDone){
ret += '☑️';
} else {
ret += '🔲'
}
ret += number + ') ';
ret += result[key].content;
ret += '\n';
}
resolve(ret);
} else {
reject('does not work');
};
});
});
}function sendListAsText(text){
rapid.call('Twilio', 'sendSms', {
'accountSid': process.env.TWILIOSID,
'accountToken': process.env.TWILIOTOKEN,
'from': process.env.PHONE,
'to': process.env.MYPHONE,
'body': text
}).on('success', (payload)=>{
/*YOUR CODE GOES HERE*/
}).on('error', (payload)=>{
consol.log(payload);
});
}
Conclusion
That’s all there is to it! By using RapidAPI, you get to spend more time coding and less time setting up new libraries and APIs to be used in your applications.
Comment down below if there are any other APIs you’d like to see implemented in the future or add a pull request on the GitHub repo adding the functionality yourself!
