DEV Community

Petr Janik
Petr Janik

Posted on • Edited on

TwilioHackathon - Autopilot, Node.js, PostgreSQL

My journey throught Twilio Hackathon on DEV 2020

This a is post describing my submission for the contest.

The beginnings

Immediately after I read the post announcing the hackathon, I decided I will participate. I have never taken part in any hackathon before and since there is a whole month to complete this was a perfect opportunity.

I have been playing with a few ideas, but unfortunately I did not come up with any breakthroughts. So, on the 13th of April I took an idea that was on my mind in that particular moment and, having more free time than usual, I started working on my submission.

What I built

I built a chat bot using Twilio Autopilot, currently integrated with WhatsApp sandbox.

The user flow

As described here, the idea is pretty simple.
After some formality on the beginning, the chat bot gives you two options.
Either to make a confession or to react to someone else's confession.

  • If you choose to submit a confession, you are prompted to enter some text. Then you are asked to wait until someone reacts to it.
  • If you choose to react to a confession, a confession from the server is fetched for you and once you answer it, the person who submitted it is notified with your answer.

Here is what it looks like in action:

  1. First person makes a confession. making a confession
  2. Second person reacts to it. reacting to confession
  3. First person receives a reaction. receiving reaction

Inside logic

The text of confession is stored with unique id, together with you UserIdentifier, which is in case of WhatsApp your telephone number prepended with whatsapp:. There is also a column keeping track of how many times this confession has been reacted upon.

When someone chooses to react to a confession, a row with smallest reaction count is picked and shown to the user. The user types some reaction. Then, because of the UserIdentifier that is store along the confession, I am able to send a message via Twilio message client to the user who submitted it. Finally, the counter is incremented.

The stack

Initially, I wanted to stick only with Twilio. Twilio provides Functions, which could be used for some logic, but I needed a database. I thought I could use DigitalOcean and set up some droplet with Node.js and Postgres, but after I have been told that my account was blocked immediately after registration, I have decided to move somewhere else.

I tried Google Firebase Functions and Realtime Database, but I have little understanding of how the Realtime Database works and my SQL approach did not fit well. After trying to get a record from the database for more than hour, I moved once again, for the last time.

I created a Heroku app with Express to process requests and PostgreSQL to store data. From now on, everything went much faster.
There was unfortunately a hiccup with processing the POST request body that I was receiving from Twilio, but setting body-parser solved it.

app.use(bodyParser.urlencoded({
    extended: false
}));
Enter fullscreen mode Exit fullscreen mode

Integration

Twilio offers multiple channels for the Autopilot.

  • Programmable messaging requires a mobile number. The provided international one does not behave well in my country. The messages are sent to that number, but the response is received from a universal Info number. Currently I am in the middle of process of issuing a Regulatory Bundle, which is required for buying a Czech number.
  • Setting Facebook Messenger gives me 500 Internal Server Error. Probably something wrong on Twilio side.
  • WhatsApp would have to formally approve my account. But, fortunately, Twilio offers a sandbox, which is currently the way I am testing my chat bot.

How I used Autopilot

Autopilot uses tasks. The tasks can be trained by specifying samples that trigger them. For example my make_a_confession task can be triggered by user saying 'I want to make a confession'.
They are programmed what to do when they are triggered. The following JSON tells Autopilot to ask user for input and then make a POST request on the specified uri.

{
    "actions": [
        {
            "collect": {
                "name": "collect_confession",
                "questions": [
                    {
                        "question": "What is your confession?",
                        "name": "confession"
                    }
                ],
                "on_complete": {
                    "redirect": {
                        "method": "POST",
                        "uri": "https://twilio-hackathon.herokuapp.com/confession"
                    }
                }
            }
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

The outcomes

The whole project has been a lot of fun. Twilio platform was intuitive to use, but sometimes I found myself going in circles in their documentation. I think this is something that should be improved.

Link to Code

The whole backend code is available on GitHub.

GitHub logo petr7555 / TwilioHackathon

A messaging app using Twilio API created for Twilio Hackathon on DEV 2020

TwilioHackathon 2020 chat bot app

A chat bot that connects people who submit confessions with people who answer them.

See the post on DEV.

PostgreSQL runs on alwaysdata. Node server runs on render.

making a confession reacting to confession reacting to confession

Deployment

  • You need an underlying Twilio Autopilot that uses endpoints in index.js.
    • Support for Autopilot will be discontinued on February 25, 2023, and the product will no longer be accessible starting August 25, 2023.
  • After integrating the Autopilot with WhatsApp, set SENDER environment variable.
  • Create a PostgreSQL database and set DATABASE_URL environment variable.

Overall, you need to specify the following environment variables:

TWILIO_ACCOUNT_SID=************************
TWILIO_AUTH_TOKEN=*************************
SENDER=whatsapp:+123456789
DATABASE_URL=postgres://**********



Top comments (2)

Collapse
 
madebygps profile image
Gwyneth Peña-Siguenza

Creative idea!

Collapse
 
petr7555 profile image
Petr Janik

Thanks!